/**
 * @file
 * Tokens de diseño AbroadLink (derivados de InterfacesMuestra/colors_and_type.css).
 *
 * Cargar antes de portal-base.css y portal-shell-mockup.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  --al-navy: #003050;
  --al-navy-900: #001f36;
  --al-navy-800: #002942;
  --al-navy-700: #003a60;
  --al-navy-600: #1e4a6e;
  --al-navy-500: #4a6b87;
  --al-navy-300: #98add3;
  --al-navy-100: #e4ecf3;
  --al-navy-50: #f3f6fa;

  --al-orange: #e09030;
  --al-orange-700: #b9701a;
  --al-orange-600: #cd7e22;
  --al-orange-300: #f3c483;
  --al-orange-100: #fbecd5;
  --al-orange-50: #fff7eb;

  --al-white: #ffffff;
  --al-off-white: #f6f7f8;
  --al-paper: #fbfcfd;

  /* Grises de controles (bordes e iconos en barra /projects). */
  --al-gray-200: #d4dde6;
  --al-gray-400: #6b8299;

  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Open Sans', system-ui, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --tracking-tight: -0.01em;
  --tracking-caps: 0.08em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  --shadow-md: 0 6px 16px rgba(0, 48, 80, 0.08), 0 2px 4px rgba(0, 48, 80, 0.05);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 28px 56px rgba(0, 48, 80, 0.18);
  --shadow-focus: 0 0 0 3px rgba(224, 144, 48, 0.35);

  --container-xl: 1280px;
  --container-lg: 1140px;
  /*
   * Cabecera unificada: columna max 1280px; 5px a la izquierda (escudo), 20px a la derecha.
   */
  --certlink-masthead-inner-max: var(--container-xl, 1280px);
  --certlink-masthead-pad-x: 0px;
  --certlink-masthead-pad-left: 5px;
  --certlink-masthead-pad-right: 20px;
  /* Login (Powered by / AbroadLink): 5px menos que el pad-right del menú. */
  --certlink-masthead-pad-right-login: 10px;
  /* Sangría tabla /projects: izquierda (FECHA) y derecha (acciones, mitad del ancho izquierdo). */
  --certlink-projects-table-edge-gutter: 10px;
  --certlink-projects-table-edge-gutter-end: 5px;
  /* Ancho del par descarga+subida (cabecera alineada con botones). */
  --certlink-projects-cert-actions-track: 84px;
  /* Portada /user/login — misma columna que cabecera (sin pad horizontal). */
  --certlink-login-stage-max: min(95vw, var(--certlink-masthead-inner-max));
  --certlink-login-stage-pad-x: 0px;
  --certlink-login-hero-h1-size: clamp(38px, 4.6vw, 58px);
  --certlink-login-hero-h1-lh: 1.04;
  --certlink-login-hero-sub-size: 19px;
  --certlink-login-hero-sub-lh: 1.6;
  --certlink-login-hero-trust-size: 14px;
  /* Separación cabecera → contenido (ajuste visual portada login). */
  --certlink-login-content-offset-top: 40px;
  --certlink-login-input-focus-border: var(--al-orange);
  --certlink-login-input-focus-ring: 0 0 0 1px rgba(224, 144, 48, 0.32);
  --certlink-login-footer-rule: 1px solid rgba(255, 255, 255, 0.1);
  --certlink-login-ghost-btn-border: 1px solid rgba(255, 255, 255, 0.55);
  --certlink-login-card-max: 450px;
  --certlink-login-card-pad-y: 32px;
  --certlink-login-card-pad-x: 36px;
  --certlink-login-input-height: 48px;
  /* Botones Log in / Request access (maqueta CertLink.html): compactos, iguales entre sí. */
  --certlink-login-btn-height: 40px;
  --certlink-login-btn-font-size: 14px;
  --certlink-login-btn-gap: 10px;
  --certlink-login-btn-padding: 8px 12px;

  /* Puente con variables históricas del portal. */
  --certlink-portal-font-family: var(--font-sans);
  /*
   * Anchos del cromado portal (viewport).
   * Listados y cabecera alineados al 95% del campo visual.
   */
  --certlink-portal-content-max-vw: 95vw;
  --certlink-portal-masthead-max-vw: 95vw;
  --certlink-portal-chrome-min-vw: var(--certlink-portal-content-max-vw);
  --certlink-portal-chrome-max-px: 9999px;
  --certlink-portal-chrome-gutter: 8px;
  --certlink-portal-chrome-max: min(var(--certlink-portal-content-max-vw), calc(100vw - var(--certlink-portal-chrome-gutter)));
  /* Alias de columna útil (contenido y pie). La cabecera usa --certlink-portal-masthead-max-vw. */
  --certlink-portal-chrome-column: var(--certlink-portal-chrome-max);
  /* Sangría horizontal del contenido (no sobrescribe el pad-right 10px de la cabecera). */
  --certlink-portal-shell-pad-x: 20px;
  --abroadlink-blue: #013753;
  --abroadlink-blue-2: var(--al-navy-700);
  --abroadlink-blue-3: #0a6fae;
  --certlink-accent: var(--al-orange);
  --certlink-masthead-bg: #013753;
  /* Reserva previa a JS (~55% menos que el exceso anterior de 88px). */
  --certlink-masthead-offset-fallback: 57px;
  /* Aviso flash: siempre bajo la cabecera (JS ajusta; fallback si no hay masthead). */
  --certlink-portal-flash-gap: 12px;
  --certlink-portal-flash-top-fallback: 96px;
  --certlink-projects-table-bg: #0b334a;
  --certlink-projects-table-head-bg: #051f2e;
  /* Fila normal (más oscuro) / fila hover o seleccionada (un tono más claro, maqueta). */
  --certlink-projects-table-row-bg: #0b334a;
  --certlink-projects-table-row-hover: #103a57;
  --certlink-projects-name-link: #e8b964;
}

/* Pantallas amplias: masthead con logo 48px y paddings mayores. */
@media (min-width: 1401px) {
  html.certlink-portal-route {
    --certlink-masthead-offset-fallback: 67px;
  }
}