/* ============================================================
   ACCESIBILIDAD · Tarjetería Jhon (Fase 9)
   Capa solo aditiva: no cambia colores, tamaños ni estructura.
   Todo lo de aquí solo se nota (a) al navegar con teclado
   (:focus-visible) o (b) si el sistema pide menos movimiento.
   Revertir: quitar el <link> de index.html.
   ============================================================ */

/* Enlace «Saltar al contenido»: invisible hasta recibir el foco con Tab. */
.skip-link{
  position:fixed;left:8px;top:-80px;z-index:100000;
  padding:10px 16px;border-radius:8px;
  background:#000;color:#fff;
  font:600 14px/1.2 Inter,system-ui,sans-serif;text-decoration:none;
}
.skip-link:focus,.skip-link:focus-visible{
  top:8px;outline:3px solid #fff;outline-offset:0;box-shadow:0 0 0 6px #276EF1;
}

/* Foco visible solo con teclado, para lo que no es botón nativo.
   (Botones y .ni ya lo tienen en uber-skin.css; los campos de texto
   conservan su propio resalte; la tienda pública tiene el suyo.) */
a:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[data-h-click][tabindex]:focus-visible{
  outline:2px solid var(--info,#276EF1);
  outline-offset:2px;
}
.ni:focus-visible{outline-offset:-2px}

/* Respeta «reducir movimiento» del sistema (no afecta a quien no lo activa). */
@media (prefers-reduced-motion:reduce){
  .kwa,.kwa::before{animation:none!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Destino del enlace «Saltar al contenido»: recibe el foco por código, sin recuadro. */
#contenido:focus{outline:none}

/* ============================================================
   CONTRASTE (Fase 15) · WCAG AA 4.5:1 para texto normal
   Cambios mínimos: solo oscurecen/aclaran un poco los colores que axe midió por debajo de 4.5:1.
   - Textos de estado (verde/ámbar/rojo/gris) como variables propias --okt/--warnt/--errt/--mutet:
     tono más oscuro en los temas claros y más claro en «Nocturno».
   - Nocturno: el gris secundario (--gris) pasa de #9b9b9b a #a8a8a8 (en css/uber-skin.css).
   Revertir: quitar este bloque (y los valores var(--okt…) de app.js dejan de tener efecto sin romper nada,
   porque llevan un color de respaldo).
   ============================================================ */
:root{--okt:#15803d;--warnt:#b45309;--errt:#c4251a;--mutet:#586174}
:root[data-t="nocturno"]{--okt:#4ade80;--warnt:#fbbf24;--errt:#f87171;--mutet:#94a3b8}
.okt{color:var(--okt)}.warnt{color:var(--warnt)}.errt{color:var(--errt)}.mutet{color:var(--mutet)}

/* Etiqueta del carrusel de la portada (gris sobre fondo claro #e5e5e5: 4.23 → 5.3) */
:root:not([data-t="nocturno"]) .cintFt{color:#5c5c5c}

/* Agenda: los días del mes anterior/siguiente se atenuaban con opacity:.45 (contraste 2.9:1).
   Ahora el número usa el gris secundario del tema y se atenúa solo el fondo y los puntos. */
.agc.o{opacity:1;background:color-mix(in srgb,var(--soft) 55%,transparent)}
.agc.o:not(.t)>span{color:var(--gris)}
.agc.o:hover{background:var(--az-bg)}
.agc.o .agd{opacity:.5}

/* Tienda en modo oscuro: botón «Carrito» (texto blanco sobre #7c66ff = 4.04 → 5.1) */
html[data-kt=dark]:not([data-paleta]) #shop .kha.pri,
html[data-paleta=dark] #shop .kha.pri{background:#6a54f0}

/* Los diálogos reciben el foco por código (js/a11y.js) sin dibujar recuadro en el contenedor. */
[role="dialog"]:focus{outline:none}

/* Barra de la ventana «Investigación de productos»: su título salía en oscuro sobre la barra oscura (#2b2b2e) y
   el botón «Cerrar» se montaba sobre el texto. Se le da el mismo diseño de barra que al visor PDF, con texto claro. */
#investOv .pdfvb{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;color:#f5f5f7}

/* ============================================================
   FASE 18 · landmarks, tablas y zonas táctiles (WCAG 2.2 · 2.5.8: mínimo 24×24 px CSS)
   Todo es aditivo; en escritorio (>820 px) solo se añaden las clases de ayuda y las variables de color.
   Revertir: quitar este bloque.
   ============================================================ */
/* Texto solo para lectores de pantalla (no ocupa espacio ni se ve). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Variante para celdas de tabla: sin position:absolute (un absoluto sin ancestro posicionado se escapa del scroll horizontal de .tw y ensanchaba la página en móvil). */
.sr-only-th{display:inline-block;width:1px;height:1px;margin:0 -1px 0 0;padding:0;overflow:hidden;clip-path:inset(50%);vertical-align:top;white-space:nowrap}
/* El título h1 del panel vive en la barra lateral (solo en escritorio): en móvil la barra se oculta, así que el panel trae un h1 solo para lectores de pantalla. */
@media(min-width:821px){.h1m{display:none!important}}
/* Violeta de texto accesible (tarjetas de Inicio) */
:root{--viot:#6d28d9}
:root[data-t="nocturno"]{--viot:#a78bfa}
/* Zonas táctiles de al menos 24 px en móvil/tablet. Los enlaces y etiquetas en línea crecen con padding vertical (no mueve el texto: en un elemento en línea el padding vertical no cambia la altura de la línea). */
@media(max-width:820px){
  summary,h3[data-h-click],#auth a{min-height:24px;box-sizing:border-box}
  #auth a{padding-block:4px}
  #v a[href]:not([class]),label:has(>input[type="checkbox"]){padding-block:5px}
  input.etqcb{min-width:24px;min-height:24px}
}
/* Barra inferior en teléfonos pequeños: el texto de cada botón (.lb) se ocultaba con display:none y los botones quedaban sin nombre para lectores de pantalla.
   Ahora sigue oculto a la vista pero accesible (mismo aspecto). */
@media(max-width:480px){
  .bn .ni .lb{display:block!important;position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
}

/* ============================================================
   FASE 20 · zonas táctiles también en escritorio (WCAG 2.2 · 2.5.8) y punto de carrusel
   En móvil ya estaba (bloque de la Fase 18). Aquí se extiende a >820 px con el cambio visual mínimo:
   solo crece la altura de lo que medía menos de 24 px (resumen, títulos plegables, enlaces sueltos, botones pequeños).
   Revertir: quitar este bloque.
   ============================================================ */
@media(min-width:821px){
  summary,h3[data-h-click],#auth a{min-height:24px;box-sizing:border-box}
  #auth a{padding-block:4px}
  /* enlace en línea: el padding vertical no cambia la altura de la línea, solo el área clicable */
  #v a[href]:not([class]){padding-block:5px}
  /* casillas con etiqueta: las de bloque/flex crecen con min-height; las «display:inline» con padding vertical (no mueve el texto) */
  label:has(>input[type="checkbox"]){min-height:24px;box-sizing:border-box}
  label[style*="display:inline"]:not([style*="inline-flex"]):has(>input[type="checkbox"]){padding-block:5px}
  input.etqcb{min-width:24px;min-height:24px}
}
:where(.btn.s){min-height:24px} /* especificidad 0: solo sube los botones pequeños que no traen su propio min-height (en móvil panel.css ya les da 36 px) */
/* Puntos del carrusel de la tienda: el botón mide 24×24 px y el punto visible sigue siendo de 8 px (se dibuja en el área interior del botón,
   con background-clip). El punto activo mantiene 22×8 px. */
.khero-dots{gap:0!important;right:8px!important;bottom:6px!important}
#shop .khero-dots button,.khero-dots button{width:24px;height:24px;padding:8px;box-sizing:border-box}
/* #shop .khero-dots button{background:…} (panel.css) es un atajo que reinicia background-clip: hace falta la misma especificidad para que el punto siga midiendo 8 px */
#shop .khero-dots button{background-clip:content-box}
.khero-dots button.on{width:38px}
/* Contenedor del botón flotante de WhatsApp (landmark «complementary»): no ocupa espacio, el botón sigue siendo fixed. */
.kwa-wrap{margin:0;padding:0;border:0;height:0}
.kwa-wrap[hidden]{display:none}