/*
  Kandu · UX upgrade (touch-first)
  - Botones grandes (una mano)
  - Colores por estado (verde/amarillo/rojo)
  - Jerarquía visual: menos texto, más acción
*/

body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#020617;color:#e5e7eb;}
a{color:#22c55e;text-decoration:none;}a:hover{text-decoration:underline;}
.layout{display:flex;min-height:100vh;}
.sidebar{width:230px;background:#020617;border-right:1px solid rgba(148,163,184,.3);padding:16px 14px;display:flex;flex-direction:column;}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.brand-logo{width:42px;height:42px;border-radius:999px;background:radial-gradient(circle at 20% 20%,#22d3ee,#1d4ed8);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;}
.brand-text{display:flex;flex-direction:column;}
.brand-title{font-size:12px;font-weight:600;}
.brand-subtitle{font-size:12px;color:#9ca3af;}
.menu{display:flex;flex-direction:column;gap:6px;}
.menu-item{border:none;background:transparent;color:#e5e7eb;text-align:left;padding:12px 12px;border-radius:12px;cursor:pointer;font-size:14px;line-height:1.1;}
.menu-item span.emoji{margin-right:8px;}
.menu-item:hover{background:rgba(148,163,184,.18);}
.menu-item.active{background:linear-gradient(90deg,#22c55e,#16a34a);color:#fff;}
.main{flex:1;padding:18px 22px 24px 22px;display:flex;flex-direction:column;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.topbar-left h1{margin:0;font-size:20px;}
.topbar-left p{margin:2px 0 0 0;font-size:12px;color:#9ca3af;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.chip{padding:4px 10px;border-radius:999px;font-size:12px;}
.chip-outline{border:1px solid #4b5563;}
.chip-success{background:#16a34a;}
.btn{
  border-radius:14px;
  border:none;
  background:#1f2937;
  color:#e5e7eb;
  padding:12px 14px;
  font-size:14px;
  font-weight:800;
  min-height:52px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(34,197,94,.22);}
.btn:disabled{opacity:.65;cursor:not-allowed;}
.btn-primary{background:linear-gradient(90deg,#22c55e,#16a34a);}
.btn-outline{background:transparent;border:1px solid rgba(148,163,184,.45);}
.btn-sm{padding:4px 10px;font-size:12px;}
.btn-sm{min-height:34px;border-radius:999px;gap:6px;}
.btn-block{width:100%;}
.btn-lg{min-height:60px;font-size:14px;border-radius:16px;}
.btn:hover{opacity:.9;}

/* Variantes */
.btn-danger{background:rgba(248,113,113,.18);border:1px solid rgba(248,113,113,.35);color:#f87171;}
.btn-success{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:#4ade80;}
.btn-warning{background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.45);color:#fde68a;}
.btn-success:disabled{opacity:.85;cursor:default;}
.view{display:none;}
.view.active{display:block;}
.cards-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.semaforo{display:flex;flex-direction:column;gap:10px;}
.semaforo-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:rgba(2,6,23,.55);}
.semaforo-left{display:flex;align-items:center;gap:10px;}
.semaforo-dot{width:10px;height:10px;border-radius:999px;background:#6b7280;box-shadow:0 0 0 3px rgba(107,114,128,.12);}
.semaforo-dot.green{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15);}
.semaforo-dot.yellow{background:#facc15;box-shadow:0 0 0 3px rgba(250,204,21,.12);}
.semaforo-dot.red{background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.12);}
.muted{color:#6b7280;margin-left:6px;}
.mini-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.segmented{display:flex;gap:6px;}
.segmented-btn{border-radius:14px;border:1px solid rgba(148,163,184,.25);background:transparent;color:#e5e7eb;padding:10px 14px;font-size:12px;min-height:44px;cursor:pointer;}
.segmented-btn.active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#4ade80;}
.badge.bronce{background:rgba(156,163,175,.18);color:#e5e7eb;border:1px solid rgba(156,163,175,.25);}
.badge.plata{background:rgba(96,165,250,.12);color:#60a5fa;border:1px solid rgba(96,165,250,.25);}
.badge.oro{background:rgba(250,204,21,.12);color:#facc15;border:1px solid rgba(250,204,21,.25);}
.card{background:#020617;border-radius:16px;padding:14px 16px;box-shadow:0 18px 40px rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.25);}
.kpi{display:flex;flex-direction:column;gap:2px;}
.card-label{font-size:12px;color:#9ca3af;}
.card-value{font-size:24px;font-weight:600;}
.card-caption{font-size:12px;color:#6b7280;}
.tip{margin-top:10px;font-size:12px;color:#9ca3af;}
.table{width:100%;border-collapse:collapse;font-size:12px;}
.table th,.table td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(55,65,81,.7);}
.table td.right{white-space:normal;}
.table td.right .btn{min-height:44px;font-size:12px;padding:10px 12px;border-radius:14px;margin:2px 4px 2px 0;}
.table th{color:#9ca3af;font-weight:500;font-size:12px;}
.badge{padding:2px 8px;border-radius:999px;font-size:11px;}
.badge.ok{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.35);}
.badge.warn{background:rgba(245,158,11,.18);color:#fde68a;border:1px solid rgba(245,158,11,.45);}
.badge.danger{background:rgba(239,68,68,.18);color:#fecaca;border:1px solid rgba(239,68,68,.45);}
.badge-azul{background:rgba(59,130,246,.15);color:#60a5fa;}
.badge-verde{background:rgba(34,197,94,.15);color:#4ade80;}
.badge-amarillo{background:rgba(250,204,21,.12);color:#facc15;}
.badge-rojo{background:rgba(248,113,113,.12);color:#f87171;}
.badge-n1{background:rgba(234,179,8,.15);color:#facc15;}
.badge-n2{background:rgba(249,115,22,.15);color:#fb923c;}
.badge-n3{background:rgba(248,113,113,.15);color:#f87171;}
.form-card{margin-bottom:14px;}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
label{display:flex;flex-direction:column;font-size:12px;gap:4px;}
input,select,textarea{background:#020617;border-radius:12px;border:1px solid rgba(148,163,184,.4);padding:12px 12px;color:#e5e7eb;font-size:14px;min-height:44px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:#22c55e;}
textarea{resize:vertical;}
.input{min-width:200px;}
.form-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.form-actions .btn{flex:1;min-width:160px;}
@media (max-width:600px){
  .form-actions{flex-direction:column;}
  .form-actions .btn{width:100%;}
}
.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.list{padding-left:18px;margin:0;}
.list li{margin-bottom:4px;}
.login-page{display:flex;min-height:100vh;align-items:center;justify-content:center;background:#020617;}
.login-card{background:#020617;border-radius:18px;padding:22px 24px 20px 24px;width:100%;max-width:380px;border:1px solid rgba(148,163,184,.4);box-shadow:0 18px 40px rgba(15,23,42,.9);}
.login-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.login-header h1{margin:0;font-size:16px;}
.login-header p{margin:0;font-size:12px;color:#9ca3af;}
.login-footer{margin-top:10px;font-size:11px;color:#9ca3af;}
.error{margin-top:6px;font-size:12px;color:#f97316;}
.rep-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.rep-header h1{margin:0;font-size:16px;}
.rep-header p{margin:2px 0 0 0;font-size:12px;color:#9ca3af;}
.badge-small{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(34,197,94,.1);color:#4ade80;}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.modal-inner{
  background:#0f172a;
  padding:24px;
  border-radius:16px;
  max-width:360px;
  width:90%;
  text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
#qr-container{
  margin:16px auto;
}
#qr-container img{
  max-width:260px;
  border-radius:12px;
}
.badge-n1{
  background:#f59e0b;
  color:#020617;
}
.badge-n2{
  background:#ef4444;
  color:white;
}


.repartidor-form{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(15,23,42,0.6);
}
.repartidor-form h4{
  margin:0 0 8px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.form-group input{
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,0.4);
  background:#020617;
  color:#e5e7eb;
}
.form-group-button{
  align-self:end;
}
.form-group-button .btn{
  width:100%;
}
@media (max-width:900px){
  .form-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Mobile: navegación rápida y botones cómodos */
@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{
    width:auto;
    border-right:none;
    border-bottom:1px solid rgba(148,163,184,.25);
    padding:12px 12px;
  }
  .brand{margin-bottom:12px;}
  .menu{flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:6px;}
  .menu-item{white-space:nowrap;padding:12px 12px;border-radius:14px;}
  .main{padding:12px 12px 20px;}
  .cards-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-2{grid-template-columns:1fr;}
}



/* Estados de ciclo de consumo */
.badge-normal{
  background:rgba(34,197,94,.12);
  color:#4ade80;
}
.badge-por-vencer{
  background:rgba(250,204,21,.12);
  color:#facc15;
}
.badge-critico{
  background:rgba(248,113,113,.15);
  color:#f87171;
}
.badge-perdido{
  background:rgba(148,163,184,.18);
  color:#e5e7eb;
}


/* Banner grande para mostrar el nombre del cliente en Logística de despacho */
.cliente-banner{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(34,197,94,.15);
  border:1px solid #22c55e;
  color:#bbf7d0;
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.cliente-banner-label{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.cliente-banner-nombre{
  font-weight:700;
  font-size:14px;
}
.cliente-banner-id{
  color:#a7f3d0;
  font-size:12px;
}


.view-inner{min-height:75vh;}


/* Badges estados (alertas) */
.badge-success{background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.5);color:#a7f3d0;}
.badge-warning{background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.5);color:#fde68a;}
.badge-orange{background:rgba(249,115,22,.18);border:1px solid rgba(249,115,22,.55);color:#fed7aa;}
.badge-danger{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.5);color:#fecaca;}
.badge-dark{background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.45);color:#e2e8f0;}

.badge-morado{ background:#6c5ce7; color:#fff; }
.badge-rojo{ background:#c0392b; color:#fff; }
/* Kandu: asegurar clic en menú */
.sidebar, .menu, .menu-item, .menu * { pointer-events: auto !important; }

/* vistas: solo la activa recibe clic y se muestra */
.view { display:none; pointer-events:none; }
.view.active { display:block; pointer-events:auto; }


/* Botones verdes (inicio/finalizar) */
.chip-green{
  background:#22c55e;
  border:1px solid rgba(34,197,94,.45);
  color:#06260f;
  font-weight:800;
}
.chip-green:hover{filter:brightness(1.05);}
.chip-green:active{transform:translateY(1px);}


/* --- Kandu: semáforo visual para "Clientes por contactar" --- */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(0,0,0,.08);
  white-space:nowrap;
}
.badge-green{ background:#e8fff0; color:#0f7a2a; }
.badge-yellow{ background:#fff7db; color:#8a6a00; }
.badge-red{ background:#ffe8e8; color:#9b111e; }
.badge-gray{ background:#f2f2f2; color:#555; }

.table td .btn.btn-sm{
  padding:6px 10px;
  border-radius:10px;
  font-weight:800;
}


/* Inline field alerts (validación final) */
.field-alert{
  margin-top:6px;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:#fecaca;
}


/* ====== STATUS CHIP ====== */
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  white-space:nowrap;
}

.status-dot{
  width:10px; height:10px;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

.status-note{
  margin-top:6px;
  font-size:12px;
  opacity:.82;
  line-height:1.2;
}

.status-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  opacity:.92;
}

/* ====== VARIANTS ====== */
.st-critical{ background:rgba(255, 58, 58, .16); border-color:rgba(255,58,58,.35); }
.st-critical .status-dot{ background:#ff3a3a; box-shadow:0 0 0 3px rgba(255,58,58,.18); }

.st-urgent{ background:rgba(255, 145, 0, .16); border-color:rgba(255,145,0,.35); }
.st-urgent .status-dot{ background:#ff9100; box-shadow:0 0 0 3px rgba(255,145,0,.18); }

.st-warning{ background:rgba(255, 214, 0, .14); border-color:rgba(255,214,0,.35); }
.st-warning .status-dot{ background:#ffd600; box-shadow:0 0 0 3px rgba(255,214,0,.18); }

.st-ok{ background:rgba(0, 200, 83, .14); border-color:rgba(0,200,83,.35); }
.st-ok .status-dot{ background:#00c853; box-shadow:0 0 0 3px rgba(0,200,83,.18); }

.st-learning{ background:rgba(123, 97, 255, .14); border-color:rgba(123,97,255,.35); }
.st-learning .status-dot{ background:#7b61ff; box-shadow:0 0 0 3px rgba(123,97,255,.18); }

tr.row-critical{
  outline:1px solid rgba(255,58,58,.25);
  background:rgba(255,58,58,.05);
}