/* Estilo tomado del sistema Siscon Contable (mismos colores, tipografía, menú y tema Cristal).
   Abajo, al final, van los agregados propios de RRHH. */
:root{
  --tinta:#1a2332; --tinta-suave:#5a6678; --linea:#e2e8f0; --fondo:#f4f6f9;
  --panel:#ffffff; --acento:#2b5c8a; --acento-osc:#1e4265; --acento-suave:#eaf1f7;
  --verde:#1f7a4d; --verde-bg:#e6f4ec; --ambar:#b7791f; --ambar-bg:#fbf3e0;
  --rojo:#9b2c2c; --rojo-bg:#fbeaea;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--fondo); color:var(--tinta); font-size:14px; height:100vh; display:flex; flex-direction:column; overflow:hidden;}

header{background:var(--acento-osc); color:#fff; display:flex; align-items:center; gap:18px; padding:0 20px; height:54px; flex-shrink:0;}
header .logo{font-weight:800; font-size:16px; letter-spacing:.3px; white-space:nowrap;}
header .logo span{color:#9fc3e0; font-weight:500;}
header .sel{display:flex; align-items:center; gap:7px; font-size:12.5px; color:#c9d9e8;}
header select{background:#2b537f; color:#fff; border:1px solid #3d6d9e; border-radius:7px; padding:6px 10px; font-size:13px; outline:none; max-width:240px;}
header .der{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:12px; color:#c9d9e8;}
header .der .on{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;margin-right:5px;}
header .der button{background:none;border:1px solid #3d6d9e;color:#c9d9e8;border-radius:7px;padding:5px 10px;font-size:11.5px;cursor:pointer;}

.cuerpo{display:flex; flex:1; min-height:0;}
nav{width:212px; background:var(--panel); border-right:1px solid var(--linea); padding:14px 10px; flex-shrink:0; display:flex; flex-direction:column; gap:4px;}
nav button{display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none; padding:10px 12px; border-radius:9px; font-size:13.5px; color:var(--tinta-suave); cursor:pointer; font-weight:500;}
nav button:hover{background:var(--fondo);}
nav button.act{background:var(--acento-suave); color:var(--acento); font-weight:700;}
nav button:disabled{opacity:.45; cursor:default;}
nav .prox{font-size:10px; background:#eef0f3; color:var(--tinta-suave); border-radius:999px; padding:1px 7px; margin-left:auto;}
nav hr{border:none; border-top:1px solid var(--linea); margin:8px 4px;}
nav .mini{font-size:11px; color:var(--tinta-suave); padding:4px 12px; line-height:1.5;}
nav button .ico{width:20px; text-align:center; flex-shrink:0; font-size:15px;}
nav button .txt{display:flex; align-items:center; gap:6px; flex:1; white-space:nowrap; overflow:hidden;}
nav button .txt .prox{margin-left:auto;}
nav button.tog{color:var(--tinta-suave); font-size:12px; padding:6px 12px; margin-bottom:4px;}
nav button.tog .ico{font-size:11px;}
nav{transition:width .18s ease;}
/* ---- menú contraído: solo íconos ---- */
nav.col{width:58px; padding:14px 7px;}
nav.col .txt{display:none;}
nav.col button{justify-content:center; padding:10px 0;}
nav.col button .ico{width:auto;}
nav.col hr{margin:8px 2px;}
main{flex:1; overflow:auto; padding:22px 26px;}

h1{font-size:19px; font-weight:750; margin-bottom:3px;}
.sub{color:var(--tinta-suave); font-size:13px; margin-bottom:18px;}
.tarjeta{background:var(--panel); border:1px solid var(--linea); border-radius:13px; padding:20px; margin-bottom:16px;}
.fila{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.campo{display:flex; flex-direction:column; gap:5px;}
.campo label{font-size:11.5px; font-weight:650; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.4px;}
.campo input, .campo select{border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:13.5px; outline:none; background:#fff; color:var(--tinta);}
.campo input:focus, .campo select:focus{border-color:var(--acento); box-shadow:0 0 0 3px rgba(43,92,138,.12);}
.campo .hint{font-size:11px; color:var(--tinta-suave);}
.campo input.ro{background:#eef1f5; color:var(--tinta-suave); border-color:#d5dce5; cursor:not-allowed; font-weight:650;}
.dlgl{font-size:11px; font-weight:650; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.4px; display:block; margin-bottom:3px;}
.dlgs{width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:13.5px; outline:none; background:#fff;}
.campo input.ro:focus{box-shadow:none; border-color:#d5dce5;}
.w-xs{width:90px;} .w-s{width:130px;} .w-m{width:180px;} .w-l{width:260px;} .w-xl{flex:1; min-width:220px;}
.seg{display:inline-flex; border:1px solid #cbd5e1; border-radius:9px; overflow:hidden;}
.seg button{border:none; background:#fff; padding:8px 16px; font-size:13px; cursor:pointer; color:var(--tinta-suave); font-weight:600;}
.seg button.act{background:var(--acento); color:#fff;}
.btn{border:none; border-radius:9px; padding:10px 18px; font-size:13.5px; font-weight:700; cursor:pointer;}
.btn:disabled{opacity:.5; cursor:default;}
.btn-p{background:var(--acento); color:#fff;} .btn-p:hover{background:var(--acento-osc);}
.btn-s{background:var(--acento-suave); color:var(--acento);}
.btn-g{background:var(--verde); color:#fff;}
.chip{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap;}
.c-verde{color:var(--verde); background:var(--verde-bg);} .c-ambar{color:var(--ambar); background:var(--ambar-bg);} .c-rojo{color:var(--rojo); background:var(--rojo-bg);} .c-gris{color:var(--tinta-suave); background:#eef0f3;}
.aviso{border-radius:10px; padding:11px 15px; font-size:13px; margin-bottom:14px; display:none;}
.aviso.on{display:block;}
.a-ok{background:var(--verde-bg); color:var(--verde);} .a-err{background:var(--rojo-bg); color:var(--rojo);} .a-warn{background:var(--ambar-bg); color:#6b5312;}

table{width:100%; border-collapse:collapse; font-size:12.5px;}
th{background:#f0f3f7; text-align:left; padding:8px 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--tinta-suave); border-bottom:1px solid var(--linea); white-space:nowrap; position:sticky; top:0;}
td{padding:7px 10px; border-bottom:1px solid #eef1f4; white-space:nowrap;}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
tr.tot td{font-weight:800; background:#f7f9fb; border-top:2px solid var(--acento);}
.scroll{overflow:auto; max-height:52vh; border:1px solid var(--linea); border-radius:10px;}
.desc{display:flex; gap:18px; background:var(--acento-suave); border-radius:10px; padding:12px 16px; margin:8px 0 14px; font-size:13px; flex-wrap:wrap;}
.desc b{font-variant-numeric:tabular-nums;}
.vacio{text-align:center; color:var(--tinta-suave); padding:40px 10px; font-size:13.5px;}
.drop{border:2px dashed #b9c6d4; border-radius:12px; padding:34px; text-align:center; color:var(--tinta-suave); cursor:pointer; transition:.15s;}
.drop:hover, .drop.sobre{border-color:var(--acento); background:var(--acento-suave); color:var(--acento);}
.kpis{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.kpi{background:var(--panel); border:1px solid var(--linea); border-radius:9px; padding:7px 12px; min-width:104px;}
.kpi .v{font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.25;}
.kpi .l{font-size:10px; color:var(--tinta-suave); margin-top:1px; line-height:1.25;}

/* Login */
#login{position:fixed; inset:0; background:linear-gradient(160deg,#1e4265,#2b5c8a); display:flex; align-items:center; justify-content:center; z-index:50;}
#login .caja{background:#fff; border-radius:16px; padding:34px 36px; width:360px; box-shadow:0 20px 60px rgba(0,0,0,.35);}
#login h2{font-size:20px; font-weight:800; margin-bottom:2px;}
#login .s{font-size:13px; color:var(--tinta-suave); margin-bottom:20px;}
#login input{width:100%; border:1px solid #cbd5e1; border-radius:9px; padding:11px 12px; font-size:14px; margin-bottom:12px; outline:none;}
#login input:focus{border-color:var(--acento); box-shadow:0 0 0 3px rgba(43,92,138,.15);}
#login .btn{width:100%; padding:12px;}
#login .err{color:var(--rojo); font-size:12.5px; margin-top:10px; display:none;}
#login .pie{font-size:11px; color:var(--tinta-suave); margin-top:16px; text-align:center; line-height:1.5;}
.spin{display:inline-block;width:13px;height:13px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:g .7s linear infinite;vertical-align:-2px;}
@keyframes g{to{transform:rotate(360deg)}}

/* ==================================================================
   TEMA CRISTAL (glassmorphism) — se activa con la clase .cristal en
   el <body>, desde el botón del encabezado. Todo lo de arriba queda
   intacto: si se saca la clase, el sistema vuelve al aspecto clásico.
   Regla de oro: el MARCO va en vidrio; las TABLAS quedan legibles,
   con fondo casi opaco, porque son grillas de números para leer todo
   el día. Al imprimir, el tema se apaga solo (ver @media print).
   ================================================================== */
body.cristal{
  --linea:rgba(255,255,255,.55);
  --panel:rgba(255,255,255,.55);
  --acento-suave:rgba(43,92,138,.12);
  background:#e8eef7;
}
/* Fondo: degradado fijo + dos orbes suaves detrás de todo */
body.cristal::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 700px at 10% -10%, rgba(56,124,192,.42), transparent 63%),
    radial-gradient(820px 600px at 98% 6%,   rgba(31,122,77,.24),  transparent 60%),
    radial-gradient(780px 660px at 68% 106%, rgba(183,121,31,.22), transparent 60%),
    radial-gradient(620px 520px at 40% 48%,  rgba(255,255,255,.55), transparent 70%),
    linear-gradient(160deg,#e7effa 0%,#dbe6f4 46%,#d3e0f1 100%);
}
body.cristal header{
  background:rgba(24,52,84,.72); backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 4px 24px rgba(16,38,66,.18);
  /* El vidrio (backdrop-filter) crea un contexto de apilado propio: sin esto,
     las tarjetas del contenido tapan la lista de contribuyentes. 45 lo deja
     arriba del contenido y abajo del login (50), lightbox (80) y modales (90+). */
  position:relative; z-index:45;
}
body.cristal header select{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28);}
body.cristal header .der button{border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.10);}
body.cristal header .der button:hover{background:rgba(255,255,255,.20);}

body.cristal nav{
  background:rgba(255,255,255,.48); backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-right:1px solid rgba(255,255,255,.6);
  box-shadow:1px 0 24px rgba(31,62,102,.07);
}
body.cristal nav button:hover{background:rgba(255,255,255,.62);}
body.cristal nav button.act{background:rgba(255,255,255,.82); color:var(--acento); box-shadow:0 2px 10px rgba(31,62,102,.10);}
body.cristal nav hr{border-top-color:rgba(255,255,255,.7);}

/* Superficies de vidrio */
body.cristal .tarjeta,
body.cristal .kpi,
body.cristal .scroll,
body.cristal .desc,
body.cristal .drop{
  background:rgba(255,255,255,.55); backdrop-filter:blur(16px) saturate(155%);
  -webkit-backdrop-filter:blur(16px) saturate(155%);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 8px 28px rgba(31,62,102,.09), inset 0 1px 0 rgba(255,255,255,.65);
}
body.cristal .tarjeta{border-radius:16px;}
body.cristal .kpi{border-radius:12px;}
body.cristal .drop{border:2px dashed rgba(43,92,138,.35);}
body.cristal .drop:hover, body.cristal .drop.sobre{border-color:var(--acento); background:rgba(255,255,255,.72);}
body.cristal .desc{background:rgba(255,255,255,.48);}

/* Tablas: acá NO hay transparencia fuerte. Legibilidad primero. */
body.cristal .scroll{padding:0; overflow:auto;}
body.cristal table{background:rgba(255,255,255,.86);}
body.cristal th{
  background:rgba(238,243,249,.97); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(31,62,102,.14);
}
body.cristal td{border-bottom:1px solid rgba(31,62,102,.07);}
body.cristal tbody tr:hover td{background:rgba(255,255,255,.72);}
body.cristal tr.tot td{background:rgba(240,246,252,.95);}

/* Controles */
body.cristal .campo input, body.cristal .campo select, body.cristal .dlgs, body.cristal .seg button{
  background:rgba(255,255,255,.78); border-color:rgba(31,62,102,.20);
}
body.cristal .campo input.ro{background:rgba(232,238,246,.75);}
body.cristal .seg{border-color:rgba(31,62,102,.20); box-shadow:0 4px 14px rgba(31,62,102,.07);}
body.cristal .seg button.act{background:var(--acento); color:#fff;}
body.cristal .btn-p{box-shadow:0 6px 18px rgba(43,92,138,.28);}
body.cristal .btn-g{box-shadow:0 6px 18px rgba(31,122,77,.26);}
body.cristal .btn-s{background:rgba(255,255,255,.72); box-shadow:0 3px 12px rgba(31,62,102,.10);}
body.cristal .chip{backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}

/* Modales y overlays: el fondo se difumina y la caja va en vidrio */
body.cristal #revisor, body.cristal #lightbox,
body.cristal div[id^="dlg"]{
  background:rgba(20,36,58,.42) !important;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
body.cristal #revisor > div,
body.cristal div[id^="dlg"] > div{
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 26px 70px rgba(12,28,50,.35), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
body.cristal #franjaCierre{
  background:rgba(255,247,230,.80) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:rgba(242,214,155,.8) !important;
}
/* Login */
body.cristal #login{background:
    radial-gradient(800px 600px at 20% 0%, rgba(88,150,210,.55), transparent 60%),
    linear-gradient(160deg,#16324f,#2b5c8a 60%,#3d7ab0);}
body.cristal #login .caja{
  background:rgba(255,255,255,.16); backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.35); color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
body.cristal #login .s, body.cristal #login .pie{color:rgba(255,255,255,.82);}
body.cristal #login input{background:rgba(255,255,255,.90); border-color:rgba(255,255,255,.5);}
/* sobre vidrio azul, el botón azul se apaga: acá va en blanco para que se vea */
body.cristal #login .btn-p{background:#fff; color:var(--acento-osc); box-shadow:0 8px 22px rgba(0,0,0,.22);}
body.cristal #login .btn-p:hover{background:#eef5fc;}
body.cristal #login h2{color:#fff;}
body.cristal #login h2 span{color:#bfe0ff !important;}

/* Sin vidrio para quien pide menos movimiento, y nunca al imprimir */
@media (prefers-reduced-transparency: reduce){
  body.cristal .tarjeta, body.cristal .kpi, body.cristal .scroll, body.cristal nav{background:rgba(255,255,255,.92);}
}
@media print{
  body.cristal::before{display:none;}
  body.cristal, body.cristal .tarjeta, body.cristal .kpi, body.cristal .scroll,
  body.cristal table, body.cristal th, body.cristal td, body.cristal nav, body.cristal header{
    background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:none !important;
  }
}

/* ================== Agregados de RRHH ================== */
[hidden]{display:none !important;}
#app{display:flex; flex-direction:column; height:100vh;}
#app[hidden]{display:none !important;}
button, input, select{font-family:inherit;}
.vista > h1 + .sub{margin-bottom:16px;}
.filtros{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.filtros .campo input[type=search]{min-width:260px;}
.conteo{font-size:12.5px; color:var(--tinta-suave); padding-bottom:9px;}
.scroll{max-height:none;}
.scroll.alto{max-height:66vh;}
tbody tr.clic{cursor:pointer;}
tbody tr.clic:hover td{background:var(--acento-suave);}
tfoot td{font-weight:800; background:#f7f9fb; border-top:2px solid var(--acento); position:sticky; bottom:0;}
body.cristal tfoot td{background:#f0f6fc;}
td input{width:120px; text-align:right; border:1px solid #cbd5e1; border-radius:7px; padding:5px 8px; font-size:12.5px;}
td input.dias{width:60px;}
.muted{color:var(--tinta-suave);}
.nota{font-size:12.5px; color:var(--tinta-suave); margin-top:12px; max-width:90ch; line-height:1.5;}
.acciones{display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap;}
.link{background:none; border:none; color:var(--acento); font-weight:650; cursor:pointer; padding:0; font-size:13px; margin-bottom:12px;}
.tarjeta h2{font-size:15px; font-weight:750; margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.tarjeta h3{font-size:11.5px; font-weight:700; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.4px; margin:16px 0 8px;}
.datos{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px 20px;}
.datos div{font-size:13.5px; font-weight:600;}
.datos div span{display:block; font-size:10.5px; font-weight:650; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px;}
.datos div .muted{display:inline; font-size:13.5px; text-transform:none; letter-spacing:0; font-weight:500;}
.linea-tiempo{list-style:none;}
.linea-tiempo li{padding:8px 0 8px 14px; border-left:3px solid var(--linea); margin-left:4px; font-size:13.5px;}
.linea-tiempo li.abierto{border-left-color:var(--verde);}
.linea-tiempo small{color:var(--tinta-suave); display:block; font-size:12px;}
.aviso-flota{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--tinta); color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; z-index:95; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:90vw;}
.avisos{background:var(--ambar-bg); color:#6b5312; border-radius:10px; padding:11px 15px; font-size:13px; margin-bottom:14px;}
.avisos ul{margin:6px 0 0 18px;}
.libro-celda{text-align:center;}
.libro-celda.pend{color:var(--ambar); font-weight:700;}
.libro-celda.conf{color:var(--verde); font-weight:700;}
.libro-celda.falta{color:#b8c2cf;}
.leyenda{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
/* Patronales */
.patronales{display:block;}
.patronales .tarjeta{margin-bottom:0;}
.pat-cab{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:14px;}
.pat-cab h2{margin-bottom:2px;}
.pat-cab .razon{font-size:12.5px; color:var(--tinta-suave);}
.numeros{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px;}
.numero{background:var(--acento-suave); border-radius:10px; padding:10px 12px;}
.numero .l{font-size:10.5px; font-weight:650; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.4px;}
.numero .v{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.3px;}
.numero .h{font-size:11.5px; margin-top:3px;}
.pat-acc{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.pat-acc .btn{padding:8px 14px; font-size:12.5px;}
@media (max-width:760px){
  header{gap:10px; padding:0 12px;}
  header .der span:first-child{display:none;}
  nav{width:58px; padding:14px 7px;} nav#menu .txt{display:none;} nav button{justify-content:center; padding:10px 0;} nav button .ico{width:auto;}
  main{padding:16px;}
  .patronales{grid-template-columns:1fr;}
  .numeros{grid-template-columns:1fr;}
}
.numero{min-width:0;}
.numero .crm-val{font-size:11px; color:#6b5312; margin-top:4px; line-height:1.35; overflow-wrap:anywhere;}
/* MTESS */
td input.texto{width:140px; text-align:left;}
td .mini-sel{border:1px solid #cbd5e1; border-radius:7px; padding:4px 6px; font-size:12px; background:#fff;}
td.proy{color:var(--ambar); font-style:italic;}
.btn-mini{padding:5px 10px; font-size:12px;}
.titulo-sec{font-size:15px; font-weight:750; margin:20px 0 10px;}
.grilla-campos{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px 16px; margin-top:12px;}
.grilla-campos .campo input{width:100%;}
.check{display:flex; align-items:center; gap:6px; font-size:13px; padding-bottom:9px;}
.err-txt{color:var(--rojo); font-size:12.5px; min-height:16px;}
dialog{border:none; border-radius:16px; padding:24px 26px; width:min(720px, 94vw); box-shadow:0 26px 70px rgba(12,28,50,.35); color:var(--tinta);}
dialog::backdrop{background:rgba(20,36,58,.42); backdrop-filter:blur(6px);}
dialog h2{font-size:17px; font-weight:800; margin-bottom:4px;}

/* MOD-04 · horarios y feriados */
.lista-check{max-height:46vh;overflow:auto;border:1px solid var(--linea);border-radius:8px;padding:6px 10px;margin-bottom:10px}
.fila-check{display:flex;gap:8px;align-items:center;padding:4px 0}
dialog{margin:auto}
#hd-dias{flex-wrap:wrap;gap:8px}
#hd-dias .campo{width:68px} #hd-dias .campo input{width:100%}

/* MOD-05 · altas, bajas y salarios */
#dlg-form{width:min(860px, 96vw); max-height:92vh; overflow:auto}
.df-sec{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--tinta-suave); margin:14px 0 8px; border-top:1px solid var(--linea); padding-top:12px}
.df-sec:first-child{border-top:none; padding-top:0; margin-top:0}
#df-campos .filtros{margin-bottom:8px; align-items:flex-start}
#df-campos .campo small{font-size:11px; line-height:1.3}
#df-campos textarea{width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font:inherit; font-size:13.5px}
.df-info{margin:4px 0 8px}
.df-info:empty{display:none}
.btn-peligro{color:var(--rojo) !important}
#empresas .tarjeta{margin-bottom:16px}

/* Patronales como lista desplegable agrupada por empresa */
.pat-barra{display:flex; gap:14px; align-items:center; margin-bottom:14px;}
.emp-grupo{margin-bottom:16px; padding-bottom:8px;}
.emp-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
.emp-cab h2{margin-bottom:2px;} .emp-cab .razon{font-size:12.5px; color:var(--tinta-suave);}
.emp-acc{display:flex; gap:14px; white-space:nowrap;}
.pat-item{border:1px solid var(--linea); border-radius:12px; margin-bottom:8px; background:rgba(255,255,255,.55);}
.pat-item > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:12px 14px; flex-wrap:wrap;}
.pat-item > summary::-webkit-details-marker{display:none;}
.pat-item > summary:hover{background:rgba(43,92,138,.05); border-radius:12px;}
.pat-item .flecha{display:inline-block; transition:transform .15s; color:var(--acento); font-size:13px; width:12px;}
.pat-item[open] .flecha{transform:rotate(90deg);}
.pat-item .pat-nom{font-weight:700; min-width:190px;}
.pat-item .pat-nros{display:flex; gap:16px; font-size:12.5px; color:var(--tinta-suave);}
.pat-item .pat-nros b{color:var(--tinta); font-weight:600;}
.pat-item .pat-chips{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto;}
.pat-item .pat-det{padding:4px 16px 16px; border-top:1px solid var(--linea);}
.pat-item .pat-det .numeros{margin-top:12px;}
@media (max-width:700px){ .pat-item .pat-nom{min-width:0;} .pat-item .pat-chips{margin-left:0;} .emp-cab{flex-direction:column;} }
.link-peligro{color:var(--rojo) !important}
.emp-grupo.archivada{opacity:.7}

/* Orden por columna en Empleados */
#tabla-empleados th[data-orden]{cursor:pointer; user-select:none;}
#tabla-empleados th[data-orden]::after{content:attr(data-flecha); margin-left:5px; opacity:.35; font-size:10px;}
#tabla-empleados th[data-orden].orden-act{color:var(--acento);}
#tabla-empleados th[data-orden].orden-act::after{opacity:1;}
#tabla-empleados th[data-orden]:hover{color:var(--acento);}
/* importador PDF IPS */
.im-nom{display:flex; gap:4px; margin-top:4px}
.im-nom input{width:150px; padding:4px 6px; font-size:12px; border:1px solid var(--linea); border-radius:6px; text-transform:uppercase; background:#fff; color:var(--tinta)}
#tabla-importar input[type=date]{padding:3px 5px; font-size:12px; border:1px solid var(--linea); border-radius:6px}
#tabla-importar td{vertical-align:top}
#tabla-importar td.im-a, #tabla-importar td.im-q{white-space:normal; min-width:260px}
#tabla-importar .chip{margin-top:3px}
#tabla-importar td .im-nom input{width:150px; text-align:left; border-color:#cbd5e1}
#tabla-importar td input[type=checkbox]{width:auto; margin:0}
#tabla-importar td input[type=date]{width:auto; text-align:left}
#tabla-importar label.check{display:inline-flex; padding-bottom:0; font-size:12.5px}
.im-zona{display:flex; flex-direction:column; align-items:center; gap:4px; padding:28px 16px; margin-bottom:16px; border:2px dashed var(--linea); border-radius:14px; background:var(--panel); cursor:pointer; text-align:center; transition:border-color .15s, background .15s; font-size:14px}
.im-zona:hover{border-color:var(--acento)}
.im-zona.sobre{border-color:var(--acento); background:var(--acento-suave)}
.im-zona-ico{font-size:30px}
.im-lista{list-style:none; display:flex; flex-direction:column; gap:6px; font-size:13px}

/* ===== Pasada de usabilidad: menú por frecuencia, Inicio y avisos de estado ===== */
nav{overflow-y:auto;}
nav button{padding:8px 12px;}
nav .grupo{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tinta-suave); padding:12px 12px 3px; opacity:.85;}
nav.col .grupo.txt{display:block; font-size:0; padding:0; margin:7px 4px; border-top:1px solid var(--linea);}
nav .cuenta{margin-left:auto; background:var(--ambar); color:#fff; font-size:10.5px; font-weight:800; border-radius:999px; padding:1px 7px; line-height:1.5;}
nav button.act .cuenta{background:var(--ambar);}
.pasos{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-bottom:16px;}
.paso{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; row-gap:3px; text-align:left; background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:16px; cursor:pointer; font:inherit; color:var(--tinta); transition:transform .12s, box-shadow .12s;}
.paso:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(31,62,102,.12); border-color:var(--acento);}
.paso-n{grid-row:1 / span 2; width:30px; height:30px; border-radius:50%; background:var(--acento); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px;}
.paso-t{font-weight:750; font-size:14.5px;}
.paso-d{font-size:12.5px; color:var(--tinta-suave); line-height:1.4;}
body.cristal .paso{background:rgba(255,255,255,.55); backdrop-filter:blur(16px) saturate(155%); -webkit-backdrop-filter:blur(16px) saturate(155%); border:1px solid rgba(255,255,255,.70); box-shadow:0 8px 28px rgba(31,62,102,.09), inset 0 1px 0 rgba(255,255,255,.65);}
body.cristal .paso:hover{background:rgba(255,255,255,.75); border-color:rgba(43,92,138,.45);}
td.der{text-align:right;}
.estado-ok, .estado-pend{border-radius:10px; padding:11px 15px; font-size:13.5px; margin-bottom:14px; line-height:1.5;}
.estado-ok{background:var(--verde-bg); color:var(--verde);}
.estado-pend{background:var(--ambar-bg); color:#6b5312;}
.estado-ok .btn, .estado-pend .btn{margin-left:6px; vertical-align:middle;}
.ficha-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:4px;}
.ficha-cab h1{margin-bottom:6px;}
.ficha-sit{font-size:13px; color:var(--tinta-suave); display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.tarjeta h3:first-of-type{margin-top:12px;}
@media (min-width:761px){ nav:not(.col){width:226px;} }