/* =====================================================================
   OtakuRecs · estilos
   ===================================================================== */

/* Estilo «Cel»: la viñeta animada. Cielo, contornos gruesos, esquinas redondeadas,
   sombras duras de dibujo animado, botones amarillos y toques rosas.
   Tres temas: claro (C1 Cielo de verano), intermedio (I1 Tarde nublada) y oscuro (O1 Noche estrellada).
   Sin elegir, sigue el modo del móvil.
   --superficie es el fondo de las tarjetas, --borde el contorno y --sombra la sombra dura. */
:root {
  --fondo: #CFE6F7;
  --superficie: #FFFFFF;
  --superficie-2: #FFFFFF;
  --borde: #1D2B53;
  --linea: #A9C6DE;
  --texto: #1D2B53;
  --texto-2: #34436B;
  --apagado: #4F5D80;
  /* Amarillo: botones principales y lo que está elegido (con texto en el color del contorno) */
  --acento: #FFD23F;
  --sobre-acento: #1D2B53;
  /* Rosa: barras de progreso, avisos y detalles; --rosa-texto es la versión que se lee como texto */
  --rosa: #FF8FAB;
  --rosa-texto: #C2185B;
  --sobre-rosa: #1D2B53;
  --sombra: #1D2B53;
  /* Contadores de la campana: rojo para los avisos de tu cuenta, morado para las novedades */
  --rojo-aviso: #D92D20;
  --sobre-rojo: #FFFFFF;
  --morado: #7C3AED;
  --sobre-morado: #FFFFFF;
  --nota: #FFD23F;
  /* La nota se marca como con rotulador: texto en el color del contorno con el amarillo debajo */
  --nota-texto: var(--texto);
  --nota-marca: inset 0 -0.42em 0 var(--nota);
  --ok: #1E7A44;
  --error: #C62828;
  --mensaje-error: #FDE4E8;
  --mensaje-ok: #DDF3E5;
  /* Nubes del fondo */
  --cielo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='340'%3E%3Cg fill='%23fff' fill-opacity='.6'%3E%3Ccircle cx='62' cy='72' r='20'/%3E%3Ccircle cx='90' cy='60' r='28'/%3E%3Ccircle cx='120' cy='74' r='18'/%3E%3Crect x='42' y='72' width='96' height='20' rx='10'/%3E%3Ccircle cx='300' cy='232' r='14'/%3E%3Ccircle cx='320' cy='222' r='20'/%3E%3Ccircle cx='342' cy='234' r='13'/%3E%3Crect x='286' y='232' width='70' height='15' rx='7.5'/%3E%3C/g%3E%3C/svg%3E");
  --grosor: 2px;
  --radio: 14px;
  --radio-control: 12px;
  --fuente-titulo: 'M PLUS Rounded 1c', system-ui, sans-serif;
  --fuente: 'M PLUS Rounded 1c', system-ui, sans-serif;
  color-scheme: light;
}

:root[data-tema="intermedio"] {
  --fondo: #8FB3D1;
  --superficie: #E4EEF7;
  --superficie-2: #E4EEF7;
  --borde: #15203D;
  --linea: #6F93B2;
  --texto: #15203D;
  --texto-2: #22305A;
  --apagado: #2E3D63;
  --acento: #FFD23F;
  --sobre-acento: #15203D;
  --rosa: #FF8FAB;
  --rosa-texto: #8E1240;
  --sobre-rosa: #15203D;
  --sombra: #15203D;
  --nota: #FFD23F;
  --ok: #14532D;
  --error: #8E1515;
  --mensaje-error: #F3D3DA;
  --mensaje-ok: #CDE6D6;
  --cielo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='340'%3E%3Cg fill='%23E4EEF7' fill-opacity='.35'%3E%3Ccircle cx='62' cy='72' r='20'/%3E%3Ccircle cx='90' cy='60' r='28'/%3E%3Ccircle cx='120' cy='74' r='18'/%3E%3Crect x='42' y='72' width='96' height='20' rx='10'/%3E%3Ccircle cx='300' cy='232' r='14'/%3E%3Ccircle cx='320' cy='222' r='20'/%3E%3Ccircle cx='342' cy='234' r='13'/%3E%3Crect x='286' y='232' width='70' height='15' rx='7.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Oscuro: el dibujo animado de noche. Contorno claro, sombra dura rosa y estrellas en el fondo */
:root[data-tema="oscuro"] {
  --fondo: #121A33;
  --superficie: #1E2A4D;
  --superficie-2: #1E2A4D;
  --borde: #EAF2FF;
  --linea: #33416A;
  --texto: #EAF2FF;
  --texto-2: #C6D2EA;
  --apagado: #9DABC9;
  --acento: #FFD23F;
  --sobre-acento: #121A33;
  --rosa: #FF8FAB;
  --rosa-texto: #FF8FAB;
  --sobre-rosa: #121A33;
  --sombra: #FF8FAB;
  --rojo-aviso: #FF6B6B;
  --sobre-rojo: #121A33;
  --morado: #B79CFF;
  --sobre-morado: #121A33;
  --nota: #FFD23F;
  --nota-texto: var(--nota);
  --nota-marca: none;
  --ok: #8FD9A8;
  --error: #FF8A80;
  --mensaje-error: #3A1F2E;
  --mensaje-ok: #1C3326;
  --cielo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='340'%3E%3Cg fill='%23EAF2FF' fill-opacity='.5'%3E%3Ccircle cx='40' cy='50' r='1.6'/%3E%3Ccircle cx='150' cy='110' r='1.2'/%3E%3Ccircle cx='260' cy='40' r='2'/%3E%3Ccircle cx='370' cy='150' r='1.4'/%3E%3Ccircle cx='90' cy='250' r='1.8'/%3E%3Ccircle cx='210' cy='300' r='1.2'/%3E%3Ccircle cx='330' cy='280' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --fondo: #121A33;
    --superficie: #1E2A4D;
    --superficie-2: #1E2A4D;
    --borde: #EAF2FF;
    --linea: #33416A;
    --texto: #EAF2FF;
    --texto-2: #C6D2EA;
    --apagado: #9DABC9;
    --acento: #FFD23F;
    --sobre-acento: #121A33;
    --rosa: #FF8FAB;
    --rosa-texto: #FF8FAB;
    --sobre-rosa: #121A33;
    --sombra: #FF8FAB;
    --rojo-aviso: #FF6B6B;
    --sobre-rojo: #121A33;
    --morado: #B79CFF;
    --sobre-morado: #121A33;
    --nota: #FFD23F;
    --nota-texto: var(--nota);
    --nota-marca: none;
    --ok: #8FD9A8;
    --error: #FF8A80;
    --mensaje-error: #3A1F2E;
    --mensaje-ok: #1C3326;
    --cielo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='340'%3E%3Cg fill='%23EAF2FF' fill-opacity='.5'%3E%3Ccircle cx='40' cy='50' r='1.6'/%3E%3Ccircle cx='150' cy='110' r='1.2'/%3E%3Ccircle cx='260' cy='40' r='2'/%3E%3Ccircle cx='370' cy='150' r='1.4'/%3E%3Ccircle cx='90' cy='250' r='1.8'/%3E%3Ccircle cx='210' cy='300' r='1.2'/%3E%3Ccircle cx='330' cy='280' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { background: var(--fondo); }

body {
  margin: 0;
  background: var(--fondo) var(--cielo);
  background-size: 420px 340px;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--texto); }
a:hover { color: var(--rosa-texto); }

img { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

[hidden] { display: none !important; }

/* ---------- Estructura ---------- */

.contenedor {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px 110px;
}

/* La cabecera la pinta comun.js un instante después: se le guarda el sitio para que no empuje la página */
#cabecera { min-height: 76px; }
.cabecera {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}

.logo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.5px;
  text-decoration: none;
  text-transform: lowercase;
}
.logo span {
  background: var(--acento); color: var(--sobre-acento); padding: 0 6px; margin-left: 3px;
  border: var(--grosor) solid var(--borde); border-radius: 9px;
}
.logo:hover { color: var(--texto); }

.cabecera-acciones { display: flex; align-items: center; gap: 10px; position: relative; }

.boton-redondo {
  width: 44px; height: 44px; border-radius: 50%;
  border: var(--grosor) solid var(--borde); background: var(--superficie); color: var(--texto);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; position: relative;
  box-shadow: 2px 2px 0 var(--sombra);
}

.contador {
  position: absolute; top: -9px; right: -9px;
  min-width: 20px; height: 20px; padding: 0 4px;
  background: var(--rojo-aviso); color: var(--sobre-rojo); border: var(--grosor) solid var(--borde); border-radius: 999px;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* El de las novedades (episodios y capítulos nuevos), arriba a la izquierda y en morado */
.contador.novedades { right: auto; left: -9px; background: var(--morado); color: var(--sobre-morado); }

/* Las iniciales van siempre en tinta oscura: los colores de avatar son claros en los tres temas */
.avatar {
  width: 44px; height: 44px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #1D2B53;
  flex-shrink: 0; border: var(--grosor) solid var(--borde); padding: 0; cursor: pointer; overflow: hidden; text-decoration: none;
}
/* La foto (cuadrada, como las de Google) se recorta por el centro para llenar el círculo */
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; }
.avatar.mini { width: 34px; height: 34px; font-size: 14px; cursor: default; }


/* Barra de navegación inferior */
.nav {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10;
  max-width: 520px; height: 66px; margin: 0 auto; padding: 5px;
  background: var(--superficie-2); border: var(--grosor) solid var(--borde); border-radius: 999px;
  box-shadow: 4px 4px 0 var(--sombra);
}
.nav-dentro {
  height: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--texto); text-decoration: none; font-size: 11px; font-weight: 800;
  border-radius: 999px; border: var(--grosor) solid transparent;
}
.nav a[aria-current="page"] { color: var(--sobre-acento); background: var(--acento); border-color: var(--borde); }

/* ---------- Tipografía ---------- */

h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 800; margin: 0; }
.titulo-pagina { font-weight: 800; font-size: 32px; line-height: 1.1; padding: 10px 0 16px; }
/* Título de página con un botón a la derecha (p. ej. «Añadir amigo») */
.cabecera-pagina { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.boton-redondo.principal { background: var(--acento); color: var(--sobre-acento); }
.boton-redondo.principal:hover { background: var(--acento); color: var(--sobre-acento); filter: brightness(1.05); }
.titulo-seccion {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 28px 0 12px;
}
.titulo-seccion h2 { font-weight: 800; font-size: 21px; }
.titulo-seccion a { font-size: 13px; font-weight: 800; color: var(--texto); text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.etiqueta-seccion { margin: 24px 0 10px; font-family: var(--fuente-titulo); font-size: 17px; font-weight: 800; color: var(--texto); }
.apagado { color: var(--apagado); }
.pequeno { font-size: 12px; }

/* ---------- Controles ---------- */

.boton {
  height: 48px; padding: 0 18px; border-radius: var(--radio-control);
  border: var(--grosor) solid var(--borde); background: var(--acento); color: var(--sobre-acento);
  font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 3px 3px 0 var(--sombra);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.boton:hover { color: var(--sobre-acento); filter: brightness(1.05); }
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton.secundario { background: var(--superficie); color: var(--texto); }
.boton.secundario:hover { color: var(--texto); background: color-mix(in srgb, var(--acento) 25%, var(--superficie)); filter: none; }
.boton.peligro { background: var(--superficie); color: var(--error); border-color: var(--error); box-shadow: 3px 3px 0 var(--error); }
.boton.ancho { width: 100%; }
.boton.pequeno-b { height: 40px; padding: 0 14px; font-size: 13px; }

.boton-icono {
  width: 44px; height: 44px; border-radius: var(--radio-control); flex-shrink: 0;
  border: var(--grosor) solid var(--borde); background: var(--acento); color: var(--sobre-acento);
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 15px; box-shadow: 2px 2px 0 var(--sombra);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.boton-icono.contorno { background: var(--superficie); color: var(--texto); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  border: var(--grosor) solid var(--borde); background: var(--superficie); color: var(--texto);
  font-size: 13px; font-weight: 800; cursor: pointer; flex-shrink: 0;
}
.chip[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.chips.envolver { flex-wrap: wrap; overflow: visible; }
/* Fila de chips que se rellena con JavaScript (Mi lista): con su alto desde el principio */
.chips.reservada { min-height: 38px; }

/* Buscar: barra con formatos y botón de filtros, chips de filtros activos y hoja de filtros */
.barra-filtros { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.barra-filtros .chips { flex: 1; min-width: 0; }
/* Al tocar el número de capítulos se puede escribir (para no pulsar +1 cien veces) */
.numero-progreso {
  width: 100%; height: 48px; text-align: center; border-radius: var(--radio-control);
  border: var(--grosor) solid var(--borde); background: var(--superficie); color: var(--texto);
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 22px; -moz-appearance: textfield; appearance: textfield;
}
.numero-progreso::-webkit-inner-spin-button, .numero-progreso::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.numero-progreso:focus { outline: none; box-shadow: 3px 3px 0 var(--rosa); }
.boton-progreso { border: 0; background: none; padding: 4px 0; min-height: 32px; text-align: left; cursor: pointer; color: var(--apagado); font-size: 12px; font-weight: 500; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Al cambiar el progreso se repinta sin la animación de entrada (si no, la página «parpadea») */
.quieto .contenedor > *, .quieto .lista-filas > *, .quieto .ficha-cabeza, .quieto .medias, .quieto .portada img, .quieto .progreso div { animation: none; }
/* Botón flotante (Filtros en Buscar): abajo en el centro, por encima de la barra */
.boton-flotante {
  position: fixed; z-index: 11; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: calc(90px + env(safe-area-inset-bottom));
  height: 48px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: var(--grosor) solid var(--borde); background: var(--superficie); color: var(--texto);
  font-size: 15px; font-weight: 800; box-shadow: 3px 3px 0 var(--sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.boton-flotante:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sombra); }
.boton-filtros.activo { background: var(--acento); color: var(--sobre-acento); }
.boton-filtros.activo .num-filtros { background: var(--superficie); }
/* En Buscar, el aviso sale por encima del botón flotante */
body:has(.boton-flotante) .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
body:has(.boton-flotante) .contenedor { padding-bottom: 170px; }
.num-filtros {
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  background: var(--superficie); color: var(--texto); font-size: 11px; font-weight: 800; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chip-activo { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 12px; }
.chip-activo svg { color: var(--apagado); }
.chip-borrar { border-color: transparent; background: transparent; color: var(--texto); text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 3px; }
.filtro-grupo h3 { font-size: 13px; font-weight: 700; color: var(--texto); margin-bottom: 8px; font-family: inherit; }
.anios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.anios .campo { margin: 0; }
.hoja-pie {
  position: sticky; bottom: -28px; margin: 0 -20px -28px; padding: 12px 20px 20px;
  background: var(--superficie); border-top: var(--grosor) solid var(--borde); display: grid; gap: 8px;
}

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 13px; color: var(--texto); font-weight: 800; }
.entrada {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--radio-control);
  border: var(--grosor) solid var(--borde); background: var(--superficie); color: var(--texto);
  font-size: 15px; font-weight: 500; outline: none;
}
.entrada:focus { box-shadow: 3px 3px 0 var(--rosa); }
textarea.entrada { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; }
select.entrada { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA0AE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.ayuda { font-size: 12px; color: var(--apagado); }

.buscador {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
  border-radius: 999px; background: var(--superficie); color: var(--texto);
  border: var(--grosor) solid var(--borde); text-decoration: none;
  box-shadow: 4px 4px 0 var(--sombra);
}
.buscador input { flex: 1; border: 0; background: transparent; color: var(--texto); font-size: 16px; font-weight: 800; outline: none; min-width: 0; }

.mensaje { padding: 12px 14px; border: var(--grosor) solid var(--borde); border-radius: var(--radio-control); font-size: 14px; margin-bottom: 14px; }
.mensaje.error { background: var(--mensaje-error); color: var(--texto); border-color: var(--error); }
.mensaje.ok { background: var(--mensaje-ok); color: var(--texto); border-color: var(--ok); }
.mensaje.info { background: var(--superficie); color: var(--texto-2); }

/* ---------- Tarjetas (celdas con contorno y sombra dura) ---------- */

.tarjeta { padding: 14px; border-radius: var(--radio); background: var(--superficie); border: var(--grosor) solid var(--borde); box-shadow: 4px 4px 0 var(--sombra); }

.fila { display: flex; align-items: center; gap: 12px; }
.fila-texto { flex: 1; min-width: 0; }
.fila-titulo { font-weight: 800; font-size: 15px; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-filas { display: flex; flex-direction: column; gap: 12px; }

/* Sin imagen, la portada es el color de la obra */
.portada {
  border-radius: 10px; background-color: var(--rosa); overflow: hidden; flex-shrink: 0;
  position: relative; border: var(--grosor) solid var(--borde);
}
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada.p-s { width: 56px; height: 80px; }
.portada.p-m { width: 64px; height: 90px; }
.portada.p-l { width: 112px; height: 160px; }

.formato {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  background: var(--texto); color: var(--superficie); font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase;
}
.portada .formato { position: absolute; top: 4px; left: 4px; }

/* La nota: en tinta con el amarillo debajo (en el tema oscuro, en amarillo) */
.estrella { color: var(--nota-texto); font-weight: 800; box-shadow: var(--nota-marca); padding: 0 2px; width: fit-content; }

.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carta { display: flex; flex-direction: column; gap: 6px; text-decoration: none; min-width: 0; }
.carta .portada { width: 100%; aspect-ratio: 5 / 7; }
.carta-titulo { font-size: 13px; font-weight: 800; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.progreso { height: 10px; border: var(--grosor) solid var(--borde); border-radius: 999px; background: var(--superficie); overflow: hidden; }
.progreso div { height: 100%; background: var(--rosa); }

.vacio { padding: 28px 16px; text-align: center; color: var(--texto-2); border-radius: var(--radio); background: var(--superficie); border: var(--grosor) dashed var(--borde); }
.vacio strong { display: block; color: var(--texto); margin-bottom: 4px; font-family: var(--fuente-titulo); font-weight: 800; font-size: 17px; }

.cargando { padding: 24px 0; text-align: center; color: var(--apagado); font-size: 14px; }

/* Pestañas tipo interruptor */
.segmentos {
  border: var(--grosor) solid var(--borde); border-radius: 999px; background: var(--superficie); padding: 3px; gap: 3px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; box-shadow: 3px 3px 0 var(--sombra);
}
.segmentos button { height: 40px; border: var(--grosor) solid transparent; border-radius: 999px; background: transparent; color: var(--texto); font-size: 14px; font-weight: 800; cursor: pointer; }
.segmentos button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--borde); }

/* ---------- Ficha ---------- */

.ficha-fondo { height: 180px; background: var(--superficie); background-size: cover; background-position: center; position: relative; border-bottom: var(--grosor) solid var(--borde); }
.ficha-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--fondo) 85%, transparent)); }
.ficha-volver { position: absolute; top: 16px; left: 16px; z-index: 2; }
.ficha-cabeza { display: flex; gap: 16px; margin-top: -72px; position: relative; z-index: 3; }
.ficha-datos { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding-bottom: 4px; min-width: 0; }
.ficha-datos h1 { font-weight: 800; font-size: 26px; line-height: 1.15; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta { padding: 2px 9px; border: 1.5px solid var(--borde); border-radius: 999px; background: var(--superficie); font-size: 11px; font-weight: 800; color: var(--texto); }
.etiqueta.fuerte { background: var(--texto); color: var(--superficie); letter-spacing: 0.4px; text-transform: uppercase; }
.medias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.media-valor { font-family: var(--fuente-titulo); font-weight: 800; font-size: 26px; color: var(--nota-texto); box-shadow: var(--nota-marca); width: fit-content; padding: 0 3px; }
.media-valor.acento { color: var(--rosa-texto); box-shadow: none; }
.sinopsis { font-size: 14px; line-height: 1.6; color: var(--texto-2); margin: 16px 0 0; white-space: pre-line; }
.sinopsis.recortada { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.boton-texto { border: 0; background: none; color: var(--texto); padding: 6px 0; cursor: pointer; font-size: 13px; font-weight: 800; text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* «Ver más» / «Ver menos» debajo de una lista que se despliega */
.ver-mas { display: block; width: 100%; min-height: 44px; margin-top: 4px; text-align: center; font-size: 14px; }

/* ---------- Ventana emergente ---------- */

.capa {
  position: fixed; inset: 0; z-index: 50; background: rgba(13, 20, 40, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.capa.centrada { align-items: center; padding: 16px; }
.capa.centrada .hoja { border: var(--grosor) solid var(--borde); border-radius: 24px; box-shadow: 6px 6px 0 var(--sombra); max-height: 86vh; animation: escalar-hoja 0.2s ease-out; }
.capa.centrada .hoja-asa { display: none; }
.hoja {
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  padding: 12px 20px 28px; border-radius: 24px 24px 0 0; background: var(--superficie);
  border: var(--grosor) solid var(--borde); border-bottom: 0;
  display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 560px) { .capa { align-items: center; } .hoja { border: var(--grosor) solid var(--borde); border-radius: 24px; box-shadow: 6px 6px 0 var(--sombra); } }
/* El asa: una rayita, pero la zona para arrastrar es toda la franja de arriba de la hoja */
.hoja-asa {
  align-self: stretch; position: relative; flex-shrink: 0;
  height: 30px; margin: -12px -20px -8px; touch-action: none; cursor: grab;
}
.hoja-asa::before {
  content: ""; position: absolute; left: 50%; top: 12px; width: 44px; height: 5px; margin-left: -22px;
  border-radius: 999px; background: var(--borde);
}
.hoja-asa:active { cursor: grabbing; }
.hoja h2 { font-size: 22px; font-weight: 800; }
.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion {
  height: 48px; padding: 0 14px; border-radius: var(--radio-control); border: var(--grosor) solid var(--borde);
  background: var(--superficie); text-align: left; cursor: pointer; font-size: 15px; font-weight: 500;
}
.opcion[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: 800; box-shadow: 3px 3px 0 var(--sombra); }

.casilla {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px;
  border-radius: var(--radio-control); border: var(--grosor) solid var(--borde); cursor: pointer; font-size: 14px;
}
.casilla:has(input:checked) { box-shadow: 3px 3px 0 var(--sombra); background: color-mix(in srgb, var(--acento) 25%, transparent); }
.casilla input { width: 20px; height: 20px; accent-color: var(--rosa-texto); flex-shrink: 0; }

/* Sección en recuadro: el título va en una pastilla montada sobre el borde de arriba, a la izquierda,
   y el enlace (Ver más, Mi lista…) en una pastilla amarilla a la derecha. Dentro, las filas sin sombra. */
.panel {
  position: relative; margin-top: 40px; padding: 30px 12px 12px;
  background: var(--superficie); border: var(--grosor) solid var(--borde); border-radius: var(--radio); box-shadow: 4px 4px 0 var(--sombra);
}
.panel > .titulo-seccion {
  position: absolute; top: 0; left: 14px; right: 14px; transform: translateY(-50%); margin: 0;
  align-items: center; gap: 10px; pointer-events: none;
}
.panel > .titulo-seccion > * { pointer-events: auto; }
.panel > .titulo-seccion h2, .panel > .etiqueta-seccion {
  background: var(--superficie); border: var(--grosor) solid var(--borde); border-radius: 999px;
  padding: 3px 14px; font-size: 17px; line-height: 1.3; margin: 0; color: var(--texto);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel > .etiqueta-seccion { position: absolute; top: 0; left: 14px; max-width: calc(100% - 28px); transform: translateY(-50%); }
.panel > .titulo-seccion a, .panel > .titulo-seccion > span {
  flex-shrink: 0; background: var(--acento); color: var(--sobre-acento); border: var(--grosor) solid var(--borde); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 800; text-decoration: none;
}
.panel > .titulo-seccion > span.apagado { background: var(--superficie); color: var(--apagado); }
.panel .tarjeta { box-shadow: none; background: var(--fondo); border-width: 1.5px; }
.panel a.tarjeta:hover { box-shadow: none; transform: none; }
.panel .vacio { background: var(--fondo); }
.panel .lista-filas { gap: 8px; }
.panel .segmentos { box-shadow: none; }

/* Mi lista: cada lista es una tarjeta (con hasta tres portadas montadas); al final, «Nueva lista» */
.titulo-mi-lista { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.titulo-mi-lista .boton-redondo { flex-shrink: 0; }
.titulo-lista-abierta { flex: 1; min-width: 0; font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-lista { width: 100%; padding: 12px; text-align: left; cursor: pointer; color: var(--texto); font: inherit; }
.portadas-lista { display: flex; flex-shrink: 0; width: 92px; }
.portadas-lista .portada + .portada { margin-left: -38px; }
.portadas-lista .portada:nth-child(2) { transform: translateY(3px); }
.portadas-lista .portada:nth-child(3) { transform: translateY(6px); }
.portada-vacia { display: flex; align-items: center; justify-content: center; background: var(--fondo); color: var(--apagado); }
.flecha-lista { color: var(--apagado); flex-shrink: 0; }
.flecha-lista svg { transform: rotate(180deg); }
.nueva-lista-tarjeta { border-style: dashed; box-shadow: none; }
.nueva-lista-tarjeta .portada-vacia { border-style: dashed; }
.lista-propia { display: flex; align-items: flex-start; gap: 12px; }
.lista-propia .fila-texto { display: flex; flex-direction: column; gap: 4px; }
.lista-propia-personas { display: flex; flex-shrink: 0; }
.lista-propia-personas .avatar + .avatar { margin-left: -8px; }
.lista-propia-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lista-propia-botones .boton { flex: 1; }
.estado-en-lista { font-weight: 800; color: var(--rosa-texto); }
.fila-acciones { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.quitar-de-lista { width: 36px; height: 36px; box-shadow: none; }
.opcion-lista { display: flex; align-items: center; gap: 10px; height: auto; min-height: 56px; padding: 8px 14px; }
.opcion-lista svg { transform: rotate(180deg); flex-shrink: 0; }

/* Crear una lista nueva dentro de la ventana de «Añadir a una lista» */
.nueva-lista { display: flex; gap: 8px; }
.nueva-lista .entrada { flex: 1; min-width: 0; }

/* «Vista con…» en la ficha de algo terminado */
.visto-con {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1.5px dashed var(--linea); border-radius: var(--radio-control);
}
.visto-con-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.visto-con-texto { flex: 1; }
.visto-con-personas { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.visto-con-amigo {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 34px; padding: 0 10px 0 3px;
  border: var(--grosor) solid var(--borde); border-radius: 999px; background: var(--superficie);
  color: var(--texto); font-size: 13px; font-weight: 800; text-decoration: none;
}
.visto-con-amigo .avatar.mini { width: 26px; height: 26px; font-size: 12px; border-width: 1.5px; cursor: pointer; }
/* Si no caben los nombres: solo las fotos, un poco montadas una sobre otra */
.visto-con-personas.solo-fotos { gap: 0; }
.visto-con-personas.solo-fotos .visto-con-amigo { padding: 0; border: 0; background: none; height: auto; }
.visto-con-personas.solo-fotos .visto-con-amigo + .visto-con-amigo { margin-left: -8px; }
.visto-con-personas.solo-fotos .avatar.mini { width: 34px; height: 34px; font-size: 14px; border-width: var(--grosor); }
.visto-con-personas.solo-fotos .visto-con-nombre { display: none; }
/* «Guardado» de tu nota, arriba a la derecha del recuadro */
.estado-nota { position: absolute; top: 8px; right: 14px; }
#anadir-visto-con { flex-shrink: 0; }
/* Buscador de la lista de elegir amigos */
.buscador-amigos { height: 46px; box-shadow: none; }
.buscador-amigos input { font-weight: 500; font-size: 15px; }

/* Dónde verla: grupos de plataformas con su logo */
.plataformas-grupo { display: flex; flex-direction: column; gap: 6px; }
.plataformas-grupo + .plataformas-grupo { margin-top: 12px; }
.chip.plataforma { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding-left: 5px; }
.chip.plataforma img { width: 22px; height: 22px; border-radius: 6px; }
/* Idioma del enlace (si no es en español) */
.chip-idioma { font-weight: 500; color: var(--apagado); }

/* Sin enlace directo a la serie: solo informa */
.chip.plataforma.sin-enlace { cursor: default; border-style: dashed; }

/* Un ajuste con interruptor a la derecha (p. ej. contenido para adultos) */
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; cursor: pointer; }
.ajuste-texto { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.interruptor {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; cursor: pointer; position: relative;
  width: 54px; height: 32px; border-radius: 999px; border: var(--grosor) solid var(--borde); background: var(--linea);
  transition: background-color 0.2s;
}
.interruptor::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--superficie); border: var(--grosor) solid var(--borde); box-sizing: border-box; transition: transform 0.2s ease;
}
.interruptor:checked { background: var(--acento); }
.interruptor:checked::after { transform: translateX(22px); }
.interruptor:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }

/* Tarjetas para elegir una opción (privacidad del perfil): el radio va oculto */
.elegir { display: grid; gap: 10px; }
.elegir-opcion {
  display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 72px;
  border-radius: var(--radio); border: var(--grosor) solid var(--borde); background: var(--superficie); cursor: pointer;
  transition: box-shadow 0.2s, background-color 0.2s;
}
.elegir-opcion:has(input:checked) { box-shadow: 4px 4px 0 var(--sombra); background: color-mix(in srgb, var(--acento) 25%, var(--superficie)); }
.elegir-opcion:has(input:focus-visible) { outline: 3px solid var(--rosa); outline-offset: 2px; }
.elegir-icono {
  width: 42px; height: 42px; border-radius: 21px; flex-shrink: 0; border: var(--grosor) solid var(--borde);
  display: flex; align-items: center; justify-content: center; background: var(--fondo); color: var(--texto);
}
.elegir-opcion:has(input:checked) .elegir-icono { background: var(--acento); color: var(--sobre-acento); }
.elegir-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--texto-2); }
.elegir-texto strong { font-size: 15px; color: var(--texto); font-weight: 800; }
.elegir-marca {
  width: 24px; height: 24px; flex-shrink: 0; border: var(--grosor) solid var(--borde); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: transparent;
}
.elegir-opcion:has(input:checked) .elegir-marca { background: var(--texto); color: var(--superficie); }

/* Foto de perfil en «Editar perfil» */
.foto-editar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.foto-editar .avatar { width: 76px; height: 76px; border-radius: 38px; font-size: 32px; cursor: default; }
.foto-editar-botones { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foto-editar-botones .boton-texto { min-height: 36px; }
/* Dentro de una hoja (que ya es --superficie) las tarjetas van sobre --fondo */
.hoja .foto-editar { margin-bottom: 0; }
.hoja .elegir-opcion { background: var(--fondo); }
.hoja .elegir-opcion:has(input:checked) { background: color-mix(in srgb, var(--acento) 25%, var(--fondo)); }
.hoja .elegir-icono { background: var(--superficie); }

/* Recortar la foto: la imagen se mueve debajo de un círculo; fuera de él, oscurecido */
.recorte {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; align-self: center; flex-shrink: 0;
  overflow: hidden; border-radius: 12px; background: var(--fondo);
  touch-action: none; user-select: none; cursor: grab;
}
.recorte:active { cursor: grabbing; }
.recorte:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.recorte canvas { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.recorte-circulo {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--texto); box-shadow: 0 0 0 999px rgba(13, 20, 40, 0.65);
}
.recorte-zoom { display: flex; align-items: center; gap: 12px; }
.recorte-zoom input { flex: 1; height: 44px; accent-color: var(--rosa-texto); }

/* ---------- Vista rápida y gestos ---------- */

/* Mantener pulsada una portada abre la vista rápida: sin el menú del móvil ni arrastrar la imagen */
a:has(.portada) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.portada img { -webkit-user-drag: none; }

.vista-rapida { display: flex; gap: 14px; align-items: flex-start; }
.vista-rapida-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vista-rapida-datos h2 { font-size: 20px; line-height: 1.15; }

/* Filas que se deslizan a la derecha: debajo aparece una franja con lo que va a pasar */
.deslizable { overflow-x: clip; }
.deslizable [data-deslizar] { touch-action: pan-y; position: relative; transition: transform 0.2s ease; }
.deslizable [data-deslizar].deslizando { transition: none; }
.deslizar-marca {
  position: absolute; top: calc(-1 * var(--grosor)); bottom: calc(-1 * var(--grosor)); right: calc(100% + var(--grosor));
  width: 100vw; display: flex; align-items: center; justify-content: flex-end; padding-right: 16px;
  background: var(--superficie); color: var(--texto); border: var(--grosor) solid var(--borde); border-radius: var(--radio);
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 16px; pointer-events: none;
}
.deslizar-listo .deslizar-marca { background: var(--acento); color: var(--sobre-acento); }

/* Equipo de la ficha (botones que abren las otras obras) */
.equipo { width: 100%; text-align: left; cursor: pointer; color: var(--texto); }
.equipo .fila-texto { display: flex; flex-direction: column; }

/* Huecos grises mientras carga: la forma de lo que va a salir, con un brillo que pasa */
.esqueleto-fila { display: flex; align-items: center; gap: 12px; padding: 12px; border: var(--grosor) solid var(--linea); border-radius: var(--radio); list-style: none; }
.esqueleto-carta { display: flex; flex-direction: column; gap: 6px; }
.esqueleto-bloque, .esqueleto-linea { background: var(--linea); border-radius: 8px; }
.esqueleto-fila .esqueleto-bloque { width: 56px; height: 80px; flex-shrink: 0; }
/* Para listas de personas (Amigos): del mismo alto que la fila de verdad */
.esqueleto-fila.persona .esqueleto-bloque { width: 44px; height: 44px; border-radius: 50%; }
.esqueleto-carta .esqueleto-bloque { width: 100%; aspect-ratio: 5 / 7; }
.esqueleto-linea { height: 12px; width: 80%; }
.esqueleto-linea.corta { width: 45%; margin-top: 8px; }
.esqueleto-bloque, .esqueleto-linea { animation: latir 1.2s ease-in-out infinite; }
@keyframes latir { 50% { opacity: 0.5; } }

/* Afinidad con un amigo (en su perfil) */
.afinidad { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--texto-2); }
.afinidad-valor { font-family: var(--fuente-titulo); font-weight: 800; font-size: 30px; color: var(--texto); box-shadow: inset 0 -0.35em 0 var(--rosa); flex-shrink: 0; padding: 0 2px; }

/* Lo último de tus amigos: una tarjeta por amigo que se despliega con sus notas */
.actividad-amigo { padding: 12px; }
.actividad-amigo summary { list-style: none; cursor: pointer; }
.actividad-amigo summary::-webkit-details-marker { display: none; }
.actividad-flecha { color: var(--apagado); transition: transform 0.15s; }
.actividad-amigo[open] .actividad-flecha { transform: rotate(180deg); }
.actividad-notas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--linea); }
.actividad-notas .boton-texto { align-self: flex-start; min-height: 36px; }
#al-dia { margin: 10px 0 0; }

/* Cuándo sale el próximo episodio (en «Continuar») */
.proximo-episodio { font-weight: 800; color: var(--rosa-texto); }

/* ---------- Desplegables ---------- */

details.desplegable { border-radius: var(--radio); background: var(--superficie); border: var(--grosor) solid var(--borde); overflow: hidden; }
details.desplegable summary {
  min-height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; cursor: pointer; list-style: none;
}
details.desplegable summary::-webkit-details-marker { display: none; }
details.desplegable summary::after { content: "▾"; color: var(--apagado); transition: transform 0.15s; }
details.desplegable[open] summary::after { transform: rotate(180deg); }
details.desplegable .lista-filas { padding: 0 14px 14px; }

/* ---------- Avisos ---------- */

/* Número de novedades dentro de la pestaña */
.contador-pestana {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; border: var(--grosor) solid var(--borde); background: var(--morado); color: var(--sobre-morado); font-size: 11px; font-weight: 800;
}
.oculto-pestana { visibility: hidden; }

.aviso { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.aviso:last-child { border-bottom: 0; }
.aviso-texto { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.aviso-texto strong { color: var(--texto); }
.aviso-acciones { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.punto { width: 12px; height: 12px; border: var(--grosor) solid var(--borde); border-radius: 50%; background: var(--rosa); margin-top: 5px; flex-shrink: 0; }

.medias.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.medias.tres .media-valor { font-size: 22px; }

.etiqueta-amigo {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 8px 3px 3px;
  border-radius: 12px; border: 1.5px solid var(--borde); background: var(--fondo); font-size: 12px; color: var(--texto-2);
}
.etiqueta-amigo .avatar { width: 18px; height: 18px; font-size: 10px; cursor: default; border-width: 1px; }

.estadisticas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.estadisticas .tarjeta { text-align: center; padding: 12px; }
.estadisticas strong { display: block; font-family: var(--fuente-titulo); font-weight: 800; font-size: 24px; }

/* ---------- Aviso flotante ---------- */

/* Centrado sin «left: 50%» (que solo le dejaba media pantalla y con títulos largos se estrechaba
   en muchas líneas): ocupa lo que necesite, hasta casi todo el ancho */
.toast {
  position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: 600px; bottom: 92px; z-index: 60;
  padding: 12px 16px; border: var(--grosor) solid var(--borde); border-radius: var(--radio); background: var(--texto); color: var(--superficie);
  font-size: 14px; font-weight: 800; line-height: 1.35; box-shadow: 4px 4px 0 var(--rosa);
  pointer-events: none;
}
/* Aviso con «Deshacer»: se puede pulsar */
.toast.con-boton { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 16px; }
.toast-deshacer { flex-shrink: 0; }
.toast-deshacer {
  min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: var(--superficie);
  font-weight: 800; font-size: 14px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 3px; text-underline-offset: 4px;
}
/* Con una ventana abierta, el aviso sale arriba para no tapar sus botones */
body:has(.capa) .toast { top: 16px; bottom: auto; }
/* Por encima de la barra flotante */
.toast { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ---------- Instalar como app ---------- */

.instalar-app { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 8px 0 4px; }
.instalar-app-icono img { width: 44px; height: 44px; border-radius: 11px; border: var(--grosor) solid var(--borde); display: block; }
.instalar-cerrar { width: 36px; height: 36px; box-shadow: none; flex-shrink: 0; }
.pasos-instalar { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.subir-archivo { position: relative; cursor: pointer; }
.subir-archivo input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.subir-archivo:focus-within { outline: 3px solid var(--acento); outline-offset: 2px; }
.revisar-notas { display: flex; flex-direction: column; gap: 10px; }
.revisar-notas:empty { display: none; }
.fila-revisar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 10px; border: var(--grosor) solid var(--borde); border-radius: 14px; background: var(--fondo); }
.fila-revisar.apagada { opacity: 0.5; }
.fila-revisar .interruptor { flex-shrink: 0; margin-top: 4px; }
.fila-revisar-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; overflow-wrap: anywhere; }
.fila-revisar-texto .boton-texto { min-height: 32px; }
.fila-revisar-controles { display: flex; gap: 6px; flex-basis: 100%; }
.fila-revisar-controles .entrada { height: 40px; padding: 0 10px; font-size: 14px; }
.fila-revisar-controles select.entrada { flex: 1; min-width: 0; padding-right: 32px; background-position: right 8px center; }
.fila-revisar-controles input.entrada { width: 72px; flex: none; }
.fila-revisar-cambio { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.opcion-revisar { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px; border: 2px solid var(--borde); border-radius: 12px; background: var(--superficie); cursor: pointer; font-size: 14px; font-weight: 700; }
.opcion-revisar .portada.p-s { width: 36px; height: 52px; }
.opcion-revisar[aria-current] { border-color: var(--acento); box-shadow: 3px 3px 0 var(--acento); }
.lista-fuera { margin: 0; padding: 10px 12px 10px 30px; max-height: 40vh; overflow-y: auto; border: 2px solid var(--borde); border-radius: 12px; background: var(--fondo); font-size: 14px; line-height: 1.5; user-select: text; }
.elegir-obras { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.antibots { display: flex; justify-content: center; margin-top: 16px; min-height: 0; }
.preguntas { display: flex; flex-direction: column; gap: 8px; }
.preguntas details { border: 2px solid var(--borde); border-radius: 14px; background: var(--fondo); }
.preguntas summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--texto-2); flex-shrink: 0; }
.preguntas details[open] summary::after { content: '−'; }
.preguntas details p { margin: 0; padding: 0 14px 14px; font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.ayuda .panel + .panel { margin-top: 22px; }
.icono-en-linea { display: inline-flex; vertical-align: -4px; padding: 1px 3px; border: 1.5px solid var(--borde); border-radius: 6px; }

/* ---------- Bienvenida (tutorial de la primera visita) ---------- */

.bienvenida {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: var(--fondo) var(--cielo); background-size: 420px 340px;
  padding: max(16px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
  animation: fundido 0.2s ease-out;
}
.bienvenida-arriba { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; max-width: 520px; width: 100%; margin: 0 auto; }
.bienvenida-arriba .boton-texto { min-height: 44px; font-size: 15px; }
.bienvenida-pantallas {
  flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  max-width: 520px; width: 100%; margin: 0 auto; outline: none;
}
.bienvenida-pantallas::-webkit-scrollbar { display: none; }
.bienvenida-pantalla {
  flex: 0 0 100%; scroll-snap-align: center; padding: 20px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
}
.bienvenida-dibujo {
  width: 140px; height: 140px; border-radius: 50%; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento); color: var(--sobre-acento);
  border: 3px solid var(--borde); box-shadow: 6px 6px 0 var(--sombra);
}
.bienvenida-pantalla h2 { font-size: 26px; line-height: 1.2; }
.bienvenida-pantalla p { margin: 0; font-size: 16px; color: var(--texto-2); max-width: 340px; }
.bienvenida-puntos { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.bienvenida-puntos span { width: 10px; height: 10px; border-radius: 999px; border: var(--grosor) solid var(--borde); background: var(--superficie); transition: width 0.2s, background-color 0.2s; }
.bienvenida-puntos span.activo { width: 26px; background: var(--rosa); }
.bienvenida-botones { display: grid; gap: 10px; padding: 0 20px; max-width: 520px; width: 100%; margin: 0 auto; }

/* ---------- Entrar ---------- */

.entrar { max-width: 420px; margin: 0 auto; padding: 32px 20px 40px; }
.entrar .logo { display: block; text-align: center; font-size: 34px; margin-bottom: 6px; }
.sociales { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.separador { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--apagado); font-size: 12px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.entrar-lema {text-align: center; color: var(--apagado); margin: 0 0 26px; font-size: 14px; }

/* =====================================================================
   Animaciones
   Suaves y cortas. Si el sistema pide "reducir movimiento", se desactivan.
   ===================================================================== */

@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir-hoja { from { transform: translateY(100%); } to { transform: none; } }
@keyframes escalar-hoja { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes latido { 0% { transform: scale(0.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes brillo { from { background-position: -200px 0; } to { background-position: calc(200px + 100%) 0; } }

/* Paso entre páginas: fundido rápido en vez de pantallazo en blanco (navegadores que lo saben hacer) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; }

/* Entrada de la página: muy corta, para que la web se sienta rápida */
.contenedor > *, .entrar > *, .ficha-cabeza, .medias { animation: aparecer 0.2s ease-out backwards; }
.contenedor > :nth-child(2), .entrar > :nth-child(2) { animation-delay: 0.02s; }
.contenedor > :nth-child(3), .entrar > :nth-child(3) { animation-delay: 0.04s; }
.contenedor > :nth-child(n + 4), .entrar > :nth-child(n + 4) { animation-delay: 0.06s; }

/* Listas y rejillas: cada elemento aparece un poquito después del anterior */
.lista-filas > *, .rejilla > *, #avisos > .aviso { animation: aparecer 0.2s ease-out backwards; }
.lista-filas > :nth-child(2), .rejilla > :nth-child(2), #avisos > :nth-child(2) { animation-delay: 0.02s; }
.lista-filas > :nth-child(3), .rejilla > :nth-child(3), #avisos > :nth-child(3) { animation-delay: 0.04s; }
.lista-filas > :nth-child(4), .rejilla > :nth-child(4), #avisos > :nth-child(4) { animation-delay: 0.06s; }
.lista-filas > :nth-child(n + 5), .rejilla > :nth-child(n + 5), #avisos > :nth-child(n + 5) { animation-delay: 0.08s; }

/* Portadas: la imagen entra con un fundido y se acerca un poco al pasar por encima */
.portada img { animation: fundido 0.25s ease-out both; transition: transform 0.35s ease; }
.carta:hover .portada img, .fila a:hover .portada img { transform: scale(1.05); }
.carta-titulo { transition: color 0.2s; }
.carta:hover .carta-titulo { color: var(--rosa-texto); }

/* Tarjetas y botones */
.tarjeta { transition: box-shadow 0.2s, transform 0.2s; }
a.tarjeta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sombra); }
.boton, .boton-icono, .boton-redondo, .chip, .opcion, .casilla, .segmentos button, .avatar {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s, border-color 0.2s, color 0.2s, filter 0.2s;
}
.boton:active, .boton-icono:active, .boton-redondo:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sombra); }
.chip:active, .opcion:active, .segmentos button:active { transform: scale(0.96); }
.boton-icono:hover { filter: brightness(1.05); }
.boton-redondo:hover { background: color-mix(in srgb, var(--acento) 25%, var(--superficie)); }
.boton-redondo.principal:hover { background: var(--acento); }

/* Barra inferior */
.nav a { transition: color 0.2s, background-color 0.2s; }
.nav a svg { transition: transform 0.2s ease; }
.nav a:hover svg { transform: translateY(-2px); }
.nav a[aria-current="page"] svg { animation: latido 0.35s ease-out; }

/* Contador de la campana: rebota al aparecer */
.contador:not([hidden]) { animation: latido 0.4s ease-out; }
.punto { animation: latido 0.4s ease-out both; }

/* Barras de progreso: se rellenan suavemente */
.progreso div { transition: width 0.5s ease; animation: rellenar 0.7s ease-out both; transform-origin: left; }
@keyframes rellenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Menú del avatar */

/* Ventanas emergentes: el fondo se oscurece y la hoja sube desde abajo */
.capa { animation: fundido 0.2s ease-out; }
.hoja { animation: subir-hoja 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
@media (min-width: 560px) { .hoja { animation: escalar-hoja 0.2s ease-out; } }

/* Aviso flotante */
.toast { animation: toast-entra 0.25s ease-out; }

/* "Cargando…" con un brillo que pasa */
.cargando {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rosa) 20%, transparent), transparent) no-repeat;
  background-size: 200px 100%;
  animation: brillo 1.2s linear infinite;
  border-radius: var(--radio);
}

/* Desplegables */
details.desplegable[open] .lista-filas { animation: aparecer 0.25s ease-out; }

/* Quien prefiere menos movimiento (ajuste del sistema operativo) */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}