/* Letra de títulos incluida en la app (Georgia no existe en Android). Source Serif 4, licencia OFL: static/fuentes/ */
@font-face { font-family: 'Source Serif 4'; src: url('fuentes/source-serif-4-latin-opsz-normal.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('fuentes/source-serif-4-latin-opsz-italic.woff2') format('woff2');
  font-weight: 200 900; font-style: italic; font-display: swap; }

/* ===== Temas con la marca DigiCuentas Club (manual v3) · submarca Academy: acento menta.
   Claro: marfil, texto esmeralda, oro oscuro para textos de acento. Oscuro: esmeralda y oro.
   --acento = formas (barras, anillos, iconos activos) · --acento-relleno + --sobre-acento = rellenos con texto
   --acento-2 = texto de acento (enlaces): oro oscuro en claro, oro en oscuro.
   El <head> pone data-tema="claro|oscuro" antes de pintar; «automático» sigue al sistema. ===== */
:root {
  --fondo: #f4f1ea;
  --panel: #fdfcf9;
  --panel-2: #ece8de;
  --borde: #ddd8cb;
  --borde-fuerte: #c6c0b0;
  --texto: #0b1e19;
  --texto-2: #23332e;
  --suave: #4f6159;
  --tenue: #56685f;
  --primario: #0b1e19;
  --sobre-primario: #edf3f1;
  --acento: #27876a;
  --acento-relleno: #7fd9b2;
  --sobre-acento: #0f2420;
  --acento-2: #8a5f1d;
  --acento-fondo: rgba(39, 135, 106, .12);
  --oro: #dfaa47;
  --tinte-1: rgba(11, 30, 25, .04);
  --tinte-2: rgba(11, 30, 25, .07);
  --tinte-3: rgba(11, 30, 25, .11);
  --ok: #2f7a5c;
  --aviso: #a8741c;
  --error: #ba3b2a;
  --info: #3a6894;
  --aviso-texto: #7d5512;
  --error-texto: #9c3022;
  --c-verde: #3a7f5f; --c-ambar: #a8741c; --c-violeta: #7c5a9c; --c-azul: #3f6f9f; --c-rosa: #b0506a;
  --c-coral: #b35f3c; --c-gris: #7d877f; --c-rojo: #ba3b2a;
  --sobre-color: #fff;
  --glass: var(--panel);
  --glass-borde: var(--borde);
  --sombra-1: 0 1px 2px rgba(11, 30, 25, .05), 0 6px 20px rgba(11, 30, 25, .06);
  --sombra-2: 0 12px 34px rgba(11, 30, 25, .14);
  --sombra-portada: 0 6px 16px rgba(11, 30, 25, .16);
  --capa-modal: rgba(7, 21, 18, .45);
  --brillo-pantalla: #e3ebe4;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: var(--dgc-font-secundaria, 'Source Sans 3', 'Segoe UI', system-ui, sans-serif);
  --radio: 12px;
  --barra-alto: 84px;
  font-family: var(--sans);
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --fondo: #0b1e19;
  --panel: #10271f;
  --panel-2: #15302a;
  --borde: #1f3d33;
  --borde-fuerte: #2b4d41;
  --texto: #edf3f1;
  --texto-2: #c9d6d2;
  --suave: #9fb2ac;
  --tenue: #8ea29b;
  --primario: #dfaa47;
  --sobre-primario: #071512;
  --acento: #7fd9b2;
  --acento-relleno: #7fd9b2;
  --sobre-acento: #0f2420;
  --acento-2: #dfaa47;
  --acento-fondo: rgba(127, 217, 178, .14);
  --tinte-1: rgba(237, 243, 241, .04);
  --tinte-2: rgba(237, 243, 241, .07);
  --tinte-3: rgba(237, 243, 241, .12);
  --ok: #4fbf92;
  --aviso: #e8b04a;
  --error: #e0614f;
  --info: #7fb4ff;
  --aviso-texto: #ecc98a;
  --error-texto: #f0a69f;
  --c-verde: #74c08b; --c-ambar: #e2ad5c; --c-violeta: #b897d6; --c-azul: #7fa7d8; --c-rosa: #e38ea2;
  --c-coral: #e5946f; --c-gris: #9aa39b; --c-rojo: #e0614f;
  --sobre-color: #0b1e19;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
  --sombra-2: 0 16px 40px rgba(0, 0, 0, .5);
  --sombra-portada: 0 8px 20px rgba(0, 0, 0, .45);
  --capa-modal: rgba(3, 10, 8, .7);
  --brillo-pantalla: #123129;
  color-scheme: dark;
}
h1, h2, .serif { font-family: var(--serif); font-weight: 500; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font-size: 15px; display: flex; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--texto); }
.oculto { display: none !important; }

/* --- Menú lateral --- */
.lateral { width: 236px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column; padding: 22px 14px calc(var(--barra-alto) + 14px); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; padding: 0 10px 26px; }
.lateral .marca { justify-content: center; padding: 0 0 18px; }
.marca-icono { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .2)); }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--suave);
  font-weight: 500; margin-bottom: 2px; }
.nav a:hover { background: var(--panel); color: var(--texto); }
.nav a.activo { background: var(--tinte-2); color: var(--texto); font-weight: 650; }
.nav a.activo .ico { color: var(--acento); }
.nav .ico { width: 20px; text-align: center; }
.insignia { margin-left: auto; background: var(--acento-relleno); color: var(--sobre-acento); border-radius: 99px; font-size: 12px;
  font-weight: 700; padding: 1px 8px; }
.estado-ia { margin-top: auto; display: block; font-size: 13px; color: var(--suave); padding: 10px 12px; border-radius: 9px; }
.estado-ia:hover { background: var(--panel); }
.estado-ia b { color: var(--texto); font-weight: 600; }
.estado-ia.sin { color: var(--error); }
.estado-sesion { margin-top: 4px; font-size: 13px; color: var(--tenue); padding: 10px 12px; border-top: 1px solid var(--borde); }
.estado-sesion b { color: var(--suave); font-weight: 600; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--tenue); }
.punto.on { background: var(--ok); }

/* --- Contenido --- */
main { flex: 1; overflow-y: auto; padding: 30px 38px calc(var(--barra-alto) + 40px); }
h1 { font-size: 34px; margin: 0 0 8px; letter-spacing: -.8px; line-height: 1.12; }
h2 { font-size: 23px; margin: 36px 0 15px; letter-spacing: -.3px; }
.sub { color: var(--suave); margin: 0 0 22px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.espacio { flex: 1; }

.btn { border: 1px solid var(--borde); background: var(--panel); border-radius: 9px; padding: 8px 15px;
  font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.btn:hover { border-color: var(--borde-fuerte); background: var(--tinte-2); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.btn.primario:hover { background: var(--primario); filter: brightness(1.12); }
.btn.peligro:hover { border-color: var(--error); color: var(--error); }
.btn.chico { padding: 5px 11px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

.campo { background: var(--panel); border: 1px solid var(--borde); border-radius: 9px; padding: 8px 12px; outline: none; }
.campo:focus { border-color: var(--acento); }
.buscar { min-width: 260px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--borde); background: transparent; border-radius: 99px; padding: 5px 13px;
  font-size: 13px; color: var(--suave); }
.chip.activo { background: var(--acento-relleno); color: var(--sobre-acento); border-color: var(--acento-relleno); font-weight: 600; }
.chip:hover:not(.activo) { background: var(--tinte-1); }
.chip .n { opacity: .65; margin-left: 4px; }

.aviso { background: color-mix(in srgb, var(--aviso) 11%, transparent); border: 1px solid color-mix(in srgb, var(--aviso) 38%, transparent); color: var(--aviso-texto);
  border-radius: 10px; padding: 11px 15px; margin-bottom: 18px; }
.aviso.error { background: color-mix(in srgb, var(--error) 10%, transparent); border-color: color-mix(in srgb, var(--error) 36%, transparent); color: var(--error-texto); }
.vacio { text-align: center; color: var(--suave); padding: 70px 20px; }
.vacio .grande { font-size: 46px; margin-bottom: 10px; }

/* --- Tarjetas de estadísticas --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra-1); }
.stat .num { font-family: var(--serif); font-size: 27px; font-weight: 500; }
.stat .et { color: var(--suave); font-size: 13px; margin-top: 2px; }
.medidor { height: 6px; background: var(--panel-2); border-radius: 9px; overflow: hidden; margin-top: 10px; }
.medidor > div { height: 100%; background: var(--acento); border-radius: 9px; }
.stat.ok .num { color: var(--ok); }
.stat.mal .num { color: var(--error); }

/* --- Rejilla de portadas --- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 22px 18px; }
.tarjeta { position: relative; cursor: pointer; }
.portada { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--panel-2);
  box-shadow: var(--sombra-portada); transition: transform .2s, box-shadow .2s; }
.portada img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.portada .sello, .portada .sello-nuevo, .portada .marcar, .portada .barra-progreso { z-index: 2; }
.portada .letras { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px;
  font-family: var(--serif); font-size: 16px; color: #edf3f1; background: linear-gradient(145deg, #1f5a48, #0f2420); }
.tarjeta:hover .portada { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.tarjeta .titulo { font-weight: 600; margin-top: 9px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta .autor { color: var(--suave); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta .meta { color: var(--tenue); font-size: 12px; margin-top: 3px; }
.tarjeta .acciones { margin-top: 8px; }
.sello { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
  background: rgba(16, 29, 24, .86); backdrop-filter: blur(4px); color: #f1ecdf; }
.sello.descargado { color: #8fd3a5; }
.sello.incompleto { color: #f0c46e; }
.sello.descargando, .sello.en_cola { color: #9cc2ea; }
.sello.no_descargado { color: #c9cfc6; }
.sello-nuevo { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  background: var(--acento-relleno); color: var(--sobre-acento); }
.marcar { position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px; border: 2px solid #fff;
  background: rgba(0, 0, 0, .45); display: grid; place-items: center; font-weight: 800; font-size: 14px; opacity: 0; }
.tarjeta:hover .marcar, .marcar.si { opacity: 1; }
.marcar.si { background: var(--acento-relleno); border-color: var(--acento-relleno); color: var(--sobre-acento); }
.barra-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .5); }
.barra-progreso > div { height: 100%; background: var(--acento); }
.mini-progreso { height: 4px; background: var(--panel-2); border-radius: 9px; overflow: hidden; margin-top: 6px; }
.mini-progreso > div { height: 100%; background: var(--acento); transition: width .4s; }

/* --- Seguir escuchando --- */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(330px, 380px); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.continuar { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px; align-items: center; cursor: pointer; box-shadow: var(--sombra-1); }
.continuar:hover { border-color: var(--borde-fuerte); }
.continuar .portada { width: 92px; flex-shrink: 0; }
.continuar .info { flex: 1; min-width: 0; }
.continuar .titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continuar .autor { color: var(--suave); font-size: 13px; }
.continuar .resta { color: var(--tenue); font-size: 12px; margin-top: 8px; }
.continuar .mini-progreso > div { background: var(--acento); }
.play-redondo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--primario);
  color: var(--sobre-primario); font-size: 17px; display: grid; place-items: center; }
.play-redondo:hover { filter: brightness(1.12); }

/* --- Barra de selección --- */
.barra-seleccion { position: sticky; top: -30px; z-index: 5; background: var(--panel-2); border: 1px solid var(--acento);
  border-radius: var(--radio); padding: 10px 14px; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; }

/* --- Ficha del libro --- */
.ficha { display: grid; grid-template-columns: 290px 1fr; gap: 34px; }
.ficha .portada { width: 290px; }
.ficha h1 { font-size: 34px; }
.ficha .subt { color: var(--suave); font-size: 17px; margin-bottom: 14px; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; color: var(--suave); margin: 16px 0 20px; font-size: 14px; }
.datos b { color: var(--tenue); font-weight: 500; }
.datos span { color: var(--texto); }
.descripcion { white-space: pre-wrap; line-height: 1.65; color: var(--texto-2); max-width: 820px; }
.descripcion.recortada { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); }
.enlace { color: var(--acento-2); background: none; border: 0; padding: 0; font-weight: 600; }
.lista { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-1); }
.lista .item { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.lista .item:last-child { border-bottom: 0; }
.lista .item:hover { background: var(--tinte-1); }
.lista .item.actual { background: var(--acento-fondo); }
.lista .item.actual .nom { color: var(--acento-2); font-weight: 600; }
.lista .num { width: 28px; color: var(--tenue); font-variant-numeric: tabular-nums; text-align: right; }
.lista .nom { flex: 1; min-width: 0; }
.lista .t { color: var(--tenue); font-size: 13px; font-variant-numeric: tabular-nums; }
.lista .hecho { color: var(--tenue); }

/* --- Descargas --- */
.actual-descarga { display: flex; gap: 18px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.actual-descarga .portada { width: 110px; flex-shrink: 0; }
.actual-descarga .info { flex: 1; min-width: 0; }
.progreso-grande { height: 10px; background: var(--panel-2); border-radius: 9px; overflow: hidden; margin: 12px 0 8px; }
.progreso-grande > div { height: 100%; background: linear-gradient(90deg, var(--acento), var(--acento-2)); transition: width .4s; }
.res-ok { color: var(--ok); }
.res-error { color: var(--error); }
.res-cancelado { color: var(--aviso); }

/* --- Formulario de conexión --- */
.tarjeta-form { max-width: 460px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra-1); }
.tarjeta-form label { display: block; font-size: 13px; color: var(--suave); margin: 14px 0 6px; }
.tarjeta-form .campo { width: 100%; }
/* Conexión: tarjeta de estado */
.estado-conexion { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 640px; margin: 4px 0 22px; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.estado-icono { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--suave); }
.estado-icono .ic { width: 24px; height: 24px; }
.estado-conexion.conectado .estado-icono { background: var(--acento-relleno); color: var(--sobre-acento); }
.estado-texto { flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--suave); font-size: 14px; }
.estado-texto > b:first-child { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--texto); }
.estado-texto span b { color: var(--texto); }
.estado-conexion + .ajustes-plegados { max-width: 640px; }
.ajustes-plegados .tarjeta-form { box-shadow: none; border: 0; padding: 4px 0 0; background: none; }
.nota-clave { display: flex; gap: 10px; align-items: flex-start; max-width: 640px; }
.nota-clave .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--acento); }
@media (max-width: 760px) {
  .estado-conexion { padding: 16px; }
  .estado-conexion .btn { width: 100%; justify-content: center; }
}
.nota { color: var(--tenue); font-size: 13px; margin-top: 14px; line-height: 1.5; }

/* --- Ventana modal --- */
.modal-fondo { position: fixed; inset: 0; background: var(--capa-modal); backdrop-filter: blur(3px); z-index: 40; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--fondo); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-2); max-width: 760px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 24px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.modal .portada { width: 200px; }

/* --- Siluetas de carga --- */
.silueta { display: block; position: relative; overflow: hidden; border-radius: 8px; background: var(--panel-2); }
.silueta::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fondo) 55%, transparent), transparent); animation: brillo-silueta 1.4s ease-in-out infinite; }
@keyframes brillo-silueta { to { transform: translateX(100%); } }
.silueta.linea { height: 14px; margin: 10px 0; }
.silueta.fina { height: 10px; }
.silueta.titulo-sil { height: 34px; width: min(360px, 70%); margin: 12px 0; border-radius: 10px; }
.silueta.portada-sil { width: 100%; aspect-ratio: 1; border-radius: 12px; margin-bottom: 12px; }
.silueta.bloque { height: 140px; border-radius: 14px; margin: 16px 0; }
.silueta.bloque.grande { height: 220px; margin-top: 26px; }
.cargando-vista > .rejilla, .cargando-vista > .ficha { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .silueta::after { display: none; } }
.modal { position: relative; outline: none; animation: abrir-modal .18s ease-out; }
.modal-fondo { animation: aparecer .18s ease-out; }
@keyframes abrir-modal { from { transform: translateY(8px) scale(.985); opacity: 0; } }
@keyframes aparecer { from { opacity: 0; } }
.modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--panel-2); color: var(--suave); cursor: pointer; }
.modal-x:hover { color: var(--texto); background: var(--tinte-2); }
.modal-x .ic { width: 18px; height: 18px; }
.modal > * > h2:first-child, .modal > * > .antetitulo:first-child, .modal > * > .antetitulo:first-child + h2 { padding-right: 40px; }
body:has(.modal-fondo) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .modal, .modal-fondo { animation: none; } }

/* --- Reproductor fijo (abajo) --- */
.mini { position: fixed; left: 0; right: 0; bottom: 0; height: var(--barra-alto); z-index: 30; background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--borde); display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.4fr) minmax(220px, 1fr); align-items: center; padding: 0 18px; gap: 18px; }
.mini .quien { display: flex; gap: 12px; align-items: center; min-width: 0; cursor: pointer; }
.mini .quien .portada { width: 56px; border-radius: 7px; flex-shrink: 0; }
.mini .quien .t1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .quien .t2 { color: var(--suave); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mandos { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mando { background: none; border: 0; color: var(--texto); font-size: 14px; padding: 6px 8px; border-radius: 8px; font-weight: 600; }
.mando:hover { background: var(--tinte-2); }
.mando.grande { width: 44px; height: 44px; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); font-size: 17px; }
.mando.grande:hover { background: var(--primario); filter: brightness(1.12); }
.linea-tiempo { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.deslizador { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 9px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--acento) var(--p, 0%), var(--borde-fuerte) var(--p, 0%)); }
.deslizador::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px var(--panel); }
.mini .derecha { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.sueno-activo { color: var(--acento-2) !important; }

/* --- Reproductor a pantalla completa --- */
.pantalla { position: fixed; inset: 0; z-index: 35; background: radial-gradient(circle at 30% 0%, var(--brillo-pantalla) 0%, var(--fondo) 55%);
  display: grid; grid-template-columns: 1fr 380px; overflow: hidden; }
.pantalla .centro { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 40px; min-width: 0; }
.pantalla .portada { width: min(380px, 42vh); box-shadow: var(--sombra-2); }
.pantalla .t1 { font-family: var(--serif); font-size: 29px; font-weight: 500; letter-spacing: -.4px; margin-top: 26px; text-align: center; }
.pantalla .t2 { color: var(--suave); margin-top: 4px; text-align: center; }
.pantalla .cap { color: var(--acento-2); font-weight: 600; margin-top: 18px; text-align: center; }
.pantalla .linea-tiempo { width: min(620px, 100%); margin-top: 14px; }
.pantalla .resta { color: var(--tenue); font-size: 13px; margin-top: 6px; }
.pantalla .mandos { margin-top: 18px; gap: 18px; }
.pantalla .mando { font-size: 16px; }
.pantalla .mando.grande { width: 66px; height: 66px; font-size: 24px; }
.pantalla .extras { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.pantalla .lado { border-left: 1px solid var(--borde); background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 22px 0 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden; }
#panel-capitulos { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 30px; }
#panel-texto { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#panel-texto .texto-cuerpo { flex: 1; min-height: 0; overflow-y: auto; }
.pantalla .lado h3 { margin: 0 20px 12px; font-size: 15px; color: var(--suave); }
.pantalla .lista { border-radius: 0; border-left: 0; border-right: 0; background: transparent; }
.cerrar { position: absolute; top: 16px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; }
.menu { position: absolute; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 6px; z-index: 50;
  box-shadow: var(--sombra-2); min-width: 170px; }
.menu-volumen { padding: 10px 14px; }
.menu-volumen input[type=range] { width: 160px; accent-color: var(--acento); }
.menu-volumen b { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.volumen-prueba { display: inline-flex; align-items: center; gap: 6px; }
.volumen-prueba input[type=range] { width: 110px; accent-color: var(--acento); }
.volumen-prueba .ic { width: 18px; height: 18px; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 12px; border-radius: 7px; }
.menu button:hover, .menu button.activo { background: var(--acento-fondo); color: var(--acento-2); }

.toast { position: fixed; bottom: calc(var(--barra-alto) + 18px); left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--texto); color: var(--fondo); padding: 10px 18px; border-radius: 10px; font-weight: 600;
  box-shadow: var(--sombra-2); }

/* --- Pestañas y texto que acompaña al audio --- */
.pestanas { display: flex; gap: 4px; padding: 0 16px 12px; }
.pestana { background: none; border: 0; color: var(--suave); padding: 7px 14px; border-radius: 8px; font-weight: 600; }
.pestana.activa { background: var(--tinte-2); color: var(--texto); box-shadow: inset 0 -2px 0 var(--acento); border-radius: 8px 8px 2px 2px; }
.pantalla.leyendo { grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.2fr); }
.buscar-texto { padding: 0 16px 10px; }
.buscar-texto .campo { width: 100%; }
#texto-resultados { margin: 0 16px 12px; max-height: 40vh; overflow-y: auto; border-radius: 10px; }
#texto-resultados mark { background: var(--acento-fondo); color: var(--acento-2); }
.texto-cuerpo { padding: 4px 24px 40px; font-size: 17px; line-height: 1.75; color: var(--suave); font-family: var(--serif); }
.texto-cuerpo p { margin: 0 0 18px; }
.texto-cuerpo .hora { display: block; font: 600 11px var(--sans); color: var(--tenue); margin-bottom: 2px; }
.texto-cuerpo [data-i] { cursor: pointer; border-radius: 4px; transition: background .2s, color .2s; }
.texto-cuerpo [data-i]:hover { color: var(--texto); }
.texto-cuerpo .activo { color: var(--tenue); }
.texto-cuerpo [data-w] { border-radius: 4px; transition: background .12s, color .12s; }
.texto-cuerpo .dicha { color: var(--texto); }
.texto-cuerpo .palabra { color: var(--sobre-acento); background: var(--acento-relleno); box-shadow: 0 0 0 2px var(--acento-relleno); }

/* --- Ficha: procesamiento y editor de capítulos --- */
.caja { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; margin-top: 18px; }
.caja .fila { gap: 8px; }
.etiqueta { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--panel-2); color: var(--suave); }
.etiqueta.ok { color: var(--ok); }
.etiqueta.ia { color: var(--acento-2); }
.lista .item.editable { cursor: default; }
.lista .item.editable .campo { flex: 1; padding: 5px 9px; }
.interruptor { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 14px; }

/* --- Por pedir (Audible) --- */
.estrellas { color: var(--acento-2); font-weight: 700; }
.lista .mini-portada { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--panel-2); }
.rejilla > .vacio, .rejilla > p { grid-column: 1 / -1; }   /* avisos dentro de una rejilla: todo el ancho */
.buscador-audible { display: flex; gap: 10px; margin: 0 0 18px; }
.buscador-audible .campo { flex: 1; }
.buscador-audible .caja-buscar { max-width: none; }
#pedir-pestanas { margin-top: 4px; }
#pp-ajustes { margin-top: 28px; }
.barra-herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.enlace-externo { color: var(--acento-2); font-weight: 600; }

/* --- Tutor y base de conocimiento --- */
#panel-tutor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tutor-rapidos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.tutor-chat { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.burbuja { border-radius: 12px; padding: 10px 14px; line-height: 1.55; max-width: 100%; }
.burbuja.yo { align-self: flex-end; background: var(--tinte-2); color: var(--texto); font-weight: 600; max-width: 85%; }
.burbuja.tutor { background: var(--panel); border: 1px solid var(--borde); }
.burbuja .pie { margin-top: 8px; font-size: 12px; color: var(--tenue); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tutor-form { display: flex; gap: 8px; padding: 10px 16px 18px; border-top: 1px solid var(--borde); }
.tutor-form textarea { flex: 1; resize: none; }
.md p { margin: 0 0 8px; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 20px; } .md li { margin: 2px 0; }
.md h4 { margin: 10px 0 6px; font-size: 15px; color: var(--acento-2); }
.md blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--acento); color: var(--suave); font-style: italic; }
.md code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.pensando { color: var(--suave); font-style: italic; }
.popover { position: fixed; z-index: 70; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra-2); }
.popover h3 { margin: 0 0 8px; font-size: 15px; color: var(--acento-2); padding-right: 24px; }
.popover .x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--suave); font-size: 18px; }
.entrada { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.entrada .cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.entrada .cab b { font-size: 15px; }
.entrada .meta { color: var(--tenue); font-size: 12px; margin: 4px 0 8px; }
.lista-entradas { display: grid; gap: 12px; }

.aviso-version { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 80; background: var(--primario);
  color: var(--sobre-primario); padding: 10px 18px; border-radius: 12px; font-weight: 600; box-shadow: var(--sombra-2); }

/* --- Ajustes: proveedores de IA --- */
.rejilla-ia { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.tarjeta-ia { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; display: grid; gap: 10px; }
.tarjeta-ia.activa { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.tarjeta-ia .cab { display: flex; align-items: center; gap: 10px; }
.tarjeta-ia .cab b { font-size: 16px; }
.tarjeta-ia label { font-size: 12px; color: var(--suave); display: grid; gap: 4px; }
.tarjeta-ia .campo { width: 100%; }
.tarjeta-ia .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tarjeta-ia .resultado { font-size: 13px; }

/* --- Panel de IA --- */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 14px 14px 0; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio); }
.barras .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.barras .barra { width: 100%; max-width: 38px; background: var(--acento); border-radius: 5px 5px 0 0; min-height: 2px; }
.barras .dia { font-size: 11px; color: var(--tenue); padding-bottom: 6px; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tabla { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; font-size: 13px; }
.tabla th, .tabla td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla th { color: var(--tenue); font-weight: 600; font-size: 12px; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Panel de categorías a la izquierda (como la barra de géneros de Audible) --- */
.con-categorias { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start; }
.panel-cat { position: sticky; top: 0; max-height: calc(100vh - var(--barra-alto) - 40px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra-1);
  border-radius: 16px; padding: 14px 10px; }
.panel-cat .titulo-panel { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); padding: 2px 10px 10px; }
.cat-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 10px; border-radius: 10px; color: var(--suave); font-size: 14px; font-weight: 500; line-height: 1.25; }
.cat-item:hover { background: var(--tinte-1); color: var(--texto); }
.cat-item .ico { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; }
.cat-item .nom { flex: 1; min-width: 0; }
.cat-item .n { font-size: 12px; font-weight: 700; color: var(--tenue); background: var(--panel-2); border-radius: 99px;
  padding: 1px 8px; font-variant-numeric: tabular-nums; }
.cat-item.activo { background: var(--tinte-2); color: var(--texto); font-weight: 700; }
.cat-item.activo .n { background: var(--acento-relleno); color: var(--sobre-acento); }
.cat-item.sub { font-size: 13px; padding: 6px 10px 6px 42px; position: relative; }
.cat-item.sub::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; border-left: 1px solid var(--borde); }
.cat-item.sub3 { padding-left: 58px; font-size: 12.5px; }
.panel-cat .pie-panel { font-size: 12px; color: var(--tenue); padding: 10px 10px 2px; line-height: 1.45; }
.ruta-cat { font-size: 13px; color: var(--suave); margin: -4px 0 14px; }
.ruta-cat b { color: var(--acento-2); font-weight: 650; }

/* --- Orden de la cola --- */
.cola .item { cursor: grab; }
.cola .item.arrastrando { opacity: .4; }
.cola .item.encima { box-shadow: inset 0 3px 0 var(--acento); }
.cola .asa { color: var(--tenue); font-size: 15px; cursor: grab; user-select: none; }
.cola .mover { display: flex; gap: 4px; }
.cola .mover .btn { padding: 4px 8px; }

/* ===== Mi espacio (tarjetas, portada difuminada; colores de categoría en --c-*) ===== */
.mi-espacio h1 { font-size: 40px; letter-spacing: -1px; margin: 0; }
.mi-espacio .saludo { color: var(--suave); font-size: 16px; margin: 4px 0 26px; }
.mi-espacio h2 { font-size: 24px; letter-spacing: -.3px; margin: 34px 0 14px; display: flex; align-items: center; gap: 10px; }
.mi-espacio h2 .mas { margin-left: auto; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--acento-2); background: none; border: 0; }
.vidrio { background: var(--glass); border: 1px solid var(--glass-borde); border-radius: 16px; box-shadow: var(--sombra-1); }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.metrica { padding: 16px 18px; }
.metrica .n { font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: -.5px; }
.metrica .l { color: var(--suave); font-size: 13px; margin-top: 2px; }
.metrica .ico { font-size: 20px; float: right; opacity: .9; }
.ahora { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tarjeta-ahora { position: relative; overflow: hidden; border-radius: 22px; padding: 18px; display: flex; gap: 16px; min-height: 168px;
  border: 1px solid var(--glass-borde); box-shadow: var(--sombra-1); cursor: pointer; background: var(--panel); }
.tarjeta-ahora .fondo { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(38px) saturate(1.6);
  opacity: .45; transform: scale(1.1); }
.tarjeta-ahora::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 30%, transparent), color-mix(in srgb, var(--panel) 86%, transparent)); }
.tarjeta-ahora > *:not(.fondo) { position: relative; z-index: 1; }
.tarjeta-ahora .portada { width: 108px; height: 108px; flex-shrink: 0; border-radius: 10px; box-shadow: var(--sombra-2); }
.tarjeta-ahora .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tarjeta-ahora .t1 { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-ahora .t2 { color: var(--suave); font-size: 13px; margin-top: 3px; }
.tarjeta-ahora .cap { color: var(--texto-2); font-size: 13px; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-ahora .barra { height: 5px; border-radius: 99px; background: var(--tinte-3); margin: 8px 0 4px; overflow: hidden; }
.tarjeta-ahora .barra > div { height: 100%; border-radius: 99px; background: var(--color, var(--acento)); }
.tarjeta-ahora .pie { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); }
.boton-redondo { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--primario); color: var(--sobre-primario); font-size: 17px;
  display: grid; place-items: center; box-shadow: var(--sombra-1); flex-shrink: 0; }
.boton-redondo:hover { transform: scale(1.05); }
.mini-menu { background: var(--tinte-3); border: 0; color: var(--texto); border-radius: 99px; width: 30px; height: 30px; }
.listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tarjeta-lista { position: relative; border-radius: 20px; padding: 18px; min-height: 132px; cursor: pointer; overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--color) 26%, var(--panel)), color-mix(in srgb, var(--color) 6%, var(--panel)));
  border: 1px solid color-mix(in srgb, var(--color) 45%, transparent); display: flex; flex-direction: column; }
.tarjeta-lista .nom { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.2px; }
.tarjeta-lista .det { font-size: 13px; color: var(--suave); margin-top: 4px; }
.tarjeta-lista .sigue { font-size: 12.5px; color: var(--texto-2); margin-top: auto; padding-top: 12px; }
.tarjeta-lista .boton-redondo { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 15px; }
.tarjeta-lista.nueva { --color: var(--c-gris); align-items: center; justify-content: center; color: var(--suave); font-weight: 600; border-style: dashed; }
.fila-portadas { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.fila-portadas .item { cursor: pointer; }
.fila-portadas .portada { width: 132px; height: 132px; border-radius: 14px; }
.fila-portadas .t { font-size: 13px; font-weight: 600; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila-portadas .s { font-size: 12px; color: var(--tenue); }
.cuaderno { columns: 3 300px; column-gap: 14px; }
.nota-tarjeta { break-inside: avoid; margin-bottom: 14px; padding: 16px 18px; border-left: 0; }
.nota-tarjeta .tipo { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; letter-spacing: .02em;
  background: color-mix(in srgb, var(--color) 22%, transparent); color: var(--color); }
.nota-tarjeta .cuerpo { margin: 10px 0 8px; line-height: 1.55; font-size: 14.5px; }
.nota-tarjeta .cuerpo.cita { font-family: var(--serif); font-size: 16px; font-style: italic; }
.nota-tarjeta .meta-nota { font-size: 12px; color: var(--tenue); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtros-cuaderno { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros-cuaderno .chip { border-radius: 99px; }

/* --- Tomar acción y guía de lectura --- */
.acciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.accion { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.accion .cab { display: flex; gap: 8px; align-items: flex-start; }
.accion .tit { font-weight: 700; font-size: 15px; line-height: 1.3; flex: 1; }
.accion .det { font-size: 13.5px; color: var(--suave); line-height: 1.45; }
.accion .porque { font-size: 12px; color: var(--tenue); font-style: italic; }
.accion .tipo-acc { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  background: color-mix(in srgb, var(--color) 22%, transparent); color: var(--color); }
.accion.hecha { opacity: .55; }
.accion.hecha .tit { text-decoration: line-through; }
.puntos7 { display: flex; gap: 5px; }
.puntos7 span { width: 22px; height: 22px; border-radius: 7px; background: var(--tinte-2); display: grid; place-items: center; font-size: 10px; color: var(--tenue); }
.puntos7 span.si { background: var(--color); color: var(--sobre-color); font-weight: 700; }
.btn.hecho-hoy { background: var(--c-verde); border-color: var(--c-verde); color: var(--sobre-color); }
.propuesta { cursor: pointer; border: 2px solid transparent; }
.propuesta.elegida { border-color: var(--acento); }
.guia-personajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.personaje { padding: 14px 16px; }
.personaje .nom { font-weight: 700; font-size: 15px; }
.personaje.principal .nom::after { content: ' ★'; color: var(--acento-2); }
.personaje .rel { font-size: 12px; color: var(--suave); margin-top: 6px; }
.linea-t { border-left: 2px solid var(--glass-borde, var(--borde)); margin-left: 6px; padding-left: 16px; }
.linea-t div { position: relative; margin-bottom: 10px; font-size: 14px; }
.linea-t div::before { content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-violeta); }
.linea-t b { color: var(--tenue); font-weight: 600; font-size: 12px; display: block; }

/* --- Mis fichas (Zettelkasten) --- */
.ficha-tarjeta { cursor: pointer; transition: transform .12s; }
.ficha-tarjeta:hover { transform: translateY(-2px); }
.ficha-tarjeta .tit-ficha { font-weight: 700; font-size: 15px; margin-top: 9px; line-height: 1.35; }
.ficha-tarjeta .cuerpo { margin: 8px 0; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.etq { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--tinte-2); color: var(--suave); white-space: nowrap; }
.etq button { background: none; border: 0; color: var(--tenue); padding: 0 0 0 3px; font-size: 11px; }
.etq.sugerida { border: 1px dashed var(--borde); background: none; cursor: pointer; }
.etq-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 8px; background: var(--panel-2); }
.etq-editor .etq-lista { display: contents; }
.etq-editor input { flex: 1; min-width: 160px; background: none; border: 0; color: var(--texto); outline: none; font: inherit; padding: 4px; }
.etq-sugeridas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ef-bloque { display: block; margin-bottom: 14px; }
.ef-bloque textarea, .ef-bloque input.campo { width: 100%; }
.ef-et { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin: 16px 0 6px; }
.ef-bloque .ef-et { margin-top: 0; }
.ef-et small { font-weight: 400; color: var(--tenue); }
.cita-campo, .cita-ficha { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.5; }
.cita-ficha { margin: 0 0 14px; padding: 6px 0 6px 16px; border-left: 3px solid var(--color, var(--c-rosa)); color: var(--suave); }
.comprension { font-size: 15px; line-height: 1.6; }
.pendiente-ficha { padding: 12px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.ficha-chip { border: 1px solid color-mix(in srgb, var(--color) 45%, transparent); background: color-mix(in srgb, var(--color) 12%, transparent);
  color: var(--texto); border-radius: 10px; padding: 5px 11px; font-size: 13px; text-align: left; cursor: pointer; }
.ficha-chip small { color: var(--tenue); }
.mentor { margin-top: 8px; }
.burbuja { padding: 11px 15px; border-radius: 14px; margin-bottom: 10px; line-height: 1.55; font-size: 14.5px; max-width: 92%; }
.burbuja.yo { background: color-mix(in srgb, var(--c-azul) 22%, transparent); margin-left: auto; white-space: pre-wrap; }
.burbuja.mentor { background: var(--tinte-1); border: 1px solid var(--glass-borde); }
.tabla-fichas { padding: 4px 0; }
.fila-ficha { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--borde); }
.fila-ficha:last-child { border-bottom: 0; }
.fila-ficha:hover { background: var(--tinte-1); }
.fila-ficha .t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-ficha .etqs { display: flex; gap: 4px; }
.metrica.clicable { cursor: pointer; }
.toast button { margin-left: 12px; border: 0; border-radius: 8px; padding: 4px 10px; font-weight: 700; background: var(--fondo); color: var(--texto); cursor: pointer; }

/* --- Puntos y compromiso --- */
.estado-puntos { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; position: relative;
  background: color-mix(in srgb, var(--acento) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--acento) 26%, transparent); }
.estado-puntos:empty { display: none; }
.estado-puntos + .estado-ia { margin-top: 6px; }
.estado-puntos .ico { font-size: 22px; }
.estado-puntos .tot { font-weight: 800; font-size: 16px; color: var(--texto); }
.estado-puntos .niv { font-size: 12px; color: var(--suave); }
.estado-puntos .hoy { margin-left: auto; font-size: 12px; font-weight: 700; }
.mas-pts { color: var(--c-verde); } .menos-pts { color: var(--c-rojo); } .cero-pts { color: var(--tenue); }
.flota { position: absolute; right: 12px; top: -6px; font-weight: 800; pointer-events: none; animation: flotar 1.8s ease-out forwards; color: var(--c-verde); }
.flota.menos { color: var(--c-rojo); }
@keyframes flotar { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-34px); } }
.tarjeta-puntos { padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-top: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 10%, var(--panel)), var(--panel) 70%); }
.anillo { --pct: 0; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--acento) calc(var(--pct) * 1%), var(--tinte-3) 0); }
.anillo > div { width: 84px; height: 84px; border-radius: 50%; background: var(--fondo); display: grid; place-items: center; text-align: center; }
.anillo .n { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1; }
.anillo .l { font-size: 10.5px; color: var(--suave); margin-top: 2px; }
.estado-hoy { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.2px; }
.estado-hoy.ganando { color: var(--c-verde); } .estado-hoy.perdiendo { color: var(--c-rojo); }
.dias-semana { display: flex; gap: 6px; margin: 10px 0 6px; }
.dias-semana span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--tinte-2); color: var(--tenue); position: relative; }
.dias-semana span.si { background: var(--c-verde); color: var(--sobre-color); }
.dias-semana span.hoy { outline: 2px solid var(--acento); outline-offset: 1px; }
.dias-semana span.futuro { opacity: .45; }
.avisos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.aviso-pts { font-size: 13.5px; padding: 7px 12px; border-radius: 10px; background: var(--tinte-1); line-height: 1.4; }
.aviso-pts.mal { background: color-mix(in srgb, var(--c-rojo) 13%, transparent); color: var(--error-texto); }
.aviso-pts.alerta { background: color-mix(in srgb, var(--c-ambar) 14%, transparent); color: var(--aviso-texto); }
.aviso-pts.bien { background: color-mix(in srgb, var(--c-verde) 14%, transparent); color: var(--c-verde); }
.movs { display: flex; flex-direction: column; }
.mov { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.mov .p { width: 52px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.mov .d { color: var(--tenue); font-size: 12px; width: 82px; }
.barras-sem { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; align-items: end; height: 170px; padding: 10px 6px 0; }
.barras-sem .col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; font-size: 11.5px; color: var(--tenue); }
.barras-sem .b { width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: var(--c-verde); min-height: 3px; }
.barras-sem .b.neg { background: var(--c-rojo); }
.barras-sem .v { font-weight: 700; color: var(--texto); }
.form-compromiso { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 15px; }
.form-compromiso input { width: 70px; text-align: center; }
.tabla-reglas { display: grid; grid-template-columns: 60px 1fr; gap: 4px 12px; font-size: 13.5px; }
.tabla-reglas .p { text-align: right; font-weight: 800; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

/* --- Mapa de fichas --- */
.mapa-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mapa-lienzo { position: relative; height: calc(100vh - 330px); min-height: 460px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c-violeta) 9%, var(--panel)), var(--panel) 50%, var(--panel-2));
  border: 1px solid var(--glass-borde); cursor: grab; }
.mapa-lienzo.moviendo { cursor: grabbing; }
.mapa-lienzo svg { width: 100%; height: 100%; display: block; user-select: none; }
.mapa-lienzo .nodo { cursor: pointer; }
.mapa-lienzo .nodo circle { stroke: var(--fondo); stroke-width: 1.5; transition: opacity .2s; }
.mapa-lienzo .nodo.pendiente circle { stroke: var(--c-ambar); stroke-dasharray: 3 2; stroke-width: 2; }
.mapa-lienzo .nodo text { fill: var(--texto); font-size: 11.5px; paint-order: stroke; stroke: var(--fondo); stroke-width: 3px; pointer-events: none; }
.mapa-lienzo .nodo.libro text { font-weight: 700; font-size: 12.5px; }
.mapa-lienzo .nodo.etq text { fill: var(--c-violeta); font-weight: 600; }
.mapa-lienzo .nodo.apagado, .mapa-lienzo line.apagado { opacity: .12; }
.mapa-lienzo .nodo.encima circle { stroke: var(--texto); stroke-width: 2.5; }
.mapa-lienzo line { pointer-events: none; }
.mapa-lienzo line.sug-toque { pointer-events: stroke; cursor: pointer; stroke: transparent; stroke-width: 12; }
.mapa-tip { position: absolute; max-width: 320px; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; line-height: 1.4; pointer-events: none; z-index: 2; box-shadow: var(--sombra-2); }
.mapa-tip b { display: block; margin-bottom: 3px; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--suave); margin-top: 10px; align-items: center; }
.mapa-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.mapa-leyenda s { display: inline-block; width: 22px; height: 0; border-top: 2px solid; margin-right: 5px; vertical-align: 3px; text-decoration: none; }

/* --- Novedades del servidor (fase D) --- */
.fila-novedades { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.fila-novedades.carril { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 150px; overflow-x: auto; padding-bottom: 6px; }
.novedad { display: flex; flex-direction: column; gap: 3px; }
.novedad .portada { width: 100%; aspect-ratio: 1; height: auto; border-radius: 14px; position: relative; cursor: pointer; }
.modal .novedad .portada { width: 100%; }   /* no la portada grande de las fichas en ventana */
.novedad .t { font-size: 13.5px; font-weight: 700; margin-top: 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.novedad .s { font-size: 12px; color: var(--tenue); }
.novedad .btn { margin-top: 6px; }
.cat-nov { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-top: 3px;
  background: color-mix(in srgb, var(--color) 22%, transparent); color: var(--color); }
.sello-pedido { z-index: 2; position: absolute; left: 8px; bottom: 8px; background: #7fd9b2; color: #0f2420; font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.sello-hace { z-index: 2; position: absolute; right: 8px; top: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px; backdrop-filter: blur(6px); }
.modal.novedades { max-width: 920px; }

@media (max-width: 900px) {
  .mi-espacio h1 { font-size: 28px; }
  .tarjeta-ahora .portada { width: 84px; height: 84px; }
  .con-categorias { grid-template-columns: 1fr; gap: 14px; }
  .panel-cat { position: static; max-height: none; display: flex; overflow-x: auto; gap: 6px; padding: 8px; border-radius: 12px; }
  .panel-cat .titulo-panel, .panel-cat .pie-panel, .cat-item.sub { display: none; }
  .cat-item { width: auto; white-space: nowrap; flex-shrink: 0; }
  .dos-col { grid-template-columns: 1fr; }
  body { flex-direction: column; overflow: auto; }
  .lateral { width: auto; flex-direction: row; padding: 10px; align-items: center; overflow-x: auto; }
  .marca { padding: 0 10px 0 0; }
  .nav { display: flex; }
  .estado-sesion { display: none; }
  main { padding: 18px 16px calc(var(--barra-alto) + 30px); overflow: visible; }
  .ficha, .modal { grid-template-columns: 1fr; }
  .ficha .portada, .modal .portada { width: 220px; }
  .mini { grid-template-columns: 1fr auto; }
  .mini .centro-mini .linea-tiempo, .mini .derecha { display: none; }
  .pantalla { grid-template-columns: 1fr; overflow-y: auto; }
  .pantalla .lado { border-left: 0; height: 75vh; }
  .buscar { min-width: 0; width: 100%; }
}

/* ===== Teléfono (PWA, estilo Apple): barra arriba, pestañas abajo, mini reproductor flotante ===== */
.cabecera-movil, .tabbar { display: none; }
.extras .btn .i { margin-right: 6px; }

@media (max-width: 760px) {
  :root { --tab-alto: 58px; }
  html, body { height: auto; }
  body { display: block; overflow: auto; -webkit-tap-highlight-color: transparent; }
  .lateral { display: none; }
  .cabecera-movil { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 25;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; font-size: 17px; letter-spacing: -.2px;
    background: color-mix(in srgb, var(--fondo) 82%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--borde); }
  .cabecera-movil .marca-icono { width: 36px; height: 36px; }
  #puntos-movil { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 99px; white-space: nowrap;
    background: color-mix(in srgb, var(--acento) 11%, var(--panel)); border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent); }
  #puntos-movil:empty { display: none; }
  main { padding: 14px 16px calc(var(--tab-alto) + 100px + env(safe-area-inset-bottom)); overflow: visible; }
  .aviso-version { left: 12px; right: 12px; transform: none; top: calc(env(safe-area-inset-top) + 60px); font-size: 13px; }

  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
    height: calc(var(--tab-alto) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-top: 1px solid var(--borde); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px;
    font-weight: 600; color: var(--tenue); position: relative; }
  .tabbar a .ico { display: grid; place-items: center; transition: transform .15s; }
  .tabbar a.activo { color: var(--acento-2); }
  .tabbar a.activo .ico { transform: scale(1.08); }
  .tabbar a.con-punto::after { content: ''; position: absolute; top: 8px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--c-rojo); }

  /* Mini reproductor flotante (como Apple Music) */
  .mini { left: 8px; right: 8px; bottom: calc(var(--tab-alto) + env(safe-area-inset-bottom) + 8px); height: 60px; border-radius: 14px;
    padding: 0 6px 0 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; overflow: hidden;
    background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--borde); box-shadow: var(--sombra-2); }
  .mini .quien { gap: 10px; }
  .mini .quien .portada { width: 44px; border-radius: 8px; }
  .mini .quien .t1 { font-size: 14px; }
  .mini .quien .t2 { font-size: 12px; }
  .mini .derecha { display: none; }
  .mini .mandos { gap: 0; }
  .mini .mando[data-accion="atras"] { display: none; }
  .mini .mando { font-size: 13px; padding: 8px 6px; }
  .mini .mando.grande { width: 40px; height: 40px; font-size: 20px; }
  .mini .centro-mini .linea-tiempo { display: flex; position: absolute; left: 10px; right: 10px; bottom: 0; pointer-events: none; }
  .mini .centro-mini .linea-tiempo span { display: none; }
  .mini .centro-mini .deslizador { height: 2px; border-radius: 0; }
  .mini .centro-mini .deslizador::-webkit-slider-thumb { width: 0; height: 0; }
  .toast { bottom: calc(var(--tab-alto) + 82px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); text-align: center; }
  .visita { bottom: calc(var(--tab-alto) + 80px + env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: center; border-radius: 16px; }
  .visita .txt { width: 100%; text-align: center; font-size: 12.5px; }

  /* Reproductor a pantalla completa */
  .pantalla { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: radial-gradient(circle at 50% 0%, var(--brillo-pantalla) 0%, var(--fondo) 62%); }
  .pantalla .centro { padding: calc(env(safe-area-inset-top) + 66px) 22px 18px; justify-content: flex-start; }
  .pantalla .portada { width: min(80vw, 340px); border-radius: 14px; }
  .pantalla .t1 { font-size: 21px; margin-top: 22px; line-height: 1.25; }
  .pantalla .cap { margin-top: 12px; font-size: 14px; }
  .pantalla .linea-tiempo { width: 100%; }
  .pantalla .deslizador { height: 6px; }
  .pantalla .deslizador::-webkit-slider-thumb { width: 18px; height: 18px; }
  .pantalla .mandos { width: 100%; justify-content: space-between; gap: 0; margin-top: 14px; }
  .pantalla .mando { font-size: 17px; padding: 12px 8px; }
  .pantalla .mando.grande { width: 74px; height: 74px; font-size: 28px; }
  .pantalla .extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 20px; }
  .pantalla .extras .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px;
    font-size: 11.5px; line-height: 1.15; text-align: center; padding: 8px 4px; border-radius: 14px; border: 0; background: var(--tinte-2); }
  .pantalla .extras .btn .i { display: block; font-size: 21px; margin: 0; }
  .pantalla .extras .btn[data-accion="extracto"] { background: color-mix(in srgb, var(--c-rosa) 16%, transparent); color: var(--c-rosa); }
  .pantalla .lado { height: 78vh; border-left: 0; border-top: 1px solid var(--borde); }
  .pantalla.leyendo .lado { height: 88vh; }
  .cerrar { top: calc(env(safe-area-inset-top) + 12px); left: 14px; width: 40px; height: 40px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; background: var(--tinte-3); border: 0; }
  .cerrar .txt { display: none; }
  .texto-cuerpo { font-size: 18px; padding: 4px 18px 60px; }

  /* Ventanas como hojas que suben desde abajo */
  .modal-fondo { place-items: end stretch; padding: 0; }
  .modal { max-width: none !important; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; gap: 16px;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); animation: subir-hoja .22s ease-out; }
  .modal::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--borde); }
  .modal-x { top: 14px; right: 12px; width: 34px; height: 34px; }
  @keyframes subir-hoja { from { transform: translateY(60px); opacity: .5; } }

  /* Contenido */
  h1, .mi-espacio h1 { font-size: 27px; }
  .metricas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metrica { padding: 12px 14px; }
  .metrica .n { font-size: 24px; }
  .tarjeta-puntos { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .tarjeta-puntos .anillo { justify-self: center; }
  .dias-semana span { width: 100%; }
  .carrusel { grid-auto-columns: 86vw; }
  .campo, select.campo, textarea.campo { font-size: 16px; }   /* el iPhone no hace zoom al escribir */
  .tabla { display: block; overflow-x: auto; }
  .mapa-lienzo { height: 62vh; min-height: 360px; }
  .mapa-leyenda > span:last-child { display: none; }
  .fila-novedades.carril { grid-auto-columns: 132px; }
  .acciones-grid, .guia-personajes { grid-template-columns: 1fr; }
  .cuaderno { columns: 1; }
  .form-compromiso input { width: 60px; }
  .ficha .portada { width: min(72vw, 290px); margin: 0 auto; }
  #libro-carpeta { display: none; }   /* abriría la carpeta en el PC, no en el teléfono */
}

/* Escuchando un fragmento: volver a donde ibas */
.visita { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barra-alto) + 12px); z-index: 36;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 99px; max-width: calc(100vw - 24px);
  background: color-mix(in srgb, var(--panel) 95%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--sombra-2); font-size: 13.5px; }
.visita .txt { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visita .btn { white-space: nowrap; }
#panel-marcadores { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 30px; }
.papelera-cab { column-span: all; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* 👍 / 👎 en las respuestas del tutor */
.valorar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.valorar .pulgar { border: 1px solid var(--borde); background: transparent; border-radius: 99px; padding: 3px 10px; font-size: 14px; }
.valorar .pulgar.activo.bien { background: color-mix(in srgb, var(--c-verde) 18%, transparent); border-color: var(--c-verde); }
.valorar .pulgar.activo.mal { background: color-mix(in srgb, var(--c-rojo) 16%, transparent); border-color: var(--c-rojo); }
.valorar .resumen-val { font-size: 12px; color: var(--tenue); }
.panel-valorar { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--tinte-1); border: 1px solid var(--borde); }
.panel-valorar .chips { margin: 6px 0 8px; }
.panel-valorar .chip { font-size: 12.5px; padding: 4px 10px; }
.panel-valorar input { width: 100%; }
.estrella-fav { color: var(--acento-2); }
/* 🎙 Dictado */
.dictado-barra { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.mic { border: 1px solid var(--borde); background: var(--panel-2); border-radius: 99px; padding: 5px 12px; font-size: 13px; white-space: nowrap; }
.mic.grabando { background: var(--c-rojo); border-color: var(--c-rojo); color: #fff; animation: latir 1.2s ease-in-out infinite; }
.mic.compacto { padding: 0; width: 40px; height: 40px; flex-shrink: 0; font-size: 18px; align-self: center; }
@keyframes latir { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-rojo) 25%, transparent); } }

/* «📱 En mi teléfono» */
.qr-movil { background: #fff; padding: 14px; border-radius: 18px; width: min(260px, 70vw); }
.qr-movil img { display: block; width: 100%; height: auto; }
.qr-movil.apagado { background: var(--tinte-1); color: var(--tenue); aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: 24px; }
.url-movil { font-size: 17px; letter-spacing: .2px; color: var(--acento-2); word-break: break-all; }
.pasos-movil { margin: 0; padding-left: 20px; line-height: 1.6; color: var(--suave); }
.pasos-movil li { margin-bottom: 10px; }
.pasos-movil b { color: var(--texto); }
.caja-movil { padding: 20px 22px; }
.caja-movil h3 { margin: 0 0 12px; font-size: 16px; }
.caja-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.estado-conexion .interruptor { margin: 0; font-weight: 600; }

/* Pestaña «Más» (hoja con el resto de secciones) */
.grupo-mas { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.fila-mas { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--borde); font-size: 15.5px; }
.fila-mas:last-child { border-bottom: 0; }
.fila-mas .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--tinte-2); color: var(--acento); font-size: 16px; }
.fila-mas .flecha { margin-left: auto; color: var(--tenue); font-size: 20px; }
.fila-mas .insignia { margin-left: auto; }
.fila-mas .insignia + .flecha { margin-left: 6px; }

/* ===== Rediseño editorial: iconos de línea, menú por grupos, selector de tema ===== */
.ic { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex: none; vertical-align: middle; }
.ic { pointer-events: none; }   /* el clic llega siempre al botón (e.target), no al dibujo */
.nav { display: flex; flex-direction: column; }
.nav a { color: var(--texto-2); font-size: 14px; }
.nav a[hidden] { display: none; }   /* p. ej. «Sin internet» donde no se puede (ventana del PC) */
.nav a .ico { display: grid; place-items: center; color: var(--suave); }
.nav a:hover { background: var(--tinte-1); color: var(--texto); }
.nav-grupo, .titulo-grupo-mas { font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue);
  padding: 18px 12px 7px; }
.nav-grupo:first-child { padding-top: 4px; }
.titulo-grupo-mas { padding: 14px 4px 7px; }
.lateral { overflow-y: auto; }
.lateral .marca { padding-bottom: 14px; }

.selector-tema { display: flex; gap: 2px; padding: 3px; margin: 10px 0 4px; border-radius: 10px; background: var(--tinte-2); }
.selector-tema button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none;
  color: var(--suave); padding: 6px 4px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.selector-tema button .ic { width: 17px; height: 17px; }
.selector-tema button:hover { color: var(--texto); }
.selector-tema button.activo { background: var(--panel); color: var(--texto); box-shadow: var(--sombra-1); }
.lateral .selector-tema span { display: none; }
.hoja-mas .selector-tema button { padding: 9px 6px; font-size: 14px; }

/* Mandos del reproductor con iconos */
.mando { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mando.grande .ic { width: 20px; height: 20px; fill: currentColor; stroke-width: 1; }
.pantalla .mando.grande .ic { width: 28px; height: 28px; }
.mando.salto { position: relative; }
.mando.salto small { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pantalla .mando .ic { width: 24px; height: 24px; }
.pantalla .mando[data-accion^="cap-"] .ic { fill: currentColor; stroke-width: 1.2; width: 20px; height: 20px; }
.extras .btn .i { display: inline-grid; place-items: center; }
.extras .btn .i .ic { width: 18px; height: 18px; }
.btn .ic { width: 17px; height: 17px; }
.fila-mas .ico .ic { width: 18px; height: 18px; }
.fila-mas .flecha .ic { width: 16px; height: 16px; }
.pantalla .cap { color: var(--acento-2); }
.pantalla .extras .btn { background: var(--panel); }

@media (max-width: 760px) {
  .tabbar a .ico .ic { width: 22px; height: 22px; }
  .tabbar a.activo .ico .ic { stroke-width: 2.1; }
  .pantalla .extras .btn { background: var(--tinte-2); }
  .pantalla .extras .btn .i .ic { width: 22px; height: 22px; }
  .pantalla .mando .ic { width: 26px; height: 26px; }
  .pantalla .mando.grande .ic { width: 32px; height: 32px; }
  .mini .mando.grande .ic { width: 22px; height: 22px; }
}
.lateral { padding-top: 16px; }
.lateral .marca { padding-bottom: 6px; }
.nav a { padding: 8px 12px; margin-bottom: 1px; }
.nav-grupo { padding: 14px 12px 5px; }
.lateral .estado-ia, .lateral .estado-sesion { padding: 8px 12px; font-size: 12.5px; }

/* ===== Inicio editorial ===== */
.antetitulo { font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.antetitulo.numerado { margin: 34px 0 12px; color: var(--suave); }
.antetitulo.numerado span { color: var(--acento-2); margin-right: 6px; }
.portada-inicio { padding: 6px 0 0; }
.titulo-portada { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -2px; margin: 10px 0 12px; max-width: 820px; }
.portada-inicio .sub { margin-bottom: 4px; font-size: 15px; }
.portada-inicio .nota:empty { display: none; }
.portada-inicio .nota { margin-top: 4px; }
.vacio .ic.grande { width: 44px; height: 44px; color: var(--acento); margin-bottom: 10px; }

.cabeza-seccion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 36px 0 15px; }
.cabeza-seccion h2 { margin: 0 !important; flex: 1; min-width: 0; }
.enlace { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.enlace .ic { width: 16px; height: 16px; }

/* Tarjeta protagonista: siempre verde bosque, en los dos temas */
.hero-inicio { position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 34px; align-items: center; cursor: pointer;
  padding: 30px 38px; border-radius: 16px; background: #0f2420; color: #edf3f1; border: 1px solid #1f3d33; box-shadow: var(--sombra-2); }
.hero-inicio::after { content: ''; position: absolute; z-index: -1; width: 460px; height: 460px; right: -250px; top: -90px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(127, 217, 178, .16) 23px 24px); }
.hero-portada { width: 168px; flex-shrink: 0; transform: rotate(-2deg); transition: transform .25s; }
.hero-inicio:hover .hero-portada { transform: rotate(0) translateY(-3px); }
.hero-portada .portada { box-shadow: 0 16px 30px rgba(0, 0, 0, .4); border-radius: 6px; }
.hero-info { flex: 1; min-width: 0; }
.hero-info .antetitulo { color: #dfaa47; }
.hero-info h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.6px; margin: 8px 0 6px; max-width: 640px; color: #edf3f1; }
.hero-autor { margin: 0; color: #c9d6d2; font-size: 15px; }
.hero-barra { height: 4px; border-radius: 99px; background: rgba(237, 243, 241, .18); overflow: hidden; margin: 22px 0 8px; max-width: 560px; }
.hero-barra > div { height: 100%; background: #7fd9b2; border-radius: 99px; }
.hero-datos { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13px; color: #c9d6d2; max-width: 640px; margin-top: 14px; }
.hero-barra + .hero-datos { margin-top: 0; }
.hero-datos span:empty { display: none; }
.hero-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-play { background: #edf3f1; color: #0b1e19; border: 0; border-radius: 99px; padding: 11px 22px; font-size: 14.5px; }
.hero-play:hover { background: #fff; }
.hero-play .ic { fill: currentColor; stroke-width: 1; }
.hero-ficha { background: transparent; color: #edf3f1; border-color: rgba(237, 243, 241, .35); border-radius: 99px; padding: 11px 18px; }
.hero-ficha:hover { background: rgba(237, 243, 241, .1); border-color: rgba(237, 243, 241, .6); }
:root[data-tema="oscuro"] .hero-inicio { border-color: #2b4d41; }

.play-redondo .ic { fill: currentColor; stroke-width: 1; width: 18px; height: 18px; margin-left: 2px; }

/* Banda «Escucha. Reflexiona.» */
.banda-idea { display: flex; align-items: center; gap: 20px; margin-top: 34px; padding: 22px 24px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-1); }
.banda-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--acento-fondo); color: var(--acento); }
.banda-ico .ic { width: 24px; height: 24px; }
.banda-idea h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 0 0 4px; }
.banda-idea p { margin: 0; color: var(--suave); font-size: 13.5px; line-height: 1.5; max-width: 640px; }
.banda-idea > div { flex: 1; min-width: 0; }

/* Novedades: título de sección como el resto */
#ini-novedades h2 { font-size: 23px; letter-spacing: -.3px; font-weight: 500; }
.novedad .t { font-weight: 600; }
.novedad .btn .ic { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .titulo-portada { font-size: 38px; letter-spacing: -1.2px; }
  .antetitulo.numerado { margin-top: 26px; }
  .hero-inicio { gap: 18px; padding: 20px; align-items: flex-start; }
  .hero-portada { width: 96px; }
  .hero-info h2 { font-size: 22px; }
  .hero-autor { font-size: 13px; }
  .hero-barra { margin-top: 14px; }
  .hero-datos { font-size: 12px; }
  .hero-datos #hero-cap { display: none; }
  .hero-botones { margin-top: 14px; }
  .hero-play { padding: 9px 16px; font-size: 13px; }
  .hero-ficha { display: none; }
  .banda-idea { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .banda-idea .btn { width: 100%; justify-content: center; }
  .cabeza-seccion { margin-top: 28px; }
}
.fila-novedades.carril .novedad .btn { margin-top: auto; }
.fila-novedades.carril .novedad .cat-nov { margin-bottom: 8px; }
@media (max-width: 760px) {
  .titulo-portada { font-size: 31px; letter-spacing: -.8px; margin: 6px 0 8px; }
  .portada-inicio .antetitulo { display: none; }
  .cabeza-seccion h2 { font-size: 22px; }
  .cabeza-seccion .enlace { font-size: 13px; }
}

/* ===== Catálogo del servidor ===== */
.cabeza-vista { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cabeza-vista h1 { flex: 1; min-width: 0; margin-top: 6px; }
.franja-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; box-shadow: var(--sombra-1); margin: 6px 0 8px; }
.cifra { padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cifra + .cifra { border-left: 1px solid var(--borde); }
.cifra b { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -.5px; line-height: 1.15; }
.cifra .et { font-size: 12.5px; color: var(--suave); }
.cifra .et:first-child { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.cifra .medidor { margin: 6px 0 4px; height: 4px; }
.cifra.ok b { color: var(--ok); } .cifra.mal b { color: var(--error); }
#cat-sub { margin: 0 0 20px; }
.barra-catalogo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.caja-buscar { display: flex; align-items: center; gap: 10px; flex: 1 1 340px; max-width: 560px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 0 14px; color: var(--tenue); cursor: text; }
.caja-buscar:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fondo); }
.caja-buscar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 11px 0; color: var(--texto); font: inherit; }
.caja-buscar .ic { width: 18px; height: 18px; }
.barra-catalogo select.campo { padding: 10px 12px; }
.cambiar-vista { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tinte-2); }
.cambiar-vista button { border: 0; background: none; color: var(--suave); width: 36px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
.cambiar-vista button.activo { background: var(--panel); color: var(--texto); box-shadow: var(--sombra-1); }
.cambiar-vista .ic { width: 18px; height: 18px; }
.sello::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
.tarjeta .cat-nov { display: inline-block; margin-top: 5px; }
.tarjeta .acciones .btn .ic { width: 15px; height: 15px; }
.vacio h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--texto); margin: 4px 0 6px; }
.rejilla > .vacio { padding: 50px 20px; }

/* Vista en lista */
.rejilla.en-filas { grid-template-columns: 1fr; gap: 0; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra-1); overflow: hidden; }
.rejilla.en-filas .tarjeta { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 18px; row-gap: 1px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--borde); }
.rejilla.en-filas .tarjeta:last-child { border-bottom: 0; }
.rejilla.en-filas .tarjeta:hover { background: var(--tinte-1); }
.rejilla.en-filas .tarjeta > * { grid-column: 2; }
.rejilla.en-filas .portada { grid-column: 1; grid-row: 1 / span 6; width: 64px; border-radius: 6px; align-self: start; }
.rejilla.en-filas .tarjeta:hover .portada { transform: none; box-shadow: var(--sombra-portada); }
.rejilla.en-filas .portada .sello, .rejilla.en-filas .portada .sello-nuevo { display: none; }
.rejilla.en-filas .marcar { width: 22px; height: 22px; bottom: 4px; right: 4px; font-size: 12px; }
.rejilla.en-filas .titulo { margin-top: 0; -webkit-line-clamp: 1; }
.rejilla.en-filas .cat-nov { justify-self: start; }
.rejilla.en-filas .acciones { grid-column: 3; grid-row: 1 / span 6; margin: 0; }
.rejilla.en-filas > .vacio { grid-column: 1; }

/* ===== Ficha del libro ===== */
.volver { margin: 0 0 18px; color: var(--suave); font-weight: 600; font-size: 13.5px; }
.volver:hover { color: var(--texto); }
.ficha { grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; }
.ficha .portada { width: 270px; box-shadow: var(--sombra-2); }
.ficha-info .cat-nov { margin: 0 0 4px; display: inline-block; }
.ficha h1 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -1px; margin: 8px 0 6px; }
.ficha .subt { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--suave); margin-bottom: 10px; }
.ficha-autor { font-size: 16px; margin: 0 0 8px; color: var(--texto-2); }
.ficha-autor span { color: var(--suave); }
.ficha-meta { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13.5px; margin: 0; }
.ficha-meta .ic { width: 16px; height: 16px; }
.ficha-meta b { color: var(--ok); }
.ficha-progreso { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--suave); max-width: 520px; }
.ficha-progreso .hero-barra { flex: 1; margin: 0; background: var(--tinte-3); }
.ficha-progreso .hero-barra > div { background: var(--acento); }
.ficha-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 22px 0 6px; }
.btn.redondeado { border-radius: 99px; padding: 11px 22px; font-size: 14.5px; }
.btn.redondeado .ic { fill: currentColor; stroke-width: 1; }
.btn.redondo { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
.btn.redondo .ic { width: 19px; height: 19px; }
.btn.es-favorito { color: var(--c-rosa); border-color: color-mix(in srgb, var(--c-rosa) 45%, transparent); }
.btn.es-favorito .ic { fill: currentColor; }
.ficha-resumen { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--texto); margin: 20px 0 12px; max-width: 760px; }
.ficha .descripcion { font-size: 14.5px; color: var(--texto-2); }
.ficha-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 34px; align-items: start; }
.tarjeta-dato { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 18px 20px; box-shadow: var(--sombra-1); }
.tarjeta-dato h3 { margin: 0 0 12px; font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.tarjeta-dato .datos { margin: 0; font-size: 13.5px; }
.tarjeta-dato .fila { gap: 8px; }
#libro-capitulos .item.actual .nom { color: var(--acento-2); }
#libro-marcadores .num .ic { width: 16px; height: 16px; color: var(--acento); }

@media (max-width: 760px) {
  .franja-cifras { grid-template-columns: 1fr 1fr; }
  .cifra:nth-child(3) { border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--borde); }
  .cifra b { font-size: 23px; }
  .cifra { padding: 13px 14px; }
  .caja-buscar { flex-basis: 100%; max-width: none; }
  #cat-faltantes { width: 100%; justify-content: center; }
  .rejilla.en-filas .tarjeta { grid-template-columns: 56px minmax(0, 1fr); padding: 12px; }
  .rejilla.en-filas .portada { width: 56px; }
  .rejilla.en-filas .acciones { grid-column: 2; grid-row: auto; margin-top: 6px; }
  .cabeza-vista .btn { font-size: 13px; }
  .ficha { gap: 18px; }
  .ficha .portada { width: min(62vw, 240px); margin: 0 auto; }
  .ficha-info { text-align: left; }
  .ficha h1 { font-size: 28px; }
  .ficha-acciones .redondeado { flex: 1 1 100%; justify-content: center; }
  .ficha-tarjetas { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ficha { grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }
  .ficha .portada { width: 200px; }
}
@media (max-width: 760px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha .portada { width: min(62vw, 240px); }
}
.rejilla:not(.en-filas) .tarjeta { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.rejilla:not(.en-filas) .tarjeta > .cat-nov { align-self: flex-start; max-width: 100%; }
.rejilla:not(.en-filas) .tarjeta > .portada { width: 100%; }
.rejilla:not(.en-filas) .tarjeta .acciones { margin-top: auto; padding-top: 8px; }
@media (max-width: 760px) {
  .cabeza-vista { flex-wrap: nowrap; align-items: flex-start; }
  #cat-refrescar { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
  #cat-refrescar span { display: none; }
  #cat-stats, #cat-sub { display: none; }
  .barra-catalogo select.campo { flex: 1; }
}
@media (max-width: 760px) {
  .rejilla:not(.en-filas) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .rejilla:not(.en-filas) .tarjeta .titulo { font-size: 13.5px; }
  .rejilla:not(.en-filas) .tarjeta .acciones .btn { width: 100%; justify-content: center; }
  .rejilla .sello { font-size: 10px; padding: 2px 7px; }
}

/* ===== Mi espacio y Mis fichas ===== */
.mi-espacio .saludo { font-size: 15.5px; }
.metrica { position: relative; }
.metrica .ico { float: none; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-fondo); color: var(--acento); }
.metrica .ico .ic { width: 18px; height: 18px; }
.metrica .l { padding-right: 6px; }
.boton-redondo .ic { width: 18px; height: 18px; fill: currentColor; stroke-width: 1; margin-left: 2px; }
.mini-menu { display: grid; place-items: center; }
.mini-menu .ic { width: 18px; height: 18px; }
.tarjeta-lista.nueva { flex-direction: row; gap: 6px; }
.tarjeta-lista.nueva .ic { width: 18px; height: 18px; }
.mi-espacio h2 .mas { display: inline-flex; align-items: center; gap: 4px; }
.mi-espacio h2 .mas .ic { width: 16px; height: 16px; }
.lista .num .ic { width: 16px; height: 16px; color: var(--acento); vertical-align: -3px; }
.nota-tarjeta .btn .ic, .accion .btn .ic, .ficha-tarjeta .btn .ic { width: 15px; height: 15px; }
.meta-nota .cuenta { display: inline-flex; align-items: center; gap: 3px; color: var(--suave); }
.meta-nota .cuenta .ic { width: 14px; height: 14px; }
.nota-tarjeta .tipo { letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }
.accion .tipo-acc { letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }
.accion .tit { font-family: var(--serif); font-weight: 500; font-size: 17px; }
.ficha-tarjeta .tit-ficha { font-family: var(--serif); font-weight: 500; font-size: 17px; }
.estrella-fav { color: var(--c-ambar); }
.cat-item .ico .ic { width: 17px; height: 17px; color: var(--suave); }
.cat-item.activo .ico .ic { color: var(--acento); }
.filtros-cuaderno .campo { padding: 7px 12px; }
.cuaderno > .vidrio:only-child { column-span: all; }
.vacio-ficha { padding: 34px 28px; text-align: center; color: var(--suave); }
.vacio-ficha .ic.grande { width: 38px; height: 38px; color: var(--acento); }
.vacio-ficha h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--texto); margin: 8px 0 8px; }
.vacio-ficha p { max-width: 620px; margin: 0 auto; line-height: 1.6; }

/* ===== Pasada final: categorías, cola, progreso, conocimiento ===== */
.punto-cat { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--color); flex-shrink: 0; }
.cat-item .ico .punto-cat { vertical-align: middle; }
.ruta-cat .punto-cat { margin-right: 4px; vertical-align: 0; }
.ruta-cat .enlace .ic { width: 14px; height: 14px; }
.cola .mover .btn { padding: 4px 6px; }
.cola .mover .btn .ic { width: 15px; height: 15px; }
.cumple { font-weight: 800; color: var(--tenue); }
.cumple.si { color: var(--c-verde); } .cumple.no { color: var(--c-rojo); }
.ico-cono { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--acento-fondo); color: var(--acento); flex-shrink: 0; }
.ico-cono .ic { width: 16px; height: 16px; }
.entrada .btn .ic { width: 15px; height: 15px; }
.vacio > .ic.grande { display: block; margin: 0 auto 12px; }

/* Tableta / ventana estrecha (761–900 px): se mantiene el menú lateral, más estrecho */
@media (min-width: 761px) and (max-width: 900px) {
  body { flex-direction: row; overflow: hidden; }
  .lateral { width: 200px; flex-direction: column; align-items: stretch; padding: 14px 10px calc(var(--barra-alto) + 12px); overflow-x: hidden; overflow-y: auto; }
  .lateral .marca { padding: 0 0 6px; }
  .nav { display: flex; flex-direction: column; }
  .nav a { padding: 7px 10px; font-size: 13.5px; gap: 10px; }
  .estado-sesion { display: block; }
  main { overflow-y: auto; padding: 24px 22px calc(var(--barra-alto) + 30px); }
}

/* Mi cuaderno: buscador, vista por libro y resultados agrupados */
.busca-cuaderno { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; position: relative; }
.busca-cuaderno .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tenue); display: flex; pointer-events: none; }
.busca-cuaderno input#cuaderno-q { flex: 1; width: auto; min-width: 0; max-width: none; padding-left: 40px; height: 44px; font-size: 15px; border-radius: 12px; }
.filtros-cuaderno select.campo { width: auto; max-width: 280px; flex: 0 1 auto; }
.busca-cuaderno .chip { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.filtros-cuaderno .chip .ic, .busca-cuaderno .chip .ic { width: 15px; height: 15px; }
.temas-cuaderno { margin: -2px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.libros-cuaderno { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.libro-cuaderno { display: flex; gap: 14px; padding: 12px; cursor: pointer; align-items: center; transition: transform .12s; }
.libro-cuaderno:hover { transform: translateY(-2px); }
.libro-cuaderno .portada { width: 74px; height: 74px; flex-shrink: 0; border-radius: 10px; }
.libro-cuaderno .info { min-width: 0; }
.libro-cuaderno .t1 { font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.libro-cuaderno .t2, .libro-cuaderno .t3 { font-size: 12.5px; color: var(--tenue); }
.libro-cuaderno .conteos { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.cab-libro-cuaderno, .grupo-libro-cuaderno { column-span: all; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; }
.grupo-libro-cuaderno { margin-top: 18px; border-bottom: 1px solid var(--borde); padding-bottom: 6px; }
.grupo-libro-cuaderno .enlace { font-weight: 700; font-size: 16px; }
.resultado-cuaderno { column-span: all; margin: 0 0 6px; }
.por-tema { font-size: 12px; color: var(--tenue); margin-top: 6px; font-style: italic; }
.cuaderno mark { background: rgba(255, 190, 77, .35); color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 760px) {
  .busca-cuaderno { flex-wrap: wrap; }
  .busca-cuaderno input { min-width: 100%; }
  .libros-cuaderno { grid-template-columns: 1fr; }
}

/* Añadir desde un enlace */
.caja-fuente { padding: 16px 18px; margin-bottom: 12px; }
.vista-fuente { display: flex; gap: 16px; margin-top: 14px; align-items: flex-start; flex-wrap: wrap; }
.mini-fuente { width: 220px; max-width: 100%; border-radius: 10px; object-fit: cover; aspect-ratio: 16 / 9; }
.datos-fuente { flex: 1; min-width: 240px; }
.datos-fuente .t1 { font-weight: 700; font-size: 16px; line-height: 1.3; }
.muestra-fuente { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.muestra-fuente audio { width: 100%; max-width: 420px; height: 36px; }
.form-fuente { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin-top: 14px; }
.form-fuente label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--suave); }
.form-fuente .ancho { grid-column: 1 / -1; }
.form-fuente .interruptor { flex-direction: row; font-weight: 500; }
.tramo-fuente { display: flex; flex-direction: column; gap: 8px; }
.fila-pc { margin-top: 10px; flex-wrap: wrap; gap: 8px; align-items: center; }
.oido { margin: 8px 0 0; font-style: italic; line-height: 1.45; }
.oido b { font-style: normal; }
.pistas-pc { margin-top: 12px; }
.chip-sonido { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; background: var(--panel-2); color: var(--suave); white-space: nowrap; }
.chip-sonido.s-verde { color: var(--ok); }
.chip-sonido.s-amarillo { color: var(--aviso-texto, var(--aviso)); }
.chip-sonido.s-rojo { color: var(--error-texto, var(--error)); }
.sonido-libro { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.version-libro { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip-version { display: inline-flex; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--suave); }
.chip-version.nueva { background: var(--acento-fondo, var(--panel-2)); color: var(--acento-2); }
.historial-version { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.historial-version ol { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.sonido-previo { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.semaforo-grande { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.problemas-sonido { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.problemas-sonido li.s-rojo::marker { content: '● '; color: var(--error); }
.problemas-sonido li.s-amarillo::marker { content: '● '; color: var(--aviso); }
.punto-sem { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); vertical-align: middle; flex: none; }
.punto-sem.s-verde { background: var(--ok); } .punto-sem.s-amarillo { background: var(--aviso); } .punto-sem.s-rojo { background: var(--error); }
.semaforo-grande { display: flex; align-items: center; gap: 8px; }
.semaforo-grande .punto-sem { width: 13px; height: 13px; }
.ic.en-linea { width: 16px; height: 16px; vertical-align: -3px; }
.mini-portada.vacia .ic { width: 22px; height: 22px; color: var(--tenue); }
.tramos-bajos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 12px; }
.calidad-ventana h3 { margin: 16px 0 8px; font-size: 15px; }
.arreglos-sonido { display: grid; gap: 8px; }
.arreglos-sonido label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.arreglos-sonido select { width: auto; }
.nivel-sonido { display: grid !important; grid-template-columns: 170px auto 1fr; align-items: center; gap: 4px 10px; }
.nivel-sonido .nota { grid-column: 2 / -1; margin: 0; }
@media (max-width: 600px) { .nivel-sonido { grid-template-columns: 1fr; } .nivel-sonido .nota { grid-column: 1; } }
.arreglos-sonido .nota { margin: 0; }
.ab-sonido { gap: 8px; flex-wrap: wrap; align-items: center; }
.calidad-ventana [hidden] { display: none !important; }
.barra-avance { height: 6px; border-radius: 3px; background: var(--panel-2); margin-top: 6px; overflow: hidden; }
.barra-avance span { display: block; height: 100%; background: var(--acento); transition: width .4s; }
.audacity-sonido { margin-top: 16px; }
.audacity-sonido summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.resumen-calidad { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.resumen-calidad .tarjeta-dato { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.resumen-calidad .tarjeta-dato b { display: block; font-size: 24px; }
.resumen-calidad .tarjeta-dato.activa { outline: 2px solid var(--acento); }
.lista-calidad .item { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; }
.lista-calidad .mini-portada { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.lista-calidad .nom { flex: 1; min-width: 180px; }
.lista-calidad .problemas-linea { display: block; font-weight: 400; }
/* 🎙 Estudio */
.proyectos-estudio .item { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; }
.proyectos-estudio .mini-portada { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.proyectos-estudio .mini-portada.vacia { display: grid; place-items: center; background: var(--panel-2); font-size: 22px; }
.proyectos-estudio .nom { flex: 1; min-width: 200px; }
.proyectos-estudio .nom .nota { display: block; font-weight: 400; }
.pasos-estudio { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 12px; }
.pasos-estudio button { font: inherit; font-size: 14px; border: 1px solid var(--borde); background: var(--panel); color: var(--suave);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.pasos-estudio button b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--panel-2);
  font-size: 12px; margin-right: 4px; }
.pasos-estudio button.activo { background: var(--acento-relleno); color: var(--sobre-acento); border-color: var(--acento-relleno); }
.pasos-estudio button.activo b { background: rgba(255,255,255,.25); }
.paso-estudio h2 { margin-top: 6px; }
.audios-estudio .item { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.audios-estudio audio { height: 34px; max-width: 320px; flex: 1; }
.elegir-audio { margin-top: 10px; }
.barra-lectura { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: var(--fondo); padding: 8px 0; margin-bottom: 6px; border-bottom: 1px solid var(--borde); }
.barra-lectura audio { height: 32px; max-width: 260px; }
.cap-estudio { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.cap-estudio .num { width: 26px; text-align: center; color: var(--suave); }
.cap-estudio textarea { width: 100%; margin: 8px 0 6px; font-size: 14.5px; line-height: 1.55; resize: vertical; }
.portada-estudio { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; }
.marco-portada { width: 180px; aspect-ratio: 1; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center;
  overflow: hidden; color: var(--suave); font-size: 13px; }
.marco-portada img { width: 100%; height: 100%; object-fit: cover; }
.prompt-portada { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; margin-top: 10px; }
.revision-portada { margin-top: 10px; font-size: 13.5px; }
.borrador-aviso { font-size: 12.5px; color: var(--suave); margin: 4px 0 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.estado-guardado { color: var(--ok); }
.revision-portada summary { cursor: pointer; font-weight: 600; }
.revision-portada ul { margin: 6px 0; padding-left: 20px; line-height: 1.6; }
.prompt-portada p { margin: 2px 0 6px; }
.prompt-portada textarea { width: 100%; font-size: 12.5px; margin-bottom: 6px; }
.voces-estudio { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px;
  max-height: 360px; overflow: auto; }
.voz-estudio { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.voz-estudio.elegida { outline: 2px solid var(--acento); }
.voz-estudio .nota { margin: 0 0 4px; font-size: 12px; }
.ajustes-voz { display: grid; gap: 10px; }
.diagnostico-voz { margin: 10px 0 4px; font-size: 14px; }
.paso-estudio > .interruptor { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; font-size: 14px; }
.diagnostico-voz summary { cursor: pointer; font-weight: 600; }
.diagnostico-voz ol { margin: 8px 0; padding-left: 22px; line-height: 1.55; }
.muestras-voz { display: grid; gap: 10px; margin-top: 12px; }
.muestra-voz { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.muestra-voz .nota { display: block; margin: 2px 0 0; }
.muestra-voz audio { width: 100%; max-width: 460px; height: 34px; }
.muestra-voz.actual { outline: 2px solid var(--acento); }
.ajustes-voz input[type=range] { width: 220px; }
.caps-generar .item { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.caps-generar .nom { flex: 1; min-width: 200px; }
.caps-generar audio { height: 34px; max-width: 300px; }
.chequeo-estudio { list-style: none; padding: 0; margin: 0 0 12px; line-height: 1.9; }
.aviso-borrador { border: 1px solid var(--acento); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; background: var(--panel);
  display: grid; gap: 10px; }
.aviso-borrador .nota { margin-left: 8px; }
.pasos-borrador { gap: 6px; flex-wrap: wrap; }
.publicar-al-terminar { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.publicar-al-terminar .interruptor { font-weight: 400; }
.borradores-estudio .item { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.borradores-estudio .mini-portada { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.borradores-estudio .nom { flex: 1; }
#ep-audio { width: 100%; max-width: 620px; margin: 4px 0 10px; }
.texto-revision { max-height: 46vh; overflow: auto; border: 1px solid var(--borde); border-radius: 12px; padding: 4px 14px; background: var(--panel); }
.trozo-rev { border-bottom: 1px dashed var(--borde); padding: 8px 0; }
.trozo-rev:last-child { border-bottom: 0; }
.trozo-cab { gap: 8px; align-items: center; flex-wrap: wrap; }
.trozo-rev p { margin: 6px 0 0; line-height: 1.7; font-size: 15px; }
.frase-rev { cursor: pointer; border-radius: 4px; }
.frase-rev:hover { background: var(--panel-2); }
.frase-rev.actual { background: var(--acento-relleno, var(--acento)); color: var(--sobre-acento, #fff); }
.chequeo-estudio .ok { color: var(--ok); }
.chequeo-estudio .aviso { color: var(--aviso-texto, var(--aviso)); }
.chequeo-estudio .falta { color: var(--error-texto, var(--error)); }
@media (max-width: 600px) { .portada-estudio { grid-template-columns: 1fr; } }
.rejilla-portadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 14px; max-height: 52vh; overflow: auto; }
.opcion-portada { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; border-radius: 10px; padding: 4px; }
.opcion-portada img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.15); background: var(--borde); }
.opcion-portada span { font-size: 11px; color: var(--suave); text-align: center; }
.opcion-portada:hover, .opcion-portada:focus-visible { outline: 2px solid var(--acento, #1f4d3a); }
.cambiar-portada.ocupado { opacity: .55; pointer-events: none; }
.portada-ia { margin-top: 14px; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.portada-ia > summary { cursor: pointer; font-weight: 700; color: var(--acento); }
.portada-ia[open] > summary { margin-bottom: 8px; }
.pistas-pc summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.pistas-pc ol { max-height: 240px; overflow: auto; margin: 8px 0 0; padding-left: 28px; font-size: 13px; }
.tramo-fuente .nota { margin: 0; font-weight: 400; }
.tramo-fuente .fila { flex-wrap: wrap; gap: 8px; }
.tramo-fuente audio { width: 100%; max-width: 420px; height: 36px; }
.trabajos-fuente .item { align-items: flex-start; }
.trabajos-fuente .mini-progreso { max-width: 360px; }
.trabajos-fuente .item.por-mejorar { background: var(--acento-fondo); border-radius: 10px; }

/* ✂️ Recortar audio */
.modal.modal-recortes { max-width: 980px; }
.rc-onda { border-radius: 12px; background: rgba(127, 127, 127, .08); padding: 6px; cursor: crosshair; touch-action: none; }
.rc-onda canvas { width: 100%; height: 130px; display: block; }
.rc-eje { display: flex; justify-content: space-between; font-size: 12px; color: var(--tenue); margin: 4px 2px 10px; font-variant-numeric: tabular-nums; }
.rc-seleccion { gap: 8px; }
.rc-seleccion .rc-t { width: 92px; text-align: center; }
.rc-h { font-size: 14px; margin: 18px 0 6px; }
.recortes .lista .item { padding: 6px 10px; }

/* Categoría virtual «Novedades» (la añadió multiusuario): en cobre para que destaque bajo «Todas» */
.cat-item.novedades { color: var(--acento-2); font-weight: 600; }
.cat-item.novedades .ico .ic { color: var(--acento); }
.cat-item.novedades .n { background: var(--acento-fondo); color: var(--acento-2); }
.cat-item.novedades.activo .n { background: var(--acento-relleno); color: var(--sobre-acento); }

/* Reproductor en el teléfono y dictado */
.mic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mic .ic { width: 17px; height: 17px; }
.mic.compacto .ic { width: 19px; height: 19px; }
.mic.grabando .ic { fill: currentColor; }
.pantalla .extras .btn[data-accion="velocidad"] span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 760px) {
  .tutor-rapidos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .tutor-rapidos::-webkit-scrollbar { display: none; }
  .tutor-rapidos .chip { flex-shrink: 0; }
  .pantalla .extras .btn[data-accion="extracto"] { background: color-mix(in srgb, var(--c-rosa) 14%, transparent); }
}

/* ===== Pestañas de una vista (Descargas) y ajustes plegados ===== */
.pestanas-vista { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 18px 0 22px; overflow-x: auto; scrollbar-width: none; }
.pestanas-vista::-webkit-scrollbar { display: none; }
.pestanas-vista button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--suave); font-weight: 600;
  padding: 11px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas-vista button .ic { width: 18px; height: 18px; }
.pestanas-vista button:hover { color: var(--texto); }
.pestanas-vista button.activa { color: var(--texto); border-bottom-color: var(--acento); }
.pestanas-vista button.activa .ic { color: var(--acento); }
.pestanas-vista .n:not(:empty) { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--acento-relleno); color: var(--sobre-acento); }
.ajustes-plegados { margin-top: 28px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 0 16px; }
.ajustes-plegados > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 13px 0; font-weight: 600; color: var(--suave); list-style: none; }
.ajustes-plegados > summary::-webkit-details-marker { display: none; }
.ajustes-plegados > summary::after { content: '›'; margin-left: auto; font-size: 20px; transition: transform .2s; }
.ajustes-plegados[open] > summary::after { transform: rotate(90deg); }
.ajustes-plegados[open] { padding-bottom: 16px; }
.ajustes-plegados > summary .ic { width: 18px; height: 18px; }
.paso-fuente { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.paso-fuente + .fila + .paso-fuente, .fila + .paso-fuente { margin-top: 18px; }
.paso-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--acento-relleno); color: var(--sobre-acento); }
.caja-fuente { padding: 18px 20px; }
.actual-descarga { box-shadow: var(--sombra-1); }
.actual-descarga .btn .ic, .barra-catalogo .btn .ic, #desc-cuerpo .btn .ic, #proc-cuerpo .btn .ic { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .pestanas-vista button { padding: 10px 10px; font-size: 14px; }
  .pestanas-vista:has(> button:nth-child(4)) { gap: 0; }
  .pestanas-vista:has(> button:nth-child(4)) button { padding: 10px 6px; font-size: 13.5px; }
  .pestanas-vista:has(> button:nth-child(4)) button .ic { display: none; }
  .fila-pc .btn { flex: 1; justify-content: center; }
}
.ver-mas { margin: 12px 4px 0; }

/* ===== Inteligencia artificial ===== */
.franja-cifras.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.franja-cifras.seis .cifra:nth-child(3n + 1) { border-left: 0; }
.franja-cifras.seis .cifra:nth-child(n + 4) { border-top: 1px solid var(--borde); }
.franja-cifras .cifra b { overflow-wrap: anywhere; }
.tabla-envuelta { overflow-x: auto; border-radius: var(--radio); }
.tarjeta-ia { box-shadow: var(--sombra-1); }
.tarjeta-ia .cab b { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.etiqueta.en-uso { background: var(--acento-relleno); color: var(--sobre-acento); }
.enlace-externo { display: inline-flex; align-items: center; gap: 3px; color: var(--acento-2); }
.enlace-externo .ic { width: 14px; height: 14px; }
.ajustes-plegados .rejilla-ia { margin-top: 6px; }
@media (max-width: 760px) {
  .franja-cifras.seis { grid-template-columns: 1fr 1fr; }
  .franja-cifras.seis .cifra { border-left: 1px solid var(--borde); border-top: 1px solid var(--borde); }
  .franja-cifras.seis .cifra:nth-child(odd) { border-left: 0; }
  .franja-cifras.seis .cifra:nth-child(-n + 2) { border-top: 0; }
  .rejilla-ia { grid-template-columns: 1fr; }
}

/* Portada: la imagen sin letras + el título que pone la app */
.poner-titulo { margin-top: 12px; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; background: var(--panel); }
.poner-titulo h4 { margin: 0 0 10px; }
.tp-rejilla { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 16px; align-items: start; }
.tp-previa { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--borde); }
.tp-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-previa .nota { position: absolute; inset: auto 0 8px; text-align: center; }
.tp-ajustes { display: grid; gap: 10px; }
.tp-ajustes label { display: grid; gap: 4px; }
.tp-zona { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tp-zona .chip-radio { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px; cursor: pointer; }
.frase-copiable { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.frase-copiable code { white-space: normal; font-size: 12.5px; }
@media (max-width: 640px) { .tp-rejilla { grid-template-columns: 1fr; } }
.punto-color { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--borde); }
.tp-zona input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--borde); border-radius: 8px; background: none; cursor: pointer; }