/* Portal Grafteck — capa visual común (28-oct-2026)
   Misma línea gráfica de grafteck-bienestar y del sitio nuevo:
   blanco + gris papel, rojo Grafteck como acento, Archivo en títulos,
   IBM Plex Sans en texto. Se carga al final del <head> de cada pantalla. */
:root{
  --gk-red:#D8213A; --gk-red-dark:#B81A30; --gk-soft:#FCECEE;
  --gk-ink:#2D2D2D; --gk-muted:#656970; --gk-line:#E4E4E2; --gk-paper:#F6F6F3;
  --gk-head:'Archivo','IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --gk-body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
}
body{font-family:var(--gk-body)!important;color:var(--gk-ink);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,.welcome,.sec-name,.stat-n,.kpi-num,.page-title,.titulo,.card-title{font-family:var(--gk-head);letter-spacing:-.01em}

/* Barra superior: blanca, alta, con el logo real */
.topbar{background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--gk-line)!important;min-height:64px;position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.4) blur(6px)}
.brand-logo{height:22px;width:auto;display:inline-block;vertical-align:middle;margin-right:10px}
.brand-sep{font-family:var(--gk-head);font-weight:600;color:var(--gk-ink);padding-left:10px;border-left:1px solid var(--gk-line);vertical-align:middle}
.brand,.brand-name,.tb-nom{font-family:var(--gk-head);font-weight:600;display:flex;align-items:center;gap:0}
.nav-link{border-radius:6px!important;font-weight:500}
.nav-link:hover{border-color:var(--gk-red)!important;color:var(--gk-red)!important;background:#fff!important}

/* Etiqueta pequeña en mayúsculas, como en las referencias */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--gk-red);margin:0 0 12px}

/* Botones y campos */
.btn,.button,button{border-radius:6px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gk-red)!important;box-shadow:0 0 0 3px rgba(216,33,58,.12)}
a:focus-visible,button:focus-visible{outline:3px solid rgba(216,33,58,.45);outline-offset:3px}
input[type=checkbox],input[type=radio]{accent-color:var(--gk-red)}
::selection{background:#F6C9CF}

@media(max-width:600px){.brand-logo{height:18px;margin-right:8px}.brand-sep{padding-left:8px;font-size:13px}.topbar{min-height:56px}}