/* ─────────────────────────────────────────────────────────────────────────
   Checador TGI · hoja de estilos
   Paleta y tipografía del sistema de identidad de Titanium Group Investments.
   La escala tipográfica de marca está pensada para documento impreso (9px de
   cuerpo); aquí se adapta a tamaños de pantalla conservando familias, pesos,
   colores y jerarquía.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* Primarios TGI */
  --azul-acero:#3C5889;      /* headers, títulos */
  --azul-corp:#3C74BB;       /* botones, énfasis */
  --azul-medio:#6194D7;      /* secundario, gráficas */
  --azul-hielo:#E4E8F0;      /* superficies */
  --azul-claro:#B4D2EB;
  /* Neutro */
  --gris-tgi:#7C7C7D;        /* texto secundario, líneas */
  /* Acentos cálidos */
  --dorado:#D4AF6E;          /* acento, KPI destacado */
  --nogal:#5C3D2E;           /* badges críticos */
  /* Derivados de interfaz */
  --fondo:#FAFBFC;
  --panel:#FFFFFF;
  --linea:#E4E8F0;
  --linea-fuerte:#CBD5E5;
  --exito:#1F7A4D;
  --alerta:#B3261E;
  --sombra:0 1px 2px rgba(60,88,137,.06), 0 1px 3px rgba(60,88,137,.05);

  --tipo-titulo:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
  --tipo-cuerpo:"Lato",-apple-system,"Segoe UI",Roboto,sans-serif;
  --tipo-label:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--azul-acero);
  font:400 15px/1.6 var(--tipo-cuerpo);
}

/* ── Barra superior ───────────────────────────────────────────────────── */
.barra{
  background:var(--panel);border-bottom:1px solid var(--linea);
  box-shadow:var(--sombra);
}
.barra-int{
  max-width:1240px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.barra .logo{height:42px;width:auto;display:block}
.barra .marca{
  font:700 13px/1 var(--tipo-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-tgi);padding-left:18px;margin-left:2px;
  border-left:1px solid var(--linea-fuerte);
}
.barra nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;align-items:center}
.barra nav a{
  color:var(--azul-acero);text-decoration:none;padding:7px 13px;border-radius:6px;
  font:600 14px/1 var(--tipo-label);
}
.barra nav a:hover{background:var(--azul-hielo)}
.barra nav a.activo{background:var(--azul-acero);color:#fff}
.barra .quien{
  font:400 13px/1.3 var(--tipo-label);color:var(--gris-tgi);
  padding-left:14px;border-left:1px solid var(--linea-fuerte);text-align:right;
}
.barra .quien b{display:block;color:var(--azul-acero);font-weight:600}
.filo{height:3px;background:linear-gradient(90deg,var(--azul-acero) 0%,var(--azul-corp) 45%,var(--dorado) 100%)}

/* ── Estructura ───────────────────────────────────────────────────────── */
main{max-width:1240px;margin:28px auto 60px;padding:0 22px}
h1{font:800 24px/1.25 var(--tipo-titulo);letter-spacing:-.3px;margin:0 0 5px}
h2{font:700 16px/1.3 var(--tipo-titulo);margin:0 0 14px}
.sub{color:var(--gris-tgi);font-size:14px;margin:0 0 22px;max-width:70ch}
.panel{
  background:var(--panel);border:1px solid var(--linea);border-radius:10px;
  padding:20px 22px;margin-bottom:20px;box-shadow:var(--sombra);
}
.panel-angosto{max-width:420px;margin:56px auto}
.fila{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.fila>*{flex:1;min-width:260px}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:middle}
th{
  font:600 11px/1.4 var(--tipo-label);text-transform:uppercase;letter-spacing:.1em;
  color:var(--gris-tgi);border-bottom:1px solid var(--linea-fuerte);white-space:nowrap;
}
tbody tr:hover{background:var(--fondo)}
td.num{font-variant-numeric:tabular-nums}
.vacio{color:var(--gris-tgi);padding:34px 0;text-align:center;font-size:14px}

/* ── Etiquetas de estado ──────────────────────────────────────────────── */
.etq{
  display:inline-block;padding:3px 10px;border-radius:99px;
  font:600 11px/1.5 var(--tipo-label);letter-spacing:.04em;text-transform:uppercase;
}
.etq.entrada{background:#E3F1EA;color:var(--exito)}
.etq.salida{background:#FBF0E2;color:#8A6224}
.etq.indefinido{background:var(--azul-hielo);color:var(--gris-tgi)}
.etq.admin{background:var(--azul-acero);color:#fff}
.etq.rh{background:var(--azul-medio);color:#fff}
.etq.jefe_obra{background:var(--azul-hielo);color:var(--azul-acero)}
.etq.pendiente{background:#FBF0E2;color:#8A6224}
.etq.activo{background:#E3F1EA;color:var(--exito)}
.etq.inactivo{background:#F1F1F1;color:var(--gris-tgi)}
.ok{color:var(--exito);font-weight:700}
.error{color:var(--alerta);font-weight:700}
.duplicado,.rechazado{color:var(--gris-tgi)}

/* ── Formularios ──────────────────────────────────────────────────────── */
label{
  display:block;font:600 11px/1.4 var(--tipo-label);text-transform:uppercase;
  letter-spacing:.09em;color:var(--gris-tgi);margin-bottom:5px;
}
input,select,textarea{
  padding:9px 11px;border:1px solid var(--linea-fuerte);border-radius:6px;
  font:400 15px/1.4 var(--tipo-cuerpo);background:#fff;color:var(--azul-acero);
  width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--azul-corp);box-shadow:0 0 0 3px rgba(60,116,187,.14);
}
.campo{margin-bottom:14px}
.filtros{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.filtros>div{flex:0 1 auto}
.filtros input,.filtros select{width:auto;min-width:150px}
button,.boton{
  padding:9px 18px;border:0;border-radius:6px;background:var(--azul-corp);color:#fff;
  font:700 14px/1.4 var(--tipo-label);cursor:pointer;text-decoration:none;
  display:inline-block;white-space:nowrap;
}
button:hover,.boton:hover{background:var(--azul-acero)}
button.secundario,.boton.secundario{background:var(--azul-hielo);color:var(--azul-acero)}
button.secundario:hover,.boton.secundario:hover{background:var(--azul-claro)}
button.peligro{background:var(--nogal)}
.enlace{color:var(--azul-corp);text-decoration:none;font-weight:600;font-size:14px}
.enlace:hover{text-decoration:underline}

/* ── Avisos ───────────────────────────────────────────────────────────── */
.aviso{
  padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;
  border-left:3px solid;
}
.aviso.bien{background:#E9F5EE;border-color:var(--exito);color:#14603A}
.aviso.mal{background:#FBEAE8;border-color:var(--alerta);color:#8C1D18}
.aviso.info{background:var(--azul-hielo);border-color:var(--azul-corp)}
.aviso.ojo{background:#FBF3E6;border-color:var(--dorado);color:#6B4E1E}

/* ── Indicadores ──────────────────────────────────────────────────────── */
.kpis{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.kpi{
  background:var(--panel);border:1px solid var(--linea);border-radius:10px;
  padding:16px 20px;min-width:160px;flex:1;box-shadow:var(--sombra);
  border-top:3px solid var(--azul-medio);
}
.kpi:first-child{border-top-color:var(--azul-acero)}
.kpi:last-child{border-top-color:var(--dorado)}
.kpi span{
  display:block;font:600 10px/1.4 var(--tipo-label);text-transform:uppercase;
  letter-spacing:.12em;color:var(--gris-tgi);margin-bottom:4px;
}
.kpi strong{font:800 28px/1.1 var(--tipo-titulo);display:block}

/* ── Varios ───────────────────────────────────────────────────────────── */
img.rostro{
  width:46px;height:46px;object-fit:cover;border-radius:6px;
  border:1px solid var(--linea-fuerte);display:block;background:var(--azul-hielo);
}
code{
  background:var(--azul-hielo);padding:2px 6px;border-radius:4px;
  font:13px/1.5 ui-monospace,"Cascadia Code",Consolas,monospace;word-break:break-all;
}
.tenue{color:var(--gris-tgi);font-size:13px}
.pie{
  max-width:1240px;margin:0 auto;padding:20px 22px 34px;
  font:400 12px/1.6 var(--tipo-label);color:var(--gris-tgi);
  border-top:1px solid var(--linea);
}

@media (max-width:640px){
  .barra-int{padding:10px 16px;gap:12px}
  .barra .marca{display:none}
  main{padding:0 16px;margin-top:20px}
  h1{font-size:20px}
  .filtros input,.filtros select{min-width:0;width:100%}
  .filtros>div{flex:1 1 100%}
}