/* VOZ Rev. 5.0 — formato de fotos, navegación simple, plan Plus y accesibilidad. Se carga al final. */

/* ---------- 1. Tarjetas de palabras: una sola regla para todas las vistas ----------
   Imagen arriba con la proporción real de las fotos (64:45) y etiqueta abajo de alto fijo.
   Así no aparecen franjas de color arriba/abajo ni etiquetas gigantes en pantallas anchas. */
#grid .tile,.library-mini-grid .tile,.complete-mini-grid .tile{aspect-ratio:auto!important;display:flex!important;flex-direction:column;height:auto!important}
#grid .tile .picture,.library-mini-grid .tile .picture,.complete-mini-grid .tile .picture,
#grid .tile .emoji,.library-mini-grid .tile .emoji,.complete-mini-grid .tile .emoji{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;width:100%!important;height:auto!important;aspect-ratio:64 / 45;flex:none;object-fit:cover!important;object-position:center!important;padding:0!important;transform:none!important;display:block}
#grid .tile .emoji,.library-mini-grid .tile .emoji,.complete-mini-grid .tile .emoji{display:flex;align-items:center;justify-content:center}
#grid .tile .picture.family-photo{object-fit:cover!important}
#grid .tile .picture.simple-picto,#grid .tile .picture.vector{object-fit:contain!important;padding:7%!important;background:#fff}
#grid .tile .word,.library-mini-grid .tile .word,.complete-mini-grid .tile .word{position:relative!important;inset:auto!important;height:auto!important;flex:1 0 auto;min-height:calc(2.5em + 8px);display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;padding:4px 6px!important;overflow-wrap:anywhere;hyphens:auto}
#grid .tile .word{font-size:clamp(.95rem,2.4vw,1.25rem)}
#grid{align-items:start}
/* En pantallas anchas, las tarjetas no crecen sin límite. */
@media(min-width:900px){#boardArea{max-width:1120px;margin-left:auto;margin-right:auto}}

/* Modo sencillo: la foto completa centrada, sin franjas raras */
/* La foto y su palabra forman una sola tarjeta centrada dentro del espacio disponible. */
#simpleGrid .tile{display:flex!important;flex-direction:column;justify-content:center;background:#fff}
#simpleGrid .tile .picture{position:relative!important;inset:auto!important;flex:0 1 auto;min-height:0;width:100%!important;height:auto!important;max-height:calc(100% - 2.6em);aspect-ratio:64 / 45;object-fit:contain!important;padding:0!important;border-radius:14px 14px 0 0}
#simpleGrid .tile .word{position:relative!important;height:auto!important;flex:none;min-height:2.3em;background:transparent!important;border-top:0!important}
#simpleScreen.without-labels #simpleGrid .tile .picture{max-height:100%;border-radius:14px}
body.voz-dark #simpleGrid .tile{background:#1b2d42}

/* ---------- 2. Tablero más limpio ---------- */
#speakerLine,#viewHint,#boardArea .categoryrow,#proNav{display:none!important}
#boardArea .categorychips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
#boardArea .categorychips button{flex:none;min-height:48px;padding:8px 16px;border-radius:999px;font-weight:760;font-size:1rem}
.view-switch button{min-height:52px}
.v5-modebar{margin-top:14px}

/* ---------- 3. Adultos por secciones ---------- */
.v5-tabs{position:sticky;top:0;z-index:40;display:flex;gap:6px;overflow-x:auto;padding:8px 2px 10px;margin:0 0 8px;background:#f3f7fc;box-shadow:0 8px 12px -10px rgba(20,50,80,.35);scrollbar-width:none}
.v5-tabs::-webkit-scrollbar{display:none}
body.voz-dark .v5-tabs{background:#101a29}
.v5-tab{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:84px;min-height:64px;padding:6px 10px;border-radius:14px;border:1.5px solid var(--line,#c7d9e9);background:var(--card,#fff);color:var(--ink,#142f4c);font-weight:750;font-size:.86rem;line-height:1.1}
.v5-tab-ic{font-size:1.35rem}
.v5-tab[aria-selected="true"]{background:var(--pro-accent,#125483);border-color:var(--pro-accent,#125483);color:#fff}
body.voz-dark .v5-tab[aria-selected="true"]{color:#0d1a27}
.v5-tab-plus{border-color:#d9a420;background:#fff7e0}
body.voz-dark .v5-tab-plus{background:#3a3016;border-color:#b8902a}
.v5-tab-plus[aria-selected="true"]{background:#b07d0a;border-color:#b07d0a;color:#fff}
.v5-backrow{margin:0 0 10px}
#adultArea>.v5-tabs,#adultArea>.v5-backrow,#adultArea>.footer{grid-column:1/-1}
#adultArea>.panel{display:none}
#adultArea[data-tab="perfil"]>.panel[data-group="perfil"],#adultArea[data-tab="comunicacion"]>.panel[data-group="comunicacion"],#adultArea[data-tab="acceso"]>.panel[data-group="acceso"],#adultArea[data-tab="vocabulario"]>.panel[data-group="vocabulario"],#adultArea[data-tab="actividades"]>.panel[data-group="actividades"],#adultArea[data-tab="informe"]>.panel[data-group="informe"],#adultArea[data-tab="seguridad"]>.panel[data-group="seguridad"],#adultArea[data-tab="plus"]>.panel[data-group="plus"],#adultArea[data-tab="guia"]>.panel[data-group="guia"]{display:block}
#adultArea>.panel+.panel{margin-top:12px}

/* ---------- 4. Plan ---------- */
.v5-plan-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:800;vertical-align:middle}
.v5-plan-badge.free{background:#e7f1fa;color:#1d4f7a}
.v5-plan-badge.plus{background:#fff1c7;color:#7a5600}
body.voz-dark .v5-plan-badge.free{background:#1f3449;color:#b9d8f2}
body.voz-dark .v5-plan-badge.plus{background:#4a3a12;color:#ffe08a}
.v5-compare{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:.95rem}
.v5-compare th,.v5-compare td{padding:9px 6px;border-bottom:1px solid var(--line,#c7d9e9);text-align:left}
.v5-compare tr>:nth-child(n+2){text-align:center;width:64px;font-weight:800}
.v5-compare th[scope="col"]{color:var(--muted,#56718b);font-size:.85rem}
.v5-compare th[scope="row"]{font-weight:620}
.v5-compare td.yes{color:#1d6a37}.v5-compare td.no{color:var(--muted,#56718b)}
body.voz-dark .v5-compare td.yes{color:#8fdcab}
.v5-buy{background:#b07d0a}
.v5-code{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin-top:12px}
.v5-code label{grid-column:1/-1;font-weight:700}
.v5-code input{min-height:46px;border-radius:12px;border:1.5px solid var(--line,#c7d9e9);padding:0 12px;font-size:1.05rem;letter-spacing:.04em}
.v5-lock{display:grid;gap:3px;width:100%;text-align:left;margin:0 0 12px;padding:12px 14px;border-radius:14px;border:2px solid #d9a420;background:#fff7e0;color:#4a3700;font-weight:600;line-height:1.35}
.v5-lock strong{font-size:1rem;color:#7a5600}
body.voz-dark .v5-lock{background:#3a3016;color:#ffe9b0;border-color:#b8902a}body.voz-dark .v5-lock strong{color:#ffd45e}
.v5-locked input:disabled,.v5-locked select:disabled,.v5-locked button:disabled,.v5-locked textarea:disabled{opacity:.5;cursor:not-allowed}
.v5-disabled-label{opacity:.55}
.v5-upsell p{font-size:1.05rem;line-height:1.45}

/* ---------- 5. Accesibilidad ---------- */
.v5-label{font-weight:700;margin:6px 0 6px}
.v5-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.v5-seg button{min-height:52px;border-radius:12px;border:1.5px solid var(--line,#c7d9e9);background:var(--card,#fff);color:var(--ink,#142f4c);font-weight:750}
.v5-seg button[aria-checked="true"]{background:var(--pro-accent,#125483);color:#fff;border-color:var(--pro-accent,#125483)}
body.voz-dark .v5-seg button[aria-checked="true"]{color:#0d1a27}
#v5A11y h3{margin:18px 0 4px}
/* Foco siempre visible para teclado y pulsadores */
:focus-visible{outline:3px solid #f2a900!important;outline-offset:2px!important}
/* Alto contraste */
body.v5-contrast .tile{border:3px solid #000!important}
body.v5-contrast .tile .word{background:#fff!important;color:#000!important;font-weight:900!important;border-top:2px solid #000!important}
body.v5-contrast .message,body.v5-contrast .btn,body.v5-contrast .smallbtn,body.v5-contrast .pro-tool,body.v5-contrast #boardArea .categorychips button{border:2px solid #000!important}
body.v5-contrast .message{background:#fff!important;color:#000!important}
body.v5-contrast.voz-dark .tile{border-color:#fff!important}
body.v5-contrast.voz-dark .tile .word{background:#000!important;color:#fff!important;border-top-color:#fff!important}
body.v5-contrast.voz-dark .message{background:#000!important;color:#fff!important}
body.v5-contrast.voz-dark .btn,body.v5-contrast.voz-dark .smallbtn,body.v5-contrast.voz-dark .pro-tool,body.v5-contrast.voz-dark #boardArea .categorychips button{border-color:#fff!important}
/* Menos movimiento */
body.v5-reduce *,body.v5-reduce *::before,body.v5-reduce *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
/* Mayúsculas */
body.v5-upper .tile .word,body.v5-upper .message,body.v5-upper .pro-phrase{text-transform:uppercase;letter-spacing:.02em}
/* Barrido */
.v5-scan{outline:6px solid #f2a900!important;outline-offset:-6px!important;box-shadow:0 0 0 4px rgba(242,169,0,.35)!important;position:relative;z-index:3}
.v5-scan-choose{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:10030;min-height:76px;border-radius:22px;border:0;background:#f2a900;color:#1d1300;font-size:1.6rem;font-weight:900;box-shadow:0 10px 30px rgba(0,0,0,.3)}
body.v5-scanning{padding-bottom:100px}
body.v5-scanning #simpleScreen{padding-bottom:calc(env(safe-area-inset-bottom) + 100px)!important}

#simpleGrid.v5-one-col{grid-template-columns:1fr!important;grid-auto-rows:1fr}
#simpleGrid.v5-one-col .tile .word{font-size:clamp(1.4rem,6vw,2rem)}

/* Rev. 5.7 — modo sencillo: la foto se presenta como una tarjeta redondeada centrada. */
#simpleGrid .tile{padding:10px 10px 4px!important}
#simpleGrid .tile .picture{width:auto!important;max-width:100%;align-self:center;border-radius:16px!important;box-shadow:0 2px 8px rgba(20,50,80,.14)}
#simpleScreen.without-labels #simpleGrid .tile{padding:10px!important}
.v5-launch{background:#e3f4e8;color:#1d6a37;border-radius:14px;padding:12px 14px;font-weight:700}body.voz-dark .v5-launch{background:#173a26;color:#a9e5bd}