/* ============================================================
   FIBRA HOGAR — Clean Look (estilo insumos.html aplicado global)
   Override agresivo para dashboards: white cards, sin gradientes
   recargados, sin serif, sin colores fuertes en topbar.
   Carga DESPUÉS de theme.css y CSS inline de cada página.
   ============================================================ */

/* ===== TOPBAR: minimalista blanco con blur (estilo insumos) ===== */
.topbar{
  background: rgba(255,255,255,0.86) !important;
  color: #0a0a0b !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(15,15,16,0.06) !important;
}
.topbar::after{ display:none !important; }
.topbar-inner{ padding: 12px 20px !important; }
.topbar h1{
  font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #0a0a0b !important;
}
.topbar h1 .gold,
.topbar h1 .grad{
  background: none !important;
  -webkit-text-fill-color: #5f5f66 !important;
  color: #5f5f66 !important;
  font-weight: 500 !important;
}
.topbar .tag{
  background: #f3f4f6 !important;
  color: #5f5f66 !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.06em !important;
}
.topbar .pill{
  background: #fafafa !important;
  color: #5f5f66 !important;
  border: 1px solid rgba(15,15,16,0.06) !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.topbar .pill b{ color: #0a0a0b !important; font-weight: 600 !important; }
.topbar .pill .live,
.topbar .pill .dot{
  background: #1f7a48 !important;
  box-shadow: 0 0 6px rgba(31,122,72,0.5) !important;
}
.topbar .mark{
  background: linear-gradient(135deg,#1a1a1c,#2a2a2d) !important;
  width: 34px !important; height: 34px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
.topbar .mark span{
  background: linear-gradient(135deg,#d4af66,#b08a3e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 11px !important;
}
.btn-logout{
  background: #fff !important;
  color: #0a0a0b !important;
  border: 1px solid rgba(15,15,16,0.08) !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.btn-logout:hover{
  background: #fafafa !important;
  color: #0a0a0b !important;
  border-color: rgba(15,15,16,0.16) !important;
}
.btn-refresh,
.btn-portal{
  background: #0f0f10 !important;
  color: #fff !important;
  border: 1px solid #0f0f10 !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.btn-refresh:hover, .btn-portal:hover{
  background: #1c1c1f !important;
  color: #fff !important;
}

/* ===== HERO (gerencia.html) — limpio ===== */
.hero{
  background: #fafafa !important;
  color: #0a0a0b !important;
  padding: 36px 24px 50px !important;
}
.hero::before, .hero::after{ display:none !important; }
.hero .greeting{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  color: #9a9aa1 !important;
  text-transform: uppercase !important;
}
.hero .greeting .dot{
  background: #1f7a48 !important;
  box-shadow: 0 0 6px rgba(31,122,72,0.5) !important;
}
.hero h2.title{
  font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: #0a0a0b !important;
  line-height: 1.15 !important;
}
.hero h2.title .grad{
  background: none !important;
  -webkit-text-fill-color: #5f5f66 !important;
  color: #5f5f66 !important;
  font-weight: 500 !important;
}
.hero .subtitle{
  font-size: 13.5px !important;
  color: #5f5f66 !important;
  max-width: 640px !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}
.hero .date-tag{
  background: #fff !important;
  color: #5f5f66 !important;
  border: 1px solid rgba(15,15,16,0.08) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  margin-top: 12px !important;
}

/* ===== H2 sección — sin la barra dorada ===== */
.h2,
.kpipreview h2,
.h2::before{
  background: none !important;
}
.h2{
  font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: #9a9aa1 !important;
  text-transform: uppercase !important;
  margin: 24px 0 12px !important;
  padding: 0 !important;
}
.h2::before{
  content: "" !important;
  display: inline-block !important;
  width: 5px; height: 5px;
  border-radius: 50% !important;
  background: #e87722 !important;
  margin-right: 8px;
  vertical-align: middle;
}

/* ===== KPIs — minimalistas, transparentes, semánticos ===== */
.kpi{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.06) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.kpi::before{ display:none !important; }
.kpi .label{
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: #9a9aa1 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.kpi .value{
  font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  color: #0a0a0b !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 4px !important;
  line-height: 1.05 !important;
}
.kpi .hint{
  font-size: 10.5px !important;
  color: #9a9aa1 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}
.kpi .pct{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #5f5f66 !important;
}

/* === Tint semántico transparente por tipo de KPI === */
/* Faltantes / errores = rojo */
.kpi.k-falt,
.kpi.k-pick.danger,
.kpi[data-sem="danger"]{
  background: rgba(220, 38, 38, 0.04) !important;
  border-color: rgba(220, 38, 38, 0.18) !important;
}
.kpi.k-falt .value,
.kpi[data-sem="danger"] .value{ color: #dc2626 !important; }

/* En proceso / activo / recogidas = naranja */
.kpi.k-proc,
.kpi.k-curso,
.kpi.k-pick,
.kpi[data-sem="proc"]{
  background: rgba(234, 88, 12, 0.04) !important;
  border-color: rgba(234, 88, 12, 0.18) !important;
}
.kpi.k-proc .value,
.kpi.k-curso .value,
.kpi.k-pick .value,
.kpi[data-sem="proc"] .value{ color: #ea580c !important; }

/* Esperando / pendiente = ámbar */
.kpi.k-pend,
.kpi[data-sem="warn"]{
  background: rgba(245, 158, 11, 0.04) !important;
  border-color: rgba(245, 158, 11, 0.18) !important;
}
.kpi.k-pend .value,
.kpi[data-sem="warn"] .value{ color: #c2710a !important; }

/* Listo intermedio = azul */
.kpi.k-listo,
.kpi[data-sem="ready"]{
  background: rgba(8, 145, 178, 0.04) !important;
  border-color: rgba(8, 145, 178, 0.18) !important;
}
.kpi.k-listo .value,
.kpi[data-sem="ready"] .value{ color: #0891b2 !important; }

/* Terminado / éxito = verde */
.kpi.k-deliv,
.kpi.k-fin,
.kpi.k-done,
.kpi[data-sem="success"]{
  background: rgba(5, 150, 105, 0.04) !important;
  border-color: rgba(5, 150, 105, 0.18) !important;
}
.kpi.k-deliv .value,
.kpi.k-fin .value,
.kpi.k-done .value,
.kpi[data-sem="success"] .value{ color: #059669 !important; }

/* Verificado / info = azul oscuro */
.kpi.k-verif{
  background: rgba(31, 77, 138, 0.04) !important;
  border-color: rgba(31, 77, 138, 0.18) !important;
}
.kpi.k-verif .value{ color: #1f4d8a !important; }

/* Cumplimiento — mantener neutro pero destacado */
.kpi.k-cump{
  background: #fafafa !important;
  border-color: rgba(15,15,16,0.10) !important;
}

/* KPIs sueltos (sin clase k-*) — neutro */
.kpi:not([class*="k-"]){
  background: #fafafa !important;
}

/* ===== Botones de acción de fila (opbtn) — iconos NEGROS minimalistas BIEN VISIBLES ===== */
/* Selector con MUY ALTA especificidad para ganarle a estilos inline antiguos */
button.opbtn,
.opbtn{
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15,15,16,0.10) !important;
  background: #ffffff !important;
  color: #0a0a0b !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  margin-left: 4px !important;
  transition: background .12s, border-color .12s, color .12s !important;
  font-size: 0 !important; /* mata cualquier texto residual */
}
/* SVG bien visible (negro, grande) — fuerza color en TODO el contenido */
button.opbtn svg,
.opbtn svg,
button.opbtn svg *,
.opbtn svg *{
  color: #0a0a0b !important;
  stroke: #0a0a0b !important;
  fill: none !important;
}
button.opbtn svg,
.opbtn svg{
  width: 18px !important; height: 18px !important;
  display: block !important;
}
/* Algunas estrellas/iconos usan fill (estrella verificado) */
button.opbtn[data-act="verif"] svg path,
.opbtn[data-act="verif"] svg path{
  fill: #0a0a0b !important;
  stroke: #0a0a0b !important;
}

button.opbtn:hover,
.opbtn:hover{ background: #f3f4f6 !important; border-color: rgba(15,15,16,0.22) !important; }

/* Color solo en hover, según función */
.opbtn.warn:hover{ background: rgba(220,38,38,0.08) !important; border-color: rgba(220,38,38,0.40) !important; }
.opbtn.warn:hover svg, .opbtn.warn:hover svg *{ color: #dc2626 !important; stroke: #dc2626 !important; }
.opbtn.ok:hover{ background: rgba(5,150,105,0.08) !important; border-color: rgba(5,150,105,0.40) !important; }
.opbtn.ok:hover svg, .opbtn.ok:hover svg *{ color: #059669 !important; stroke: #059669 !important; }
.opbtn.gold:hover{ background: rgba(176,138,62,0.10) !important; border-color: rgba(176,138,62,0.40) !important; }
.opbtn.gold:hover svg, .opbtn.gold:hover svg *{ color: #b08a3e !important; stroke: #b08a3e !important; }
.opbtn.gold:hover svg[data-act="verif"] *,
.opbtn[data-act="verif"]:hover svg *{ fill: #b08a3e !important; }
.opbtn.info:hover{ background: rgba(31,77,138,0.08) !important; border-color: rgba(31,77,138,0.40) !important; }
.opbtn.info:hover svg, .opbtn.info:hover svg *{ color: #1f4d8a !important; stroke: #1f4d8a !important; }

/* Badge verificado SI/NO también limpio */
.badge.b-v-yes{ background: rgba(5,150,105,0.10) !important; color: #059669 !important; border: none !important; font-weight: 600 !important; padding: 3px 9px !important; border-radius: 999px !important; font-size: 10.5px !important; }
.badge.b-v-no{ background: rgba(15,15,16,0.05) !important; color: #9a9aa1 !important; border: none !important; font-weight: 500 !important; padding: 3px 9px !important; border-radius: 999px !important; font-size: 10.5px !important; }

/* ============================================================
   CONDUCTOR — look insumos.html
   ============================================================ */

/* Topbar minimalist con blur — deja espacio a la izquierda para el hamburguesa fijo */
body:has(#topName) .topbar,
.topbar:has(.titulo){
  background: rgba(255,255,255,0.86) !important;
  color: #0a0a0b !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(15,15,16,0.06) !important;
  padding: 12px 16px 12px 64px !important;  /* 64px = 14 (offset) + 38 (botón) + 12 (gap) */
}
/* Cuando hay hamburguesa, el FH mark redundante se oculta */
body:has(#topName) .topbar > .mark,
.topbar:has(.titulo) > .mark{
  display: none !important;
}
.topbar .titulo{ flex:1; min-width:0; }
.topbar .titulo h1{
  margin:0 !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  letter-spacing:-0.015em !important;
  color:#0a0a0b !important;
  line-height:1.2 !important;
}
.topbar .titulo .sub{
  font-size:11.5px !important;
  color:#5f5f66 !important;
  margin-top:1px !important;
  letter-spacing:0.02em !important;
  font-weight:500 !important;
}

/* Botones de iconos en topbar (calendar, salir) */
.topbar .ic-btn{
  width:38px; height:38px;
  display:inline-grid; place-items:center;
  border:1px solid rgba(15,15,16,0.08);
  border-radius:10px;
  color:#0f0f10; background:#fff;
  transition:background .12s, border-color .12s;
  padding:0;
}
.topbar .ic-btn svg{ width:18px; height:18px; color:#0a0a0b; stroke:#0a0a0b; }
.topbar .ic-btn:hover{ background:#fafafa; border-color:rgba(15,15,16,0.16); }

/* Hello greeting (block superior con "Buenos días, X") */
.hello{
  margin: 16px 14px 14px;
  padding: 0 2px;
}
.hello .eyebrow{
  font-size:10.5px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color:#9a9aa1;
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:4px;
}
.hello .eyebrow .dot{
  width:5px; height:5px; border-radius:50%;
  background:#1f7a48;
  box-shadow:0 0 6px rgba(31,122,72,0.5);
}
.hello h2{
  margin:0; font-size:22px; font-weight:600;
  letter-spacing:-0.025em; color:#0a0a0b;
  line-height:1.2;
}
.hello .sub{
  font-size:13px; color:#5f5f66; margin-top:2px;
}

/* KPI bar del conductor (.k en vez de .kpi) — IDÉNTICO a Yury */
.kpibar{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:8px !important;
  padding:0 14px 14px !important;
}
.kpibar .k{
  background:#fff !important;
  border:1px solid rgba(15,15,16,0.07) !important;
  border-radius:12px !important;
  padding:22px 22px 18px !important;
  position:relative !important;
  text-align:left !important;
  overflow:hidden !important;
  min-height:0 !important;
}
.kpibar .k::before{ display:none !important; }
.kpibar .k::after{
  content:"";
  position:absolute;
  top:14px; right:14px;
  width:7px; height:7px;
  border-radius:50%;
  background:#e7e5e0;
}
.kpibar .k.ent::after{ background:#059669; }   /* verde — entregados */
.kpibar .k.pen::after{ background:#ea580c; }   /* naranja — pendientes (por hacer) */
.kpibar .k.no::after{  background:#dc2626; }   /* rojo — no entregados */

.kpibar .k .v{
  font-size:44px !important;
  font-weight:600 !important;
  letter-spacing:-0.045em !important;
  line-height:1 !important;
  color:#0a0a0b !important;
  font-variant-numeric:tabular-nums !important;
}
.kpibar .k .l{
  font-size:11px !important;
  color:#9a9aa1 !important;
  text-transform:uppercase !important;
  letter-spacing:0.08em !important;
  font-weight:600 !important;
  margin-top:12px !important;
}

/* Mobile: si la pantalla es chica, achicar números */
@media (max-width: 480px){
  .kpibar .k{ padding: 16px 16px 14px !important; }
  .kpibar .k .v{ font-size: 32px !important; }
  .kpibar .k .l{ font-size: 10px !important; margin-top: 8px !important; }
}

/* Tabs iOS segmented */
nav.tabs#tabs{
  display:flex !important; gap:2px !important;
  background:#f3f4f6 !important;
  border:1px solid rgba(15,15,16,0.06) !important;
  border-radius:10px !important;
  padding:3px !important;
  margin: 0 14px 14px !important;
  overflow:hidden !important;
  width: calc(100% - 28px) !important;
}
nav.tabs#tabs .tab{
  flex:1 !important; min-width:0 !important;
  padding:8px 6px !important;
  background:transparent !important; border:none !important;
  font-size:12.5px !important; font-weight:600 !important;
  color:#5f5f66 !important;
  border-radius:7px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important;
  letter-spacing:-0.005em !important;
  transition:background .15s, color .15s !important;
  white-space:nowrap !important;
}
nav.tabs#tabs .tab.active{
  background:#fff !important;
  color:#0a0a0b !important;
  box-shadow:0 1px 2px rgba(15,15,16,0.06) !important;
}
nav.tabs#tabs .tab .c{
  font-size:10.5px !important;
  font-weight:600 !important;
  background:rgba(15,15,16,0.06) !important;
  color:#5f5f66 !important;
  padding:1px 6px !important;
  border-radius:999px !important;
  font-variant-numeric:tabular-nums !important;
}
nav.tabs#tabs .tab.active .c{
  background:#0f0f10 !important;
  color:#fff !important;
}

/* ============================================================
   CONDUCTOR — Cards de despacho pastel minimalistas
   ============================================================ */

/* Card base — sin sombra pesada, borde sutil */
.list .card{
  background: #ffffff !important;
  border: 1px solid rgba(15,15,16,0.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px rgba(15,15,16,0.02) !important;
  position: relative !important;
  transition: border-color .15s, box-shadow .15s !important;
}

/* Estado: en curso — pastel naranja con borde lateral */
.list .card.en-curso{
  background: #ffffff !important;
  border: 1px solid rgba(234,88,12,0.18) !important;
  border-left: 3px solid #ea580c !important;
}

/* Estado: entregado — pastel verde */
.list .card.is-ent{
  background: #ffffff !important;
  border: 1px solid rgba(5,150,105,0.18) !important;
  border-left: 3px solid #059669 !important;
}

/* Estado: no entregado — pastel rojo */
.list .card.is-no{
  background: #ffffff !important;
  border: 1px solid rgba(220,38,38,0.18) !important;
  border-left: 3px solid #dc2626 !important;
}

/* Top row: hora + badge */
.list .card .hora{
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #5f5f66 !important;
  background: #f3f4f6 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Badges de estado — pastel suaves */
.list .card .badge{
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.list .card .badge.b-pend{
  background: rgba(245,158,11,0.12) !important;
  color: #b45309 !important;
}
.list .card .badge.b-ent{
  background: rgba(5,150,105,0.12) !important;
  color: #047857 !important;
}
.list .card .badge.b-no{
  background: rgba(220,38,38,0.12) !important;
  color: #b91c1c !important;
}
.list .card .badge.b-curso{
  background: rgba(234,88,12,0.12) !important;
  color: #c2410c !important;
  animation: none !important;
}
.list .card .badge.b-curso::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ea580c;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }

/* Cliente nombre */
.list .card .cli{
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #0a0a0b !important;
  margin: 4px 0 4px !important;
  text-transform: uppercase !important;
}

/* Dirección */
.list .card .dir{
  font-size: 13px !important;
  color: #5f5f66 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}

/* Meta info (factura, conductor, etc.) */
.list .card .meta{
  font-size: 12px !important;
  color: #9a9aa1 !important;
  margin-bottom: 10px !important;
}
.list .card .meta b{
  color: #0a0a0b !important;
  font-weight: 600 !important;
}

/* Banner "Entrega en curso · Iniciada · Hace X min" — pastel naranja sin punteado */
.list .card .tiempo-info{
  background: rgba(234,88,12,0.06) !important;
  border: 1px solid rgba(234,88,12,0.18) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  color: #9a3412 !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
}
.list .card .tiempo-info::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ea580c;
  flex-shrink: 0;
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* Banner "Recibió" — pastel verde */
.list .card .recibe{
  background: rgba(5,150,105,0.06) !important;
  border: 1px solid rgba(5,150,105,0.18) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  color: #047857 !important;
  margin-bottom: 10px !important;
}
.list .card .recibe b{
  display: block !important;
  font-size: 10px !important;
  color: #059669 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 2px !important;
  font-weight: 600 !important;
}

/* Banner "No entregado · motivo" — pastel rojo */
.list .card .no-ent{
  background: rgba(220,38,38,0.06) !important;
  border: 1px solid rgba(220,38,38,0.18) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  color: #991b1b !important;
  margin-bottom: 10px !important;
}
.list .card .no-ent b{
  display: block !important;
  font-size: 10px !important;
  color: #dc2626 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 2px !important;
  font-weight: 600 !important;
}

/* ===== BOTONES DE ACCIÓN — pastel sutil ===== */
.list .card .btn-action{
  padding: 12px 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15,15,16,0.10) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: #0a0a0b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background .12s, border-color .12s !important;
}
.list .card .btn-action:active{ transform: translateY(1px); }

/* Iniciar entrega — naranja pastel */
.list .card .btn-action.iniciar{
  background: rgba(234,88,12,0.08) !important;
  color: #c2410c !important;
  border-color: rgba(234,88,12,0.30) !important;
  font-size: 14px !important;
  padding: 14px 12px !important;
}
.list .card .btn-action.iniciar:hover{
  background: rgba(234,88,12,0.14) !important;
  border-color: #ea580c !important;
}

/* Terminar entrega — verde pastel */
.list .card .btn-action.terminar{
  background: rgba(5,150,105,0.08) !important;
  color: #047857 !important;
  border-color: rgba(5,150,105,0.30) !important;
  font-size: 14px !important;
  padding: 14px 12px !important;
}
.list .card .btn-action.terminar:hover{
  background: rgba(5,150,105,0.14) !important;
  border-color: #059669 !important;
}

/* No entregado — rojo pastel */
.list .card .btn-action.no{
  background: #ffffff !important;
  color: #b91c1c !important;
  border-color: rgba(220,38,38,0.25) !important;
}
.list .card .btn-action.no:hover{
  background: rgba(220,38,38,0.06) !important;
  border-color: #dc2626 !important;
}

/* Llamar — gris pastel */
.list .card .btn-action.call{
  background: #fafafa !important;
  color: #5f5f66 !important;
  border-color: rgba(15,15,16,0.10) !important;
}

/* Mapa — gris pastel claro */
.list .card .btn-action.map{
  background: #fafafa !important;
  color: #5f5f66 !important;
  border-color: rgba(15,15,16,0.10) !important;
}

/* Botón Terminar Jornada (fixed bottom) — más sobrio */
.btn-terminar-jornada{
  background: #0f0f10 !important;
  color: #fff !important;
  border: 1px solid #0f0f10 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: 0 8px 24px rgba(15,15,16,0.18) !important;
}

/* ===== CLIENTES SIEMPRE EN MAYÚSCULA ===== */
/* Tabla de despachos y de clientes */
td.cli,
td.cli b,
.cli-item .nom{
  text-transform: uppercase !important;
  letter-spacing: 0.01em;
}
/* Inputs donde se escribe nombre de cliente / quien recibe */
#f_cliente,
#f_recibe,
#c_nombre{
  text-transform: uppercase !important;
}
#f_cliente::placeholder,
#f_recibe::placeholder,
#c_nombre::placeholder{
  text-transform: none !important; /* placeholders en minúscula normal */
}

/* KPIs COMPACT — sin emojis: cuadrito de icono se transforma en punto */
.kpis-compact .kpi{
  padding: 14px 16px !important;
  border-radius: 12px !important;
  display: block !important;
  min-height: auto !important;
}
.kpis-compact .kpi .ico{
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #e7e5e0 !important;
  border: none !important;
  color: transparent !important;
  overflow: hidden !important;
  font-size: 0 !important;
}
.kpis-compact .kpi.k-deliv .ico{ background:#1f7a48 !important; }
.kpis-compact .kpi.k-proc .ico{ background:#e87722 !important; }
.kpis-compact .kpi.k-pend .ico{ background:#a4742b !important; }
.kpis-compact .kpi.k-pick .ico{ background:#e87722 !important; }
.kpis-compact .kpi.k-verif .ico{ background:#1f4d8a !important; }
.kpis-compact .kpi.k-total .ico{ background:#0a0a0b !important; }
.kpis-compact .kpi-body{ display:block !important; }
.kpis-compact .kpi .value{ font-size: 26px !important; margin-top: 8px !important; }

/* ===== Cards generales ===== */
.card{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.card .head{
  background: #fafafa !important;
  border-bottom: 1px solid rgba(15,15,16,0.06) !important;
  padding: 12px 16px !important;
}
.card .head h3{
  font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: #0a0a0b !important;
}
.card .head .meta,
.card .head .count{
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #9a9aa1 !important;
  letter-spacing: 0.02em !important;
}

/* ===== Toolbar / filtros ===== */
.toolbar{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.07) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}
.toolbar label,
.group label{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #9a9aa1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.toolbar input,
.toolbar select,
.group input,
.group select{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.10) !important;
  border-radius: 8px !important;
  padding: 9px 11px !important;
  font-size: 13.5px !important;
}
.toolbar input:focus,
.toolbar select:focus,
.group input:focus,
.group select:focus{
  outline: none !important;
  border-color: #0a0a0b !important;
  box-shadow: 0 0 0 3px rgba(15,15,16,0.08) !important;
}

/* ===== Botones primarios institucionales ===== */
.btn-primary,
.btn.btn-primary{
  background: #0f0f10 !important;
  color: #fff !important;
  border: 1px solid #0f0f10 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.btn-primary:hover{ background: #1c1c1f !important; }

.btn-gold{
  background: #0f0f10 !important;
  color: #fff !important;
  border: 1px solid #0f0f10 !important;
}
.btn-orange{
  background: #e87722 !important;
  color: #fff !important;
  border: 1px solid #e87722 !important;
}
.btn-orange:hover{ background: #d96911 !important; }

/* ===== Tablas ===== */
table{
  background: #fff !important;
  font-size: 13px !important;
}
thead th{
  background: #fafafa !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #5f5f66 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(15,15,16,0.08) !important;
  padding: 10px 14px !important;
}
tbody td{
  padding: 10px 14px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: #0a0a0b !important;
}

/* ===== Tabs estilo iOS segmentado (replicar insumos) ===== */
nav.tabs,
.tabs{
  background: #f3f4f6 !important;
  border: 1px solid rgba(15,15,16,0.06) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.tabs .tab,
nav.tabs .tab{
  background: transparent !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #5f5f66 !important;
  padding: 8px 12px !important;
  transition: background .15s, color .15s !important;
}
.tabs .tab.active{
  background: #fff !important;
  color: #0a0a0b !important;
  border-bottom: none !important;
  box-shadow: 0 1px 2px rgba(15,15,16,0.06) !important;
}
.tabs .tab .count,
.tabs .tab .c{
  background: rgba(15,15,16,0.06) !important;
  color: #5f5f66 !important;
  font-size: 10.5px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.tabs .tab.active .count,
.tabs .tab.active .c{
  background: #0f0f10 !important;
  color: #fff !important;
}

/* ===== Portal Gerencia: cards de módulos ===== */
.mod{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.mod::before,
.mod::after{ display: none !important; }
.mod h3,
.mod .titulo{
  font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #0a0a0b !important;
}
.mod .badge,
.mod .badge-live{
  background: #e3f3ea !important;
  color: #1f7a48 !important;
  border: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

/* ===== KPI ICO (operarios.html) — sin emojis: micro indicador ===== */
.kpi .ico{
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #e7e5e0 !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  border: none !important;
  padding: 0 !important;
}
.kpi.k-total .ico{ background:#0a0a0b !important; }
.kpi.k-deliv .ico{ background:#1f7a48 !important; }
.kpi.k-pend .ico{ background:#a4742b !important; }
.kpi.k-pick .ico{ background:#e87722 !important; }
.kpi.k-verif .ico{ background:#1f4d8a !important; }
.kpi.k-proc .ico{ background:#e87722 !important; }

/* ===== Limpiar serifs heredados ===== */
*{
  font-family: 'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
}
.serif, [class*="serif"]{ font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important; }

/* ===== Banner / alert ===== */
.banner{
  background: #fef9f3 !important;
  border: 1px solid #f5d2a8 !important;
  color: #7a5a1a !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
}

/* ===== Eliminar gradientes en KPIs / botones ===== */
.kpi.k-cump::before,
.toplist .bar .fill,
.kpi[class*="k-"]::before{
  background: none !important;
}

/* ===== CORTE — kanban cards estilo insumos ===== */
.kanban{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 12px !important;
}
.col{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.07) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  min-height: 320px;
}
.col-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 6px 12px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  margin-bottom: 10px !important;
}
.col-head h3{
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #5f5f66 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.col-head h3::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9a9aa1;
}
.col.col-pendiente .col-head h3::before{ background: #1f4d8a; }
.col.col-curso .col-head h3::before{ background: #e87722; }
.col.col-done .col-head h3::before{ background: #1f7a48; }
.col-head .count{
  background: rgba(15,15,16,0.06) !important;
  color: #5f5f66 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-variant-numeric: tabular-nums;
}

/* Cards dentro de las columnas */
.corte-card,
.col-body > div.card-corte{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.07) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  transition: border-color .15s;
}
.col.col-curso .corte-card{
  border-left: 3px solid #e87722 !important;
  background: linear-gradient(180deg,#fef9f3 0%,#fff 100%) !important;
}
.col.col-done .corte-card{
  border-left: 3px solid #1f7a48 !important;
  background: linear-gradient(180deg,#f5fbf7 0%,#fff 100%) !important;
}
.col.col-pendiente .corte-card{
  border-left: 3px solid #1f4d8a !important;
}

/* KPI bar de corte usa .k en vez de .kpi — aplicamos clean look */
.kpibar{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.kpibar .k{
  background: #fff !important;
  border: 1px solid rgba(15,15,16,0.07) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  position: relative !important;
  text-align: left !important;
}
.kpibar .k::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #e7e5e0;
}
.kpibar .k.curso::before{ background: #e87722; }
.kpibar .k.done::before{ background: #1f7a48; }
.kpibar .k.gold::before{ background: #b08a3e; }
.kpibar .k .v{
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  color: #0a0a0b !important;
  margin-top: 4px !important;
  font-variant-numeric: tabular-nums;
}
.kpibar .k .l{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #9a9aa1 !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
}
.kpibar .k .hint{
  font-size: 11px !important;
  color: #9a9aa1 !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
}

/* CORTE topbar overrides para hello + filtro fecha */
.hello h2,
.hello .eyebrow,
.hello .sub{ font-family: 'Inter',ui-sans-serif,system-ui,sans-serif !important; }

/* ============================================================
   CONDUCTOR MOBILE — Más aire (v5)
   Mantiene el mismo lenguaje visual; solo aumenta el espacio
   entre elementos para que no se vea amontonado.
   ============================================================ */

/* Saludo + sub — más respiración antes de los KPIs */
#pantallaDespachos .hello{ margin: 22px 18px 18px !important; }
#pantallaDespachos .hello .eyebrow{ margin-bottom: 8px !important; letter-spacing: 0.22em !important; }
#pantallaDespachos .hello h2{ font-size: 26px !important; letter-spacing: -0.03em !important; line-height: 1.18 !important; }
#pantallaDespachos .hello .sub{ font-size: 14px !important; margin-top: 6px !important; color: #5f5f66 !important; }

/* KPI bar — más gap horizontal y más padding interno */
#pantallaDespachos .kpibar{
  gap: 10px !important;
  padding: 0 16px 20px !important;
}
#pantallaDespachos .kpibar .k{
  padding: 22px 18px 18px !important;
  border-radius: 14px !important;
}
@media (max-width:480px){
  #pantallaDespachos .kpibar{ gap: 10px !important; padding: 0 16px 20px !important; }
  #pantallaDespachos .kpibar .k{ padding: 18px 16px 16px !important; }
  #pantallaDespachos .kpibar .k .v{ font-size: 34px !important; letter-spacing: -0.04em !important; }
  #pantallaDespachos .kpibar .k .l{ font-size: 10.5px !important; margin-top: 10px !important; letter-spacing: 0.07em !important; }
}

/* Tabs segmented — más altura, más legibles, separación con la lista */
#pantallaDespachos nav.tabs#tabs{
  padding: 4px !important;
  margin: 4px 16px 16px !important;
  width: calc(100% - 32px) !important;
  border-radius: 12px !important;
}
#pantallaDespachos nav.tabs#tabs .tab{
  padding: 11px 6px !important;
  font-size: 13px !important;
  gap: 5px !important;
}
#pantallaDespachos nav.tabs#tabs .tab .c{
  padding: 2px 7px !important;
  font-size: 11px !important;
}

/* Lista — más gap entre cards y padding lateral consistente */
#pantallaDespachos .list{
  padding: 4px 16px 140px !important;
  gap: 14px !important;
}

/* Card de despacho — ritmo vertical constante con flex+gap */
#pantallaDespachos .list .card{
  padding: 18px 16px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Top row (hora + badge) — sin margen extra, lo controla el gap del padre */
#pantallaDespachos .list .card .top{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}
#pantallaDespachos .list .card .hora{
  font-size: 12px !important;
  padding: 4px 11px !important;
}
#pantallaDespachos .list .card .badge{
  font-size: 10.5px !important;
  padding: 4px 10px !important;
}

/* Cliente — más prominente */
#pantallaDespachos .list .card .cli{
  font-size: 16px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Dirección — más respiración y contraste */
#pantallaDespachos .list .card .dir{
  font-size: 13.5px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  color: #2b2b2e !important;
}

/* Meta (teléfono + factura) — separación horizontal generosa */
#pantallaDespachos .list .card .meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 16px !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}

/* Banners (tiempo / recibe / no-ent) — margen lo da el gap del padre */
#pantallaDespachos .list .card .tiempo-info,
#pantallaDespachos .list .card .recibe,
#pantallaDespachos .list .card .no-ent{
  margin: 0 !important;
  padding: 10px 12px !important;
}

/* Filas de botones — más gap interno */
#pantallaDespachos .list .card .acts{
  gap: 8px !important;
  margin: 0 !important;
}
#pantallaDespachos .list .card .btn-action{
  padding: 13px 8px !important;
  font-size: 13px !important;
}
#pantallaDespachos .list .card .btn-action.iniciar,
#pantallaDespachos .list .card .btn-action.terminar{
  padding: 15px 12px !important;
  font-size: 14.5px !important;
}

/* Botón fijo Terminar Jornada — separación del último card y safe-area iOS */
.terminar-jornada-wrap{
  padding: 26px 16px calc(18px + env(safe-area-inset-bottom, 0)) !important;
}