/* =====================================================
   CAPTACIÓN — app de los vendedores (/captacion)
   Pensada para el celular: se usa en la calle, entre comercio y comercio.
   Una sola columna, controles de 44px y textos de 16px en los campos (iOS
   hace zoom al enfocar un campo de menos de 16px).
   Solo tokens del sistema (assets/css/torque/tokens.css).
   ===================================================== */

body.cap-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

.cap-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.cap-top-marca {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.cap-top-marca > i {
  font-size: 20px;
  color: var(--accent-hi);
}

.cap-top-marca div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cap-top-marca strong { font-size: 15px; }

.cap-top-marca span {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cap-top-acciones {
  display: flex;
  gap: var(--space-2);
}

.cap-tabs {
  display: flex;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

.cap-tab {
  flex: 1;
  min-height: 44px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font: 600 14px var(--font);
  cursor: pointer;
}

.cap-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent-hi);
}

.cap-main {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
}

.cap-vista { display: none; }
.cap-vista.is-active { display: block; }

/* ── Comisiones ───────────────────────────────────── */

.cap-comisiones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--space-4);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cap-comision {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface);
  min-width: 0;
}

.cap-comision-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cap-comision strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.cap-comision.is-ganada strong { color: var(--success); }

.cap-comision small {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-2);
}

.cap-ver-cobros {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent-hi);
  font: 500 13px var(--font);
  cursor: pointer;
}

/* ── Mis cobros ───────────────────────────────────── */

.cap-cobro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.cap-cobro-cabeza {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.cap-cobro-cabeza strong:first-child { overflow-wrap: anywhere; }

.cap-cobro-monto,
.cap-cobro-total {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.cap-cobro-total {
  margin-left: auto;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Lista ────────────────────────────────────────── */

.cap-btn-nueva {
  width: 100%;
  height: 48px;
  margin-bottom: var(--space-4);
  font-size: 15px;
}

.cap-filtros {
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4)) var(--space-3);
  padding: 0 var(--space-4) 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cap-filtros::-webkit-scrollbar { display: none; }

.cap-chip {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  color: var(--text-2);
  font: 500 13px var(--font);
  cursor: pointer;
}

.cap-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hi);
}

.cap-buscar,
.cap-campo input,
.cap-campo textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 16px var(--font);
  appearance: none;
}

.cap-campo textarea {
  min-height: 0;
  resize: vertical;
}

.cap-buscar { margin-bottom: var(--space-3); }

.cap-buscar:focus,
.cap-campo input:focus,
.cap-campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cap-campo input:disabled,
.cap-campo textarea:disabled {
  opacity: 0.7;
}

.cap-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cap-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

.cap-tarjeta:active { background: var(--surface-hover); }

.cap-tarjeta-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.cap-tarjeta-cabeza strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.cap-tarjeta-dato {
  font-size: 13px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.cap-tarjeta-dato i { width: 14px; margin-right: 4px; }

.cap-tarjeta-comision.is-ganada { color: var(--success); }
.cap-tarjeta-comision.is-estimada { color: var(--warning); }

.cap-vacio {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--text-2);
  font-size: 14px;
}

/* ── Ficha ────────────────────────────────────────── */

.cap-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-2);
  font: 500 14px var(--font);
  cursor: pointer;
}

.cap-titulo {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cap-aviso {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: 13px;
}

.cap-aviso[hidden] { display: none; }

.cap-bloque {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.cap-bloque legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

.cap-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--text-2);
  clear: both;
}

.cap-campo[hidden],
.cap-bloque [hidden] { display: none; }

.cap-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  clear: both;
}

.cap-pregunta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--text-2);
  clear: both;
}

.cap-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cap-opciones button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 14px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font: 500 14px var(--font);
  cursor: pointer;
}

.cap-opciones button.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.cap-opciones button:disabled { cursor: default; }

.cap-opciones-estado {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-4);
  clear: both;
}

.cap-extra summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}

.cap-extra[open] summary { margin-bottom: var(--space-2); }

.cap-ayuda {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--text-2);
}

.cap-historial {
  margin-bottom: var(--space-4);
  font-size: 13px;
}

.cap-historial h3 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  color: var(--text-2);
}

.cap-historial-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.cap-historial-item span:first-child {
  font-size: 11px;
  color: var(--text-muted);
}

.cap-form-pie {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cap-form-pie .v-btn {
  width: 100%;
  height: 48px;
  font-size: 15px;
}

/* ── Resumen ──────────────────────────────────────── */

.cap-resumen {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Guía ─────────────────────────────────────────── */

.cap-guia .cap-bloque h3 {
  margin: 0 0 var(--space-2);
  font-size: 15px;
}

.cap-guia .cap-bloque p,
.cap-guia .cap-bloque li {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.cap-guia .cap-bloque ul { margin: 0; padding-left: 18px; }

.cap-guia .cap-guion {
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent);
  color: var(--text);
}

.cap-respuestas { margin: 0; }

.cap-respuestas dt {
  margin-top: var(--space-3);
  font-size: 14px;
  font-weight: 600;
}

.cap-respuestas dd {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ── Estado de la red y fichas sin enviar ─────────── */

.cap-red {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 640px;
  margin: var(--space-3) auto 0;
  padding: var(--space-2) var(--space-3);
  box-sizing: border-box;
  width: calc(100% - 2 * var(--space-4));
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: 13px;
  line-height: 1.35;
}

.cap-red[hidden] { display: none; }

.cap-red.is-error {
  background: var(--danger-soft);
  color: var(--danger);
}

.cap-red span { flex: 1; min-width: 0; }

.cap-red-boton,
.cap-aviso-boton {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: inherit;
  font: 600 13px var(--font);
  cursor: pointer;
}

.cap-red-boton[hidden],
.cap-aviso-boton[hidden] { display: none; }

.cap-aviso { align-items: center; }
.cap-aviso > span { flex: 1; min-width: 0; }

.cap-aviso-info {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

/* ── Hoy ──────────────────────────────────────────── */

.cap-hoy-grupo { margin-bottom: var(--space-5); }

.cap-hoy-grupo h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.cap-hoy-cuenta {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-overlay);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0;
  text-align: center;
}

.cap-item {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cap-item .cap-tarjeta {
  border: 0;
  border-radius: 0;
}

.cap-tarjeta-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex: none;
  max-width: 60%;
}

.cap-tarjeta-dato.is-destacado { color: var(--text); font-weight: 600; }
.cap-tarjeta-dato.is-vencido { color: var(--danger); }

div.cap-vacio p { margin: 0 0 var(--space-2); }

/* ── Llamar / WhatsApp / Cómo llegar ──────────────── */

.cap-contacto {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cap-contacto[hidden] { display: none; }

.cap-contacto-item {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
}

.cap-contacto-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 0;
  padding: 0 8px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 500 14px var(--font);
  text-decoration: none;
  white-space: nowrap;
}

.cap-contacto-btn[hidden] { display: none; }
.cap-contacto-btn:active { background: var(--surface-hover); }
.cap-contacto-btn .fa-whatsapp { color: var(--success); }

/* ── Volver el ────────────────────────────────────── */

.cap-atajos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-1)) 0 var(--space-3);
}

/* Las pestañas son tres: más angostas en pantallas chicas. */
@media (max-width: 380px) {
  .cap-tab { font-size: 13px; }
}

/* ── Turnos de Gastón ─────────────────────────────── */

.cap-turnos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  clear: both;
}

.cap-turnos[hidden] { display: none; }

.cap-turnos-titulo {
  font-size: 13px;
  color: var(--text-2);
}

.cap-turnos-dias {
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4) 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cap-turnos-dias::-webkit-scrollbar { display: none; }

.cap-turnos-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--space-2);
}

.cap-hora {
  min-height: 44px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 600 15px var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.cap-hora.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hi);
}

.cap-turnos .cap-ayuda { margin: 0; }
.cap-turnos .cap-ayuda[hidden] { display: none; }