/* ============================================================
   CENTINELA — Interfaz operativa (basada en VJS Workforce)
   Barra oscura con degradado · acento dorado #f4c400 · datos reales
   ============================================================ */
:root{
  --yellow:#f4c400; --yellow-2:#e0b400; --yellow-ink:#111820;
  --dark:#111820; --dark-2:#18222d; --side-ink:#d9e0e6; --side-muted:#7e8a96;
  --bg:#f4f6f8; --surface:#ffffff; --line:#e5e9ed; --line-2:#eef1f3;
  --ink:#17212b; --muted:#74808c;
  --green:#15905a; --green-bg:#e3f5ec; --green-ink:#17754b;
  --red:#d33d3d; --red-bg:#fde7e7; --red-ink:#a42c2c;
  --amber:#a87b00; --amber-bg:#fff2c7; --amber-ink:#8d6900;
  --blue:#3277c7; --blue-bg:#e7f0fb; --blue-ink:#2865a9;
  --nav-w:255px; --bar-h:70px;
  --font:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --shadow:0 3px 12px rgba(17,24,32,.05); --shadow-lg:0 12px 32px rgba(17,24,32,.14);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:#20558c;text-decoration:none}a:hover{color:var(--yellow-2)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
h1,h2,h3{letter-spacing:-.2px}

/* ---------- Barra lateral ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--nav-w);
  background:linear-gradient(180deg,#10171e,#17222c);color:var(--side-ink);
  padding:20px 14px 30px;overflow-y:auto;z-index:50}
.side .brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  background:#fff;margin:-20px -14px 16px;padding:12px 14px;
  position:sticky;top:-20px;z-index:6;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.side .brand-logo{height:44px;width:auto;display:block;flex:none}
.side .brand-text b{font-size:17px;color:#14213d;line-height:1.05;letter-spacing:.5px}
.side .brand-text small{display:block;color:#6b7280;font-size:10px;margin-top:1px}
.side .grp{font-size:10px;color:var(--side-muted);text-transform:uppercase;letter-spacing:1px;margin:16px 10px 6px}
.side a.item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:8px;
  color:var(--side-ink);font-size:13px;margin:3px 0;font-weight:500}
.side a.item svg{color:#9aa6b8;flex:none}
.side a.item:hover{background:var(--dark-2);color:#fff}.side a.item:hover svg{color:#fff}
.side a.item.active{background:var(--yellow);color:#111;font-weight:700}
.side a.item.active svg{color:#111}
.side a.item .badge{margin-left:auto}

/* ---------- Topbar ---------- */
.wrap{margin-left:var(--nav-w);min-height:100vh}
.appbar{height:var(--bar-h);background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 30px;position:sticky;top:0;z-index:40}
.appbar .search{flex:1;max-width:360px;position:relative}
.appbar .search input{width:100%;height:40px;border:1px solid #e6eaee;border-radius:9px;
  padding:0 12px 0 36px;background:#f3f5f7;font-size:13px;font-family:var(--font)}
.appbar .search input:focus{outline:2px solid rgba(244,196,0,.3);border-color:var(--yellow);background:#fff}
.appbar .search svg{position:absolute;left:11px;top:11px;color:var(--muted)}
.appbar .spacer{flex:1}
.appbar .env{font-weight:700;font-size:11px;padding:5px 11px;border-radius:999px;color:#fff}
.appbar .date{color:var(--muted);font-size:12.5px}
.appbar .profile{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:650}
.appbar .avatar{width:34px;height:34px;border-radius:50%;background:#202b35;color:#fff;
  display:grid;place-items:center;font-weight:700}
.appbar .ico{color:var(--muted);display:flex;padding:6px;border-radius:8px}
.appbar .ico:hover{background:#f1f3f6;color:var(--dark)}
.burger{display:none}

/* ---------- Contenido ---------- */
.content{padding:26px 30px;max-width:1580px}
.title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.title h1,.page-title{font-size:25px;margin:0;font-weight:800;color:var(--ink)}
.title p,.page-title small{margin:5px 0 0;color:var(--muted);font-size:13px;font-weight:500;display:block}
.page-title{margin-bottom:18px}
.hd-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}

/* ---------- Tarjetas de resumen ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:transform .12s,box-shadow .12s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat .l{font-size:11px;color:var(--muted);font-weight:600}
.stat .n{font-size:25px;font-weight:800;margin:6px 0 2px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .s{font-size:12px;color:var(--muted)}
.stat .s.up{color:var(--green)} .stat.warn .n{color:var(--amber)} .stat.dan .n{color:var(--red)} .stat.ok .n{color:var(--green)}
.stat .t{float:right;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#f2f4f7;color:var(--dark)}
.stat.dan .t{background:var(--red-bg);color:var(--red-ink)}.stat.warn .t{background:var(--amber-bg);color:var(--amber-ink)}.stat.ok .t{background:var(--green-bg);color:var(--green-ink)}

/* ---------- Paneles ---------- */
.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:1000px){.grid2,.grid3{grid-template-columns:1fr}}
.card,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.card>.hd,.panel>.hd{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}
.card>.hd .o,.panel>.hd .o{color:var(--yellow-2);display:flex}
.card>.bd,.panel>.bd{padding:16px 18px}
.panel.pad{padding:18px}
.mini .k{color:var(--muted);font-size:12px}.mini .big{font-size:26px;font-weight:800;margin-top:8px}

/* ---------- Tablas ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:10.5px;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:11px 14px;border-bottom:1px solid var(--line);letter-spacing:.3px;font-weight:700}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-2)}
.tbl tr:last-child td{border-bottom:0}.tbl tr:hover td{background:#fafbfc}
.tbl .num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}

/* ---------- Píldoras ---------- */
.badge{display:inline-block;padding:4px 9px;border-radius:15px;font-size:10.5px;font-weight:700;background:#eef2f5;color:#5a6472}
.badge.green,.badge.bgreen{background:var(--green-bg);color:var(--green-ink)}
.badge.red,.badge.bred{background:var(--red-bg);color:var(--red-ink)}
.badge.yellow,.badge.byellow{background:var(--amber-bg);color:var(--amber-ink)}
.badge.blue,.badge.bblue{background:var(--blue-bg);color:var(--blue-ink)}
.pill{display:inline-block;font-weight:700;font-size:11px;padding:2px 9px;border-radius:999px;color:#fff}

/* ---------- Progreso ---------- */
.progress,.bar{height:9px;background:#edf0f2;border-radius:10px;overflow:hidden}
.progress i,.bar i{display:block;height:100%;background:var(--yellow);border-radius:10px}

/* ---------- Acciones rápidas ---------- */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#f8f9fb;padding:14px;
  border-radius:10px;font-weight:650;color:#29343e;transition:background .12s,transform .12s}
.quick a:hover{background:#fff8d6;transform:translateY(-2px);color:#29343e}.quick a svg{color:var(--yellow-2)}

/* ---------- Grid de accesos (tiles) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:18px 10px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:var(--ink)}
.tile .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--dark);color:var(--yellow)}
.tile .lb{font-size:12.5px;font-weight:600;line-height:1.25}

/* ---------- Alertas motor ---------- */
.alertbox{display:flex;gap:10px;padding:11px 12px;border-radius:9px;background:#fff7e0;margin:8px 0;font-size:12px}
.alertbox.red{background:#fff0f0}.alertbox b{display:block;font-size:12.5px;margin-bottom:2px}
.alertbox .ic{flex:none;color:var(--amber-ink)}.alertbox.red .ic{color:var(--red-ink)}
.info .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.info .row:last-child{border-bottom:0}.info .row .k{color:var(--muted)}.info .row .v{font-weight:700}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;padding:10px 15px;
  font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font);background:#eef1f4;color:var(--ink)}
.btn:hover{background:#e4e8ec}
.btn.o,.btn.primary{background:var(--yellow);color:#111}.btn.o:hover,.btn.primary:hover{background:var(--yellow-2);color:#111}
.btn.dark{background:var(--dark);color:#fff}.btn.dark:hover{background:var(--dark-2);color:#fff}
.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}

/* ---------- Búsqueda / formularios ---------- */
.searchbar{display:flex;gap:8px;margin-bottom:16px}
.searchbar input{flex:1;height:42px;border:1px solid var(--line);border-radius:9px;padding:0 12px;font-family:var(--font)}
.form .fr{margin-bottom:15px}
.form label{display:block;font-weight:650;color:var(--ink);margin-bottom:5px;font-size:13px}
.form input[type=text],.form input[type=email],.form input[type=number],.form input[type=date],
.form input[type=time],.form input[type=password],.form select,.form textarea{width:100%;min-height:42px;
  border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:var(--font);font-size:14px;background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid rgba(244,196,0,.3);border-color:var(--yellow)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:640px){.form .row2,.form .row3{grid-template-columns:1fr}}
.form .help{font-size:12px;color:var(--muted);margin-top:4px}
.form .errlist,.form .err{color:var(--red);font-size:12.5px;margin-top:4px;list-style:none;padding:0}
.form .check{display:flex;align-items:center;gap:8px}.form .check input{width:18px;height:18px;accent-color:var(--yellow)}
.form .actions{display:flex;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.form .radioset ul{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.form .radioset li{margin:0}
.form .radioset label{display:inline-flex;align-items:center;gap:8px;font-weight:600;border:1px solid var(--line);
  border-radius:10px;padding:11px 15px;cursor:pointer;margin:0;background:#fff}
.form .radioset input{accent-color:var(--yellow);width:17px;height:17px}
.wizard-step{background:#fafbfc;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:15px}
.wizard-step>.t{font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.wizard-step>.t .num{width:24px;height:24px;border-radius:50%;background:var(--dark);color:#fff;font-size:13px;display:grid;place-items:center}
.hidden{display:none!important}

/* ---------- Mensajes ---------- */
.msgs{margin-bottom:16px}
.msg{padding:12px 15px;border-radius:10px;font-size:13.5px;margin-bottom:8px;font-weight:600}
.msg.success{background:var(--green-bg);color:var(--green-ink)}.msg.warning{background:var(--amber-bg);color:var(--amber-ink)}
.msg.error{background:var(--red-bg);color:var(--red-ink)}.msg.info{background:var(--blue-bg);color:var(--blue-ink)}

/* ---------- Login ---------- */
.login-bg{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#10171e,#1d2740);padding:20px}
.login-card{background:#fff;width:100%;max-width:380px;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden}
.login-card .top-b{background:var(--dark);border-bottom:3px solid var(--yellow);padding:24px;text-align:center}
.login-card .top-b img{height:46px}
.login-card form{padding:24px}
.login-card label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:10px 0 5px;text-transform:uppercase;letter-spacing:.4px}
.login-card input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 13px;font-size:15px;font-family:var(--font)}
.login-card input:focus{outline:2px solid rgba(244,196,0,.3);border-color:var(--yellow)}
.login-card .btn{width:100%;justify-content:center;margin-top:18px;padding:12px}
.login-foot{text-align:center;color:#c9d2e3;font-size:12px;margin-top:16px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .side{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lg)}
  body.nav-open .side{transform:none}
  .wrap{margin-left:0}.burger{display:flex}.appbar .search{display:none}
}

/* ---------- Grilla de programación (calendario 4×2) ---------- */
.schedule{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:auto;box-shadow:var(--shadow)}
.sched-head,.sched-row{display:grid;grid-template-columns:210px repeat(14,minmax(66px,1fr));min-width:1140px}
.sched-head>div{padding:9px 6px;border-bottom:1px solid var(--line);background:#fafbfc;font-size:10px;
  color:var(--muted);text-transform:uppercase;text-align:center;font-weight:700}
.sched-head>div.dom{color:var(--green);background:#eef7f0}
.sched-row>div{min-height:54px;border-right:1px solid #edf0f2;border-bottom:1px solid #edf0f2;padding:5px}
.sched-row>div:first-child{text-align:left;display:flex;flex-direction:column;justify-content:center}
.guard{font-weight:700;font-size:12.5px}
.guard small{color:var(--muted);font-weight:500}
.shift{border-radius:6px;padding:7px 4px;font-size:10.5px;font-weight:700;text-align:center}
.shift.day{background:#fff3b8;color:#7a5b00}
.shift.night{background:#dceafa;color:#24506e}
.shift.off{background:#e6f5ea;color:#2e7d4f}
.shift.nov{background:#ffe08a;color:#8a5a00;cursor:pointer;outline:2px solid #f4a100;font-weight:800;box-shadow:0 0 0 2px #fff3b8, 0 0 8px rgba(244,161,0,.6);animation:novglow 1.6s ease-in-out infinite}
.shift.inc{background:#ffd0d0;color:#a5231a;cursor:pointer;outline:2px solid #e24a3a;font-weight:800;box-shadow:0 0 8px rgba(226,74,58,.5);animation:novglow 1.6s ease-in-out infinite}
.shift.ind{background:#e3d7f7;color:#5b3aa0;cursor:pointer;outline:2px solid #7c4dcc;font-weight:800;box-shadow:0 0 8px rgba(124,77,204,.4)}
.shift.vac{background:#e3d7f7;color:#5b3aa0;cursor:pointer;outline:2px solid #9b6be0;font-weight:800;box-shadow:0 0 8px rgba(124,77,204,.45);animation:novglow 1.6s ease-in-out infinite}
.shift.perm{background:#ffe3c2;color:#9a5a12;cursor:pointer;outline:2px solid #e08b2a;font-weight:800;box-shadow:0 0 8px rgba(224,139,42,.45)}
@keyframes novglow{0%,100%{box-shadow:0 0 4px rgba(244,161,0,.4)}50%{box-shadow:0 0 12px rgba(244,161,0,.9)}}
/* Selector buscable (combobox) */
.combo{position:relative}
.combo-inp{width:100%;padding:9px 12px;border:1px solid #d7dce2;border-radius:9px;font-size:14px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center;
  background-size:15px;padding-left:32px}
.combo-inp:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(244,196,0,.18)}
.combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 3px);background:#fff;
  border:1px solid #dfe3e8;border-radius:10px;box-shadow:0 10px 28px rgba(17,24,32,.14);max-height:260px;overflow:auto}
.combo-op{padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #f1f3f6}
.combo-op:last-child{border-bottom:0}
.combo-op:hover{background:#fff8e0}
.combo-op.muted{color:#8a97a8;cursor:default}
/* Input de búsqueda por cédula/nombre — mismo estilo pulcro en todo el sistema */
input.busca,input[type="search"].busca{width:100%;padding:9px 12px 9px 32px;border:1px solid #d7dce2;border-radius:9px;font-size:14px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center;background-size:15px}
input.busca:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(244,196,0,.18)}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:16px;height:16px;border-radius:4px;display:inline-block}

/* ---------- Calendario de festivos ---------- */
.cal-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.cal-month{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.cal-month h3{margin:0 0 10px;font-size:14px;color:var(--ink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-grid .dow{font-size:9px;color:var(--muted);text-align:center;font-weight:800;text-transform:uppercase;padding-bottom:2px}
.cal-day{border:1px solid transparent;background:#f6f7f9;border-radius:5px;padding:0;height:27px;font-size:11px;
  cursor:pointer;color:var(--ink);font-family:var(--font);transition:outline .1s}
.cal-day:hover{outline:2px solid var(--yellow)}
.cal-day.otro{opacity:.25;cursor:default}
.cal-day.dom{background:#e6f5ea;color:#2e7d4f;font-weight:700}
.cal-day.fes{background:#fff2c7;color:#8d6900;font-weight:800}

/* Elementos de resumen que llevan al detalle correspondiente. */
.click-card{display:block;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.click-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(17,24,32,.10);border-color:#d5dde5}
.click-row{cursor:pointer}.click-row:focus,.click-row:hover td{background:#fff8d9!important;outline:none}