/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL BASE STYLES
   Consumes tokens from themes/public.css
   ═══════════════════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
}

.container {
    width: 100%;
    max-width: var(--width-content);
    margin: 0 auto;
    padding: 0 20px;
}

/* Ancho del header y del footer (Apariencia): los mismos anchos que los nodos */
.width--wide .container { max-width: var(--width-wide); }
.width--full .container { max-width: none; }


/* TAMAÑOS DE PANTALLA (#263) ////////////////////////////////////

   Tres tamaños para todo el sitio (núcleo y módulos), los únicos:
     celular     hasta 767px    @container site (max-width: 767px)
     tablet      hasta 1023px   @container site (max-width: 1023px)
     escritorio  desde 1024px   (lo de siempre, sin regla)

   El contenido responde al ancho de la PÁGINA, no al de la ventana: el header, el main y el
   footer son contenedores "site", y el CSS de bloques y widgets usa @container site en vez de
   @media. Así, en la vista previa por dispositivo del editor (#266), la página responde al ancho
   del lienzo; fuera de ella el editor muestra siempre escritorio (base-editor.css). Un test revisa
   que el CSS solo use estos cortes (tests/cms/test_breakpoints.py).

   Va en cada parte y no en un envoltorio de toda la página: un contenedor es la referencia de
   los position: fixed que tiene adentro, y el menú del celular (fixed) está fuera del <header>.
   Un header hecho desde cero (sin headers/base-header.html) lleva la clase hdr-site. */
.hdr-site,
.main,
.footer-site {
    container: site / inline-size;
}


/* ESTILOS DE LOS NODOS QUE SE ADAPTAN SOLOS (#264) //////////////

   El espaciado, el gap y la letra que elige el usuario llegan como variables en el style de
   cada elemento ({% node_style %}, app_cms/templatetags/style_tags.py): --pt --pr --pb --pl (padding),
   --mt --mb (margin, solo vertical), --gap, --fs (font-size) y --w (ancho de una imagen).
   Estas reglas las aplican multiplicadas por la escala del tamaño de pantalla:

                 espaciado   letra
     escritorio  1           1
     tablet      0,75        0,85
     celular     0,5         0,75   (nunca menos que 1rem, o que su tamaño si es menor)

   - Solo actúan en el elemento que tiene la variable en su style ([style*="--pt:"]): un hijo
     que la hereda no la tiene en su style, así que no recibe ese relleno, y el CSS propio de
     un widget sigue valiendo donde el usuario no eligió nada.
   - !important: lo que elige el usuario gana sobre el CSS de un widget, como cuando iba directo
     en el style. Lo que cambia con el tamaño es la escala, no estas reglas. */
:root {
    --space-scale: 1;
    --font-scale: 1;
}

@container site (max-width: 1023px) {
    :where(.hdr-site, .main, .footer-site) > * {
        --space-scale: 0.75;
        --font-scale: 0.85;
    }
}

@container site (max-width: 767px) {
    :where(.hdr-site, .main, .footer-site) > * {
        --space-scale: 0.5;
        --font-scale: 0.75;
    }
}

[style*="--pt:"] {
    padding: calc(var(--pt) * var(--space-scale)) calc(var(--pr) * var(--space-scale))
             calc(var(--pb) * var(--space-scale)) calc(var(--pl) * var(--space-scale)) !important;
}

/* El margen es solo vertical (#158): los costados no se tocan, así un nodo de la raíz sigue
   centrado (margin-inline: auto) y el resto deja su margen horizontal normal */
[style*="--mt:"] {
    margin-top: calc(var(--mt) * var(--space-scale)) !important;
    margin-bottom: calc(var(--mb) * var(--space-scale)) !important;
}

[style*="--gap:"] {
    gap: calc(var(--gap) * var(--space-scale)) !important;
}

[style*="--fs:"] {
    font-size: max(min(var(--fs), 1rem), calc(var(--fs) * var(--font-scale))) !important;
}

/* El ancho elegido de una imagen; en celular, todo el ancho (al 25% de 375px quedaría en 90px) */
[style*="--w:"] {
    width: var(--w) !important;
}

@container site (max-width: 767px) {
    [style*="--w:"] {
        width: 100% !important;
    }
}


/* BOTON UNIVERSAL /////////////////////////////////////////////// */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 30px;
    background: var(--color-btn-bg);
    border-radius: var(--radius);
    border: 0.5px solid transparent;

    color: var(--color-btn-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;

    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    text-decoration: none;
    line-height: 1;
}

.btn:hover {
    background-color: var(--color-btn-bg-hover);
    color: var(--color-btn-text-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Botón sin enlace (HU-101): se ve, pero no reacciona al mouse porque no lleva a ningún lado */
.btn[aria-disabled="true"] {
    pointer-events: none;
}

/* --- Variantes de tamaño (bloque Botón) --- */

.btn--sm {
    padding: 8px 18px;
    font-size: 12px;
}

.btn--lg {
    padding: 16px 36px;
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR GLOBAL
   ═══════════════════════════════════════════════════════════════════════════ */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 9999px;
    transition: background 0.15s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

::-webkit-scrollbar-corner {
    background: transparent;
}