/* CeluFácil — Portal de Asociados.
   Identidad visual de celufaciluy.com: azul marino #111b54 + magenta #e20074,
   tipografía Montserrat, fondo gris claro y tarjetas blancas. El navy es la
   estructura/marca; el magenta es la acción (igual que los CTA del sitio). */

:root {
  --navy: #111b54;
  --navy-light: #1a236b;
  --navy-dark: #0c1240;
  --magenta: #e20074;
  --magenta-dark: #c60064;
  --magenta-soft: #fdebf4;
  --ink: #333333;
  --muted: #6b7280;
  --bg: #f2f2f2;
  --card: #ffffff;
  --danger: #dc2626;
  --ok: #15803d;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(17, 27, 84, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

/* ── Hero marketinero (azul marino, como el header de celufaciluy) ── */
.hero {
  background: linear-gradient(150deg, var(--navy-light) 0%, var(--navy) 55%, var(--navy-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
/* halo magenta sutil, el único toque de color de marca (como los CTA) */
.hero::after {
  content: "";
  position: absolute;
  right: -90px; bottom: -90px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(226, 0, 116, 0.35) 0%, rgba(226, 0, 116, 0) 70%);
  border-radius: 50%;
}
.hero-inner { max-width: 460px; position: relative; z-index: 1; }
/* Logo real de CeluFácil sobre respaldo blanco (es oscuro/transparente, no
   se leería sobre el azul). Mismo gesto que el header de celufaciluy.com. */
.brand { display: inline-flex; }
.brand-logo {
  display: block; height: 92px; width: auto;
  background: #fff; padding: 14px 20px; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.hero-title {
  font-size: 38px; line-height: 1.12; font-weight: 800;
  letter-spacing: -0.02em; margin: 24px 0 16px;
}
.hero-sub { font-size: 16px; line-height: 1.6; opacity: 0.9; margin: 0 0 28px; font-weight: 400; }
.hero-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hero-points li {
  font-size: 15px; font-weight: 500;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 12px 16px; border-radius: 12px;
}

/* ── Columna de acceso ── */
.auth {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px; gap: 16px;
}
.card {
  background: var(--card);
  width: 100%; max-width: 400px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}
.card-title { font-size: 23px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin: 0 0 8px; }
.card-sub { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 24px; font-weight: 400; }

/* Utility class — debe ganar sobre cualquier `display` específico (ej.
   .review-photos{display:grid} que viene después en el archivo). Sin el
   !important, el orden de fuente hacía que .hidden NO ocultara esos bloques. */
.step.hidden, .hidden { display: none !important; }

.field { display: block; margin-bottom: 18px; }
.field-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--navy); margin-bottom: 6px;
}
input {
  width: 100%; font-size: 16px; padding: 13px 14px;
  border: 1.5px solid #d9dbe4; border-radius: 9px;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit; color: var(--ink);
}
input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17, 27, 84, 0.12); }
.code-input {
  text-align: center; font-size: 30px; letter-spacing: 14px;
  font-weight: 700; padding-left: 14px;
}

.btn {
  width: 100%; font-size: 15px; font-weight: 700;
  padding: 13px 16px; border-radius: 9px; border: none;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, opacity 0.15s, transform 0.05s;
  margin-top: 4px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--magenta); color: #fff; }
.btn-primary:hover { background: var(--magenta-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--muted); font-weight: 600; margin-top: 10px; }
.btn-ghost:hover { background: #f1f1f4; }
.btn-link {
  background: transparent; color: var(--magenta);
  margin-top: 6px; text-decoration: underline; font-weight: 600;
}
.btn-link:disabled { color: var(--muted); text-decoration: none; cursor: not-allowed; }

.msg { font-size: 14px; line-height: 1.5; margin: 18px 0 0; min-height: 1em; text-align: center; font-weight: 500; }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok); }

.welcome-badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--magenta-soft); border: 2px solid #f7c6e0;
  color: var(--magenta); font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.next-box {
  background: #f5f6fb; border: 1px solid #dfe2f0;
  border-radius: 12px; padding: 16px; margin: 20px 0; font-size: 14px;
}
.next-box strong { color: var(--navy); }
.next-box p { margin: 6px 0 0; color: var(--muted); }

.legal { font-size: 12px; color: #9ca3af; text-align: center; margin: 0; font-weight: 400; }

/* ── Responsive: una sola columna en mobile ── */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .hero { padding: 36px 28px; }
  .hero-title { font-size: 30px; }
  .hero-points { display: none; }
  .auth { padding: 28px 20px 40px; }
}

/* ════════════ Paso 2 — Asistente Identificar Cliente ════════════ */
body.intake-open { overflow: hidden; }

.intake {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.intake.hidden { display: none; }

/* Header + mapa de etapas viajan juntos como un solo bloque sticky → el stepper NUNCA
   queda tapado por el header (sin depender de una altura fija de 62px). */
.intake-head { position: sticky; top: 0; z-index: 3; }
.intake-top {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; background: var(--navy);
  box-shadow: 0 2px 12px rgba(17, 27, 84, 0.18);
}
.intake-logo { height: 34px; width: auto; background: #fff; padding: 5px 9px; border-radius: 9px; }
.intake-progress {
  color: #fff; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.14); padding: 6px 14px; border-radius: 999px;
}
/* Asociado + tienda, alineado a la derecha, presente en cada pantalla. */
.intake-who {
  margin-left: auto; text-align: right; line-height: 1.25;
  display: flex; flex-direction: column; max-width: 45%;
}
.intake-who .who-name { color: #fff; font-size: 13px; font-weight: 700; }
.intake-who .who-store { color: #c7cbe6; font-size: 11px; font-weight: 500; }
.btn-exit {
  background: rgba(255, 255, 255, 0.12); color: #fff; border: none;
  width: 34px; height: 34px; border-radius: 9px; font-size: 16px; cursor: pointer;
  margin-left: 8px;
}
.btn-exit:hover { background: rgba(255, 255, 255, 0.22); }

/* ── Mapa de etapas (stepper navegable) ── */
/* Sticky justo debajo del header navy (header ≈ 62px). Encabezado con progreso
   textual ("Paso N de M · Etapa") SIEMPRE visible + barra de avance + nodos.
   Las etapas visitadas son clickeables (ir y volver). */
.stepwrap {
  z-index: 1;
  background: #fff; border-bottom: 1px solid #e6e8f2;
  box-shadow: 0 1px 6px rgba(17, 27, 84, 0.05);
  padding: 9px 16px 8px;
}
/* Encabezado: contador (pill navy) + nombre de la etapa actual */
.stephead {
  display: flex; align-items: baseline; gap: 9px;
  margin-bottom: 7px; min-height: 20px;
}
.step-count {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  color: #fff; background: var(--navy); border-radius: 999px; padding: 3px 9px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.step-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Barra de avance: track gris + relleno navy→magenta que crece con el paso */
.steptrack {
  height: 5px; border-radius: 999px; background: #e6e8f2; overflow: hidden;
  margin-bottom: 9px;
}
.stepfill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--navy), var(--magenta));
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
/* Mapa por FASES: 3-4 chips que entran ENTEROS en una línea (sin scroll). */
.stepmap { display: flex; align-items: center; gap: 0; }
.pchip {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: none; padding: 6px 6px; border-radius: 10px;
  font-family: inherit; cursor: default; color: var(--muted); transition: background 0.15s;
}
.pchip.nav { cursor: pointer; }
.pchip.nav:hover { background: #f5f6fb; }
.pchip:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.pdot {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; background: #e3e6f0; color: var(--muted);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.plabel { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip.done .pdot { background: var(--ok); color: #fff; }
.pchip.done .plabel { color: var(--navy); }
.pchip.current .pdot { background: var(--magenta); color: #fff; box-shadow: 0 0 0 3px var(--magenta-soft); }
.pchip.current .plabel { color: var(--navy); font-weight: 800; }
.pline { flex: 0 0 10px; height: 2px; background: #d9dde9; border-radius: 2px; transition: background .2s; }
/* La línea que sale de una fase completada queda "pisada" (verde) → rastro de avance. */
.pchip.done + .pline { background: var(--ok); }

.intake-body {
  flex: 1; width: 100%; max-width: 560px; margin: 0 auto;
  padding: 28px 20px 48px;
}

.iv.hidden { display: none; }
.iv-title { font-size: 23px; font-weight: 800; color: var(--navy); margin: 0 0 6px; letter-spacing: -0.01em; }
.iv-title .accent { color: var(--magenta); }
.iv-sub { font-size: 14px; color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.iv-msg { font-size: 14px; line-height: 1.5; margin: 14px 0 0; min-height: 1em; text-align: center; font-weight: 500; }
.iv-msg.error { color: var(--danger); }
.iv-msg.ok { color: var(--ok); }

/* ── Barra de progreso indeterminada (búsqueda de cliente, puede tardar ~30s) ── */
.progress {
  margin-top: 14px; height: 6px; border-radius: 999px;
  background: #e3e6f0; overflow: hidden; position: relative;
}
.progress.hidden { display: none; }
.progress-bar {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  border-radius: 999px; background: var(--magenta);
  animation: progress-slide 1.3s ease-in-out infinite;
}
@keyframes progress-slide {
  0%   { left: -40%; width: 40%; }
  50%  { width: 55%; }
  100% { left: 100%; width: 40%; }
}

/* ── Cámara ── */
.cam {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #0b1020; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cam[data-cam="selfie"], .cam[data-cam="audit"] { aspect-ratio: 3 / 4; max-height: 60vh; margin: 0 auto; }
.cam-video, .cam-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-video.hidden, .cam-preview.hidden { display: none; }
/* Overlay inicial (estado idle): invita a abrir la cámara. */
.cam-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: rgba(255, 255, 255, 0.85); text-align: center; padding: 20px;
}
.cam-overlay.hidden { display: none; }
.cam-overlay span { font-size: 44px; }
.cam-overlay p { margin: 0; font-size: 13px; font-weight: 500; }
.cam-frame {
  position: absolute; pointer-events: none;
  border: 3px dashed rgba(255, 255, 255, 0.7); border-radius: 12px;
}
.cam-frame.doc { inset: 12% 8%; }
.cam-frame.face { inset: 8% 18%; border-radius: 50%; }

.cam-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
  justify-content: center;
}
.cam-actions .btn { width: auto; flex: 1 1 auto; min-width: 130px; margin-top: 0; }

/* ── Revisión ── */
.review-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.review-photos figure { margin: 0; text-align: center; }
.review-photos img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  background: #e9ebf3; border: 1px solid #dfe2f0;
}
.review-photos figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; font-weight: 600; }

/* ── Verificación de identidad (cliente existente): caras lado a lado ── */
.face-compare {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; margin-bottom: 18px;
}
.face { margin: 0; text-align: center; }
.face-img-wrap {
  position: relative; width: 148px; height: 148px; max-width: 100%;
  margin: 0 auto; border-radius: 50%; overflow: hidden;
  border: 4px solid #e6e8f2; background: #e9ebf3;
  box-shadow: 0 6px 18px rgba(17, 27, 84, 0.10);
}
.face-img-wrap.is-registered { border-color: #c7cbe6; }
.face-img-wrap.is-live { border-color: #f7c6e0; }
.face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-cap { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-top: 10px; }
.face-cap small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.face-link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 800;
  background: #eef0f7; color: var(--muted); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(17, 27, 84, 0.12);
}
.face-link.ok { background: #ecfdf3; color: var(--ok); }
.face-link.warn { background: #fffbeb; color: #b45309; }
.face-link.bad { background: #fef2f2; color: var(--danger); }

.verdict {
  text-align: center; border-radius: 12px; padding: 16px 14px; margin-bottom: 6px;
  border: 1px solid #e6e8f2; background: #f7f8fc;
}
.verdict.ok { background: #ecfdf3; border-color: #bbf7d0; }
.verdict.warn { background: #fffbeb; border-color: #fde68a; }
.verdict.bad { background: #fef2f2; border-color: #fecaca; }
.verdict-pct { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--navy); }
.verdict.ok .verdict-pct { color: var(--ok); }
.verdict.warn .verdict-pct { color: #b45309; }
.verdict.bad .verdict-pct { color: var(--danger); }
.verdict-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 4px 0 12px; letter-spacing: 0.03em; text-transform: uppercase; }
.verdict .biometrics { justify-content: center; margin-bottom: 0; }
.verdict-note { font-size: 12px; line-height: 1.5; color: var(--muted); font-weight: 500; margin: 14px auto 0; max-width: 380px; }
.verdict-note strong { color: var(--navy); }

.hr { height: 1px; background: #eef0f7; border: 0; margin: 20px 0; }
.who-name-big { font-size: 18px; font-weight: 800; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.who-ced { font-size: 13.5px; color: var(--muted); margin: 3px 0 12px; font-weight: 600; }
.who-ced b { color: var(--ink); font-weight: 700; }
.pill-flags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.actions { margin-top: 18px; }

.biometrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid transparent;
}
.chip-ok { background: #ecfdf3; color: #15803d; border-color: #bbf7d0; }
.chip-warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.chip-bad { background: #fef2f2; color: var(--danger); border-color: #fecaca; }

/* Guía al lado de los chips de biometría: sin esto, un chip rojo de similaridad baja se lee como
   "la venta está trabada" y el mostrador resaca la selfie una y otra vez sin que sirva de nada. */
.biometrics-note {
  margin: -12px 0 20px; font-size: 13px; line-height: 1.45; color: #6b7280;
}
.biometrics-note strong { color: #111827; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid2-span { grid-column: 1 / -1; }
.field-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; font-weight: 500; }
.field input[readonly] { background: #f5f6fb; color: var(--muted); }
select {
  width: 100%; font-size: 16px; padding: 13px 14px;
  border: 1.5px solid #d9dbe4; border-radius: 9px; outline: none;
  font-family: inherit; color: var(--ink); background: #fff;
}
select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17, 27, 84, 0.12); }

/* ── Cliente existente (found) ── */
.found-badge {
  display: inline-block; background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0;
  font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; margin-bottom: 12px;
}
.contracts { margin: 4px 0 22px; }
.contracts-head { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.contract-row {
  background: var(--card); border: 1px solid #e6e8f2; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
.contract-prod { font-size: 15px; font-weight: 700; color: var(--ink); }
.contract-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.contract-meta .paid { color: #15803d; font-weight: 600; }
.contract-meta .pend { color: #b45309; font-weight: 600; }

/* ── Paso 3 — Selección de equipo y plan ── */
.equipo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 8px; }
.equipo-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--card); border: 1.5px solid #e6e8f2; border-radius: 12px;
  padding: 14px; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.equipo-card:hover { border-color: #c7cbe6; }
.equipo-card:active { transform: translateY(1px); }
.equipo-card.selected { border-color: var(--magenta); box-shadow: 0 0 0 3px var(--magenta-soft); }
.equipo-emoji { font-size: 26px; }
.equipo-marca { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.equipo-modelo { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.equipo-precio { font-size: 14px; font-weight: 800; color: var(--magenta); margin-top: 4px; }
/* Entrega enfatizada: es lo que el cliente paga HOY → va grande; el precio total y las cuotas, chicos. */
.equipo-entrega { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 21px; font-weight: 800; color: var(--magenta); margin-top: 5px; line-height: 1.1; }
.equipo-entrega .ee-lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.equipo-entrega .entrega-old { font-size: 12px; font-weight: 600; }

.plan-box { margin-top: 22px; }
.plan-title { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.plan-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-option {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card); border: 1.5px solid #e6e8f2; border-radius: 12px;
  padding: 14px 8px; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-option:hover { border-color: #c7cbe6; }
.plan-option.selected { border-color: var(--magenta); box-shadow: 0 0 0 3px var(--magenta-soft); }
.plan-n { font-size: 12px; font-weight: 700; color: var(--navy); }
.plan-cuota { font-size: 17px; font-weight: 800; color: var(--magenta); line-height: 1.1; }
.plan-cuota small { font-size: 11px; font-weight: 600; color: var(--muted); }
.plan-entrega { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; }

.venta-resumen {
  margin-top: 18px; background: #f5f6fb; border: 1px solid #dfe2f0;
  border-radius: 12px; padding: 12px 16px;
}
.resumen-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 4px 0; }
.resumen-row span { color: var(--muted); }
.resumen-row b { color: var(--navy); font-weight: 700; }
.resumen-row.total { border-top: 1px solid #dfe2f0; margin-top: 6px; padding-top: 10px; }
.resumen-row.total b { font-size: 19px; color: var(--magenta); font-weight: 800; }
/* La entrega es el número protagonista del resumen; el precio total y las cuotas van atenuados. */
.resumen-row.total span { color: var(--navy); font-weight: 700; }
.resumen-row.muted-row span, .resumen-row.muted-row b { color: var(--muted); font-size: 12.5px; font-weight: 600; }
#btn-venta-continuar { margin-top: 18px; }

/* Filtros del catálogo (Categoría / Marca / Entrega) */
.filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 16px; }
.filtro { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.filtro > span { font-size: 11px; font-weight: 600; color: var(--navy); }
.filtro select { padding: 9px 10px; font-size: 13px; }
/* Imagen real del equipo + línea de plan (entrega · 6 cuotas) */
.equipo-img { width: 100%; height: 88px; object-fit: contain; background: #fff; border-radius: 8px; margin-bottom: 2px; }
.equipo-plan { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-top: 4px; line-height: 1.3; }
/* Entrega original tachada cuando hay DescuentoEnEntregaInicial del cliente. */
.entrega-old { text-decoration: line-through; color: var(--muted); font-weight: 600; opacity: 0.8; margin-right: 3px; }

/* ── Estado de Cuenta ── */
.saldo-card { background: linear-gradient(150deg, var(--navy-light) 0%, var(--navy) 70%); color: #fff; border-radius: 14px; padding: 22px 20px; text-align: center; margin: 6px 0 18px; box-shadow: var(--shadow); }
.saldo-label { font-size: 12px; font-weight: 600; color: #c7cbe6; text-transform: uppercase; letter-spacing: 0.04em; }
.saldo-monto { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0; line-height: 1; }
.saldo-sub { font-size: 12px; color: #c7cbe6; font-weight: 500; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid #e6e8f2; border-radius: 12px; padding: 14px 8px; text-align: center; }
.kpi-v { display: block; font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.kpi-l { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.cuenta-dist { font-size: 13px; font-weight: 600; color: var(--navy); margin: 0 0 12px; }
/* Saldo: navy = falta transferir; verde = al día / a favor. */
.saldo-card.aldia, .saldo-card.favor { background: linear-gradient(150deg, #1f8a52 0%, #15803d 70%); }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .filtros { grid-template-columns: 1fr; gap: 8px; } }

@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; }
  .cam-actions .btn { min-width: 110px; }
  /* En pantallas chicas, priorizar el contexto (asociado+tienda) sobre el pill. */
  .intake-progress { display: none; }
  .intake-who { max-width: 60%; }
  /* Mapa por fases: el encabezado ("Paso N de M · Etapa") + barra llevan el detalle;
     los chips no-actuales quedan sólo-dot y el actual toma el resto para su etiqueta. */
  .stepwrap { padding: 8px 12px 7px; }
  .pchip { flex: 0 0 auto; }
  .pchip .plabel { display: none; }
  .pchip.current { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
  .pchip.current .plabel { display: inline; }
  .pline { flex-basis: 8px; }
  .face-img-wrap { width: 128px; height: 128px; }
  .face-compare { gap: 8px; }
}
@media (max-width: 380px) {
  .face-img-wrap { width: 104px; height: 104px; }
  .face-link { width: 32px; height: 32px; font-size: 15px; }
}

/* ── Casa Matriz — conciliación por distribuidor ── */
/* Esta vista aprovecha todo el ancho (el wizard sigue angosto en 560px). */
#matriz .intake-body { max-width: 1080px; }
#matriz-buscar { margin: 0 0 16px; max-width: 360px; }
.matriz-tot {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px;
}
.matriz-tot > div {
  background: var(--magenta-soft); border: 1px solid #f7c6e0; border-radius: 12px;
  padding: 13px 10px; text-align: center;
}
.matriz-tot .kpi-v { display: block; font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.matriz-tot .kpi-l { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.matriz-tot .kpi-v.debe { color: var(--magenta); }
.matriz-tot .kpi-v.favor { color: var(--ok, #1a9d5a); }

/* Tablas de conciliación (lista y detalle) */
.reg-table-wrap { overflow-x: auto; border: 1px solid #e7e9f2; border-radius: 12px; }
.conc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.conc-table th, .conc-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid #eef0f6; white-space: nowrap;
}
.conc-table thead th {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: #f7f8fc; position: sticky; top: 0;
}
.conc-table td.num, .conc-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.conc-table tbody td { color: var(--navy); }
.conc-table .num-cell { font-variant-numeric: tabular-nums; color: var(--muted); }
.conc-table .muted-cell { color: var(--muted); }
.conc-table .cl-name { font-weight: 700; color: var(--navy); white-space: normal; }
.conc-table .cl-chev { color: var(--magenta); font-weight: 800; width: 1px; text-align: center; }
.conc-table tbody tr:last-child td { border-bottom: none; }
.conc-table .saldo { font-weight: 800; }
.conc-table .saldo.debe { color: var(--magenta); }
.conc-table .saldo.favor { color: var(--ok, #1a9d5a); }
.conc-table .num.favor { color: var(--ok, #1a9d5a); }
.conc-table tr.dist-row { cursor: pointer; transition: background .1s; }
.conc-table tr.dist-row:hover td { background: var(--magenta-soft); }
.conc-table tr.dist-row:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.conc-table tfoot td {
  font-weight: 800; color: var(--navy); background: #f7f8fc;
  border-top: 2px solid #e7e9f2; border-bottom: none; font-variant-numeric: tabular-nums;
}
.conc-table .empty { text-align: center; color: var(--muted); padding: 22px; }

/* Detalle de un distribuidor */
.matriz-volver {
  background: none; border: none; color: var(--magenta); font-weight: 700; font-size: 14px;
  cursor: pointer; padding: 0; margin: 0 0 10px;
}
.matriz-volver:hover { text-decoration: underline; }
.dist-detail-title { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0 0 14px; letter-spacing: -0.01em; }
.concilia-box {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
  background: #fff; border: 1px solid #e7e9f2; border-radius: 12px; padding: 14px 16px;
}
.cb-item { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.cb-l { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cb-v { font-size: 18px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.cb-v.debe { color: var(--magenta); }
.cb-v.favor { color: var(--ok, #1a9d5a); }
.cb-op { display: flex; align-items: center; font-size: 20px; font-weight: 700; color: #b9bed4; }
.cb-total { margin-left: auto; padding-left: 16px; border-left: 1px dashed #dfe2ee; }
.reg-h {
  font-size: 13px; font-weight: 800; color: var(--navy); text-transform: uppercase;
  letter-spacing: .03em; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px;
}
.reg-n {
  background: var(--magenta-soft); color: var(--magenta); font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 2px 8px;
}

/* Auditoría — badge de vista */
#audit .intake-body { max-width: 1080px; }
.vbadge {
  display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px;
  padding: 2px 9px; letter-spacing: .02em;
}
.vbadge.v-matriz { background: var(--magenta-soft); color: var(--magenta); }
.vbadge.v-asoc { background: #e7ecfb; color: var(--navy); }

@media (max-width: 720px) {
  .matriz-tot { grid-template-columns: repeat(3, 1fr); }
  .cb-total { margin-left: 0; padding-left: 0; border-left: none; }
}
@media (max-width: 480px) {
  .matriz-tot { grid-template-columns: repeat(2, 1fr); }
}

/* Review: bloque read-only de la cédula + título de la sección a completar */
.review-ask-title { font-size: 13px; font-weight: 800; color: var(--navy); margin: 4px 0 10px; letter-spacing: -0.01em; }
.readonly-block input[readonly] { background: #f4f5f9; color: var(--muted); cursor: default; }
.readonly-block input[readonly]:focus { border-color: var(--line, #e7e9f2); box-shadow: none; }

/* Enlaces a PDF (contrato / factura) en los pasos de emisión */
.doc-link {
  display: block; text-align: center; text-decoration: none;
  background: #fff; color: var(--navy); font-weight: 700; font-size: 14px;
  border: 1.5px solid #d9dbe4; border-radius: 10px; padding: 13px 16px; margin-top: 10px;
}
.doc-link:hover { border-color: var(--magenta); color: var(--magenta); }

/* ── Navegación hacia atrás = solo lectura ── */
.ro-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 auto 14px; max-width: 720px; padding: 10px 14px;
  background: #fff7fb; border: 1px solid #f3c6dd; border-left: 4px solid #e20074;
  border-radius: 10px; color: #111b54; font-size: 14px;
}
.ro-banner.hidden { display: none; }
.ro-text { font-weight: 600; }
.ro-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ro {
  border: 1px solid transparent; border-radius: 8px; padding: 7px 12px;
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-ro-restart { background: #fff; color: #e20074; border-color: #e20074; }
.btn-ro-volver { background: #111b54; color: #fff; }
.btn-ro:hover { filter: brightness(1.05); }

/* En solo-lectura, bloqueamos la interacción del paso VISIBLE (los controles del
   header, el stepper y el banner quedan fuera de .iv → siguen activos). */
.intake-ro .iv input,
.intake-ro .iv select,
.intake-ro .iv textarea,
.intake-ro .iv button { pointer-events: none; opacity: 0.55; }

/* Aviso (ej. factura electrónica no emitida en el acto) */
.iv-note {
  margin: 8px auto 0; max-width: 460px; padding: 10px 12px;
  background: #fff8e6; border: 1px solid #f3dca0; border-left: 4px solid #e0a800;
  border-radius: 10px; color: #6b5200; font-size: 13px; line-height: 1.45; text-align: left;
}
.iv-note.hidden { display: none; }
.cam-hint { opacity: 0.7; }

/* Desglose por tienda en el Estado de Cuenta */
.tiendas-block { margin-top: 18px; }
.tiendas-title { font-size: 13px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.tiendas-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tiendas-tbl th, .tiendas-tbl td { padding: 8px 10px; text-align: right; border-bottom: 1px solid #eceef5; }
.tiendas-tbl th:first-child, .tiendas-tbl td:first-child { text-align: left; }
.tiendas-tbl thead th { color: var(--muted); font-weight: 600; font-size: 12px; }
.tiendas-tbl tbody tr:last-child td { border-bottom: none; }

/* Form de reportar transferencia (Estado de Cuenta) */
.transfer-form { margin-top: 14px; }
.transfer-form .field { margin-bottom: 12px; }
.transfer-preview { display: block; max-width: 100%; border: 1px solid #e5e7eb; border-radius: 10px; margin: 4px 0 12px; }

/* Reportar transferencia: captura (cámara/galería) */
.tr-capture { display: flex; gap: 8px; margin: 4px 0 10px; }
.tr-capture .btn { margin-top: 0; }
.tr-video { width: 100%; max-height: 320px; background: #000; border-radius: 10px; margin: 4px 0; object-fit: contain; }

/* ════════════ Puntos de contacto (tienda / distribuidor) ════════════ */
.contacts-block { margin: 18px 0 4px; }
.contacts-title { font-weight: 700; color: var(--navy); font-size: 14px; margin: 0 0 8px; }
.ct-card {
  border: 1px solid var(--magenta-soft); background: #fffafd;
  border-radius: 12px; padding: 12px 14px;
}
.ct-name { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.ct-lines { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ct-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--magenta-dark); text-decoration: none; font-weight: 600; font-size: 13px;
  word-break: break-word;
}
.ct-link:hover { text-decoration: underline; }
.ct-wa { color: var(--ok); }
.ct-none { color: var(--muted); }
.ct-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-tbl th, .ct-tbl td { padding: 8px 6px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.ct-tbl thead th { color: var(--muted); font-weight: 600; font-size: 12px; }
.ct-tbl tbody tr:last-child td { border-bottom: none; }
.ct-tbl td:first-child { font-weight: 600; color: var(--navy); white-space: nowrap; }

/* Inventario disponible (detalle del distribuidor) — por pieza, con antigüedad */
.inv-store { margin-bottom: 12px; }
.inv-store-name { font-weight: 700; color: var(--navy); font-size: 13px; margin: 0 0 4px; }
.inv-total { font-weight: 600; color: var(--muted); font-size: 12px; }
.inv-legend { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 6px; }
.inv-list { list-style: none; margin: 0; padding: 0; }
.inv-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink); padding: 4px 0; border-bottom: 1px solid #f0f2f5; }
.inv-line:last-child { border-bottom: none; }
.inv-prod { min-width: 0; }
.inv-age { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 9px; border-radius: 999px; background: #eef0f3; }
.inv-age.inv-yellow { background: #fef3c7; color: #92400e; }
.inv-age.inv-red { background: #fee2e2; color: #b91c1c; }
.inv-color { display: inline-flex; align-items: center; gap: 4px; background: #eef0f3; color: #374151; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.inv-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); display: inline-block; }
.inv-req-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.inv-req-actions .btn { margin-top: 0; flex: 1; min-width: 160px; }
#form-inv-req { margin-top: 10px; }
#inv-req-note { width: 100%; box-sizing: border-box; border: 1px solid #d8dbe2; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; margin: 8px 0; }
#inv-req-note:focus { outline: none; border-color: var(--magenta); }

/* ════════════ Bienvenida / Onboarding (primer login) ════════════ */
.onb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(12, 18, 64, 0.55); backdrop-filter: blur(3px);
}
.onb-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow);
  padding: 28px 24px 20px; text-align: center;
  animation: onb-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.onb-skip {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px;
}
.onb-skip:hover { color: var(--navy); }
.onb-stage { min-height: 268px; display: flex; align-items: stretch; }
.onb-slide { display: none; width: 100%; flex-direction: column; align-items: center; }
.onb-slide.active { display: flex; animation: onb-slide-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
.onb-visual {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--magenta-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; line-height: 1; margin: 6px auto 18px;
  animation: onb-pulse 2.2s ease-in-out infinite;
}
.onb-head { color: var(--navy); font-size: 22px; font-weight: 800; margin: 0 0 10px; line-height: 1.2; }
.onb-body { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; max-width: 320px; }
.onb-foot { margin-top: 18px; }
.onb-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 16px; }
.onb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta-soft); transition: background 0.25s, transform 0.25s; }
.onb-dot.on { background: var(--magenta); transform: scale(1.25); }
.onb-next { width: 100%; }

@keyframes onb-card-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes onb-slide-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes onb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .onb-card, .onb-slide.active { animation: none; }
  .onb-visual { animation: none; }
  .onb-dot { transition: none; }
  .stepfill { transition: none; }
}

/* Botón de contacto → abre WhatsApp logueado en Conversia (Modo Iniciador) */
.ct-wa-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }

/* ── Casa Matriz · Notificaciones a Asociados ── */
.notif-tabs { display: flex; gap: 8px; margin: 4px 0 16px; }
.notif-tab {
  background: none; border: 1px solid #d8dbe2; border-radius: 999px;
  padding: 6px 16px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer;
}
.notif-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.notif-card {
  border: 1px solid #e3e6ec; border-radius: 14px; background: var(--card);
  padding: 16px 16px 14px; margin-bottom: 14px;
}
.notif-card.on { border-color: #b9e3c6; box-shadow: 0 0 0 1px #b9e3c6 inset; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notif-head h3 { margin: 0; font-size: 15px; color: var(--navy); }
.notif-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.notif-badge.on { background: #e3f6ea; color: #1c7a40; }
.notif-badge.off { background: #eef0f4; color: var(--muted); }
.notif-desc { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 12px; }
.notif-f { display: block; margin-bottom: 10px; }
.notif-f > span { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; }
.notif-f textarea, .notif-f input {
  width: 100%; box-sizing: border-box; border: 1px solid #d8dbe2; border-radius: 10px;
  padding: 9px 11px; font: inherit; font-size: 14px; resize: vertical;
}
.notif-f textarea:focus, .notif-f input:focus { outline: none; border-color: var(--magenta); }
.notif-ph { font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
.notif-ph code { background: #f1f3f7; border-radius: 5px; padding: 1px 5px; font-size: 11px; }
.notif-row { display: flex; gap: 12px; flex-wrap: wrap; }
.notif-row .notif-f { flex: 1; min-width: 120px; }
.notif-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.notif-actions .btn { margin-top: 0; padding: 8px 16px; font-size: 14px; width: auto; flex: 0 0 auto; }
.notif-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.notif-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; font-style: italic; }
.notif-appr { font-size: 12px; color: #1c7a40; margin: 8px 0 0; }
.notif-sim { margin-top: 12px; border-top: 1px dashed #e3e6ec; padding-top: 12px; }
.notif-sim-note { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.notif-sim-note.ok { color: #1c7a40; font-weight: 600; }
.notif-bubble { background: #e8fbe3; border-radius: 12px; padding: 10px 12px; max-width: 460px; }
.notif-to { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.notif-msg { font-size: 14px; color: #102; line-height: 1.5; white-space: normal; }
.notif-empty { color: var(--muted); font-size: 14px; padding: 12px 0; }
.notif-logrow { border: 1px solid #e3e6ec; border-left-width: 4px; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.notif-logrow.ok { border-left-color: #2fae5e; }
.notif-logrow.err { border-left-color: #d23; }
.notif-logtop { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.notif-logintent { font-weight: 700; color: var(--navy); }
.notif-logwhen { color: var(--muted); }
.notif-logto { font-size: 13px; margin: 3px 0; }
.notif-logmsg { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ════════════ Casa Matriz · Crecimiento de Tiendas ════════════ */
.tg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 6px 0 4px; }
.tg-kpi { background: var(--card); border: 1px solid #e7e9f2; border-radius: var(--radius); padding: 15px 16px; box-shadow: 0 6px 18px rgba(17,27,84,.07); }
.tg-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.tg-emo { font-size: 20px; }
.tg-tag { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .02em; }
.tg-tag.up { background: #e7f7ee; color: var(--ok); }
.tg-tag.warn { background: var(--magenta-soft); color: var(--magenta); }
.tg-tag.amber { background: #fef3c7; color: #b7791f; }
.tg-num { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 8px 0 3px; color: var(--navy); }
.tg-kpi.v .tg-num { color: var(--ok); }
.tg-kpi.e .tg-num { color: #b7791f; }
.tg-kpi.r .tg-num { color: var(--magenta); }
.tg-lbl { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.3; }

.tg-sec { background: var(--card); border: 1px solid #e7e9f2; border-radius: var(--radius); padding: 14px 16px; margin-top: 14px; box-shadow: 0 6px 18px rgba(17,27,84,.05); }
.tg-h { font-size: 15px; color: var(--navy); margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tg-c { font-size: 12px; color: var(--muted); font-weight: 700; background: #f1f2f8; padding: 2px 9px; border-radius: 999px; }
.tg-sub { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.tg-empty { font-size: 13px; color: var(--muted); margin: 8px 0 2px; }

.tg-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; }
.tg-tbl th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #9096b0; text-align: left; padding: 4px 8px 6px 0; font-weight: 700; }
.tg-tbl th.tg-rh { text-align: right; }
.tg-tbl td { padding: 9px 8px 9px 0; font-size: 14px; color: var(--ink); border-top: 1px solid #eef0f5; }
.tg-t { font-weight: 700; color: var(--navy); }
.tg-loc { color: var(--muted); font-weight: 500; font-size: 13px; }
.tg-r { text-align: right; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tg-chip { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.tg-chip.fast { color: var(--magenta); background: var(--magenta-soft); }
.tg-badge { font-size: 12px; font-weight: 800; color: var(--ok); background: #e7f7ee; padding: 3px 9px; border-radius: 999px; }

.tg-risk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 8px; background: #fff; border: 1.5px solid #f6c9e2; border-radius: 12px; }
.tg-risk-row.amber { border-color: #f3d38a; }
.tg-risk-ico { font-size: 20px; }
.tg-risk-body b { color: var(--navy); font-size: 14px; }
.tg-risk-days { color: var(--magenta); font-weight: 700; font-size: 13px; margin-top: 1px; }
.tg-risk-days.amber { color: #b7791f; }

.tg-foot { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 14px 18px; font-size: 13px; line-height: 1.5; }
.tg-foot b { color: #fff; }
.tg-foot-ico { font-size: 24px; }

@media (max-width: 560px) {
  .tg-kpis { grid-template-columns: 1fr; }
  .tg-num { font-size: 34px; }
}

/* ── Split de la entrega en varios medios de pago (sólo AR) ── */
.ar-split { margin: 14px 0; padding: 14px; border: 1px solid var(--line, #e6e8f2); border-radius: 12px; background: #fafbff; }
.ar-split-title { font-weight: 700; font-size: 14px; margin: 0 0 10px; color: var(--navy); }
.ar-split-line { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ar-split-line .ar-split-method { flex: 1 1 55%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line, #d7dbec); border-radius: 9px; font-size: 14px; background: #fff; }
.ar-split-line .ar-split-amount { flex: 1 1 35%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line, #d7dbec); border-radius: 9px; font-size: 14px; text-align: right; }
.ar-split-del { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #fdecef; color: #b91c1c; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; }
.ar-split-del:hover { background: #f9d7de; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.ar-split-tot { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--navy); }
.ar-split-tot b { font-weight: 800; }
.ar-split-tot .ar-split-sep { color: #8a90a6; font-size: 12px; }

/* ── AR: perfil OSINT del cliente (BCRA situación + deudas + cheques + RePET) ── */
.ar-profile { margin: 4px 0 18px; padding: 14px; border: 1px solid var(--line, #e6e8f2); border-radius: 12px; background: #fafbff; }
.ar-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ar-profile-title { font-weight: 700; font-size: 14px; color: var(--navy); }
.ar-sit { font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; color: #fff; background: #8a90a6; }
.ar-sit-load { background: #b7bdd0; }
.ar-sit-0 { background: #8a90a6; }        /* sin datos */
.ar-sit-1 { background: #1e9e5a; }        /* Normal */
.ar-sit-2 { background: #86b300; }        /* Riesgo bajo */
.ar-sit-3 { background: #e8930c; }        /* Riesgo medio */
.ar-sit-4 { background: #e6570e; }        /* Riesgo alto */
.ar-sit-5 { background: #c62828; }        /* Irrecuperable */
.ar-profile-body { font-size: 13.5px; color: #333; }
.ar-profile-muted { color: #6b7280; font-size: 13px; margin: 4px 0; }
.ar-alert { background: #fdecef; color: #9a1420; border: 1px solid #f4c6ce; border-radius: 8px; padding: 8px 10px; font-weight: 600; margin-bottom: 8px; }
.ar-flag { color: #b45309; font-weight: 600; margin-bottom: 8px; }
.ar-debts-h { font-weight: 700; color: var(--navy); margin: 4px 0 6px; font-size: 13px; }
.ar-debt-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #eef0f6; }
.ar-debt-ent { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-debt-sit { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #fff; background: #8a90a6; border-radius: 6px; padding: 2px 6px; }
.ar-debt-sit.s1 { background: #1e9e5a; } .ar-debt-sit.s2 { background: #86b300; } .ar-debt-sit.s3 { background: #e8930c; }
.ar-debt-sit.s4 { background: #e6570e; } .ar-debt-sit.s5 { background: #c62828; }
.ar-debt-monto { flex: 0 0 auto; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.ar-profile-src { font-size: 11px; color: #9098ac; margin: 10px 0 0; }

/* AR: dirección read-only como textarea (envuelve direcciones largas, no trunca) — matchea los read-only inputs. */
.readonly-block textarea[readonly] {
  width: 100%; box-sizing: border-box; resize: none; font-family: inherit; font-size: 16px;
  padding: 13px 14px; border: 1.5px solid #d9dbe4; border-radius: 9px;
  background: #f4f5f9; color: var(--muted); cursor: default; line-height: 1.45;
}
.readonly-block textarea[readonly]:focus { border-color: #d9dbe4; box-shadow: none; outline: none; }

/* Logueado (dashboard): colapsa el hero de MARKETING (título/pitch/bullets) para que el
   vendedor caiga directo en las acciones (Ventas / Contado / Caja) sin scrollear. El logo
   de marca se conserva. En el login (sin la clase) el hero se muestra completo. */
body.logged-in .hero-title,
body.logged-in .hero-sub,
body.logged-in .hero-points { display: none; }
body.logged-in .hero { padding-top: 20px; padding-bottom: 12px; }
/* Refuerzo: logueado, ocultar el hero COMPLETO (incluido el logo de marketing) → el dashboard
   arranca arriba de todo. La identidad de marca queda en el título de la pestaña + el favicon. */
body.logged-in .hero { display: none; }

/* SUPERVISOR DE CAJAS: entra a mirar cajas, no a operar una tienda. Los módulos del vendedor
   (Caja propia, Remitos, Servicio Técnico, Contado, Domicilio) se inyectan solos y de forma
   ASÍNCRONA, así que esconderlos uno por uno desde JS no alcanza: el que llega tarde aparece
   igual. Con una regla de CSS sobre el contenedor, el recorte también cubre lo que se agregue
   después. El bloqueo real está en el servidor (cada router exige la tienda de la sesión):
   esconder un botón nunca es un control. */
body.solo-supervisor #step-done button { display: none; }
body.solo-supervisor #step-done #cs-launch,
body.solo-supervisor #step-done #btn-logout { display: block; }