/* ============================================================
   CRM Dashboard — Assured GPS
   ============================================================ */
:root {
  --primary:   #1a6fc4;
  --primary-d: #1558a0;
  --accent:    #00c9a7;
  --danger:    #e74c3c;
  --warning:   #f39c12;
  --success:   #27ae60;
  --dark:      #0f1923;
  --dark2:     #162130;
  --dark3:     #1e2f42;
  --sidebar-w: 240px;
  --text:      #e8edf2;
  --text2:     #8da4bc;
  --border:    rgba(255,255,255,.07);
  --card-bg:   rgba(255,255,255,.04);
  --radius:    10px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;background:var(--dark);color:var(--text)}
a{color:var(--primary);text-decoration:none}
a:hover{color:#5db0ff}
input,select,textarea,button{font-family:inherit;font-size:14px}
img{max-width:100%}

/* ── Layout ─────────────────────────────────────────────── */
.layout{display:flex;min-height:100vh}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--dark2);
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  position:fixed;top:0;left:0;height:100vh;
  overflow-y:auto;z-index:100;
}
.sidebar-brand{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.sidebar-brand .logo-icon{
  width:38px;height:38px;background:var(--primary);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.sidebar-brand .brand-text{font-weight:700;font-size:15px;line-height:1.2}
.sidebar-brand .brand-sub{font-size:11px;color:var(--text2)}
.sidebar-nav{padding:12px 0;flex:1}
.nav-section{padding:6px 18px 4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);font-weight:600}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 18px;color:var(--text2);transition:.18s;
  border-left:3px solid transparent;
}
.nav-item:hover{background:var(--dark3);color:var(--text);text-decoration:none}
.nav-item.active{background:rgba(26,111,196,.18);color:var(--primary);border-left-color:var(--primary);font-weight:600}
.nav-icon{width:18px;text-align:center;font-style:normal;font-size:16px}
.sidebar-footer{
  padding:14px 18px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.sidebar-footer .user-name{font-size:13px;font-weight:600}
.sidebar-footer .user-role{font-size:11px;color:var(--text2)}
.sidebar-footer .logout-btn{margin-left:auto;color:var(--text2);font-size:18px}

/* ── Main ─────────────────────────────────────────────────── */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{
  padding:14px 28px;background:var(--dark2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;
}
.topbar-title{font-size:18px;font-weight:700}
.topbar-actions{display:flex;gap:10px;align-items:center}
.content{padding:24px 28px;flex:1}

/* ── KPI Cards ─────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.kpi-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;position:relative;overflow:hidden;transition:.2s;
}
.kpi-card:hover{border-color:rgba(26,111,196,.4);transform:translateY(-2px)}
.kpi-card .kpi-icon{font-size:28px;margin-bottom:8px;display:block}
.kpi-card .kpi-val{font-size:26px;font-weight:700;line-height:1}
.kpi-card .kpi-label{font-size:12px;color:var(--text2);margin-top:4px}
.kpi-card .kpi-sub{font-size:11px;color:var(--text2);margin-top:6px}
.kpi-card.green  {border-left:3px solid var(--success)}
.kpi-card.red    {border-left:3px solid var(--danger)}
.kpi-card.yellow {border-left:3px solid var(--warning)}
.kpi-card.blue   {border-left:3px solid var(--primary)}
.kpi-card.teal   {border-left:3px solid var(--accent)}

/* ── Panels ────────────────────────────────────────────────── */
.panel{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden}
.panel-head{
  padding:14px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.panel-title{font-size:15px;font-weight:600}
.panel-body{padding:20px}
.panel-body.no-pad{padding:0}

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table.crm-table{width:100%;border-collapse:collapse}
table.crm-table th{
  padding:10px 14px;text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text2);border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.crm-table td{
  padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;
}
table.crm-table tr:last-child td{border-bottom:none}
table.crm-table tr:hover td{background:rgba(255,255,255,.025)}

/* ── Badges ─────────────────────────────────────────────────── */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-active   {background:rgba(39,174,96,.2);  color:#4ade80}
.badge-expired  {background:rgba(231,76,60,.2);  color:#f87171}
.badge-warning  {background:rgba(243,156,18,.2); color:#fbbf24}
.badge-critical {background:rgba(239,68,68,.3);  color:#ff6b6b;animation:pulse 1.5s infinite}
.badge-unlimited{background:rgba(0,201,167,.15); color:var(--accent)}
.badge-info     {background:rgba(26,111,196,.2); color:#60a5fa}
.badge-partial  {background:rgba(243,156,18,.2); color:#fbbf24}
.badge-paid     {background:rgba(39,174,96,.2);  color:#4ade80}
.badge-pending  {background:rgba(156,163,175,.2);color:#9ca3af}
.badge-sent     {background:rgba(39,174,96,.2);  color:#4ade80}
.badge-failed   {background:rgba(231,76,60,.2);  color:#f87171}
.badge-available{background:rgba(0,201,167,.15); color:var(--accent)}
.badge-assigned {background:rgba(26,111,196,.2); color:#60a5fa}
.badge-sold     {background:rgba(156,163,175,.2);color:#9ca3af}
.badge-damaged  {background:rgba(231,76,60,.2);  color:#f87171}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:7px;border:none;cursor:pointer;
  font-size:13px;font-weight:500;transition:.18s;line-height:1.4;
  white-space:nowrap;
}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn:active{transform:none;opacity:.95}
.btn-primary {background:var(--primary);color:#fff}
.btn-success {background:var(--success);color:#fff}
.btn-danger  {background:var(--danger); color:#fff}
.btn-warning {background:var(--warning);color:#fff}
.btn-dark    {background:var(--dark3);  color:var(--text);border:1px solid var(--border)}
.btn-sm      {padding:4px 11px;font-size:12px}
.btn-icon    {width:32px;height:32px;padding:0;justify-content:center;border-radius:7px}
.btn-wa      {background:#25d366;color:#fff}

/* ── Forms ───────────────────────────────────────────────────── */
.form-grid{display:grid;gap:16px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.form-control{
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  border-radius:7px;padding:9px 12px;color:var(--text);
  transition:.18s;width:100%;
}
.form-control:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,.09)}
.form-control option{background:#1e2f42}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:80px}
.form-hint{font-size:11px;color:var(--text2)}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:6px}

/* ── Login page ──────────────────────────────────────────────── */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--dark);
  background-image:radial-gradient(circle at 20% 50%, rgba(26,111,196,.12) 0%, transparent 50%),
                   radial-gradient(circle at 80% 20%, rgba(0,201,167,.08) 0%, transparent 40%);
}
.login-card{
  background:var(--dark2);border:1px solid var(--border);border-radius:14px;
  padding:40px;width:100%;max-width:400px;
}
.login-logo{text-align:center;margin-bottom:30px}
.login-logo .icon{font-size:48px;display:block;margin-bottom:10px}
.login-logo h1{font-size:22px;font-weight:700}
.login-logo p{font-size:13px;color:var(--text2);margin-top:4px}
.login-error{
  background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.3);
  border-radius:7px;padding:10px 14px;color:#f87171;font-size:13px;margin-bottom:16px;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert{
  padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:13px;
  display:flex;align-items:center;gap:10px;
}
.alert-success{background:rgba(39,174,96,.15); border:1px solid rgba(39,174,96,.3); color:#4ade80}
.alert-danger {background:rgba(231,76,60,.15); border:1px solid rgba(231,76,60,.3); color:#f87171}
.alert-warning{background:rgba(243,156,18,.15);border:1px solid rgba(243,156,18,.3);color:#fbbf24}
.alert-info   {background:rgba(26,111,196,.15);border:1px solid rgba(26,111,196,.3);color:#60a5fa}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show{display:flex}
.modal{
  background:var(--dark2);border:1px solid var(--border);border-radius:12px;
  width:100%;max-width:540px;max-height:90vh;overflow-y:auto;
  position:relative;
}
.modal-head{
  padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;
  background:var(--dark2);z-index:1;
}
.modal-title{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;padding:2px 6px}
.modal-close:hover{color:var(--text)}
.modal-body{padding:22px}
.modal-footer{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* ── Charts ──────────────────────────────────────────────────── */
.chart-wrap{position:relative;height:220px}

/* ── Progress bar ────────────────────────────────────────────── */
.progress{background:rgba(255,255,255,.08);border-radius:10px;height:8px;overflow:hidden}
.progress-bar{height:100%;border-radius:10px;transition:.6s}
.progress-bar.green {background:var(--success)}
.progress-bar.blue  {background:var(--primary)}
.progress-bar.yellow{background:var(--warning)}
.progress-bar.red   {background:var(--danger)}

/* ── Two-col page layout ─────────────────────────────────────── */
.row{display:flex;gap:20px;margin-bottom:20px}
.row .col-6{flex:1;min-width:0}
.row .col-4{flex:0 0 33.33%;min-width:0}
.row .col-8{flex:0 0 66.67%;min-width:0}

/* ── Filter bar ──────────────────────────────────────────────── */
.filter-bar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--border);
}
.search-input{
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  border-radius:7px;padding:7px 12px;color:var(--text);flex:1;min-width:180px;
}
.search-input:focus{outline:none;border-color:var(--primary)}
.search-input::placeholder{color:var(--text2)}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state{text-align:center;padding:40px 20px;color:var(--text2)}
.empty-state .empty-icon{font-size:48px;margin-bottom:12px}
.empty-state p{font-size:14px}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

/* ── Responsive ──────────────────────────────────────────────── */

/* Tablet (769px - 1024px) */
@media(max-width:1024px){
  :root{--sidebar-w:200px}
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .row .col-4{flex:0 0 40%}
  .row .col-8{flex:0 0 60%}
  .content{padding:16px 18px}
  table.crm-table th,table.crm-table td{padding:8px 10px}
}

/* Móvil (≤768px) */
@media(max-width:768px){
  :root{--sidebar-w:260px}

  /* Sidebar: oculto por defecto, slide-in con botón hamburguesa */
  .sidebar{
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.5);
    z-index:200;
  }
  .sidebar.open{transform:translateX(0)}

  /* Overlay detrás del sidebar */
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199;
  }
  .sidebar-overlay.show{display:block}

  .main{margin-left:0}
  .content{padding:12px 14px}

  /* Topbar en móvil */
  .topbar{padding:10px 14px;gap:8px}
  .topbar-title{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-actions{flex-shrink:0}
  .topbar-actions .btn-sm span{display:none} /* ocultar texto en botones topbar */

  /* KPIs: 2 columnas en móvil */
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi-card .kpi-val{font-size:20px}
  .kpi-card .kpi-sub{font-size:10px}

  /* Columnas: stack vertical */
  .row{flex-direction:column;gap:12px}
  .row .col-4,.row .col-6,.row .col-8{flex:1 1 100%;min-width:0}

  /* Grids de formularios */
  .form-grid.cols-2,.form-grid.cols-3{grid-template-columns:1fr}

  /* Tablas: scroll horizontal */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.crm-table{min-width:540px}
  table.crm-table th,table.crm-table td{
    padding:8px 10px;font-size:12px;
    white-space:nowrap;
  }

  /* Modales: ancho completo */
  .modal{max-width:100%!important;margin:0;border-radius:12px 12px 0 0;
         position:fixed;bottom:0;left:0;right:0;max-height:95vh}
  .modal-overlay{align-items:flex-end;padding:0}

  /* Panel body padding reducido */
  .panel-body{padding:14px}
  .filter-bar{padding:10px 14px;gap:8px}
  .filter-bar .search-input{min-width:0;flex:1}

  /* Sidebar footer */
  .sidebar-footer{padding:10px 14px}
  .sidebar-footer .user-name{font-size:12px}

  /* Botones en tablas: solo icono en móvil */
  .btn-sm{padding:5px 8px;font-size:12px}

  /* Logo sidebar: ajustar tamaño */
  .sidebar-brand img{max-width:120px}
  .sidebar-brand{padding:14px 14px 12px}

  /* Nav items más compactos */
  .nav-item{padding:10px 16px}
  .nav-section{padding:8px 16px 4px}

  /* Topbar: botón hamburguesa visible */
  .hamburger-btn{display:flex!important}

  /* Ocultar texto del botón Admin GPS en móvil */
  .admin-gps-btn .btn-label{display:none}
}

/* Extra pequeño (≤480px) */
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi-card{padding:12px 14px}
  .kpi-card .kpi-val{font-size:18px}
  .topbar-title{font-size:14px}
}

/* Desktop: hamburguesa oculto */
.hamburger-btn{display:none;background:none;border:none;color:var(--text);
               font-size:22px;cursor:pointer;padding:4px 6px;align-items:center}

/* ── Misc utils ──────────────────────────────────────────────── */
.text-success{color:var(--success)!important}
.text-danger {color:var(--danger)!important}
.text-warning{color:var(--warning)!important}
.text-muted  {color:var(--text2)!important}
.text-right  {text-align:right}
.text-center {text-align:center}
.fw-bold     {font-weight:700}
.fs-sm       {font-size:12px}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:20px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:20px}
.d-flex{display:flex}.align-center{align-items:center}.gap-1{gap:6px}.gap-2{gap:12px}
.flex-1{flex:1}.w-100{width:100%}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Tooltip ─────────────────────────────────────────────────── */
[data-tip]{position:relative}
[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:#1e2f42;color:var(--text);
  padding:5px 10px;border-radius:5px;font-size:11px;white-space:nowrap;
  border:1px solid var(--border);z-index:999;pointer-events:none;
}

/* ── Number display ──────────────────────────────────────────── */
.num-big{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.num-green{color:var(--success)}
.num-red  {color:var(--danger)}
.num-yellow{color:var(--warning)}

/* ── Celdas de acción en tablas — evitar overflow ────────── */
table.crm-table td:last-child {
  white-space: nowrap;
}
table.crm-table td .d-flex,
table.crm-table td > div[style*="display:flex"] {
  flex-wrap: nowrap;
  overflow: visible;
}
/* Contenedor de botones en configuración */
.panel-body .d-flex,
.panel-head .d-flex {
  flex-wrap: wrap;
}
/* Botones pequeños: no colapsar */
.btn-sm { flex-shrink: 0; }

/* ── Select placeholder styling ─────────────────────────── */
select.form-control option[disabled][selected] {
  color: var(--text2);
  display: none;
}
/* Cuando tiene valor real seleccionado */
select.form-control:not([data-empty]) {
  color: var(--text);
}
/* Fix: primer option deshabilitado actúa como placeholder */
select.form-control option[disabled] {
  color: var(--text2);
  font-style: italic;
}
/* Código pre-formateado inline */
code {
  background: rgba(255,255,255,.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent);
  font-family: monospace;
}

/* ── Device Search (buscador desplegable) ────────────────── */
.device-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--dark2);
  border: 1px solid var(--primary);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.device-dropdown.show { display: block; }
.device-option {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  font-size: 13px;
  transition: background .12s;
}
.device-option:last-child { border-bottom: none; }
.device-option:hover { background: rgba(26,111,196,.2); }
.device-no-results {
  padding: 14px;
  text-align: center;
  color: var(--text2);
  font-size: 13px;
}
.device-search-input { padding-right: 32px !important; }