/* Cubículos: estructura común + 5 temas (claro y oscuro).
   Cada tema solo cambia tipografía, paleta, densidad y su movimiento propio. */

@font-face { font-family: "Geist"; src: url(fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url(fonts/exo2.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "VT323"; src: url(fonts/vt323.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url(fonts/sharetechmono.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url(fonts/mplusrounded-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url(fonts/mplusrounded-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url(fonts/zenkaku-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url(fonts/zenkaku-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- tokens ---------- */

:root {
  --jp: "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 160ms;
  --t-ui: 220ms;
  --ancho: 46rem;

  /* Sobrio claro (por defecto) */
  --fondo: #f3f4f5;
  --superficie: #ffffff;
  --superficie-alta: #e9ebee;
  --linea: #c9cdd3;
  --tinta: #121417;
  --tinta-2: #474c54;
  --tinta-3: #6b717a;
  --acento: #121417;
  --sobre-acento: #ffffff;
  --acento-tinta: #121417;
  --ok: #1e7a46;
  --aviso: #8f5400;
  --error: #b42318;
  --seleccion: #cfd6e0;
  --foco: #121417;
  --radio: 12px;
  --radio-boton: 9px;
  --f-texto: "Geist", system-ui, var(--jp);
  --f-titulo: "Geist", system-ui, var(--jp);
  --peso-titulo: 620;
  --track-titulo: -0.012em;
  --tam-titulo: 1.0625rem;
  --tam-marca: 1.25rem;
  --sombra-flotante: 0 12px 32px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.08);
}
[data-tema="sobrio"][data-esquema="oscuro"] {
  --fondo: #0f1012; --superficie: #17191c; --superficie-alta: #24272b; --linea: #3a3f45;
  --tinta: #edeef0; --tinta-2: #b4b8bf; --tinta-3: #8b919a;
  --acento: #edeef0; --sobre-acento: #0f1012; --acento-tinta: #edeef0;
  --ok: #4ade80; --aviso: #f5b83d; --error: #ff6b5e; --seleccion: #3b4250; --foco: #edeef0;
  --sombra-flotante: 0 16px 40px -12px rgb(0 0 0 / 0.7);
}

/* Aincrad: menú de sistema plateado y naranja; de noche, el piso flotante en azul profundo */
[data-tema="aincrad"] {
  --fondo: #dde4ea; --superficie: #f8fafc; --superficie-alta: #e6ecf1; --linea: #b9c4ce;
  --tinta: #262c33; --tinta-2: #525b66; --tinta-3: #66707b;
  --acento: #f2a33a; --sobre-acento: #1f1608; --acento-tinta: #a65800;
  --ok: #4c9f26; --aviso: #a86b00; --error: #c81e3a; --seleccion: #ffd9a3; --foco: #e08a12;
  --radio: 4px; --radio-boton: 999px;
  --f-texto: "Exo 2", system-ui, var(--jp); --f-titulo: "Exo 2", system-ui, var(--jp);
  --peso-titulo: 640; --track-titulo: 0.01em; --tam-marca: 1.3rem;
  --hp: #6cc93a; --hp-fondo: #2b3a22;
}
[data-tema="aincrad"][data-esquema="oscuro"] {
  --fondo: #0b1522; --superficie: #122036; --superficie-alta: #1b2c46; --linea: #2f4566;
  --tinta: #e3ecf5; --tinta-2: #a8b8ca; --tinta-3: #8597ad;
  --acento: #f2a33a; --sobre-acento: #1f1608; --acento-tinta: #f6b35c;
  --ok: #7bd94a; --aviso: #ffc65c; --error: #ff5470; --seleccion: #6b4510; --foco: #f6b35c;
  --hp: #7bd94a; --hp-fondo: #0c1a10;
  --sombra-flotante: 0 18px 40px -14px rgb(0 0 0 / 0.75);
}

/* Terminal de los 90: fósforo ámbar; en claro, la misma consola impresa en papel continuo */
[data-tema="terminal"] {
  --fondo: #efe9da; --superficie: #f8f4e8; --superficie-alta: #e7dfcb; --linea: #b7a98e;
  --tinta: #2a2117; --tinta-2: #57472f; --tinta-3: #6d5b45;
  --acento: #2a2117; --sobre-acento: #f8f4e8; --acento-tinta: #a3360f;
  --ok: #2f6b1a; --aviso: #8a5a00; --error: #b3261e; --seleccion: #e6c88f; --foco: #a3360f;
  --radio: 0; --radio-boton: 0;
  --f-texto: "Share Tech Mono", ui-monospace, var(--jp); --f-titulo: "VT323", "Share Tech Mono", ui-monospace, var(--jp);
  --peso-titulo: 400; --track-titulo: 0.01em; --tam-titulo: 1.375rem; --tam-marca: 2rem;
}
[data-tema="terminal"][data-esquema="oscuro"] {
  --fondo: #0e0b07; --superficie: #15110b; --superficie-alta: #221a0f; --linea: #5c4216;
  --tinta: #ffb238; --tinta-2: #e09a2c; --tinta-3: #b07a24;
  --acento: #ffb238; --sobre-acento: #0e0b07; --acento-tinta: #ffc867;
  --ok: #a6ff5e; --aviso: #ffe066; --error: #ff5a47; --seleccion: #5c3f10; --foco: #ffc867;
  --sombra-flotante: 0 0 0 1px #5c4216, 0 18px 40px -12px rgb(0 0 0 / 0.9);
}

/* Pastel de los 2000: sakura, menta y mantequilla; de noche, un atardecer lila */
[data-tema="pastel"] {
  --fondo: #fff0f5; --superficie: #ffffff; --superficie-alta: #ffe3ee; --linea: #f0bfd3;
  --tinta: #4a3550; --tinta-2: #6a5672; --tinta-3: #806b88;
  --acento: #ff7eb3; --sobre-acento: #3d1630; --acento-tinta: #b8286a;
  --ok: #1f8a6f; --aviso: #9a6412; --error: #c92a63; --seleccion: #ffd0e3; --foco: #e0458a;
  --menta: #8ee3cf; --mantequilla: #ffe38a; --sello: #d7263d;
  --radio: 20px; --radio-boton: 999px;
  --f-texto: "M PLUS Rounded 1c", system-ui, var(--jp); --f-titulo: "M PLUS Rounded 1c", system-ui, var(--jp);
  --peso-titulo: 800; --track-titulo: 0; --tam-marca: 1.35rem;
}
[data-tema="pastel"][data-esquema="oscuro"] {
  --fondo: #261e2e; --superficie: #31273b; --superficie-alta: #3d3149; --linea: #5a4868;
  --tinta: #fbeaf2; --tinta-2: #dcc6d6; --tinta-3: #b9a2b6;
  --acento: #ff8dbe; --sobre-acento: #2a0f20; --acento-tinta: #ffa9cf;
  --ok: #7fe3c8; --aviso: #ffd877; --error: #ff7aa2; --seleccion: #6b3b57; --foco: #ffa9cf;
  --menta: #4fb59d; --mantequilla: #d9b84f; --sello: #ff6b81;
  --sombra-flotante: 0 18px 40px -14px rgb(10 0 12 / 0.7);
}

/* Vocaloid: cian Miku #39C5BB y rojo Teto */
[data-tema="vocaloid"] {
  --fondo: #eef8f8; --superficie: #ffffff; --superficie-alta: #dcf1f0; --linea: #a9d6d3;
  --tinta: #0f2629; --tinta-2: #3b585c; --tinta-3: #56757a;
  --acento: #39c5bb; --sobre-acento: #04201d; --acento-tinta: #0f7a72;
  --teto: #d7354b; --ok: #0f7a72; --aviso: #95590a; --error: #d7354b; --seleccion: #b5ebe6; --foco: #0f7a72;
  --radio: 6px; --radio-boton: 6px;
  --f-texto: "Zen Kaku Gothic New", system-ui, var(--jp); --f-titulo: "Zen Kaku Gothic New", system-ui, var(--jp);
  --peso-titulo: 700; --track-titulo: 0.005em;
}
[data-tema="vocaloid"][data-esquema="oscuro"] {
  --fondo: #0a1215; --superficie: #101e23; --superficie-alta: #17292f; --linea: #24434a;
  --tinta: #e3f6f5; --tinta-2: #a6c9c7; --tinta-3: #82a5a3;
  --acento: #39c5bb; --sobre-acento: #04201d; --acento-tinta: #62e0d6;
  --teto: #ff5a6e; --ok: #62e0d6; --aviso: #f3c15b; --error: #ff5a6e; --seleccion: #1d4d4a; --foco: #62e0d6;
  --sombra-flotante: 0 18px 40px -14px rgb(0 0 0 / 0.75);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scrollbar-color: var(--tinta-3) transparent; }
[data-esquema="oscuro"] { color-scheme: dark; }
body {
  margin: 0; min-height: 100dvh; background: var(--fondo); color: var(--tinta);
  font: 400 1rem/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--seleccion); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0; }
.icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- barra superior ---------- */

.barra { position: sticky; top: 0; z-index: 5; background: var(--fondo); padding-top: env(safe-area-inset-top); }
.barra-dentro { max-width: var(--ancho); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.marca { font: var(--peso-titulo) var(--tam-marca)/1.1 var(--f-titulo); letter-spacing: var(--track-titulo); margin-right: auto; }
.marca { white-space: nowrap; }
.marca-jp { font: 500 0.8125rem/1 var(--jp); letter-spacing: 0.06em; color: var(--tinta-2); margin-left: 6px; text-shadow: none; }
[data-tema="terminal"] .marca-jp { font-size: 0.75rem; margin-left: 4px; }
@media (max-width: 359px) { .marca-jp { display: none; } }
.servicios { display: flex; gap: 12px; font-size: 0.8125rem; color: var(--tinta-2); }
.servicio { display: inline-flex; align-items: center; gap: 6px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); transition: background-color var(--t-ui) ease; }
.servicio[data-ok="1"] .punto { background: var(--ok); }
.servicio[data-ok="0"] .punto { background: var(--error); }
.servicio[data-ok="0"] { color: var(--error); }

.boton-icono {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radio-boton);
  background: transparent; color: var(--tinta-2); transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease;
}
.boton-icono:active { transform: scale(0.94); }

/* selector de temas (popover nativo) */
.temas {
  inset: auto; position: fixed; top: calc(64px + env(safe-area-inset-top)); right: max(16px, calc((100vw - var(--ancho)) / 2 + 16px));
  margin: 0; padding: 16px; width: min(19rem, calc(100vw - 32px)); border: 0; border-radius: max(var(--radio), 6px);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-flotante);
  transform-origin: top right; opacity: 1; transform: scale(1);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.temas:not(:popover-open) { opacity: 0; transform: scale(0.96); transition-duration: 120ms; }
@starting-style { .temas:popover-open { opacity: 0; transform: scale(0.96); } }
.temas fieldset { border: 0; margin: 0; padding: 0; }
.temas legend { padding: 0; margin-bottom: 8px; font-size: 0.8125rem; color: var(--tinta-2); }
.tema-opcion { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: calc(var(--radio-boton) / 2 + 2px); cursor: pointer; }
.tema-opcion:has(input:checked) { background: var(--superficie-alta); font-weight: 600; }
.tema-opcion input, .modos input { position: absolute; opacity: 0; pointer-events: none; }
.tema-opcion:has(input:focus-visible), .modos label:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 1px; }
.muestra { display: inline-flex; }
.muestra i { width: 14px; height: 14px; border-radius: 50%; margin-right: -4px; box-shadow: 0 0 0 2px var(--superficie); }
[data-muestra="sobrio"] i:nth-child(1) { background: #f3f4f5; } [data-muestra="sobrio"] i:nth-child(2) { background: #8b919a; } [data-muestra="sobrio"] i:nth-child(3) { background: #121417; }
[data-muestra="aincrad"] i:nth-child(1) { background: #dde4ea; } [data-muestra="aincrad"] i:nth-child(2) { background: #f2a33a; } [data-muestra="aincrad"] i:nth-child(3) { background: #6cc93a; }
[data-muestra="terminal"] i:nth-child(1) { background: #0e0b07; } [data-muestra="terminal"] i:nth-child(2) { background: #ffb238; } [data-muestra="terminal"] i:nth-child(3) { background: #ff5a47; }
[data-muestra="pastel"] i:nth-child(1) { background: #ff7eb3; } [data-muestra="pastel"] i:nth-child(2) { background: #8ee3cf; } [data-muestra="pastel"] i:nth-child(3) { background: #ffe38a; }
[data-muestra="vocaloid"] i:nth-child(1) { background: #39c5bb; } [data-muestra="vocaloid"] i:nth-child(2) { background: #0f2629; } [data-muestra="vocaloid"] i:nth-child(3) { background: #d7354b; }
.modos { margin-top: 16px !important; }
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.modos legend { grid-column: 1 / -1; }
.modos label { display: grid; place-items: center; min-height: 40px; border-radius: calc(var(--radio-boton) / 2 + 2px); font-size: 0.875rem; cursor: pointer; background: var(--superficie-alta); color: var(--tinta-2); }
.modos label:has(input:checked) { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }

/* ---------- contenido ---------- */

.contenido { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px calc(96px + env(safe-area-inset-bottom)); }

.entrada { margin-bottom: 24px; }
.entrada-etiqueta { display: block; font: var(--peso-titulo) 1.5rem/1.2 var(--f-titulo); letter-spacing: var(--track-titulo); margin-bottom: 12px; }
[data-tema="terminal"] .entrada-etiqueta { font-size: 2rem; }
.entrada-fila { display: flex; gap: 8px; align-items: flex-end; }
.entrada textarea {
  flex: 1; min-width: 0; min-height: 48px; max-height: 9rem; padding: 12px 14px; resize: none; field-sizing: content;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--tinta);
  line-height: 1.4; transition: border-color var(--t-press) ease;
}
.entrada textarea::placeholder { color: var(--tinta-3); }
.entrada textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); }
.entrada-ayuda { margin-top: 8px; font-size: 0.8125rem; color: var(--tinta-3); }
.entrada-ayuda[data-error] { color: var(--error); }

/* botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--radio-boton); font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease, color var(--t-press) ease, opacity var(--t-press) ease;
}
.boton:active:not(:disabled) { transform: scale(0.97); }
.boton:disabled { opacity: 0.5; cursor: default; }
.boton.primario { background: var(--acento); color: var(--sobre-acento); }
.boton.secundario { background: var(--superficie-alta); color: var(--tinta); }
.boton.quieto { background: transparent; color: var(--tinta-2); padding: 0 12px; }
.boton[aria-busy="true"] span { opacity: 0.6; }
.entrada .boton { min-height: 48px; padding: 0 20px; }
@media (hover: hover) and (pointer: fine) {
  .boton.primario:hover:not(:disabled) { filter: brightness(1.06); }
  .boton.secundario:hover:not(:disabled), .boton.quieto:hover:not(:disabled), .boton-icono:hover { background: var(--superficie-alta); color: var(--tinta); }
  .tema-opcion:hover { background: var(--superficie-alta); }
}

/* pestañas */
.pestanas { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: calc(var(--radio-boton) + 4px); background: var(--superficie-alta); }
[data-tema="aincrad"] .pestanas { border-radius: var(--radio); }
.pestanas [role="tab"] {
  flex: 1; min-height: 40px; border: 0; border-radius: var(--radio-boton); background: transparent; color: var(--tinta-2);
  font-size: 0.9375rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color var(--t-press) ease, color var(--t-press) ease;
}
.pestanas [role="tab"][aria-selected="true"] { background: var(--superficie); color: var(--tinta); font-weight: 650; box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
[data-esquema="oscuro"] .pestanas [role="tab"][aria-selected="true"] { box-shadow: none; }
.cuenta { font-size: 0.8125rem; color: var(--tinta-3); }
[aria-selected="true"] .cuenta { color: var(--acento-tinta); }

/* lotes (playlist, álbum o artista) */
.lote + .lote, .lote + .cubiculo, .cubiculo + .lote { margin-top: 24px; }
.lote-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.lote-nombre { flex: 1 1 12rem; font: var(--peso-titulo) 1.125rem/1.3 var(--f-titulo); letter-spacing: var(--track-titulo); overflow-wrap: anywhere; }
[data-tema="terminal"] .lote-nombre { font-size: 1.5rem; }
.lote-nombre small { display: block; font: 400 0.8125rem/1.4 var(--f-texto); color: var(--tinta-3); letter-spacing: 0; }
.lote-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.lote-lista { display: grid; gap: 8px; }

/* ---------- cubículo ---------- */

.cubiculo {
  position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px;
  border-radius: var(--radio); background: var(--superficie);
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
@starting-style { .cubiculo { opacity: 0; transform: translateY(6px); } }
.cubiculo.saliendo { opacity: 0; transform: translateX(12px); transition-duration: 150ms; }
.vista > .cubiculo + .cubiculo { margin-top: 8px; }

.portada { position: relative; width: 64px; height: 64px; border-radius: calc(var(--radio) / 2); overflow: hidden; background: var(--superficie-alta); display: grid; place-items: center; color: var(--tinta-3); }
.portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-tema="pastel"] .portada { border-radius: 14px; }

.cuerpo { min-width: 0; display: grid; gap: 4px; align-content: start; }
.cabeza { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.titulo { margin: 0; font: var(--peso-titulo) var(--tam-titulo)/1.3 var(--f-titulo); letter-spacing: var(--track-titulo); overflow-wrap: anywhere; text-wrap: pretty; }
.quien { color: var(--tinta-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.quien .con { color: var(--tinta-3); }
.detalle { color: var(--tinta-3); font-size: 0.8125rem; overflow-wrap: anywhere; }
.original { color: var(--tinta-3); font-size: 0.8125rem; overflow-wrap: anywhere; }
.original q { quotes: "“" "”"; }

.fuente { flex: none; font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 5px; }
.fuente::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fuente[data-fuente="spotify"], .fuente[data-fuente="youtube music"] { color: var(--ok); }
.fuente[data-fuente="ia"] { color: var(--aviso); }
.fuente[data-fuente="memoria"] { color: var(--acento-tinta); }
[data-tema="pastel"] .fuente { padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--mantequilla); color: #5a4300; transform: rotate(-2deg); }
[data-tema="pastel"] .fuente[data-fuente="spotify"], [data-tema="pastel"] .fuente[data-fuente="youtube music"] { background: var(--menta); color: #0d4a3c; }
[data-tema="pastel"] .fuente[data-fuente="memoria"] { background: var(--seleccion); color: var(--tinta); }

.nota { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; margin-top: 4px; overflow-wrap: anywhere; }
.nota .icono { width: 18px; height: 18px; margin-top: 1px; }
.nota.duplicado { color: var(--aviso); }
.nota.error { color: var(--error); }
.nota.info { color: var(--tinta-2); }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cubiculo > .acciones { grid-column: 1 / -1; }
.acciones .boton { min-height: 42px; padding: 0 16px; }
.acciones .boton.quieto { padding: 0 10px; }
.acciones .icono-solo { width: 44px; padding: 0; margin-left: auto; }
.acciones .icono-solo + .icono-solo { margin-left: 0; }
.editor .acciones { margin-top: 4px; }

/* esqueleto mientras analiza */
.esqueleto { display: block; height: 0.8em; border-radius: 4px; background: var(--superficie-alta); animation: latido 1.2s ease-in-out infinite; }
.esqueleto + .esqueleto { width: 55%; margin-top: 8px; }
@keyframes latido { 50% { opacity: 0.55; } }

/* editor en línea */
.editor { display: grid; gap: 12px; margin-top: 4px; }
.editor label { display: grid; gap: 4px; font-size: 0.8125rem; color: var(--tinta-2); }
.editor input {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--linea); border-radius: calc(var(--radio) * 0.6);
  background: var(--fondo); color: var(--tinta); font-size: 1rem;
}
.editor input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); }
.editor .ayuda { font-size: 0.75rem; color: var(--tinta-3); }
@media (min-width: 560px) { .editor .doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }
.editor .doble { display: grid; gap: 12px; }

/* progreso (cada tema le da su forma) */
.progreso { display: grid; gap: 6px; margin-top: 8px; }
.progreso-texto { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--tinta-2); }
.barra-progreso { position: relative; height: 4px; border-radius: 999px; background: var(--superficie-alta); overflow: hidden; }
.barra-progreso i { position: absolute; inset: 0; background: var(--acento); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 420ms var(--ease-out); }
.cubiculo[data-estado="error"] .barra-progreso i { background: var(--error); }
.ecualizador { display: none; }

/* entrada (inicio de sesión) */
.acceso-form { display: grid; gap: 16px; max-width: 24rem; margin-top: 6vh; }
.acceso-form .entrada-etiqueta { margin: 0; }
.campo { display: grid; gap: 6px; font-size: 0.875rem; color: var(--tinta-2); }
.campo input {
  min-height: 48px; padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--superficie); color: var(--tinta); font-size: 1rem;
}
.campo input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); }
.acceso-form .boton { min-height: 48px; justify-self: start; padding: 0 24px; }
.temas .salir { width: 100%; margin-top: 12px; justify-content: flex-start; }

/* página de respaldo: salida real de yt-music */
.respaldo-estado { grid-template-columns: 1fr; }
.registro {
  margin: 8px 0 0; padding: 12px; max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  border-radius: calc(var(--radio) * 0.6); background: var(--fondo); color: var(--tinta-2);
  font: 0.8125rem/1.5 ui-monospace, "Share Tech Mono", monospace;
}

/* listas */
.ruta { font-size: 0.8125rem; color: var(--tinta-3); overflow-wrap: anywhere; }

/* vacío */
.vacio { padding: 40px 8px; text-align: left; }
.vacio h2 { margin: 0 0 8px; font: var(--peso-titulo) 1.25rem/1.3 var(--f-titulo); letter-spacing: var(--track-titulo); }
[data-tema="terminal"] .vacio h2 { font-size: 1.75rem; }
.vacio p { color: var(--tinta-2); max-width: 36ch; }

/* avisos (toasts) */
.avisos { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; pointer-events: none; z-index: 10; padding: 0 16px; }
.toast {
  pointer-events: auto; max-width: min(30rem, 100%); padding: 12px 16px; border-radius: max(var(--radio), 8px);
  background: var(--tinta); color: var(--fondo); font-size: 0.9375rem; box-shadow: var(--sombra-flotante);
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
@starting-style { .toast { opacity: 0; transform: translateY(12px); } }
.toast.saliendo { opacity: 0; transform: translateY(8px); transition-duration: 150ms; }
.toast.error { background: var(--error); color: #fff; }

/* ---------- firmas de cada tema ---------- */

/* Aincrad: paneles flotantes y barra de HP */
[data-tema="aincrad"] .cubiculo { box-shadow: 0 1px 2px rgb(20 40 60 / 0.08), 0 10px 24px -16px rgb(20 40 60 / 0.35); }
[data-tema="aincrad"][data-esquema="oscuro"] .cubiculo { box-shadow: inset 0 0 0 1px rgb(120 160 210 / 0.12); }
[data-tema="aincrad"] .portada { border-radius: 50%; }
[data-tema="aincrad"] .barra-progreso { height: 10px; border-radius: 2px; background: var(--hp-fondo); transform: skewX(-18deg); margin-left: 34px; }
[data-tema="aincrad"] .barra-progreso i { background: var(--hp); }
[data-tema="aincrad"] .progreso { position: relative; }
[data-tema="aincrad"] .progreso::before { content: "HP"; position: absolute; left: 0; bottom: -3px; font: 700 0.75rem/1 var(--f-titulo); letter-spacing: 0.04em; color: var(--tinta-2); }

/* Terminal: líneas de CRT (solo de noche), cursor y barra por bloques */
[data-tema="terminal"][data-esquema="oscuro"] body { text-shadow: 0 0 6px rgb(255 178 56 / 0.22); }
[data-tema="terminal"][data-esquema="oscuro"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.2) 0 1px, transparent 1px 3px);
}
[data-tema="terminal"] .cubiculo { box-shadow: inset 0 0 0 1px var(--linea); }
[data-tema="terminal"] .marca::after { content: "_"; animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
[data-tema="terminal"] .barra-progreso { height: 14px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--superficie-alta) 0 9px, transparent 9px 12px); }
[data-tema="terminal"] .barra-progreso i { background: repeating-linear-gradient(90deg, var(--tinta) 0 9px, transparent 9px 12px); background-size: 12px 100%; transition-timing-function: steps(8, end); }
[data-tema="terminal"] .progreso-texto::before { content: ">"; color: var(--tinta-3); }
[data-tema="terminal"] .fuente::before { border-radius: 0; }
[data-tema="terminal"] .punto { border-radius: 0; }

/* Pastel: barra de caramelo y el sello 済 al terminar */
[data-tema="pastel"] .barra-progreso { height: 12px; }
[data-tema="pastel"] .barra-progreso i {
  background: repeating-linear-gradient(-45deg, var(--acento) 0 8px, var(--menta) 8px 16px);
  background-size: 22.6px 22.6px;
}
[data-tema="pastel"] .cubiculo[data-activo] .barra-progreso i { animation: caramelo 900ms linear infinite; }
@keyframes caramelo { to { background-position: 22.6px 0; } }
[data-tema="pastel"] .cubiculo[data-estado="listo"] .portada::after {
  content: "済"; position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid var(--sello); border-radius: 50%; color: var(--sello); background: rgb(255 255 255 / 0.85);
  font: 800 1rem/1 var(--jp); transform: rotate(-14deg);
}
[data-tema="pastel"][data-esquema="oscuro"] .cubiculo[data-estado="listo"] .portada::after { background: rgb(38 30 46 / 0.9); }
[data-tema="pastel"] .cubiculo.recien .portada::after { animation: sello 380ms var(--ease-out); }
@keyframes sello { from { opacity: 0; transform: rotate(-24deg) scale(1.6); } }

/* Vocaloid: ecualizador vivo mientras descarga */
[data-tema="vocaloid"] .barra-progreso { height: 6px; border-radius: 0; }
[data-tema="vocaloid"] .barra-progreso i { background: var(--acento); }
[data-tema="vocaloid"] .cubiculo[data-activo] .ecualizador { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ecualizador b { width: 3px; height: 100%; background: var(--acento); transform-origin: bottom; animation: eq 760ms ease-in-out infinite alternate; }
.ecualizador b:nth-child(2) { animation-delay: -420ms; }
.ecualizador b:nth-child(3) { animation-delay: -180ms; background: var(--teto, var(--acento)); }
.ecualizador b:nth-child(4) { animation-delay: -600ms; }
@keyframes eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* ---------- pantallas anchas ---------- */
@media (min-width: 720px) {
  .contenido { padding-top: 24px; }
  .entrada-etiqueta { font-size: 1.75rem; }
  .cubiculo { grid-template-columns: 76px 1fr; padding: 16px; gap: 16px; }
  .portada { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .cubiculo, .toast, .temas { transition-property: opacity !important; }
  @starting-style { .cubiculo, .toast { transform: none; } }
  .barra-progreso i { transition: none; }
}