/* Base visual de Manna: fichas de diseño y componentes compartidos.
   El porqué de cada decisión está en DESIGN.md (raíz del proyecto). */

@font-face { font-family: 'Sora'; src: url('/vendor/sora/Sora-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap;
  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; }
@font-face { font-family: 'Sora'; src: url('/vendor/sora/Sora-latin-ext.woff2') format('woff2'); font-weight: 100 800; font-display: swap;
  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: 'Geist Mono'; src: url('/vendor/geist/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;

  /* Suelo y superficies sólidas: una escalera de cuatro pasos sobre un casi negro. */
  --canvas: #05070a;
  --s1: #0c0f14;
  --s2: #131720;
  --s3: #1b202a;
  --line: #1e2430;
  --line-2: #2b3341;

  /* Cristal: lo que flota sobre la proyección, en tres niveles (flotante, cajón y hoja). Sin desenfoque
     en el navegador, cada nivel es una superficie sólida (ver el @supports de abajo). */
  --glass-1: rgba(10, 12, 16, 0.55);
  --glass-2: rgba(12, 14, 18, 0.74);
  --glass-3: rgba(14, 17, 22, 0.92);
  --glass-line: rgba(255, 255, 255, 0.12);
  --blur-1: 20px;
  --blur-2: 26px;

  /* Texto */
  --ink: #f1f4f8;
  --ink-2: #c4cbd6;
  --ink-3: #9aa3b2;
  --ink-4: #5b6375; /* solo decorativo o deshabilitado: no llega al contraste AA */

  /* Un solo acento: el cian de la M. Selección, acción principal y foco. */
  --accent: #5ce8ff;
  --accent-hover: #8af0ff;
  --accent-soft: rgba(92, 232, 255, 0.14);
  --on-accent: #04161a;

  /* Rojo: exclusivamente "al aire" y acciones destructivas. */
  --live: #e0383e;
  --live-ink: #ffaaad; /* claro para leerse también sobre una fila teñida de cian (4,5:1) */
  --live-soft: rgba(224, 56, 62, 0.16);
  --live-line: rgba(224, 56, 62, 0.5);  /* borde de una fila al aire o con error */
  --live-strong: #d02f35;               /* fondo de una etiqueta «al aire» con texto blanco encima (5:1) */
  --on-live: #fff;
  --media-bg: #000;                     /* detrás de una miniatura o una imagen que no llena su recuadro */
  --scrim: rgba(0, 0, 0, 0.75);         /* fichas pequeñas encima de una miniatura (duración, subtítulos) */
  --shadow-color: rgba(0, 0, 0, 0.55);  /* sombra de lo que flota */
  --ok: #3fb27f;

  /* Formas: botones, fichas y búsquedas en píldora; 10 piezas pequeñas, 14 controles y filas,
     22 paneles y monitores, 28 ventanas. */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 24px;
  --r-pill: 999px;

  --font: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --control: 30px;
  /* Tamaño de la interfaz de este dispositivo (Ajustes, 1.31): de 1 (el de siempre, el mínimo) a 1,08. Lo pone el
     guion de la cabecera de cada página; la proyección no lo usa. Lo que se mide por la pantalla (vw, dvh) se divide
     entre él, porque el zoom también lo agrandaría. */
  --zoom: 1;

  /* Capas */
  --z-nav: 20;
  --z-sheet: 30;
  --z-pop: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* Sin desenfoque (navegadores de televisores y celulares viejos), el cristal es sólido para que se lea. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-1: #0c0f14; --glass-2: #0f1218; --glass-3: #12151b; }
}

/* Pantallas táctiles: controles más altos para el dedo. La clase "touch" la pone un script
   mínimo en la cabecera de cada página (pantalla táctil, o ?tactil en la dirección). */
html.touch { --control: 38px; --tap: 35px; }
/* En una tableta en horizontal (la disposición del escritorio, 860 px o más) los de 38 px no dejaban sitio al
   escenario: más pequeños, como pidió el dueño el 2026-10-16. Nada que se toque baja de 35 px (--tap, 2026-10-17). */
@media (min-width: 860px) {
  html.touch { --control: 35px; --tap: 35px; }
  html.touch .chip { padding: 8px 12px; }
}

* { box-sizing: border-box; }
html { zoom: var(--zoom); }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 12px/1.45 var(--font);
  font-feature-settings: 'tnum';
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html.touch body { font-size: 14px; }

h1, h2, h3, p { margin: 0; }
h1 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ic { flex-shrink: 0; fill: currentColor; display: block; }
.muted { color: var(--ink-3); }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

kbd {
  font: 500 10px var(--mono); color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; margin-left: 6px;
}
html.touch kbd { display: none; }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control); padding: 0 12px;
  background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-weight: 500; white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s;
}
a.btn { color: inherit; text-decoration: none; }
.btn:hover { background: var(--s3); border-color: var(--line-2); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary kbd { color: var(--on-accent); border-color: rgba(4, 22, 26, 0.4); }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.danger { color: var(--live-ink); }
.btn.danger:hover { border-color: var(--live); }
.btn.grow { flex: 1; }
.btn.big { min-height: 40px; font-size: 14px; }

.icon-btn {
  width: var(--control); height: var(--control); flex-shrink: 0;
  display: inline-grid; place-items: center; border-radius: var(--r-pill); color: var(--ink-3);
  transition: background 0.15s var(--ease), color 0.15s;
}
.icon-btn:hover { background: var(--s3); color: var(--ink); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.sm { width: 26px; height: 26px; }
html.touch .icon-btn.sm { width: var(--tap); height: var(--tap); }
html.touch .chip { padding: 10px 14px; }
html.touch .link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 6px; }

.link { color: var(--accent); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---- Campos ---- */
.input, .select {
  width: 100%; min-height: var(--control); padding: 0 10px;
  background: var(--s2); border: 1px solid var(--line); border-radius: var(--r);
}
.select { width: auto; max-width: 100%; font-weight: 500; color: var(--ink-2); padding-right: 6px; text-overflow: ellipsis; }
.ws-head .select { max-width: 230px; }
.input:focus, .select:focus { outline: none; border-color: var(--accent); }
.input::placeholder { color: var(--ink-3); }
input[type='range'] { width: 100%; accent-color: var(--accent); }
input[type='color'] { width: 100%; height: var(--control); padding: 3px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r); }
input[type='file'].input { padding: 6px; height: auto; }

.label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ink-3); font-size: 12px; font-weight: 500; }
.field { margin-bottom: 16px; }

.search {
  display: flex; align-items: center; gap: 8px; min-height: var(--control); padding: 0 14px;
  background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-3);
}
.search:focus-within { border-color: var(--accent); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); height: 100%; }
.search input::placeholder { color: var(--ink-3); }

/* ---- Insignias y fichas ---- */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.badge.live { background: var(--live-strong); color: var(--on-live); }
.chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); white-space: nowrap; transition: background 0.15s var(--ease); }
.chip:hover { border-color: var(--line-2); background: var(--s2); }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.status { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.status.warn { color: var(--accent); }
.tally { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; }
.tally.on { background: var(--live); box-shadow: 0 0 0 3px var(--live-soft); }

/* Tipo de elemento: el color vive solo aquí, nunca en botones ni en texto de la interfaz. */
.kind { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; background: var(--s3); color: var(--ink-2); }
.kind.k-verses { background: rgba(110, 168, 254, 0.14); color: #8fbcff; }
.kind.k-song { background: rgba(192, 140, 245, 0.14); color: #cda6f7; }
.kind.k-lyrics { background: rgba(192, 140, 245, 0.14); color: #cda6f7; }
.kind.k-image { background: rgba(92, 200, 161, 0.14); color: #7ad6b4; }
.kind.k-video { background: rgba(242, 119, 122, 0.14); color: #f59a9c; }
.kind.k-audio { background: rgba(245, 158, 111, 0.14); color: #f5b38f; }
.kind.k-youtube, .kind.k-ytlink { background: rgba(242, 119, 122, 0.14); color: #f59a9c; }
.kind.k-slides { background: rgba(237, 169, 58, 0.14); color: #f0bc66; }
.kind.k-compare { background: rgba(86, 212, 234, 0.14); color: #7fdcec; }
.kind.k-web { background: rgba(140, 200, 96, 0.14); color: #a8d77f; }
.kind.k-text { background: rgba(240, 130, 180, 0.14); color: #f3a3c9; }
.kind.k-clock { background: rgba(250, 204, 21, 0.14); color: #f5d565; }
.kind.k-testcard { background: var(--s3); color: var(--ink-2); }

/* Grupo de botones de una sola elección (disposición, vista). */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-pill); }
.seg .icon-btn { width: calc(var(--control) - 6px); height: calc(var(--control) - 6px); }
.seg .icon-btn.on { background: var(--s3); color: var(--accent); }
html.touch .seg .icon-btn { width: var(--tap); height: var(--tap); }

/* ---- Tareas con avance (convertir, descargar): ver core/jobs.js ---- */
.jobs { display: grid; gap: 8px; }
.job { padding: 8px 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); }
.job-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.job-head strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job small { display: block; color: var(--ink-3); font-size: 12px; }
.job.error { border-color: var(--live-line); }
.job.error small { color: var(--live-ink); }
.job.done small { color: var(--ok); }
.bar { height: 4px; margin: 6px 0; border-radius: 99px; background: var(--s3); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.3s linear; }
.job.done .bar span { background: var(--ok); }
/* Sin avance conocido: una franja que va y viene. */
.bar.busy span { width: 35% !important; animation: bar-busy 1.2s ease-in-out infinite alternate; }
@keyframes bar-busy { from { transform: translateX(0); } to { transform: translateX(186%); } }

/* Monitor: un escenario de proyección en miniatura (ver modules/projection/stage.js). */
.monitor { aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 1px solid var(--line-2); overflow: hidden; background: #000; }
.monitor.on-air { border-color: var(--live); box-shadow: 0 0 0 1px var(--live); }

.empty { padding: 28px 20px; text-align: center; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

/* ---- Aviso flotante ---- */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: var(--z-toast);
  max-width: min(calc(92vw / var(--zoom)), 460px); padding: 11px 18px; border-radius: var(--r-lg);
  background: var(--glass-3); border: 1px solid var(--glass-line); backdrop-filter: blur(var(--blur-1)); -webkit-backdrop-filter: blur(var(--blur-1));
  opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast[data-kind='error'] { border-color: var(--live); color: var(--live-ink); }
@media (max-width: 859px) { #toast { bottom: 132px; } }

/* ---- Ventana modal y menú ---- */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 6, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modal { width: min(100%, 460px); max-height: calc(90dvh / var(--zoom)); overflow: auto; background: var(--glass-3); border: 1px solid var(--glass-line); border-radius: var(--r-xl); box-shadow: 0 30px 80px var(--shadow-color); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 18px 20px 20px; }
.modal-body p { margin-bottom: 12px; }
/* Una lista para revisar antes de añadir (citas de un documento, varios videos de YouTube): la lista se desplaza y
   las acciones quedan abajo, a la vista. */
.modal.review-box { width: min(100%, 720px); display: flex; flex-direction: column; }
.review-box .modal-body, .review { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.review-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.review-start { display: grid; gap: 10px; }
.review-text { min-height: 140px; padding: 10px; resize: vertical; font: inherit; line-height: 1.45; }
.review-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.review-status:empty { display: none; }
.review-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.modal-body .review-summary { flex: 1 1 200px; margin: 0; font-weight: 600; }
.review-list { display: grid; gap: 4px; }
.review-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.review-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.review-row input[type='checkbox'] { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.review-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.review-why { display: flex; align-items: center; gap: 4px; color: var(--live-ink); }
.review-ctx { color: var(--ink-3); overflow-wrap: anywhere; }
.review-ctx mark { background: none; color: var(--ink); font-weight: 600; }
.review-dropped { margin-top: 10px; color: var(--ink-3); }
.review-dropped summary { cursor: pointer; }
html.touch .review-dropped summary { padding: 11px 0; }
.modal-body .review-dropped p { margin: 6px 0; }

.menu {
  position: fixed; z-index: var(--z-pop); min-width: 220px; padding: 6px;
  background: var(--glass-3); border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  backdrop-filter: blur(var(--blur-1)); -webkit-backdrop-filter: blur(var(--blur-1));
  box-shadow: 0 20px 50px var(--shadow-color);
}

/* Lo que se abre aparece con un fundido corto (pedido del dueño, 2026-10-18): solo opacidad y un desplazamiento
   pequeño, que el navegador mueve sin recalcular la página, y en menos de 0,2 s para no hacer esperar. Al cerrarse,
   desaparece al instante. Con «reducir movimiento» del equipo, nada (abajo). `translate` y `scale` se suman al
   `transform` con que algunas piezas se colocan. */
@keyframes appear { from { opacity: 0; translate: 0 -4px; } }
@keyframes appear-up { from { opacity: 0; translate: 0 10px; } }
@keyframes appear-side { from { opacity: 0; translate: -10px 0; } }
@keyframes rise { from { opacity: 0; scale: 0.97; } }
@keyframes fade { from { opacity: 0; } }
.menu { animation: appear 0.14s var(--ease); }
.modal-backdrop { animation: fade 0.14s ease; }
.modal { animation: rise 0.18s var(--ease); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--control); padding: 0 12px; border-radius: var(--r); text-align: left; }
.menu button:hover:not(:disabled) { background: var(--s3); }
.menu button:disabled { color: var(--ink-4); cursor: default; }
.menu button small { margin-left: auto; color: var(--ink-3); font-size: 11px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* ---- Conexión perdida ---- */
.offline-bar { padding: 8px 12px; text-align: center; background: #5c1a1d; color: #ffd9da; flex-shrink: 0; }
.offline-bar .btn { margin-left: 10px; min-height: 28px; background: transparent; border-color: var(--live-ink); color: #fff; }

/* ---- Marca ---- */
/* El icono (logo.svg) para espacios pequeños; la marca sola (marca.svg) con el nombre para presentar la app. */
.brand-mark { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.brand-mark img { display: block; width: 100%; height: 100%; }
/* Páginas sin escenario (Inicio, revisión del equipo): el resplandor de la M de fondo. */
body.glow { background: radial-gradient(900px 520px at 50% 0%, rgba(0, 255, 255, 0.12), transparent 65%), radial-gradient(900px 600px at 50% 120%, rgba(59, 79, 216, 0.28), transparent 60%), var(--canvas); background-attachment: fixed; }
.lockup { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lockup img { width: 104px; height: auto; margin-bottom: 4px; }
/* El nombre del logotipo es la única excepción a "sin mayúsculas ni peso 700" (ver DESIGN.md). */
.lockup .wordmark { font-size: 28px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.1; }
.lockup .tagline { color: var(--ink-2); font-size: 14px; }
.lockup .version { margin-top: 10px; color: var(--ink-3); font: 500 12px var(--mono); }

/* Ventana de dispositivos */
.steps { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); }
.steps li { margin-bottom: 4px; }
.device { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
.device code { font: 600 19px var(--mono); user-select: all; }
.qr { width: 190px; padding: 8px; background: #fff; border-radius: var(--r); line-height: 0; }
.alt-addresses { margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); }
.alt-addresses summary { cursor: pointer; color: var(--ink-3); }
html.touch .alt-addresses summary { padding: 11px 0; }
.alt-addresses p { margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  /* Sin la franja que va y viene, una barra sin avance conocido se ve entera y tenue: quieta en el 35 % parecería un avance. */
  .bar.busy span { width: 100% !important; opacity: 0.4; }
}