/*
 * Please place your own CSS code to this file
 *
 */  
[data-bs-theme=light] {
  --bs-link-color: #AA182C !important;
  --bs-link-color-rgb: 170, 24, 44 !important;
  --bs-link-decoration: none;
  --bs-link-hover-color: #AA182C !important;
  --bs-link-hover-color-rgb: 170, 24, 44 !important;
  }

.casasco-title {
  font-size: 1.2rem;
  color: #AA182C;
  font-weight: 700;
  text-align: center;
   text-transform: uppercase;
}

.primary-title {
  font-size: 30px;
  color: #AA182C;
  font-weight: 700;
  text-transform: uppercase;
}

.novedades-title {
  font-size: 22px;
  color: #2E2F32;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
}

.casasco-bg {
  color: #AA182C;
}

.text-historia {
  font-size: 18px;
}

.link-red {
    background-color: #AA182C;
    color: #FFFFFF;
    padding: 5px 20px;

}

.link-red-nobut {
    color: #AA182C;

}

.texto-box {
    font-size: 26px;
    color: #FFFFFF;
    line-height: 30px;
    text-align: center;

}

.texto-box2 {
    font-size: 26px;
    text-transform: uppercase;
    color:#AA182C;
    line-height: 30px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;

}

.texto-box-small {
    font-size: 20px;
    text-transform: uppercase;
    color:#AA182C;
    line-height: 24px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;

}

.primary-border {
    border: 2px solid #AA182C;
}

.blank-space {
  height: 40px; /* o lo que quieras */
  width: 100%;
  display: block;
}

.site-branding img {
    max-width: 280px !important; /* ajustá el tamaño */
    height: auto;
}

.noshadow {
    box-shadow: none !important;
}

@media (min-width: 768px) {
  .node--type-landing-page .content > section:first-child > div[class*='container']:not(.space-0) {
    padding-top: 5rem !important;
  }
}

/* --- OVERRIDE FOOTER FULL WIDTH (CASASCO) --- */
.footer-fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #2e3237; /* color del fondo */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* el container interno del theme NO debe agregar padding */
.footer-fullwidth .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* quitar padding del container que mete el tema ANTES de tu bloque */
footer > .container {
  padding: 0 !important;
}

/* -----------------------------
   PRODUCTO – ESTILOS GENERALES
-------------------------------- */

/* --- ESTILOS FICHA DE PRODUCTO CASASCO --- */

/* Contenedor de la izquierda */
.product-specs-container {
    padding-right: 20px;
}

/* Cada bloque de información */
.product-block {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0; /* Línea divisoria sutil */
    padding-bottom: 1.5rem;
}

.product-block:last-child {
    border-bottom: none;
}

/* Títulos de las secciones (Descripción, Acción, etc) */
.spec-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

/* Estilo especial para la Línea (Badge) */
.product-line-badge .field__item a,
.product-line-badge .field__item {
    display: inline-block;
    background-color: #f1f5f9;
    color: #2d3748;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

/* --- TARJETA DERECHA (Imagen + Botón) --- */
.product-media-card {
    background-color: #fcfcfc; /* Gris casi blanco, muy sutil */
    border: 1px solid #eee;
    border-radius: 12px; /* Bordes redondeados modernos */
    padding: 2.5rem;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); /* Sombra suave flotante */
}

.product-image img {
    max-height: 350px; /* Evita que la imagen sea gigante */
    width: auto;
    margin: 0 auto;
    display: block;
    mix-blend-mode: multiply; /* Truco para que si la imagen tiene fondo blanco se fusione mejor */
}

/* Botón Rojo Casasco */
.btn-casasco-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #AA182C;
    color: #ffffff !important;
    padding: 14px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #AA182C;
    gap: 8px; /* Espacio para ícono si lo hubiera */
}

.btn-casasco-pdf:hover {
    background-color: #ffffff;
    color: #AA182C !important;
    border-color: #AA182C;
    box-shadow: 0 5px 15px rgba(170, 24, 44, 0.2);
}

/* Ocultar el label automático de Drupal */
.product-block .field--label {
    display: none !important;
}

/* --- BADGE UNIFICADO (Texto + Link adentro) --- */

.product-line-badge {
    display: inline-flex;       /* Para que se ajuste al contenido */
    align-items: center;
    background-color: #AA182C;  /* Rojo Casasco */
    color: #ffffff;             /* Texto blanco */
    padding: 6px 16px;          /* Espaciado interno */
    border-radius: 50px;        /* Redondeado completo */
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}

/* El link de la taxonomía adentro del badge */
.product-line-badge a {
    color: #ffffff !important;  /* Forzamos blanco */
    text-decoration: none;
    background: none;           /* Sin fondo propio */
    padding: 0;                 /* Sin padding propio */
    margin-left: 4px;           /* Separación chiquita de la palabra 'Línea:' */
    text-transform: uppercase;  /* Opcional: si querés que 'Urogenital' vaya en mayúsculas */
}

.product-line-badge a:hover {
    text-decoration: underline; /* Detalle al pasar el mouse */
    color: #ffffff !important;
}

/* Fix para que Drupal no rompa la línea si mete divs extra */
.product-line-badge .field--item,
.product-line-badge .field__item {
    display: inline;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .product-media-card {
        margin-top: 2rem;
        padding: 1.5rem;
    }
}

/* Ocultar el header global del tema SOLO en fichas de producto 
   para usar nuestro propio diseño custom */


/* Esto borra la sección blanca entre el menú y el gris */
body.page-node-type-producto section.title-wrapper {
    display: none !important;
}

/* 2. Header Full Width (Rompe la caja para ir de borde a borde) */
.product-header-custom {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #f8f9fa;
    padding: 4rem 0;
    margin-bottom: 3rem;
    margin-top: 20px !important; 

}

/* 3. ASEGURAR QUE EL MENÚ NO TENGA MARGEN ABAJO */
body.page-node-type-producto nav.navbar,
body.page-node-type-producto header {
    margin-bottom: 0 !important;
}

/* Ajuste del título para que se vea elegante */
.product-header-custom h1 {
    color: #2d3748;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
/* --- BREADCRUMB (Estilo Light y Gris) --- */

.casasco-breadcrumb {
    font-size: 0.85rem;       /* Bajamos el tamaño (aprox 13/14px) */
    color: #888;              /* Gris medio */
    font-weight: 300;         /* Light / Finito */
    margin-top: 8px;
    font-family: sans-serif;  /* Aseguramos tipografía limpia */
}

/* Links del breadcrumb (Home, Línea) */
.casasco-breadcrumb a {
    color: #666 !important;   /* Gris oscuro, NO ROJO */
    text-decoration: none;
    font-weight: 400;         /* Regular, no bold */
    transition: color 0.2s;
}

.casasco-breadcrumb a:hover {
    color: #AA182C !important; /* Solo rojo al pasar el mouse (detalle sutil) */
    text-decoration: underline;
}

/* El separador "/" */
.casasco-breadcrumb .separator {
    margin: 0 6px;
    color: #ccc;              /* Gris muy clarito */
    font-weight: 300;
}

/* El texto del producto actual (último item) */
.casasco-breadcrumb span.text-muted {
    color: #999 !important;   /* Gris más claro para diferenciar */
    font-weight: 300;
}

/* --- VADEMÉCUM CASASCO - DISEÑO FINAL --- */

/* 1. CONTENEDOR DEL BUSCADOR */
.views-exposed-form {
    background-color: #F8F9FA; /* Gris muy suave */
    padding: 40px 50px;        /* Mucho aire */
    border-radius: 8px;
    margin-bottom: 60px;       /* Separación con la lista */
}

/* Flexbox para alinear todo en una fila */
.views-exposed-form .d-flex {
    display: flex !important;
    flex-wrap: nowrap;         /* Forzamos una sola línea en desktop */
    align-items: flex-end;     /* Alineamos abajo */
    gap: 30px;                 /* Espacio entre columnas */
}

/* Reseteo de márgenes molestos de Drupal/Bootstrap */
.views-exposed-form .js-form-item,
.views-exposed-form .form-actions {
    margin-bottom: 0 !important; /* Chau mb-4 */
    flex: 1;                     /* Que ocupen ancho parejo */
}

/* El botón no necesita estirarse tanto */
.views-exposed-form .form-actions {
    flex: 0 0 auto;
    width: auto;
}

/* Inputs y Selects */
.views-exposed-form .form-control,
.views-exposed-form .form-select {
    height: 50px;              /* Altura generosa */
    border-radius: 4px;
    border: 1px solid #ced4da;
    box-shadow: none;
    background-color: #fff;
}

/* Labels (Títulos de los filtros) */
.views-exposed-form label {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    color: #888;
    margin-bottom: 8px;
    display: block;
}

/* Botón BUSCAR */
.views-exposed-form .form-submit {
    height: 50px;              /* Misma altura que inputs */
    background-color: #AA182C; /* Rojo Casasco */
    border-color: #AA182C;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 40px;
    width: 100%;
    transition: background 0.3s;
}

.views-exposed-form .form-submit:hover {
    background-color: #8a1222;
    border-color: #8a1222;
}


/* ===========================================================
   FORM CASASCO – GRID 2 COLUMNAS + FIX ESTILOS (FINAL)
   =========================================================== */

/* 1. OCULTAR LABELS (Estilo limpio) */
.contact-message-contacto-casasco-form label {
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* 2. CONFIGURACIÓN DE LA GRILLA (2 Columnas) */
.contact-message-contacto-casasco-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* Espacio entre campos */
}

/* 3. CAMPOS FULL WIDTH (Ocupan todo el ancho de la fila) */
/* Dirección, Opción 2, Comentarios, Captcha y Botones */
.contact-message-contacto-casasco-form #edit-field-direccion-wrapper,
.contact-message-contacto-casasco-form #edit-field-seleccione-una-opcion-wrapper,
.contact-message-contacto-casasco-form #edit-field-seleccione-una-opcion2-wrapper,
.contact-message-contacto-casasco-form #edit-field-comentarios-wrapper,
.contact-message-contacto-casasco-form #edit-actions,
.contact-message-contacto-casasco-form .captcha {
  grid-column: 1 / -1; /* Ocupa de punta a punta */
}

/* 4. FIX IMPORTANTE: NOMBRE Y EMAIL */
/* Esto arregla lo "descajetado". Les prohíbe flotar y los fuerza a llenar su celda de la grilla */
.contact-message-contacto-casasco-form .form-item-name,
.contact-message-contacto-casasco-form .form-item-mail {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. INPUTS AL 100% (Cajitas de texto) */
.contact-message-contacto-casasco-form .form-control,
.contact-message-contacto-casasco-form select,
.contact-message-contacto-casasco-form textarea {
  width: 100% !important;
  max-width: 100%;
}

/* 6. MOBILE (Todo a 1 sola columna vertical) */
@media (max-width: 767px) {
  .contact-message-contacto-casasco-form form {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   FORM COMEX – GRID 2 COLUMNAS (Corrección Final)
=========================================================== */

/* 1. Ocultar labels (Estilo limpio) */
.contact-message-contacto-comex-form label {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* 2. CONFIGURACIÓN DE LA GRILLA */
.contact-message-contacto-comex-form form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas: Nombre | Apellido */
  gap: 20px;
}

/* 3. CAMPOS FULL WIDTH (Ocupan todo el ancho) */
/* Comentarios, Captcha, Botones y el EMAIL (para que quede centrado y largo) */
.contact-message-contacto-comex-form #edit-field-comentarios-wrapper,
.contact-message-contacto-comex-form .form-item-mail, /* <--- OJO: Este es el selector correcto para el email del sistema */
.contact-message-contacto-comex-form #edit-actions,
.contact-message-contacto-comex-form .captcha {
  grid-column: 1 / -1;
}

/* 4. FIX CAMPOS DE SISTEMA (Nombre y Email) */
/* Esto soluciona lo "descajetado". Les prohíbe flotar y los fuerza a llenar su celda */
.contact-message-contacto-comex-form .form-item-name,
.contact-message-contacto-comex-form .form-item-mail {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. INPUTS AL 100% */
.contact-message-contacto-comex-form .form-control,
.contact-message-contacto-comex-form select,
.contact-message-contacto-comex-form textarea {
  width: 100% !important;
  max-width: 100%;
}

/* 6. MOBILE (Todo a 1 columna) */
@media (max-width: 767px) {
  .contact-message-contacto-comex-form form {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   FORMULARIO FARMACOVIGILANCIA (Labels ocultos + Fix Ancho)
   =========================================================== */

/* 1. Ocultar labels visualmente (Accesibilidad OK) */
.contact-message-farmacovigilancia-form label {
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Ocultar label específico de fecha que a veces molesta */
.contact-message-farmacovigilancia-form #edit-field-fecha-de-dosis-wrapper > label {
  display: none !important;
}

/* 2. SOLUCIÓN AL PROBLEMA DEL 50% (Nombre y Email) */
/* Forzamos a los contenedores de "name" y "mail" a ocupar todo el ancho */
#contact-message-farmacovigilancia-form .form-item-name, 
#contact-message-farmacovigilancia-form .form-item-mail {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;       /* Evita que se pongan uno al lado del otro */
    display: block !important;    /* Asegura que sean bloques apilados */
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Aseguramos que la cajita blanca (input) también se estire */
#contact-message-farmacovigilancia-form .form-item-name input, 
#contact-message-farmacovigilancia-form .form-item-mail input {
    width: 100% !important;
    max-width: 100% !important;
}




.bg-casasco {
  --bs-bg-opacity: 1;
  background-color: #AA182C !important;
}

.bg-casasco-gris {
  --bs-bg-opacity: 1;
  background-color: #58595B !important;
}

/* Navbar con línea/sombra SOLO en páginas específicas */

/* Ofertas Laborales */
body.page-node-144 .navbar.navbar-default:not(.navbar-stick),

/* Contacto */
body.page-node-68 .navbar.navbar-default:not(.navbar-stick),

/* Productos */
body.path-productos .navbar.navbar-default:not(.navbar-stick) {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  padding-bottom: 0.5rem;
}

/* ===========================================================
   TIMELINE CASASCO (Historia) - VERSIÓN V3 (FIX BOX-SHADOW)
=========================================================== */

/* 1. RESETEO (Para limpiar estilos del tema) */
ul.main-timeline {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

ul.main-timeline li.timeline-item {
    border: none !important;         
    background: transparent !important; 
    list-style-type: none !important; 
    margin-left: 0 !important;
    padding-left: 50px; 
    position: relative;
    margin-bottom: 3rem;
}

/* Asegurar que no aparezcan pseudo-elementos raros del tema */
ul.main-timeline li.timeline-item::before,
ul.main-timeline li.timeline-item::after {
    /* display: none !important;  <-- A veces esto rompe el clearfix, mejor resetear */
    content: none !important;
    border: none !important;
    background: none !important;
}

/* 2. LA LÍNEA CENTRAL (Gris) */
.main-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px; 
    width: 2px;
    background-color: #e9ecef; 
    z-index: 0;
}

/* 3. EL PUNTO (Marker) - AQUÍ ESTÁ EL ARREGLO CLAVE */
.timeline-marker {
    width: 20px !important;
    height: 20px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
    
    /* Tu corrección de altura */
    top: 35px !important; 
    
    /* El anillo rojo hecho con sombra */
    box-shadow: 0 0 0 2px #AA182C !important; 
    
    position: absolute !important;
    z-index: 100 !important;
}

.text-casasco {
    color: #AA182C !important;
}

/* --- VERSIÓN ESCRITORIO (Más de 768px) --- */
@media (min-width: 768px) {
    
    .main-timeline::before {
        left: 50% !important;
        transform: translateX(-50%);
    }

    ul.main-timeline li.timeline-item {
        width: 50%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0; 
        padding-bottom: 3rem;
    }

    /* --- ITEM IZQUIERDA (Impares) --- */
    ul.main-timeline li.timeline-item:nth-child(odd) {
        float: left;
        padding-right: 40px !important; 
        text-align: right; 
        clear: left;
    }
    
ul.main-timeline li.timeline-item:nth-child(odd) .timeline-marker {
        right: -11px !important; /* -10px (mitad) - 1px (ajuste fino) */
        left: auto !important;   /* ESTO ES CLAVE: Anula cualquier left heredado */
    }

    /* --- ITEM DERECHA (Pares) --- */
    ul.main-timeline li.timeline-item:nth-child(even) {
        float: right;
        padding-left: 40px !important; 
        text-align: left;
        margin-top: 3rem; 
        clear: right;
    }

    ul.main-timeline li.timeline-item:nth-child(even) .timeline-marker {
        left: -11px !important;  /* -10px (mitad) - 1px (ajuste fino) */
        right: auto !important;  /* ESTO ES CLAVE: Anula cualquier right heredado */
    }
    
    /* Flechitas decorativas */
    ul.main-timeline li.timeline-item:nth-child(odd) .card::after {
        content: "";
        position: absolute;
        top: 20px;
        right: -10px;
        border-width: 10px 0 10px 10px;
        border-style: solid;
        border-color: transparent transparent transparent #fff;
        display: block;
    }
    
    ul.main-timeline li.timeline-item:nth-child(even) .card::after {
        content: "";
        position: absolute;
        top: 20px;
        left: -10px;
        border-width: 10px 10px 10px 0;
        border-style: solid;
        border-color: transparent #fff transparent transparent;
        display: block;
    }
}

/* Limpiar floats */
.main-timeline::after {
    content: "";
    display: table;
    clear: both;
}

/* 3. UBICACIÓN PARA MÓVIL (Menos de 768px) */
@media (max-width: 767px) {
    .timeline-marker {
        left: 11px !important; /* Ajuste para que caiga sobre la línea en móvil */
        right: auto !important;
    }
}

.timeline-marker::before {
    left: 4.2px !important; 
    /* Aseguramos que se mantenga el estilo rojo/blanco si hace falta */
    border-color: #AA182C !important;
}

/* 2. BORDE ROJO EN LAS CARDS (NUEVO) 🔴 */
.timeline-content .card {
    /* El borde rojo de 2px abajo */
    border-bottom: 2px solid #AA182C !important;
    
    /* DETALLE DE DISEÑO: */
    /* Para que la línea roja quede recta y perfecta, 
       conviene quitar el redondeado (radius) solo de abajo */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

    /* Mantenemos el redondeado arriba para que quede elegante */
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    
    /* Sombra suave para levantar la tarjeta */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* ===========================================================
   FORM SOLICITUD MATERIAL CIENTÍFICO
   MISMA LÓGICA QUE FORM COMEX
=========================================================== */

/* Contenedor del formulario */
.contact-message-solicitud-material-cientifico-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* Campos FULL WIDTH */
.contact-message-solicitud-material-cientifico-form
#edit-field-visitado-por-un-wrapper,
.contact-message-solicitud-material-cientifico-form
#edit-field-tema-wrapper,
.contact-message-solicitud-material-cientifico-form
#edit-actions,
.contact-message-solicitud-material-cientifico-form
.captcha {
  grid-column: 1 / 3;
}

/* --- AGREGADO: FIX ANCHO NOMBRE Y EMAIL --- */
/* Esto fuerza a los campos del sistema a llenar su celda en la grilla */
.contact-message-solicitud-material-cientifico-form .form-item-name,
.contact-message-solicitud-material-cientifico-form .form-item-mail {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ------------------------------------------ */

/* Inputs full width */
.contact-message-solicitud-material-cientifico-form .form-control,
.contact-message-solicitud-material-cientifico-form select,
.contact-message-solicitud-material-cientifico-form textarea {
  width: 100% !important;
  max-width: 100%;
}

/* ===============================
   RADIOS (VISITADO POR UN REP.)
================================ */

/* Mostrar radios en línea */
.contact-message-solicitud-material-cientifico-form
#edit-field-visitado-por-un {
  display: flex;
  gap: 30px;
  margin-top: 10px;
}

/* Ocultar opción N/A */
#edit-field-visitado-por-un-none,
label[for="edit-field-visitado-por-un-none"] {
  display: none !important;
}

/* ===============================
   CAPTCHA
================================ */

/* No ocultar label del captcha */
.contact-message-solicitud-material-cientifico-form
.captcha label {
  position: static !important;
  height: auto;
  width: auto;
  clip: auto;
  overflow: visible;
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 767px) {
  .contact-message-solicitud-material-cientifico-form form {
    grid-template-columns: 1fr;
  }

  .contact-message-solicitud-material-cientifico-form
  #edit-field-visitado-por-un-wrapper,
  .contact-message-solicitud-material-cientifico-form
  #edit-field-tema-wrapper,
  .contact-message-solicitud-material-cientifico-form
  #edit-actions,
  .contact-message-solicitud-material-cientifico-form
  .captcha {
    grid-column: 1 / 2;
  }
}

/* Inputs normales */
input.form-control {
  padding: 0.46428571em;
}

/* Radios y checkboxes: reset 
input.form-radio,
input.form-checkbox {
  padding: 0;
}
  */

  .form-check-input {
    height: 0.85rem !important;
  }

  .form-check-input:checked {
  background-color: #AA182C !important;
  border-color: #AA182C !important;
}

@media (min-width: 1200px) {
  legend {
    font-size: 1rem;
  }
}



/* ======================================================= */
/* FIX DEFINITIVO LANGUAGE SWITCHER (Limpio y Corregido)   */
/* ======================================================= */

/* 1. CONTENEDOR PRINCIPAL (Alineación con el botón de contacto) */
.region-navigation-other,
.navbar-other .region-navigation-other {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
}

/* 2. EL BLOQUE DEL IDIOMA (Reseteo de márgenes) */
#block-sandbox-languageswitcher-2,
.language-switcher-language-url {
    margin: 0;
    padding: 0;
}

/* 3. ALINEACIÓN INTERNA (Pone ES y EN uno al lado del otro) */
#block-sandbox-languageswitcher-2 .links,
.language-switcher-language-url .links {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 8px; /* Espacio entre los dos idiomas */
    list-style: none;
}

/* 4. DOMANDO A BOOTSTRAP (Saca el relleno extra que rompe todo) */
#block-sandbox-languageswitcher-2 .nav-link,
.language-switcher-language-url .nav-link {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    border: none !important;
}

/* 5. ESTILO VISUAL DE LOS TEXTOS (Color, Negrita, Tamaño) */
#block-sandbox-languageswitcher-2 a.language-link,
.language-switcher-language-url a.language-link {
    font-size: 13px;
    font-weight: 700;        /* Negrita */
    text-transform: uppercase;
    text-decoration: none;
    color: #AA182C !important; /* Tu color azul */
    line-height: 1;
    cursor: pointer;
}

/* Estilo para el idioma activo (más clarito/deshabilitado) */
#block-sandbox-languageswitcher-2 a.language-link.is-active,
.language-switcher-language-url a.language-link.is-active {
    opacity: 0.5;
    pointer-events: none;
}

/* ======================================================= */
/* 6. EL PARCHE SOLO PARA INGLÉS ("English" -> "EN")       */
/* ======================================================= */

/* Ocultamos la palabra larga "English" SOLO en el link de inglés */
#block-sandbox-languageswitcher-2 a.language-link[hreflang="en"],
.language-switcher-language-url a.language-link[hreflang="en"] {
    font-size: 0 !important;
    display: inline-flex;
}

/* Dibujamos "EN" encima */
#block-sandbox-languageswitcher-2 a.language-link[hreflang="en"]::after,
.language-switcher-language-url a.language-link[hreflang="en"]::after {
    content: "EN";
    font-size: 13px;      /* Restauramos el tamaño visible */
    font-weight: 700;
    color: #AA182C;
    text-transform: uppercase;
}

@media (max-width: 991px) {
  .navbar-other #block-sandbox-languageswitcher-2 {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .offcanvas-nav .region-navigation-collapsible #block-language-switcher-mobile {
    display: none !important;
  }
}

/* MOBILE: mostrar y estilizar language switcher dentro del offcanvas */
@media (max-width: 991px) {
  .offcanvas-nav #block-language-switcher-mobile {
    display: block !important;
    margin: 10px 0 15px;
  }

  .offcanvas-nav #block-language-switcher-mobile .links {
    display: flex !important;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .offcanvas-nav #block-language-switcher-mobile .language-link {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff !important;         /* offcanvas suele ser oscuro */
    text-decoration: none;
  }

  .offcanvas-nav #block-language-switcher-mobile .language-link.is-active {
    opacity: 0.6;
    pointer-events: none;
  }

  /* opcional: English -> EN solo en mobile */
  .offcanvas-nav #block-language-switcher-mobile a.language-link[hreflang="en"] {
    font-size: 0 !important;
  }
  .offcanvas-nav #block-language-switcher-mobile a.language-link[hreflang="en"]::after {
    content: "EN";
    font-size: 13px;
    font-weight: 700;
    color: #fff;
  }
}

/* ===========================================================
   NUEVO: BADGE SIN TACC (Overlay en productos)
=========================================================== */

/* Contenedor de la imagen: Necesario para que el badge sepa dónde ubicarse */
.product-image {
  position: relative !important; 
  display: inline-block; /* Se ajusta al tamaño de la foto */
}

/* El Logo flotante */
.badge-sin-tacc {
  position: absolute;
  top: -10px;   
  right: -10px; 
  width: 52px !important;  /* <--- EL CAMBIO CLAVE: !important */
  max-width: 52px !important; /* Aseguramos que nada lo estire */
  height: auto !important;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse (opcional) */
.badge-sin-tacc:hover {
  transform: scale(1.1);
}

/* Ajuste para móviles (opcional): si la pantalla es chica, el logo se achica un poco */
@media (max-width: 768px) {
  .badge-sin-tacc {
    width: 45px;
    top: -5px;
    right: -5px;
  }
}

/* Botón Buscar de la vista de productos */
#edit-submit-listado-de-productos {
  border-radius: 50rem;      /* equivalente a .rounded-pill */
  padding-inline: 1.5rem;    /* un poco más de ancho, como los botones pill */           
}

/* ===========================================================
   FORM SOLICITUD VISITA MÉDICA (Corrección Final)
=========================================================== */

/* 1. Ocultar labels (Estilo limpio) */
.contact-message-solicitud-de-visita-medica-form label {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* 2. CONFIGURACIÓN DE LA GRILLA (2 Columnas) */
.contact-message-solicitud-de-visita-medica-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 3. CAMPOS FULL WIDTH (Ocupan todo el ancho de la fila) */
/* Dirección, Provincia, Días y Horarios, Comentarios, Captcha y Botones */
.contact-message-solicitud-de-visita-medica-form #edit-field-direccion-de-consultorio-wrapper,
.contact-message-solicitud-de-visita-medica-form #edit-field-provincia-wrapper,
.contact-message-solicitud-de-visita-medica-form #edit-field-dias-y-horarios-de-atencio-wrapper,
.contact-message-solicitud-de-visita-medica-form #edit-field-comentarios-wrapper,
.contact-message-solicitud-de-visita-medica-form #edit-actions,
.contact-message-solicitud-de-visita-medica-form .captcha {
  grid-column: 1 / -1;
}

/* 4. FIX CAMPOS DE SISTEMA (Nombre y Email) */
/* Soluciona que se vean al 50% o flotando mal */
.contact-message-solicitud-de-visita-medica-form .form-item-name,
.contact-message-solicitud-de-visita-medica-form .form-item-mail {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. INPUTS AL 100% */
.contact-message-solicitud-de-visita-medica-form .form-control,
.contact-message-solicitud-de-visita-medica-form select,
.contact-message-solicitud-de-visita-medica-form textarea {
  width: 100% !important;
  max-width: 100%;
}

/* 6. MOBILE (Todo a 1 columna) */
@media (max-width: 767px) {
  .contact-message-solicitud-de-visita-medica-form form {
    grid-template-columns: 1fr;
  }
}



/* ======================================================= */
/* ICONO BUSCADOR (LUPA) - COLOR CASASCO                   */
/* ======================================================= */

.nav-link-search,
.nav-link-search i,
.nav-link-search svg,
.nav-link-search::before {
    color: #AA182C !important;
    fill: #AA182C !important; /* Por si es un SVG */
    border-color: #AA182C !important; /* Por si tiene borde */
}

/* En caso de que sea una imagen de fondo negra (hack para teñirla de rojo) */
/* Solo se activa si las reglas de arriba no funcionan por sí solas */
.nav-link-search {
    /* Si ves que con lo de arriba no cambia, descomentá la linea de abajo: */
    /* filter: invert(16%) sepia(68%) saturate(3065%) hue-rotate(338deg) brightness(88%) contrast(93%); */
}

/* ===========================================================
   AUTOCOMPLETE CASASCO - ESTILOS DEL DESPLEGABLE (FINAL)
   =========================================================== */

/* 1. CONTENEDOR PRINCIPAL */
body ul.ui-autocomplete.ui-widget-content {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
    background: #ffffff !important;
    font-family: inherit;
    overflow: hidden;
    z-index: 9999 !important;
}

/* 2. ÍTEMS DE LA LISTA */
body ul.ui-autocomplete .ui-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important; /* Asegura que no tenga fondo propio */
}

/* El enlace clickable */
body ul.ui-autocomplete .ui-menu-item-wrapper {
    display: block !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    color: #333333 !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    /* IMPORTANTE: Sacamos la transición general para evitar flashes */
    transition: none !important; 
    cursor: pointer;
    background: transparent !important;
}

/* Sacamos la línea del último */
body ul.ui-autocomplete .ui-menu-item:last-child .ui-menu-item-wrapper {
    border-bottom: none !important;
}

body ul.ui-autocomplete .ui-menu-item-wrapper p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline;
}

/* 3. COINCIDENCIAS (Texto escrito) */
.ui-autocomplete-field-term {
    font-weight: 800 !important;
    color: #AA182C !important;
}

/* 4. HOVER, ACTIVE Y FOCUS (Corrección del Flash Azul) */
/* Usamos selectores combinados para aplastar cualquier estilo por defecto */

body ul.ui-autocomplete .ui-menu-item-wrapper:hover,
body ul.ui-autocomplete .ui-menu-item-wrapper:focus,
body ul.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
body ul.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
body ul.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active { 
    background: #AA182C !important;    
    background-color: #AA182C !important;
    background-image: none !important; /* Mata degradados azules */
    color: #ffffff !important;         
    border: none !important;           /* Mata bordes azules */
    border-bottom: 1px solid #AA182C !important;
    margin: 0 !important;
    outline: none !important;
    transition: none !important;       /* El cambio debe ser instantáneo */
}

/* Inversión de color en el Hover */
body ul.ui-autocomplete .ui-menu-item-wrapper:hover .ui-autocomplete-field-term,
body ul.ui-autocomplete .ui-menu-item-wrapper.ui-state-active .ui-autocomplete-field-term,
body ul.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus .ui-autocomplete-field-term {
    color: #ffffff !important;
    text-decoration: underline;
}

/* 5. SECCIÓN "VER TODOS LOS RESULTADOS" */
body .ui-autocomplete-container-more_results {
    background-color: #f8f9fa !important;
    border-top: 2px solid #e9ecef !important;
    margin: 0 !important;
}

body .ui-autocomplete-container-more_results .ui-menu-item-wrapper {
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700 !important;
    color: #AA182C !important;
    text-align: center;
    padding: 15px !important;
    background: transparent !important;
}

/* Hover específico para el botón "Ver más" */
body .ui-autocomplete-container-more_results .ui-menu-item-wrapper:hover,
body .ui-autocomplete-container-more_results .ui-menu-item-wrapper.ui-state-active {
    background-color: #8a1222 !important;
    color: #ffffff !important;
}

/* ===========================================================
   2. TABLA DE RESULTADOS Y LISTADO DE PRODUCTOS (FINAL)
   =========================================================== */

/* --- ESTILOS BASE (Aplican a todos los dispositivos) --- */

/* Forzamos fondo transparente base para matar el 'table-striped' por defecto de Bootstrap
   (Luego lo re-activamos específicamente en Desktop) */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent !important;
    box-shadow: none !important;
}

/* Bordes base (Minimalistas por defecto) */
.table tbody tr {
    border-bottom: 1px solid #e9ecef;
}

.table td {
    padding: 10px 15px;
    vertical-align: middle;
    border: none;
    color: #666;
    font-size: 0.85rem;
}

/* Nombre del Producto (Rojo y Grande) */
.views-field-title a {
    color: #AA182C !important;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.views-field-title a:hover {
    text-decoration: underline;
}

/* Limpiar párrafos dentro de celdas */
.views-field-field-principio-activo-ref p {
    margin: 0;
    padding: 0;
}

/* --- AJUSTE FORMULARIO BUSCADOR EN TABLET/MOBILE --- */
@media (max-width: 991px) {
    .views-exposed-form .d-flex {
        flex-wrap: wrap; /* En celular, uno abajo del otro */
    }
    .views-exposed-form .js-form-item,
    .views-exposed-form .form-actions {
        flex: 0 0 100%;
        margin-bottom: 20px !important;
    }
}

/* ===========================================================
   DISEÑO MOBILE: CARDS (Tarjetas estilo App)
   Aplica solo en pantallas chicas (menos de 768px)
   =========================================================== */

@media (max-width: 767px) {
    
    /* 1. RESET DE ESTRUCTURA (Matamos la tabla) */
    .view-listado-de-productos table,
    .view-listado-de-productos tbody,
    .view-listado-de-productos tr,
    .view-listado-de-productos td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Ocultamos el encabezado viejo de la tabla */
    .view-listado-de-productos thead {
        display: none;
    }

    /* 2. ESTILO TARJETA (El contenedor blanco) */
    .view-listado-de-productos tbody tr {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 16px; 
        box-shadow: 0 8px 20px rgba(0,0,0,0.06); 
        margin-bottom: 25px; 
        padding: 25px; 
        position: relative;
    }

    /* 3. ESTILO DE LOS RENGLONES DE DATOS */
    .view-listado-de-productos td {
        padding: 12px 0;
        border: none;
        border-bottom: 1px solid #f1f3f5; 
        text-align: left;
        color: #495057; 
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .view-listado-de-productos td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* 4. HEADER DE LA TARJETA (Título) */
    .view-listado-de-productos td.views-field-title {
        padding-top: 0;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 2px solid #AA182C; 
    }

    .view-listado-de-productos td.views-field-title a {
        font-size: 1rem; 
        font-weight: 800; 
        color: #AA182C !important; 
        line-height: 1.2;
        display: flex;
        justify-content: space-between; 
        align-items: center;            
    }

    /* Flechita CSS */
    .view-listado-de-productos td.views-field-title a::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-top: 3px solid #AA182C; 
        border-right: 3px solid #AA182C;
        transform: rotate(45deg); 
        margin-left: 15px; 
    }

    .view-listado-de-productos td.views-field-title a:active {
        opacity: 0.6; 
        transition: opacity 0.1s;
    }
    
    .view-listado-de-productos td.views-field-title a:active::after {
        transform: rotate(45deg) translate(2px, -2px);
    }

    /* 5. LABELS AUTOMÁTICOS */
    .view-listado-de-productos td:not(.views-field-title)::before {
        display: block;
        font-size: 0.7rem;
        color: #adb5bd; 
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
        content: attr(data-dummy); /* Fallback */
    }

    /* Asignación manual de labels mobile */
    .view-listado-de-productos td.views-field-field-linea::before { content: "Línea"; }
    .view-listado-de-productos td.views-field-field-principio-activo-ref::before { content: "Principio Activo"; }
    .view-listado-de-productos td.views-field-field-accion-terapeutica::before { content: "Acción Terapéutica"; }
}

/* ===========================================================
   BOTÓN BORRAR FILTROS: TEXTO DEBAJO DEL BUSCAR
   =========================================================== */

/* 1. Contenedor: Apilamos los botones verticalmente */
#edit-actions {
    display: flex !important;
    flex-direction: column !important; /* La clave: columna vertical */
    gap: 5px;                          /* Espacio entre el botón y el texto */
}

/* 2. Transformamos SOLAMENTE el botón de "Reset" en texto */
input#edit-reset {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    color: #888888 !important;   /* Gris intermedio */
    text-decoration: underline;  /* Subrayado */
    font-size: 0.8rem;           /* Letra chica */
    font-weight: 400;
    text-transform: none;        /* Sacamos mayúsculas */
    
    width: 100% !important;      /* Ocupa el ancho para poder centrarse */
    text-align: center;          /* Centrado debajo del botón Buscar */
    padding: 5px 0 !important;
    margin: 0 !important;
    height: auto !important;
    cursor: pointer;
    transition: color 0.3s;
}

/* 3. Hover en el texto Borrar */
input#edit-reset:hover {
    color: #AA182C !important;   /* Rojo Casasco al pasar el mouse */
    background: none !important;
}



/* ===========================================================
   2. FIX NAVBAR OTHER (Inglés y Español Unificados)
   Versión Limpia: Solo forzamos lo que el tema rompe.
   =========================================================== */

/* 1. Alineación del menú (Para que queden en fila) 
.menu--navigation-other .navbar-nav,
.menu--navigation-other-en .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding: 0;
    margin: 0;
}*/

/* 2. Fix Botón Inglés (Neutralizar nav-link) */
/* Usamos el selector específico del bloque en inglés */

a.btn.btn-sm.btn-primary.rounded-pill.nav-link {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.menu--navigation-other-en a.btn.nav-link {
    /* RESTAURAR PADDING:
       Usamos !important ACÁ SOLO porque la regla del tema (style.css)
       tiene padding: 0 !important. Es la única forma de ganarle. */
    padding: 15px 20px !important; 


    
    /* RESTAURAR COMPORTAMIENTO */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;      /* Que no ocupe todo el ancho */
    height: auto;     /* Que no se aplaste */
    line-height: 1.2;
    white-space: nowrap; /* Que no se parta el texto "Contact" */
    
    /* COLORES: 
       Normalmente .btn-primary ya los pone. 
       Solo agregalos si ves que el botón se pone gris o azul por culpa del nav-link.
       Si ya se ve rojo, podés borrar estas 3 líneas de abajo. */
    background-color: #AA182C;
    border-color: #AA182C;
    color: #ffffff;
}

/* Hover limpio */
.menu--navigation-other-en a.btn.nav-link:hover {
    background-color: #8a1222;
    border-color: #8a1222;
    color: #ffffff;
}



/* ===========================================================
   MEJORA BUSCADOR NATIVO (SEARCH PAGE)
   =========================================================== */


/* 2. TÍTULO "RESULTADOS DE LA BÚSQUEDA" */
.main-content h2 {
    color: #AA182C;
}

/* 3. LISTA DE RESULTADOS (Matar la lista numerada fea) */
ol.node_search-results {
    list-style: none; /* Chau números 1. 2. 3. */
    padding-left: 0;
    margin: 0;
}

/* CADA ÍTEM DE RESULTADO (Estilo Tarjeta) */
ol.node_search-results li.list-group-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 25px 0;
    margin-bottom: 0;
    background: transparent;
}

ol.node_search-results li.list-group-item:last-child {
    border-bottom: none;
}

/* Título del resultado (El link) */
ol.node_search-results h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

ol.node_search-results h3 a {
    color: #AA182C !important; /* Rojo Casasco */
    text-decoration: none;
    font-weight: 700;
}

ol.node_search-results h3 a:hover {
    text-decoration: underline;
}

/* Texto del resumen (Snippet) */
ol.node_search-results p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 5px;
}

/* Metadatos (Autor, fecha, etc - si aparecen) */
ol.node_search-results .search-info {
    font-size: 0.8rem;
    color: #999;
}

/* ===========================================================
   DISEÑO DESKTOP: TARJETA ESTILO REFERENCIA (FINAL)
   - Título como encabezado con línea roja.
   - Imagen a la izquierda, datos a la derecha.
   - Borde gris, sin línea vertical roja.
   =========================================================== */

@media (min-width: 768px) {

    /* 1. RESET TOTAL DE LA TABLA */
    .view-listado-de-productos table,
    .view-listado-de-productos tbody {
        display: block;
        width: 100%;
        border: none !important;
        background: transparent !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .view-listado-de-productos thead { display: none; }
    .view-listado-de-productos tbody td {
        border: none !important;
        display: block;
        padding: 0;
        margin: 0;
    }

    /* 2. EL CONTENEDOR DE LA TARJETA (El TR) */
    .view-listado-de-productos tbody tr {
        display: flex;
        flex-wrap: wrap;              /* Permite que el título ocupe todo el ancho arriba */
        
        background: #ffffff;
        margin-bottom: 15px;          /* Separación entre tarjetas */
        padding: 15px 25px;               /* Padding reducido, más prolijo */
        
        border: 1px solid #e0e0e0;    /* Borde gris claro */
        border-radius: 8px;
        /* Eliminamos la línea roja vertical y las sombras fuertes */
    }

/* =======================================================
       ELEMENTO 1: EL TÍTULO (Encabezado con Flecha)
    ======================================================= */
    .view-listado-de-productos td.views-field-title {
        flex: 1 1 100%;               /* Ocupa todo el ancho */
        margin-bottom: 25px;          
        border-bottom: 1px solid #AA182C !important; 
        padding-bottom: 10px !important;
        
        /* Para poder posicionar la flecha absoluta a la derecha */
        position: relative; 
    }

    /* El enlace del título */
    .view-listado-de-productos td.views-field-title a {
        color: #AA182C !important;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        padding-right: 30px; /* Espacio para que el texto no tape la flecha */
    }

    /* LA FLECHA (CHEVRON) > */
    .view-listado-de-productos td.views-field-title::after {
        content: '';
        position: absolute;
        right: 0;           /* Pegada a la derecha */
        top: 20%;           /* Centrada verticalmente respecto al texto */
        width: 10px;
        height: 10px;
        
        /* Dibujamos la flecha con bordes */
        border-top: 2px solid #AA182C; 
        border-right: 2px solid #AA182C;
        
        /* La rotamos 45 grados */
        transform: rotate(45deg); 
        transition: all 0.2s ease;
    }

    /* Animación de la flecha al pasar el mouse por la tarjeta */
    .view-listado-de-productos tbody tr:hover td.views-field-title::after {
        right: -5px; /* Se mueve un poquito a la derecha */
        border-color: #8a1222; /* Se oscurece un poco */
    }

    /* =======================================================
       ELEMENTO 2: LA IMAGEN (A la izquierda)
       Asegurate que el nombre del campo sea correcto (ej: views-field-field-imagen)
    ======================================================= */
    .view-listado-de-productos td[class*="views-field-field-imagen"],
    .view-listado-de-productos td[class*="views-field-imagen"] {
        flex: 0 0 auto;               /* No se estira */
        width: 150px;                 /* Ancho fijo para la foto (ajustable) */
        margin-right: 40px;           /* Separación con los datos */
    }

    .view-listado-de-productos td[class*="views-field-imagen"] img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
        display: block;
    }

    /* =======================================================
       ELEMENTO 3: LOS DATOS (A la derecha)
    ======================================================= */
    /* Seleccionamos todas las celdas que NO son título NI imagen */
    .view-listado-de-productos td:not(.views-field-title):not([class*="views-field-imagen"]) {
        flex: 1;                      /* Se reparten el espacio restante */
        padding-right: 20px !important; /* Un poco de aire entre columnas */
        
        font-size: 0.85rem;
        color: #444;
        line-height: 1.5;
    }

    /* LABELS (Los titulitos grises) */
    .view-listado-de-productos td:not(.views-field-title):not([class*="views-field-imagen"])::before {
        display: block;
        font-size: 0.75rem;
        color: #888;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 8px;
        letter-spacing: 0.5px; 
    }

    /* Asignamos los nombres de los labels */
    .view-listado-de-productos td.views-field-field-linea::before { content: "LÍNEA"; }
    .view-listado-de-productos td.views-field-field-principio-activo-ref::before { content: "PRINCIPIO ACTIVO"; }
    .view-listado-de-productos td.views-field-field-accion-terapeutica::before { content: "ACCIÓN TERAPÉUTICA"; }
}

/* =======================================================
       4. GESTIÓN DE ANCHOS (Para que no sean iguales)
    ======================================================= */

    /* A) LÍNEA: La hacemos fija y más angosta (15% del espacio) */
    .view-listado-de-productos td.views-field-field-linea {
        flex: 0 0 15% !important; 
        min-width: 100px; /* Evita que se rompa si la pantalla se achica */
    }

    /* B) PRINCIPIO ACTIVO: Le damos "1 punto" de espacio flexible */
    .view-listado-de-productos td.views-field-field-principio-activo-ref {
        flex: 1 !important; 
    }

    /* C) ACCIÓN TERAPÉUTICA: Le damos "2.5 puntos" (Más del doble que el anterior) */
    .view-listado-de-productos td.views-field-field-accion-terapeutica {
        flex: 2.5 !important; 
    }

 /* =======================================================
       PAGINADOR
    ======================================================= */

    .active > .page-link, .page-link.active {
  background-color: #AA182C;
  border-color: #AA182C;
}

/* ===========================================================
   LINKS A PRODUCTOS (GRIXAN, ETC) - COLOR ROJO CASASCO
   =========================================================== */

a[href*="/producto/"]:not(.nav-link):not(.btn) {
    color: #AA182C !important;
    font-weight: 700; /* Negrita para que resalte más */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Efecto al pasar el mouse (un rojo un pelín más oscuro) */
a[href*="/producto/"]:not(.nav-link):not(.btn):hover {
    color: #8a1222 !important; 
}

/* ==========================================================================
   BANNER DE COOKIES CASASCO (Versión Compacta, Sin Sombras y Anti-Scroll)
   ========================================================================== */

/* 1. Contenedor principal */
body #sliding-popup.sliding-popup-bottom {
    background-color: #a32226 !important; /* Fuerza el color sobre el inline */
    border-top: none;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
    box-sizing: border-box !important; /* CLAVE anti-desborde */
    max-width: 100vw !important; /* Evita que pase el ancho de pantalla */
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

body #sliding-popup * {
    box-sizing: border-box !important; /* Todos los hijos calculan bien el padding */
}

/* 2. Layout */
body #sliding-popup .popup-content.info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px !important;
    gap: 20px;
    width: 100%;
}

/* 3. Limpieza total de sombras y reducción de tipografía */
body #sliding-popup .eu-cookie-compliance-message {
    color: #ffffff;
    text-shadow: none !important; 
    flex: 1; /* Hace que el texto ocupe el espacio disponible sin empujar al botón */
}

body #sliding-popup .eu-cookie-compliance-message h2 {
    color: #ffffff;
    font-size: 1rem !important; 
    font-weight: 600;
    margin: 0 0 3px 0 !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
}

body #sliding-popup .eu-cookie-compliance-message p {
    color: #ffffff;
    font-size: 0.85rem !important; 
    margin: 0 !important;
    text-shadow: none !important;
    opacity: 0.9;
    line-height: 1.3 !important;
}

/* 4. Botón proporcionado */
body #sliding-popup .eu-cookie-compliance-buttons {
    flex-shrink: 0; /* Evita que el botón se aplaste o deforme */
}

body #sliding-popup .eu-cookie-compliance-buttons .agree-button {
    background-color: #ffffff;
    color: #a32226;
    border: none;
    padding: 8px 24px !important; 
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.70rem !important;
    letter-spacing: 0.5px;
    text-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
}

/* Efecto al pasar el mouse */
body #sliding-popup .eu-cookie-compliance-buttons .agree-button:hover {
    background-color: #f1f1f1;
    transform: translateY(-2px);
}

/* 5. Diseño responsivo para celulares */
@media (max-width: 768px) {
    body #sliding-popup .popup-content.info {
        flex-direction: column;
        text-align: center;
        padding: 15px !important;
        gap: 10px; /* Separación más chica en móviles */
    }
    
    body #sliding-popup .eu-cookie-compliance-buttons {
        width: 100%;
        margin-top: 5px;
    }
    
    body #sliding-popup .eu-cookie-compliance-buttons .agree-button {
        width: 100%; 
        padding: 12px 20px !important;
        white-space: normal; /* Si la pantalla es muy chica, deja que el botón baje de línea */
    }
}

/* =======================================================
   CASASCO - FIX STICKY MOBILE OFFCANVAS
   ======================================================= */
@media (max-width: 991.98px) {
  .offcanvas-backdrop,
  .offcanvas-backdrop.show,
  .offcanvas-backdrop.fade {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-clone .d-lg-none.ms-auto {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
  }
  
  .navbar-clone .hamburger {
    margin-top: 0 !important;
    position: relative !important;
    top: auto !important;
  }
}