@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cinzel:wght@500;700&family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Forum&family=IBM+Plex+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Playfair+Display:wght@700&display=swap');

/*
 * Entropia - Foro Anónimo de Salud Mental
 * Diseño minimalista moderno con modo claro/oscuro
 */

/* ==========================================
 * DESIGN SYSTEM v2 — MODO CLARO (por defecto)
 * Paleta emocional. No corporativa.
 * ========================================== */
:root {

    /* ── FONDOS ──────────────────────────────────── */
    --bg-primary:        #f5f0e8;
    --bg-secondary:      #fdfaf4;
    --bg-tertiary:       #ede8dd;
    --bg-elevated:       #e5ded2;

    /* Alias compatibles con templates existentes */
    --color-bg:          var(--bg-primary);
    --color-surface:     var(--bg-secondary);
    --color-surface-alt: var(--bg-elevated);

    /* ── TEXTO ───────────────────────────────────── */
    --text-primary:    #1a1714;
    --text-secondary:  #5a5248;
    --text-muted:      #8a7f74;
    --text-ghost:      #c5bdb4;

    --color-text:         var(--text-primary);
    --color-text-light:   var(--text-secondary);
    --color-text-lighter: var(--text-muted);

    /* ── ACENTOS EMOCIONALES ─────────────────────── */
    /* introspección */
    --accent-calm:         #4a6a8a;
    --accent-calm-soft:    rgba(74, 106, 138, 0.08);
    /* vulnerabilidad / actividad humana */
    --accent-emotion:      #9a6a3a;
    --accent-emotion-soft: rgba(154, 106, 58, 0.08);
    /* alerta emocional suave — NO rojo */
    --accent-warm:         #8a4a3a;
    --accent-warm-soft:    rgba(138, 74, 58, 0.08);
    /* calma / recuperación */
    --accent-still:        #4a6a52;
    --accent-still-soft:   rgba(74, 106, 82, 0.08);

    --color-primary:   var(--accent-calm);
    --color-secondary: #7a90a8;
    --color-accent:    var(--accent-emotion);
    --color-warm:      #9a8878;

    /* ── ESTADOS FUNCIONALES ─────────────────────── */
    --color-crisis:  #8b3a3a;
    --color-success: var(--accent-still);
    --color-warning: var(--accent-emotion);
    --color-error:   var(--accent-warm);

    /* ── BORDES ──────────────────────────────────── */
    --border-ghost:  rgba(26, 23, 20, 0.04);
    --border-subtle: rgba(26, 23, 20, 0.08);
    --border-soft:   rgba(26, 23, 20, 0.14);

    /* ── SOMBRAS ─────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.14);

    /* ── TIPOGRAFÍA ──────────────────────────────── */
    /* body/lectura: Lora — humanismo visible, serif para pantalla */
    --font-body:  'Lora', Georgia, serif;
    /* emo: Lora italic — texto íntimo, onboarding, microcopias */
    --font-emo:   'Lora', Georgia, serif;
    /* títulos editoriales: DM Serif Display */
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-title: 'DM Serif Display', Georgia, serif;
    /* meta/técnico: IBM Plex Mono */
    --font-mono:  'IBM Plex Mono', 'SF Mono', 'Monaco', monospace;

    /* ── ESPACIADO ───────────────────────────────── */
    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  1.5rem;
    --spacing-lg:  2rem;
    --spacing-xl:  3rem;
    --spacing-2xl: 4.5rem;

    /* Silencios visuales — no rellenar nunca */
    --silence-xs:  2.5rem;
    --silence-sm:  4rem;
    --silence-md:  6rem;
    --silence-lg:  10rem;

    /* ── INTERACCIONES ───────────────────────────── */
    --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-drift:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --duration-instant: 0.15s;
    --duration-fast:    0.35s;
    --duration-med:     0.6s;
    --duration-base:    0.6s;
    --duration-slow:    0.9s;
    --duration-drift:   1.2s;

    /* ── RADIOS ──────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
}

/* ==========================================
 * DESIGN SYSTEM v2 — MODO OSCURO
 * Negros cálidos (sepia), no grises azulados
 * ========================================== */
[data-theme="dark"] {

    /* ── FONDOS ──────────────────────────────────── */
    --bg-primary:        #0f0d0a;
    --bg-secondary:      #171411;
    --bg-tertiary:       #211d18;
    --bg-elevated:       #2a2420;

    --color-bg:          var(--bg-primary);
    --color-surface:     var(--bg-secondary);
    --color-surface-alt: var(--bg-elevated);

    /* ── TEXTO ───────────────────────────────────── */
    --text-primary:    #e8e0d0;
    --text-secondary:  #a89880;
    --text-muted:      #6b6258;
    --text-ghost:      #3d3630;

    --color-text:         var(--text-primary);
    --color-text-light:   var(--text-secondary);
    --color-text-lighter: var(--text-muted);

    /* ── ACENTOS EMOCIONALES ─────────────────────── */
    --accent-calm:         #7a8fa8;
    --accent-calm-soft:    rgba(122, 143, 168, 0.12);
    --accent-emotion:      #c49a6c;
    --accent-emotion-soft: rgba(196, 154, 108, 0.10);
    --accent-warm:         #b87060;
    --accent-warm-soft:    rgba(184, 112, 96, 0.10);
    --accent-still:        #6a8a72;
    --accent-still-soft:   rgba(106, 138, 114, 0.10);

    --color-primary:   var(--accent-calm);
    --color-secondary: #a8b5c8;
    --color-accent:    var(--accent-emotion);
    --color-warm:      #b8a896;

    /* ── ESTADOS FUNCIONALES ─────────────────────── */
    --color-crisis:  #b56565;
    --color-success: var(--accent-still);
    --color-warning: var(--accent-emotion);
    --color-error:   var(--accent-warm);

    /* ── BORDES ──────────────────────────────────── */
    --border-ghost:  rgba(232, 224, 208, 0.04);
    --border-subtle: rgba(232, 224, 208, 0.08);
    --border-soft:   rgba(232, 224, 208, 0.14);

    /* ── SOMBRAS ─────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.55);
}

/* ==========================================
 * RESET Y BASE
 * ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip en vez de hidden: corta overflow sin crear scroll container
       (hidden rompe position:sticky en Firefox) */
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.80;
    min-height: 100vh;
    font-size: 0.97rem;
    letter-spacing: 0;
    overflow-x: clip;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Compensar el banner fixed (aprox 2.2rem de alto) */
    padding-top: 2.4rem;
    /* Grano sutil + degradado orgánico apenas perceptible */
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184, 133, 96, 0.025), transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(91, 107, 138, 0.02), transparent 70%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-attachment: fixed;
}

[data-theme="dark"] body {
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 160, 117, 0.025), transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(139, 155, 184, 0.022), transparent 70%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================
 * BANNER DE CRISIS (Siempre visible)
 * ========================================== */
.crisis-banner {
    background: rgba(139, 58, 58, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    padding: 0.5rem var(--spacing-md);
    /* fixed garantiza pegado al top en todos los navegadores/móvil */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

[data-theme="dark"] .crisis-banner {
    background: rgba(181, 101, 101, 0.6);
}

/* Fallback para navegadores sin backdrop-filter (Firefox <103) */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .crisis-banner {
        background: rgba(139, 58, 58, 0.92);
    }
    [data-theme="dark"] .crisis-banner {
        background: rgba(181, 101, 101, 0.92);
    }
}

.crisis-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sos-badge {
    background: white;
    color: var(--color-crisis);
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.crisis-text {
    flex: 1;
    font-size: 0.9rem;
    min-width: 200px;
}

.crisis-phone {
    color: white;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.crisis-link {
    color: white;
    text-decoration: underline;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.crisis-link:hover {
    opacity: 0.8;
}

/* ==========================================
 * CONTENEDOR PRINCIPAL
 * ========================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.container-narrow {
    max-width: 800px;
}

/* ==========================================
 * HEADER / LOGO
 * ========================================== */
.header {
    text-align: center;
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
}

.logo {
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.015em;
    flex-wrap: nowrap;
    font-size: clamp(2.9rem, 8vw, 5.8rem);
    line-height: 0.95;
    transition: transform 0.2s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-letter {
    display: inline-block;
    color: var(--color-primary);
    text-shadow: 0.04em 0.05em 0 rgba(31, 41, 55, 0.12);
    transform-origin: center bottom;
}

.letter-e {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    color: #7ed7c1;
    transform: translateY(0.04em) scaleY(1.06);
}

.letter-n {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    color: #70c98d;
    margin-left: -0.04em;
}

.letter-t {
    font-family: 'DM Serif Display', Georgia, serif;
    font-style: italic;
    color: #c9d7f2;
    margin-left: -0.03em;
}

.letter-r {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: #f3ba69;
    transform: translateY(-0.02em) rotate(-4deg);
    margin-left: -0.05em;
}

.letter-o {
    font-family: 'Forum', Georgia, serif;
    color: #f0d86b;
    margin-left: -0.035em;
}

.letter-p {
    font-family: 'Abril Fatface', Georgia, serif;
    color: #ef9a72;
    margin-left: -0.02em;
}

.letter-i {
    font-family: 'DM Serif Display', Georgia, serif;
    font-style: italic;
    color: #79d9cc;
    transform: translateY(-0.04em) rotate(5deg);
    margin-left: 0.005em;
}

.letter-a {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    color: #fff7b3;
    transform: translateY(0.02em) rotate(-2deg);
    margin-left: -0.045em;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tagline {
    font-family: var(--font-emo);
    color: var(--color-text-light);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.5;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

/* ==========================================
 * BADGES
 * ========================================== */
.badges {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    background: transparent;
    color: var(--color-text-light);
    border: 1px solid var(--border-subtle);
    border-radius: 50px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
}

/* ==========================================
 * SECCIONES EXPLICATIVAS
 * ========================================== */
.info-sections {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) auto;
    max-width: 800px;
}

.info-card {
    background: transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    flex: 1;
    max-width: 220px;
}

.info-icon {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

.info-card h3 {
    font-family: var(--font-emo);
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text);
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.info-card p {
    color: var(--color-text-light);
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================
 * DISCLAIMER
 * ========================================== */
.disclaimer {
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--spacing-md) var(--spacing-md);
    border-radius: 0;
    max-width: 720px;
    margin: var(--spacing-lg) auto var(--spacing-2xl) auto;
    text-align: center;
}

.disclaimer h3 {
    font-family: var(--font-emo);
    font-size: 1.05rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 0.6rem;
    letter-spacing: 0;
}

.disclaimer p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================
 * BOARDS (Homepage)
 * ========================================== */
.boards-section {
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-family: var(--font-title);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: none;
    border-bottom: none;
    padding-bottom: 0;
}

.boards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    /* Firefox: evita que items con contenido largo desborden la rejilla */
    min-width: 0;
}

.board-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--spacing-md) var(--spacing-sm);
    box-shadow: none;
    transition:
        background var(--duration-slow) var(--ease-soft),
        padding-left var(--duration-slow) var(--ease-soft),
        border-color var(--duration-slow) var(--ease-soft);
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    border-left: 1px solid transparent;
    /* Firefox: el default min-width:auto deja crecer al contenido y desborda */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.board-card:hover {
    background: var(--color-surface-alt);
    border-left-color: var(--accent-calm);
    padding-left: var(--spacing-md);
    box-shadow: none;
    transform: none;
    filter: none;
}

.board-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-right: 70px; /* Reservar espacio para el icono absolute */
}

.board-emoji {
    font-size: 2rem;
}

.board-name {
    font-family: var(--font-title);
    font-size: 1.65rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--color-text);
}

/* Chevron posicionado en la esquina superior derecha del card */
.board-description-details {
    margin: 0;
}

.board-chevron-summary {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    cursor: pointer;
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 1.4rem;
    list-style: none;
    padding: 0.75rem;
    outline: none;
    user-select: none;
    transition: opacity 0.2s;
    /* Área de toque más grande para mejor UX */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-chevron-summary::-webkit-details-marker {
    display: none;
}

/* Firefox: oculta el triángulo nativo del <summary> */
.board-chevron-summary::marker {
    content: '';
    display: none;
}

.board-chevron-summary:hover {
    opacity: 0.7;
}

.chevron-icon {
    display: inline-block;
    transition: opacity 0.2s;
}

.board-description-details[open] .chevron-icon {
    opacity: 0.6;
}

.board-description {
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.80;
    padding: var(--spacing-sm) 0 0 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: var(--spacing-sm);
    border-top: 1px dashed var(--border-subtle);
}

.board-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-lighter);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    border-top: none;
    letter-spacing: 0;
}

/* ==========================================
 * BOTONES
 * ========================================== */
.btn {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--duration-med) var(--ease-soft),
        filter var(--duration-med) var(--ease-soft);
    box-shadow: none;
}

.btn:hover {
    background: var(--color-primary);
    filter: brightness(1.08);
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: var(--color-secondary);
}

.btn-secondary:hover {
    background: #2563EB;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* ==========================================
 * FOOTER
 * ========================================== */
.footer {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-text-lighter);
    font-size: 0.82rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--spacing-2xl);
}

.footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* ==========================================
 * ACTIVIDAD RECIENTE + HILOS DESTACADOS
 * ========================================== */
.activity-section {
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl) auto;
}

.pinned-section {
    margin-bottom: var(--spacing-xl);
}

.activity-title {
    font-family: var(--font-title);
    font-size: 1.7rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text);
    letter-spacing: -0.01em;
    text-transform: none;
    margin-bottom: var(--spacing-md);
    line-height: 1.15;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    align-items: baseline;
    background: transparent;
    border-radius: 0;
    padding: 1rem 0;
    text-decoration: none;
    color: inherit;
    border: none;
    border-bottom: 1px dashed var(--border-subtle);
    transition:
        background var(--duration-slow) var(--ease-soft),
        padding-left var(--duration-slow) var(--ease-soft),
        opacity var(--duration-slow) var(--ease-soft);
}

.activity-item:hover {
    background: var(--accent-emotion-soft);
    padding-left: 1rem;
    box-shadow: none;
}

.pinned-item {
    border-left: 2px solid var(--color-primary);
    padding-left: 0.75rem;
}

.activity-board {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-lighter);
    white-space: nowrap;
    letter-spacing: 0;
}

.activity-thread-title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-snippet {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-lighter);
    white-space: nowrap;
    font-style: normal;
}

.board-last-activity {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-lighter);
    font-style: normal;
}

/* ==========================================
 * RESPONSIVE
 * ========================================== */
@media (max-width: 768px) {
    /* Banner de crisis - muy compacto en móvil */
    .crisis-banner {
        padding: 0.4rem 0.5rem;
    }
    
    .crisis-content {
        flex-direction: row;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    
    .sos-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        font-weight: 700;
    }
    
    .crisis-text {
        font-size: 0.7rem;
        min-width: unset;
        flex: 1 1 100%;
        line-height: 1.3;
    }
    
    .crisis-phone {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .crisis-link {
        font-size: 0.7rem;
    }
    
    /* Tarjetas de tablones - más compactas */
    .board-card {
        padding: var(--spacing-sm);
    }
    
    .board-header {
        padding-right: 80px; /* Más espacio en móvil para icono más grande */
    }
    
    .board-chevron-summary {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        font-size: 1.2rem;
        padding: 0.875rem;
        /* Área táctil extra grande para móvil */
        min-width: 48px;
        min-height: 48px;
    }
    
    .board-header h3 {
        font-size: 1.1rem;
    }
    
    .board-stats {
        font-size: 0.75rem;
    }
    
    .board-description {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .boards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .container {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    .header {
        padding: var(--spacing-lg) 0;
    }
    
    .logo {
        font-size: clamp(2.4rem, 14vw, 4rem);
        gap: 0.005em;
    }
    
    .info-sections {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* En móvil solo mostrar la primera info-card ("¿Para quién?") */
    .info-card:not(:first-child) {
        display: none;
    }

    .info-card {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    /* Disclaimer más compacto en móvil */
    .disclaimer {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .disclaimer h3 {
        font-size: 0.8rem;
    }

    .disclaimer p {
        font-size: 0.75rem;
    }

    /* Tagline más corta */
    .tagline {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Badges: wrap en 2 filas, centradas */
    .badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        overflow-x: unset;
        padding-bottom: 0;
    }

    .badge {
        flex: 0 1 calc(50% - 0.4rem);
        justify-content: center;
        font-size: 0.78rem;
        padding: 0.4rem 0.5rem;
    }

    /* Reducir espaciado general de secciones */
    .boards-section {
        margin-bottom: var(--spacing-md);
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* Títulos de sección actividad y cards — reducir carga visual */
    .activity-title {
        font-size: 1.1rem;
    }

    .activity-thread-title {
        font-size: 1.05rem;
    }

    .board-name {
        font-size: 1.2rem;
    }
    
    /* Toggle button más pequeño en móvil */
    .theme-toggle {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
        bottom: 1rem;
        right: 1rem;
    }
}

/* ==========================================
 * UTILIDADES
 * ========================================== */
.text-center {
    text-align: center;
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* ==========================================
 * THEME TOGGLE BUTTON
 * ========================================== */
.theme-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    z-index: 999;
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: var(--shadow-lg), 0 0 20px var(--color-primary);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.inline-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.92rem;
}

.muted-link {
    color: var(--color-text-light);
    text-decoration: none;
}

.muted-link:hover,
.footer-link:hover,
.country-directory-link:hover {
    text-decoration: underline;
}

.resources-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.section-card {
    background: var(--color-surface);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}

.section-heading {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.section-heading h2,
.resources-title {
    margin: 0;
    color: var(--color-primary);
}

.section-kicker,
.resources-kicker {
    margin: 0 0 0.35rem 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
    color: var(--color-text-lighter);
    font-weight: 700;
}

.section-description,
.resources-intro,
.country-notes,
.resources-alert-note,
.resources-note p,
.board-page-description {
    color: var(--color-text-light);
}

.resources-hero {
    text-align: center;
    padding: 1rem 0 2rem;
}

.resources-title {
    font-size: clamp(2rem, 5vw, 3rem);
}

.resources-intro {
    max-width: 52rem;
    margin: 1rem auto 0;
    font-size: 1.05rem;
}

.resources-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.resources-alert {
    background: linear-gradient(135deg, #e8a0a0 0%, #d88888 100%);
    color: white;
    padding: 2rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    box-shadow: none;
}

.resources-alert h2,
.resources-alert p {
    margin-top: 0;
}

.resources-alert-actions {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.resources-alert-phone {
    background: white;
    color: #d88888;
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
    display: block;
}

.resources-directory-section {
    margin-top: 0.5rem;
}

.resources-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.country-card {
    border: 1px solid var(--color-surface-alt);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    background: var(--color-bg);
}

.country-card-top,
.board-shell-top,
.board-list-top,
.thread-page-top,
.thread-row-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.country-card h3,
.board-page-title {
    margin: 0;
}

.country-pill,
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(5, 150, 105, 0.12);
    color: var(--color-success);
}

.country-pill-muted,
.live-pill-offline {
    background: rgba(217, 119, 6, 0.14);
    color: var(--color-warning);
}

.country-meta {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.country-meta p,
.country-notes,
.resources-note h3,
.resources-note p {
    margin: 0;
}

.country-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

.country-directory-link,
.footer-link {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-links-line {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.board-shell {
    padding: 2rem;
}

.board-page-title {
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    color: var(--color-primary);
}

.board-rules-details {
    margin-top: 1rem;
}

.board-rules-details summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 600;
}

.board-rules-box {
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    white-space: pre-line;
}

.board-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.board-sort-select {
    border: 1px solid var(--color-text-lighter);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    padding: 0.45rem 0.65rem;
    font: inherit;
}

.thread-row-link {
    display: block;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
    transition:
        background var(--duration-med) var(--ease-soft),
        padding-left var(--duration-med) var(--ease-soft);
}

.thread-row-link:hover {
    background: var(--accent-emotion-soft);
    padding-left: 1.5rem;
}

.thread-row-title {
    margin: 0 0 0.5rem 0;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.thread-row-meta {
    color: var(--color-text-light);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    margin: 0;
    font-style: normal;
    letter-spacing: 0;
}

.thread-row-image {
    margin-left: 1rem;
}

.thread-page-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.thread-post-row {
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* Tipografía del contenido de posts: Lora 1.80 */
.post-content {
    font-family: var(--font-body);
    line-height: var(--leading-body, 1.80);
    color: var(--color-text);
}

.post-content p + p {
    margin-top: 1.4em;
}

.empty-state {
    text-align: center;
    color: var(--color-text-light);
    padding: 2rem;
}

.empty-state-error {
    color: var(--color-crisis);
}

.moderation-dashboard {
    max-width: 1100px;
}

.moderation-header-bar {
    margin-bottom: 1rem;
}

.moderation-inline-form {
    margin: 0;
}

.moderation-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.moderation-provider-grid,
.moderation-metric-grid,
.moderation-review-grid {
    display: grid;
    gap: 1rem;
}

.moderation-provider-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.moderation-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.moderation-review-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.moderation-provider-card,
.moderation-metric-card,
.moderation-event-card,
.moderation-report-card,
.moderation-analytics-day {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.moderation-provider-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.moderation-provider-top h3,
.moderation-subtitle {
    margin: 0;
    color: var(--color-text);
}

.moderation-status-pill {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.moderation-status-on {
    background: rgba(5, 150, 105, 0.12);
    color: var(--color-success);
}

.moderation-status-off {
    background: rgba(217, 119, 6, 0.12);
    color: var(--color-warning);
}

.moderation-provider-meta,
.moderation-provider-summary,
.moderation-provider-threshold {
    margin: 0.35rem 0 0;
    color: var(--color-text-light);
}

.moderation-thread-card {
    display: grid;
    gap: 0.85rem;
}

.moderation-action-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.moderation-filter-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.moderation-filter-form-inline {
    align-items: stretch;
}

.moderation-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-light);
}

.moderation-context-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 0;
}

.moderation-notice {
    border-left: 4px solid transparent;
}

.moderation-notice p {
    margin: 0;
}

.moderation-notice-info {
    border-left-color: var(--color-secondary);
}

.moderation-notice-success {
    border-left-color: var(--color-success);
}

.moderation-notice-warning {
    border-left-color: var(--color-warning);
}

.moderation-notice-error {
    border-left-color: var(--color-error);
}

.moderation-danger-btn {
    background: var(--color-error);
}

.moderation-danger-btn:hover {
    background: var(--color-crisis);
}

.moderation-metric-card {
    display: grid;
    gap: 0.35rem;
    text-align: center;
}

.moderation-metric-card strong {
    font-size: 1.8rem;
    color: var(--color-primary);
}

.moderation-analytics-list,
.moderation-event-list,
.moderation-simple-list {
    display: grid;
    gap: 0.85rem;
}

.moderation-analytics-date {
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.moderation-analytics-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.moderation-analytics-badge {
    border-color: transparent;
    background: var(--color-surface);
}

.moderation-event-payload {
    overflow-x: auto;
    white-space: pre-wrap;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
    color: var(--color-text);
    font-family: var(--font-mono);
}

@media (max-width: 768px) {
    .resources-header,
    .moderation-hero,
    .board-shell-top,
    .board-list-top,
    .thread-page-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .inline-nav,
    .footer-links-line,
    .country-actions,
    .resources-actions,
    .thread-page-badges {
        gap: 0.75rem;
    }

    .board-sort-label {
        flex-wrap: wrap;
    }

    .theme-toggle {
        bottom: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }

    .moderation-metric-grid,
    .moderation-provider-grid,
    .moderation-review-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
 * ONBOARDING HINTS (homepage)
 * Microcopias que reducen ansiedad social
 * ========================================== */
.onboarding-hints {
    max-width: 640px;
    margin: var(--spacing-md) auto var(--spacing-xl);
    text-align: center;
    font-family: var(--font-emo);
    font-style: italic;
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0;
}

.onboarding-hints span {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    opacity: 0;
    animation: hint-fade-in 2.2s var(--ease-soft) forwards;
}

.onboarding-hints span:nth-child(1) { animation-delay: 0.5s; }
.onboarding-hints span:nth-child(3) { animation-delay: 1.3s; }
.onboarding-hints span:nth-child(5) { animation-delay: 2.1s; }

.onboarding-hints .hint-sep {
    color: var(--color-text-lighter);
    font-style: normal;
    font-family: var(--font-body);
    margin: 0 0.3rem;
    opacity: 0.4;
    animation: none;
}

@keyframes hint-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================
 * FADE-IN ORGÁNICO de contenido
 * Aparecen las cosas con calma, no de golpe
 * ========================================== */
.container > * {
    animation: page-soft-in 1.2s var(--ease-soft) both;
}

.boards-section { animation-delay: 0.1s; }
.activity-section { animation-delay: 0.15s; }

@keyframes page-soft-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
 * Estilos de selección (calor humano sutil)
 * ========================================== */
::selection {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* ==========================================
 * Sistema de likes (corazones)
 * ========================================== */
.like-btn {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-light);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s, transform 0.1s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
    white-space: nowrap;
}
.like-btn:hover {
    color: var(--color-crisis);
    border-color: var(--color-crisis);
    transform: scale(1.08);
}
.like-btn[data-liked="true"] {
    color: var(--color-crisis);
}
.like-count {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}