/* ========================================================= TINTERO — sistema de diseño Metáfora: un escritorio de taller de escritura, papel claro sobre un fondo marfil, con la tinta vino como color de marca. ========================================================= */ /* ========================================================= Temas Tres pieles intercambiables sobre el mismo sistema — todo el CSS de abajo usa variables, así que cambiar de tema es solo cambiar el atributo [data-theme] en . El vino (--tinta) es el hilo conductor de marca en los tres. ========================================================= */ :root, [data-theme="claro"] { /* Marca */ --principal: #540f21; /* vino — color de marca */ --secundario: #ffffff; /* blanco — color de marca */ /* Paleta derivada (tonos complementarios elegidos para no romper la estética) */ --escritorio: #faf6f0; /* fondo general, marfil cálido */ --superficie: #ffffff; /* tarjetas */ --superficie-alta: #f3e6e1; /* hover / fondos secundarios */ --borde: #e6d3cd; /* bordes cálidos suaves */ --papel: #fffdf9; /* hoja de participación */ --papel-sombra: #ecdfd7; --texto-papel: #2b0c14; /* texto sobre el papel */ --texto: #3a1620; /* texto principal sobre marfil */ --texto-tenue: #8a5b63; /* texto secundario */ --tinta: var(--principal); /* acento principal: CTA, likes, activo */ --tinta-fuerte: #37060f; --ambar: #a97438; /* acento técnica / gramática */ --oro: #caa14b; /* acento ganador */ --azul: #5c6b7a; /* acento opinión general — neutro frío que contrasta con el vino */ --coral: #c1442e; /* peligro / reportes — distinto del vino de marca */ --coral-fuerte: #9c3322; --exito: #4b6b3f; /* confirmaciones */ } /* Oscuro — paleta neutra de alto contraste. Antes se usaba una familia café/vino cerrada con el papel del editor en claro: el contraste era pobre y la hoja brillante en medio de una interfaz oscura resultaba agresiva. Aquí manda la legibilidad sobre la paleta de marca — el acento se aclara a un rosa vino que sí se lee sobre oscuro, y el papel se oscurece como todo lo demás. Referencia de contraste sobre el fondo: texto ~15:1, texto tenue ~7:1, acento ~8:1. */ [data-theme="oscuro"] { --principal: #7d2338; /* vino levantado: como bloque de fondo sí se lee */ --secundario: #f2f5f8; --escritorio: #0f1116; /* fondo general */ --superficie: #171a21; /* tarjetas */ --superficie-alta: #21262e; /* hover / fondos secundarios */ --borde: #2e343f; --papel: #1a1e26; /* la hoja del editor, ahora oscura */ --papel-sombra: #0b0d11; --texto-papel: #e8ecf2; --texto: #e6eaf0; --texto-tenue: #99a3b1; --tinta: #ef8fa2; /* acento principal, legible sobre oscuro */ --tinta-fuerte: #ffa9b9; --ambar: #e0a458; --oro: #d9b45f; --azul: #86aecd; --coral: #f0796c; --coral-fuerte: #ff9184; --exito: #7fc08a; } /* Musgo — propuesta alterna: papel-musgo en vez de marfil-rosado, con verde bosque como familia secundaria. El vino se conserva exactamente como acento de marca (botones, CTA, likes) para que siga siendo "Tintero". */ [data-theme="musgo"] { --principal: #540f21; --secundario: #ffffff; --escritorio: #f5f7ef; --superficie: #ffffff; --superficie-alta: #e9efe1; --borde: #d3ddc7; --papel: #fffef8; --papel-sombra: #e7e6d6; --texto-papel: #2b0c14; /* la tinta sigue siendo vino, sin importar el tema */ --texto: #24301f; --texto-tenue: #62795a; --tinta: var(--principal); --tinta-fuerte: #37060f; --ambar: #a97438; --oro: #b3962f; --azul: #4d6b6a; /* teal-musgo en vez de gris azulado */ --coral: #b6452e; --coral-fuerte: #93331f; --exito: #3f6b3a; } /* Tinta y papel. El vino deja de ser el suelo y pasa a ser el acento: los bloques macizos —hero, la banda de "cómo se opina", el cierre— se vuelven casi negros, y el vino aparece solo donde hay que hacer clic o mirar. Es el registro de los productos de lectura actuales: mucho blanco, contraste alto, y el color ganándose su sitio en vez de ocupar toda la pantalla. */ [data-theme="papel"] { --principal: #1c1815; /* el bloque de fondo ya no es vino, es tinta */ --secundario: #ffffff; --escritorio: #fbfaf7; /* papel de verdad: apenas cálido, casi blanco */ --superficie: #ffffff; --superficie-alta: #f1efe8; --borde: #e3ded3; --papel: #ffffff; --papel-sombra: #e7e2d7; --texto-papel: #14110f; --texto: #14110f; /* negro cálido, no gris: aquí se viene a leer */ --texto-tenue: #6d675e; --tinta: #8a1c33; /* el vino, ya de acento: botones, cifras, enlaces */ --tinta-fuerte: #6a1226; --ambar: #8f6529; --oro: #9c8330; --azul: #41566d; --coral: #b03e29; --coral-fuerte: #8c2f1d; --exito: #3f6136; } /* Noche. Oscuro, pero cálido — que es lo que lo distingue del tema "oscuro", que es gris azulado. Aquí el suelo tira a marrón y el texto a marfil, como una lámpara de escritorio a las dos de la mañana. Es hacia donde van las herramientas de escritura, y para textos largos cansa menos. */ [data-theme="noche"] { --principal: #7a2438; /* vino levantado, para que como bloque se lea */ --secundario: #f8f2e8; --escritorio: #13110e; --superficie: #1c1916; --superficie-alta: #272219; --borde: #332d24; --papel: #1c1916; --papel-sombra: #0c0a08; --texto-papel: #ece4d7; --texto: #ece4d7; /* marfil, no blanco: sobre negro el blanco deslumbra */ --texto-tenue: #9e9384; --tinta: #e6a0ac; /* el vino aclarado, que es lo único que se lee aquí */ --tinta-fuerte: #f2b4be; --ambar: #dda662; --oro: #d3b268; --azul: #8fb0c4; --coral: #ef8272; --coral-fuerte: #ff9c8d; --exito: #86c08c; } :root { --font-display: 'Fraunces', 'Georgia', serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --radius: 6px; --shadow-paper: 0 2px 0 var(--papel-sombra), 0 14px 28px -16px color-mix(in srgb, var(--tinta) 22%, transparent); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--escritorio); background-image: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--tinta) 6%, transparent), transparent 45%), radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--ambar) 7%, transparent), transparent 40%); color: var(--texto); font-family: var(--font-body); line-height: 1.55; min-height: 100vh; transition: background-color 0.2s ease, color 0.2s ease; } a { color: inherit; } /* La anchura del cuerpo depende de QUÉ hay en la pantalla. Una sola medida para todo el sitio no puede estar bien en los dos extremos: · lectura (720px) — un texto con sus opiniones, los términos, la ayuda. La medida cómoda de lectura son 65–75 caracteres por línea; a 980px la prosa se pasa de largo y cuesta encontrar el renglón siguiente. Esta pantalla no había que ensancharla: había que estrecharla. · normal (980px) — lo de siempre: formularios, perfiles, fichas. · ancho (1200px) — rejillas de tarjetas y herramientas. Ahí el tope de 980px dejaba la mitad de la pantalla vacía en cualquier monitor grande (a 1920px el cuerpo ocupaba el 51%). Va como variable y no como valor suelto porque la anchura se necesita en DOS sitios: este max-width y el flex-basis de .page-shell #app. Cambiar solo uno de los dos no tiene ningún efecto visible, que es justo la trampa en la que es fácil caer. La clase la pone el router, en claseDeAncho(). */ .container { --ancho-cuerpo: 980px; max-width: var(--ancho-cuerpo); margin: 0 auto; padding: 0 24px; } .container.cuerpo-ancho { --ancho-cuerpo: 1200px; } .container.cuerpo-lectura { --ancho-cuerpo: 720px; } /* ---------- Header ---------- */ header.site-header { border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: color-mix(in srgb, var(--superficie-alta) 92%, transparent); backdrop-filter: blur(6px); z-index: 50; box-shadow: inset 0 3px 0 var(--tinta); /* firma de marca: línea vino arriba, no un bloque completo */ } .site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; max-width: 980px; margin: 0 auto; } .wordmark { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.01em; display: flex; align-items: baseline; gap: 8px; cursor: pointer; } .wordmark .dot { color: var(--tinta); } nav.main-nav { display: flex; gap: 4px; align-items: center; } nav.main-nav a, nav.main-nav button.link { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-tenue); text-decoration: none; padding: 8px 12px; border-radius: var(--radius); background: none; border: none; cursor: pointer; } nav.main-nav a:hover, nav.main-nav button.link:hover { color: var(--texto); background: color-mix(in srgb, var(--tinta) 6%, transparent); } nav.main-nav a.active, nav.main-nav button.link.active { color: var(--tinta); font-weight: 700; background: color-mix(in srgb, var(--tinta) 8%, transparent); } .user-chip { font-family: var(--font-mono); font-size: 0.78rem; color: var(--texto-tenue); margin-right: 4px; } /* Selector de tema: un solo botón que va rotando entre claro/oscuro/musgo, para no meter un menú extra en un header que ya tiene bastante. */ .theme-toggle { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 12px; border-radius: 100px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-tenue); display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--tinta); color: var(--tinta); } .theme-toggle .swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); display: inline-block; } /* ---------- El desplegable de temas ---------- */ .theme-picker { position: relative; } .theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; /* por encima de la cabecera pegajosa */ min-width: 172px; padding: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 2px; } .theme-menu[hidden] { display: none; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; /* objetivo de toque cómodo también en móvil */ padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--texto); font-size: 0.9rem; text-align: left; cursor: pointer; } .theme-option:hover { background: var(--superficie-alta); } .theme-option:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; } /* El tema puesto no se marca solo con el fondo: lleva también la palomita y la negrita, que se ven aunque el contraste no se distinga (WCAG 1.4.1). */ .theme-option.activo { font-weight: 600; color: var(--tinta); } .theme-option.activo::after { content: '✓'; margin-left: auto; } /* Cada muestra lleva los colores DE SU tema, para poder elegir sin probar. Van a mano y no con variables porque las de un tema solo existen dentro de su propio bloque: aquí hay que pintar los cinco a la vez. */ .theme-option .swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--borde); flex-shrink: 0; } .swatch-claro { background: linear-gradient(135deg, #faf6f0 50%, #540f21 50%); } .swatch-oscuro { background: linear-gradient(135deg, #0f1116 50%, #ef8fa2 50%); } .swatch-musgo { background: linear-gradient(135deg, #f5f7ef 50%, #540f21 50%); } .swatch-papel { background: linear-gradient(135deg, #fbfaf7 50%, #8a1c33 50%); } .swatch-noche { background: linear-gradient(135deg, #13110e 50%, #e6a0ac 50%); } /* ---------- Botones ---------- */ button, .btn { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; border-radius: var(--radius); border: 1px solid var(--borde); background: var(--superficie-alta); color: var(--texto); padding: 10px 16px; cursor: pointer; transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease; } button:hover, .btn:hover { border-color: var(--tinta); } button:active { transform: translateY(1px); } button:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--tinta); border-color: var(--tinta-fuerte); color: var(--secundario); } .btn-primary:hover { background: var(--tinta-fuerte); border-color: var(--tinta-fuerte); } .btn-danger { background: transparent; border-color: var(--coral); color: var(--coral); } .btn-danger:hover { background: var(--coral); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; color: var(--texto-tenue); } .btn-ghost:hover { color: var(--texto); background: var(--superficie-alta); } .btn-small { padding: 6px 10px; font-size: 0.8rem; } /* ---------- Formularios ---------- */ input, textarea, select { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); } label { font-size: 0.82rem; color: var(--texto-tenue); display: block; margin-bottom: 6px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } .field { margin-bottom: 16px; } .hint { font-size: 0.8rem; color: var(--texto-tenue); margin-top: 4px; } .error-box { background: rgba(193,68,46,0.10); border: 1px solid var(--coral); color: var(--coral-fuerte); padding: 10px 14px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 16px; } .success-box { background: rgba(75,107,63,0.10); border: 1px solid var(--exito); color: var(--exito); padding: 10px 14px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 16px; } /* ---------- Tipografía ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 8px; } h1 { font-size: 2.1rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.1rem; } p { margin: 0 0 12px; color: var(--texto); } .eyebrow { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--tinta); margin-bottom: 8px; display: block; } .muted { color: var(--texto-tenue); } .mono { font-family: var(--font-mono); } /* ---------- Hero ---------- */ /* Única superficie vino sólida de la página: el reto del día es el foco, no una decoración a su lado. Vive igual en los tres temas porque usa siempre --secundario/--tinta como par de contraste. */ .hero { padding: 40px; margin: 32px 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; /* --principal, no --tinta. En claro y en musgo valen lo mismo, así que no cambia nada; pero en oscuro --tinta es un rosa claro pensado como acento sobre fondo oscuro, y este bloque quedaba rosa con letra blanca encima: ilegible. --principal es el que cada tema define para hacer de fondo. */ background: var(--principal); border-radius: 14px; color: var(--secundario); } .hero .eyebrow { color: color-mix(in srgb, var(--secundario) 80%, var(--oro)); } .hero h1 { font-size: 2.3rem; line-height: 1.15; color: var(--secundario); } .hero .lede { font-size: 1rem; color: color-mix(in srgb, var(--secundario) 82%, transparent); max-width: 46ch; } .hero-actions { display: flex; gap: 10px; margin-top: 22px; } .hero-actions .btn-primary { background: var(--secundario); color: var(--principal); border-color: var(--secundario); } .hero-actions .btn-primary:hover { background: color-mix(in srgb, var(--secundario) 90%, var(--tinta)); } .hero-actions .btn-ghost { color: color-mix(in srgb, var(--secundario) 85%, transparent); } .hero-actions .btn-ghost:hover { color: var(--secundario); background: color-mix(in srgb, var(--secundario) 12%, transparent); } /* Elemento firma: el "tintero" que se llena con la participación activa. Invertido para vivir sobre el fondo vino sin perderse en él. */ .inkwell { --fill: 0%; width: 168px; height: 168px; margin: 0 auto; border-radius: 50%; position: relative; background: var(--secundario); border: 1px solid color-mix(in srgb, var(--secundario) 60%, transparent); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35); } .inkwell::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill); background: linear-gradient(180deg, var(--ambar) 0%, var(--tinta-fuerte) 100%); transition: height 0.4s ease; } .inkwell span { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 0.78rem; color: var(--texto); text-align: center; padding: 0 18px; } /* ---------- Tarjetas ---------- */ .card { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 20px; margin-bottom: 16px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .challenge-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; } .challenge-card:hover { border-color: var(--tinta); } .challenge-meta { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.75rem; color: var(--texto-tenue); } .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--borde); } .tag-active { color: var(--tinta); border-color: var(--tinta); } .tag-closed { color: var(--texto-tenue); } .tag-tecnica { color: var(--ambar); border-color: var(--ambar); } .tag-general { color: var(--azul); border-color: var(--azul); } .tag-winner { color: var(--oro); border-color: var(--oro); } /* ---------- Hoja de papel (participación) ---------- */ .paper { background: var(--papel); color: var(--texto-papel); border-radius: 4px; box-shadow: var(--shadow-paper); padding: 26px 28px; position: relative; /* La hoja NO crece con el contenedor: sin tope, hacer ancho el Escritorio habría convertido la superficie de escritura en una línea de unos 130 caracteres, peor que lo que había. Pero el tope tampoco es el de la lectura pura. De las cuatro hojas del sitio, TRES son editores: además del texto llevan barra de herramientas, métricas, el analizador y los botones de guardar. Apretarlas a la medida de lectura no estrechaba la línea, estrechaba la herramienta. Así que el tope es generoso —960px, lo que medían antes de ensanchar la página— y la medida de lectura se consigue donde de verdad toca: la pantalla de leer una participación va en contenedor angosto (720px), y ahí es el contenedor el que manda, no esto. */ max-width: 60rem; margin-inline: auto; } .paper h3 { color: var(--texto-papel); } .paper p { color: var(--texto-papel); } .paper .paper-meta { font-family: var(--font-mono); font-size: 0.75rem; color: #6b6350; display: flex; justify-content: space-between; margin-bottom: 14px; border-bottom: 1px dashed #cfc6a9; padding-bottom: 10px; } .paper-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; text-align: center; gap: 6px; filter: none; } /* Margen de anotaciones — marcas de editor junto a cada entrada */ .entry-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; margin-bottom: 14px; } .margin-ledger { font-family: var(--font-mono); font-size: 0.72rem; color: var(--texto-tenue); display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; } .margin-ledger .count { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--coral); color: var(--coral); display: flex; align-items: center; justify-content: center; font-weight: 700; } /* ---------- Opiniones ---------- */ .opinion { border-left: 3px solid var(--borde); padding: 10px 0 10px 14px; margin-bottom: 12px; } .opinion.tecnica { border-left-color: var(--ambar); } .opinion.general { border-left-color: var(--azul); } .opinion-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.85rem; } .opinion-actions { display: flex; gap: 6px; margin-top: 8px; } .like-btn { display: inline-flex; align-items: center; gap: 6px; } .like-btn.liked { color: var(--tinta); border-color: var(--tinta); } /* ---------- Sana crítica / guías (infografía con iconos) ---------- */ /* Bloque sólido, invertido. Antes era una caja con marco que contenía DOS cajas con marco, y debajo otra zona separada por un tercer borde: tres niveles de marco anidados sobre un fondo del mismo color. Ahora es una banda maciza, y ese contraste es el que le da ritmo a la portada — claro, banda, claro. El fondo es --principal y no --tinta: en el tema oscuro --tinta es un rosa claro pensado como acento, y una banda de ese color con texto claro encima no se podría leer. --principal es el que cada tema define para servir de bloque de fondo. */ .guide-box { background: var(--principal); color: var(--secundario); border: none; border-radius: 14px; padding: clamp(28px, 4vw, 44px); } .guide-box .eyebrow { color: color-mix(in srgb, var(--secundario) 72%, var(--oro)); } .guide-types { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); margin-top: 18px; } /* Sin marco ni fondo propios: ya los separa el aire, y encajonarlos dentro de la banda devolvería el problema que la banda vino a resolver. */ .guide-type { border: none; padding: 0; } .guide-type h3 { margin: 0 0 8px; color: var(--secundario); font-size: 1.15rem; } .guide-type p { color: color-mix(in srgb, var(--secundario) 78%, transparent); margin: 0; } .guide-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .guide-icon svg { width: 28px; height: 28px; } /* Se conserva el código de color de los dos tipos de opinión —azul para la general, ámbar para la técnica, como en el resto del sitio— pero aclarado hacia el blanco para que se lea sobre el vino. */ .guide-type-general .guide-icon { background: color-mix(in srgb, var(--secundario) 16%, transparent); color: color-mix(in srgb, var(--azul) 30%, var(--secundario)); } .guide-type-tecnica .guide-icon { background: color-mix(in srgb, var(--secundario) 16%, transparent); color: color-mix(in srgb, var(--oro) 45%, var(--secundario)); } .guide-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: clamp(24px, 3vw, 36px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid color-mix(in srgb, var(--secundario) 22%, transparent); } .guide-rule { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; line-height: 1.5; color: color-mix(in srgb, var(--secundario) 88%, transparent); } .guide-rule-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--secundario) 16%, transparent); color: var(--secundario); margin-top: 1px; } .guide-rule-icon svg { width: 16px; height: 16px; } /* ---------- Ranking ---------- */ .ranking-list { list-style: none; margin: 0; padding: 0; } .ranking-list li { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--borde); } .ranking-list li:last-child { border-bottom: none; } .rank-pos { font-family: var(--font-mono); color: var(--texto-tenue); width: 28px; display: inline-block; } .rank-name { font-family: var(--font-display); font-size: 1.05rem; } .rank-likes { font-family: var(--font-mono); color: var(--tinta); } /* ---------- Admin ---------- */ .admin-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--borde); } .admin-tabs button { border: none; border-radius: 0; background: none; padding: 10px 16px; color: var(--texto-tenue); border-bottom: 2px solid transparent; } .admin-tabs button.active { color: var(--tinta); border-bottom-color: var(--tinta); } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; } th { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.72rem; color: var(--texto-tenue); } /* ---------- Utilidades ---------- */ .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .between { display: flex; justify-content: space-between; align-items: center; } .section { padding: 40px 0; } .empty-state { text-align: center; padding: 40px 20px; color: var(--texto-tenue); } footer.site-footer { text-align: center; padding: 40px 24px; color: var(--texto-tenue); font-size: 0.82rem; } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .guide-types { grid-template-columns: 1fr; } .guide-rules { grid-template-columns: 1fr; } } /* ---------- Columna lateral ---------- */ /* Hubo dos rieles, uno a cada lado. El izquierdo se quitó del todo: sostener 160px de pantalla esperando publicidad era pagar renta por una decisión ya revertida. El derecho tiene dos inquilinos y solo entra uno a la vez: el panel de consulta rápida del Escritorio, y —cuando no hay panel— el anuncio del espacio "panel". Por eso no se muestra a partir de cierto ancho "porque sí", sino solo cuando hay algo que poner. */ .page-shell { display: flex; justify-content: center; align-items: flex-start; gap: 20px; /* 1200 de cuerpo ancho + 20 de hueco + 300 del panel, y sobra un poco. */ max-width: 1540px; margin: 0 auto; } .page-shell #app { flex: 0 1 var(--ancho-cuerpo); min-width: 0; } .ad-rail { display: none; /* solo aparece cuando hay panel que mostrar */ width: 160px; flex: 0 0 160px; position: sticky; top: 84px; align-self: flex-start; } /* Los estilos del anuncio en sí viven al final, con el resto de lo propio. */ /* Aquí había una regla que mostraba los rieles a partir de 1440px pasara lo que pasara. Se quita con el riel izquierdo: mostrar una columna vacía —o con un recuadro de simulación de un anuncio que no existe— para eso solo servía para estrechar el contenido. Ahora la columna aparece cuando hay algo que poner en ella, y eso lo decide .con-panel. */ /* En páginas de autenticación no mostramos publicidad: menos distracción en un formulario corto y sensible. */ body.no-ads .ad-rail { display: none; } /* ---------- Editor de texto enriquecido (Quill) ---------- */ /* Se sobreescribe el tema "snow" de Quill para que use nuestras variables en vez de sus grises por defecto — así respeta los tres temas. */ .editor-wrap { margin-bottom: 8px; } .editor-wrap .ql-toolbar.ql-snow { border: 1px solid var(--borde); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: var(--superficie-alta); font-family: var(--font-body); } .editor-wrap .ql-container.ql-snow { border: 1px solid var(--borde); border-radius: 0 0 var(--radius) var(--radius); background: var(--papel); font-family: var(--font-body); font-size: 0.95rem; } /* Texto e íconos del editor: siempre el color de "tinta sobre papel", fijo en los tres temas (igual que .paper) — así nunca queda letra oscura sobre un fondo oscuro cuando se cambia de tema. */ .editor-wrap .ql-editor, .editor-wrap .ql-editor p, .editor-wrap .ql-editor li, .editor-wrap .ql-editor blockquote { color: var(--texto-papel); } .editor-wrap .ql-editor { min-height: 220px; line-height: 1.6; } .editor-wrap .ql-editor.ql-blank::before { color: var(--texto-tenue); font-style: normal; font-family: var(--font-body); } .editor-wrap .ql-snow .ql-stroke { stroke: var(--texto-tenue); } .editor-wrap .ql-snow .ql-fill { fill: var(--texto-tenue); } .editor-wrap .ql-snow .ql-picker { color: var(--texto-tenue); } .editor-wrap .ql-snow.ql-toolbar button:hover, .editor-wrap .ql-snow.ql-toolbar button.ql-active, .editor-wrap .ql-snow .ql-picker-label:hover, .editor-wrap .ql-snow .ql-picker-item:hover { color: var(--tinta); } .editor-wrap .ql-snow.ql-toolbar button:hover .ql-stroke, .editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--tinta); } .editor-wrap .ql-snow.ql-toolbar button:hover .ql-fill, .editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--tinta); } .editor-wrap .ql-snow .ql-tooltip { background: var(--superficie); border-color: var(--borde); color: var(--texto); box-shadow: 0 8px 20px -10px rgba(0,0,0,0.3); } .editor-toolbar-hint { font-size: 0.78rem; color: var(--texto-tenue); margin: 6px 0 0; } /* Cómo se ve el HTML enriquecido ya guardado (participaciones, solicitudes de corrección) fuera del editor — en la hoja de papel y en tarjetas. */ .entry-html { color: inherit; } .entry-html p { margin: 0 0 12px; } .entry-html p:last-child { margin-bottom: 0; } .entry-html strong { font-weight: 700; } .entry-html em { font-style: italic; } .entry-html ol, .entry-html ul { margin: 0 0 12px; padding-left: 22px; } .entry-html li { margin-bottom: 4px; } .entry-html blockquote { margin: 0 0 12px; padding: 2px 0 2px 16px; border-left: 3px solid var(--borde); font-style: italic; color: inherit; } .entry-html .ql-indent-1 { padding-left: 3em; } .entry-html .ql-indent-2 { padding-left: 6em; } .entry-html .ql-indent-3 { padding-left: 9em; } .entry-html .ql-align-center { text-align: center; } .entry-html .ql-align-right { text-align: right; } .entry-html .ql-align-justify { text-align: justify; } /* ---------- Portada de reto ---------- */ .challenge-cover { margin: -20px -20px 14px -20px; border-radius: 10px 10px 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--superficie-alta); } .challenge-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .challenge-banner { border-radius: 12px; overflow: hidden; margin: 14px 0 20px; max-height: 320px; } .challenge-banner img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; display: block; } .cover-preview { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .cover-preview img { width: 120px; height: 68px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); } #cover-form input[type="file"] { padding: 8px; font-size: 0.85rem; } #cover-form button { margin-top: 8px; } /* ---------- Perfil ---------- */ .nav-profile { display: inline-flex; align-items: center; gap: 6px; } .nav-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } .profile-header { display: flex; align-items: center; gap: 20px; } .avatar-lg { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borde); flex-shrink: 0; } .avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--tinta); color: var(--secundario); font-family: var(--font-display); font-size: 2rem; font-weight: 700; } #avatar-form input[type="file"] { max-width: 220px; font-size: 0.82rem; } /* ---------- Usuario: avatar + link (usado en todas partes) ---------- */ .user-link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--texto); font-weight: 600; font-size: 0.92rem; } .user-link:hover { color: var(--tinta); } .user-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; } .user-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--tinta); color: var(--secundario); font-family: var(--font-display); font-weight: 700; line-height: 1; } .rank-name-wrap { display: flex; align-items: center; gap: 8px; } .mini-badge { display: inline-flex; color: var(--oro); } .mini-badge svg { width: 14px; height: 14px; } .badge-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.72rem; padding: 5px 10px; border-radius: 100px; border: 1px solid var(--borde); background: var(--superficie-alta); color: var(--texto); } .badge-chip svg { width: 13px; height: 13px; color: var(--oro); } /* --- El aviso sobre textos generados con IA --- */ /* En la portada: una sección más, no un cartel de advertencia. Se pide, no se amenaza, y el aspecto tiene que decir lo mismo que el texto. */ .aviso-ia { display: flex; gap: 20px; align-items: flex-start; } .aviso-ia-marca { font-size: 2rem; line-height: 1; color: var(--oro); flex-shrink: 0; } .aviso-ia p { margin: 10px 0 0; } @media (max-width: 640px) { .aviso-ia { gap: 12px; } .aviso-ia-marca { font-size: 1.5rem; } } /* Junto al botón de enviar: una línea, discreta, alineada a la izquierda para que no se lea como un pie de página del formulario. */ .nota-ia { margin: 14px 0 0; font-size: 0.82rem; color: var(--texto-tenue); border-left: 2px solid var(--borde); padding-left: 10px; } /* En el pie del sitio, debajo de los avisos de la fase de pruebas. */ .pie-ia { max-width: 640px; margin: 0 auto 14px; font-size: 0.85rem; line-height: 1.5; } /* La de Beta. Es la única que no se gana escribiendo —se gana por haber estado aquí cuando el sitio todavía se caía—, así que se pinta aparte y no como una más de la fila. La beta griega en vez de la medalla: es la marca de siempre para "esto es una versión de prueba", y se lee igual sin color. */ .badge-chip-beta { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 14%, var(--superficie-alta)); color: var(--texto); font-weight: 600; } .badge-beta-marca { font-family: var(--font-mono); font-size: 0.95rem; line-height: 1; color: var(--oro); } .avatar-wrap { flex-shrink: 0; } .badge-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 0.88rem; } .badge-toggle-row:last-child { border-bottom: none; } .badge-toggle-row-locked { opacity: 0.55; } /* ---------- Página legal ---------- */ .legal-page h2 { font-size: 1.1rem; margin-top: 28px; margin-bottom: 8px; } .legal-page p, .legal-page li { color: var(--texto); } .legal-page ul { padding-left: 22px; margin: 8px 0 16px; } .legal-page li { margin-bottom: 6px; } /* ---------- Mini-perfil flotante ---------- */ .user-tooltip { position: fixed; width: 260px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.35); z-index: 200; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; } .user-tooltip.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .user-tooltip-head { display: flex; align-items: center; gap: 10px; } .user-tooltip-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 1.1rem; } .user-tooltip-head strong { font-family: var(--font-display); font-size: 1rem; } .user-tooltip-bio { font-size: 0.82rem; color: var(--texto-tenue); margin: 10px 0 0; } .user-tooltip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .user-tooltip-chips .badge-chip { font-size: 0.68rem; padding: 3px 8px; } .user-tooltip-link { display: block; margin-top: 12px; font-size: 0.8rem; font-weight: 600; } /* ---------- Carrusel de banners (home) ---------- */ .carousel { position: relative; /* Sin tope propio: ocupa lo que le dé el contenedor. Tenía 980px fijos, y desde que la portada es ancha eso lo dejaba como una banda encogida en medio de una página más grande. */ margin: 24px auto 0; border-radius: 14px; overflow: hidden; background: var(--superficie-alta); } .carousel-track { display: flex; transition: transform 0.5s ease; /* pan-y deja el desplazamiento vertical de la página en manos del navegador y se queda solo con el horizontal, que es el del arrastre. Sin esto, en un teléfono arrastrar el carrusel pelea con hacer scroll. */ touch-action: pan-y; cursor: grab; } .carousel.arrastrando .carousel-track { cursor: grabbing; } .carousel-slide { min-width: 100%; position: relative; aspect-ratio: 16 / 5; } .carousel-slide a { display: block; width: 100%; height: 100%; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; /* Al arrastrar una imagen que está dentro de un enlace, el navegador arranca su propio arrastrar-y-soltar: se lleva el puntero, aparece la miniatura fantasma y el gesto del carrusel no llega a ocurrir. Por eso no se podía arrastrar. */ -webkit-user-drag: none; user-select: none; } .carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 26px; background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent); color: #fff; display: flex; flex-direction: column; gap: 2px; } .carousel-caption strong { font-family: var(--font-display); font-size: 1.2rem; } .carousel-caption span { font-size: 0.85rem; opacity: 0.9; } /* z-index explícito en flechas y puntos. Desde que los banners llevan enlace, cada diapositiva tiene un que la cubre entera, y el orden de pintado entre ese enlace y los controles dependía de reglas sutiles: basta con que algo cree un contexto de apilamiento para que los controles queden debajo y dejen de recibir el clic. Declarándolo, deja de depender de eso. */ .carousel-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.35); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .carousel-arrow:hover { background: rgba(0,0,0,0.55); } .carousel-prev { left: 12px; } .carousel-next { right: 12px; } .carousel-dots { position: absolute; z-index: 2; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; padding: 0; cursor: pointer; } .carousel-dot.active { background: #fff; } @media (max-width: 760px) { .carousel-slide { aspect-ratio: 4 / 3; } .carousel-caption strong { font-size: 1rem; } } /* Honeypot: fuera de pantalla en vez de display:none — algunos bots revisan display/visibility antes de rellenar, position:absolute lejos del viewport es más difícil de detectar y sigue sin verse ni estorbar con tab para personas usando teclado (tabindex="-1" en el input). */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* El botón de menú ya no es solo de móvil ni es un acordeón: está en todos los anchos y abre un panel. Sus estilos viven al final del archivo, junto a `.nav-panel`, para que se lean juntos. Aquí solo queda que no se esconda. */ .nav-toggle { flex-shrink: 0; } /* ---------- Botón flotante: volver arriba ---------- */ .scroll-top-btn { position: fixed; right: 18px; bottom: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--tinta); color: var(--secundario); border: none; font-size: 1.1rem; line-height: 1; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; z-index: 60; cursor: pointer; } .scroll-top-btn.visible { display: flex; } .scroll-top-btn:hover { background: var(--tinta-fuerte); } /* ---------- Barra inferior tipo app (solo móvil) ---------- */ .mobile-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--superficie); border-top: 1px solid var(--borde); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 70; } .mobile-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; color: var(--texto-tenue); font-size: 10.5px; font-family: var(--font-body); padding: 6px 2px; } .mobile-tabbar button .icon { font-size: 17px; line-height: 1; } .mobile-tabbar button:active { color: var(--tinta); } /* ---------- Anuncios: slot fijo abajo en móvil (encima de la tabbar) ---------- */ .sticky-ad-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--superficie); border-top: 1px solid var(--borde); align-items: center; gap: 8px; padding: 6px 10px; z-index: 65; } .sticky-ad-bar #sticky-ad-content { flex: 1; min-width: 0; } .sticky-ad-bar #sticky-ad-content .anuncio { margin: 0; } .sticky-ad-bar #sticky-ad-close { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 1px solid var(--borde); background: var(--superficie); font-size: 12px; color: var(--texto-tenue); } .footer-links { margin-top: 8px; } .footer-links a { color: var(--texto-tenue); font-size: 0.78rem; } @media (max-width: 760px) { .site-header .bar { position: relative; } .mobile-tabbar { display: flex; } body { padding-bottom: 60px; } .scroll-top-btn { bottom: 76px; } .sticky-ad-bar.visible { display: flex; } body.sticky-ad-active { padding-bottom: 122px; } body.sticky-ad-active .scroll-top-btn { bottom: 138px; } } /* ---------------- Membresía Taller ---------------- */ .membership-card { border-left: 3px solid var(--borde); } .membership-card.membership-active { border-left-color: var(--oro); } .membership-card h2 { margin: 0 0 4px; } .benefit-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .benefit { display: flex; gap: 10px; align-items: flex-start; opacity: 0.6; } .benefit.benefit-on { opacity: 1; } .benefit p { margin: 2px 0 0; } .benefit-mark { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 100px; border: 1px solid var(--borde); font-size: 0.75rem; color: var(--texto-tenue); } .benefit-on .benefit-mark { border-color: var(--oro); color: var(--oro); } .free-list { margin: 8px 0 0; padding-left: 18px; color: var(--texto-tenue); } .free-list li { margin-bottom: 4px; } .mini-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; } .mini-table td { padding: 7px 4px; border-bottom: 1px solid var(--borde); } .mini-table tr:last-child td { border-bottom: none; } /* "Esto me sirvió": señal del autor, deliberadamente distinta del like */ .useful-btn { border-color: var(--borde); } .useful-btn.marked { color: var(--exito); border-color: var(--exito); } .useful-chip { font-family: var(--font-mono); font-size: 0.72rem; color: var(--exito); border: 1px solid var(--exito); border-radius: 100px; padding: 3px 9px; } /* ---------------- Analizador de texto ---------------- */ .an-caja { display: none; margin-top: 14px; } .an-caja.abierto { display: block; } .an-panel { border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); padding: 16px; } .an-resumen { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--borde); font-family: var(--font-mono); font-size: 0.78rem; color: var(--texto-tenue); } .an-resumen b { color: var(--texto); font-size: 1.05rem; } .an-bloque { padding: 14px 0; border-bottom: 1px solid var(--borde); } .an-bloque:last-of-type { border-bottom: none; } .an-bloque h4 { margin: 0 0 4px; font-size: 0.95rem; } .an-bloque.an-limpio { opacity: 0.5; } .an-porque { margin: 0 0 10px; font-size: 0.82rem; color: var(--texto-tenue); line-height: 1.45; } /* Gráfica de ritmo: una barra por frase */ .an-ritmo { display: flex; align-items: flex-end; gap: 3px; height: 64px; padding: 4px 0; overflow-x: auto; } .an-barra { flex: 1 0 6px; min-width: 6px; background: var(--tinta); opacity: 0.55; border-radius: 2px 2px 0 0; } .an-barra:hover { opacity: 1; } .an-chips { display: flex; flex-wrap: wrap; gap: 6px; } .an-chip { font-family: var(--font-mono); font-size: 0.75rem; border: 1px solid var(--borde); border-radius: 100px; padding: 3px 10px; display: inline-flex; gap: 6px; } .an-chip b { color: var(--tinta); } /* Chip de lista: no lleva número salvo que de verdad se repita */ .an-chip-lista { border-style: dashed; } .an-chip-lista b { margin-left: 2px; opacity: 0.85; } .an-lista { list-style: none; margin: 0; padding: 0; } .an-lista > li { padding: 8px 0; border-bottom: 1px dashed var(--borde); } .an-lista > li:last-child { border-bottom: none; } .an-ctx { margin: 4px 0 0; font-size: 0.82rem; color: var(--texto-tenue); line-height: 1.5; } .an-ctx mark { background: var(--superficie-alta); color: var(--tinta); font-weight: 600; padding: 0 2px; border-radius: 3px; } .an-aviso { margin: 8px 0 0; font-size: 0.82rem; color: var(--ambar); border-left: 2px solid var(--ambar); padding-left: 10px; } .an-pie { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borde); font-style: italic; } /* ---------------- Barra viva del editor ---------------- */ .editor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-alta); font-family: var(--font-mono); font-size: 0.74rem; color: var(--texto-tenue); } .editor-barra.eb-alerta { border-color: var(--coral); } .eb-metricas { display: flex; flex-wrap: wrap; gap: 12px; } .eb-metricas b { color: var(--texto); font-weight: 600; } .eb-metricas .eb-excedido, .eb-metricas .eb-excedido b { color: var(--coral); } .eb-repetidas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .eb-rotulo { opacity: 0.7; margin-right: 2px; } .eb-rep { border: 1px solid var(--borde); border-radius: 100px; padding: 1px 8px; background: var(--superficie); white-space: nowrap; } .eb-rep b { color: var(--tinta); } .eb-sin { opacity: 0.55; font-style: italic; } .eb-acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; } .eb-estado { opacity: 0.8; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eb-btn { font-family: var(--font-mono); font-size: 0.74rem; border: 1px solid var(--tinta); color: var(--tinta); background: transparent; border-radius: 100px; padding: 4px 12px; cursor: pointer; white-space: nowrap; } .eb-btn:hover { background: var(--tinta); color: var(--secundario); } .eb-btn.activo { background: var(--tinta); color: var(--secundario); } @media (max-width: 640px) { .eb-acciones { margin-left: 0; width: 100%; justify-content: space-between; } } /* ---------------- Marcatextos sobre el editor ---------------- La capa va DETRÁS de las letras (el texto sube a z-index 1), así el resaltado se ve como marcador sobre papel y no como un velo encima. */ .editor-wrap .ql-container.ql-snow { position: relative; } .editor-wrap .ql-editor { position: relative; z-index: 1; } .marca-capa { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .marca { position: absolute; background: var(--oro); opacity: 0.42; border-radius: 2px; animation: marca-aparece 160ms ease-out; } @keyframes marca-aparece { from { opacity: 0; } to { opacity: 0.42; } } /* Chips pulsables */ .an-chip { cursor: pointer; font-family: var(--font-mono); color: inherit; transition: background 120ms, border-color 120ms; } .an-chip:hover { border-color: var(--tinta); } /* Sobre el dorado el texto va oscuro en los tres temas: --texto-papel cambia con el tema y en oscuro dejaría letra clara sobre fondo claro. */ .an-chip.marcado { background: var(--oro); border-color: var(--oro); color: #241a06; } .an-chip.marcado b { color: #241a06; } /* Chips de la barra: también son botones de resaltado */ .eb-rep { cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; transition: background 120ms, border-color 120ms; } .eb-rep:hover { border-color: var(--tinta); } .eb-rep.marcado { background: var(--oro); border-color: var(--oro); color: #241a06; } .eb-rep.marcado b { color: #241a06; } /* Título editable del texto del Escritorio */ .titulo-doc { width: 100%; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--texto); background: transparent; border: none; border-bottom: 1px dashed transparent; padding: 4px 0; margin: 4px 0 16px; } .titulo-doc:hover { border-bottom-color: var(--borde); } .titulo-doc:focus { outline: none; border-bottom-color: var(--tinta); } /* ---------------- Escaleta ---------------- */ .doc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 0 0 18px; } .doc-tabs a { padding: 8px 16px; text-decoration: none; font-size: 0.88rem; color: var(--texto-tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; } .doc-tabs a:hover { color: var(--texto); } .doc-tabs a.activa { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 600; } .plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; } .plantilla { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radius); background: var(--superficie); cursor: pointer; font-family: inherit; color: inherit; transition: border-color 120ms; } .plantilla:hover { border-color: var(--tinta); } .plantilla strong { font-size: 0.95rem; } .escaleta { display: flex; flex-direction: column; gap: 10px; } .escena { display: flex; gap: 12px; border: 1px solid var(--borde); border-radius: var(--radius); background: var(--superficie); padding: 12px 14px; } .escena-orden { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; } .escena-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--texto-tenue); } .btn-mover { border: 1px solid var(--borde); background: transparent; color: var(--texto-tenue); border-radius: 5px; width: 24px; height: 20px; cursor: pointer; line-height: 1; padding: 0; } .btn-mover:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); } .btn-mover:disabled { opacity: 0.3; cursor: default; } .escena-cuerpo { flex: 1; min-width: 0; } .escena-titulo { font-weight: 600; font-size: 1rem; border: none; background: transparent; color: var(--texto); padding: 2px 0; width: 100%; border-bottom: 1px dashed transparent; } .escena-titulo:hover { border-bottom-color: var(--borde); } .escena-titulo:focus { outline: none; border-bottom-color: var(--tinta); } .escena-porque { margin: 4px 0 8px; font-size: 0.8rem; color: var(--texto-tenue); border-left: 2px solid var(--borde); padding-left: 8px; line-height: 1.45; } .escena-resumen { width: 100%; font-size: 0.9rem; margin-bottom: 8px; } .escena-pie { gap: 8px; flex-wrap: wrap; align-items: center; } .escena-personajes { flex: 1; min-width: 140px; font-size: 0.82rem; } .escena-estado { font-size: 0.82rem; max-width: 130px; } .oculto { display: none; } /* ---------------- Fichas de personaje ---------------- */ .fichas { display: flex; flex-direction: column; gap: 14px; } .ficha { border: 1px solid var(--borde); border-radius: var(--radius); background: var(--superficie); padding: 14px 16px; } .ficha-cabeza { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .ficha-nombre { flex: 1; min-width: 160px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--texto); background: transparent; border: none; border-bottom: 1px dashed transparent; padding: 2px 0; } .ficha-nombre:hover { border-bottom-color: var(--borde); } .ficha-nombre:focus { outline: none; border-bottom-color: var(--tinta); } .ficha-rol { max-width: 170px; font-size: 0.82rem; } .ficha-campo { margin-bottom: 10px; } .ficha-campo label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--texto); } .ficha-ayuda { margin: 2px 0 5px; font-size: 0.78rem; color: var(--texto-tenue); line-height: 1.4; } .ficha-campo textarea { width: 100%; font-size: 0.9rem; } /* ---------------- Acordeones (escaletas y fichas) ---------------- */ .acordeon { display: flex; flex-direction: column; gap: 8px; } .acordeon > details { border: 1px solid var(--borde); border-radius: var(--radius); background: var(--superficie); overflow: hidden; } .acordeon > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--texto); } .acordeon > details > summary::-webkit-details-marker { display: none; } .acordeon > details > summary::before { content: "\25B8"; color: var(--texto-tenue); font-size: 0.8rem; transition: transform 140ms; flex-shrink: 0; } .acordeon > details[open] > summary::before { transform: rotate(90deg); } .acordeon > details > summary:hover { background: var(--superficie-alta); } .acordeon-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acordeon-cuerpo { padding: 12px 14px 14px; border-top: 1px solid var(--borde); } .escaleta-nombre { flex: 1; min-width: 160px; font-size: 0.88rem; } .acordeon-cuerpo .ficha-cabeza { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } /* ================= Panel lateral de consulta rápida ================= Criterios aplicados, por si hay que discutirlos después: · Objetivos de clic. WCAG 2.5.8 pide 24×24px como mínimo; Material recomienda 48dp y Apple 44pt. Aquí: 44px las secciones, 40px las escenas y fichas. Toda la fila es clicable, no solo el texto. · Jerarquía por tamaño Y peso Y espacio, no solo por sangría. Hay cuatro niveles (panel → sección → escaleta → escena) y con indentación sola se leerían como una lista plana. · El estado de una escena NO se indica solo con color (WCAG 1.4.1): lleva un punto con su forma y su title. Antes el título entero se pintaba de verde, que además bajaba el contraste del texto. · Chevron en vez de +/−: es la convención que la gente ya reconoce como "esto se abre", y gira para mostrar el estado. ==================================================================== */ .lateral { border: 1px solid var(--borde); border-radius: var(--radius); background: var(--superficie); overflow: hidden; max-height: calc(100vh - 110px); overflow-y: auto; } /* --- Nivel 0: rótulo del panel (chrome, no contenido) --- */ .lateral-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-tenue); border-bottom: 1px solid var(--borde); background: var(--superficie-alta); } .lateral-cabeza button { min-width: 32px; min-height: 28px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-tenue); border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-family: var(--font-mono); } .lateral-cabeza button:hover { border-color: var(--tinta); color: var(--tinta); } /* --- Nivel 1: sección (Escaleta / Personajes) --- */ .lateral > details { border-bottom: 1px solid var(--borde); } .lateral > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 0.95rem; font-weight: 700; color: var(--texto); } .lateral > details > summary::-webkit-details-marker { display: none; } .lateral > details > summary:hover { background: var(--superficie-alta); } .lateral > details > summary .hint { font-size: 0.72rem; background: var(--superficie-alta); border: 1px solid var(--borde); border-radius: 100px; padding: 1px 8px; } /* --- Nivel 2: nombre de cada escaleta --- */ .lateral-grupo + .lateral-grupo { border-top: 1px dashed var(--borde); } .lateral-sub { padding: 12px 14px 4px; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-tenue); } /* --- Nivel 3: escena o ficha --- */ .lateral-lista { list-style: none; margin: 0; padding: 0 6px 8px; } .lateral-lista > li { border-radius: 6px; } .lateral-lista > li + li { margin-top: 1px; } .lat-fila, .lat-item > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 8px; cursor: pointer; list-style: none; border-radius: 6px; } .lat-fila { cursor: default; } .lat-item > summary::-webkit-details-marker { display: none; } .lat-item > summary:hover, .lateral-lista > li:hover > .lat-fila { background: var(--superficie-alta); } .lat-num { flex-shrink: 0; min-width: 18px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--texto-tenue); text-align: right; } .lat-titulo { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; line-height: 1.35; color: var(--texto); } .lat-rol { font-size: 0.74rem; color: var(--texto-tenue); font-weight: 400; } /* Estado: punto + title, nunca solo color */ .lat-punto { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--texto-tenue); background: transparent; } .estado-escribiendo .lat-punto { background: var(--ambar); border-color: var(--ambar); } .estado-lista .lat-punto { background: var(--exito); border-color: var(--exito); } .lat-chevron { flex-shrink: 0; width: 14px; height: 14px; color: var(--texto-tenue); transition: transform 140ms; } .lat-item[open] > summary .lat-chevron { transform: rotate(90deg); } /* --- Nivel 4: el contenido escrito --- */ .lat-detalle { padding: 2px 8px 10px 34px; } .lat-texto { margin: 0 0 7px; font-size: 0.8rem; line-height: 1.5; color: var(--texto-tenue); } .lat-texto:last-child { margin-bottom: 0; } .lat-texto b { color: var(--texto); font-weight: 600; } .lat-meta { margin: 0; font-size: 0.75rem; color: var(--texto-tenue); display: flex; gap: 5px; align-items: baseline; } .lateral-vacio { padding: 4px 14px 14px; } /* --- Pie: acciones --- */ .lateral-pie { display: flex; flex-direction: column; padding: 6px; } .lateral-pie a { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: 6px; font-size: 0.82rem; text-decoration: none; } .lateral-pie a:hover { background: var(--superficie-alta); } /* Foco visible con teclado en todo lo que se pueda abrir */ .lateral summary:focus-visible, .lateral button:focus-visible, .lateral-pie a:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; border-radius: 6px; } /* --- Anchos --- */ @media (min-width: 1080px) { .ad-rail.con-panel { display: block; width: 300px; flex: 0 0 300px; } } /* El modo ancho solo donde de verdad sobra sitio: más abajo de 1280px le robaría demasiado a la columna de lectura. */ @media (min-width: 1280px) { .ad-rail.con-panel.ancho { width: 420px; flex: 0 0 420px; } } /* Sin publicidad para miembros. El servidor ya devuelve nulo para ellos; esto es el cinturón por si la bandera llega antes que la respuesta. */ body.sin-anuncios .anuncio, body.sin-anuncios .sticky-ad-bar { display: none !important; } body.sin-anuncios .ad-rail-right:empty { display: none; } /* ---------- El panel cuando no cabe al lado ---------- Por debajo de 1080px el panel baja a la propia página en vez de esconderse. Va plegado: se consulta cuando hace falta y mientras tanto no empuja el editor hacia abajo. El resumen mide 48px de alto, como el resto de cabeceras de acordeón del sitio. */ .panel-en-pagina { margin: 0 0 16px; } @media (min-width: 1080px) { /* Arriba de ese ancho el panel vive en la columna lateral; si por lo que sea quedara un resto en la página, que no se duplique visualmente. */ .panel-en-pagina { display: none; } } .panel-plegable { border: 1px solid var(--borde); border-radius: var(--radius); background: var(--superficie); overflow: hidden; } .panel-plegable > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.95rem; } .panel-plegable > summary::-webkit-details-marker { display: none; } .panel-plegable > summary::before { content: "\25B8"; color: var(--texto-tenue); font-size: 0.8rem; transition: transform 140ms; } .panel-plegable[open] > summary::before { transform: rotate(90deg); } .panel-plegable > summary:hover { background: var(--superficie-alta); } .panel-plegable > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; } /* Dentro de la página el panel no necesita marco propio ni tope de altura: ya lo enmarca el plegable y la página entera se desplaza. */ .panel-plegable .lateral { border: none; border-radius: 0; max-height: none; } /* El botón de ensanchar no tiene sentido aquí: el ancho lo manda la página. */ .panel-plegable .lateral-cabeza { display: none; } /* Aquí había una segunda regla de .ad-rail.con-panel con 230px de ancho, sobrante de la primera versión del panel. Al estar más abajo en el archivo ganaba sobre la de 300px, así que el panel llevaba semanas viéndose más estrecho de lo que se pidió — el ensanchado nunca llegó a aplicarse. Se quita: el ancho manda desde el bloque "Anchos" de más arriba. */ /* ---------- Acordeones y escenas: objetivos de clic cómodos ---------- Mismos criterios que el panel lateral: 48px en las cabeceras de acordeón (son la acción principal de la página), 44px en los botones de fila y chevron en vez de triángulo tipográfico, que se ve borroso al girar. -------------------------------------------------------------------- */ .acordeon > details > summary { min-height: 48px; padding: 13px 16px; gap: 12px; } .acordeon > details > summary::before { font-size: 0.9rem; width: 12px; } .acordeon > details > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; } .acordeon-titulo { font-size: 1rem; } .acordeon > details > summary .hint { flex-shrink: 0; background: var(--superficie-alta); border: 1px solid var(--borde); border-radius: 100px; padding: 2px 9px; } .acordeon-cuerpo { padding: 14px 16px 16px; } /* Los botones de acción de cada escaleta: alto cómodo y sin apelotonarse */ .acordeon-cuerpo .btn-small, .escena-pie .btn-small { min-height: 34px; padding: 6px 12px; } /* Flechas de reordenar: eran 24×20, por debajo del mínimo de WCAG (24×24) */ .btn-mover { width: 30px; height: 28px; font-size: 0.85rem; } .escena-orden { gap: 4px; } .escena { padding: 14px 16px; gap: 14px; } .escena-titulo { font-size: 1.02rem; padding: 4px 0; } .escena-pie { gap: 10px; margin-top: 4px; } .escena-estado { min-height: 34px; } /* Las fichas dentro del acordeón: aire entre pregunta y pregunta */ .ficha-campo { margin-bottom: 16px; } .ficha-campo label { font-size: 0.88rem; } .ficha-campo textarea { min-height: 58px; } .ficha-nombre { font-size: 1.2rem; } /* Adjunto: es un botón porque la descarga necesita mandar la sesión, pero debe leerse como el enlace que era. */ .enlace-adjunto { background: none; border: none; padding: 0; color: var(--tinta); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .enlace-adjunto:hover { color: var(--tinta-fuerte); } .enlace-adjunto:disabled { opacity: 0.6; cursor: default; } /* Recuadro de comprobación de Cloudflare. Sin llaves configuradas queda vacío y no ocupa nada, así que no deja un hueco en el formulario. */ .turnstile-caja:not(:empty) { margin: 4px 0 16px; } /* ================= Recursos compartidos ================= */ .recurso-card { cursor: pointer; display: flex; flex-direction: column; gap: 8px; } .recurso-card:hover { border-color: var(--tinta); } .recurso-titulo { margin: 0; font-size: 1.1rem; } .recurso-autor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; } .recursos-filtros { flex-wrap: wrap; gap: 8px; align-items: center; } /* El filtro activo no se marca solo con color (WCAG 1.4.1): también cambia el peso y el grosor del borde. */ .recursos-filtros .filtro-activo { border-color: var(--tinta); color: var(--tinta); font-weight: 700; border-width: 2px; } /* La escaleta compartida se lee como una lista numerada de escenas, con el "para qué sirve" delante del resumen: es lo que enseña, más que la trama. */ .recurso-escaleta { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 16px; } .recurso-escaleta li { padding-left: 4px; } .recurso-escena-cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .recurso-escaleta p { margin: 2px 0; } .recurso-ficha { margin: 0; display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: 8px 18px; } .recurso-ficha dt { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); padding-top: 3px; } .recurso-ficha dd { margin: 0; } @media (max-width: 600px) { .recurso-ficha { grid-template-columns: 1fr; gap: 2px 0; } .recurso-ficha dd { margin-bottom: 12px; } } .recurso-acciones h3 { margin-top: 0; } /* Las dos cifras juntas en la tarjeta: corazón y copias. Se separan bien para que no se lean como un solo número. */ .recurso-cifras { display: inline-flex; gap: 12px; } /* Barra de "me gusta" y copias en la ficha del recurso */ .recurso-barra { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 14px 0 18px; } .btn-like { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--borde); border-radius: 20px; background: var(--superficie); color: var(--texto); font-size: 0.9rem; cursor: pointer; } .btn-like:hover { border-color: var(--coral); color: var(--coral); } .btn-like:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } .btn-like:disabled { opacity: 0.6; cursor: default; } /* Activo: cambia el color, PERO también el corazón (♡ → ♥), la etiqueta y el grosor del borde — el estado nunca depende solo del color (WCAG 1.4.1). */ .btn-like.activo { border-color: var(--coral); border-width: 2px; color: var(--coral); padding: 0 15px; } .btn-like-texto { font-weight: 600; } @media (max-width: 480px) { .btn-like-texto { display: none; } } /* El aviso de derechos al compartir: se destaca sin gritar. No es una advertencia de peligro — es una promesa. */ .aviso-derechos { border-left: 3px solid var(--tinta); } .aviso-derechos h3 { margin-top: 0; } .aviso-derechos p { margin-bottom: 8px; } /* ================= Botón de Ayuda (flotante, en todo el sitio) ================= Va arriba del botón de "volver arriba" en vez de al lado: ese aparece y desaparece con el desplazamiento, y un botón que se mueve solo es peor que uno que siempre está en el mismo sitio. Lleva la palabra "Ayuda" y no solo un "?" porque el signo suelto no le dice nada a quien no está acostumbrado a las interfaces — que es exactamente la persona para la que existe este botón. En móvil se queda solo el símbolo, con la etiqueta accesible puesta en aria-label. Mide 48px: el mínimo de WCAG 2.5.8 son 24px y Material recomienda 48dp. */ .ayuda-btn { position: fixed; right: 18px; bottom: 74px; z-index: 60; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 14px; border-radius: 24px; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font-size: 0.9rem; font-weight: 600; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.35); } .ayuda-btn:hover { background: var(--superficie-alta); border-color: var(--tinta); color: var(--tinta); } .ayuda-btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; } .ayuda-btn > span[aria-hidden] { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--tinta); color: var(--secundario); font-size: 0.82rem; font-weight: 700; } @media (max-width: 720px) { /* Encima de la barra de pestañas, que ocupa el borde inferior en móvil. */ .ayuda-btn { bottom: calc(72px + env(safe-area-inset-bottom)); padding: 0; width: 48px; justify-content: center; } .ayuda-btn-texto { display: none; } } /* ---------------- La pantalla de ayuda ---------------- */ .ayuda-buscador { max-width: 420px; margin-top: 18px; } .ayuda-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 24px; } .ayuda-indice a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--borde); background: var(--superficie); font-size: 0.85rem; text-decoration: none; color: var(--texto); } .ayuda-indice a:hover { border-color: var(--tinta); color: var(--tinta); } .ayuda-grupo { margin-bottom: 28px; } .ayuda-grupo h2 { font-size: 1.3rem; margin-bottom: 12px; } /* La pregunta es lo que se busca con la vista: que no sea más chica que el resto del texto ni se lea como una etiqueta de formulario. */ .ayuda .acordeon > details > summary { min-height: 44px; font-size: 0.98rem; } .ayuda-respuesta { font-size: 0.95rem; line-height: 1.65; color: var(--texto); } .ayuda-respuesta strong { color: var(--texto); } /* ---------------- Aviso de "confirma tu correo" ---------------- */ .aviso-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 1080px; margin: 12px auto 0; padding: 12px 18px; border: 1px solid var(--borde); border-left: 3px solid var(--tinta); border-radius: var(--radius); background: var(--superficie); font-size: 0.9rem; } .aviso-barra button { min-height: 36px; flex-shrink: 0; } .aviso-barra .hint { margin: 0; } /* ================= Borrar la cuenta ================= Va cerrada dentro de un
y al final del perfil: es la última parada de la página, no algo con lo que uno se tropieza al editar su bio. El rojo se reserva para el botón que de verdad borra — pintar toda la tarjeta de alarma solo la vuelve ruido y hace que se deje de leer. Objetivos de clic (WCAG 2.5.8, mínimo 24px): el resumen mide 44px de alto y cada opción es una fila completa clicable de 44px, no solo el radio. */ .zona-riesgo > details > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; } .zona-riesgo > details > summary::-webkit-details-marker { display: none; } .zona-riesgo > details > summary::before { content: "\25B8"; color: var(--texto-tenue); font-size: 0.8rem; transition: transform 140ms; } .zona-riesgo > details[open] > summary::before { transform: rotate(90deg); } .zona-riesgo > details > summary h3 { margin: 0; color: var(--coral); } .zona-riesgo > details > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 6px; } .zona-riesgo-cuerpo { padding-top: 12px; } .aviso-borrado { border-left: 3px solid var(--coral); padding: 2px 0 2px 14px; margin: 16px 0 20px; } .aviso-borrado h4 { margin: 0 0 8px; font-size: 0.95rem; } .aviso-borrado ul { margin: 0 0 8px; padding-left: 20px; } .aviso-borrado li { margin-bottom: 4px; } .opciones-borrado { border: none; padding: 0; margin: 0 0 20px; } .opciones-borrado legend { padding: 0; } .opciones-borrado legend h4 { margin: 0 0 4px; font-size: 0.95rem; } /* La etiqueta envuelve al radio, así que toda la fila —título y explicación— selecciona la opción. Es lo que espera cualquiera que use el móvil. */ .opcion-borrado { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--borde); border-radius: var(--radius); cursor: pointer; } .opcion-borrado:hover { background: var(--superficie-alta); } /* La opción ES una