/* ─────────────────────────────────────────────────────────────────────────
   Hoja común de las páginas legales: Privacidad y Términos.
   Antes cada una llevaba su propio <style> casi idéntico; cualquier arreglo
   había que hacerlo dos veces y ya habían empezado a divergir.

   Día y noche automáticos. La paleta clara es la misma "Modo Día / Pergamino"
   que usa la app en client/src/index.css, para que el portal no cambie de
   identidad al cruzar de /app a las páginas públicas.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: dark;
    --bg:      #080808;
    --surface: #111111;
    --border:  rgba(212, 175, 55, .14);
    --text:    #EDE8DC;
    --muted:   #998E78;
    --gold:    #D4AF37;
    --crimson: #C93A3A;
    --th-bg:   rgba(212, 175, 55, .05);
}

/* El sistema manda, salvo que la página pida un modo a mano con data-theme. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        /* Mismo arena que las paginas de pergamino: el sitio no cambia de
           superficie al pasar de una seccion a otra.                       */
        --bg:      #d8caa9;
        --surface: #e6dbc0;
        --border:  rgba(96, 76, 34, .32);
        --text:    #1c1408;
        --muted:   #5f4d2e;
        /* Oro oscurecido: el #D4AF37 sobre arena da 1,6:1 y es ilegible.
           Este llega a 5,3:1, por encima del minimo AA para texto normal.  */
        --gold:    #5f4906;
        --crimson: #8c1c1c;
        --th-bg:   rgba(96, 76, 34, .1);
    }
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg:      #d8caa9;
    --surface: #e6dbc0;
    --border:  rgba(96, 76, 34, .32);
    --text:    #1c1408;
    --muted:   #5f4d2e;
    --gold:    #5f4906;
    --crimson: #8c1c1c;
    --th-bg:   rgba(96, 76, 34, .1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* Roboto Slab y no Raleway: estos son documentos largos, o sea lectura.
       Tenor Sans queda reservada al pergamino, donde encaja con la textura. */
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.4rem 5rem; }

/* ── Menú superior ────────────────────────────────────────────────────────
   Mismo idioma que el de la portada —versalitas muy espaciadas— pero con los
   tokens del tema, para que también funcione en modo día.                  */
.doc-nav {
    display: flex; justify-content: center; gap: clamp(20px, 7vw, 45px);
    border-bottom: 1px solid var(--border);
}
.doc-nav a {
    color: var(--muted); text-decoration: none;
    font-size: 12.5px; letter-spacing: 4px; text-indent: 4px;
    text-transform: uppercase;
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 14px 0;
    transition: color .3s ease;
}
.doc-nav a:hover,
.doc-nav a:focus-visible,
.doc-nav a[aria-current="page"] { color: var(--gold); }

/* Con menú arriba, el encabezado no necesita tanto aire propio. */
.doc-nav + header { padding-top: 2.2rem; }

/* En celular los tres items no entran en un renglon con 4px de espaciado:
   "Familia masonica" solo ya mide 184px. Se achica letra y aire.          */
@media (max-width: 600px) {
    .doc-nav { gap: 16px; }
    .doc-nav a { font-size: 11px; letter-spacing: 2px; text-indent: 2px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) { .doc-nav a { transition: none; } }

header {
    border-bottom: 1px solid var(--border);
    padding: 3rem 0 1.6rem;
    margin-bottom: 2.5rem;
}

.kicker {
    font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); margin: 0 0 .8rem;
}

h1 {
    font-family: 'Marcellus', Georgia, serif; font-weight: normal;
    font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1.15;
    margin: 0 0 .7rem; text-wrap: balance;
}

.updated { color: var(--muted); font-size: .88rem; margin: 0; }

h2 {
    font-family: 'Marcellus', Georgia, serif; font-weight: normal;
    font-size: 1.4rem; line-height: 1.25; margin: 2.8rem 0 .8rem;
    padding-top: 1.4rem; border-top: 1px solid var(--border);
    text-wrap: balance;
}

/* El primer h2 va pegado al encabezado, que ya trae su propia línea: si no,
   quedan dos rayas seguidas con un hueco vacío entre las dos. */
header + h2 { border-top: none; padding-top: 0; margin-top: 2rem; }

h3 { font-size: 1rem; margin: 1.6rem 0 .5rem; color: var(--gold); font-weight: 600; }

p, li { margin: 0 0 1rem; text-wrap: pretty; }
ul { padding-left: 1.2rem; }
li { margin-bottom: .5rem; }
strong { color: var(--text); font-weight: 600; }

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

.box {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 2px solid var(--gold); border-radius: 0 4px 4px 0;
    padding: 1.1rem 1.2rem; margin: 1.5rem 0;
}
.box p:last-child { margin-bottom: 0; }
.box.grave { border-left-color: var(--crimson); }

/* Las tablas no rompen el ancho de la página: hacen scroll en su propia caja. */
.table-scroll {
    overflow-x: auto; margin: 1.3rem 0;
    border: 1px solid var(--border); border-radius: 5px;
}
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .92rem; }
th, td {
    text-align: left; padding: .7rem .9rem;
    border-bottom: 1px solid var(--border); vertical-align: top;
}
th {
    background: var(--th-bg); color: var(--muted); font-weight: 600;
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: none; }


/* ── Lista de enlaces ──────────────────────────────────────────────────
   Sin tarjetas: filas separadas por una línea. Tres tarjetas iguales en fila
   es el patrón más gastado que existe y en el celular se apilan igual.     */
.enlace-lista { list-style: none; padding: 0; margin: 0; }

.enlace-lista li { margin: 0; border-top: 1px solid var(--border); }
.enlace-lista li:first-child { border-top: none; }

.enlace-lista a {
    display: block; padding: 1.05rem .2rem; text-decoration: none;
    color: var(--text); transition: background-color .18s ease, padding-left .18s ease;
}
.enlace-lista a:hover,
.enlace-lista a:focus-visible { background: var(--surface); padding-left: .7rem; }

.enlace-nombre { display: block; font-weight: 600; color: var(--gold); }

.enlace-nombre::after {
    content: '↗'; font-size: .78em; margin-left: .4em;
    opacity: .55; vertical-align: baseline;
}

.enlace-desc {
    display: block; color: var(--muted);
    font-size: .9rem; line-height: 1.5; margin-top: .18rem;
}

@media (prefers-reduced-motion: reduce) {
    .enlace-lista a { transition: none; }
}

/* ── Pie ──────────────────────────────────────────────────────────────────
   Uno solo para todo el sitio: nada mas que lo legal, fino y a la derecha,
   igual que en la portada. Antes cada pagina tenia el suyo.               */
.pie-legal {
    border-top: 1px solid var(--border);
    margin-top: 3.5rem;
    display: flex; justify-content: flex-end; gap: 2px;
}
.pie-legal a {
    color: var(--muted); text-decoration: none; font-size: .82rem;
    /* Area tactil comoda: el texto es chico, el blanco de toque no. */
    display: inline-flex; align-items: center;
    padding: 0 8px; min-height: 44px;
}
.pie-legal a:hover, .pie-legal a:focus-visible { color: var(--gold); }

/* ── Selector de tema ───────────────────────────────────────────────────────
   Tres estados: automático (sigue al sistema), claro y oscuro.            */
.selector-tema {
    background: none; border: 1px solid currentColor; border-radius: 50%;
    color: var(--muted);
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative;
    transition: color .25s ease;
    outline-offset: 3px;
}
.selector-tema::before {
    content: ''; position: absolute; width: 44px; height: 44px;
}
.selector-tema:hover, .selector-tema:focus-visible { color: var(--gold); }
.selector-tema svg { width: 19px; height: 19px; display: block; }

@media (prefers-reduced-motion: reduce) { .selector-tema { transition: none; } }