/* Tipografía local (Outfit, OFL-1.1). Sin peticiones a Google Fonts. */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(vendor/fonts/outfit-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(vendor/fonts/outfit-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===== Temas =====
 * Oscuro por defecto. Si el sistema pide claro y la persona no eligió nada, se usa el claro (media query).
 * Si eligió (clase .light / .dark en <body>, guardada en localStorage), manda su elección.
 * IMPORTANTE: los valores de "body.light" y los de la media query deben ser idénticos (hay una prueba que lo comprueba).
 * Contrastes calculados (WCAG 2.1): texto normal >= 4.5:1, texto grande/UI >= 3:1. */
:root, body {
  color-scheme: dark;
  --bg: #0e0e10;
  --panel: #18181b;
  --panel-2: #1f1f23;
  --border: #3a3a40;          /* decorativo (paneles) */
  --border-ui: #787882;       /* bordes de campos y botones: >= 3:1 (WCAG 1.4.11) */
  --accent: #3d9a6a;          /* texto/iconos de acento sobre fondo oscuro: 5.09:1 */
  --accent-bg: #2a7a54;       /* fondo de botones con texto blanco: 5.24:1 */
  --accent-hover: #2f8559;    /* 4.55:1 con texto blanco */
  --text: #f0f0f2;
  --muted: #a4a4ad;
  --input-bg: #121214;
  --warn: #d9a13a;
  --error: #ec7773;
  --focus: #7cc4ff;
}
body.light {
  color-scheme: light;
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-2: #f0f0f2;
  --border: #c9c9d1;
  --border-ui: #8a8a94;
  --accent: #23704c;
  --accent-bg: #2a7a54;
  --accent-hover: #1f6a46;
  --text: #1a1a1e;
  --muted: #5d5d68;
  --input-bg: #fafafa;
  --warn: #8a5a00;
  --error: #b32d29;
  --focus: #0b57d0;
}
@media (prefers-color-scheme: light) {
  body:not(.dark) {
    color-scheme: light;
    --bg: #f7f7f8;
    --panel: #ffffff;
    --panel-2: #f0f0f2;
    --border: #c9c9d1;
    --border-ui: #8a8a94;
    --accent: #23704c;
    --accent-bg: #2a7a54;
    --accent-hover: #1f6a46;
    --text: #1a1a1e;
    --muted: #5d5d68;
    --input-bg: #fafafa;
    --warn: #8a5a00;
    --error: #b32d29;
    --focus: #0b57d0;
  }
}

* { box-sizing: border-box; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  --topbar-h: 60px;
}

/* Accesibilidad: solo para lectores de pantalla, enlace de salto y foco */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 0.6rem; top: -4rem; z-index: 100;
  background: var(--accent-bg); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 0.6rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.main:focus { outline: none; }                     /* destino programático del enlace de salto */

/* Sidebar */
.sidebar {
  width: 196px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 0.8rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
  align-items: stretch;
  position: sticky;
  top: var(--topbar-h);
  align-self: flex-start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.tabs { display: flex; flex-direction: column; gap: 0.2rem; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item, .theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  flex-shrink: 0;
  min-height: 40px;
  line-height: 1.2;
  width: 100%;
}
.nav-item:hover, .theme-toggle:hover { background: var(--panel-2); border-color: transparent; }
.nav-item.active { background: var(--accent-bg); color: #fff; border-color: transparent; }
.nav-item.active:hover { background: var(--accent-hover); }

/* Menú contraído (escritorio): solo iconos; el nombre sigue disponible para lectores de pantalla y como tooltip */
.sidebar.collapsed { width: 60px; padding: 0.8rem 0.3rem; }
.sidebar.collapsed .nav-item, .sidebar.collapsed .theme-toggle { justify-content: center; padding: 0.5rem; }
.sidebar.collapsed .nav-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Main */
.main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
}
.main h1 { font-size: 1.6rem; margin: 0 0 0.4rem; }
.subtitle { color: var(--muted); margin: 0 0 1.2rem; font-size: 0.95rem; }

.section { display: none; }
.section.active { display: block; }

.controls {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.control-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
label { font-size: 0.85rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.25rem; }
input, select, textarea, button {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border-ui);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
}
button { cursor: pointer; min-height: 38px; }
button:hover { border-color: var(--accent); }
button.action, .nav-item.active {
  background: var(--accent-bg);
  color: #fff;
  border-color: var(--accent-bg);
}
button.action:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:disabled { opacity: 0.6; cursor: not-allowed; }     /* los controles desactivados están exentos de contraste, pero que se lean */

.canvases { display: flex; gap: 1rem; flex-wrap: wrap; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem;
  flex: 1;
  min-width: 240px;
}
canvas {
  background: #000;
  border-radius: 8px;
  max-width: 100%;
  max-height: 55vh;
  display: block;
  image-rendering: pixelated;
}
.label { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; }
.status { margin-top: 0.8rem; font-size: 0.9rem; color: var(--accent); }
.hint { font-size: 0.8rem; color: var(--muted); }
.hidden { display: none !important; }

/* ===== Fase 1 ===== */
label.check { flex-direction: row; align-items: center; gap: 0.45rem; min-height: 32px; }
label.check input { padding: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--accent-bg); }
textarea { max-width: 100%; }
#decodedOut { width: 100%; resize: vertical; margin-bottom: 0.6rem; }
canvas { cursor: zoom-in; }
canvas.zoomed { max-height: none; cursor: zoom-out; }
.out-box { margin: 0.2rem 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.out-box a, .out-box button { color: var(--accent); }
.out-box a { text-decoration: underline; }
.out-box .btn-file { border-color: var(--accent); }
.status.warn { color: var(--warn); }
.status.error { color: var(--error); }
.progress { height: 6px; background: var(--border); border-radius: 4px; margin-top: 0.6rem; overflow: hidden; }
#progressFill, #decProgressFill { height: 100%; width: 0; background: var(--accent-bg); transition: width 0.2s; }

/* ===== Fase 2 (CSP: sin estilos en línea) ===== */
.grow { flex: 1; min-width: 200px; }
label.grow > textarea, label.grow > input { width: 100%; }
.w-name { width: 180px; }
.w-name input { width: 100%; }
.offscreen { position: absolute; left: -9999px; top: 0; }
.boot-error { padding: 1rem; color: var(--error); }
.pw-meter { font-size: 0.8rem; min-height: 1.1em; }
.pw-meter.weak { color: var(--error); }
.pw-meter.ok { color: var(--warn); }
.pw-meter.strong { color: var(--accent); }
.lock { color: var(--accent); }
.mb { margin-bottom: 1rem; }

/* ===== Fase 5 ===== */
label.dropzone {
  border: 2px dashed var(--border-ui);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  min-width: 220px;
}
label.dropzone .dz-hint { font-size: 0.75rem; opacity: 0.9; }
.dragover { outline: 3px dashed var(--accent); outline-offset: 2px; background: var(--panel-2); }
.hint-details { font-size: 0.85rem; color: var(--muted); }
.hint-details summary { cursor: pointer; padding: 0.3rem 0; }
.hint-details ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.hint-details li { margin: 0.25rem 0; }
.actions button { min-width: 0; }

/* Movimiento reducido: sin transiciones ni desplazamientos suaves (las animaciones de píxeles las gestiona app.js) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== v1.12: cabecera superior, pie del menú y Ko-fi ===== */
html { scroll-padding-top: 5rem; }          /* la cabecera fija no tapa el campo enfocado ni el destino de un desplazamiento (WCAG 2.4.11) */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 0.8rem; padding: 0 1rem;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar .toggle-sidebar { flex: none; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text); border: 1px solid var(--border-ui); border-radius: 8px; }
.topbar .toggle-sidebar:hover { background: var(--panel-2); }
.site-title { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.01em; color: var(--accent); line-height: 1; white-space: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.topbar .lang-picker { width: 8.5rem; }
.topbar .theme-toggle { width: auto; border: 1px solid var(--border-ui); padding: 0.4rem 0.8rem; min-height: 40px; }
.layout { display: flex; flex: 1; min-width: 0; }
.sidebar-foot { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.kofi-link { text-decoration: none; }
.kofi-link .ico { color: var(--error); }
.kofi-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 8px; background: var(--accent-bg); color: #fff; text-decoration: none; font-weight: 600; }
.kofi-btn:hover { background: var(--accent-hover); }
.support-card .kofi-btn { margin-top: 0.3rem; }

/* Móvil: la cabecera superior sigue igual y la barra lateral pasa a ser una franja de pestañas desplazables */
@media (max-width: 700px) {
  body { --topbar-h: 56px; }
  .layout { flex-direction: column; }
  .sidebar, .sidebar.collapsed {
    position: sticky; top: var(--topbar-h); z-index: 20;
    width: 100%; height: auto; overflow: visible; align-self: stretch;
    flex-direction: row; align-items: center; gap: 0.3rem;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
  }
  .sidebar.mnav-closed { display: none; }
  .sidebar nav { flex: 1 1 auto; min-width: 0; }
  .tabs { flex-direction: row; overflow-x: auto; gap: 0.3rem; padding-bottom: 0.2rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .nav-item, .sidebar.collapsed .nav-item { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0.4rem 0.8rem; font-size: 0.85rem; scroll-snap-align: start; justify-content: flex-start; }
  .sidebar.collapsed .nav-item .nav-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .sidebar-foot, .sidebar.collapsed .sidebar-foot { flex: none; flex-direction: row; margin: 0; padding: 0; border: 0; gap: 0.2rem; }
  .theme-toggle, .sidebar.collapsed .theme-toggle { width: 44px; min-height: 44px; margin: 0; justify-content: center; padding: 0.4rem; }
  .theme-toggle .nav-label, .sidebar.collapsed .theme-toggle .nav-label, .lang-picker .nav-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .topbar { padding: 0 0.6rem; gap: 0.4rem; }
  .site-title { font-size: 1.3rem; }
  .topbar-actions { gap: 0.2rem; }
  .topbar .lang-picker, .lang-picker { width: auto; flex: 0 1 112px; min-width: 0; padding: 0; }
  .topbar .theme-toggle { width: 44px; padding: 0.4rem; }
  .lang-picker select { min-height: 44px; padding-left: 0.5rem; padding-right: 1.6rem; }
  .main { padding: 0.8rem; }
  .control-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }   /* con wrap, la línea toma el ancho del hijo más ancho y desborda */
  .w-name { width: 100%; }
  canvas { max-height: 40vh; }
  input, select, textarea, button { min-height: 44px; font-size: 1rem; }
  label.check { min-height: 44px; }
  label.check input { width: 1.4rem; height: 1.4rem; }
  label.dropzone { min-width: 0; }
}

/* ===== Fase 8: sin desbordamiento horizontal (medido en Chromium real a 360-390 px) =====
   Causa: .control-row en columna CON flex-wrap:wrap toma el ancho del hijo más ancho (select/archivo, texto largo)
   en lugar del del contenedor, y la página se salía 51 px a la derecha en móvil (ver también el nowrap de arriba). */
label, .control-row > * { min-width: 0; }
select, input[type="file"] { max-width: 100%; text-overflow: ellipsis; }
select { width: 100%; }

/* ===== Fases 6/9/10: subtítulos de la pestaña de audio y vídeo, y botón de borrado ===== */
.subhead { font-size: 1.1rem; margin: 0 0 0.6rem; }
#media .controls + .controls { margin-top: 1.2rem; }
#wipeBtn:hover, #wipeBtn:focus-visible { color: var(--error); }

/* ===== Fase 6: opciones de la máscara de texto y vista previa ===== */
.mask-opts { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem 0.8rem; margin: 0.4rem 0 0.8rem; min-width: 0; }
.mask-opts legend { padding: 0 0.4rem; font-weight: 600; }
#maskPreview { display: block; width: 100%; max-width: 360px; height: auto; background: #000; border: 1px solid var(--border); border-radius: 6px; image-rendering: pixelated; margin-top: 0.4rem; }

/* ===== Fase 6: pantalla de resultado ===== */
.result-card { border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1rem; margin-top: 0.8rem; }
.meter { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 0.2rem 0 0.7rem; }
.meter > div { height: 100%; width: 0; background: var(--accent); }
.meter.warn > div { background: var(--warn); }
.result-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.result-list dt { font-weight: 600; }
.result-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .result-list { grid-template-columns: 1fr; } .result-list dd { margin-bottom: 0.4rem; } }
.file-preview { display: block; max-width: 100%; max-height: 320px; margin-top: 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: #000; }
.zip-list { margin: 0.4rem 0 0; padding-left: 1.2rem; max-height: 220px; overflow: auto; overflow-wrap: anywhere; }

/* ===== Fase 6: selector de idioma ===== */
.lang-picker { display: flex; flex-direction: column; padding: 0; font-size: 0.85rem; }
.lang-picker select { width: 100%; min-height: 40px; }
.lang-picker .nav-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* el nombre sigue ahí para los lectores de pantalla */

/* ===== v1.11: opciones del vídeo MP4 ===== */
.video-opts { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.8rem; margin: 0.6rem 0; min-width: 0; }
.video-opts > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.video-opts[open] > summary { margin-bottom: 0.6rem; }
.video-opts .control-row { margin-bottom: 0.5rem; }
#vidHint { margin: 0.2rem 0 0.4rem; font-size: 0.85rem; color: var(--muted, inherit); overflow-wrap: anywhere; }

/* ===== v1.12: «Aprende» y «Acerca de» ===== */
.learn-h { font-size: 1.15rem; margin: 0 0 0.6rem; }
#learn p, #about p { margin: 0 0 0.7rem; line-height: 1.55; overflow-wrap: anywhere; }
#learn p:last-child, #about p:last-child { margin-bottom: 0; }
#learn .note { border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 0.7rem; color: var(--muted); }
.learn-steps, .learn-list { margin: 0; padding-left: 1.3rem; line-height: 1.55; }
.learn-steps li, .learn-list li { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.learn-steps li:last-child, .learn-list li:last-child { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 0.9rem; min-width: 0; }
.card h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.card p { font-size: 0.92rem; }
#learn code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; background: var(--input-bg); border: 1px solid var(--border); border-radius: 5px; padding: 0.05rem 0.35rem; overflow-wrap: anywhere; word-break: break-all; }
.ex { line-height: 1.9; }
.ex-key { color: var(--muted); font-size: 0.85em; }

.brand-card { text-align: center; flex: none; max-width: 28rem; margin-left: auto; margin-right: auto; }
.brand-card .label { text-align: center; }
.brand-img { display: none; width: min(100%, 20rem); height: auto; margin: 0.4rem auto 0.8rem; }
.brand-dark { display: block; }                                 /* oscuro por defecto, igual que el tema */
body.light .brand-light { display: block; }
body.light .brand-dark { display: none; }
@media (prefers-color-scheme: light) {
  body:not(.dark) .brand-light { display: block; }
  body:not(.dark) .brand-dark { display: none; }
}
#about .hint { margin-top: 0.8rem; }
@media (max-width: 360px) {
  .site-title { font-size: 1.1rem; }
  .topbar { gap: 0.3rem; padding: 0 0.4rem; }
  .topbar .lang-picker, .lang-picker { flex-basis: 88px; }
}