:root{
  --navy:#0B1B3A;
  --navy-2:#12264A;
  --cyan:#2EC4E0;
  --cyan-dim:#1A9BB3;
  --gold:#F4D03F;
  --bg:#F4F7FB;
  --ink:#0B1B3A;
  --ok:#1F9D55;
  --warn:#E3A008;
  --bad:#D92D20;
  --line:#D3DCE8;
  --muted:#5B6B7A;
  --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.45 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
header.app{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--navy);color:#fff;flex-wrap:wrap}
header.app .logos{display:flex;align-items:center;gap:8px}
header.app img.logo-lh,header.app img.logo-emp{height:44px;width:44px;object-fit:contain;background:#06101F;border:2px solid var(--cyan);border-radius:8px}
header.app .sp{flex:1}
header.app button,header.app a{background:transparent;border:0;color:#D6EEF5;cursor:pointer;font:inherit;margin:0 3px;text-decoration:none}
header.app button:hover,header.app a:hover{color:var(--gold)}
.brand-title{font-weight:700}
.brand-title span{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:16px}
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:130px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.sem.verde{border-left:6px solid var(--ok)}
.sem.amarillo{border-left:6px solid var(--warn)}
.sem.rojo{border-left:6px solid var(--bad)}
button.prim{background:var(--navy);color:#fff;border:2px solid var(--cyan);border-radius:8px;padding:10px 14px;cursor:pointer}
button.sec{background:#E8EEF4;border:0;border-radius:8px;padding:10px 14px;cursor:pointer}
button.danger{background:#F8D7D4;color:#7A1C16;border:0;border-radius:8px;padding:10px 14px;cursor:pointer}
button[disabled]{opacity:.45;cursor:not-allowed}
label{display:block;margin:8px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.steps span{padding:4px 8px;border-radius:99px;background:#E8EEF4;font-size:12px}
.steps span.on{background:var(--cyan);color:var(--navy);font-weight:700}
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login .brand{background:var(--navy);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center}
.login .brand img{width:180px;height:180px;object-fit:contain;border:3px solid var(--cyan);border-radius:18px;background:#06101F}
.login h1{margin:18px 0 6px}
.login .gold{color:var(--gold)}
.modal{position:fixed;inset:0;background:rgba(11,27,58,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal .box{background:#fff;max-width:720px;width:100%;max-height:92vh;overflow:auto;border-radius:12px;padding:18px}
.tv{background:var(--navy);color:#E8F4FF;min-height:100vh;padding:20px}
.tv header.tvbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tv .logos{display:flex;gap:10px;align-items:center}
.tv .logos img{height:64px;width:64px;object-fit:contain;border:2px solid var(--cyan);border-radius:10px;background:#06101F}
.tv .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.tv .card{background:var(--navy-2);border:1px solid #1E3A5F;min-height:190px;font-size:18px;position:relative;padding-left:28px}
.lamp{position:absolute;left:12px;top:16px;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.lamp.verde{background:var(--ok);animation:blink 1.4s ease-in-out infinite}
.lamp.amarillo{background:var(--warn);animation:blink .8s ease-in-out infinite}
.lamp.rojo{background:var(--bad);animation:blink .4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.85)}}
@media (prefers-reduced-motion:reduce){.lamp{animation:none}}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:8px;text-align:left;font-size:13px;vertical-align:top}
.note{font-size:12px;color:var(--muted)}
.badge.forzoso{background:#F8D7D4;color:#7A1C16;border-radius:99px;padding:2px 8px;font-size:11px}
.badge.ok{background:#D1FADF;color:#065F46;border-radius:99px;padding:2px 8px;font-size:11px}
.badge.warn{background:#FEF0C7;color:#92400E;border-radius:99px;padding:2px 8px;font-size:11px}
.badge.bad{background:#FEE4E2;color:#7A1C16;border-radius:99px;padding:2px 8px;font-size:11px}
.badge.off{background:#E8EEF4;color:#475467;border-radius:99px;padding:2px 8px;font-size:11px}
.legal{font-size:12px;background:#F8FAFC;border:1px solid var(--line);padding:10px;border-radius:8px}
.preview-sq{width:128px;height:128px;object-fit:contain;border:1px dashed var(--line);border-radius:8px;background:#06101F}
.cred{width:360px;background:var(--navy);color:#fff;border:3px solid var(--cyan);border-radius:16px;padding:16px;margin:12px 0}
.cred img.foto{width:96px;height:96px;object-fit:cover;border-radius:8px;border:2px solid var(--cyan)}
.cred .row{display:flex;gap:12px}
.person-foto{width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
@media(max-width:900px){
  .login{grid-template-columns:1fr}
  header.app img.logo-lh,header.app img.logo-emp{height:36px;width:36px}
}
@media print{.no-print{display:none!important}}