/* ==========================================================================
   base.css — Design tokens, reset, tipografía y componentes base del portal.
   Fuente de verdad de la identidad visual de Envíos Pronto TPV.
   ========================================================================== */

:root{
  /* Superficies */
  --bg: #EFECE5;
  --panel: #FFFFFF;
  --panel-border: #E3DFD5;
  --line: #E7E3D9;

  /* Sidebar oscuro */
  --sidebar: #17171A;
  --sidebar-active: #232326;
  --sidebar-hover: #1F1F22;
  --sidebar-text: #9C9C9F;
  --sidebar-text-active: #FFFFFF;
  --sidebar-group: #6B6B6E;
  --sidebar-border: #2A2A2D;

  /* Marca */
  --accent: #E15B2D;
  --accent-dark: #C24A22;
  --accent-soft: #FBE3D6;

  /* Tinta */
  --ink: #1B1B1A;
  --ink-strong: #17171A;
  --ink-soft: #6E6C67;
  --ink-faint: #9A968D;

  /* Estados */
  --good-bg: #E2F2E5; --good-fg: #1F7A41;
  --bad-bg: #FCE4DA;  --bad-fg: #C4451C;
  --warn-bg: #FCF1D9; --warn-fg: #A9760B;
  --blue: #3E6FD9;    --blue-soft: #E5ECFA;

  /* Radios y sombras */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(20,18,14,0.04), 0 8px 24px -12px rgba(20,18,14,0.10);
  --shadow-lg: 0 2px 4px rgba(20,18,14,0.05), 0 18px 40px -18px rgba(20,18,14,0.18);

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 74px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

/* ---------- Tipografía utilitaria ---------- */
.t-h1{ font-size:27px; font-weight:800; letter-spacing:-0.01em; margin:0; }
.t-h2{ font-size:20px; font-weight:700; margin:0; }
.t-sub{ color:var(--ink-soft); font-size:13.5px; margin:0; }
.t-label{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.t-strong{ color:var(--ink-strong); }
.t-muted{ color:var(--ink-soft); }
.t-faint{ color:var(--ink-faint); }
.t-orange{ color:var(--accent); }
.t-good{ color:var(--good-fg); }
.fw-600{ font-weight:600; } .fw-700{ font-weight:700; } .fw-800{ font-weight:800; }
.mt-2{margin-top:2px;} .mt-4{margin-top:4px;} .mt-6{margin-top:6px;} .mt-8{margin-top:8px;}
.mt-16{margin-top:16px;} .mb-4{margin-bottom:4px;} .mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;}
.min-w-0{ min-width:0; }

/* ---------- Botones ---------- */
.btn{
  font-family:inherit; font-size:13px; font-weight:600; border-radius:9px;
  padding:9px 14px; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:all .12s ease; text-align:center;
}
.btn:hover{ border-color:#D5D0C3; background:#FAF9F5; }
.btn svg{ width:14px; height:14px; }
.btn--primary,.btn--orange{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover,.btn--orange:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn--green{ background:#1FA855; color:#fff; border-color:#1FA855; }
.btn--green:hover{ background:#178A45; border-color:#178A45; }
.btn--ghost{ background:transparent; border-color:transparent; }
.btn--block{ width:100%; }
.btn--sm{ padding:6px 10px; font-size:12px; }
.btn--lg{ padding:12px 18px; font-size:14px; }
.mini-action{
  font-family:inherit; font-size:12px; font-weight:700; color:var(--accent);
  background:transparent; border:none; cursor:pointer; padding:4px 6px; border-radius:6px;
}
.mini-action:hover{ background:var(--accent-soft); }

/* ---------- Cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-body{ padding:20px; }
.card--dark{ background:var(--sidebar); border-color:var(--sidebar); color:#fff; }
.card-title{ font-size:14.5px; font-weight:700; margin:0 0 2px 0; }
.card-sub{ font-size:12px; color:var(--ink-soft); margin:0 0 16px 0; }

/* ---------- Tags / badges ---------- */
.tag{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:20px;
}
.tag::before{ content:''; width:6px; height:6px; border-radius:50%; }
.tag.good{ background:var(--good-bg); color:var(--good-fg); } .tag.good::before{ background:var(--good-fg); }
.tag.bad{ background:var(--bad-bg); color:var(--bad-fg); }     .tag.bad::before{ background:var(--bad-fg); }
.tag.warn{ background:var(--warn-bg); color:var(--warn-fg); }  .tag.warn::before{ background:var(--warn-fg); }
.tag.blue{ background:var(--blue-soft); color:var(--blue); }   .tag.blue::before{ background:var(--blue); }
.badge{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.badge--green{ background:var(--good-bg); color:var(--good-fg); }

/* ---------- Campos de formulario ---------- */
.field-block{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
.field-input, select.field-input{
  width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--line);
  font-family:inherit; font-size:14px; background:#FFF; color:var(--ink);
}
.field-input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.field-input.is-invalid{ border-color:var(--bad-fg); background:var(--bad-bg); }
.field-error{ font-size:12px; color:var(--bad-fg); font-weight:600; margin:8px 0 0; display:none; }
.field-error.is-visible{ display:block; }

/* ---------- Tablas ---------- */
table{ width:100%; border-collapse:collapse; }
th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); padding:9px 12px; border-bottom:1px solid var(--line);
}
td{ padding:13px 12px; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tr.row-hover:hover{ background:#FAF9F4; cursor:pointer; }

/* ---------- Búsqueda / toolbar ---------- */
.search{
  display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; font-size:13px; color:var(--ink-soft); flex:1;
}
.search svg{ width:15px; height:15px; opacity:.6; flex-shrink:0; }
.search input{ border:none; outline:none; font-family:inherit; font-size:13px; width:100%; background:transparent; color:var(--ink); }
select{
  font-family:inherit; font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
}
.toolbar{ display:flex; gap:10px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }

/* ---------- Pill toggle ---------- */
.pill-toggle{ display:inline-flex; background:#F1EFE8; border-radius:9px; padding:3px; gap:2px; }
.pill-toggle button{
  border:none; background:transparent; font-family:inherit; font-size:12.5px; font-weight:600;
  padding:6px 13px; border-radius:7px; cursor:pointer; color:var(--ink-soft);
}
.pill-toggle button.active{ background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.06); }

/* ---------- Icon box ---------- */
.icon-box{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-box svg{ width:18px; height:18px; }
.icon-box--blue{ background:var(--blue-soft); color:var(--blue); }
.icon-box--orange{ background:var(--accent-soft); color:var(--accent); }
.icon-box--line svg{ fill:none; stroke:currentColor; stroke-width:2; }

/* ---------- Utilidades de layout ---------- */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:1.6fr 1fr; }
.grid-kpi{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .grid-2{ grid-template-columns:1fr; } .grid-kpi{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Banner de nota ---------- */
.banner-note{
  display:flex; align-items:center; gap:10px; background:var(--accent-soft); border:1px solid #F0C6AC;
  color:#8A3413; font-size:12.5px; font-weight:600; padding:10px 14px; border-radius:10px;
}

/* ---------- Desglose de ganancia (patrón transversal) ---------- */
.profit-trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.profit-trio__cell{ background:var(--panel); padding:12px 14px; }
.profit-trio__label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); }
.profit-trio__value{ font-size:18px; font-weight:800; margin-top:4px; }
.profit-trio__cell--profit .profit-trio__value{ color:var(--good-fg); }
.profit-strip{
  display:flex; justify-content:space-between; align-items:center; background:#FBF7EF; border:1px dashed #E7D9BC;
  border-radius:10px; padding:10px 14px; font-size:12.5px; color:#8A6A20;
}

[data-anim]{ animation:fadein .18s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Barra de carga superior (fetch en curso, estilo "nprogress") ----------
   Discreta, no bloqueante: el contenido estático se pinta primero; esta barra
   solo avisa que algo se está trayendo de fondo (ej. saldo real de EP). */
.top-loader{
  position:fixed; top:0; left:0; right:0; height:2.5px; z-index:200;
  background:var(--accent); width:0%; opacity:0;
  transition:width .3s ease, opacity .2s ease;
  pointer-events:none;
}
.top-loader.is-active{ opacity:1; }

/* ---------- Skeleton (placeholder mientras carga un valor async) ---------- */
.skeleton{
  display:inline-block; border-radius:6px; background:linear-gradient(90deg, var(--line) 25%, #EFEAE0 37%, var(--line) 63%);
  background-size:400% 100%; animation:skeleton-shimmer 1.4s ease infinite; color:transparent !important;
}
@keyframes skeleton-shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ==========================================================================
   Estado de rastreo — componente COMPARTIDO (mis-ventas, venta-detalle,
   scanner). Vivía en ventas.css; subió aquí cuando el scanner empezó a
   mostrar el estatus que devuelve Envíos Pronto: mismo chip, misma paleta,
   una sola fuente de verdad.
   ========================================================================== */
/* Estado de rastreo: aquí sí usamos color e iconografía porque comunica una
   etapa accionable del envío, no una simple categoría. */
.track-cell{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; white-space:nowrap; }
.track-pill{
  display:inline-flex; align-items:center; gap:3px; min-height:30px; padding:5px 10px;
  border:0; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1;
}
.track-pill svg{ width:14px; height:14px; flex:none; stroke-width:1.8; }

/* Fallbacks por familia; los estados exactos de abajo dan la personalidad. */
.track-pill--blue{ color:#3C67B7; background:#EDF3FC; }
.track-pill--warn{ color:#A76B18; background:#FFF1DD; }
.track-pill--good{ color:#1D9960; background:#E4F5ED; }
.track-pill--bad{ color:#D44735; background:#FCE9E5; }
.track-pill--muted{ color:#8A8882; background:#F0EFEB; }

/* Paleta inspirada en las referencias: pasteles sin borde y un color inequívoco
   por etapa, para reconocer el estado antes de terminar de leerlo. */
.track-pill--status-creado{
  color:#898883; background:#F0EFEB;
}
.track-pill--status-recolectado{
  color:#2678A9; background:#E5F3FA;
}
.track-pill--status-en_transito{
  color:#7556E8; background:#EFEAFF;
}
.track-pill--status-en_reparto{
  color:#B36C16; background:#FBEBD9;
}
.track-pill--status-entregado{
  color:#1C9A61; background:#E3F5ED;
}
.track-pill--status-cancelado{
  color:#D04A3B; background:#FBE8E5;
}
.track-pill--status-incidencia,
.track-pill--status-fallido{
  color:#E0442F; background:#FDE9E5;
}
.track-pill--status-devuelto{
  color:#B36C16; background:#FFF0DD;
}
.track-pill--status-sin_rastreo{
  color:#8A8882; background:#F0EFEB;
}
/* Retenido por falta de saldo de quien envía: ámbar fuerte, no rojo — no está
   roto, está detenido, y se destraba abonando. */
.track-pill--status-no_recolectado{
  color:#9A5B08; background:#FDECCF;
}
.track-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-faint); }
.track-dot--blue{ background:var(--blue); }
.track-dot--warn{ background:#E0952F; }
.track-dot--good{ background:#1E9E5A; }
.track-dot--bad{ background:#D64545; }
.track-dot--muted{ background:#A8A49A; }
.track-text{ font-size:12.5px; font-weight:600; }
.track-when{ font-size:10.5px; color:var(--ink-faint); padding-left:12px; }