/* ═══════════════════════════════════════════════════════════════════════════
   responsive.css — capa responsive de DOSITEC PHARMA
   Se carga DESPUES de styles.css (que ya importa los tokens de F1).

   REGLA DE ORO: aquí sólo vive lo que NO se puede resolver de forma intrínseca
   en los tokens (F1) ni en el estilo inline del markup (F3). Si algo se puede
   escribir como clamp()/min()/auto-fit, va a F1 o F3, nunca aquí.

   Cada uso de !important lleva su motivo. Los tres motivos legítimos son:
     (a) el valor lo pinta React como estilo inline y hace falta un @media;
     (b) el valor está en el atributo style de F3 y hace falta un @media;
     (c) hay que ganarle a la regla .scpN:hover{...!important} que genera
         support.js:428-431 para los atributos style-hover (por eso el prefijo html).

   Breakpoints (los únicos permitidos):
     móvil <=640 · tablet 641-1023 · laptop 1024-1199 · desktop >=1200
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · Enlace de salto al contenido ────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1200; }
.skip-link:focus {
  left: 8px; top: 8px; width: auto; min-height: var(--tap-min);
  display: inline-flex; align-items: center; padding: 12px 20px;
  background: var(--gray-0); color: var(--teal-700);
  border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown);
  outline: 2px solid var(--gray-900); outline-offset: 2px;
}
main:focus { outline: none; }


/* ── 2 · Cabecera: conmutación de modo del nav ───────────────────────────────
   NavMenu pinta [data-nav-desktop] visible y [data-nav-toggle] display:none como
   estilo inline de React: invertirlo por breakpoint exige !important (motivo a).
   Si esta hoja no cargara, el sitio degrada al nav de escritorio actual. */
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  [data-navmenu] [data-nav-desktop] { display: none !important; }
  [data-navmenu] [data-nav-toggle]  { display: inline-flex !important; }
}

/* Logo: Logo pinta maxHeight inline desde React (motivo a). */
@media (max-width: 1199px) {
  [data-header-bar] .ds-logo--horizontal { max-height: clamp(26px, 6.4vw, 34px) !important; }
}

/* CTA de cabecera a icono solo. "PORTAL CLIENTES" a 14px con 3px de tracking mide
   ~247px con icono y padding; con el logo de 150px el header pedía ~449px en un
   viewport de 375px. Button pinta padding/gap/letter-spacing inline (motivo a). */
@media (max-width: 1359px) {
  [data-header-cta] {
    width: var(--tap-min) !important;
    height: var(--tap-min);
    min-width: var(--tap-min);
    padding: 0 !important;
    gap: 0 !important;
    letter-spacing: 0 !important;
  }
  [data-header-cta] .ds-btn__label { display: none; }
}

/* Foco visible en el cajón (el scrim y el panel son estilo inline sin outline). */
[data-nav-drawer] a:focus-visible,
[data-nav-drawer] button:focus-visible,
[data-nav-toggle]:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: -2px;
}

/* Resaltado del subitem del desplegable por CSS. El componente ya NO muta
   e.currentTarget.style en mouseenter (se quedaba pegado tras el tap en iOS).
   `color` sí necesita !important porque el estado activo va inline (motivo a). */
.ds-nav-subitem:focus-visible,
.ds-nav-subitem:active {
  color: var(--brand-primary) !important;
  background: var(--brand-primary-wash);
}
@media (hover: hover) and (pointer: fine) {
  .ds-nav-subitem:hover {
    color: var(--brand-primary) !important;
    background: var(--brand-primary-wash);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-nav-drawer] * { transition: none !important; }
}


/* ── 3 · Marca de agua del hero ──────────────────────────────────────────────
   El tamaño y el anclaje ya están arreglados en el estilo inline de F3 (líneas
   59 y 578). Aquí sólo el apagado, que necesita @media. `display` no está
   declarado inline, así que NO hace falta !important. */
@media (max-width: 1023px) {
  [data-hero-mark] { display: none; }
}


/* ── 4 · Rejillas con recuento de items fijo ─────────────────────────────────
   Sólo donde auto-fit deja filas huérfanas con el nº real de elementos
   (6 clientes, 4 fichas de equipo, 9 productos, 6 hitos, 4 estadísticas).
   grid-template-columns va en el atributo style de F3 (motivo b).
   El resto de rejillas se resuelven solas con minmax(min(Npx,100%),1fr). */
@media (max-width: 1023px) {
  /* 4 cifras apiladas dan una banda de ~600px de alto */
  [data-stats-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 16px !important;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  [data-clients-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-team-grid]    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-timeline]     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 20px !important; }
}
@media (min-width: 1024px) {
  [data-clients-grid]  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* 6 = 3+3 */
  [data-products-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* 9 = 3+3+3 */
}
@media (min-width: 1024px) and (max-width: 1199px) {
  [data-team-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 4 = 2+2 */
  [data-timeline]  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* 6 = 3+3 */
}
@media (min-width: 1200px) {
  [data-team-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } /* 4 = 4 */
  [data-timeline]  { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } /* 6 = 6 */
}


/* ── 5 · ProductCard ─────────────────────────────────────────────────────────
   Relación de aspecto de la imagen (el componente lee --card-image-ratio).
   A partir de 1024px la razón es 373/240: con la tarjeta de 373,3px del
   contenedor de 1170px devuelve los MISMOS 240px de alto que la prop imgH:240
   del estado anterior (invariante de escritorio). Por debajo, la imagen se
   adapta al ancho real en vez de recortar. */
:root { --card-image-ratio: 4 / 3; }
@media (min-width: 641px)  { :root { --card-image-ratio: 16 / 11; } }
@media (min-width: 1024px) { :root { --card-image-ratio: 373 / 240; } }

/* Estado de la tarjeta sin depender de onMouseEnter (que en iOS se queda pegado
   tras el primer tap y deja tarjetas con geometría distinta en la misma fila). */
@media (hover: hover) and (pointer: fine) {
  [data-cardgrid] article:hover {
    --card-radius-now: var(--radius-card-hover);
    --card-shadow-now: var(--shadow-card-hover);
  }
}
[data-cardgrid] article:focus-within,
[data-cardgrid] article:active {
  --card-shadow-now: var(--shadow-card-hover);
}


/* ── 6 · style-hover: estados que faltan ─────────────────────────────────────
   support.js:428-431 (collectProps) hace `continue` con todo atributo `style-*`:
   lo convierte en la clase generada .scpN y NUNCA lo propaga al DOM, así que
   [style-hover] no casa jamás (querySelectorAll('[style-hover]').length === 0).
   Hay que enganchar el markup real: los tres únicos style-hover del proyecto
   son F3:125 (<a> de [data-products-grid]), F3:338 (<article> de
   [data-courses-grid]) y F3:505 ([data-docrow]).
   El rival es la regla generada .scpN:hover{...!important} = (0,2,0): el
   prefijo `html` sube a (0,2,1)/(0,2,2) y el !important se conserva (motivo c). */
[data-products-grid] a:focus-visible,
[data-courses-grid] article:focus-visible,
[data-docrow]:focus-visible { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 3px var(--teal-100); }
[data-products-grid] a:active,
[data-courses-grid] article:active,
[data-docrow]:active { transform: scale(.99); }
@media (hover: none), (pointer: coarse) {
  html [data-products-grid] a:hover,
  html [data-courses-grid] article:hover,
  html [data-docrow]:hover { transform: none !important; }
  html [data-products-grid] a:active,
  html [data-docrow]:active { background: var(--brand-primary-wash) !important; }
}


/* ── 7 · Botones: SOLO COMPOSICION ───────────────────────────────────────────
   Las métricas (font-size, padding, tracking) viven en los tokens --btn-* y
   --ls-button* de F1 y las consume SIZES en F2. PROHIBIDO escribirlas aquí: es
   la contradicción que tenían siete slices a la vez. Sólo composición. */
.ds-btn { min-height: var(--tap-min); }
@media (max-width: 640px) {
  .ds-btn--md,
  .ds-btn--lg,
  .ds-btn--xl,
  [data-quality-cta] .ds-btn {
    display: flex !important;   /* Button pinta inline-flex inline (motivo a) */
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ── 8 · Tabla de niveles de formación → tarjetas apiladas en móvil ──────────
   El ancho min-content de la tabla es ~570px (192px sólo de padding de celda)
   frente a 311px útiles: sólo se ve el 55%. Y overflow-x:auto no tiene ninguna
   afordancia visible en iOS/macOS (scrollbars overlay). Son 2 filas x 4 datos:
   el scroll horizontal no se justifica. */
@media (max-width: 640px) {
  [data-table-scroll] { overflow-x: visible !important; }
  [data-captable],
  [data-captable] thead,
  [data-captable] tbody,
  [data-captable] tr,
  [data-captable] th { display: block; }
  [data-captable] {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  [data-captable] thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  [data-captable] tbody tr {
    background: var(--surface-card);
    border-radius: 16px;
    box-shadow: 0 0 15px #EEE;
    overflow: hidden;
    margin-bottom: 16px;
  }
  [data-captable] tbody tr:last-child { margin-bottom: 0; }
  [data-captable] td {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 12px 18px !important;
    border-bottom: 1px solid var(--border-default) !important;
  }
  [data-captable] tbody tr td:last-child { border-bottom: 0 !important; }
  [data-captable] td::before {
    content: attr(data-th);
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  [data-captable] th,
  [data-captable] td { padding: 14px 16px !important; }
  [data-captable] th { letter-spacing: 1px !important; }
}
[data-table-scroll]:focus-visible {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}


/* ── 9 · Filas de "Documentos de interés" ────────────────────────────────────
   El CTA "VER / DESCARGAR" (900, 12px, tracking 2px, white-space:nowrap) mide
   ~158px y no cede un píxel; a 375px a la columna de título le quedan ~41px y
   los titulares se apilan en 12-15 líneas de una sílaba. gap, padding y
   align-items están en el atributo style de F3 (motivo b). */
@media (max-width: 640px) {
  [data-docrow] {
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 10px 14px !important;
    padding: 16px 18px !important;
  }
  [data-docrow-text] { flex: 1 1 140px !important; }
  [data-docrow-cta] {
    flex: 1 0 calc(100% - 40px);
    margin-left: 40px;          /* 26px del icono + 14px del gap: alinea con el título */
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    white-space: normal !important;
  }
}


/* ── 10 · Pie ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  [data-footer-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;  /* motivo b */
    gap: 32px 20px !important;
  }
  [data-footer-grid] > *:first-child,
  [data-footer-grid] > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  [data-footer-grid] { grid-template-columns: 1fr !important; }
}
/* 10+ enlaces de 32px de alto y 0px de separación: el patrón de mis-tap más
   frecuente del sitio. display y padding van inline en F3 (motivo b). */
@media (max-width: 1199px) {
  [data-footer] nav a {
    display: flex !important;
    align-items: center;
    min-height: var(--tap-min);
    padding: 4px 0 !important;
  }
  [data-footer] p a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
}
[data-footer] nav a:focus-visible {
  outline: 2px solid var(--gray-0);
  outline-offset: 2px;
  box-shadow: none;   /* si no, el halo blanco de base.css:32 y este contorno
                         blanco se funden en una mancha sobre el navy del pie */
  border-radius: 4px;
}


/* ── 11 · Fila de suplidores ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  [data-supplier-row] { justify-content: center; text-align: center; }
  [data-supplier-row] > span:first-child { flex: 1 0 100%; }
}


/* ── 12 · Gráfico de crecimiento ─────────────────────────────────────────── */
[data-chart-scroll] { scrollbar-width: thin; }
[data-chart-hint] { display: none; }
@media (max-width: 1023px) {
  [data-chart-hint] { display: inline; }
}
@media (max-width: 640px) {
  [data-chart-scroll] { padding: 8px !important; }   /* padding inline en F3 (motivo b) */
}
@media (min-width: 1024px) {
  [data-chart-scroll] { overflow-x: visible; }
  [data-chart-scroll] img { min-width: 0 !important; }
}


/* ── 13 · Línea de tiempo en móvil: raíl vertical ────────────────────────────
   Con una sola columna la barra teal de 4px deja de leerse como línea de tiempo
   y parece un separador aleatorio entre bloques. */
@media (max-width: 640px) {
  [data-timeline] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-timeline] li {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 16px !important;
    padding: 0 0 24px 16px;
    margin-left: 4px;
    border-left: 3px solid var(--brand-primary);
  }
  [data-timeline] li > span[aria-hidden="true"] { display: none; }
  [data-timeline] li > span:first-child { flex: 0 0 auto; min-width: 62px; }
}


/* ── 14 · Textarea del formulario ────────────────────────────────────────────
   rows=4 dimensiona contra el font-size heredado, no contra el espacio. El
   componente no declara min-height inline, así que no hace falta !important. */
[data-contact-form] textarea { min-height: clamp(120px, 22vw, 132px); }


/* ── 15 · Perfil del equipo alineado a la izquierda ──────────────────────────
   Sólo por debajo de 1024px, donde la ficha es estrecha y el centrado deja
   líneas huérfanas. En escritorio el perfil sigue centrado, como hoy.
   text-align:center se hereda del <article>; el <p> no lo declara, así que
   basta con especificidad normal. */
@media (max-width: 1023px) {
  [data-team-grid] article > p { text-align: left; text-wrap: pretty; }
}


/* ── 16 · image-slot como control alcanzable ─────────────────────────────────
   La especificidad tiene que superar los (0,1,0) de `[style*="display:flex"] > *`
   de base.css:62-63, que si no gana con min-width:0. El anillo de foco NO se
   repite aquí: base.css:28-34 ya lo pinta sobre [tabindex] no negativo con
   (0,3,0) y cualquier regla de esta hoja sería código muerto. */
image-slot[tabindex], [data-team-grid] image-slot {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  cursor: pointer;
}


/* ── 17 · Móvil apaisado ─────────────────────────────────────────────────────
   Un iPhone 13/14 apaisado mide 844x390 CSS px: la ANCHURA supera los 640px del
   breakpoint móvil, así que recibe la maqueta de tablet con sólo 390px de alto.
   Y todos los clamp() interpolan con vw, que en apaisado es la dimensión LARGA:
   el respiro vertical se dispara justo cuando menos altura hay. Es el único
   sitio del proyecto donde se razona por altura. */
@media (orientation: landscape) and (max-height: 480px) {
  :root {
    --section-py: 32px;
    /* --fs-hero / --fs-display NO se tocan aquí: la escala tipográfica es de
       F1 typography.css (contrato §6) y este @media casa también con una
       ventana de escritorio baja (1920x460). */
    /* viewport-fit=cover llega hasta los bordes físicos: compensar el notch */
    --gutter-x: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  [data-screen-label] > section:first-of-type > div {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }
  [data-detail-hero] { gap: 20px !important; }
  [data-nav-drawer] ul a { min-height: var(--tap-min) !important; }
}


/* ── 18 · FASE 5 (contraste AA): FUERA DE ALCANCE EN ESTA TANDA ──────────────
   Los tokens --text-accent / --text-brand y cualquier cambio de color de marca
   quedan expresamente excluidos de esta entrega y se aplicarán en su propia
   tanda, revisados con diseño. Ver `risks` R14. NO añadir aquí. */


/* ── 19 · INVARIANTE DE ESCRITORIO ──────────────────────────────────────────
   Los componentes del design system tokenizaron cuatro metricas para que el
   valor tactil/movil no se filtre al escritorio. Aqui es donde se activan.
   Por defecto (escritorio) valen lo mismo que antes de esta tanda. */

/* Marca de agua del hero: el arreglo real es width:auto;max-width:none (evita la
   deformacion por debajo de ~1271px). El tamano de escritorio se conserva. */
@media (min-width: 1024px) {
  :root { --hero-mark-h: 150%; --hero-mark-max: none; }
}

/* Radios y casillas: destino tactil de 44px solo en tactil o por debajo de 1024px.
   En escritorio la etiqueta vuelve a sus 21px de alto. */
@media (max-width: 1023px), (pointer: coarse) {
  :root {
    --choice-min-h: var(--tap-min);
    --choice-pad: 6px var(--space-2) 6px 0;
  }
}

/* Tarjeta de producto: canal interior fluido y particion de palabras solo donde
   el ancho lo justifica. En escritorio: 30px y sin guiones, como hoy. */
@media (max-width: 1023px) {
  :root { --card-body-px: clamp(16px, 6%, 30px); }
}
@media (max-width: 640px) {
  :root { --card-title-wrap: anywhere; --card-title-hyphens: auto; }
}

/* "Tambien te puede interesar" usaba imagenes de 220px, no de 240px. */
@media (min-width: 1024px) {
  [data-cardgrid-sm] { --card-image-ratio: 373 / 220; }
}

/* Iconos sociales: 40x40 en escritorio (como hoy), 44x44 en tactil. */
@media (max-width: 1023px), (pointer: coarse) {
  .ds-social a { min-width: var(--tap-min); min-height: var(--tap-min); font-size: 20px; }
}

/* El titular del hero nunca se parte con guion: es la frase de marca. base.css
   activa hyphens:auto en h1..h6 por debajo de 641px, y ahi "Protección" salia
   como "Pro-/tección". Solo puede partir por espacios. */
.ds-headline, .ds-headline__hl { hyphens: manual; }

/* El nav horizontal conserva la metrica compacta de siempre (12,5px / 10px 8px).
   Solo cuando queda visible con puntero grueso se eleva al destino tactil. */
@media (pointer: coarse) {
  :root { --nav-item-min-h: var(--tap-min); }
}