/* IP Technologies · Paleta de la web oficial (ip.net.co)
   Se carga DESPUÉS de app.css y re-tematiza todo el sitio: fondo azul marino #030C2B,
   azul #0066FF, cian #00D4FF, celeste #4CB8FF, tipografía Manrope.
   Misma paleta que phoscom.net/propuestas (ip.css). */
:root{
  --ip-bg:#030C2B; --ip-bg-2:#06123A; --ip-blue:#0066FF; --ip-blue-strong:#0050CC; --ip-cyan:#00D4FF;
  --ip-sky:#4CB8FF; --ip-ink:#F4F8FF; --ip-text:#C5D6F2; --ip-muted:#8EA3C8; --ip-line:rgba(160,190,240,.16);
  --ip-card:rgba(10,32,84,.42); --ip-card-hi:rgba(16,48,118,.55);
  --ip-net:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360' fill='none'%3E%3Cg stroke='%234F7FBF' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M0 260 80 205 165 232 255 142 360 168'/%3E%3Cpath d='M45 360 100 280 165 232'/%3E%3Cpath d='M255 142 290 45 360 0'/%3E%3Cpath d='M80 205 66 118 148 66 290 45'/%3E%3Cpath d='M148 66 120 0'/%3E%3C/g%3E%3Cg fill='%23D4E3F1' fill-opacity='.6'%3E%3Ccircle cx='80' cy='205' r='2.5'/%3E%3Ccircle cx='165' cy='232' r='3'/%3E%3Ccircle cx='255' cy='142' r='2.5'/%3E%3Ccircle cx='290' cy='45' r='2.5'/%3E%3Ccircle cx='148' cy='66' r='2.5'/%3E%3Ccircle cx='66' cy='118' r='2'/%3E%3C/g%3E%3C/svg%3E");

  /* tokens de app.css re-mapeados al tema de ip.net.co */
  --bg:var(--ip-bg); --surface:rgba(255,255,255,.04); --line:var(--ip-line); --fg:var(--ip-ink); --muted:var(--ip-muted);
  --accent:var(--ip-blue); --on-accent:#fff; --accent-soft:rgba(0,102,255,.18); --title:#fff;
  --ok:#3DDC97; --warn:#FFC266; --danger:#FF6B6B;
  --f-body:"Manrope",system-ui,sans-serif;
  color-scheme:dark;
}
html{background:var(--ip-bg)}
body{min-height:100vh;color:var(--ip-text);font-family:var(--f-body);background:
  radial-gradient(960px 608px at 0% 0%,rgba(0,102,255,.22),transparent 70%),
  radial-gradient(832px 640px at 100% 24%,rgba(31,107,255,.16),transparent 70%),
  linear-gradient(180deg,#030C2B,#041237 60%,#030C2B);
  background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background-image:var(--ip-net);background-size:360px;opacity:.55;pointer-events:none;z-index:0}
body>*:not(.toast):not(.tip):not(.skip):not(header){position:relative;z-index:1}
h1,h2,h3{color:#fff;font-weight:800;letter-spacing:-.02em}
.label{color:var(--ip-sky)}
.hint,.muted{color:var(--ip-muted)}
a{color:var(--ip-sky)}
a:focus-visible,button:focus-visible{outline-color:var(--ip-cyan)}
.req{color:var(--ip-cyan)}

/* ---------- Encabezado ---------- */
header.top{background:rgba(3,12,43,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ip-line);z-index:20}
header.top::after{display:none}
.bar{padding-block:14px}
.brand img{height:38px}
.brand .bt{border-left:1px solid var(--ip-line);padding-left:12px;margin-left:2px}
.brand .bt b{color:#fff;font-size:.9rem;font-weight:700}
.brand .bt span{color:var(--ip-muted);font-weight:600}
.brand .bt.only-sub b{display:none}
.brand .bt.only-sub span{font-size:.85rem;color:var(--ip-text)}
nav.tabs a{color:var(--ip-text);font-weight:600}
nav.tabs a:hover{color:#fff}
nav.tabs a[aria-current="page"]{color:#fff;background:rgba(0,102,255,.18);border-color:rgba(76,184,255,.35)}
.who{color:var(--ip-text)}
.chip{border-color:rgba(76,184,255,.45);background:rgba(0,102,255,.16);color:#DCEBFF}

/* ---------- Botones ---------- */
.btn{border-radius:8px;font-weight:800;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
.btn.primary{background:var(--ip-blue);border-color:var(--ip-blue);color:#fff;box-shadow:0 10px 30px -10px rgba(0,102,255,.7)}
.btn.primary:hover{background:var(--ip-blue-strong);border-color:var(--ip-blue-strong)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.btn.ghost:hover{border-color:var(--ip-sky);background:rgba(0,102,255,.12)}
.btn.danger{color:#FF8A8A;border-color:rgba(255,107,107,.55);background:transparent}
.linkbtn{color:var(--ip-muted)}
.linkbtn:hover{color:#fff}

/* ---------- Formularios ---------- */
.field>label,.field>.flabel{color:#E6EEFF}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=datetime-local],input[type=month],select,textarea{
  background:rgba(3,12,43,.55);color:#fff;border:1px solid rgba(160,190,240,.24);border-radius:8px}
input::placeholder,textarea::placeholder{color:#6F84AB}
input:focus,select:focus,textarea:focus{border-color:var(--ip-sky);box-shadow:0 0 0 3px rgba(0,102,255,.25)}
.invalid input,.invalid select,.invalid textarea{border-color:var(--danger)}
select option{background:#06123A;color:#fff}
input[type=datetime-local],input[type=month],input[type=date]{color-scheme:dark}
.pill-opt span{border-color:rgba(160,190,240,.24);color:var(--ip-text);background:rgba(3,12,43,.4)}
.pill-opt input:checked+span{border-color:var(--ip-cyan);background:rgba(0,212,255,.12);color:#fff}
.box{border-color:rgba(160,190,240,.45);background:rgba(3,12,43,.55)}
.box:checked{background:var(--ip-blue);border-color:var(--ip-blue)}
.confirm{background:var(--ip-card);border-color:var(--ip-line);border-radius:12px}

/* Selector ingreso / salida */
.seg{background:rgba(3,12,43,.55);border-color:var(--ip-line)}
.seg button{color:var(--ip-muted)}
.seg button[aria-pressed="true"]{background:var(--ip-blue);color:#fff;box-shadow:0 8px 22px -10px rgba(0,102,255,.8)}
.count{background:var(--ip-cyan);color:#021029;font-weight:800}

/* Franja del nodo y presencia */
.node-band{background:linear-gradient(110deg,rgba(0,102,255,.26),rgba(0,212,255,.08) 60%,rgba(10,32,84,.4));border:1px solid rgba(76,184,255,.4);border-radius:18px}
.presence.on{color:#fff}
.presence.on .dot{background:var(--ip-cyan);box-shadow:0 0 0 4px rgba(0,212,255,.18)}
.presence .dot{background:rgba(160,190,240,.35)}

/* Pasos */
.stepper li a{border-bottom-color:var(--ip-line)}
.stepper li.current a{color:#fff;border-color:var(--ip-sky)}
.stepper li.is-done a{color:#fff;border-color:var(--ip-cyan)}
.sn{background:var(--ip-bg);border-color:rgba(160,190,240,.3)}
.stepper li.current .sn{border-color:var(--ip-sky);color:#fff}
.stepper li.is-done .sn,legend .sn.is-done{background:var(--ip-blue);border-color:var(--ip-blue);color:#fff}

/* Actividades */
.act{background:var(--ip-card);border-color:var(--ip-line);border-radius:12px}
.act.on{border-color:var(--ip-cyan);background:var(--ip-card-hi)}
.act>label{color:#fff}
.act .panel{background:rgba(3,12,43,.45);border-top-color:var(--ip-line);border-radius:0 0 12px 12px}
.aicon{background:rgba(0,102,255,.18);border:1px solid rgba(76,184,255,.4)}
.aicon svg{stroke:#BFE3FF}
.act.on .aicon{background:var(--ip-blue);border-color:var(--ip-blue)}
.act.on .aicon svg{stroke:#fff}

/* Confirmación y visitas */
.success{background:var(--ip-card);border-color:var(--ip-line);border-radius:18px;backdrop-filter:blur(8px)}
.check circle{fill:var(--ip-blue)}
.summary,.summary>div{border-color:var(--ip-line)}
.summary dd{color:#fff}
.visit{background:var(--ip-card);border-color:var(--ip-line);border-radius:14px}
.visit .whoname{color:#fff}
.visit .close-form{border-top-color:var(--ip-line)}
.visit.closed{border-color:var(--ip-cyan);background:rgba(0,212,255,.08)}
.done{background:rgba(0,102,255,.14);border-color:rgba(76,184,255,.45)}
.empty{border-color:rgba(160,190,240,.24)}

/* ---------- Avisos, paneles y tablas ---------- */
.notice{background:rgba(10,32,84,.55);border-color:var(--ip-line);border-left-color:var(--ip-blue);color:var(--ip-text)}
.notice.bad{border-left-color:var(--danger)}
.notice b{color:#fff}
.panelbox,.kpi,.qrcard{background:var(--ip-card);border:1px solid var(--ip-line);border-radius:18px;backdrop-filter:blur(8px)}
.kpi .v{color:#fff}
.kpi.alert .v{color:var(--warn)}
.kpi .label svg{stroke:var(--ip-cyan)}
.tablewrap{background:var(--ip-card);border-color:var(--ip-line);border-radius:16px}
th{background:rgba(0,102,255,.10);color:var(--ip-sky)}
th,td{border-bottom-color:var(--ip-line)}
td{color:var(--ip-text)}
td b{color:#fff}
.rowform{background:var(--ip-card);border-color:var(--ip-line);border-radius:16px}
.qrcard .tok{color:var(--ip-muted)}
.qrcard canvas{background:#fff}

/* Gráficos */
.chart .vl{fill:#fff}
.chart .bar{fill:var(--ip-blue)}
.chart .bar.dim{fill:var(--ip-sky);opacity:.45}
.bars .fill{background:linear-gradient(90deg,var(--ip-blue),var(--ip-cyan))}
.cell[data-l="0"]{background:rgba(255,255,255,.05)}
.cell[data-l="1"]{background:rgba(0,102,255,.28)}
.cell[data-l="2"]{background:rgba(0,102,255,.55)}
.cell[data-l="3"]{background:rgba(0,150,255,.8)}
.cell[data-l="4"]{background:var(--ip-cyan)}
.heat .cell:focus{outline-color:#fff}
.tip{background:#F4F8FF;color:#021029}
.toast{background:var(--ip-blue);color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}

/* Pie y carga */
.foot{border-top-color:var(--ip-line);background:rgba(2,10,36,.6)}
.foot .wrap{color:var(--ip-muted)}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%}

@media (max-width:640px){
  #saveIn{box-shadow:0 10px 30px -8px rgba(0,102,255,.8)}
  .brand img{height:32px}
}

/* ---------- Login unificado y vista del técnico ---------- */
.me-box{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--ip-line);border-radius:10px;background:var(--ip-card)}
.me-box b{color:#fff;font-size:1rem}
.me-box .muted{font-size:.82rem}
.visit.mine{border-color:rgba(76,184,255,.55)}
.who .btn.sm{white-space:nowrap}

/* Mi historial */
.hlist{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.hcard{background:var(--ip-card);border:1px solid var(--ip-line);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:110px 1fr auto;gap:6px 18px;align-items:start}
.hcard .hd{display:flex;flex-direction:column}
.hcard .hd b{color:#fff;font-size:1.05rem;font-family:var(--f-mono)}
.hcard .hd span{font-size:.78rem;color:var(--ip-muted);text-transform:capitalize}
.hcard h3{font-size:1rem;margin-bottom:2px}
.hcard .meta{font-size:.82rem;color:var(--ip-muted);display:flex;flex-wrap:wrap;gap:4px 14px}
.hcard .acts-d{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:.88rem}
.hcard .acts-d b{color:var(--ip-ink)}
.hcard .obs{margin-top:8px;font-size:.85rem;color:var(--ip-text);border-left:3px solid var(--ip-cyan);padding-left:10px}
.hcard .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.hcard .side .dur{font-family:var(--f-mono);color:#fff;font-size:.95rem}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:700;border:1px solid var(--ip-line);color:var(--ip-text)}
@media (max-width:640px){
  .hcard{grid-template-columns:1fr;padding:14px}
  .hcard .hd{flex-direction:row;gap:10px;align-items:baseline}
  .hcard .side{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;flex-wrap:wrap}
}
@media (max-width:1440px){body.admin .who .who-name{display:none}}