/* AAA Mobile Detail 360 — Sistema propio · Identidad oficial AAA + estándar tech Blue
   TEMA CLARO (corrección de marca, Karo 1/11/2026): como la página web de AAA —
   blanco sobre blanco perla, tarjetas blancas, estructura negro técnico y navy,
   acentos azul eléctrico / azul profundo / verde.
   Negro técnico #03080C · Azul eléctrico #087CFF · Verde #63D91C · Navy #071B2B
   Azul profundo #0059D9 · Blanco perla #F4F8FB · Montserrat ExtraBold + Inter */
:root{
  --negro:#03080C; --navy:#071B2B; --navy2:#0A2438; --azul:#087CFF; --azul-prof:#0059D9;
  --verde:#63D91C; --perla:#F4F8FB; --blanco:#FFFFFF;
  --texto:#071B2B; --muted:#4A6076; --linea:#C9D8E4; --linea-suave:#DCE6ED;
  --sombra:0 6px 24px rgba(7,27,43,.07), 0 1px 3px rgba(7,27,43,.05);
  --celeste:#0284C7; --dorado:#B07E10; --teal:#0E9384; --rojo:#D64545;
  --verde-osc:#4E9A06;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--perla);color:var(--texto);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:15px;line-height:1.5}
h1,h2,h3,.titulo{font-family:'Montserrat','Arial Black','Segoe UI',system-ui,sans-serif;font-weight:800;letter-spacing:.2px;color:var(--negro)}
a{color:var(--azul-prof)}
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 48px}

/* Barra superior — blanca, como la estructura de la web */
.topbar{background:var(--blanco);border-bottom:1px solid var(--linea-suave);box-shadow:0 2px 12px rgba(7,27,43,.05)}
.topbar-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar img.logo{height:44px;width:auto;display:block}
.topbar .marca{font-family:'Montserrat','Arial Black',sans-serif;font-weight:800;font-size:17px;line-height:1.1;color:var(--negro)}
.topbar .marca small{display:block;color:var(--muted);font-family:'Inter',sans-serif;font-weight:400;font-size:12px}
.topbar nav{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.topbar nav a.boton-nav,.usuario-chip{border:1px solid var(--linea);border-radius:999px;padding:6px 14px;color:var(--navy);text-decoration:none;font-size:13px;background:var(--blanco)}
.topbar nav a.boton-nav:hover{background:#EAF3FB;border-color:var(--azul)}
.topbar nav a.boton-nav.activo{background:var(--navy);border-color:var(--navy);color:#fff}
.usuario-chip{color:var(--muted);background:var(--perla)}
.usuario-chip b{color:var(--navy)}

/* Tarjetas y KPI — blancas con borde y sombra suave */
.grid{display:grid;gap:16px}
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.dos{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--blanco);border:1px solid var(--linea-suave);border-radius:16px;padding:18px;box-shadow:var(--sombra)}
.card h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-family:'Inter',sans-serif;font-weight:600}
.kpi .num{font-family:'Montserrat','Arial Black',sans-serif;font-weight:800;font-size:44px;line-height:1;color:var(--negro)}
.kpi .etq{color:var(--muted);font-size:13px;margin-top:6px}
.kpi{border-top:3px solid var(--azul)}
.kpi.verde{border-top-color:var(--verde)}

/* Gráfica de barras (14 días) */
.barras{display:flex;align-items:flex-end;gap:5px;height:130px;margin-top:8px}
.barras .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.barras .barra{width:100%;max-width:34px;background:linear-gradient(180deg,var(--azul),var(--azul-prof));border-radius:5px 5px 0 0;height:0;transition:height 1s cubic-bezier(.2,.8,.2,1)}
.barras .col span{font-size:10px;color:var(--muted)}
.barras .col b{font-size:11px;color:var(--navy)}

/* Barras horizontales (origen / ZIP) */
.hbar{margin:9px 0}
.hbar .fila{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.hbar .pista{background:rgba(7,27,43,.08);border-radius:99px;height:10px;overflow:hidden}
.hbar .relleno{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--azul-prof),var(--azul),var(--verde));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}

/* Dona de estados */
.dona-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.dona{transform:rotate(-90deg)}
.dona circle{fill:none;stroke-width:15;transition:stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1)}
.leyenda{list-style:none;margin:0;padding:0;font-size:14px}
.leyenda li{margin:6px 0;display:flex;align-items:center;gap:8px}
.leyenda .punto{width:11px;height:11px;border-radius:50%;display:inline-block}

/* Chips de estado — tintes claros con texto oscuro (legibles sobre blanco) */
.chip{display:inline-block;border-radius:999px;padding:2px 11px;font-size:12px;font-weight:600;border:1px solid}
.chip.nuevo{color:#0059D9;border-color:var(--azul);background:#E8F3FF}
.chip.contactado{color:#0369A1;border-color:var(--celeste);background:#E0F2FE}
.chip.cotizado{color:#7A5200;border-color:#D9A41B;background:#FDF3D3}
.chip.agendado{color:#0B6E63;border-color:#00C2A8;background:#DFF7F2}
.chip.realizado{color:#2F6B06;border-color:#77D942;background:#EFFFE8}
.chip.perdido{color:#B3261E;border-color:#EE9A94;background:#FDECEA}
.chip.rol{color:var(--navy);border-color:var(--linea);background:var(--perla)}
.chip.canal{color:var(--muted);border-color:var(--linea)}

/* Tablas y listas */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linea-suave);vertical-align:top}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
tr:hover td{background:rgba(8,124,255,.05)}
.buscador{display:flex;gap:10px;margin:0 0 16px}
input,select,textarea{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;color:var(--texto);padding:10px 12px;font:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:0;border-color:var(--azul)}
.boton{background:var(--azul-prof);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.boton:hover{background:var(--azul)}
.boton.verde{background:var(--verde);color:#173F08}
.boton.fantasma{background:transparent;border:1px solid var(--linea);color:var(--navy)}
form .campo{margin-bottom:14px}
form label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.aviso{border:1px solid #D9A41B;color:#7A5200;border-radius:12px;padding:12px 14px;margin-bottom:16px;background:#FDF6DE}
.error{border-color:#EE9A94;color:#B3261E;background:#FDECEA}
.ok{border-color:#77D942;color:#2F6B06;background:#EFFFE8}
.muted{color:var(--muted)} .small{font-size:13px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{border-left:2px solid var(--linea-suave);padding:0 0 14px 14px;position:relative}
.timeline li::before{content:'';position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--azul)}
.login-caja{max-width:420px;margin:9vh auto 0}
.login-caja .card{padding:26px}
.login-caja img.logo-g{height:64px;width:auto;display:block;margin:0 auto 8px}
@media (max-width:640px){ .kpi .num{font-size:36px} .topbar img.logo{height:34px} }

/* ===== Incremento B (Sprint 2) — mismo tema claro de marca ===== */
/* Chip de etapa: el color viene de la tabla `etapas` (--c) */
.chip.etapa{color:var(--navy);border-color:var(--c,#4A6076);
  background:color-mix(in srgb,var(--c,#4A6076) 12%,#fff)}
@supports not (background:color-mix(in srgb,red 10%,#fff)){
  .chip.etapa{background:#EDF4FA}
}

/* Kanban del pipeline */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.kcol{flex:0 0 272px;background:#EDF3F8;border:1px solid var(--linea-suave);border-radius:14px;max-height:74vh;display:flex;flex-direction:column}
.kcol-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 12px;border-top:3px solid var(--c,#087CFF);border-bottom:1px solid var(--linea-suave);
  background:var(--blanco);border-radius:14px 14px 0 0;position:sticky;top:0}
.kcol-nombre{font-weight:700;font-size:13px;color:var(--negro)}
.kcol-conteo{background:var(--navy);color:#fff;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
.kcol-body{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.kcard{background:var(--blanco);border:1px solid var(--linea-suave);border-radius:12px;padding:10px 12px;box-shadow:0 2px 8px rgba(7,27,43,.05)}
.kcard-cliente{font-weight:700;color:var(--navy);text-decoration:none;font-size:14px}
.kcard-cliente:hover{color:var(--azul-prof);text-decoration:underline}
.kcard-serv{font-size:13px;margin-top:2px}
.kcard-meta{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}
.kcard-mover{display:flex;flex-direction:column;gap:6px;margin-top:10px;border-top:1px dashed var(--linea-suave);padding-top:10px}
.kcard-mover select,.kcard-mover input{padding:7px 9px;font-size:13px}
.kbtn{align-self:flex-end;padding:6px 14px;font-size:13px}
.kcol-vacio{color:var(--muted);font-size:13px;text-align:center;margin:8px 0}

/* Tareas */
.tareas{list-style:none;margin:0;padding:0}
.tarea{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--linea-suave)}
.tarea:last-child{border-bottom:0}
.tarea.vencida{background:#FDECEA;border-radius:10px;padding:10px}
.tarea-info{flex:1;min-width:0}
.tarea-acciones{display:flex;gap:6px;flex:0 0 auto}
.tarea-acciones .boton{padding:6px 12px;font-size:13px}

/* Vehículos del cliente */
.vehiculos{list-style:none;margin:0;padding:0}
.vehiculos li{display:flex;gap:10px;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--linea-suave)}
.vehiculos li:last-child{border-bottom:0}
.vehiculos .boton{padding:5px 11px;font-size:12px}

details summary{color:var(--azul-prof)}
@media (max-width:640px){ .kcol{flex-basis:236px} }