:root{
  --sb-navy:#0a1730;
  --sb-navy-2:#122f5d;
  --sb-blue:#0d6efd;
  --sb-blue-2:#1d8fff;
  --sb-cyan:#35c1ff;
  --sb-green:#18a957;
  --sb-orange:#f59e0b;
  --sb-red:#d93645;
  --sb-bg:#f3f6fa;
  --sb-card:#ffffff;
  --sb-text:#132238;
  --sb-muted:#64748b;
  --sb-line:#dfe7f0;
  --sb-radius:18px;
  --sb-shadow:0 12px 34px rgba(15,35,68,.08);
  --sb-shadow-sm:0 5px 16px rgba(15,35,68,.055);
}

html{background:var(--sb-bg)}
body.sb-app{
  background:
    radial-gradient(circle at 96% 3%,rgba(29,143,255,.08),transparent 25rem),
    linear-gradient(180deg,#f8fafc 0%,#f3f6fa 100%);
  color:var(--sb-text);
  font-family:"Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* TOPBAR */
.sb-topbar{
  min-height:70px;
  padding:12px 24px;
  background:linear-gradient(90deg,#07142b 0%,#0f2c59 100%);
  box-shadow:0 4px 18px rgba(5,18,39,.18);
  position:sticky;
  top:0;
  z-index:30;
}
.sb-brand{display:flex;align-items:center;gap:11px}
.sb-brand>img{width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(32,133,255,.25))}
.sb-brand-copy{display:flex;flex-direction:column;gap:1px}
.sb-brand-copy strong{font-size:17px;letter-spacing:.02em}
.sb-brand-copy span{margin:0!important;color:#dbeafe!important;font-size:12px!important}
.sb-userbar{display:flex;align-items:center;gap:14px;font-size:13px}
.sb-userbar span{color:#d8e3f2!important;margin:0!important}
.sb-userbar a{color:white;text-decoration:none;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.08)}
.sb-userbar a:hover{background:rgba(255,255,255,.14)}

/* LAYOUT + SIDEBAR */
.sb-layout{min-height:calc(100vh - 70px)}
.sb-sidebar{
  width:245px;
  padding:22px 12px 18px;
  background:rgba(255,255,255,.98);
  border-right:1px solid var(--sb-line);
  box-shadow:4px 0 16px rgba(15,35,68,.035);
  position:sticky;
  top:70px;
  height:calc(100vh - 70px);
  align-self:flex-start;
  display:flex;
  flex-direction:column;
}
.sb-sidebar-title{padding:0 12px 9px;color:#94a3b8;text-transform:uppercase;letter-spacing:.11em;font-size:10px;font-weight:800}
.sb-sidebar>a{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:3px 0;border-radius:11px;text-decoration:none;color:#334155;transition:.15s ease;font-size:14px}
.sb-sidebar>a img{width:23px;height:23px;object-fit:contain}
.sb-sidebar>a:hover,.sb-sidebar>a.sb-nav-active{background:linear-gradient(135deg,#eaf4ff,#f6fbff);color:#075fca;transform:translateX(2px)}
.sb-sidebar>a.sb-nav-active{font-weight:750;box-shadow:inset 3px 0 0 var(--sb-blue)}
.sb-sidebar-foot{margin-top:auto;padding:13px;border:1px solid #e2eaf4;border-radius:13px;background:linear-gradient(135deg,#f7fbff,#eef6ff);display:flex;align-items:center;gap:9px}
.sb-sidebar-foot img{width:31px;height:31px}
.sb-sidebar-foot div{display:flex;flex-direction:column;gap:1px}
.sb-sidebar-foot strong{font-size:11px;color:#173354}
.sb-sidebar-foot span{font-size:10px;color:#64748b}

.sb-content{flex:1;max-width:none;padding:30px clamp(24px,3vw,46px) 46px;min-width:0}

/* HERO */
.sb-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 155px;
  gap:20px;
  align-items:center;
  padding:26px 28px;
  margin:0 0 22px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  color:#fff;
  background:linear-gradient(135deg,#0a2f63 0%,#0b509b 56%,#0b7bdc 100%);
  box-shadow:0 15px 36px rgba(13,67,135,.19);
}
.sb-hero:before{content:"";position:absolute;right:-72px;top:-106px;width:300px;height:300px;border:40px solid rgba(255,255,255,.055);border-radius:50%}
.sb-hero-copy{position:relative;z-index:2}
.sb-hero h1{margin:3px 0 7px;color:#fff;font-size:clamp(25px,2.6vw,38px);line-height:1.08;letter-spacing:-.025em}
.sb-hero p{margin:0;max-width:760px;color:#e7f2ff;font-size:15px;line-height:1.5}
.sb-hero-art{width:132px;height:132px;object-fit:contain;justify-self:end;position:relative;z-index:2;filter:drop-shadow(0 14px 22px rgba(0,0,0,.23))}
.sb-eyebrow{display:inline-block;color:#cde7ff;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.sb-eyebrow.dark{color:#7b8ba1}
.sb-hero-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:700}
.sb-hero-badge img{width:21px;height:21px;object-fit:contain}
.sb-lead{margin:-6px 0 16px;font-size:14px}

/* CARDS */
.tarjeta,.tarjeta.grande{
  background:rgba(255,255,255,.985);
  border:1px solid var(--sb-line);
  border-radius:var(--sb-radius);
  box-shadow:var(--sb-shadow-sm);
}
.tarjeta.grande{margin-top:18px;padding:22px}
.sb-panel-card,.sb-info-card,.sb-device-card{box-shadow:var(--sb-shadow)}
.sb-section-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sb-section-head>img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(27,100,190,.10))}
.sb-section-head h3{margin:2px 0 0;color:#173354;font-size:16px}
.sb-section-head-row{justify-content:space-between}
.sb-section-head-left{display:flex;align-items:center;gap:12px}
.sb-section-head-left>img{width:42px;height:42px}
.sb-count-pill{padding:6px 9px;border-radius:999px;background:#edf5ff;color:#075fc7;font-size:11px;font-weight:800}

/* KPI */
.sb-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.sb-kpi-card{min-height:120px;padding:17px 18px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.sb-kpi-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--sb-blue-2),var(--sb-cyan))}
.sb-kpi-card>img{width:43px;height:43px;object-fit:contain}
.sb-kpi-card h3{margin:0 0 7px;color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.sb-kpi-card p{margin:0;color:#10213d;font-size:24px;font-weight:850;line-height:1.15}
.sb-kpi-card p.sb-kpi-date{font-size:16px}

/* DEVICE */
.sb-device-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:8px}
.sb-device-grid>div{padding:12px 13px;border-radius:12px;background:#f7faff;border:1px solid #e6edf5;display:flex;flex-direction:column;gap:4px}
.sb-device-grid span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#7b8ba1;font-weight:800}
.sb-device-grid strong{font-size:13px;color:#173354;overflow-wrap:anywhere}
.sb-destination-strip{margin-top:14px;padding:13px 14px;border-radius:13px;background:linear-gradient(135deg,#edf8ff,#f8fcff);border:1px solid #d7eafa;display:flex;align-items:center;gap:11px}
.sb-destination-strip img{width:38px;height:38px}
.sb-destination-strip div{display:flex;flex-direction:column;gap:2px}
.sb-destination-strip span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6b7f96;font-weight:800}
.sb-destination-strip strong{font-size:13px;color:#0b5fb9}
.sb-destination-strip small{color:#64748b}

/* ACTION CARDS */
.sb-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.sb-action-card{margin-top:0!important;display:grid;grid-template-columns:70px minmax(0,1fr);gap:15px;align-items:center;min-height:185px;background:linear-gradient(135deg,#fff,#f8fbff)}
.sb-action-card>img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 7px 13px rgba(18,80,162,.13))}
.sb-action-card h3{margin:3px 0 6px;color:#173354;font-size:17px}
.sb-action-card p{margin:0 0 12px!important;color:#64748b;font-size:13px!important;line-height:1.45}

/* BUTTONS */
button,.boton,a.boton{
  display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:9px 14px;border:0;border-radius:10px;background:linear-gradient(135deg,#0d6efd,#0758c7);color:#fff;text-decoration:none;font-weight:750;font-size:12px;box-shadow:0 5px 14px rgba(13,110,253,.17);transition:.15s ease
}
button:hover,.boton:hover,a.boton:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 8px 18px rgba(13,110,253,.22)}
.boton-secundario{background:#526174!important;box-shadow:none!important}
.sb-link-action,.boton-enlace{color:#075fc7;font-weight:750;text-decoration:none}
.sb-link-action:hover,.boton-enlace:hover{text-decoration:underline}
.sb-actions-cell{display:flex;flex-wrap:wrap;gap:6px;min-width:150px}
.sb-actions-cell form{margin:0!important}

/* TABLES */
.sb-table-shell,.tabla-contenedor{border:1px solid var(--sb-line);border-radius:14px;overflow:auto;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;z-index:3;background:linear-gradient(180deg,#f8fbff,#eef4fb)!important;color:#173354;font-size:11px!important;text-transform:uppercase;letter-spacing:.035em;font-weight:800;border-bottom:1px solid #d6e1ec!important;white-space:nowrap}
th,td{padding:11px!important;vertical-align:middle!important;font-size:12px!important}
tbody td{border-bottom:1px solid #e9eef4!important}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#f7fbff}
.estado{padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850;white-space:nowrap}
.estado.activo{background:#e7f8ef;color:#118848}
.estado.inactivo{background:#ffe7e9;color:#c83242}
.sb-state-neutral{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eaf3ff;color:#0c66ce;font-size:10px;font-weight:850;white-space:nowrap}
.sb-hash{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#617083;word-break:break-all}

/* SEARCH */
.sb-table-tools{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:2px 0 10px}
.sb-search{width:min(390px,100%)!important;padding:9px 11px!important;border-radius:10px!important}
.sb-table-count{font-size:11px;color:#64748b;font-weight:700}

/* FORMS */
input,select,textarea{border:1px solid #cfd9e5!important;border-radius:10px!important;padding:10px 12px!important;background:#fff!important;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:#65aaff!important;box-shadow:0 0 0 3px rgba(13,110,253,.1)}
.formulario-equipo{gap:16px}.formulario-equipo>div{min-width:0}
.sb-inline-form{align-items:center}
.aviso-personal{padding:13px;border-radius:12px;background:#fff7e8;border:1px solid #f7d899;color:#7c5200}

/* ALERTS */
.alerta{border-radius:11px;padding:11px 13px;border:1px solid transparent}
.alerta.error{background:#fff0f1;color:#a52533;border-color:#f4c8ce}
.alerta.exito{background:#eaf9f0;color:#146d3c;border-color:#c7ead5}

@media(max-width:1100px){
  .sb-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-action-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .sb-topbar{position:relative;align-items:flex-start;flex-direction:column}
  .sb-layout{display:block}
  .sb-sidebar{width:100%;height:auto;position:relative;top:0;border-right:0;border-bottom:1px solid var(--sb-line)}
  .sb-sidebar-foot{display:none}
  .sb-content{padding:20px 14px 34px}
  .sb-hero{grid-template-columns:1fr 88px;padding:19px}
  .sb-hero-art{width:80px;height:80px}
  .sb-device-grid{grid-template-columns:1fr}
  .sb-action-card{grid-template-columns:50px 1fr;padding:16px}
  .sb-action-card>img{width:46px;height:46px}
  .sb-userbar{flex-wrap:wrap}
  .formulario-linea{display:block}
  .formulario-linea button{width:100%;margin-top:9px}
}