/*
  Base global de la MPA. El orden de capas mantiene predecible la cascada
  aunque cada documento cargue hojas de componentes y features distintas.
*/

@layer reset, base, components, features;

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

@layer base {
  :root {
    --font-body: "Space Grotesk", sans-serif;
    --font-display: "Orbitron", sans-serif;
    /* Mono de marca para código y salida. Las de sistema (Consolas en
       Windows) desentonan con Space Grotesk y abaratan el entorno. */
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --color-background: #0d0f11;
    --color-background-deep: #0b0d0f;
    --color-text: #fff;
    --color-text-inverse: #1a1a1a;
    --color-text-muted: #ccc;
    --color-text-subtle: #aaa;
    --color-accent: #00e1ff;
    --color-accent-dark: #1249a4;
    --color-success: #25d366;
    --color-warning: #e5a848;
    --color-error: #e5484d;
    --color-error-text: #ffb4b4;
    --color-field: #1e1e1e;
    --color-border: #333;

    --gradient-heading: linear-gradient(90deg, var(--color-text-subtle), var(--color-text));
    --glow-accent: 0 0 16px color-mix(in srgb, var(--color-accent) 55%, transparent);

    --radius-field: 8px;
    --radius-button: 10px;
    --radius-panel: 20px;
    --radius-pill: 999px;

    --border-subtle: 1px solid rgba(255, 255, 255, 0.1);
    --shadow-panel: 0 0 20px rgba(255, 255, 255, 0.05);
    --focus-ring: 3px solid var(--color-accent);
    --focus-ring-offset: 3px;

    /*
      5.5rem = 4rem de logo + 1.5rem de aire. Es lo que la barra YA rinde
      fuera del home; ahora está declarado en vez de emerger.
    */
    --navbar-height: 5.5rem;

    /*
      El escalón derivado: lo que tiene que dejar libre el <main> de una página
      interna para que su primer título no nazca debajo de la barra fija.

      Existe porque cada página resolvía ese despeje por su cuenta, con un
      número suelto (8rem acá, 7rem allá) que ya traía sumada la altura del
      navbar. Un número así no se puede auditar: mirándolo no se sabe cuánto es
      barra y cuánto es aire, y si la barra cambia de alto no hay forma de
      saber cuáles hay que tocar. Acá el aire está a la vista, y es lo único
      que se elige.

      5.5 + 2.5 = 8rem, el mismo total de siempre. Lo que cambió es de dónde
      sale: antes 1.5rem de aire sobre una barra declarada de más (6.5rem
      para algo que medía 5.5), ahora 2.5rem sobre la barra real.
    */
    --espacio-bajo-navbar: calc(var(--navbar-height) + 2.5rem);

    /*
      La perilla del sitio. Cambiar SOLO este valor reajusta todo el layout.
      Los escalones son proporcionales porque son el mismo espacio visual
      visto a distintas densidades de contenido.
    */
    --ancho-sitio: 1200px;                              /* grillas y secciones anchas */
    --ancho-medio: calc(var(--ancho-sitio) * 0.9);      /* 1080: portal, catálogo, pie */
    --ancho-contenido: calc(var(--ancho-sitio) * 0.75); /* 900: gestión, bloques en panel */

    /*
      NO se deriva de --ancho-sitio a propósito. El límite de lectura es función
      de la tipografía (45-75 caracteres por línea), no del ancho de la página:
      si el sitio creciera y la prosa escalara con él, se degradaría justo lo
      que este límite existe para proteger.
    */
    --ancho-lectura: 760px;                             /* prosa: legal, detalle de curso */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    --z-behind: -1;
    --z-base: 0;
    --z-content: 1;
    --z-elevated: 2;
    --z-highlight: 3;
    --z-hover: 10;
    --z-mobile-menu: 999;
    --z-navbar: 1000;
    --z-mobile-toggle: 1100;
    --z-dropdown: 1200;
    --z-toast: 1300;
  }

  @media (max-width: 760px) {
    :root {
      /*
        4.1rem = 3.1rem del toggle (navbar.css:224) + 2 × 0.5rem de aire,
        el padding-block que hoy tiene la barra compacta (navbar.css:72).
        Es la altura que el sitio ya rinde a ≤760: acá sólo se declara.
      */
      --navbar-height: 4.1rem;
    }
  }

  /*
    El navbar es fixed y taparía el inicio de cualquier ancla. Reservar el
    espacio acá, en el scrollport, cubre todos los anclajes del documento en
    una sola regla en vez de repetir scroll-margin-top por sección. El 1rem
    es aire: sin él, el título de la sección nacía pegado al borde de la barra.
  */
  html {
    scroll-padding-top: calc(var(--navbar-height) + 1rem);
  }

  /*
    La barra de scroll de la página, con el degradado de la marca: del azul
    del logo al cian, sobre un riel oscuro, con flechas cian. Antes era la del
    sistema, que en Windows es un riel gris claro pegado a un sitio oscuro.
    El menú desplegable usa la misma (ver .nav-menu__list en navbar.css).
  */
  html::-webkit-scrollbar { width: 8px; }
  html::-webkit-scrollbar-track { background: #0b0d10; }
  html::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--color-accent-dark), var(--color-accent));
    border-radius: 99px;
  }
  /* Las flechas: un triángulo cian (#00e1ff, el --color-accent; dentro de un
     data: URI no hay variables) sobre el mismo riel. Los botones dobles que
     algunos temas agregan se esconden para que quede uno por extremo. */
  html::-webkit-scrollbar-button:single-button:vertical {
    display: block;
    height: 0.75rem;
    background: #0b0d10 no-repeat center / 8px 8px;
  }
  html::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 2 L7 6 H1 Z' fill='%2300e1ff'/%3E%3C/svg%3E");
  }
  html::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2 H7 L4 6 Z' fill='%2300e1ff'/%3E%3C/svg%3E");
  }
  html::-webkit-scrollbar-button:vertical:start:increment,
  html::-webkit-scrollbar-button:vertical:end:decrement { display: none; }

  /*
    Firefox no entiende ::-webkit-scrollbar: recibe los mismos colores, sin el
    degradado. Va dentro de @supports porque en Chrome un `scrollbar-color`
    anula los ::-webkit-scrollbar del mismo elemento.
  */
  @supports not selector(::-webkit-scrollbar) {
    html {
      scrollbar-width: thin;
      scrollbar-color: var(--color-accent-dark) #0b0d10;
    }
  }

  body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
  }

  button,
  .button {
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    font-weight: 500;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    letter-spacing: 0.5px;
  }

  input,
  textarea,
  select {
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.3px;
  }

  input::placeholder,
  textarea::placeholder {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-muted);
  }
}

@layer components {
  /*
    Utilidades compartidas para patrones que se repetían idénticos en varias
    hojas de features (heading con gradiente, foco accesible, estado
    deshabilitado). Un feature puede seguir sobreescribiendo si necesita un
    caso distinto; esto solo cubre el caso común.
  */
  .heading--gradient {
    background: var(--gradient-heading);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .u-focus-ring:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .u-disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  /*
    Ancho de contenedor de página. Sin padding-inline: eso lo pone el padre
    (cada feature ya lo declara según su caso). El default es --ancho-sitio;
    los modificadores topan más angosto.
  */
  .u-contenedor {
    max-inline-size: var(--ancho-sitio);
    margin-inline: auto;
  }

  .u-contenedor--medio {
    max-inline-size: var(--ancho-medio);
  }

  .u-contenedor--contenido {
    max-inline-size: var(--ancho-contenido);
  }

  .u-contenedor--lectura {
    max-inline-size: var(--ancho-lectura);
  }

  /* Visible para lectores de pantalla, invisible en pantalla. */
  .u-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;
  }
}