/* Base de todo el portal: fuentes, colores y piezas comunes.
   Rediseño del 1-oct-2026 (preview/prototipo.html): misma familia que el EMD4 (claro, Geist,
   íconos Lucide, tarjetas blancas) con su toque propio: azul y magenta de Agile Wise y títulos
   en serif editorial. */

@layer tokens, base, layout, componentes;

/* Geist (texto) y Source Serif 4 (títulos), licencia OFL, guardadas en el repo: la CSP no deja
   cargar de Google. Solo el subconjunto latino: cubre el español completo. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
}

@layer tokens {
  :root {
    --fondo: #f5f8fb;
    --tarjeta: #ffffff;
    --texto: #0b1723;
    --texto-suave: #576574;
    --borde: #d9e3eb;
    --borde-suave: #e7edf3;

    /* Azul Agile Wise, un paso más oscuro para botones: 5,4:1 con texto blanco */
    --primario: #0a6eaa;
    --primario-hover: #085d90;
    --primario-suave: #e7f3fb;
    --primario-texto: #064a73;
    --aw-azul: #0e80c4;
    /* Magenta Agile Wise: solo como acento (Nuevo, sección activa, barras de uso, foco) */
    --magenta: #e93aea;
    --magenta-texto: #a3149a;
    --magenta-suave: #fce9fc;
    --noche: #0b1929;

    --peligro: #c81e22;
    --peligro-suave: #fdecec;
    --ok: #0f7a4c;
    --ok-suave: #e6f6ee;
    --alerta: #8a5a00;
    --alerta-suave: #fff4dc;

    --sombra: 0 1px 2px rgba(11, 23, 35, 0.05), 0 1px 3px rgba(11, 23, 35, 0.06);
    --sombra-alta: 0 10px 30px -10px rgba(10, 110, 170, 0.2), 0 2px 6px rgba(11, 23, 35, 0.06);
    --fuente: 'Geist', system-ui, sans-serif;
    --serif: 'Source Serif 4', Georgia, serif;
    --radio: 8px;
    --radio-caja: 12px;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--fondo);
    color: var(--texto);
    font: 400 15px/1.55 var(--fuente);
    -webkit-font-smoothing: antialiased;
  }
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
  a {
    color: var(--primario);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  button {
    font: inherit;
  }
  :focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 2px;
  }
  [hidden] {
    display: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
    }
  }
}

@layer componentes {
  /* Íconos: sprite de trazos Lucide en /img/iconos.svg */
  .icono {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icono--16 {
    width: 16px;
    height: 16px;
  }

  /* Títulos en serif editorial: la sensación de biblioteca */
  .titulo-serif {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto);
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .marca:hover {
    text-decoration: none;
  }
  .marca__logo {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: var(--sombra);
  }
  .marca__texto small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--texto-suave);
  }

  /* Botones */
  .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    background: var(--primario);
    border: 1px solid transparent;
    border-radius: var(--radio);
    cursor: pointer;
    transition:
      background-color 0.15s,
      border-color 0.15s;
  }
  .boton:hover {
    background: var(--primario-hover);
    text-decoration: none;
  }
  .boton:disabled {
    opacity: 0.6;
    cursor: progress;
  }
  .boton--grande {
    height: 44px;
    font-size: 15px;
  }
  .boton--bloque {
    width: 100%;
  }
  .boton--contorno {
    color: var(--texto);
    background: var(--tarjeta);
    border-color: var(--borde);
  }
  .boton--contorno:hover {
    background: var(--fondo);
  }
  .boton--fantasma {
    color: var(--texto-suave);
    background: transparent;
  }
  .boton--fantasma:hover {
    color: var(--texto);
    background: var(--primario-suave);
  }
  .boton--icono {
    width: 36px;
    height: 36px;
    padding: 0;
  }
  .boton--peligro {
    color: var(--peligro);
    background: var(--tarjeta);
    border-color: #f3c7c8;
  }
  .boton--peligro:hover {
    background: var(--peligro-suave);
  }

  /* Campos */
  .campo {
    display: grid;
    gap: 6px;
  }
  .campo__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .campo__fila a {
    font-size: 13px;
  }
  .campo__etiqueta {
    font-weight: 500;
    font-size: 14px;
  }
  .campo__opcional {
    font-weight: 400;
    color: var(--texto-suave);
  }
  .campo__ayuda {
    font-size: 13px;
    color: var(--texto-suave);
  }
  .campo__ayuda--ok {
    color: var(--ok);
  }
  .campo__caja {
    position: relative;
  }
  .campo__input,
  .campo__area {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font: inherit;
    color: var(--texto);
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition:
      border-color 0.15s,
      box-shadow 0.15s;
  }
  .campo__area {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
  }
  .campo__input:focus,
  .campo__area:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px rgba(14, 128, 196, 0.18);
  }
  .campo__input[aria-invalid='true'] {
    border-color: var(--peligro);
  }
  .campo__input--con-boton {
    padding-right: 84px;
  }
  .campo__mostrar {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    padding: 0 12px;
    font-weight: 500;
    font-size: 13px;
    color: var(--primario);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .campo__mostrar:hover {
    background: var(--primario-suave);
  }
  .buscar {
    position: relative;
    flex: 1;
    min-width: 200px;
  }
  .buscar .icono {
    position: absolute;
    top: 50%;
    left: 11px;
    color: var(--texto-suave);
    transform: translateY(-50%);
  }
  .buscar .campo__input {
    height: 38px;
    padding-left: 34px;
  }

  /* Tarjetas */
  .tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-caja);
    box-shadow: var(--sombra);
  }
  .tarjeta__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 16px;
  }
  .tarjeta__titulo {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
  }
  .tarjeta__descripcion {
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--texto-suave);
  }
  .tarjeta__cuerpo {
    padding: 20px;
  }
  .tarjeta__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: #fbfcfe;
    border-top: 1px solid var(--borde-suave);
    border-radius: 0 0 var(--radio-caja) var(--radio-caja);
  }
  .tarjeta__pie small {
    color: var(--texto-suave);
  }

  /* Pastillas de estado: color + punto + texto (nunca solo color) */
  .insignia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  }
  .insignia::before {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
  }
  .insignia--sin-punto::before {
    display: none;
  }
  .insignia--ok {
    color: var(--ok);
    background: var(--ok-suave);
  }
  .insignia--alerta {
    color: var(--alerta);
    background: var(--alerta-suave);
  }
  .insignia--peligro {
    color: var(--peligro);
    background: var(--peligro-suave);
  }
  .insignia--neutro {
    color: var(--texto-suave);
    background: #eef2f6;
  }
  .insignia--azul {
    color: var(--primario);
    background: var(--primario-suave);
  }
  .insignia--nuevo {
    color: var(--magenta-texto);
    background: var(--magenta-suave);
  }

  .avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: var(--noche);
    border-radius: 50%;
  }

  /* Barra de uso (reproducciones) */
  .barra-uso {
    height: 6px;
    overflow: hidden;
    background: #e6edf4;
    border-radius: 3px;
  }
  .barra-uso span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primario), var(--magenta));
    border-radius: inherit;
  }

  /* Pestañas (filtros) */
  .pestanas {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: #eaf0f6;
    border-radius: 9px;
  }
  .pestana {
    height: 32px;
    padding: 0 14px;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--texto-suave);
    background: none;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
  }
  .pestana[aria-pressed='true'] {
    color: var(--primario-texto);
    background: var(--tarjeta);
    box-shadow:
      var(--sombra),
      inset 0 -2px 0 var(--magenta);
  }

  /* Avisos */
  .aviso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--peligro);
    background: var(--peligro-suave);
    border: 1px solid #f3c7c8;
    border-radius: var(--radio);
  }
  .aviso p {
    color: var(--texto);
  }
  .aviso__icono {
    width: 18px;
    height: 18px;
    margin-top: 1px;
  }

  /* Indicador de carga: quieto con reduce-motion (anillo con un tramo azul) */
  .cargando {
    width: 32px;
    height: 32px;
    border: 3px solid var(--borde);
    border-top-color: var(--primario);
    border-radius: 50%;
    animation: girar 0.9s linear infinite;
  }
  @keyframes girar {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cargando {
      animation: none;
    }
  }

  /* Texto solo para lectores de pantalla */
  .visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}