/* OJAI · accesibilidad.css · se carga AL FINAL. Arreglos de la auditoría WCAG 2.1 AA y de la crítica de diseño
   del 19 sep 2026 (BRAND/OJAI_ACCESIBILIDAD_2026-09-19.md). Solo usa variables de tokens.css.
   Cuando una pantalla se migre al sistema (.o-btn, .o-kicker), su arreglo de aquí se borra. */

/* 1 · Foco del teclado visible en fondos claros y oscuros (1.4.11 · 2.4.7).
   Anillo de dos tonos: miel por dentro (se ve sobre la noche) y ciruela por fuera (se ve sobre la crema). */
:focus-visible{outline:3px solid var(--o-ciruela-noche)!important;outline-offset:3px!important;box-shadow:0 0 0 3px var(--o-miel)!important}
.emo-breath:focus-visible{outline:3px solid var(--o-ciruela-noche)!important}

/* 2 · Contraste de textos pequeños (1.4.3): mínimo 4,5:1 */
.rc-kicker{color:var(--o-lavanda);opacity:1}
.rc-avisos .rc-kicker{color:var(--o-halo-calido)}
.rit-kicker{color:var(--o-lavanda)}
.month-day.empty small{color:var(--o-ciruela-media);font-size:10.5px}
.month-day span{color:var(--o-ciruela-media)}
.cumple-micro{opacity:1}
.san-journal .daily-kicker{color:var(--o-lavanda);opacity:1}
.san-daily .daily-kicker{color:var(--o-rosa)}
.weekly-state button[aria-pressed=true]{color:var(--o-ciruela-noche)}
.emo-morral .emo-tip{color:var(--o-ciruela-media)}
.emo-panel-art small{color:var(--o-lavanda);font-size:12px}
.emo-morral-gesto span{opacity:1}
.feature-footnote{color:var(--o-ciruela-media);opacity:1}
.daily-world .plan-periodo button:not([aria-pressed=true]) b{color:var(--o-rosa)}
.journal-invitation small{color:#46553f}
.email-invitation>div:last-child>span{color:var(--o-rosa);font-size:12px}
.weekly-grid summary span{color:var(--o-lavanda);font-size:12px}

/* 3 · Portada en el celular: nada tapa la acción principal (crítica de diseño, prioridad 1) */
@media (max-width:767px){
  body[data-view=home] .vida-mate{display:none}
  body[data-view=home] .rc-calma-boton{left:auto;right:12px;width:52px;height:52px;min-height:52px;padding:0;justify-content:center;font-size:0}
  body[data-view=home] .rc-calma-boton span{font-size:20px}
  .ojai-stage-actions{display:none}
}

/* 4 · Tamaños mínimos: zonas de toque de 44 px y letra de 12-13 px */
.ojai-stage-actions button{min-height:44px;font-size:13px}
.header-signup{min-height:44px}
.immersive-hero .ojai-stage p:not(.ojai-bubble){font-size:13px}
.ojai-scrub-hint{font-size:12px}
.hero-bottom,.hero-bottom span{font-size:12px}

/* 5 · Título de la portada con aire entre letras (crítica de diseño, prioridad 3) */
.hero-typewriter{letter-spacing:-.035em}

/* Estado de carga (20 sep 2026): mientras una sección trae sus archivos,
   el cursor avisa y se bloquea el doble toque. El aviso de texto sale por
   #status, que ya es aria-live, así que un lector de pantalla también lo oye. */
.ojai-cargando{cursor:progress}
.ojai-cargando main{opacity:.55;transition:opacity .18s ease}
.ojai-cargando main *{pointer-events:none}
@media (prefers-reduced-motion:reduce){.ojai-cargando main{transition:none}}

/* ---------- El dedo necesita 44 px (20 sep 2026) ----------
   Trece zonas tocables medían menos que la yema de un dedo: las fichas de
   emoción del momento (39 px), los enlaces del pie (17 px) y «o toma un minuto
   de calma» (24 px). Aquí no se cambia el tamaño de la letra ni el diseño:
   solo se agranda la zona que responde al toque. */
.mood-choices button,
.daily-text,
.rc-link,
.registration-sample,
footer button,
footer .footer-link{min-height:44px}

.mood-choices button{display:inline-flex;align-items:center;justify-content:center;padding-block:10px}
.daily-text,.rc-link,.registration-sample{display:inline-flex;align-items:center;padding-block:10px}
footer button,footer .footer-link{display:inline-flex;align-items:center;padding-block:13px}

/* En el pie, al crecer la zona tocable los enlaces se pegaban entre sí. */
footer{row-gap:2px}

/* ---------- Fase 5 · usabilidad · 21 sep 2026 ----------
   Medido en 19 pantallas en móvil. Aquí solo se agranda la zona que responde al
   dedo (44 px) y se oscurecen cinco textos pequeños que no llegaban a 4,5:1.
   No cambia ningún tamaño de letra ni ningún dibujo. */

/* Botones de 26 a 43 px. Un <button> centra su contenido solo, así que crecer
   en alto no descoloca el texto. */
.emo-chip,.emo-filter>button,.viv-dot,.bag-btn,
.pill,.mood-day>button,.row>.text-button,.wrap>.text-button,
.rc-chips>button,.ojai-sonidos>button,.rit-link,.daily-privacy>.daily-text,.pause-option,
.weekly-state>button,.rc-btn,.av-tabs>button,.av-nav>button,.san-sound-toggle,
.plan-moneda>button,.t6>.text-button,.ninos-volver,.dic-chip{min-height:44px}
a.rc-btn{display:inline-flex;align-items:center}
.more-moods>select{min-height:44px}
.bag-remove{min-width:44px;min-height:44px}

/* Las zonas del cuerpo son puntos sobre la ilustración: el punto se queda igual,
   pero alrededor crece un círculo invisible de 44 px que también responde. */
.rc-zona::after{content:'';position:absolute;inset:-9px;border-radius:50%}

/* Los 102 cuadritos de color del diccionario (.dic-mini, 30 px) se quedan como
   están: cumplen el mínimo oficial de 24 px y agrandarlos rompe su cuadrícula. */

/* Textos pequeños por debajo de 4,5:1 → lavanda del sistema (≈6–7:1 sobre esos fondos). */
.pause-option small,
.rc-momentos li>small,
.dic-hero .dic-kicker,
.test15-art>small{color:var(--o-lavanda)}

/* OJO desde la carga diferida (carga.js): las hojas de tarot, diccionario, niños,
   reflejo, compra, cumpleaños y test largo llegan DESPUÉS que esta. A igual peso,
   ganan ellas. Por eso las correcciones que tocan esas secciones llevan «body». */
body .test15-shell .test15-art>small,
body .dic-hero .dic-kicker,
body .bag-list li>small{color:var(--o-lavanda)}
body .ninos-volver,body .dic-chip{min-height:44px}
body .emo-subtabs>button{min-height:44px}
body .bag-list .bag-remove{min-width:44px;min-height:44px}

/* El Ojai del test largo (21 sep 2026): el botón flotaba 16 px sin parar y era lo
   primero que se enfocaba; en una prueba automática fallaron 56 clics. Ahora el
   botón se queda quieto —su zona de toque no se mueve— y el Ojai de dentro sigue
   respirando. «body» porque test15.css llega después (carga diferida). */
body .test15-character.ojai-mueve{animation:none;transform:none}

/* En móvil el regalo y «Calma ahora» vivían en la misma esquina (74 y 84 px desde
   abajo) y el regalo quedaba debajo, cortado. «Calma ahora» manda —nunca se tapa—;
   el regalo se apoya justo encima: 74 + 48 de alto + 10 de aire. */
@media (max-width:767px){body .rc-regalo{bottom:calc(132px + env(safe-area-inset-bottom))}}

/* El título de cada paso del Iris recibe el foco para que el lector lo anuncie; no necesita recuadro. */
.t6 h1[tabindex="-1"]:focus{outline:none}