/* =========================================================================
   LAYOUT + COMPONENTES
   Consume solo tokens --kbl-*. Radio 0 en todo, como manda el sistema:
   los contenedores son bloques, como el signo.
   ========================================================================= */

@layer layout {
  .envoltorio {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: var(--kbl-e-4);
  }

  @media (min-width: 40rem) {
    .envoltorio { padding-inline: var(--kbl-e-6); }
  }

  .seccion {
    padding-block: var(--kbl-e-8);
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
  }

  @media (min-width: 48rem) {
    .seccion { padding-block: var(--kbl-e-9); }
  }

  .medida { max-width: 34rem; }

  .pila > * + * { margin-block-start: var(--kbl-e-4); }
  .pila-holgada > * + * { margin-block-start: var(--kbl-e-5); }
}

@layer componentes {

  /* --- Escala tipográfica ---------------------------------------------
     Los roles (.kbl-titular, .kbl-texto, .kbl-etiqueta) vienen de
     tokens.css. Acá solo se les asigna tamaño según el lugar. */
  .t-60 { font-size: var(--kbl-t-60); line-height: var(--kbl-lh-60); }
  .t-44 { font-size: var(--kbl-t-44); line-height: var(--kbl-lh-44); }
  .t-32 { font-size: var(--kbl-t-32); line-height: var(--kbl-lh-32); }
  .t-24 { font-size: var(--kbl-t-24); line-height: var(--kbl-lh-24); }
  .t-20 { font-size: var(--kbl-t-20); line-height: var(--kbl-lh-20); }
  .t-18 { font-size: var(--kbl-t-18); line-height: var(--kbl-lh-18); }

  /* El titular del hero baja a 44 y a 32 en pantallas chicas: 60 px a 360
     de ancho parte las palabras y empuja el resto fuera de la pantalla. */
  @media (max-width: 60rem) { .t-60 { font-size: var(--kbl-t-44); line-height: var(--kbl-lh-44); } }
  @media (max-width: 30rem) { .t-60 { font-size: var(--kbl-t-32); line-height: var(--kbl-lh-32); } }
  @media (max-width: 30rem) { .t-44 { font-size: var(--kbl-t-32); line-height: var(--kbl-lh-32); } }

  .apagado { color: var(--kbl-texto-2); }
  .tenue { color: var(--kbl-texto-3); }

  /* --- Cabecera ------------------------------------------------------- */
  .cabecera-sitio {
    border-block-end: var(--kbl-borde) solid var(--kbl-linea);
    background-color: var(--kbl-fondo);
  }

  .cabecera-sitio__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kbl-e-4);
    min-height: 72px;
    flex-wrap: wrap;
    padding-block: var(--kbl-e-3);
  }

  /* --- Marca -----------------------------------------------------------
     El logotipo se inlinea en build desde assets/logo/ y hereda el color de
     texto por currentColor: no hay una versión por tema. El descriptor va al
     lado porque la sigla no dice de qué se trata (identidad verbal §2.1). */
  .marca {
    display: inline-flex;
    align-items: center;
    gap: var(--kbl-e-3);
    color: var(--kbl-tinta);
    text-decoration: none;
  }

  /* El build le quita width y height al SVG para que el tamaño lo decida el
     CSS. Hay que dárselo al svg, no al span que lo envuelve: sin alto
     explícito, un SVG sin dimensiones dentro de un contenedor flex colapsa. */
  .marca__signo { display: flex; flex: none; }
  .marca__signo svg { height: 22px; width: auto; }

  .pie-sitio .marca__signo svg { height: 18px; }

  .marca__descriptor {
    padding-inline-start: var(--kbl-e-3);
    border-inline-start: var(--kbl-borde) solid var(--kbl-linea-fuerte);
    color: var(--kbl-texto-2);
  }

  /* Debajo de 30rem el descriptor pasa abajo del signo en vez de al lado:
     de costado obliga a partir "Automatización" en dos. */
  @media (max-width: 30rem) {
    .marca { flex-wrap: wrap; gap: var(--kbl-e-2); }
    .marca__descriptor {
      padding-inline-start: 0;
      border-inline-start: 0;
      flex-basis: 100%;
    }
  }

  /* --- Navegación ------------------------------------------------------ */
  .nav-sitio ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kbl-e-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-sitio a {
    color: var(--kbl-texto-2);
    text-decoration: none;
    padding-block: var(--kbl-e-2);
  }

  .nav-sitio a:hover { color: var(--kbl-tinta); text-decoration: underline; }

  /* --- Selector de tema ------------------------------------------------
     Nace oculto. Solo el script lo muestra: sin JS no queda un control
     muerto en la página. */
  .selector-tema {
    display: inline-flex;
    align-items: center;
    gap: var(--kbl-e-2);
    min-height: 40px;
    padding: var(--kbl-e-2) var(--kbl-e-3);
    background-color: var(--kbl-superficie);
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
    border-radius: var(--kbl-radio);
    color: var(--kbl-tinta);
    cursor: pointer;
  }

  .selector-tema:hover { background-color: var(--kbl-superficie-2); }
  .selector-tema svg { width: 16px; height: 16px; flex: none; }

  /* --- Botones ---------------------------------------------------------
     El primario es tinta sólida: la marca no tiene color de acento, y el
     color solo aparece cuando significa un estado. */
  .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kbl-e-2);
    min-height: 48px;
    padding: var(--kbl-e-3) var(--kbl-e-5);
    border-radius: var(--kbl-radio);
    border: var(--kbl-borde) solid transparent;
    font-weight: var(--kbl-peso-medio);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: opacity var(--kbl-dur-corte) var(--kbl-ease-corte);
  }

  .boton--primario {
    background-color: var(--kbl-interactivo);
    color: var(--kbl-fondo);
  }

  .boton--primario:hover { opacity: 0.86; }

  .boton--secundario {
    background-color: transparent;
    color: var(--kbl-tinta);
    border-color: var(--kbl-linea-fuerte);
  }

  .boton--secundario:hover { background-color: var(--kbl-superficie-2); }

  /* --- PENDIENTE -------------------------------------------------------
     Usa el color de alerta del sistema, que significa exactamente esto:
     pendiente, necesita a una persona. Lleva etiqueta textual además de
     color, para que se distinga también impreso en blanco y negro. */
  .pendiente {
    display: block;
    padding: var(--kbl-e-4) var(--kbl-e-5);
    background-color: var(--kbl-superficie-2);
    color: var(--kbl-tinta);
    border: var(--kbl-borde) solid var(--kbl-alerta);
    border-inline-start-width: 4px;
    border-radius: var(--kbl-radio);
    font-size: var(--kbl-t-14);
    line-height: var(--kbl-lh-14);
  }

  .pendiente__etiqueta {
    display: block;
    margin-block-end: var(--kbl-e-2);
    color: var(--kbl-alerta);
  }

  .pendiente p { margin: 0; }
  .pendiente p + p { margin-block-start: var(--kbl-e-2); }

  .pendiente-inline {
    padding: 0.1em 0.4em;
    background-color: var(--kbl-superficie-2);
    color: var(--kbl-tinta);
    border: var(--kbl-borde) solid var(--kbl-alerta);
    font-size: 0.9em;
  }

  /* --- Pie -------------------------------------------------------------- */
  .pie-sitio {
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
    padding-block: var(--kbl-e-7);
    color: var(--kbl-texto-2);
  }

  .pie-sitio__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kbl-e-5);
  }

  .pie-sitio .marca { color: var(--kbl-texto-2); }
}