/* ══════════════════════════════════════════════
   TEMA VIGIA · tokens compartidos (skill design-system)
   Dirección: estilo Apple → skill ui-ux-pro-max "Minimalism & Swiss Style":
   mucho espacio, contraste alto, sin adornos, letra del sistema.
   Modo claro por defecto y modo oscuro automático si la computadora está en modo oscuro.
   Tres capas: primitivos --p-*, semánticos --v-*, componentes --btn-*, --card-*, --input-*.
   Cada página traduce sus propias variables a los semánticos.
   Para cambiar un color en todo VigIA, se cambia aquí.
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ── CAPA 1 · PRIMITIVOS ── */
  --p-white: #FFFFFF;  --p-black: #000000;
  --p-gray-50: #F5F5F7;  --p-gray-100: #E8E8ED;  --p-gray-200: #D2D2D7;  --p-gray-500: #6E6E73;  --p-gray-900: #1D1D1F;
  --p-dark-1: #1C1C1E;  --p-dark-2: #2C2C2E;  --p-dark-3: #38383A;  --p-dark-gray: #98989D;
  --p-blue: #0071E3;    --p-blue-hover: #0077ED;  --p-blue-text: #0066CC;  --p-blue-dark: #0A84FF;
  --p-green: #248A3D;   --p-green-dark: #30D158;
  --p-orange: #B25000;  --p-orange-dark: #FF9F0A;
  --p-red: #D70015;     --p-red-dark: #FF453A;
  --p-purple: #8944AB;  --p-purple-dark: #BF5AF2;
  --p-yellow: #9A6700;  --p-yellow-dark: #FFD60A;
  --p-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --p-font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --p-radius-sm: 8px;  --p-radius-md: 18px;  --p-radius-pill: 980px;

  /* ── CAPA 2 · SEMÁNTICOS · modo claro ── */
  --v-bg:        var(--p-gray-50);
  --v-panel:     rgba(255,255,255,.72);
  --v-card:      var(--p-white);
  --v-card-2:    var(--p-gray-50);
  --v-solid:     var(--p-white);
  --v-muted-bg:  var(--p-gray-100);
  --v-input:     var(--p-white);
  --v-text:      var(--p-gray-900);     /* 16:1 */
  --v-text-2:    #424245;
  --v-muted:     var(--p-gray-500);     /* 4.8:1 sobre blanco */
  --v-dim:       var(--p-gray-500);
  --v-placeholder: #86868B;
  --v-border:    var(--p-gray-200);
  --v-border-2:  #C7C7CC;
  --v-accent:    var(--p-blue);
  --v-accent-2:  var(--p-blue-text);
  --v-accent-hover: var(--p-blue-hover);
  --v-accent-bg: rgba(0,113,227,.10);
  --v-on-accent: var(--p-white);        /* 4.6:1 sobre azul */
  --v-ok:        var(--p-green);   --v-ok-bg:     rgba(36,138,61,.10);
  --v-info:      var(--p-blue-text); --v-info-bg: rgba(0,113,227,.10);
  --v-warn:      var(--p-orange);  --v-warn-bg:   rgba(255,149,0,.12);
  --v-danger:    var(--p-red);     --v-danger-bg: rgba(255,59,48,.10);
  --v-danger-solid: var(--p-red);
  --v-purple:    var(--p-purple);  --v-purple-bg: rgba(175,82,222,.10);
  --v-gold:      var(--p-yellow);  --v-gold-bg:   rgba(255,204,0,.14);
  --v-font:      var(--p-font-sans);
  --v-mono:      var(--p-font-mono);
  --v-blur:      saturate(180%) blur(20px);
  --v-shadow:    0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --v-edge:      0 0 0 transparent;
  --v-focus:     var(--p-blue);

  /* ── CAPA 3 · COMPONENTES ── */
  --btn-primary-bg:       var(--v-accent);
  --btn-primary-bg-hover: var(--v-accent-hover);
  --btn-primary-text:     var(--v-on-accent);
  --btn-secondary-bg:     var(--v-card);
  --btn-secondary-border: var(--v-border-2);
  --btn-radius:           var(--p-radius-pill);
  --card-bg:              var(--v-card);
  --card-border:          transparent;
  --card-radius:          var(--p-radius-md);
  --input-bg:             var(--v-input);
  --input-border:         var(--v-border-2);
  --input-radius:         12px;
  --input-focus-ring:     rgba(0,113,227,.25);
  --logo-chip-bg:         transparent;
  --nav-bg:               rgba(251,251,253,.8);
  color-scheme: light;
}

/* ── CAPA 2 · SEMÁNTICOS · modo oscuro automático ── */
@media (prefers-color-scheme: dark){
  :root{
    --v-bg:        var(--p-black);
    --v-panel:     rgba(28,28,30,.72);
    --v-card:      var(--p-dark-1);
    --v-card-2:    var(--p-dark-2);
    --v-solid:     var(--p-dark-1);
    --v-muted-bg:  var(--p-dark-2);
    --v-input:     var(--p-dark-2);
    --v-text:      var(--p-gray-50);
    --v-text-2:    #D1D1D6;
    --v-muted:     var(--p-dark-gray);
    --v-dim:       var(--p-dark-gray);
    --v-placeholder: #8E8E93;
    --v-border:    var(--p-dark-3);
    --v-border-2:  #48484A;
    --v-accent:    var(--p-blue-dark);
    --v-accent-2:  #409CFF;
    --v-accent-hover: #409CFF;
    --v-accent-bg: rgba(10,132,255,.18);
    --v-on-accent: var(--p-white);
    --v-ok:        var(--p-green-dark);  --v-ok-bg:     rgba(48,209,88,.16);
    --v-info:      #409CFF;              --v-info-bg:   rgba(10,132,255,.18);
    --v-warn:      var(--p-orange-dark); --v-warn-bg:   rgba(255,159,10,.16);
    --v-danger:    var(--p-red-dark);    --v-danger-bg: rgba(255,69,58,.16);
    --v-danger-solid: var(--p-red-dark);
    --v-purple:    var(--p-purple-dark); --v-purple-bg: rgba(191,90,242,.16);
    --v-gold:      var(--p-yellow-dark); --v-gold-bg:   rgba(255,214,10,.14);
    --v-shadow:    0 0 0 1px rgba(255,255,255,.04);
    --input-focus-ring: rgba(10,132,255,.35);
    --logo-chip-bg: rgba(255,255,255,.94);
    --nav-bg:      rgba(22,22,23,.8);
    color-scheme: dark;
  }
}

/* base común */
html{ background: var(--v-bg); }
body{
  background: var(--v-bg) !important;
  color: var(--v-text);
  font-family: var(--v-font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}
input, select, textarea{ background: var(--input-bg) !important; color: var(--v-text) !important; border-color: var(--input-border) !important; border-radius: var(--input-radius) !important; }
input::placeholder, textarea::placeholder{ color: var(--v-placeholder) !important; }
input:focus, select:focus, textarea:focus{ border-color: var(--v-accent) !important; box-shadow: 0 0 0 4px var(--input-focus-ring) !important; }
button, [onclick], label[for]{ cursor: pointer; }
:focus-visible{ outline: 2px solid var(--v-focus) !important; outline-offset: 2px; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent !important; }
::-webkit-scrollbar-thumb{ background: var(--v-border-2) !important; border-radius: 10px; border: 2px solid var(--v-bg); }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* clases reutilizables */
.v-glass{ background: var(--v-panel) !important; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
.v-logo-chip{ background: var(--logo-chip-bg); border-radius: 8px; padding: 3px 7px; }

/* logo de Grupo Integra: el archivo trae fondo blanco, así que va sobre una placa
   blanca con las orillas difuminadas (no se ve como recorte pegado) */
header .h-brand > img, .logo-bar img, .header-left > img, .login-logo .ep-wrap img{
  background: #fff !important;
  padding: 4px 12px !important;
  border-radius: 14px !important;
  box-shadow: 0 0 10px 5px #fff !important;
  box-sizing: content-box;
}
.login-logo .ep-wrap img{
  padding: 16px 24px !important;
  border-radius: 22px !important;
  box-shadow: 0 0 26px 16px #fff !important;
}

/* impresión: siempre en blanco */
@media print{
  html, body{ background: #fff !important; color: #000 !important; }
}