/* ============================================================================================
M3Lector — hoja de estilo común de toda la web.
Aquí están los colores, las medidas, la letra y TODOS los componentes (cabecera, botones,
campos, cajas, tarjetas, ficha, scans, comentarios...). Ninguna página trae estilos propios:
se cambia aquí y cambia en toda la web. El porqué de cada decisión está en docs/DISENO.md.
Dirección (docs/DISENO.md, elegida por crix0): una cartelera de noche, editorial y sobria.
· Un solo color de acento (el azul) para lo que se puede pulsar. El estado de las cosas
(activo, abandonado, caído, pendiente) usa verde, ámbar y rojo, y solo en su etiqueta.
· Cuatro superficies oscuras muy pegadas entre sí (fondo, caja, caja alta y lo que se pasa
por encima) separadas por un filete de un píxel. Nada de cajas dentro de cajas: un bloque
que vive dentro de otro se separa con aire o con una raya, no con otra caja.
· La jerarquía la hacen el tamaño de la letra, el aire y el color del texto. Los adornos
son un filete fino y una sombra corta; el movimiento, 160 ms.
· Las portadas son lo único con imagen: mandan.
Tabla de medidas (tokens). No se escribe un tamaño ni un relleno a mano: se tira del token.
Letra --t-xs 13 · --t-sm 14 · --t-md 16 · --t-lg 18 · --t-xl 22 · --t-2xl 28 · --t-3xl serie
Aire --e-1 4 · --e-2 8 · --e-3 12 · --e-4 16 · --e-5 24 · --e-6 32 · --e-7 40
Esquinas --r-1 6 · --r-2 10 · --r-3 14 · --r-p pastilla
============================================================================================ */
/* ============================== 1. Los tokens ============================== */
:root {
color-scheme: dark;
/* --- Superficies: cuatro escalones cálidos, de la noche al papel --- */
--fondo: #1b1712; /* la página, la banda de arriba y el pie */
--sup-1: #241f18; /* cualquier caja: secciones, tarjetas, campos */
--sup-2: #2d2619; /* un escalón por encima: desplegables, pastillas, filas al pasar */
--sup-3: #3a3122; /* lo que está debajo del ratón o pulsado */
--linea: #3b3223; /* el filete de un píxel que separa todo */
--linea-2: #55482f; /* el mismo filete cuando algo está debajo del ratón */
/* --- Texto: tres escalones de importancia, sobre papel de noche --- */
--texto: #fff4dd; /* lo que se lee */
--texto-2: #d8c9ad; /* lo de apoyo: notas, fechas, datos secundarios */
--texto-3: #a99a80; /* los rótulos: lo que hay que ver pero no leer */
/* --- Un solo acento para lo que se puede pulsar: el amarillo de cartel --- */
--acento: #ffc933;
--acento-claro: #ffd75e; /* el mismo amarillo, para texto sobre fondo oscuro (enlaces) */
--acento-tinta: #1b1712; /* lo que se escribe encima del amarillo */
--acento-suave: rgb(255 201 51 / .14);
--acento-borde: rgb(255 201 51 / .45);
--acento-alto: #ffd95e; /* el amarillo al pasar por encima */
/* --- Estados: solo en la etiqueta de la cosa, en ningún otro sitio --- */
--alerta: #e0453a; /* caído, abandonado, error */
--alerta-suave: rgb(224 69 58 / .16);
--verde: #8fce6b; /* activo, guardado */
--verde-claro: #b8e08f;
--verde-suave: rgb(143 206 107 / .14);
--ambar: #ff8a3d; /* pendiente de mirar */
--ambar-suave: rgb(255 138 61 / .14);
/* --- La caja destacada: solo la cabecera de una ficha. Papel de noche. --- */
--caja: linear-gradient(180deg, #2a2318 0%, #211b13 100%);
--caja-borde: rgb(255 201 51 / .34);
/* --- Sombra dura, de tebeo: el papel se levanta del fondo, no flota --- */
--sombra: 8px 8px 0 rgb(224 69 58 / .55);
--sombra-corta: 4px 4px 0 rgb(0 0 0 / .55);
/* --- Nombres antiguos: alguna página o guion todavía los usa --- */
--papel: var(--fondo); --papel-hondo: var(--sup-1);
--tinta: var(--texto); --tinta-suave: var(--texto-2);
--borde: var(--linea); --rojo: var(--alerta);
--panel: var(--sup-1); --panel-2: var(--sup-2);
--fondo-2: var(--fondo);
/* El cian de la primera versión ya no existe: lo que estaba en cian pasa al amarillo de acento. */
--cian: var(--acento); --cian-tinta: var(--acento-tinta);
--caja-comentario: var(--sup-1);
/* --- Letra: tres, cada una con su trabajo ---
La condensada de cartel para los titulares (el carácter de la casa), la del sistema para el
texto y la monoespaciada para lo que es un dato. */
--fuente-titular: Bahnschrift, "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
--fuente-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--fuente-datos: "Cascadia Mono", Consolas, ui-monospace, "Courier New", monospace;
/* --- Tamaños: un solo cuerpo de letra que crece con la pantalla (20-10-2026) ---
Como en el perfil desde el 19-10: la letra sube con el ancho de la ventana (de 16 px en el móvil a
19 en un monitor grande) y todos los escalones cuelgan de ella, así que nada se queda pequeño al lado
de lo demás. La jerarquía se hace con color y peso más que con tamaño. */
--cuerpo: clamp(1rem, 1.15vw, 1.2rem);
--t-xs: calc(var(--cuerpo) * .87); /* rótulos, pastillas, datos y fechas */
--t-sm: calc(var(--cuerpo) * .93); /* notas y texto de apoyo */
--t-md: var(--cuerpo); /* cuerpo, botones y campos */
--t-lg: calc(var(--cuerpo) * 1.12); /* destacado: nombre de un scan, título de tarjeta */
--t-xl: calc(var(--cuerpo) * 1.35); /* títulos de sección */
--t-2xl: calc(var(--cuerpo) * 1.7); /* título de una ficha */
--t-3xl: clamp(2.1rem, 3.6vw, 3.4rem); /* el titular de una página */
/* --- Aire: seis pasos (4, 8, 12, 16 dentro de una caja; 24, 32 y 40 entre bloques) --- */
--e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem;
--e-5: 1.5rem; --e-6: 2rem; --e-7: 2.5rem;
/* --- Formas: esquinas rectas, como el papel impreso --- */
--r-1: 0; --r-2: 0; --r-3: 0; --r-p: 2px;
--alto-campo: 2.5rem; /* todos los campos y botones miden lo mismo de alto */
--lienzo: min(100%, 120rem); /* el ancho de la página: todo el monitor, con un tope para que no se estire sin fin */
--prosa: 100%; /* los párrafos también van a lo ancho, como pidió crix0 el 20-10-2026 */
--paso: 160ms; /* lo que tarda en responder lo que se pulsa */
--pad-caja: var(--e-4); /* el relleno de una caja, en un solo sitio */
}
/* ============================== 2. Base ============================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
/* El fondo: papel de noche, liso. La trama de imprenta va solo en la cabecera de una ficha. */
background-color: var(--fondo);
color: var(--texto);
font-family: var(--fuente-texto);
font-size: var(--t-md);
line-height: 1.6;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--acento); color: var(--acento-tinta); }
/* Los párrafos no se estiran de lado a lado; lo que va en rejilla (listas, pastillas) sí. */
p, ul, ol, h1, h2, h3, h4 { max-width: var(--prosa); }
ul.tarjetas, ul.pillas, ul.estante, .filtros, .fila-pilla, .lista-capitulos { max-width: none; }
h1, h2, h3 {
font-family: var(--fuente-titular);
font-weight: 700;
line-height: 1.2;
letter-spacing: -.01em;
margin: 0 0 var(--e-2);
text-wrap: balance;
}
h1 { font-size: var(--t-3xl); letter-spacing: 0; margin-bottom: var(--e-3); }
h2 { font-size: var(--t-xl); margin: var(--e-6) 0 var(--e-3); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--e-4); }
a { color: var(--acento-claro); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--texto); }
/* El foco del teclado: siempre igual y siempre visible, en toda la web. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-1); }
small { display: block; margin-top: var(--e-2); color: var(--texto-2); font-size: var(--t-xs); max-width: var(--prosa); }
code { font-family: var(--fuente-datos); font-size: .92em; }
li::marker { color: var(--texto-3); }
/* ============================== 3. Cabecera y pie ============================== */
/* La banda de arriba va pegada al borde y se queda fija al bajar: el buscador y el menú están
siempre a mano. Fondo macizo y un filete de un píxel, sin cristales ni desenfoques. */
header {
display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
align-items: center; justify-content: space-between;
padding: var(--e-3) clamp(var(--e-4), 4vw, var(--e-5));
background: var(--fondo);
border-bottom: 1px solid var(--linea);
font-size: var(--t-sm);
position: sticky; top: 0; z-index: 20;
}
header .marca {
font-family: var(--fuente-titular);
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: var(--e-2);
}
header .marca a { display: inline-flex; align-items: center; gap: .45rem; }
/* El logo: una ficha con la esquina doblada. Macizo (texto) con el pliegue en azul y las rayas
recortadas en el color de la banda, para que se lea también a 16 px, que es el tamaño de la pestaña. */
header .logo { width: 1.5rem; height: 1.5rem; flex: none; }
header .logo-hoja { fill: currentColor; }
header .logo-pliegue { fill: var(--acento); }
header .logo-raya { fill: none; stroke: var(--fondo); stroke-width: 2.2; stroke-linecap: round; }
/* El lema, al lado del nombre: se cae en pantallas estrechas antes que los enlaces del menú. */
header .lema {
font-family: var(--fuente-texto); font-size: var(--t-xs); font-weight: 400;
letter-spacing: .01em; color: var(--texto-3); white-space: nowrap;
}
@media (max-width: 52rem) { header .lema { display: none; } }
/* El menú: enlaces de texto, no botones. Así el único botón de verdad de la banda es el que
importa —«Añadir una serie»—, que va macizo en azul, y los demás no compiten con él. */
header .menu {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
gap: var(--e-1);
margin-left: auto;
}
header .boton {
display: inline-flex; align-items: center; justify-content: center;
padding: .4rem .6rem;
border: 1px solid transparent; border-radius: var(--r-1);
background: transparent;
color: var(--texto-2);
font: inherit; font-size: var(--t-sm); font-weight: 500;
letter-spacing: 0; text-transform: none;
cursor: pointer; white-space: nowrap;
transition: background var(--paso), color var(--paso), border-color var(--paso);
}
header .boton:hover { background: var(--sup-2); color: var(--texto); border-color: transparent; }
/* La página en la que estás (lo marca /menu.js): se ve sin gritar. */
header .boton[aria-current] { background: var(--sup-2); color: var(--texto); }
header .boton-lleno { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); font-weight: 600; }
header .boton-lleno:hover { background: var(--acento-alto); border-color: var(--acento-alto); color: var(--acento-tinta); }
/* El buscador de la cabecera: se puede buscar otra serie sin volver atrás. En el móvil se cae a su
propia línea y ocupa el ancho entero, que es donde mejor se teclea. */
header .busca-corta { display: inline-flex; align-items: center; gap: var(--e-1); margin-right: var(--e-2); }
header .busca-corta input {
font: inherit; font-size: var(--t-sm);
width: 13rem; height: var(--alto-campo); padding: 0 var(--e-3);
border: 1px solid var(--linea); border-radius: var(--r-1);
background: var(--sup-1); color: var(--texto);
transition: border-color var(--paso), background var(--paso);
}
header .busca-corta input::placeholder { color: var(--texto-3); }
header .busca-corta input:hover { border-color: var(--linea-2); }
header .busca-corta input:focus-visible { border-color: var(--acento); outline: none; background: var(--sup-2); }
/* El boton de buscar lleva contorno: pegado al campo parece un boton y no un enlace del menu. */
header .busca-corta .boton { border-color: var(--linea); }
header .busca-corta .boton:hover { border-color: var(--linea-2); background: var(--sup-2); color: var(--texto); }
@media (max-width: 34rem) {
header .busca-corta { order: 3; flex: 1 1 100%; margin-right: 0; }
header .busca-corta input { flex: 1; width: auto; }
header .boton { padding: .4rem .5rem; }
}
/* La marca y el pie se aclaran al pasar por encima; los enlaces del menú ya se marcan solos. */
header a:not(.boton), footer a {
color: inherit; text-decoration: none;
border-bottom: 1px solid transparent; padding-bottom: 1px;
}
header a:not(.boton):hover, footer a:hover { border-bottom-color: var(--acento); }
footer {
margin-top: var(--e-6);
padding: var(--e-4) clamp(var(--e-4), 4vw, var(--e-5));
border-top: 1px solid var(--linea);
background: var(--fondo);
color: var(--texto-3);
font-size: var(--t-sm);
max-width: none;
}
footer a:hover { color: var(--acento-claro); }
footer.pie {
display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
align-items: baseline; justify-content: space-between;
}
/* ============================== 4. Cuerpo de página ============================== */
main {
width: 100%; max-width: var(--lienzo);
margin: 0 auto; padding: var(--e-5) clamp(var(--e-4), 4vw, var(--e-5)) var(--e-6);
flex: 1;
}
main.estrecho { max-width: 26rem; }
/* El inicio se sale del lienzo (12-10-2026): la portada va de lado a lado y todo centrado, para que
el estante de portadas llene la pantalla. Los párrafos siguen cortos a propósito. */
main.ancho-total { max-width: none; text-align: center; }
main.ancho-total p, main.ancho-total h1, main.ancho-total h2 { margin-left: auto; margin-right: auto; }
p.intro { font-size: var(--t-lg); line-height: 1.55; color: var(--texto-2); margin: 0 0 var(--e-5); max-width: 46ch; }
.nota { font-size: var(--t-sm); color: var(--texto-2); }
.fecha { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--texto-3); margin-top: var(--e-1); }
/* Una raya suelta, para separar bloques sin meter una caja. */
.regla { border: 0; border-top: 1px solid var(--linea); margin: var(--e-6) 0; max-width: none; }
/* Lo que aún está por decidir o rellenar: que se vea, sin gritar. */
.pendiente {
font-style: italic;
background: var(--ambar-suave);
color: var(--texto);
padding: 0 var(--e-2);
border-radius: var(--r-1);
}
/* ============================== 5. Botones ============================== */
/* Un solo juego de botones en toda la web, del mismo alto (--alto-campo) y con la misma letra:
macizo el azul (la acción principal de cada bloque) y de contorno los demás. Nunca dos macizos
azules compitiendo en la misma pantalla. */
button, .boton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
margin-top: 0; min-height: var(--alto-campo); padding: 0 var(--e-4);
border: 1px solid var(--acento); border-radius: var(--r-1);
background: var(--acento); color: var(--acento-tinta);
font: inherit; font-size: var(--t-md); font-weight: 600; line-height: 1.2;
text-decoration: none; text-align: center;
cursor: pointer;
transition: background var(--paso), border-color var(--paso), color var(--paso), transform var(--paso);
}
button:hover, .boton:hover { background: var(--acento-alto); border-color: var(--acento-alto); color: var(--acento-tinta); }
button:active, .boton:active { transform: translateY(1px); }
button.secundario, .boton.secundario {
background: transparent; border-color: var(--linea-2); color: var(--texto);
font-weight: 500;
}
button.secundario:hover, .boton.secundario:hover {
background: var(--sup-2); border-color: var(--acento-borde); color: var(--texto);
}
button[disabled] { opacity: .5; cursor: default; }
button[disabled]:hover { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
main.estrecho button { width: 100%; }
/* Un botón pequeño de texto (dentro de un comentario, para desplegar la sinopsis): sin caja. */
.enlace-boton {
display: inline; margin: 0; padding: 0; min-height: 0; border: 0; background: none; cursor: pointer;
font-family: var(--fuente-texto); font-size: var(--t-sm); font-weight: 500; text-align: left;
color: var(--acento-claro); text-decoration: underline; text-underline-offset: 2px;
}
.enlace-boton:hover { background: none; color: var(--texto); }
/* Los botones de la barra de escribir un comentario: cuadraditos iguales. */
.herramienta {
width: 2rem; height: 2rem; min-height: 0; display: grid; place-items: center; padding: 0; margin: 0;
border: 1px solid var(--linea); border-radius: var(--r-1); background: var(--sup-1);
color: var(--texto-2); font-size: var(--t-sm); line-height: 1; font-weight: 400;
cursor: pointer; list-style: none;
}
.herramienta:hover { color: var(--texto); border-color: var(--acento-borde); background: var(--sup-2); }
/* ============================== 6. Campos y formularios ============================== */
label {
display: block;
font-family: var(--fuente-texto);
font-size: var(--t-xs);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--texto-3);
margin: var(--e-4) 0 var(--e-2);
}
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="search"], input[type="number"], select, textarea {
width: 100%; height: var(--alto-campo); padding: 0 var(--e-3);
border: 1px solid var(--linea); border-radius: var(--r-1);
background: var(--sup-1);
color: var(--texto);
font: inherit; font-size: var(--t-md);
transition: border-color var(--paso), background var(--paso), box-shadow var(--paso);
}
textarea { height: auto; min-height: 6rem; padding: var(--e-3); resize: vertical; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: var(--linea-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none; border-color: var(--acento); background: var(--sup-2);
box-shadow: 0 0 0 3px var(--acento-suave);
}
/* Los desplegables del sistema traen su propia flecha y su propio marco; se le quita la flecha para
que peguen con los campos de texto (la dibuja el fondo, que sí se puede pintar). */
select {
appearance: none; -webkit-appearance: none;
padding-right: 2.1rem; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .8rem center;
background-size: .7rem .45rem;
}
/* La lista que abre el sistema no se puede pintar; al menos que sus renglones sean del color de la
web y no del blanco de fábrica, que es lo que canta en una web oscura. */
select option, select optgroup { background: var(--sup-2); color: var(--texto); }
select optgroup { color: var(--texto-2); font-weight: 600; font-style: normal; }
input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: 1; }
/* Una casilla con su explicación al lado: aquí el texto es una frase, no un rótulo. */
.casilla {
display: flex; gap: var(--e-2); align-items: flex-start;
margin: var(--e-4) 0 0;
font-family: var(--fuente-texto);
font-size: var(--t-sm); letter-spacing: 0; text-transform: none;
color: var(--texto);
line-height: 1.5;
}
.casilla input { width: auto; height: auto; margin-top: .3rem; flex: none; accent-color: var(--acento); }
.casilla a { color: var(--acento-claro); }
/* Los filtros de un listado: rejilla que se reparte sola. */
.filtros {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: var(--e-4) var(--e-5);
margin-top: var(--e-5);
}
.filtros label { margin-top: 0; }
.cf-turnstile { margin-top: var(--e-4); }
input.puesta { border-color: var(--acento); }
/* La casilla invisible de «no soy un robot» (la pinta /pase.js): ocupa su sitio cuando está puesta
y no deja hueco ninguno cuando todavía no se ha pedido. */
.cf-pase { margin-block: var(--e-3); }
.cf-pase:empty { display: none; }
/* ============================== 7. Avisos y estados ============================== */
/* Cuatro avisos, cada uno con su color y su sitio: error (rojo), hecho (verde), información (gris) y
el aviso que hay que leer de verdad (rojo con filete grueso a la izquierda). */
.errores, #errores {
margin-top: var(--e-3); padding: var(--pad-caja);
border: 1px solid rgb(242 86 95 / .5); border-left: 3px solid var(--alerta);
border-radius: var(--r-2); background: var(--alerta-suave);
color: var(--texto); font-size: var(--t-sm);
}
.errores ul, #errores ul { margin: var(--e-2) 0 0; padding-left: 1.1rem; }
.errores :last-child, #errores :last-child { margin-bottom: 0; }
.aviso-ok, #ok {
margin-top: var(--e-3); padding: var(--pad-caja);
border: 1px solid rgb(61 220 151 / .45); border-left: 3px solid var(--verde);
border-radius: var(--r-2); background: var(--verde-suave);
color: var(--texto); font-size: var(--t-sm);
}
.aviso :last-child, .aviso-ok :last-child { margin-bottom: 0; }
.aviso {
margin-top: var(--e-3); padding: var(--pad-caja);
border: 1px solid var(--linea); border-radius: var(--r-2);
background: var(--sup-1); font-size: var(--t-sm); color: var(--texto-2);
}
.aviso-fuerte {
margin-top: var(--e-3); padding: var(--pad-caja);
border: 1px solid rgb(242 86 95 / .45); border-left: 3px solid var(--alerta);
border-radius: var(--r-2); background: var(--alerta-suave);
color: var(--texto); font-size: var(--t-sm);
}
.aviso-fuerte :last-child { margin-bottom: 0; }
/* Los dos cuadros de «para hacer esto hay que entrar» no son la buena noticia de que algo se ha
guardado: son una invitación con botones, así que van en el gris de la casa. */
#hayQueEntrar, #hayQueEntrarComentario {
background: var(--sup-1);
border-color: var(--linea); border-left-color: var(--linea);
color: var(--texto);
}
/* Mientras una página está pidiendo sus datos: el texto respira, no parpadea. */
.cargando, #cargando, #comentariosCargando { color: var(--texto-2); animation: respirar 1.6s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* ============================== 8. Cajas y secciones plegables ============================== */
/* Una caja es una superficie plana con un filete de un píxel. Nada de cajas dentro de cajas: lo que
vive dentro de una caja se separa con aire o con una raya. */
.cuadro {
margin-top: var(--e-3); padding: var(--pad-caja);
border: 1px solid var(--linea); border-radius: var(--r-2);
background: var(--sup-1);
}
.cuadro h2 { border-bottom: 0; padding-bottom: 0; margin-top: 0; }
.cuadro p { max-width: 62ch; }
/* El recuadro para aportar un scan va plegado: se ve el título y se abre al pulsarlo. */
.cuadro > summary {
display: flex; align-items: baseline; gap: var(--e-3);
cursor: pointer; list-style: none;
font-family: var(--fuente-titular); font-weight: 700;
font-size: var(--t-lg); letter-spacing: 0; text-transform: none;
line-height: 1.25; color: var(--texto);
}
.cuadro > summary::-webkit-details-marker { display: none; }
.cuadro > summary::before {
content: '+';
font-family: var(--fuente-datos); font-weight: 400; font-size: var(--t-md); line-height: 1;
color: var(--acento);
}
.cuadro[open] > summary::before { content: '−'; }
.cuadro > summary:hover { color: var(--acento-claro); }
.cuadro[open] > summary { margin-bottom: var(--e-4); }
/* Un cuadro dentro de otro (el formulario de añadir un scan, las opciones de la ficha) no es una
caja: es un bloque de la sección, separado con una raya. */
.cuadro.angosto {
max-width: none; margin-top: var(--e-3); padding: 0 0 0 var(--e-3);
border: 0; border-left: 2px solid var(--linea); background: transparent; border-radius: 0;
}
.cuadro.angosto > summary { font-size: var(--t-sm); color: var(--texto-2); font-family: var(--fuente-texto); font-weight: 500; }
.cuadro.angosto form { max-width: 30rem; }
.cuadro.angosto label { font-size: var(--t-sm); }
/* Un cuadro metido dentro de otro (el historial dentro de las opciones de la ficha) no es otra caja:
es un bloque del de fuera, separado con una raya. El de aportar un scan es la excepcion, porque no
es informacion: es una accion, y va a guiones para que se vea que ahi se anade algo. */
.cuadro .cuadro:not(#cuadroAportar) {
margin-top: var(--e-4); padding: var(--e-4) 0 0;
border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: transparent;
}
/* La sección de una ficha: título grande, flecha a la derecha y el cuerpo debajo. */
.cuadro-seccion { display: block; }
.cuadro-seccion > summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
cursor: pointer; list-style: none; padding: 0;
}
.cuadro-seccion > summary::-webkit-details-marker { display: none; }
.cuadro-seccion > summary::marker { content: ''; }
/* Estos cuadros ya llevan su flecha a la derecha: no quieren el «+» azul de los demás. */
.cuadro.cuadro-seccion > summary::before { content: none; }
.cuadro-seccion > summary h2 { margin: 0; }
.cuadro-seccion > summary:hover h2 { color: var(--acento-claro); }
.cuadro-seccion > *:not(summary) { margin-top: var(--e-4); }
/* La flecha: un cuadradito girado, que mira abajo con el cuadro cerrado y arriba con el abierto. */
.cuadro-flecha {
width: .5rem; height: .5rem; margin: .15rem .3rem .35rem 0; flex: none;
border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3);
transform: rotate(45deg); transition: transform var(--paso);
}
.cuadro-seccion > summary:hover .cuadro-flecha { border-color: var(--texto-2); }
.cuadro-seccion[open] > summary .cuadro-flecha { transform: rotate(225deg); }
/* El título de una sección y lo que lleva al lado (una nota, un botón), en la misma línea. */
.titulo-seccion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.titulo-seccion h2 { flex: 1 1 auto; }
.cuadro-seccion > summary > .nota { margin: 0 0 0 var(--e-2); margin-right: auto; }
.cuadro-seccion[hidden] { display: none; }
.cuadro form { max-width: 34rem; }
/* El recuadro de aportar un scan: a guiones y con el signo en azul, para que se vea de un vistazo
que ahí se puede añadir algo. */
#cuadroAportar { border: 1px dashed var(--acento-borde); }
#cuadroAportar > summary { color: var(--acento-claro); }
#cuadroAportar > summary:hover { color: var(--texto); }
/* ============================== 9. Tarjetas de una obra ============================== */
/* Las portadas mandan: la tarjeta es la portada con su pie debajo. Se usa en el buscador y en el
listado, y tiene el mismo aspecto en los dos sitios. */
.tarjetas {
list-style: none; margin: 0 0 var(--e-4); padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
gap: var(--e-5) var(--e-3);
}
.tarjeta {
display: grid; grid-template-rows: auto 1fr; gap: 0;
border: 1px solid var(--linea); border-radius: var(--r-2);
background: var(--sup-1);
overflow: hidden;
transition: border-color var(--paso), transform var(--paso), box-shadow var(--paso);
}
.tarjeta:hover { border-color: var(--acento-borde); transform: translateY(-2px); box-shadow: var(--sombra-corta); }
.tarjeta img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: var(--sup-2); }
.tarjeta > div { padding: var(--e-3); display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.tarjeta h3 { margin: 0; font-size: var(--t-md); line-height: 1.3; }
.tarjeta h3 a { color: inherit; text-decoration: none; }
.tarjeta h3 a:hover { color: var(--acento-claro); }
.tarjeta p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); font-size: var(--t-xs); color: var(--texto-3); }
.tarjeta button { margin-top: 0; font-size: var(--t-sm); min-height: 2.25rem; }
/* ------------ El estante de portadas (el inicio) ------------
La primera pantalla son las caras de las series: una fila de portadas, no una lista de texto. La
portada manda (2 de ancho por 3 de alto) y debajo van el nombre y, en pequeño, el tipo y los
enlaces. Todas miden lo mismo y la fila va centrada, también cuando la última queda a medias. */
.estante {
list-style: none; margin: 0 0 var(--e-4); padding: 0;
display: flex; flex-wrap: wrap; justify-content: center;
gap: var(--e-5) var(--e-4);
}
.estante li { flex: 0 0 11rem; display: grid; gap: var(--e-2); align-content: start; }
.estante a { display: grid; gap: var(--e-2); color: inherit; text-decoration: none; }
.estante img {
width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
border: 1px solid var(--linea); border-radius: var(--r-2);
background: var(--sup-2);
box-shadow: var(--sombra-corta);
transition: border-color var(--paso), transform var(--paso), box-shadow var(--paso);
}
/* Al pasar por encima, la portada da un paso al frente: es lo único que tiene imagen. */
.estante a:hover img {
border-color: var(--acento);
transform: translateY(-4px);
box-shadow: 0 18px 30px -14px rgb(0 0 0 / .9);
}
.estante .nombre {
font-family: var(--fuente-titular); font-size: var(--t-sm); font-weight: 600; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.estante a:hover .nombre { color: var(--acento-claro); }
.estante .datos {
display: flex; flex-wrap: wrap; gap: 0 var(--e-2);
font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--texto-3);
}
.estante .datos span + span::before { content: '· '; }
@media (max-width: 34rem) {
.estante { gap: var(--e-4) var(--e-2); }
.estante li { flex: 0 0 calc((100% - 2 * var(--e-2)) / 3); }
.estante a { gap: var(--e-1); }
.estante .nombre { font-size: var(--t-xs); -webkit-line-clamp: 3; }
.estante .datos { flex-direction: column; }
.estante .datos span + span::before { content: none; }
}
/* ============================== 10. Etiquetas y pastillas ============================== */
/* La etiqueta dice qué es una cosa (tipo, estado, país, «va por el 45»). Fondo apagado, letra
pequeña, y el color solo cuando significa algo: verde lo que está bien, ámbar lo que está
pendiente, rojo lo que se ha abandonado o caído. */
.etiqueta {
display: inline-flex; align-items: center; gap: .25rem;
padding: .1rem var(--e-2) .15rem;
border: 1px solid var(--linea-2); border-radius: var(--r-1);
background: var(--sup-2);
font-family: var(--fuente-texto); font-size: var(--t-xs); font-weight: 500;
letter-spacing: .01em; text-transform: none;
color: var(--texto-2);
white-space: nowrap;
}
.etiqueta.abandonado, .etiqueta.caido { color: #ffb3b8; border-color: rgb(242 86 95 / .5); background: var(--alerta-suave); }
/* Los cuatro estados de la lista privada (15-10-2026, fijados por crix0). Los mismos cuatro colores
en toda la web, para no tener que leer la palabra: amarillo, azul, verde y rojo (18-10-2026). */
.etiqueta.estado-siguiendo { color: var(--estado-siguiendo); border-color: rgb(255 201 51 / .5); background: var(--acento-suave); }
.etiqueta.estado-pendiente { color: var(--estado-pendiente); border-color: rgb(89 167 255 / .5); background: rgb(89 167 255 / .14); }
.etiqueta.estado-completado { color: var(--estado-completado); border-color: rgb(99 209 138 / .5); background: rgb(99 209 138 / .14); }
.etiqueta.estado-abandonado { color: #ffb3b8; border-color: rgb(242 86 95 / .5); background: var(--alerta-suave); }
/* El sello de «oficial»: donde publica quien tiene los derechos. A guiones y sin relleno, para que no
se confunda con un estado. */
.etiqueta.oficial { border-style: dashed; border-color: var(--texto-3); background: transparent; color: var(--texto); }
/* Las pastillas de la ficha llevan su rótulo delante («Tipo: manhwa»): el rótulo en gris, el dato en
blanco, y el conjunto algo más grande porque es la información de cabecera de la obra. */
.etiqueta .rotulo { color: var(--texto-3); font-weight: 400; }
#etiquetas .etiqueta, .etiqueta.grande { padding: .2rem var(--e-3) .25rem; font-size: var(--t-sm); color: var(--texto); }
/* Las pastillas de datos (el conteo al lado de un título, el dato de un aviso). */
.pilla, .pillas li {
display: inline-flex; align-items: center; gap: .35rem;
padding: .05rem var(--e-2) .1rem;
border: 1px solid var(--linea-2); border-radius: var(--r-p);
background: var(--sup-2);
font-size: var(--t-xs); color: var(--texto-2);
}
.menu .pilla { margin-left: var(--e-1); background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); font-weight: 600; }
.fila-pilla { display: flex; gap: var(--e-2); align-items: center; }
.fila-pilla input { flex: 1 1 auto; min-width: 0; }
.pillas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; }
.pillas li button {
margin: 0; padding: 0 .3rem; min-height: 0;
border: 0; background: transparent; color: var(--texto-3);
font-size: var(--t-md); line-height: 1; cursor: pointer;
}
.pillas li button:hover { background: transparent; color: var(--alerta); }
.pillas li.vacia { border: 0; background: transparent; padding: 0; color: var(--texto-3); font-size: var(--t-sm); }
/* Las pastillas que además se pulsan (los capítulos de los que se habla). */
.pillas li a, .pillas li > button.pastilla { color: var(--acento-claro); font-size: var(--t-sm); padding: .15rem var(--e-1); }
/* ============================== 11. La ficha de una serie ============================== */
/* La cabecera de la obra: la portada a la izquierda y, a su derecha, el título, los datos, la
sinopsis y lo que se puede hacer con ella. Al pie de la cabecera, en letra menuda, quién la puso y
de dónde salen los datos. Es lo primero que se lee: tiene que decir qué serie es y qué se puede
hacer. */
#ficha:not([hidden]) { display: grid; gap: var(--e-3); align-content: start; }
#ficha > .cuadro, #ficha > .caja-ficha { margin-top: 0; }
/* La ficha se queda con su recuadro entero (18-10-2026): los párrafos iban con el ancho de lectura de
la web (68 letras) y dentro de la caja ancha sobraba un palmo vacío a la derecha, así que todo
parecía pegado a la izquierda. Aquí el texto llega hasta el borde de la caja. */
#ficha p, #ficha ul, #ficha ol, #ficha .nota, #ficha .intro, #ficha small { max-width: none; }
.caja-ficha {
display: grid;
grid-template-columns: 6rem minmax(0, 1fr);
gap: var(--e-4);
align-items: start;
padding: var(--e-4);
border: 1px solid var(--caja-borde);
border-radius: var(--r-3);
background: var(--caja);
box-shadow: var(--sombra-corta);
}
@media (min-width: 44rem) {
.caja-ficha { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--e-5); padding: var(--e-5); }
}
.portada-ficha {
width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
border: 1px solid var(--linea-2); border-radius: var(--r-2);
background: var(--sup-2);
box-shadow: var(--sombra);
}
.ficha-datos { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.ficha-datos > * { margin: 0; }
/* El título de la obra: lo más grande de la página, como el cartel de una película. */
#titulo { font-size: var(--t-2xl); line-height: 1.15; }
/* Los datos (tipo, estado, país, nota), en pastillas con su rótulo, en una fila que se reparte sola. */
#etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-2); max-width: none; }
/* «También se conoce como»: los otros nombres, en letra de apoyo. */
#otros { font-size: var(--t-sm); color: var(--texto-2); }
/* La sinopsis: en tamaño de lectura, con la línea suelta. Si es larga se corta a cuatro líneas y se
despliega con «Ver todo», para no llenar la cabecera de texto antes de llegar a los scans. */
#sinopsis { font-size: var(--t-md); line-height: 1.6; color: var(--texto); }
#sinopsis.recortada {
display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
-webkit-box-orient: vertical; overflow: hidden;
}
/* Las acciones de la cabecera: lo que se viene a hacer con esta obra. */
.acciones-ficha { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.acciones-ficha .boton { min-height: 2.4rem; font-size: var(--t-sm); }
/* Quién puso la ficha y de dónde salen los datos: letra menuda al pie de la cabecera, separada por una
raya. Esto es una nota al pie, no una caja. */
.caja-quien {
margin: 0; padding-top: var(--e-3);
border: 0; border-top: 1px solid var(--caja-borde);
background: transparent;
font-size: var(--t-xs); line-height: 1.5; color: var(--texto-3);
}
.caja-quien p { margin: 0; }
.caja-quien #autor, .caja-quien #anilist { margin: 0; padding: 0; border: 0; background: transparent; }
.caja-quien #autor a { color: var(--texto-2); font-weight: 600; text-decoration: none; }
.caja-quien #autor a:hover { color: var(--acento-claro); text-decoration: underline; }
.caja-quien #anilist { margin-top: .15rem; font-size: var(--t-xs); color: var(--texto-3); }
.caja-quien #anilist a { color: inherit; }
.caja-quien #anilist a:hover { color: var(--acento-claro); }
#autor, #anilist { max-width: none; }
/* Una ficha de la lista de un perfil (portada + datos). */
.ficha-serie { display: grid; gap: var(--e-4); }
.ficha-serie img { width: 100%; max-width: 11rem; border-radius: var(--r-2); border: 1px solid var(--linea); background: var(--sup-2); }
@media (min-width: 40rem) { .ficha-serie { grid-template-columns: 11rem 1fr; align-items: start; } }
/* Las secciones a las que se salta desde la cabecera no quedan debajo de la banda de arriba. */
#cuadroScans, #miLista, #cuadroComentarios { scroll-margin-top: 5rem; }
/* Borrar una ficha es lo unico de la ficha que no tiene vuelta atras: ese boton va en rojo, aunque sea
de contorno como los demas. */
#borrar { color: #ffb3b8; border-color: rgb(242 86 95 / .5); }
#borrar:hover { background: var(--alerta-suave); border-color: var(--alerta); color: #ffb3b8; }
/* ============================== 12. Los scans ============================== */
/* Cada enlace, en su fila: a la izquierda lo que se lee (quién es, por dónde va, quién lo dijo y
cuándo), a la derecha los botones. El filete de la izquierda es el estado: verde el que funciona,
rojo el abandonado o caído, gris el que no se ha comprobado todavía. */
.enlaces { list-style: none; margin: 0; padding: 0; display: grid; max-width: var(--prosa); }
.enlaces li { display: grid; justify-items: start; gap: var(--e-1); padding: var(--e-4) 0; border-top: 1px solid var(--linea); }
.enlaces li:first-child { border-top: 0; }
.enlaces .web { font-family: var(--fuente-titular); font-size: var(--t-lg); font-weight: 600; line-height: 1.25; }
.enlaces .web a { color: inherit; text-decoration: none; }
.enlaces .web a:hover { color: var(--acento-claro); }
.enlaces .datos, .enlaces .fecha { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--texto-3); }
.enlaces a { color: var(--acento-claro); }
.enlaces .etiqueta { margin-bottom: 0; }
.enlaces-ficha {
gap: var(--e-3);
max-width: none;
grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
}
.enlaces-ficha li {
/* La columna de los botones, corta y fija: si no, la nota que va debajo (la de «entrar con tu
cuenta») la estira y deja un hueco en medio de la fila. */
/* Dos columnas: a la izquierda el nombre, el estado y quién lo puso; a la derecha, el botón de ir.
El capítulo y quién lo sigue se llevan en «Mi lista», no aquí (18-10-2026). */
grid-template-columns: minmax(0, 1fr) minmax(0, 12rem);
grid-template-areas: "encabezado acciones" "datos acciones" "fecha acciones";
align-items: start;
column-gap: var(--e-5);
row-gap: var(--e-1);
padding: var(--e-4);
border: 1px solid var(--linea);
border-left: 3px solid var(--linea-2);
border-radius: var(--r-2);
background: var(--sup-1);
transition: border-color var(--paso), background var(--paso);
}
.enlaces-ficha li:first-child { border-top: 1px solid var(--linea); }
.enlaces-ficha li:hover { background: var(--sup-2); border-color: var(--linea-2); }
.enlaces-ficha li.estado-activo { border-left-color: var(--verde); }
.enlaces-ficha li.estado-abandonado, .enlaces-ficha li.estado-caido { border-left-color: var(--alerta); }
.enlaces-ficha li.estado-activo .etiqueta { color: var(--verde-claro); border-color: rgb(61 220 151 / .5); background: var(--verde-suave); }
.enlaces-ficha li.estado-abandonado .etiqueta,
.enlaces-ficha li.estado-caido .etiqueta { color: #ffb3b8; border-color: rgb(242 86 95 / .5); background: var(--alerta-suave); }
.enlaces-ficha .scan-encabezado { grid-area: encabezado; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.enlaces-ficha .web { font-size: var(--t-lg); line-height: 1.25; }
/* «Hasta el capítulo 33»: el número grande y en blanco; el rótulo, pequeño y en gris. Es el dato que
más se busca de una ficha, así que manda. */
.enlaces-ficha .hasta { grid-area: hasta; display: flex; align-items: baseline; gap: var(--e-2); margin: var(--e-1) 0 0; }
.enlaces-ficha .hasta .rotulo { font-family: var(--fuente-texto); font-size: var(--t-xs); color: var(--texto-3); }
.enlaces-ficha .hasta .cifra { font-family: var(--fuente-titular); font-size: var(--t-xl); font-weight: 700; line-height: 1; }
.enlaces-ficha .datos { grid-area: datos; }
.enlaces-ficha .fecha { grid-area: fecha; max-width: none; }
.enlaces-ficha .gente { grid-area: gente; display: flex; align-items: baseline; gap: var(--e-2); margin: 0; flex-wrap: wrap; }
.enlaces-ficha .gente .rotulo { font-family: var(--fuente-texto); font-size: var(--t-xs); color: var(--texto-3); }
.enlaces-ficha .gente .cifra { font-family: var(--fuente-titular); font-size: var(--t-lg); font-weight: 700; line-height: 1; }
/* El número de una sola persona todavía no está confirmado: se enseña, pero con la cifra apagada y
subrayada a trazos, para que no se lea igual que el que dicen dos. */
.enlaces-ficha .gente.sinConfirmar .cifra { color: var(--texto-2); border-bottom: 2px dashed currentColor; }
.enlaces-ficha .fecha-dato { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--texto-3); }
/* El capítulo apartado por avisos: no se enseña el número, se ve que se está mirando. */
.enlaces-ficha .hasta.revisando .cifra { font-size: var(--t-xs); color: var(--texto-3); }
/* El número que da un salto enorme: una nota, no una regañina. */
.enlaces-ficha .nota.raro { color: var(--texto-3); }
/* «Sigo leyendo aquí»: el botón de un clic. El capítulo se apunta en «Mi lista», no aquí. */
.formularioSeguir { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; align-items: flex-start; }
.formularioSeguir .rotulo { font-family: var(--fuente-texto); font-size: var(--t-xs); color: var(--texto-3); }
.formularioSeguir .nota { margin: 0; }
.formularioSeguir button { width: 100%; }
/* «Este capítulo no cuadra»: discreto, debajo del botón de abrir. */
.enlaces-ficha .avisar { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.enlaces-ficha .avisar .nota { margin: 0; }
/* La columna de la derecha: los botones, uno encima de otro, del ancho de la columna. */
.scan-acciones { grid-area: acciones; align-self: center; justify-self: stretch; margin: 0; flex-direction: column; align-items: stretch; }
.enlaces-ficha .boton { color: var(--acento-tinta); }
.enlaces-ficha .boton:hover { color: var(--acento-tinta); }
.enlaces-ficha .boton.secundario, .enlaces-ficha .boton.secundario:hover { color: var(--texto); }
/* El botón de ir, del mismo tamaño que «Cambiar este enlace»: todo el ancho de la columna y el mismo
alto, para que la columna de la derecha quede pareja (18-10-2026). */
.scan-acciones .boton.ir {
width: 100%;
justify-content: center;
min-height: 2.25rem;
padding: 0 var(--e-3);
font-size: var(--t-sm);
}
/* «Cambiar este enlace» se lee como un botón pequeño: contorno fino, sin relleno. */
.enlaces-ficha .cuadro.angosto {
margin-top: 0; padding: 0; border: 0; border-left: 0; background: transparent;
display: flex; flex-direction: column; gap: var(--e-2); align-items: stretch;
}
.enlaces-ficha .cuadro.angosto > summary {
display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
min-height: 2.25rem; padding: 0 var(--e-3);
border: 1px solid var(--linea-2); border-radius: var(--r-1);
background: transparent;
font-family: var(--fuente-texto); font-size: var(--t-sm); font-weight: 500;
text-transform: none; letter-spacing: 0; color: var(--texto-2);
}
.enlaces-ficha .cuadro.angosto > summary::before { content: none; }
.enlaces-ficha .cuadro.angosto > summary:hover { color: var(--texto); border-color: var(--acento-borde); background: var(--sup-2); }
.enlaces-ficha .cuadro.angosto[open] { width: 100%; }
.enlaces-ficha .cuadro.angosto[open] > summary { margin-bottom: var(--e-3); }
.enlaces-ficha .cuadro.angosto[open] > .errores { margin-top: var(--e-3); }
/* Con el formulario abierto la fila se queda de una columna: el formulario necesita el ancho entero. */
.enlaces-ficha li:has(.cuadro.angosto[open]) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "encabezado" "datos" "fecha" "acciones";
}
.enlaces-ficha li:has(.cuadro.angosto[open]) .scan-acciones { align-self: stretch; }
/* La bandeja de revisión de quien lleva la web: una lista por grupos y nada más. */
.lista-revisar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.lista-revisar li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.lista-revisar .quien { font-size: var(--t-xs); color: var(--texto-3); }
/* ============================== 13. Mi lista ============================== */
/* Lo que sigue cada persona, con su estado y por dónde va. La fila es la misma superficie que un
scan: la web habla un solo idioma. */
/* Los cuatro estados, cada uno con su color y siempre el mismo en toda la web: aquí se lee de un
vistazo sin tener que leer la palabra. Amarillo = la estoy leyendo, azul = esperando, verde =
terminada, rojo = la dejé. */
:root {
--estado-siguiendo: #ffc933;
--estado-pendiente: #59a7ff;
--estado-completado: #63d18a;
--estado-abandonado: #e8514a;
}
/* La ventana de «¿cómo la llevas?»: cada opción con su color a la izquierda y su nombre en ese color;
la que ya tienes puesta, entera de su color y con un visto. */
.ventana { border: 2px solid var(--linea); background: var(--fondo); color: var(--texto); padding: var(--pad-caja); max-width: 34rem; width: calc(100% - 2rem); max-height: calc(100vh - 2rem); overflow: auto; }
.ventana::backdrop { background: rgba(16, 12, 8, .62); }
.ventana-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin: 0 0 var(--e-2); }
.ventana-cabeza h2 { margin: 0; font-size: var(--t-lg); }
.ventana .ventana-cabeza .ventana-cerrar { font-family: var(--fuente-titular); font-size: var(--t-lg); line-height: 1; background: none; border: 0; box-shadow: none; color: var(--texto-2); cursor: pointer; padding: 0 .25rem; text-transform: none; letter-spacing: normal; }
.ventana .ventana-cabeza .ventana-cerrar:hover { color: var(--texto); background: none; box-shadow: none; transform: none; }
/* De un vistazo: la ventana abre diciendo en qué color la tienes ahora. */
.estado-actual { display: inline-block; margin: 0 0 var(--e-2); padding: .1rem var(--e-2) .15rem; border: 2px solid currentColor; font-family: var(--fuente-titular); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .02em; }
.estado-actual[data-estado="siguiendo"] { color: var(--estado-siguiendo); }
.estado-actual[data-estado="pendiente"] { color: var(--estado-pendiente); }
.estado-actual[data-estado="completado"] { color: var(--estado-completado); }
.estado-actual[data-estado="abandonado"] { color: var(--estado-abandonado); }
.estado-actual[data-estado="ninguno"] { color: var(--texto-3); }
.opciones-estado { display: flex; flex-direction: column; gap: var(--e-2); margin: var(--e-2) 0; }
/* La regla general de botones (sección 19) pinta todo de amarillo con sombra roja. Estas son fichas
para leer, no botones de acción: se anulan una a una y por eso van con .ventana delante. */
.ventana .opciones-estado .opcion-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; background: var(--sup-1); border: 2px solid var(--linea); border-left: 10px solid var(--color-estado, var(--linea)); box-shadow: none; text-transform: none; letter-spacing: normal; font-weight: 400; font-size: var(--t-sm); padding: var(--e-2) var(--e-3); cursor: pointer; color: var(--texto); }
.ventana .opciones-estado .opcion-estado:hover { background: var(--sup-2); border-color: var(--texto); border-left-color: var(--color-estado, var(--texto)); transform: none; box-shadow: none; }
.ventana .opciones-estado .opcion-estado[data-estado="siguiendo"] { --color-estado: var(--estado-siguiendo); }
.ventana .opciones-estado .opcion-estado[data-estado="pendiente"] { --color-estado: var(--estado-pendiente); }
.ventana .opciones-estado .opcion-estado[data-estado="completado"] { --color-estado: var(--estado-completado); }
.ventana .opciones-estado .opcion-estado[data-estado="abandonado"] { --color-estado: var(--estado-abandonado); }
.ventana .opciones-estado .opcion-estado .nombre { font-family: var(--fuente-titular); font-size: var(--t-md); text-transform: uppercase; letter-spacing: .02em; color: var(--color-estado, var(--texto)); }
.ventana .opciones-estado .opcion-estado .que { font-family: var(--fuente-texto); font-size: var(--t-xs); color: var(--texto-2); }
/* La que ya está puesta: de su color entera, con texto oscuro y un visto delante. */
.ventana .opciones-estado .opcion-estado[aria-pressed="true"] { background: var(--color-estado, var(--acento)); border-color: var(--fondo); color: #1b1712; }
.ventana .opciones-estado .opcion-estado[aria-pressed="true"] .nombre { color: #1b1712; }
.ventana .opciones-estado .opcion-estado[aria-pressed="true"] .nombre::before { content: '✓ '; }
.ventana .opciones-estado .opcion-estado[aria-pressed="true"] .que { color: #3a2f1c; }
.ventana .opciones-estado .opcion-estado[data-estado="abandonado"][aria-pressed="true"] { color: #fff; }
.ventana .opciones-estado .opcion-estado[data-estado="abandonado"][aria-pressed="true"] .nombre { color: #fff; }
.ventana .opciones-estado .opcion-estado[data-estado="abandonado"][aria-pressed="true"] .que { color: #ffdcd9; }
/* El botón de la cabecera lleva el color del estado que tengas puesto: se sabe sin abrir nada. */
#botonMiLista[data-estado="siguiendo"] { border-left: 8px solid var(--estado-siguiendo); }
#botonMiLista[data-estado="pendiente"] { border-left: 8px solid var(--estado-pendiente); }
#botonMiLista[data-estado="completado"] { border-left: 8px solid var(--estado-completado); }
#botonMiLista[data-estado="abandonado"] { border-left: 8px solid var(--estado-abandonado); }
.mi-lista { border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--sup-1); padding: var(--pad-caja); margin: 0; }
.mi-lista .acciones { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: center; margin-top: var(--e-3); }
.mi-lista .acciones:first-of-type { margin-top: 0; }
.mi-lista label { margin: 0; }
/* Los mandos, en filas que llenan el cuadro: el rótulo, el campo y el botón, cada uno en su columna. */
details.mi-lista .acciones { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: var(--e-2) var(--e-3); }
#miListaFuera { grid-template-columns: auto auto minmax(0, 1fr); }
#miListaDentro > .acciones:first-child { grid-template-columns: 13rem minmax(0, 1fr); }
#miListaDentro > .acciones:nth-child(2) { grid-template-columns: 13rem minmax(0, 1fr) auto; }
#miListaDentro > .acciones:nth-child(3) { grid-template-columns: auto; }
.mi-lista #miCapitulo, .mi-lista input[type="number"] { max-width: 10rem; }
details.mi-lista .acciones > button { justify-self: start; width: max-content; white-space: nowrap; }
details.mi-lista label { white-space: nowrap; }
.lista-mi-lista { list-style: none; padding: 0; margin: var(--e-3) 0 0; display: flex; flex-direction: column; gap: var(--e-2); }
.mi-lista-fila {
display: flex; gap: var(--e-4); align-items: flex-start;
border: 1px solid var(--linea); border-radius: var(--r-2);
background: var(--sup-1);
padding: var(--e-3);
transition: border-color var(--paso), background var(--paso);
}
.mi-lista-fila:hover { background: var(--sup-2); border-color: var(--linea-2); }
/* Con capítulo nuevo, el filete de la izquierda se pone en azul: es lo único que pide atención. */
.mi-lista-fila.con-nuevo { border-left: 4px solid var(--acento); }
.mi-lista-datos { flex: 1 1 auto; min-width: 0; }
.mi-lista-datos .cabecera { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: 0 0 var(--e-1); }
.titulo-lista { font-weight: 600; }
.portada-lista { width: 3.5rem; height: 5rem; object-fit: cover; border-radius: var(--r-1); flex: 0 0 auto; background: var(--sup-2); }
.portada-lista.sin-portada { background: var(--sup-2); }
.nuevo { font-weight: 600; margin: var(--e-1) 0; color: var(--acento-claro); }
@media (max-width: 480px) { .lista-mi-lista .mi-lista-fila { flex-direction: column; } }
}
/* ============================== 14. Comentarios ============================== */
/* La sección de comentarios es una lista: cada comentario se separa del siguiente con una raya, no
con otra caja (que dentro de una sección que ya es una caja quedaba a tres niveles). */
#comentariosDeLaFicha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-content: start; }
#comentariosDeLaFicha > .nota { max-width: var(--prosa); margin: 0; }
#comentariosDeLaFicha .comentarios, #ficha .historial { max-width: none; }
#comentariosDeLaFicha .comentarios .cabecera, #comentariosDeLaFicha .comentarios .texto { max-width: var(--prosa); }
/* El formulario de comentar: separado con una raya, sin caja propia. */
#formularioComentario {
max-width: none; display: grid; gap: var(--e-3);
padding: var(--e-4) 0 0; border: 0; border-top: 1px solid var(--linea); background: transparent;
}
#formularioComentario .aviso-fuerte { max-width: var(--prosa); }
/* Los capítulos de los que habla la gente, en su bloque. */
#comentariosDeLaFicha > #capitulos {
display: grid; gap: var(--e-2); padding: var(--pad-caja);
border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--sup-2);
}
#comentariosDeLaFicha > #capitulos .nota, #comentariosDeLaFicha > #capitulos .pillas { margin: 0; }
/* El orden de la lista, arriba a la derecha. */
.orden-comentarios { display: flex; justify-content: flex-end; }
.comentarios, .historial, .lista-series, .lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; max-width: var(--prosa); }
.historial li, .lista-series li, .lista-enlaces li { padding: var(--e-3) 0; border-top: 1px solid var(--linea); }
.historial li:first-child, .lista-series li:first-child, .lista-enlaces li:first-child { border-top: 0; }
.historial li { font-size: var(--t-sm); }
.historial .fecha, .lista-series .fecha, .lista-enlaces .fecha { margin-left: var(--e-2); }
.lista-enlaces li, .lista-series li { font-size: var(--t-sm); }
.comentarios { display: block; }
.comentario {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-1) var(--e-3);
padding: var(--e-4) 0; border-top: 1px solid var(--linea);
}
.comentarios > .comentario:first-child { border-top: 0; }
.avatar {
width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
font-size: var(--t-sm); font-weight: 600; letter-spacing: 0;
background: var(--acento-suave); color: var(--acento-claro);
border: 1px solid var(--acento-borde);
}
#comentariosDeLaFicha .comentario .avatar { width: 2.25rem; height: 2.25rem; font-size: var(--t-md); }
.comentario .cabecera { font-size: var(--t-sm); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.comentario .cabecera .apodo { font-weight: 600; color: var(--texto); }
.comentario .texto { margin-top: var(--e-2); }
.comentario .texto p { margin: 0 0 var(--e-2); }
.comentario .texto p:last-child { margin-bottom: 0; }
.comentario.retirado .nota { font-style: italic; }
.comentario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-3); }
.comentario-acciones button {
margin: 0; padding: 0; min-height: 0; border: 0; background: transparent; color: var(--texto-3);
font-size: var(--t-xs); font-weight: 500; line-height: 1.6; cursor: pointer;
display: inline-flex; align-items: center; gap: var(--e-1);
}
.comentario-acciones button:hover { background: transparent; color: var(--texto); }
.comentario-acciones .me-gusta.dado { color: var(--acento-claro); }
.mencion { color: var(--acento-claro); }
a.mencion { text-decoration: none; border-bottom: 1px dotted currentColor; }
a.mencion:hover, a.mencion:focus-visible { border-bottom-style: solid; }
/* Lo destripado se tapa con una franja del color del texto; al pulsarlo aparece. */
.spoiler { background: var(--texto); color: transparent; border-radius: var(--r-1); padding: 0 .25em; cursor: pointer; user-select: none; }
.spoiler *::selection { color: transparent; }
.spoiler.destapado, .spoiler:focus-visible { background: var(--acento-suave); color: inherit; }
.imagen-comentario { margin: var(--e-2) 0 0; max-width: 22rem; }
.imagen-comentario img { display: block; width: 100%; height: auto; border: 1px solid var(--linea); border-radius: var(--r-2); }
.imagen-comentario .nota { font-size: var(--t-xs); margin-top: var(--e-1); }
.respuestas { list-style: none; margin: var(--e-3) 0 0; padding: 0 0 0 var(--e-3); border-left: 2px solid var(--linea); }
.respuestas .comentario { padding: var(--e-3) 0; }
.respuestas .avatar { width: 1.7rem; height: 1.7rem; font-size: var(--t-xs); }
/* Escribir: la caja del texto y debajo su barra (negrita, cursiva, tapar, emoticonos, imagen), con el
botón de publicar y la cuenta de letras al lado de las herramientas. */
.escribir { display: grid; gap: var(--e-2); }
.barra-comentario { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.barra-botones { display: flex; align-items: center; gap: var(--e-1); }
.contador { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--texto-3); margin-left: var(--e-2); }
.emojis { position: relative; }
.emojis > summary::-webkit-details-marker { display: none; }
.emojis-lista {
position: absolute; z-index: 5; top: 2.4rem; left: 0; width: 15rem; display: flex; flex-wrap: wrap;
gap: var(--e-1); padding: var(--e-2);
border: 1px solid var(--linea-2); border-radius: var(--r-2); background: var(--sup-2);
box-shadow: var(--sombra);
}
.emojis-lista button {
margin: 0; padding: 0; width: 1.9rem; height: 1.9rem; min-height: 0;
border: 0; background: transparent; font-size: var(--t-md); cursor: pointer;
}
.emojis-lista button:hover { background: var(--acento-suave); border-radius: var(--r-1); }
/* --- El desplegable que dibuja la web (elegir capítulo, ordenar comentarios) --- */
.desplegable { position: relative; }
.desplegable-orden { position: relative; }
.desplegable-orden > summary { list-style: none; }
.desplegable-orden > summary::-webkit-details-marker { display: none; }
.desplegable-orden .desplegable-lista { right: 0; left: auto; }
.desplegable-boton {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
min-height: var(--alto-campo); padding: 0 var(--e-3); text-align: left; cursor: pointer;
border: 1px solid var(--linea); border-radius: var(--r-1);
background: var(--sup-1); color: var(--texto);
font: inherit; font-size: var(--t-md); font-weight: 400;
}
.desplegable-boton:hover { border-color: var(--linea-2); background: var(--sup-2); }
.desplegable[data-abierto] .desplegable-boton { border-color: var(--acento); }
.desplegable-flecha { flex: 0 0 auto; width: .5rem; height: .5rem; margin-right: .1rem; border-right: 1.5px solid var(--texto-3); border-bottom: 1.5px solid var(--texto-3); transform: rotate(45deg) translate(-1px, -1px); }
.desplegable[data-abierto] .desplegable-flecha { transform: rotate(-135deg) translate(-2px, -2px); }
.desplegable-lista {
position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .25rem);
max-height: 15rem; overflow: auto; margin: 0; padding: var(--e-1) 0;
list-style: none; border: 1px solid var(--linea-2); border-radius: var(--r-2);
background: var(--sup-2); box-shadow: var(--sombra);
font-size: var(--t-md);
}
.desplegable-lista [role="option"] { padding: var(--e-2) var(--e-3); cursor: pointer; }
.desplegable-lista [role="option"]:hover,
.desplegable-lista [role="option"][data-activo] { background: var(--acento-suave); }
.desplegable-lista [role="option"][aria-selected="true"] { font-weight: 600; color: var(--acento-claro); }
.desplegable-lista .desplegable-cifra { font-family: var(--fuente-datos); font-size: var(--t-sm); }
.desplegable-grupo { padding: var(--e-2) var(--e-3) var(--e-1); font-family: var(--fuente-texto); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
#formularioComentario .desplegable,
#formularioComentario select,
#formularioComentario textarea,
#formularioComentario #capituloOtro { width: 100%; }
#formularioComentario textarea { background: var(--fondo); }
#comentario, #texto { border-color: var(--linea); }
/* ============================== 15. Perfil, pestañas y capítulos nuevos ============================== */
p.rol { font-family: var(--fuente-texto); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); margin: 0 0 var(--e-2); }
/* La lista de capítulos nuevos: filas separadas por una raya fina, con el dato (el número y la fecha)
en monoespaciada, como todo lo que es un dato en esta web. */
.lista-capitulos { list-style: none; padding: 0; margin: var(--e-4) 0; border-top: 1px solid var(--linea); }
.lista-capitulos > li { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.lista-capitulos .portada-lista { width: 2.6rem; height: 3.6rem; flex: none; }
.lista-capitulos .mi-lista-datos { min-width: 0; }
.lista-capitulos .cabecera { margin: 0 0 var(--e-1); display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: baseline; }
.lista-capitulos .nota { margin: 0; }
/* ============================== 16. Historial y avisos ============================== */
.historial li.sin-leer { border-left: 2px solid var(--acento); padding-left: var(--e-3); }
.historial .detalle { margin-top: var(--e-1); }
.historial .pilla { margin-right: var(--e-1); }
.historial li > button { margin-top: var(--e-2); font-size: var(--t-xs); min-height: 1.9rem; padding: 0 var(--e-2); }
/* ============================== 17. Pantallas estrechas ============================== */
@media (max-width: 43.99rem) {
/* La cabecera de la ficha: la portada pequeña a la izquierda y el texto al lado. */
.caja-ficha { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3); }
/* La portada, con el titulo y los datos al lado; y debajo, de lado a lado, la sinopsis y las
acciones, que a 200 px de ancho no se leen. El bloque de los datos se disuelve (display:
contents) para que sus hijos entren directamente en la rejilla de la cabecera. */
.ficha-datos { display: contents; }
.portada-ficha { grid-row: 1 / span 3; align-self: start; }
#titulo { grid-column: 2; grid-row: 1; }
#etiquetas { grid-column: 2; grid-row: 2; }
#otros { grid-column: 2; grid-row: 3; }
#sinopsis, #verSinopsis, .acciones-ficha, .caja-quien { grid-column: 1 / -1; }
#verSinopsis { justify-self: start; }
.acciones-ficha { margin-top: var(--e-1); }
#titulo { font-size: var(--t-xl); }
#sinopsis { font-size: var(--t-sm); }
#etiquetas .etiqueta { font-size: var(--t-xs); padding: .1rem var(--e-2) .15rem; }
/* Los mandos de Mi lista, uno debajo de otro: en una pantalla estrecha no caben en columnas. */
details.mi-lista .acciones,
#miListaFuera,
#miListaDentro > .acciones:first-child,
#miListaDentro > .acciones:nth-child(2),
#miListaDentro > .acciones:nth-child(3) { grid-template-columns: minmax(0, 1fr); }
details.mi-lista .acciones > button { justify-self: stretch; width: 100%; }
.mi-lista #miCapitulo, .mi-lista input[type="number"] { max-width: none; }
}
@media (max-width: 40rem) {
/* La fila de un scan: manda lo que se lee, y los botones van debajo a lo ancho. */
.enlaces-ficha li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "encabezado" "hasta" "gente" "datos" "fecha" "acciones"; }
.enlaces-ficha li > * { grid-area: auto; }
.enlaces-ficha .scan-acciones { align-self: stretch; margin-top: var(--e-2); }
.enlaces-ficha .boton.ir,
.enlaces-ficha .cuadro.angosto > summary { width: 100%; }
}
@media (max-width: 34rem) {
/* La banda de arriba, en un movil, ocupa tres lineas (nombre, menu y buscador): si se quedara
pegada al bajar se comeria media pantalla, asi que ahi no se queda. */
header { padding: var(--e-2) .9rem; gap: var(--e-2) var(--e-3); position: static; }
header .marca { font-size: var(--t-md); }
main { padding: var(--e-4) .9rem var(--e-5); }
h1 { margin-bottom: var(--e-2); }
.acciones-ficha .boton { flex: 1 1 auto; }
}
/* ============================== 18. Menos movimiento ============================== */
/* Si el sistema pide menos movimiento, se quitan los desplazamientos y las transiciones: nada se
mueve ni cambia de tamaño, pero todo sigue funcionando igual. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.estante a:hover img, .tarjeta:hover, button:active, .boton:active { transform: none; }
}
/* ============================================================================================
19. Dirección «Bocadillo» (elegida por crix0 el 18-10-2026)
--------------------------------------------------------------------------------------------
La web se viste de tebeo de noche: papel cálido casi negro, amarillo de cartel para lo que se
puede pulsar, rojo de portada para los estados y los marcos, y esquinas rectas como el papel
impreso. Lo que se levanta del fondo no flota: echa una sombra dura, desplazada.
Aquí solo están las piezas que cambian de forma; el resto de la hoja ya tira de los tokens de
arriba y se adapta sola. Los botones menudos (corazones, herramientas, enlaces de texto) se
quedan como estaban: el estilo de cartel es solo para las acciones de verdad.
============================================================================================ */
/* --- Titulares: condensada de cartel, en mayúsculas, como la portada de un cómic --- */
h1, h2, h3 {
font-family: var(--fuente-titular);
text-transform: uppercase;
letter-spacing: .015em;
font-weight: 600;
}
h1 { color: var(--acento); text-shadow: 2px 2px 0 rgb(143 31 22 / .40); line-height: 1.06; }
h2 { color: var(--texto); line-height: 1.1; }
h3 { color: var(--texto-2); letter-spacing: .06em; }
/* --- La banda de arriba: el amarillo entero, con el nombre en tinta --- */
header {
background: var(--acento);
color: var(--acento-tinta);
border-bottom: 4px solid var(--fondo);
box-shadow: 0 4px 0 rgb(224 69 58 / .55);
}
header .marca { color: var(--acento-tinta); font-variant: small-caps; letter-spacing: .02em; }
header .lema { color: rgb(27 23 18 / .70); font-weight: 600; }
header a:not(.boton) { color: var(--acento-tinta); }
header a:not(.boton):hover, footer a:hover { border-bottom-color: var(--acento-tinta); }
header .menu { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--t-xs); }
header .boton { color: var(--acento-tinta); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--t-xs); }
header .boton, header .boton-lleno { box-shadow: none; }
header .boton:hover { background: rgb(27 23 18 / .12); color: var(--acento-tinta); }
header .boton.secundario { border-color: var(--acento-tinta); color: var(--acento-tinta); background: transparent; }
header .boton.secundario:hover { background: var(--acento-tinta); color: var(--acento); border-color: var(--acento-tinta); }
header .boton[aria-current] { background: var(--fondo); color: var(--acento); }
header .boton-lleno { background: var(--fondo); border-color: var(--fondo); color: var(--acento); }
header .boton-lleno:hover { background: #000; border-color: #000; color: var(--acento); }
header .busca-corta input {
background: var(--texto); color: var(--acento-tinta);
border: 2px solid var(--fondo); font-weight: 600;
}
header .busca-corta input::placeholder { color: rgb(27 23 18 / .55); }
header .busca-corta input:focus-visible { border-color: var(--alerta); background: #fff; }
header .busca-corta .boton { border: 2px solid var(--fondo); }
header .busca-corta .boton:hover { background: var(--fondo); color: var(--acento); border-color: var(--fondo); }
/* El logo: la hoja en tinta, las rayas de la banda y el pliegue también del color de la banda. */
header .logo-pliegue { fill: var(--acento); }
header .logo-raya { stroke: var(--acento); }
/* El número de avisos sin leer, en tinta sobre la banda. */
header .pilla, header .menu .pilla { background: var(--fondo); border-color: var(--fondo); color: var(--acento); }
/* --- La banda en dos plantas (19-10-2026) -------------------------------------------------
Con la sesión abierta la banda llegaba a diez cosas en un renglón, todas del mismo tamaño: el
buscador se quedaba en un hueco y la vista no sabía por dónde empezar. Ahora arriba va lo de todos
los días —el nombre, un buscador ancho y añadir una serie— y debajo, en una tira oscura, lo de
moverse por la web a la izquierda y lo de la cuenta a la derecha. */
header { display: block; padding: 0; }
.banda-alta {
display: flex; align-items: center; gap: .5rem 1rem;
padding: .55rem clamp(var(--e-4), 2vw, var(--e-5));
}
header .banda-alta .busca-corta { flex: 1 1 18rem; max-width: 34rem; margin: 0 0 0 auto; }
header .banda-alta .busca-corta input { width: 100%; }
.banda-baja {
display: flex; align-items: center; justify-content: space-between; gap: .15rem 1rem;
padding: .15rem clamp(var(--e-4), 2vw, var(--e-5));
background: #100d09; /* un escalón por debajo del papel de noche */
border-top: 2px solid var(--fondo);
}
/* Las dos listas de la tira: secciones a la izquierda, cuenta a la derecha. */
header .banda-baja .menu { margin-left: 0; justify-content: flex-start; }
header .banda-baja .menu-tuyo { margin-left: auto; justify-content: flex-end; }
header .banda-baja .boton { color: var(--texto-2); }
header .banda-baja .boton:hover { background: rgb(255 244 221 / .08); color: var(--texto); }
header .banda-baja .boton[aria-current] { background: transparent; color: var(--acento); box-shadow: inset 0 -2px 0 var(--acento); }
header .banda-baja .pilla { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
/* «Ajustes» y «Salir», en la tira oscura: la misma pieza, pero en claro sobre negro. */
header .banda-baja .menu-cuenta > summary { color: var(--texto-2); border-color: transparent; }
header .banda-baja .menu-cuenta > summary:hover,
header .banda-baja .menu-cuenta[open] > summary { background: rgb(255 244 221 / .08); color: var(--texto); }
header .banda-baja .menu button.boton { color: var(--texto-3); }
header .banda-baja .menu button.boton:hover { color: var(--alerta); background: transparent; }
/* En pantallas estrechas el buscador se cae a su propio renglón y la tira se parte en dos. */
@media (max-width: 52rem) {
.banda-alta { flex-wrap: wrap; }
header .banda-alta .marca { order: 1; }
header .banda-alta .boton-lleno { order: 2; margin-left: auto; }
header .banda-alta .busca-corta { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
.banda-baja { flex-wrap: wrap; }
}
/* «Ajustes», en el mismo menú, al lado de «Mi perfil» y antes de «Salir»: se despliega pegado a la
banda y lleva a cada parte de los ajustes, que están en el perfil. */
.menu-cuenta { position: relative; }
.menu-cuenta > summary {
display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; list-style: none;
padding: .4rem .6rem; border: 1px solid transparent; border-radius: var(--r-1);
color: var(--acento-tinta); font: inherit; font-size: var(--t-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.menu-cuenta > summary::-webkit-details-marker { display: none; }
.menu-cuenta > summary::after { content: '▾'; font-size: .7rem; line-height: 1; }
.menu-cuenta > summary:hover, .menu-cuenta[open] > summary { background: rgb(27 23 18 / .12); }
.menu-cuenta-lista {
position: absolute; right: 0; top: calc(100% + .35rem); z-index: 60;
min-width: 15rem; display: grid;
background: var(--sup-1); border: 2px solid var(--fondo);
box-shadow: 5px 5px 0 rgb(224 69 58 / .45);
}
.menu-cuenta-lista a {
padding: .55rem .8rem; color: var(--texto); border-bottom: 1px solid var(--linea);
font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.menu-cuenta-lista a:last-child { border-bottom: 0; }
.menu-cuenta-lista a:hover { background: var(--sup-2); color: var(--texto); border-bottom-color: var(--linea); }
/* --- Botones: cartel amarillo con marco de tinta y sombra roja --- */
button:not(.enlace-boton):not(.herramienta), .boton {
background: var(--acento);
border: 2px solid var(--fondo);
color: var(--acento-tinta);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
font-size: var(--t-sm);
box-shadow: 3px 3px 0 rgb(224 69 58 / .9);
}
button:not(.enlace-boton):not(.herramienta):hover, .boton:hover {
background: var(--acento-alto);
border-color: var(--fondo);
color: var(--acento-tinta);
box-shadow: 4px 4px 0 rgb(224 69 58 / .9);
transform: translate(-1px, -1px);
}
button:not(.enlace-boton):not(.herramienta):active, .boton:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 rgb(224 69 58 / .9);
}
button.secundario, .boton.secundario {
background: transparent;
border: 2px solid var(--acento);
color: var(--acento);
box-shadow: none;
font-weight: 700;
}
button.secundario:hover, .boton.secundario:hover {
background: var(--acento-suave);
border-color: var(--acento);
color: var(--acento);
}
button[disabled], button[disabled]:hover { box-shadow: none; }
/* Los botones menudos recuperan su sitio: sin sombra y sin mayúsculas. */
.enlace-boton, .herramienta,
.comentario-acciones button, .orden-comentarios button,
.pillas li button, .emojis-lista button, .desplegable-boton {
box-shadow: none;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
border-width: 1px;
}
.enlace-boton { border: 0; }
/* --- Campos: papel oscuro, marco grueso y el foco en amarillo --- */
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="search"], input[type="number"], select, textarea {
background: var(--sup-1);
border: 2px solid var(--linea-2);
border-radius: 0;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
border-color: var(--acento);
box-shadow: 0 0 0 3px var(--acento-suave);
}
/* --- Etiquetas y pastillas: marco fino en mayúsculas, sin relleno --- */
.etiqueta {
background: transparent;
border: 2px solid var(--acento-borde);
color: var(--acento);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
padding: .12rem .45rem .16rem;
}
#etiquetas .etiqueta, .etiqueta.grande { color: var(--acento); border-color: var(--acento-borde); }
.etiqueta .rotulo { color: var(--texto-3); font-weight: 700; }
.etiqueta.abandonado, .etiqueta.caido, .etiqueta.estado-abandonado { color: #ff8577; border-color: rgb(224 69 58 / .7); background: transparent; }
.etiqueta.estado-siguiendo { color: var(--texto); border-color: var(--linea-2); background: transparent; }
.etiqueta.estado-pendiente { color: #ffa25e; border-color: rgb(255 138 61 / .65); background: transparent; }
.etiqueta.estado-completado { color: var(--verde-claro); border-color: rgb(143 206 107 / .6); background: transparent; }
.etiqueta.oficial { border-style: dashed; border-color: var(--texto-3); color: var(--texto-2); }
.pilla, .pillas li { background: transparent; border: 2px solid var(--linea-2); border-radius: 2px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: 11px; }
/* --- Tarjetas y estante: papel que se levanta con sombra dura --- */
.tarjeta { background: var(--sup-1); border: 2px solid var(--linea-2); border-radius: 0; }
.tarjeta:hover { border-color: var(--acento); box-shadow: 6px 6px 0 rgb(224 69 58 / .8); transform: translate(-2px, -2px); }
.estante img { border: 3px solid var(--fondo); box-shadow: 5px 5px 0 rgb(255 201 51 / .85); }
.estante a:hover img { box-shadow: 5px 5px 0 rgb(224 69 58 / .9); transform: translate(-1px, -1px); }
.estante .nombre { font-family: var(--fuente-titular); text-transform: uppercase; letter-spacing: .02em; }
/* --- La cabecera de una ficha: el marco más gordo de la web --- */
.caja-ficha {
background-image: radial-gradient(circle at 1px 1px, rgb(255 201 51 / .05) 1px, transparent 1.2px);
background-size: 5px 5px;
border: 3px solid var(--acento);
border-radius: 0;
box-shadow: 8px 8px 0 rgb(224 69 58 / .55);
background: var(--sup-1);
}
.portada-ficha { border: 3px solid var(--fondo); border-radius: 0; box-shadow: 5px 5px 0 var(--acento); }
#titulo { font-size: var(--t-2xl); color: var(--acento); text-shadow: 3px 3px 0 rgb(143 31 22 / .55); line-height: 1.02; }
.caja-quien { border-top: 1px solid var(--linea-2); color: var(--texto-3); }
/* --- Los scans: el nombre en condensada, el estado en su color --- */
.enlaces .web { font-family: var(--fuente-titular); text-transform: uppercase; letter-spacing: .02em; font-size: var(--t-lg); }
/* --- Los comentarios: globos de papel crema, con su cola --- */
.comentarios > .comentario, .comentario {
position: relative;
background: var(--texto);
color: #1b1712;
border: 3px solid #1b1712;
border-radius: 18px;
padding: var(--e-4) var(--e-4) var(--e-3);
margin: 0 0 var(--e-5);
}
.comentarios > .comentario:first-child { border-top: 3px solid #1b1712; }
.comentario::after {
content: "";
position: absolute;
left: 26px; bottom: -15px;
width: 0; height: 0;
border: 9px solid transparent;
border-top: 15px solid var(--texto);
border-left-width: 15px;
}
.comentario .apodo, .comentario .cabecera .apodo { color: #1b1712; font-weight: 700; }
.comentario .nota, .comentario .fecha, .comentario .quien { color: #6b5b40; }
.comentario a { color: #8f1b13; font-weight: 600; }
.comentario a:hover { color: #1b1712; }
.comentario .texto { color: #1b1712; }
.comentario-acciones button { color: #4a3f2c; background: transparent; border-color: transparent; }
.comentario-acciones button:hover { background: rgb(27 23 18 / .07); color: #1b1712; }
.comentario .imagen-comentario img { border: 2px solid #1b1712; }
.comentario .respuestas .comentario { background: #f7ead2; }
/* --- Avisos: banda de color con el marco de tinta --- */
.aviso, .aviso-ok { border: 2px solid var(--linea-2); border-left-width: 6px; border-radius: 0; }
/* --- El pie: una raya amarilla y letra menuda --- */
footer { background: transparent; border-top: 3px solid var(--acento); color: var(--texto-3); }
/* --- Perfil: cifras grandes, muro de insignias y reparto de lo que sigue ---
La misma idea de «Bocadillo»: papel marrón, marco de tinta, sombra roja dura y el amarillo
solo donde hay algo conseguido. */
.perfil-cabeza {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--linea-2);
}
.perfil-cabeza h1 { margin-bottom: .15rem; }
.cifras {
list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
gap: .55rem; padding: 0; margin: .9rem 0 1.6rem;
}
.cifras li {
background: var(--sup-2); border: 2px solid var(--fondo); box-shadow: 3px 3px 0 rgb(224 69 58 / .35);
padding: .6rem .7rem .5rem; display: flex; flex-direction: column; gap: .1rem;
}
.cifras strong {
font-family: var(--fuente-titular); font-size: 1.65rem; line-height: 1;
color: var(--acento); letter-spacing: .01em;
}
.cifras span { font-size: var(--t-xs); color: var(--texto-3); text-transform: uppercase; letter-spacing: .07em; }
.insignias {
list-style: none; padding: 0; margin: .5rem 0 1.6rem;
display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem;
}
.insignia {
display: flex; flex-direction: column; gap: .25rem;
background: var(--sup-1); border: 2px dashed var(--linea-2); padding: .6rem .7rem;
opacity: .72;
}
.insignia.hecha {
opacity: 1; background: var(--sup-2); border: 2px solid var(--acento);
box-shadow: 3px 3px 0 rgb(224 69 58 / .40);
}
.insignia strong { font-size: var(--t-sm); color: var(--texto); }
.insignia.hecha strong { color: var(--acento); }
.insignia-marca { font-size: 1.1rem; line-height: 1; color: var(--linea-2); }
.insignia.hecha .insignia-marca { color: var(--acento); }
.insignia .nota { margin: 0; font-size: var(--t-xs); }
/* Una barra de progreso de tinta con relleno amarillo. */
.barra {
display: block; height: .5rem; background: var(--fondo); border: 1px solid var(--linea-2);
overflow: hidden;
}
.barra > span { display: block; height: 100%; background: var(--acento); }
.reparto { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; gap: .35rem; max-width: 34rem; }
.reparto li { display: grid; grid-template-columns: 6rem 1fr 3rem; align-items: center; gap: .5rem; }
.reparto-nombre { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); }
.reparto .barra { height: .7rem; }
.casilla { display: flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; }
.casilla input { width: 1.1rem; height: 1.1rem; accent-color: var(--acento); }
/* ---------------------------------------------------------------------------
20. El muro y los amigos (comunidad)
Los mensajes van en globo crema, como los comentarios: es la marca de la casa.
--------------------------------------------------------------------------- */
.muro-partes { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
.muro-partes { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
}
.muro-form {
background: var(--sup-2);
border: 2px solid var(--fondo);
box-shadow: 4px 4px 0 rgb(224 69 58 / .35);
padding: 1rem;
margin-bottom: 1.25rem;
}
.muro-form label {
display: block;
font-family: var(--titular);
text-transform: uppercase;
letter-spacing: .06em;
font-size: var(--t-sm);
color: var(--texto-3);
margin-bottom: .4rem;
}
.muro-form textarea {
width: 100%;
box-sizing: border-box;
background: var(--sup-1);
color: var(--texto);
border: 2px solid var(--linea-2);
padding: .6rem .7rem;
font: inherit;
resize: vertical;
}
.muro-form textarea:focus { outline: 3px solid var(--acento); outline-offset: 1px; }
.muro-form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .6rem; }
.muro-form-pie .nota { margin: 0; }
.pasado { color: var(--rojo); font-weight: 700; }
.muro-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.muro-mensaje {
position: relative;
background: var(--texto);
color: var(--acento-tinta);
padding: .8rem 1rem .6rem;
border: 2px solid var(--fondo);
box-shadow: 4px 4px 0 rgb(143 31 22 / .28);
}
/* La colita del globo, hacia la izquierda, como si saliera de quien habla. */
.muro-mensaje::before {
content: '';
position: absolute;
left: -12px;
top: 1.1rem;
border: 9px solid transparent;
border-right-color: var(--fondo);
}
.muro-mensaje::after {
content: '';
position: absolute;
left: -9px;
top: 1.1rem;
border: 9px solid transparent;
border-right-color: var(--texto);
}
/* El nombre y lo que escribe cada uno, separados por una raya fina: así no se pega el texto al perfil. */
.muro-cabeza { margin: 0 0 .65rem; padding-bottom: .45rem; border-bottom: 1px solid rgb(27 23 18 / .16); font-family: var(--titular); text-transform: uppercase; letter-spacing: .04em; }
.muro-cabeza strong { color: var(--acento-tinta); }
.muro-cabeza .fecha { font-family: var(--texto); text-transform: none; letter-spacing: 0; font-size: var(--t-xs); color: #7a6a52; margin-left: .4rem; }
.muro-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.muro-texto .mencion { color: #8f1f16; font-weight: 700; }
.muro-mensaje .cita {
margin: 0 0 .5rem;
padding: .35rem .5rem;
border-left: 3px solid var(--acento);
background: rgb(27 23 18 / .06);
font-size: var(--t-sm);
color: #4a3f2f;
}
.muro-acciones { margin: .5rem 0 0; display: flex; gap: .5rem; }
.boton.pequeno {
font-size: var(--t-xs);
padding: .25rem .55rem;
box-shadow: 2px 2px 0 rgb(143 31 22 / .25);
background: transparent;
color: #4a3f2f;
border: 2px solid rgb(27 23 18 / .35);
}
.muro-gente { background: var(--sup-1); border: 2px solid var(--linea); padding: 1rem; }
.muro-gente h2 { margin-top: 0; }
.gente { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .45rem; }
.gente li { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; border-bottom: 1px dashed var(--linea-2); padding-bottom: .35rem; }
.gente a { font-weight: 700; }
/* Los amigos, en el perfil: caras (iniciales) con su bandera y su nombre. */
.amigos-lista { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.amigos-lista a {
display: flex; align-items: center; gap: .5rem;
background: var(--sup-2);
border: 2px solid var(--fondo);
padding: .35rem .5rem;
text-decoration: none;
color: var(--texto);
font-size: var(--t-sm);
}
.amigos-lista a:hover { border-color: var(--acento); }
.amigos-lista .inicial {
flex: 0 0 auto;
width: 1.8rem; height: 1.8rem;
display: grid; place-items: center;
background: var(--acento);
color: var(--acento-tinta);
font-family: var(--titular);
font-weight: 700;
}
.perfil-pais { font-size: 1.1rem; }
.perfil-amistad { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 0; }
.leyendo { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .35rem; }
.leyendo li { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed var(--linea-2); padding-bottom: .3rem; font-size: var(--t-sm); }
/* «Mis lecturas»: lo mismo, pero agrupado por los cuatro estados de la lista. */
.lecturas { display: grid; gap: .9rem; margin-top: .7rem; }
.lecturas-grupo h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; }
.lecturas-grupo .cuenta { font-family: var(--fuente-titular); font-size: var(--t-sm); color: var(--texto-2); }
.lecturas-grupo .lista-mi-lista { margin-top: 0; }
.leyendo .cap { color: var(--texto-3); white-space: nowrap; }
/* ---------------------------------------------------------------------------
21. Mensajes y foro
--------------------------------------------------------------------------- */
.mensajes-partes { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
.mensajes-partes { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; }
}
.conversaciones { background: var(--sup-1); border: 2px solid var(--linea); padding: 1rem; }
.conversaciones h2 { margin-top: 0; font-size: var(--t-md); }
.conversaciones ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.conversaciones li a {
display: block;
padding: .45rem .55rem;
text-decoration: none;
color: var(--texto);
border: 2px solid transparent;
border-bottom: 1px dashed var(--linea-2);
}
.conversaciones li a:hover { border-color: var(--acento); }
.conversaciones li.activa a { background: var(--sup-2); border-color: var(--fondo); box-shadow: 3px 3px 0 rgb(224 69 58 / .3); }
.conversaciones li strong { display: block; font-family: var(--titular); text-transform: uppercase; letter-spacing: .03em; }
.conversaciones li .nota { display: block; font-size: var(--t-xs); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversaciones li .fecha { display: block; font-size: var(--t-xs); color: var(--texto-3); }
.sin-leer {
display: inline-block;
min-width: 1.2rem;
padding: 0 .3rem;
background: var(--rojo);
color: #fff4dd;
font-family: var(--titular);
font-size: var(--t-xs);
text-align: center;
border-radius: 1rem;
}
/* Mis mensajes en la conversación, a la derecha y con la colita al otro lado. */
.muro-mensaje.mio { background: var(--acento); color: var(--acento-tinta); margin-left: 2rem; }
.muro-mensaje.mio::before { left: auto; right: -12px; border-right-color: transparent; border-left-color: var(--fondo); }
.muro-mensaje.mio::after { left: auto; right: -9px; border-right-color: transparent; border-left-color: var(--acento); }
.muro-mensaje.mio .muro-cabeza strong, .muro-mensaje.mio .muro-cabeza .fecha { color: var(--acento-tinta); }
.muro-mensaje.mio .boton.pequeno { color: var(--acento-tinta); border-color: rgb(27 23 18 / .4); }
.migas { font-size: var(--t-sm); color: var(--texto-3); margin-bottom: .2rem; }
.migas a { color: var(--acento); }
.temas { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.temas li a {
display: block;
background: var(--sup-2);
border: 2px solid var(--fondo);
box-shadow: 3px 3px 0 rgb(224 69 58 / .28);
padding: .6rem .8rem;
text-decoration: none;
color: var(--texto);
}
.temas li a:hover { border-color: var(--acento); }
.temas li strong { display: block; font-family: var(--titular); text-transform: uppercase; letter-spacing: .03em; font-size: var(--t-md); }
.temas li .nota { display: block; font-size: var(--t-xs); color: var(--texto-3); margin-top: .15rem; }
.tema-primero {
background: var(--texto);
color: var(--acento-tinta);
border: 2px solid var(--fondo);
box-shadow: 4px 4px 0 rgb(143 31 22 / .28);
padding: 1rem;
margin-bottom: 1.25rem;
}
.tema-primero .muro-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.tema-primero .muro-cabeza .fecha { color: #7a6a52; }
.cuadro { background: var(--sup-1); border: 2px solid var(--linea); padding: .75rem 1rem; margin-top: 1rem; }
.cuadro summary { cursor: pointer; font-family: var(--titular); text-transform: uppercase; letter-spacing: .05em; color: var(--acento); }
.cuadro[open] summary { margin-bottom: .75rem; }
.cuadro .muro-form { border: 0; box-shadow: none; padding: 0; background: transparent; }
/* Abrir un tema: un botón encima de la lista que abre una ventana. Dentro de la ventana el
formulario va sin caja propia, que la ventana ya es la caja. */
.fila-nuevo-tema { margin: 0 0 1rem; }
.ventana .muro-form { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.cuadro input[type='text'] {
width: 100%;
box-sizing: border-box;
background: var(--sup-1);
color: var(--texto);
border: 2px solid var(--linea-2);
padding: .55rem .7rem;
font: inherit;
margin-bottom: .6rem;
}
/* ---------------------- Foro: elegir qué vas a abrir ---------------------- */
/* Los tres botones del tipo de tema van centrados y con aire, y el que tienes elegido sale amarillo
lleno, con un ✓ y sombra dura: se sabe de un vistazo cuál has pulsado. La letra de debajo va con
margen para que no se pegue a los botones (18-10-2026). */
#formTema { text-align: center; }
/* Los ejemplos del título: botones pequeños, a la izquierda y uno al lado del otro. */
#notaEjemplos { margin: .7rem 0 .35rem; text-align: left; }
#ejemplosTema { justify-content: flex-start; gap: .4rem; }
#ejemplosTema .boton { font-size: var(--t-sm); font-weight: 500; padding: .3rem .6rem; min-height: 0; }
/* ---------------------------------------------------------------------------
Lista de temas del foro: filas finas con el tipo a la derecha (19-10-2026).
Cabe el doble de temas que con tarjetas y se ve igual quién y cuándo.
--------------------------------------------------------------------------- */
#listaTemas #temas { list-style: none; margin: 0 0 var(--e-3); padding: 0; border: 2px solid var(--linea-2); }
#listaTemas #temas > li + li { border-top: 1px solid var(--linea); }
#listaTemas #temas > li > a.fila-tema {
display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
gap: .1rem var(--e-3); padding: .5rem .75rem; text-decoration: none; color: var(--texto);
}
#listaTemas #temas > li > a.fila-tema:hover { background: var(--sup-2); color: var(--acento-claro); }
#listaTemas #temas .fila-tema strong { font-family: var(--titular); font-size: 1.02rem; }
#listaTemas #temas .fila-datos { color: var(--texto-3); font-size: var(--t-sm); white-space: nowrap; }
#listaTemas #temas .fila-tipo {
font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
border: 1px solid currentColor; padding: 0 .3rem; color: var(--texto-3); white-space: nowrap;
}
#listaTemas #temas .es-tema { color: var(--acento); }
#listaTemas #temas .es-capitulo { color: #9c8cf0; }
#listaTemas #temas .es-duda { color: #57c1a0; }
#listaTemas #temas .es-fijado { color: var(--alerta); }
@media (max-width: 620px) {
#listaTemas #temas > li > a.fila-tema { grid-template-columns: 1fr auto; }
#listaTemas #temas .fila-datos { grid-column: 1 / -1; white-space: normal; }
}
#formTema > label,
#formTema > input,
#formTema > textarea,
/* Los campos van dentro de un div para poder esconderlos en los temas de capítulo:
sin esto, la letra se les queda centrada como los botones de arriba. */
#formTema > div > label,
#formTema > div > input,
#formTema > div > textarea { text-align: left; }
#formTema > .nota:first-of-type { margin: .1rem 0 .7rem; letter-spacing: .05em; text-transform: uppercase; }
#tiposTema {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .55rem;
margin: 0 0 1.3rem;
}
#tiposTema .boton {
min-height: 0;
padding: .55rem 1.15rem;
border: 2px solid var(--linea-2);
background: transparent;
color: var(--texto);
font-weight: 500;
}
#tiposTema .boton:hover { background: transparent; color: var(--acento); border-color: var(--acento); }
#tiposTema .boton:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
/* Mientras lo tienes apretado, el botón se hunde: se nota que has pulsado ahí. */
#tiposTema .boton:active { transform: translate(2px, 2px); box-shadow: none !important; }
#tiposTema .boton[aria-pressed='true'] {
background: var(--acento);
border-color: var(--acento);
color: var(--acento-tinta);
font-weight: 700;
box-shadow: 3px 3px 0 var(--alerta);
}
#tiposTema .boton[aria-pressed='true']::before { content: '✓ '; }
#formTema #pistaTipo { margin: 0 auto 1.5rem; max-width: 42ch; line-height: 1.55; }
#formTema > label { margin-top: 1.1rem; }
#formTema > label:first-of-type { margin-top: 0; }
#formTema > input[type='text'], #formTema > textarea { margin-top: .45rem; margin-bottom: 1rem; }
#formTema #rotuloCapitulo:not([hidden]) { margin-top: .2rem; }
/* Las fotos de perfil (18-10-2026): el mismo círculo de siempre —la inicial— y, si hay foto, la
foto encima. Quitarla es quitar la imagen: el círculo con la inicial vuelve solo. */
.inicial {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--sup-2, #2a241d);
color: var(--acento);
font-weight: 700;
flex: none;
}
.inicial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.inicial.grande { width: 5rem; height: 5rem; font-size: 2rem; }
.perfil-cabeza .inicial.grande { margin-right: .4rem; }
.muro-cabeza { display: flex; align-items: center; gap: .5rem; width: 100%; }
/* La cuenta de la casa, marcada (19-10-2026): corona y anillo dorado en el círculo, y el sello
«Admin» detrás del nombre, para que se vea en el foro, el muro, los comentarios y el perfil. */
.inicial.admin {
box-shadow: 0 0 0 2px #ffc933, 0 0 0 4px #b8860b;
background: #3a2c12;
}
.inicial.admin::after {
content: '👑';
position: absolute;
top: -0.55rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
line-height: 1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.sello-admin {
display: inline-block;
margin-left: 0.45rem;
padding: 0 0.4rem;
border: 1px solid #b8860b;
border-radius: 0.25rem;
background: #ffc933;
color: #1b1712;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
vertical-align: middle;
}
/* ── Foro encadenado (19-10-2026) ──────────────────────────────────────────
Una respuesta puede colgar de otra. El escalón se ve por el tono de la
tarjeta (más oscura cuanto más hondo) y por el color de la raya de la
izquierda: marrón la primera, amarilla la segunda, roja la tercera. */
.tema-primero { background: #2a2115; color: var(--texto); border: 2px solid #4a3c2a; box-shadow: 4px 4px 0 rgb(0 0 0 / .35); }
.tema-primero .muro-cabeza { border-bottom-color: rgb(255 255 255 / .1); }
.tema-primero .muro-cabeza strong { color: var(--acento); }
.tema-primero .muro-cabeza .fecha { color: #9d8d72; }
.tema-primero .muro-texto { color: #e9dcc4; }
.hilo, .hilo-hijos { list-style: none; margin: 0; padding: 0; }
.hilo-mensaje { background: #221b14; border: 1px solid #3a2f24; padding: .7rem .85rem .45rem; margin-bottom: .55rem; }
.hilo-mensaje .muro-cabeza { margin: 0 0 .45rem; padding-bottom: .4rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
.hilo-mensaje .muro-cabeza strong { color: var(--texto); }
.hilo-mensaje .fecha { color: #9a8a70; }
.hilo-mensaje .muro-texto { margin: 0; color: #e6d9c1; white-space: pre-wrap; overflow-wrap: anywhere; }
.hilo-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .1rem; }
.hilo-acciones .boton { font-size: .72rem; padding: .1rem .45rem; }
.hilo-hijos { margin: .55rem 0 0 .35rem; padding-left: .8rem; border-left: 3px solid #6f5a33; }
.hilo-mensaje[data-nivel='2'] { background: #1d1710; }
.hilo-mensaje[data-nivel='3'] { background: #19140e; }
.hilo-mensaje[data-nivel='4'] { background: #15110c; }
.hilo-hijos[data-nivel='3'] { border-left-color: var(--acento); }
.hilo-hijos[data-nivel='4'] { border-left-color: var(--rojo); }
.hilo-hijos.plegado { display: none; }
.responde-chip { font-size: .68rem; color: #d6c39b; border: 1px solid #5a4a33; padding: 0 .3rem; }
/* Opción F (19-10-2026): dentro de un tema, cada respuesta lleva su cara redonda a la izquierda,
el texto en medio y el número de respuestas que cuelgan de ella a la derecha. Así se ve de un
vistazo dónde hay conversación y cuánta, aunque el hilo sea largo. */
.f-item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: start; }
/* La regla de lectura (p, ul { max-width: var(--prosa) }) dejaba el hilo en una columna
estrecha con la mitad de la página vacía. El ancho de línea ya lo pone cada párrafo. */
#respuestas.hilo, .hilo-hijos { max-width: none; }
.f-item > .inicial { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
.f-cuerpo { min-width: 0; }
.f-firma { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0 0 .5rem; padding-bottom: .4rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
.f-firma strong { font-family: var(--titular); text-transform: uppercase; letter-spacing: .04em; color: var(--texto); font-size: 1.02rem; }
.f-firma .fecha { color: #9a8a70; font-size: var(--t-xs); }
.f-lado { margin: 0; text-align: center; min-width: 3.4rem; color: #9a8a70; font-size: .62rem;
text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
.f-lado b { display: block; margin-bottom: .15rem; font-family: var(--titular); font-size: 1.45rem;
color: var(--acento); line-height: 1; }
/* Tema de capítulo recién abierto (19-10-2026): no es un comentario, es un aviso de que alguien
añadió ese capítulo. Una línea, sin tarjeta, para que no parezca que falta algo debajo. */
.tema-primero.solo-apertura { background: transparent; border: 0; border-bottom: 1px solid var(--linea-2);
border-radius: 0; box-shadow: none; padding: 0 0 .8rem; margin: 0 0 1.4rem; }
.tema-primero.solo-apertura .apertura { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem;
margin: 0; max-width: none; font-size: var(--t-sm); color: var(--texto-3); }
.apertura strong { font-family: var(--titular); font-size: 1.05rem; letter-spacing: .04em;
text-transform: uppercase; color: var(--texto); }
.apertura b { font-weight: 700; color: var(--acento); }
.borrar-apertura { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
font-size: .72rem; color: var(--texto-3); text-decoration: underline; }
.borrar-apertura:hover { color: #e0574a; }
/* Opción A (19-10-2026): en un tema de capítulo todo va en un solo recuadro —título, serie, quién
lo abrió y la caja de responder— con rayas finas entre medias y sin huecos. */
.caja-tema { margin: 0 0 var(--e-3); border: 2px solid var(--linea-2); background: var(--sup); }
.caja-tema h1 { margin: 0; padding: .7rem .9rem .1rem; font-size: 1.55rem; line-height: 1.1; }
.caja-tema #intro { margin: 0; padding: 0 .9rem .55rem; max-width: none;
border-bottom: 1px solid var(--linea); font-size: .86rem; color: var(--texto-3); }
.caja-tema .tema-primero.solo-apertura { margin: 0; padding: .5rem .9rem .6rem; border-bottom: 0; }
.caja-tema .muro-form { margin: 0; padding: .75rem .9rem; border: 0; border-top: 1px solid var(--linea);
border-radius: 0; background: transparent; box-shadow: none; }
/* Opción D (19-10-2026): en el foro de una serie, el título, la frase, el botón de abrir tema y la
lista van dentro del mismo recuadro, con rayas finas entre medias. */
#listaTemas.caja-temas { border: 2px solid var(--linea-2); background: var(--sup); }
#listaTemas.caja-temas #tituloPagina { margin: 0; padding: .7rem .9rem .15rem; font-size: 1.5rem; line-height: 1.1; }
#listaTemas.caja-temas #intro { margin: 0; padding: 0 .9rem .55rem; max-width: none;
border-bottom: 1px solid var(--linea); font-size: .86rem; color: var(--texto-3); }
#listaTemas.caja-temas .fila-nuevo-tema { margin: 0; padding: .6rem .9rem; }
#listaTemas.caja-temas #avisoEntrarTema { margin: 0; padding: .6rem .9rem; }
#listaTemas.caja-temas #temas { margin: 0; max-width: none; border: 0; border-top: 1px solid var(--linea); }
#listaTemas.caja-temas #sinTemas { margin: 0; padding: .8rem .9rem; }
@media (max-width: 560px) {
.f-item { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .6rem; }
.f-item > .inicial { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
.f-lado { display: none; }
}
.respondiendo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .5rem; padding: .35rem .6rem; background: #2a2115; border-left: 3px solid var(--acento); font-size: .85rem; }
.respondiendo .boton { font-size: .7rem; padding: .05rem .4rem; }
.texto-largo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.texto-largo.abierto { display: block; overflow: visible; -webkit-line-clamp: unset; }
.ver-mas { background: none; border: 0; color: var(--acento); font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 40rem) {
.hilo-hijos { margin-left: 0; padding-left: .55rem; }
.hilo-mensaje { padding: .6rem .65rem .4rem; }
}
/* Bandeja de mensajes (opción A, 19-10-2026): las conversaciones a la izquierda con su cara, el
último mensaje y la hora, y la conversación a la derecha. Todo dentro del mismo recuadro. */
.conversaciones { background: transparent; border: 0; padding: 0; border-bottom: 1px solid var(--linea); }
.conversaciones h2 { margin: 0; padding: .5rem .7rem; border-bottom: 1px solid var(--linea);
font-size: var(--t-xs); letter-spacing: .08em; color: var(--texto-3); }
.conversaciones ul { gap: 0; }
.conversaciones li a { display: grid; align-items: center; padding: .5rem .7rem;
grid-template-columns: 1.9rem minmax(0, 1fr) auto;
grid-template-areas: "cara nombre chip" "cara ultimo fecha"; gap: .1rem .55rem;
border: 0; border-top: 1px solid var(--linea); }
.conversaciones li:first-child a { border-top: 0; }
.conversaciones li a:hover { background: var(--sup-2); }
.conversaciones li.activa a { background: var(--sup-2); border-color: transparent; box-shadow: none; }
.cara-mensajes { grid-area: cara; width: 1.9rem; height: 1.9rem; border-radius: 50%;
display: grid; place-items: center; background: var(--sup-2); color: var(--acento);
font-family: var(--titular); font-size: .92rem; }
.conversaciones li strong { grid-area: nombre; font-size: var(--t-sm); text-transform: none; letter-spacing: 0; }
.conversaciones li a > .sin-leer { grid-area: chip; justify-self: end; align-self: center; }
.conversaciones li .nota { grid-area: ultimo; }
.conversaciones li .fecha { grid-area: fecha; }
@media (min-width: 60rem) {
.mensajes-partes { grid-template-columns: 16rem minmax(0, 1fr); align-items: stretch; }
.conversaciones { border-bottom: 0; border-right: 1px solid var(--linea); }
}
.mensajes-partes { gap: 0; border: 2px solid var(--linea-2); background: var(--sup-1); }
.conversacion { padding: .8rem .9rem; }
.conversacion h2 { margin: 0 0 .6rem; font-size: var(--t-md); }
#mensajes.muro-lista { max-width: none; }
/*--------------------------------------------------------------------------
21. La caja de escribir con formato y el spoiler (19-10-2026)
La barra de botones va pegada a la caja: se ve que es de ella, no del texto.
--------------------------------------------------------------------------- */
.caja-formato {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3rem;
margin: .5rem 0 .35rem;
}
/* La caja entera: el texto arriba y la barra al pie, dentro del mismo recuadro. El borde y el foco
los lleva el marco, y el textarea va limpio dentro para que no se vea un doble borde. */
.cf-caja {
position: relative;
border: 1px solid var(--linea);
border-radius: var(--r-1);
background: var(--sup-1);
transition: border-color var(--paso), box-shadow var(--paso);
}
.cf-caja:hover { border-color: var(--linea-2); }
.cf-caja:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.cf-caja > textarea,
.cf-caja > textarea:hover,
.cf-caja > textarea:focus-visible {
display: block;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: none;
/* El alto lo lleva el texto (lo hace el script): así la barra queda siempre pegada a lo último
escrito y no al fondo de un hueco vacío. */
resize: none;
min-height: 2.6rem;
max-height: 40vh;
overflow-y: auto;
}
/* La barra va dentro del cuadro, pegada al texto y sin franja propia: mismo fondo, sin línea que la
separe. Nada de flotar sobre el texto: si se pone encima, no deja pulsar para escribir. */
.cf-caja .caja-formato {
position: static;
margin: 0;
padding: .1rem .2rem .35rem;
background: transparent;
border: 0;
box-shadow: none;
}
.cf-boton {
font-family: var(--titular);
text-transform: uppercase;
letter-spacing: .04em;
font-size: var(--t-xs);
line-height: 1;
min-width: 1.7rem;
padding: .25rem .4rem;
background: var(--sup-1);
color: var(--texto-2);
border: 2px solid var(--linea-2);
box-shadow: 1px 1px 0 rgb(0 0 0 / .3);
cursor: pointer;
}
.cf-boton b, .cf-boton i, .cf-boton s { color: inherit; }
.cf-boton:hover {
background: var(--acento);
border-color: var(--fondo);
color: var(--acento-tinta);
}
.cf-boton[aria-pressed="true"] {
background: var(--acento);
border-color: var(--fondo);
color: var(--acento-tinta);
}
.cf-spoiler { letter-spacing: .06em; }
.cf-sep {
width: 2px;
align-self: stretch;
margin: 0 .25rem;
background: var(--linea-2);
}
.cf-vista-boton { margin-left: auto; }
.cf-aviso { margin: .35rem 0 0; color: var(--alerta); font-weight: 600; }
.cf-vista {
margin: .6rem 0 0;
border: 2px dashed var(--linea-2);
background: var(--sup-1);
padding: .5rem .6rem .65rem;
}
.cf-vista-titulo {
margin: 0 0 .4rem;
font-family: var(--titular);
text-transform: uppercase;
letter-spacing: .06em;
font-size: var(--t-xs);
color: var(--texto-3);
}
/* La vista previa se pinta sobre crema, igual que el globo de verdad. */
.cf-vista-cuerpo {
background: var(--texto);
color: var(--acento-tinta);
padding: .6rem .7rem;
overflow-wrap: anywhere;
}
.cf-vista-cuerpo > :first-child { margin-top: 0; }
.cf-vista-cuerpo > :last-child { margin-bottom: 0; }
/* Renglones, citas y listas: lo que hace que un texto largo se lea. */
.muro-texto p,
.cf-vista-cuerpo p { margin: 0 0 .55em; }
.muro-texto > :last-child,
.cf-vista-cuerpo > :last-child { margin-bottom: 0; }
.muro-texto blockquote,
.cf-vista-cuerpo blockquote {
margin: .5em 0;
padding: .25em .7em;
border-left: 3px solid var(--acento);
background: rgb(27 23 18 / .07);
color: #4a3f2f;
}
.muro-texto ul,
.cf-vista-cuerpo ul { margin: .4em 0 .6em; padding-left: 1.3em; }
.muro-texto ul:last-child,
.cf-vista-cuerpo ul:last-child { margin-bottom: 0; }
.muro-texto li,
.cf-vista-cuerpo li { margin: .15em 0; }
/* El spoiler: tapado se lee como un borrón; al pulsarlo, se destapa. */
.spoiler {
background: var(--texto);
color: transparent;
border-bottom: 2px dotted rgb(27 23 18 / .45);
border-radius: 2px;
padding: 0 .15em;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.spoiler:hover { border-bottom-color: var(--alerta); }
.spoiler.destapado {
background: var(--acento-suave);
color: inherit;
border-bottom-color: var(--acento);
cursor: auto;
user-select: text;
-webkit-user-select: text;
}
/* Sobre fondo oscuro, el destapado tiene que seguir leyéndose. */
.tema-primero .spoiler.destapado,
.hilo-mensaje .spoiler.destapado,
.comentario .spoiler.destapado {
background: rgb(255 201 51 / .2);
color: inherit;
}
/* La lista de apodos que sale al escribir @: flota bajo la barra, sin mover la caja. */
.cf-apodos {
position: absolute;
top: calc(100% + .3rem);
left: 0;
z-index: 40;
min-width: 11rem;
max-width: min(22rem, 90vw);
max-height: 13rem;
overflow-y: auto;
background: var(--sup-2);
border: 2px solid var(--fondo);
box-shadow: 3px 3px 0 rgb(0 0 0 / .35);
}
.cf-apodo {
display: block;
width: 100%;
margin: 0;
padding: .45rem .6rem;
background: transparent;
color: var(--texto);
border: 0;
border-bottom: 1px solid var(--linea-2);
font: inherit;
text-align: left;
cursor: pointer;
}
.cf-apodo:last-child { border-bottom: 0; }
.cf-apodo:hover,
.cf-apodo.elegido { background: var(--acento); color: var(--acento-tinta); }
.cf-vacio {
padding: .45rem .6rem;
color: var(--texto-2, #6b5f52);
font-size: .9rem;
}
@media (max-width: 34rem) {
.cf-boton { padding: .35rem .4rem; }
.cf-sep { display: none; }
.cf-vista-boton { margin-left: 0; }
}
/* --- El perfil, en tarjetas ------------------------------------------------------------
Misma tinta y misma sombra roja que el resto: la persona arriba, sus cifras justo debajo
(fichas, temas y mensajes, sin abrir nada) y lo conseguido a continuación, una tarjeta debajo de
otra para bajar leyendo sin columnas que dejen huecos. Las casillas llevan el número grande
porque es lo único que se mira de reojo. */
.ficha-perfil {
display: grid; grid-template-columns: 1fr;
grid-template-areas: "quien" "aportes" "insignias";
gap: .8rem; margin-bottom: .8rem; align-items: start;
}
.ficha-perfil > .tarjeta-perfil { margin-bottom: 0; }
.ficha-perfil > section:first-child { grid-area: quien; }
#cajaAportes { grid-area: aportes; }
#cajaInsignias { grid-area: insignias; }
#cajaAportes .cifras { margin: 0; }
/* Lo que ha puesto, cada cosa en su recuadro y uno debajo de otro, sin pestañas que escondan nada. */
.rejilla-perfil {
display: grid; grid-template-columns: 1fr;
gap: .8rem; align-items: start;
}
.rejilla-perfil > .tarjeta-perfil { margin-bottom: 0; }
.rejilla-perfil .tarjeta-perfil > h2 { margin: 0 0 .55rem; }
/* Los ajustes, arriba del todo y plegados: no ocupan sitio hasta que uno va a tocar algo de su
cuenta. El artículo va en columna solo para poder subir este desplegable sin mover el HTML. */
#perfil { display: flex; flex-direction: column; }
#perfil[hidden] { display: none; }
#perfil > .rol { order: -2; }
#ajustesPerfil { order: -1; }
.plegable-ajustes { margin: 0 0 .8rem; }
.plegable-ajustes > summary {
display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none;
font-family: var(--fuente-titular); font-size: 1rem; line-height: 1;
text-transform: uppercase; letter-spacing: .06em;
background: var(--sup-2); color: var(--texto);
border: 2px solid var(--fondo); box-shadow: 3px 3px 0 rgb(224 69 58 / .4);
padding: .5rem .85rem .45rem;
}
.plegable-ajustes > summary::-webkit-details-marker { display: none; }
.plegable-ajustes > summary::after {
content: '▾'; color: var(--acento); font-size: .9rem; transition: transform .2s ease;
}
.plegable-ajustes[open] > summary::after { transform: rotate(180deg); }
.plegable-ajustes > summary:hover { background: var(--sup-1); }
.plegable-ajustes .cuerpo-ajustes {
background: var(--sup-1); border: 2px solid var(--fondo);
box-shadow: 4px 4px 0 rgb(224 69 58 / .35);
padding: .9rem 1rem 1rem; margin-top: .8rem;
}
.plegable-ajustes .cuerpo-ajustes > h3:first-of-type { margin-top: 0; }
.tarjeta-perfil {
background: var(--sup-1); border: 2px solid var(--fondo);
box-shadow: 4px 4px 0 rgb(224 69 58 / .35);
padding: .9rem 1rem 1rem; margin-bottom: .8rem;
}
.tarjeta-perfil > h2, .tarjeta-perfil .cabeza-tarjeta h2 { margin: 0; }
.cabeza-tarjeta { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.cabeza-tarjeta .marcador {
font-family: var(--fuente-titular); font-size: 1.5rem; line-height: 1;
color: var(--acento); letter-spacing: .02em;
}
.enlace-boton {
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--acento); font-family: var(--fuente-titular); font-size: var(--t-sm);
text-transform: uppercase; letter-spacing: .06em; text-decoration: underline;
}
.ficha-perfil .perfil-cabeza {
display: flex; align-items: center; gap: .9rem;
border: 0; padding: 0; margin: 0 0 .8rem;
}
.ficha-perfil .perfil-quien { min-width: 0; }
.ficha-perfil .perfil-cabeza h1 { overflow-wrap: anywhere; }
.ficha-perfil .perfil-cabeza .inicial.grande,
.ficha-perfil .perfil-cabeza .avatar.grande {
width: 7rem; height: 7rem; font-size: 2.6rem; margin: 0; flex: 0 0 auto;
border: 3px solid var(--fondo); box-shadow: 4px 4px 0 rgb(224 69 58 / .45);
object-fit: cover;
}
.ficha-perfil .perfil-cabeza h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: .95; margin: 0 0 .3rem; }
.perfil-acciones { margin-top: .8rem; }
.ficha-perfil .cifras { grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); margin: 0; }
.ficha-perfil .cifras li { padding: .55rem .6rem .45rem; }
.ficha-perfil .cifras strong { font-size: 1.8rem; }
.barra { display: block; height: .85rem; background: var(--fondo); border: 2px solid var(--fondo); margin: 0 0 .6rem; }
.barra > span { display: block; height: 100%; width: 0; background: var(--acento); transition: width .3s ease; }
#cajaInsignias .insignias { grid-template-columns: 1fr; margin: 0; }
.amigos-lista {
display: flex; gap: .75rem; overflow-x: auto; padding: .2rem 0 .45rem;
margin: 0; grid-template-columns: none; scrollbar-width: thin;
}
.amigos-lista li { flex: 0 0 auto; width: 5.1rem; }
.amigos-lista a {
display: flex; flex-direction: column; align-items: center; gap: .3rem;
border: 0; background: none; padding: 0; text-align: center;
}
.amigos-lista a:hover { border: 0; }
.amigos-lista .inicial, .amigos-lista .avatar {
width: 4.6rem; height: 4.6rem; font-size: 1.6rem;
border: 2px solid var(--fondo); box-shadow: 3px 3px 0 rgb(224 69 58 / .3);
object-fit: cover;
}
.amigos-lista li > a > span:last-child { font-size: var(--t-xs); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; max-width: 5.1rem; }
/* La bandera del país, dibujada: el emoji de bandera no existe en Windows y salían las letras. */
.bandera {
width: 1.35em; height: 1em; display: inline-block; object-fit: cover;
vertical-align: -.12em; box-shadow: 0 0 0 1px rgb(0 0 0 / .45);
background: var(--sup-2);
}
.bandera-muestra .bandera { width: 2.4em; height: 1.75em; vertical-align: -.35em; }
h3 .bandera-muestra { margin-left: .3rem; }
/* ===== Los ajustes de la cuenta: una fila por cosa y su mando a la derecha =====
Es el modelo C de los ejemplos de docs/ejemplos-ajustes.html: el nombre a la izquierda y, a la
derecha, el interruptor, el desplegable o el botón. Se ve qué está puesto sin abrir nada. */
.grupo-ajustes { margin: 0 0 var(--e-6); }
.grupo-ajustes > h2 { font-size: var(--t-xl); margin: 0 0 .15rem; }
.grupo-ajustes > .nota { margin: 0 0 var(--e-3); }
.filas-ajustes {
background: var(--sup-1);
border: 2px solid var(--fondo);
box-shadow: 4px 4px 0 rgb(224 69 58 / .35);
padding: 0 1rem;
}
.fila-ajuste {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: .35rem var(--e-5);
padding: .9rem 0;
border-bottom: 2px solid var(--fondo);
}
.fila-ajuste:last-child { border-bottom: 0; }
.fila-ajuste h3 { margin: 0; font-size: var(--t-md); text-transform: none; letter-spacing: 0; }
.fila-ajuste .nota { margin: .1rem 0 0; }
.fila-ajuste .mando { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.fila-ajuste .mando select { width: auto; min-width: 9rem; height: 2.4rem; }
.fila-ajuste .mando .boton { min-height: 2.4rem; font-size: var(--t-sm); }
.fila-ajuste .cuerpo-fila { grid-column: 1 / -1; padding: .6rem 0 .2rem; }
.fila-ajuste .cuerpo-fila > label:first-child { margin-top: 0; }
.fila-ajuste .cuerpo-fila .acciones { margin-top: .7rem; }
/* El interruptor de sí o no, con la pista de la izquierda y la palabra a la derecha. */
.ajuste-si { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.ajuste-si input { position: absolute; opacity: 0; width: 0; height: 0; }
.ajuste-si .pista {
flex: none; position: relative; width: 2.7rem; height: 1.4rem;
background: var(--sup-3); border: 2px solid var(--linea-2); transition: background .15s, border-color .15s;
}
.ajuste-si .pista::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 1.05rem; height: calc(100% - 4px);
background: var(--texto-3); transition: left .15s ease, background .15s ease;
}
.ajuste-si input:checked + .pista { background: var(--acento-suave); border-color: var(--acento); }
.ajuste-si input:checked + .pista::after { left: calc(100% - 1.05rem - 2px); background: var(--acento); }
.ajuste-si input:focus-visible + .pista { box-shadow: 0 0 0 3px var(--acento-suave); }
.ajuste-si .estado { font-size: var(--t-sm); color: var(--texto-2); min-width: 1.6rem; }
.ajuste-si input:checked ~ .estado { color: var(--texto); }
/* El tamaño de la letra: sube los tamaños de texto, no los huecos, así que nada se descoloca. */
html[data-letra='grande'] {
--t-xs: .875rem; --t-sm: .95rem; --t-md: 1.08rem; --t-lg: 1.2rem; --t-xl: 1.5rem; --t-2xl: 1.9rem;
}
html[data-letra='muy-grande'] {
--t-xs: .95rem; --t-sm: 1.03rem; --t-md: 1.17rem; --t-lg: 1.3rem; --t-xl: 1.63rem; --t-2xl: 2.05rem;
}
/* Y los spoilers, a la vista, para quien ha pedido no tener que pulsarlos. */
html[data-spoilers='no'] .spoiler {
background: none; color: inherit; border-color: transparent; padding: 0; cursor: auto;
}
@media (max-width: 34rem) {
.fila-ajuste { grid-template-columns: 1fr; }
.fila-ajuste .mando { justify-content: flex-start; flex-wrap: wrap; }
.fila-ajuste .mando select { width: 100%; }
}
/* El botón de borrar la cuenta, rojo de verdad: no se pulsa sin querer. */
.boton.borrar-fuerte { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.boton.borrar-fuerte:hover { background: #c8372d; border-color: #c8372d; }
/* ====================== Mi lista, forma «M1» (20-10-2026) ======================
El dueño eligió este modelo entre los seis de demo/mi-lista-versiones.html: los estados con su cuenta,
el buscador y el orden en una barra, y cada serie en una fila con sus datos, lo último que se sabe y
sus mandos. Va al final del archivo a propósito: el tema «G2 bocadillo» pinta de amarillo cualquier
botón con un selector que pesa más que .secundario, así que aquí se iguala la pelea y mandan estas
reglas. */
.lista-mi-lista, .barra-mi-lista { max-width: none; }
.barra-mi-lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-4); }
.chips-lista { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.mandos-lista { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.mandos-lista input[type="search"] { min-width: 13rem; }
.mandos-lista select { width: auto; }
.cuenta-lista { margin: var(--e-3) 0 0; font-family: var(--fuente-datos); font-size: var(--t-xs);
text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.dato-lista { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--texto-3); }
/* Los botones de estado: marco fino y fondo hueco; el que está puesto, en amarillo y con la sombra dura.
Llevan nombre propio (.chip-estado) para no chocar con el .boton del tema. */
.chips-lista button.chip-estado {
display: inline-flex; align-items: baseline; gap: .45rem;
background: transparent; border: 2px solid var(--linea-2); color: var(--texto-2);
box-shadow: none; font-family: var(--fuente-titular); font-weight: 400; text-transform: uppercase;
letter-spacing: .04em; font-size: var(--t-sm); padding: .3rem .6rem; line-height: 1.2;
}
.chips-lista button.chip-estado:hover { background: var(--sup-2); border-color: var(--acento); color: var(--texto); box-shadow: none; }
.chips-lista button.chip-estado.puesto { background: var(--acento); border-color: var(--fondo); color: var(--acento-tinta); box-shadow: 3px 3px 0 rgb(224 69 58 / .9); }
.chip-estado .cuenta-chip { font-family: var(--fuente-datos); font-size: var(--t-xs); color: inherit; opacity: .7; }
/* Los mandos de cada fila, en una línea recogida: la pregunta, el desplegable y los dos botones. */
.mi-lista-fila .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-3); }
.mi-lista-fila .acciones > label { margin: 0; font-family: var(--fuente-datos); font-size: var(--t-xs);
text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.mi-lista-fila .acciones select { flex: 0 0 auto; width: auto; min-width: 9.5rem; margin: 0; }
.mi-lista-fila .acciones .boton, .mi-lista-fila .acciones button {
min-height: 0; padding: .35rem .7rem; font-size: var(--t-xs); box-shadow: none;
}
/* Abrir la ficha y quitar van en seco: lo único amarillo de la fila es la etiqueta de capítulo nuevo. */
.mi-lista-fila .boton.boton-seco, .mi-lista-fila button.boton-seco {
background: transparent; border: 2px solid var(--linea-2); color: var(--texto-2);
box-shadow: none; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.mi-lista-fila .boton.boton-seco:hover, .mi-lista-fila button.boton-seco:hover {
background: transparent; border-color: var(--acento); color: var(--acento); box-shadow: none;
}
.mi-lista-fila button.boton-seco:hover { border-color: var(--alerta); color: var(--alerta); }
@media (max-width: 640px) {
.mandos-lista { margin-left: 0; width: 100%; }
.mandos-lista input[type="search"] { min-width: 0; flex: 1 1 auto; }
.mandos-lista select { flex: 1 1 auto; }
.mi-lista-fila .acciones select { min-width: 0; flex: 1 1 100%; }
}
/* En el móvil la barra se parte en dos líneas (buscador y orden, cada uno a lo ancho) y la fila se queda
en horizontal con la portada pequeña: apilarla dejaba la ficha larguísima y no se veía dónde acaba una
serie y empieza la siguiente. */
@media (max-width: 640px) {
.mandos-lista { flex-wrap: wrap; }
.mandos-lista input[type="search"], .mandos-lista select { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 480px) {
.lista-mi-lista .mi-lista-fila { flex-direction: row; gap: var(--e-3); padding: var(--e-2); }
.mi-lista-fila .portada-lista { width: 2.6rem; height: 3.7rem; }
.mi-lista-fila .titulo-lista { font-size: var(--t-md); }
.mi-lista-fila .acciones { gap: var(--e-2); }
}
/* En el móvil la etiqueta «nuevo» ya la dice el filete amarillo y la línea del capítulo: se quita para
que el título no se parta en dos renglones. */
@media (max-width: 480px) { .mi-lista-fila .pilla { display: none; } }
/* --- Mensajes: la bandeja (la M1 de demo/mensajes-versiones.html) --- */
.buzon-barra, .buzon-cuenta, .buzon-lista, .buzon-lista * { text-align: left; }
.buzon-detalle, .buzon-nota, .buzon-pie, .buzon-linea { max-width: none; }
.buzon-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-4); }
.buzon-filtros { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.buzon-filtros button.chip-estado {
font: inherit; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
display: inline-flex; align-items: center; gap: var(--e-1); padding: var(--e-1) var(--e-2);
background: transparent; color: var(--texto-2); border: 2px solid var(--linea-2); border-radius: 0;
cursor: pointer; box-shadow: none;
}
.buzon-filtros button.chip-estado:hover { background: var(--sup-2); border-color: var(--acento); color: var(--texto); }
.buzon-filtros button.chip-estado.puesto { background: var(--acento); border-color: var(--fondo); color: var(--acento-tinta); box-shadow: 3px 3px 0 rgb(224 69 58 / .9); }
.buzon-filtros .chip-estado b { font-family: var(--fuente-datos); font-size: .72rem; letter-spacing: 0; opacity: .7; }
#marcarTodo { margin-left: auto; }
.buzon-cuenta { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--texto-3); margin: var(--e-3) 0 var(--e-2); }
.buzon-lista { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--linea); }
.buzon-lista > li { position: relative; display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-2) var(--e-3) var(--e-3); border-bottom: 1px solid var(--linea); }
.buzon-lista > li.sin-leer { background: linear-gradient(90deg, var(--acento-suave), transparent 60%); }
.buzon-lista > li.sin-leer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acento); }
.buzon-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin: 0; }
.buzon-linea .buzon-fecha { margin-left: auto; }
.tipo-buzon { display: inline-flex; align-items: center; padding: .05rem .45rem .1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--linea-2); color: var(--texto-2); background: var(--sup-1); white-space: nowrap; }
.tipo-buzon.privado { color: #ffd0e6; border-color: rgb(224 127 176 / .55); background: rgb(224 127 176 / .16); }
.tipo-buzon.respuesta { color: #ffd88f; border-color: var(--acento-borde); background: var(--acento-suave); }
.tipo-buzon.mencion { color: #b6d8ff; border-color: rgb(89 167 255 / .55); background: rgb(89 167 255 / .16); }
.tipo-buzon.capitulo { color: var(--verde-claro); border-color: rgb(143 206 107 / .5); background: var(--verde-suave); }
.tipo-buzon.web { color: var(--texto-3); border-style: dashed; background: transparent; }
.buzon-detalle { margin: 0; color: var(--texto-2); font-size: var(--t-sm); }
.buzon-detalle a { color: var(--acento-claro); }
.buzon-nota { margin: 0; color: var(--texto-3); font-size: var(--t-xs); border-left: 2px solid var(--linea-2); padding-left: var(--e-2); }
.buzon-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin: 0; }
.buzon-pie .buzon-fecha { margin-right: auto; }
.buzon-fecha { font-family: var(--fuente-datos); font-size: .72rem; color: var(--texto-3); }
.boton-linea { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .55rem; border: 2px solid var(--linea-2); background: transparent; color: var(--texto); font: inherit; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; text-decoration: none; }
.boton-linea:hover { border-color: var(--acento); color: var(--acento); }
.buzon-pie .marcar { background: none; border: 0; padding: 0; color: var(--texto-3); font: inherit; font-size: var(--t-xs); text-decoration: underline; cursor: pointer; }
.buzon-pie .marcar:hover { color: var(--acento); }
@media (max-width: 640px) {
#marcarTodo { margin-left: 0; }
.buzon-pie .buzon-fecha { flex: 1 1 100%; }
}
/* Los botones de dentro de una fila no llevan la pintura amarilla del tema: se atan con mas peso
que button:not(.enlace-boton):not(.herramienta), que es quien manda en el resto de la web. */
.buzon-lista button.boton-linea, .buzon-barra button.boton-linea {
background: transparent; color: var(--texto); border: 2px solid var(--linea-2);
box-shadow: none; border-radius: 0;
}
.buzon-lista button.boton-linea:hover, .buzon-barra button.boton-linea:hover {
background: transparent; color: var(--acento); border-color: var(--acento);
}
.buzon-lista button.marcar {
background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
color: var(--texto-3); font: inherit; font-size: var(--t-xs); text-decoration: underline; cursor: pointer;
}
.buzon-lista button.marcar:hover { color: var(--acento); background: none; }
/* ---------- Chats (M2): bandeja de una columna y conversación aparte ---------- */
.chats-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: var(--e-4) 0 var(--e-2); }
#buscaChats { font: inherit; font-size: .9rem; flex: 1 1 16rem; max-width: 26rem; padding: .45rem .7rem; background: var(--sup-1); color: var(--texto); border: 2px solid var(--linea-2); }
#buscaChats:focus { border-color: var(--acento); outline: none; }
.chats-cuenta { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--texto-3); }
.chats-filas { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--linea); }
.chats-filas > li { border-bottom: 1px solid var(--linea); }
.chats-filas a { display: grid; grid-template-columns: 2.6rem 1fr auto; grid-template-rows: auto auto; align-items: center; gap: .1rem var(--e-3); padding: var(--e-3) var(--e-2); text-decoration: none; color: var(--texto-2); }
.chats-filas a:hover { background: var(--sup-1); }
.chats-filas a:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.cara-chat { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--sup-3); color: var(--acento); font-family: var(--fuente-titular); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; grid-row: span 2; }
.chats-filas strong { display: flex; align-items: center; gap: .35rem; color: var(--texto); font-size: 1rem; }
.chats-filas a.sin-leer strong { color: var(--acento-claro); }
.chats-filas .fecha { grid-column: 3; grid-row: 1; justify-self: end; font-size: .7rem; }
.chats-extracto { grid-column: 2; grid-row: 2; color: var(--texto-3); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats-sin-leer { grid-column: 3; grid-row: 2; justify-self: end; display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; background: var(--acento); color: var(--acento-tinta); font-family: var(--fuente-datos); font-size: .72rem; font-weight: 700; }
/* La conversación, a pantalla completa dentro de la misma página. */
#vistaHilo { margin-top: var(--e-3); }
.chats-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--e-3); padding: .5rem .6rem; background: var(--sup-1); border: 2px solid var(--linea); border-bottom: 3px solid var(--linea-2); position: sticky; top: 0; z-index: 3; }
.chats-quien { display: grid; gap: 0; }
.chats-cabeza h2 { margin: 0; font-family: var(--fuente-titular); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.chats-cabeza .nota { margin: 0; font-size: .75rem; }
#perfilOtro { margin-left: auto; }
#volver { font: inherit; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: none; border: 0; box-shadow: none; padding: .25rem .1rem; color: var(--texto-3); cursor: pointer; }
#volver:hover { color: var(--acento); text-decoration: underline; }
.chats-mensajes { list-style: none; margin: var(--e-3) 0 0; padding: var(--e-2) 0 var(--e-3); display: flex; flex-direction: column; gap: .3rem; max-width: none; max-height: 60vh; overflow-y: auto; }
.chats-dia { display: flex; align-items: center; gap: .6rem; margin: var(--e-3) 0 .2rem; list-style: none; }
.chats-dia::before, .chats-dia::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.chats-dia span { font-family: var(--fuente-datos); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); }
.chats-msg { display: flex; flex-direction: column; max-width: min(34rem, 78%); }
.chats-msg.mia { align-self: flex-end; align-items: flex-end; }
.chats-msg.suya { align-self: flex-start; align-items: flex-start; }
.chats-msg.seguido .chats-burbuja { margin-top: -.1rem; }
.chats-burbuja { padding: .55rem .8rem; background: var(--sup-1); border: 2px solid var(--linea-2); color: var(--texto); font-size: var(--cuerpo); }
.mia .chats-burbuja { background: var(--sup-3); border-color: var(--acento-borde); }
.chats-autor { font-family: var(--fuente-datos); font-size: .68rem; color: var(--texto-3); margin-bottom: .15rem; }
.chats-acciones { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; opacity: 0; transition: opacity .12s; }
.chats-msg:hover .chats-acciones, .chats-msg:focus-within .chats-acciones { opacity: 1; }
@media (hover: none) { .chats-acciones { opacity: 1; } }
.chats-acciones .fecha { font-size: .66rem; }
.chats-acciones button { font: inherit; font-size: .68rem; background: none; border: 0; box-shadow: none; padding: 0; color: var(--texto-3); text-decoration: underline; cursor: pointer; }
.chats-acciones button:hover { color: var(--alerta); }
.chats-vacio { list-style: none; color: var(--texto-3); padding: var(--e-3) 0; }
#nosAmigos { border-left: 3px solid var(--acento); padding-left: .6rem; }
#formPrivado { margin-top: var(--e-3); }
@media (max-width: 640px) {
.chats-msg { max-width: 88%; }
.chats-cabeza { position: static; }
.chats-mensajes { max-height: none; }
#perfilOtro { margin-left: 0; }
.chats-filas a { grid-template-columns: 2.3rem 1fr auto; }
.cara-chat { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
}
/* ---------- Comunidad (21-10-2026): las secciones donde se pregunta lo que no es de una serie ---------- */
.secciones-comunidad { margin: var(--e-4) 0 var(--e-5); }
.rejilla-secciones { list-style: none; margin: var(--e-3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--e-2); max-width: none; }
.rejilla-secciones a { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; padding: .6rem .7rem; background: var(--sup-1); border: 2px solid var(--linea); color: var(--texto); text-decoration: none; }
.rejilla-secciones a:hover { border-color: var(--acento); }
.rejilla-secciones a:hover span:first-child { color: var(--acento-claro); }
.detalle-seccion { display: block; margin-top: .15rem; font-size: .78rem; line-height: 1.35; color: var(--texto-3); font-weight: 400; }
.cuenta-seccion { font-family: var(--fuente-datos); font-size: 1.05rem; color: var(--acento); }
@media (max-width: 640px) { .rejilla-secciones { grid-template-columns: 1fr 1fr; } .detalle-seccion { display: none; } }
/* ---------- Tablón de la comunidad (M1) ---------- */
.secciones-comunidad .tablon-cabeza { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:1rem 0 .5rem; }
.secciones-comunidad .tablon-cabeza h3 { margin:0; font-family:var(--fuente-titular); text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; color:var(--texto-2); }
.secciones-comunidad .tablon-cabeza .boton { margin-left:auto; }
.rejilla-secciones { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.rejilla-secciones button.apartado { display:flex; flex-direction:column; gap:.1rem; min-width:0; text-align:left; padding:.55rem .7rem; border:2px solid var(--linea); background:var(--sup-1); color:var(--texto); cursor:pointer; font:inherit; }
.rejilla-secciones button.apartado strong { overflow-wrap:break-word; }
.rejilla-secciones button.apartado:hover { border-color:var(--acento); }
.rejilla-secciones button.apartado[aria-pressed="true"] { border-color:var(--acento); background:var(--sup-2); }
.rejilla-secciones button.apartado strong { display:block; font-size:.95rem; }
.rejilla-secciones button.apartado span { font-family:var(--fuente-datos); font-size:.72rem; color:var(--texto-3); }
.ultimas-comunidad { list-style:none; margin:.2rem 0 .6rem; padding:0; max-width:none; }
.ultimas-comunidad > li { padding:.6rem 0; border-bottom:1px solid var(--linea); }
.titulo-pregunta { display:inline-block; color:var(--texto); text-decoration:none; font-weight:700; font-size:1rem; line-height:1.35; }
.titulo-pregunta:hover { color:var(--acento-claro); text-decoration:underline; }
.meta-pregunta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.25rem; font-size:.76rem; color:var(--texto-3); }
.seccion-apartado { padding:.06rem .4rem; border:1px solid var(--linea-2); font-family:var(--fuente-datos); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--texto-2); }
.seccion-apartado[data-s="dudas"] { border-color:#59a7ff; color:#59a7ff; }
.seccion-apartado[data-s="problemas"] { border-color:#e0453a; color:#e0453a; }
.seccion-apartado[data-s="sugerencias"] { border-color:#7fbf6a; color:#7fbf6a; }
.seccion-apartado[data-s="peticiones"] { border-color:var(--acento); color:var(--acento); }
.seccion-apartado[data-s="presentaciones"] { border-color:#e07fb0; color:#e07fb0; }
.seccion-apartado[data-s="traducciones"] { border-color:#c79bff; color:#c79bff; }
.cara-pregunta { display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; background:var(--sup-3); color:var(--acento); font-family:var(--fuente-titular); font-weight:700; font-size:.8rem; }
.estado-apartado { font-family:var(--fuente-datos); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-3); }
.estado-apartado.espera { color:#e0453a; }
.estado-apartado.bueno, .marca-resuelta { color:#7fbf6a; }
.marca-resuelta { font-family:var(--fuente-datos); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; margin-left:.35rem; }
.vacio-tablon { padding:.8rem; border:2px dashed var(--linea-2); color:var(--texto-3); font-size:.9rem; }
/* ---------- «Antes de escribir»: dónde va cada cosa ---------- */
.como-funciona { margin-top:1.4rem; padding:.9rem 1rem 1rem; background:var(--sup-1); border:2px solid var(--linea); border-left:6px solid var(--acento); }
.como-funciona h3 { margin:0; font-family:var(--fuente-titular); text-transform:uppercase; letter-spacing:.09em; font-size:.9rem; color:var(--acento); }
.como-lista { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.7rem 1.6rem; margin:.7rem 0 0; }
.como-lista > div { border-top:1px solid var(--linea); padding-top:.45rem; }
.como-lista dt { font-family:var(--fuente-titular); text-transform:uppercase; letter-spacing:.07em; font-size:.8rem; color:var(--texto); }
.como-lista dd { margin:.15rem 0 0; color:var(--texto-2); font-size:.88rem; line-height:1.45; }
.como-lista a { color:var(--acento-claro); }
@media (max-width:560px) { .como-lista { grid-template-columns:1fr; } }
/* ---------- Hilo del foro: anidado, ramas plegadas y mensajes nuevos ---------- */
.hilo-mensaje.nuevo { border-left: 4px solid var(--acento); }
.hilo-mensaje.destello { animation: destello-hilo 1.8s ease-out; }
@keyframes destello-hilo { 0%, 40% { background: rgb(255 201 51 / .18); } 100% { background: #221b14; } }
.aviso-nuevos { list-style: none; margin: 0 0 .7rem; padding: .45rem .7rem; background: rgb(255 201 51 / .1);
border: 1px dashed var(--acento); color: #fff4dd; font-size: .85rem; }
.aviso-nuevos button { background: none; border: 0; color: var(--acento-claro); font: inherit;
font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 0; }
.hilo-acciones .encendido { color: var(--verde) !important; border-color: var(--verde) !important; }
.hilo-acciones .utiles { color: var(--verde); font-size: .75rem; }
.hilo-acciones .enlace-mensaje { background: none; border: 0; color: #9a8a70; font: inherit; font-size: .72rem;
text-decoration: underline; cursor: pointer; padding: 0 .2rem; }
.hilo-acciones .enlace-mensaje:hover { color: var(--acento); }
button.responde-chip { background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
color: #9a8a70; cursor: pointer; }
button.responde-chip:hover { color: var(--acento); text-decoration: underline; }
/* ---------- Crear un tema desde la comunidad ---------- */
.ventana-tema { max-width: 38rem; }
.ventana-tema .chips-apartado { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .9rem; }
.ventana-tema .chip-apartado { font-family: var(--fuente-datos); font-size: .72rem; text-transform: uppercase;
letter-spacing: .04em; background: var(--sup-1); color: var(--texto-2); border: 2px solid var(--linea);
box-shadow: none; padding: .28rem .55rem; cursor: pointer; }
.ventana-tema .chip-apartado:hover { border-color: var(--texto-2); color: var(--texto); }
.ventana-tema .chip-apartado[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #1b1712; }
.ventana-tema .campo-ventana { display: block; margin: 0 0 .8rem; }
.ventana-tema .campo-ventana > span { display: block; font-family: var(--fuente-datos); font-size: .7rem;
text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin-bottom: .25rem; }
.ventana-tema .campo-ventana input, .ventana-tema .campo-ventana textarea { width: 100%; }
.ventana-tema .ventana-pie { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }
.ventana-tema .ventana-apartados { margin: 0 0 .3rem; }
/* ============================================================================================
22. La puerta (Entrar) en forma de cartel (23-10-2026)
Modelo C, elegido por crix0 entre los cuatro de mockups/entrar-modelos.html. El titular manda y el
botón es lo más grande de la página; los dos campos van en una fila en el monitor y uno debajo de
otro en el móvil. Aquí viven también dos piezas que valen en cualquier formulario: el ojo para leer
la contraseña (el campo se llama .campo-ojo) y el aviso de las mayúsculas (.aviso-mayus).
============================================================================================ */
main.puerta { max-width: 46rem; margin-inline: auto; }
.puerta h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: .95; margin: 0 0 var(--e-3);
text-align: center; text-shadow: 4px 4px 0 rgb(200 64 47 / .85); }
.puerta .intro { max-width: 36ch; margin: 0 auto var(--e-5); text-align: center;
font-size: var(--t-lg); color: var(--texto-2); }
.puerta form { text-align: left; }
/* Los dos campos en una fila; en el móvil, uno debajo de otro (final de este apartado). */
.puerta .fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.puerta .fila-campos > div { min-width: 0; }
.puerta .fila-campos label { margin-top: 0; }
/* El botón es el objeto más grande de la página: es a lo que se viene. */
.puerta button.boton-entrar { width: 100%; min-height: 3.2rem; margin-top: var(--e-5);
font-family: var(--fuente-titular); font-size: var(--t-xl); font-weight: 700;
letter-spacing: .04em; box-shadow: var(--sombra); }
.puerta button.boton-entrar:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra); }
.puerta button.boton-entrar:active { transform: translate(2px, 2px); box-shadow: var(--sombra-corta); }
/* --- El ojo: poder leer la contraseña antes de darla por buena --- */
.campo-ojo { position: relative; }
.campo-ojo input { padding-right: 4.2rem; }
.campo-ojo button.ver-clave { position: absolute; top: 0; right: 0;
height: var(--alto-campo); width: 4rem; min-height: 0; padding: 0;
background: transparent; border: 0; box-shadow: none;
color: var(--acento); font-size: var(--t-xs); letter-spacing: .04em; }
.campo-ojo button.ver-clave:hover,
.campo-ojo button.ver-clave:active { background: transparent; color: var(--acento-alto);
box-shadow: none; transform: none; }
/* --- El aviso de las mayúsculas: una raya a la izquierda, como el resto de avisos --- */
.aviso-mayus { display: flex; gap: var(--e-2); margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3);
border-left: 3px solid var(--acento); background: var(--acento-suave);
font-size: var(--t-sm); color: var(--texto); }
.aviso-mayus[hidden] { display: none; }
/* --- Las salidas: una línea debajo del botón y, en pequeño, las normas --- */
.puerta .notas-puerta { margin: var(--e-5) 0 0; text-align: center;
font-size: var(--t-sm); color: var(--texto-2); }
.puerta .notas-puerta a { color: var(--acento-claro); }
.puerta .normas-puerta { margin: var(--e-3) 0 0; text-align: center;
font-size: var(--t-xs); color: var(--texto-3); }
.puerta .normas-puerta a { color: var(--texto-2); }
/* «Volver a donde estaba», solo cuando se llega desde otra página (?volver=). */
.volver-puerta { margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.volver-puerta[hidden] { display: none; }
.volver-puerta a { color: var(--acento-claro); text-decoration: none; }
.volver-puerta a:hover { color: var(--texto); text-decoration: underline; }
/* El error y el «ya estás dentro» van pegados al botón: son la respuesta a lo que acabas de pulsar,
no una nota al pie. */
.puerta .errores, .puerta .aviso-ok { margin-top: var(--e-4); }
/* La recuperación de la contraseña, cuando aparece, ocupa el mismo ancho que el resto. */
.puerta #botonOlvido { width: 100%; margin-top: var(--e-3); }
@media (max-width: 43.99rem) {
.puerta h1 { text-shadow: 3px 3px 0 rgb(200 64 47 / .85); }
.puerta .fila-campos { grid-template-columns: 1fr; gap: var(--e-3); }
}
/* ============================================================================================
23. La cuenta nueva: lo que solo hace falta aquí (23-10-2026)
Crear cuenta usa el mismo cartel que Entrar; esto es lo propio del alta: la barra que dice
cuánto aguanta la contraseña, el estado del apodo mientras se escribe y el aire de las
casillas. La contraseña se mide con lo puesto, no con reglas que nadie sabe de memoria.
============================================================================================ */
/* --- Cuánto aguanta la contraseña: cuatro trozos y una frase, no una nota del mínimo --- */
.barra-clave { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
margin: var(--e-2) 0 0; }
.barra-clave i { height: 4px; background: var(--linea-fuerte); border-radius: 0; }
.barra-clave i.mal { background: var(--alerta); }
.barra-clave i.vale { background: var(--acento); }
.barra-clave i.bien { background: var(--verde); }
.pista-clave { margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--texto-3);
min-height: 1.4em; }
.pista-clave.floja { color: var(--alerta); }
.pista-clave.buena { color: var(--verde); }
/* --- El apodo: debajo del campo, en el mismo sitio, se dice si vale y si está libre --- */
.estado-apodo { display: block; margin-top: var(--e-2); font-size: var(--t-xs);
color: var(--texto-3); }
.estado-apodo.libre { color: var(--verde); }
.estado-apodo.ocupado { color: var(--alerta); }
.estado-apodo.duda { color: var(--texto-2); }
/* --- Las casillas del alta: una detrás de otra, con aire, y la letra de la nota al lado --- */
.puerta .casilla { margin-top: var(--e-3); }
.puerta .casilla:first-of-type { margin-top: var(--e-4); }
.puerta .casilla span { font-size: var(--t-sm); color: var(--texto-2); }
.puerta .casilla strong, .puerta .casilla a { color: var(--texto); }
/* La comprobación de robot, con su sitio y sin pegotes. */
.puerta .cf-turnstile { margin: var(--e-4) 0 var(--e-2); }
.puerta #pistaRobot { color: var(--alerta); }
/* El correo y el apodo: el texto de ayuda, separado del campo, pero pegado a él. */
.puerta form > small { display: block; margin-top: var(--e-2); font-size: var(--t-xs);
color: var(--texto-3); }
/* El inicio en cartelera (24-10-2026), con la forma que aprobó crix0: la serie de la semana en
grande a la izquierda con sus webs, y a la derecha lo que se acaba de poner y lo que se habla.
Sin titular de portada: la primera línea de la página es la serie, que es lo que hay que ver. */
main.inicio { max-width: none; padding: 1.75rem 1.6rem 2.5rem; text-align: left; }
.inicio .solo-lectores {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.inicio .cartelera {
display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 2rem; align-items: start;
}
.inicio .rotulo {
font-family: var(--fuente-titular); font-size: 1.4rem; line-height: 1;
text-transform: uppercase; letter-spacing: .01em; color: var(--texto); margin: 0 0 .5rem;
}
.inicio .rotulo + .nota { margin-bottom: .8rem; }
.inicio .nota { font-size: .88rem; color: var(--texto-2); margin: 0 0 .6rem; }
.inicio .nota a { color: var(--texto); }
.inicio .regla { border: 0; border-top: 1px solid var(--linea); margin: 1.5rem 0 1.25rem; }
/* La serie de la semana: la portada manda. */
.inicio .destacado { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.inicio .destacado-portada {
display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
border: 2px solid var(--linea-2); background: var(--sup-2); border-radius: 0;
}
.inicio .aro {
font-family: var(--fuente-titular); font-size: 2.1rem; line-height: .98;
text-transform: uppercase; letter-spacing: .005em; color: var(--acento);
text-shadow: 2px 2px 0 rgb(143 31 22 / .40); margin: 0 0 .5rem;
}
.inicio .aro a { color: inherit; text-decoration: none; }
.inicio .aro a:hover { color: var(--acento-claro); }
.inicio .entradilla { font-size: .95rem; line-height: 1.5; color: var(--texto-2); max-width: 62ch; margin: 0 0 1rem; }
.inicio .enlaces { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.inicio .enlaces li {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
padding: .35rem 0; border-top: 1px solid var(--linea); font-size: .95rem;
}
.inicio .enlaces li:last-child { border-bottom: 1px solid var(--linea); }
.inicio .enlaces a { color: var(--texto); text-decoration: none; }
.inicio .enlaces a:hover { color: var(--acento-claro); text-decoration: underline; }
.inicio .hasta { font-family: var(--fuente-datos); font-size: .8rem; color: var(--acento); white-space: nowrap; }
.inicio .hasta.mal { color: #ffb3b8; }
.inicio .acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.inicio .boton-p {
font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2;
padding: .45rem .95rem; border: 2px solid var(--linea-2); background: var(--sup-1);
color: var(--texto); text-decoration: none; cursor: pointer; border-radius: 0;
}
.inicio .boton-p:hover { border-color: var(--acento); color: var(--acento); }
.inicio .boton-p.lleno { background: var(--acento); border-color: var(--acento); color: #1b1712; }
.inicio .boton-p.lleno:hover { background: var(--acento-claro); color: #1b1712; }
.inicio .boton-p:disabled { cursor: default; opacity: .85; }
/* El botón de «Lo sigo» es un