/* ============================================================================
   GESTIÓN HUMANA · GRUPO PAPELERA FK & RR
   Design System construido sobre el Manual de Identidad de Marca v3.2
   Dirección creativa: Editorial Industrial Premium (Parte 8, Línea A + B)

   Reglas rectoras del manual aplicadas aquí:
   · Paleta 2.3 — azules 60% · neutros 25% · cian solo CTA/destacado 10%.
   · Tipografía 2.4 — Axiforma (titulares y wordmark) + Arial Nova (cuerpo,
     datos, tablas). Cadena: Axiforma → Arial Nova → Arial → sans-serif.
     Los cuerpos largos NUNCA van en Axiforma.
   · Principios 2.5 / 8.6 — estructura sobre decoración, respiración,
     modularidad, cero gradientes, cero sombras dramáticas, esquinas rectas
     o de radio mínimo (jamás 20+ px).
   · Los colores de ESTADO (éxito/alerta/error) son señalización funcional
     de interfaz —como los chalecos reflectivos del manual—: no son colores
     de marca y no se usan fuera de mensajes de estado.
   ========================================================================== */

@font-face {
  font-family: "Axiforma";
  src: url("/estaticos/fuentes/Axiforma-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* --- Paleta oficial (manual 2.3) --- */
  --azul-profundo:#001B8F;   /* institucional: logo, titulares, estructura */
  --azul-grupo:#164A9D;      /* variante operativa: headers secundarios     */
  --cian:#00A3E0;            /* SOLO CTAs, dato crítico, destacado puntual  */
  --blanco:#FFFFFF;          /* base principal                              */
  --crema:#F5F1E8;           /* fondo secundario — evoca el papel           */
  --carbon:#1A1A1A;          /* cuerpo de texto largo                       */

  /* Derivados funcionales (mezclas de la propia paleta con blanco) */
  --azul-tinte:#E8EBF6;      /* azul profundo al 8% — fondos activos        */
  --cian-tinte:#E5F5FC;      /* cian al 10% — destacados suaves             */
  --crema-borde:#E4DECF;     /* borde sobre crema                           */
  --gris-medio:#5C594F;      /* texto secundario cálido                     */
  --gris-suave:#8B8779;      /* metadatos, captions                         */

  /* Señalización de estado (funcional, no marca) */
  --exito:#1F6B3E; --exito-bg:#EAF2EC;
  --alerta:#8A5800; --alerta-bg:#F7EFDE;
  --error:#A32C21; --error-bg:#F8E9E7;

  /* --- Tipografía (manual 2.4 / 8.4) --- */
  --f-marca:"Axiforma","Arial Nova",Arial,sans-serif;   /* titulares, wordmark, navegación */
  --f-texto:"Arial Nova",Arial,sans-serif;              /* cuerpo, tablas, formularios     */

  /* --- Estructura --- */
  --r-min:2px;  --r:4px;  --r-modulo:6px;   /* esquinas rectas o radio mínimo */
  --borde:1px solid var(--crema-borde);
  --w-menu:250px; --h-cabecera:62px;
  /* Escala de espaciado múltiplo de 8 (iconografía 3.1) */
  --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:32px; --e6:48px;
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0; font-family:var(--f-texto); font-size:14.5px; line-height:1.55;
  color:var(--carbon); background:var(--crema); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--f-marca); color:var(--azul-profundo);
  margin:0 0 var(--e3); line-height:1.22; letter-spacing:-.015em; font-weight:400;
}
h1{font-size:27px}
h2{font-size:20px; letter-spacing:-.01em}
h3{font-size:15.5px; letter-spacing:0}
a{color:var(--azul-grupo); text-decoration:none}
a:hover{color:var(--azul-profundo); text-decoration:underline}
p{margin:0 0 12px}
label{
  display:block; font-family:var(--f-texto); font-size:11.5px; font-weight:700;
  color:var(--gris-medio); text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:6px;
}
.meta{font-size:12.5px; color:var(--gris-suave)}
.ayuda{font-size:13px; color:var(--gris-medio); margin-top:6px; max-width:65ch}
code{font-size:12.5px; background:var(--azul-tinte); padding:1px 6px; border-radius:var(--r-min)}

/* ---------------------------------------------------------------- layout */
.app{display:grid; grid-template-columns:var(--w-menu) 1fr; min-height:100vh}

.menu{
  background:var(--blanco); border-right:var(--borde);
  padding:var(--e4) var(--e3) var(--e5); position:sticky; top:0; height:100vh;
  overflow-y:auto;
}
/* Bloque de marca: logo oficial + divisor vertical del sistema (2.1) */
.marca{padding:0 var(--e1) var(--e4); border-bottom:2px solid var(--azul-profundo);
  margin-bottom:var(--e4)}
.marca img{display:block; width:150px; max-width:100%; height:auto; margin-bottom:10px}
.marca .producto{
  font-family:var(--f-marca); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul-grupo);
  display:flex; align-items:center; gap:10px;
}
.marca .producto::before{content:""; width:1px; height:14px; background:var(--azul-grupo)}

.menu nav a{
  display:flex; align-items:center; gap:10px; padding:8px 12px; margin:1px 0;
  border-radius:var(--r); color:var(--carbon); font-family:var(--f-marca);
  font-size:13.5px; letter-spacing:.01em; border-left:2px solid transparent;
}
.menu nav a:hover{background:var(--crema); text-decoration:none; color:var(--azul-profundo)}
.menu nav a.activo{background:var(--azul-tinte); color:var(--azul-profundo);
  border-left-color:var(--cian)}
.menu .seccion{
  font-family:var(--f-texto); font-size:10.5px; font-weight:700; color:var(--gris-suave);
  text-transform:uppercase; letter-spacing:.12em; padding:var(--e3) 12px 6px;
}
.menu .badge{margin-left:auto}

.cabecera{
  height:var(--h-cabecera); display:flex; align-items:center; gap:var(--e3);
  padding:0 var(--e4); background:var(--blanco); border-bottom:var(--borde);
  position:sticky; top:0; z-index:20;
}
.cabecera .titulo-pagina{
  font-family:var(--f-marca); color:var(--azul-profundo); font-size:14px;
  letter-spacing:.01em; display:flex; align-items:center; gap:12px;
}
.cabecera .titulo-pagina::before{content:""; width:1px; height:16px;
  background:var(--crema-borde)}
.cabecera .derecha{margin-left:auto; display:flex; align-items:center; gap:var(--e3)}
.cabecera .derecha a{color:var(--gris-medio); font-size:12.5px}
.cabecera .derecha a:hover{color:var(--azul-profundo)}

.lienzo{padding:var(--e5) var(--e5) 72px; max-width:1220px}
.pie{padding:var(--e3) var(--e5); color:var(--gris-suave); font-size:11.5px;
  border-top:var(--borde); margin-top:var(--e6); max-width:1220px}

/* ---------------------------------------------------------------- módulos */
/* Tarjeta = módulo del sistema (principio 8.6.3): borde estructural, sin sombra */
.tarjeta{background:var(--blanco); border:var(--borde);
  border-radius:var(--r-modulo); padding:var(--e4)}
.tarjeta + .tarjeta{margin-top:var(--e3)}
.grid{display:grid; gap:var(--e3)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.fila{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.sep{border:0; border-top:var(--borde); margin:var(--e3) 0}

/* Indicador (stat): dato en Arial Nova Bold (8.4 «datos numéricos destacados») */
.stat{background:var(--blanco); border:var(--borde); border-radius:var(--r-modulo);
  padding:var(--e3) var(--e3) 14px; position:relative; overflow:hidden}
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--azul-profundo)}
.stat .numero{font-family:var(--f-texto); font-weight:700; font-size:30px;
  color:var(--azul-profundo); line-height:1.05; font-variant-numeric:tabular-nums}
.stat .concepto{font-size:11px; font-weight:700; color:var(--gris-medio);
  text-transform:uppercase; letter-spacing:.08em; margin-top:6px}

/* ---------------------------------------------------------------- botones */
/* Acción principal: azul profundo sobre blanco (combinación principal 8.5).
   El cian queda para focos, indicadores activos y destacado puntual. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 18px; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--f-marca); font-size:13.5px; letter-spacing:.02em; cursor:pointer;
  background:var(--azul-profundo); color:var(--blanco);
  transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:var(--azul-grupo); text-decoration:none; color:var(--blanco)}
.btn-sec{background:var(--blanco); color:var(--azul-profundo);
  border-color:var(--azul-profundo)}
.btn-sec:hover{background:var(--azul-tinte); color:var(--azul-profundo)}
.btn-suave{background:var(--blanco); color:var(--carbon); border-color:var(--crema-borde)}
.btn-suave:hover{background:var(--crema); color:var(--carbon)}
.btn-peligro{background:var(--error)}
.btn-peligro:hover{background:#7E1F16}
.btn-sm{height:30px; padding:0 12px; font-size:12.5px}
.btn[disabled],.btn.bloqueado{background:var(--crema-borde); color:var(--gris-medio);
  cursor:not-allowed}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--cian); outline-offset:1px}

/* ---------------------------------------------------------------- formularios */
input,select,textarea{
  width:100%; height:38px; padding:0 12px; font:400 14px/1.4 var(--f-texto);
  color:var(--carbon); background:var(--blanco);
  border:1px solid var(--crema-borde); border-radius:var(--r); outline:none;
}
textarea{height:auto; min-height:84px; padding:10px 12px}
input:focus,select:focus,textarea:focus{border-color:var(--azul-grupo);
  box-shadow:0 0 0 3px rgba(0,163,224,.18)}   /* foco en cian: señal, no adorno */
input[disabled],select[disabled]{background:var(--crema); color:var(--gris-medio)}
input[type=checkbox]{width:auto; height:auto; accent-color:var(--azul-profundo)}
input[type=file]{padding:6px 10px; height:auto; background:var(--crema)}
.campo{margin-bottom:var(--e3)}
form.inline{display:inline}

/* ---------------------------------------------------------------- tablas */
/* Línea B «Técnica Inteligente»: encabezados claros, datos legibles, sin adornos */
.tabla-scroll{overflow-x:auto}
table.tabla{width:100%; border-collapse:collapse; font-size:13.5px;
  background:var(--blanco); font-family:var(--f-texto)}
.tabla thead th{
  color:var(--azul-profundo); font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; text-align:left;
  padding:10px 14px; border-bottom:2px solid var(--azul-profundo); white-space:nowrap;
}
.tabla tbody td{padding:11px 14px; border-bottom:var(--borde); vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--crema)}
.tabla .num{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
.tabla td.num{color:var(--carbon)}

/* ---------------------------------------------------------------- señales */
.chip{display:inline-flex; align-items:center; gap:6px; height:21px; padding:0 8px;
  border-radius:var(--r-min); font-family:var(--f-texto); font-size:11.5px;
  font-weight:700; letter-spacing:.02em; white-space:nowrap;
  background:var(--crema); color:var(--gris-medio); border:1px solid var(--crema-borde)}
.chip-exito{background:var(--exito-bg); color:var(--exito); border-color:transparent}
.chip-alerta{background:var(--alerta-bg); color:var(--alerta); border-color:transparent}
.chip-error{background:var(--error-bg); color:var(--error); border-color:transparent}
.chip-info{background:var(--cian-tinte); color:#00618B; border-color:transparent}
.chip-azul{background:var(--azul-tinte); color:var(--azul-profundo); border-color:transparent}

/* Contadores: cian = dato crítico que pide acción (8.5) */
.badge{min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--cian); color:var(--blanco); font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums}
.badge.rojo{background:var(--error)}

.toast{padding:11px var(--e4); font-family:var(--f-marca); font-size:13.5px;
  color:var(--blanco); display:flex; align-items:center; gap:10px}
.toast-exito{background:var(--azul-profundo)}
.toast-error{background:var(--error)}

.aviso{padding:12px 14px; border-radius:var(--r); font-size:13.5px;
  margin-bottom:var(--e3); border-left:3px solid; background:var(--blanco)}
.aviso-info{border-color:var(--cian); background:var(--cian-tinte); color:#00516F}
.aviso-alerta{border-color:var(--alerta); background:var(--alerta-bg); color:var(--alerta)}
.aviso-error{border-color:var(--error); background:var(--error-bg); color:var(--error)}
.aviso-exito{border-color:var(--exito); background:var(--exito-bg); color:var(--exito)}

.vacio{padding:var(--e5); text-align:center; color:var(--gris-suave); font-size:13.5px}

/* ---------------------------------------------------------------- pestañas */
.pestanas{display:flex; gap:var(--e1); border-bottom:var(--borde);
  margin-bottom:var(--e4); overflow-x:auto}
.pestanas a{
  padding:9px 14px; color:var(--gris-medio); font-family:var(--f-marca);
  font-size:13.5px; border-bottom:2px solid transparent; margin-bottom:-1px;
  white-space:nowrap;
}
.pestanas a.activa{color:var(--azul-profundo); border-bottom-color:var(--cian)}
.pestanas a:hover{text-decoration:none; color:var(--azul-profundo)}

/* ---------------------------------------------------------------- ficha */
/* Cabecera de expediente: fondo de marca (blanco sobre azul profundo, 8.5) */
.ficha-cabecera{background:var(--azul-profundo); border-radius:var(--r-modulo);
  color:var(--blanco); padding:var(--e4) var(--e4); display:flex; gap:var(--e3);
  align-items:center; margin-bottom:var(--e4)}
.ficha-avatar{width:64px; height:64px; border-radius:var(--r);
  background:var(--blanco); color:var(--azul-profundo); display:grid;
  place-items:center; font-family:var(--f-marca); font-size:22px; flex:none;
  letter-spacing:.02em}
.ficha-cabecera h1{color:var(--blanco); margin:0; font-size:21px}
.ficha-cabecera .meta{color:#AEB9E4; font-size:12.5px}
.ficha-cabecera .chip{background:rgba(255,255,255,.12); color:var(--blanco);
  border-color:transparent}

.vitales{font-size:13.5px}
.vitales dt{font-size:10.5px; font-weight:700; color:var(--gris-suave);
  text-transform:uppercase; letter-spacing:.09em; margin-top:12px}
.vitales dd{margin:2px 0 0}

.progreso{height:6px; background:var(--crema-borde); border-radius:3px; overflow:hidden}
.progreso > div{height:100%; background:var(--cian)}

/* ---------------------------------------------------------------- iconos */
/* Iconografía 3.1: trazo 2 px, esquinas rectas, monocromo azul */
.icono{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:square; stroke-linejoin:miter; vertical-align:-3px}

/* ---------------------------------------------------------------- login */
.login-fondo{min-height:100vh; display:grid; place-items:center;
  background:var(--azul-profundo)}
.login-caja{width:min(410px, 92vw); background:var(--blanco);
  border-radius:var(--r-modulo); padding:var(--e5) var(--e5) var(--e4)}
.login-caja .logo-login{display:block; width:190px; margin:0 auto var(--e3)}
.login-caja .producto-login{
  font-family:var(--f-marca); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--azul-grupo); text-align:center;
  padding-bottom:var(--e3); margin-bottom:var(--e4);
  border-bottom:2px solid var(--azul-profundo);
}

/* ---------------------------------------------------------------- responsive */
.hamburguesa{display:none}
@media (max-width:920px){
  .app{grid-template-columns:1fr}
  .menu{position:fixed; left:-270px; width:260px; z-index:50; transition:left .18s}
  .menu.abierto{left:0; box-shadow:0 0 0 100vmax rgba(26,26,26,.35)}
  .hamburguesa{display:inline-flex; background:var(--blanco);
    border:1px solid var(--crema-borde); border-radius:var(--r); width:38px;
    height:38px; align-items:center; justify-content:center; cursor:pointer;
    color:var(--azul-profundo)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .lienzo{padding:var(--e3) var(--e3) 60px}
  .cabecera{padding:0 var(--e3)}
}
@media (min-width:921px) and (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}

@media print{.menu,.cabecera,.btn,.pie,.hamburguesa{display:none !important}
  .app{grid-template-columns:1fr}}