/* Clientes por etapa (administración, 02/10). Usa las tarjetas, tablas y botones de la administración. */
.stages { transition: opacity .2s var(--ease); }
.stages.is-loading { opacity: .55; }
.stages .admin-toolbar p { max-width: 70ch; margin-top: 6px; font-size: 13px; line-height: 1.55; }
.stage-sub { margin: 22px 0 10px; font-size: 15px; }

/* El camino del cliente: barras finas; la cifra y el texto en tinta. */
.stage-funnel { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stage-funnel li { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(80px, 2fr) 44px 150px; align-items: center; gap: 12px; font-size: 13px; }
.stage-funnel-bar { height: 10px; border-radius: 99px; background: var(--surface-3, #E9F1ED); overflow: hidden; }
.stage-funnel-bar i { display: block; height: 100%; border-radius: inherit; background: var(--e600, #0B6B4B); }
.stage-funnel li:last-child .stage-funnel-bar i { background: var(--o600, #E06A0B); }
.stage-funnel b { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; }
.stage-funnel small { font-size: 11.5px; color: var(--text-3); }

/* Las etapas: botones con su cantidad. «Listos para pagar» va en naranja. */
.stage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 8px 6px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.stage-chip b { min-width: 26px; padding: 2px 8px; border-radius: 99px; font-size: 12px; text-align: center; background: var(--surface-3); }
.stage-chip:hover { background: var(--surface-3); }
.stage-chip[aria-pressed='true'] { color: #fff; background: #0B6B4B; box-shadow: none; }
.stage-chip[aria-pressed='true'] b { color: #0B6B4B; background: #fff; }
.stage-chip.is-hot { box-shadow: inset 0 0 0 1.5px var(--o600, #E06A0B); }
/* Colores fijos: en el tema oscuro los naranjas del tema se aclaran y la letra blanca dejaría de leerse. */
.stage-chip.is-hot[aria-pressed='true'] { color: #fff; background: #A84708; box-shadow: none; }
.stage-chip.is-hot[aria-pressed='true'] b { color: #A84708; background: #fff; }
.stage-advice { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55; color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.stage-advice b { color: var(--text); }
.stage-search { margin-top: 18px; align-items: center; gap: 12px; }
.stage-search .muted { font-size: 12.5px; }
.stage-table td small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.stage-table .admin-row-actions { flex-wrap: wrap; }
.stage-table td[data-label='Cliente'] { min-width: 230px; }
.stage-table td[data-label='Uso'] { min-width: 300px; }
.stage-table td[data-label='Cliente'] .admin-person small { overflow-wrap: anywhere; }
.stage-temp { font-size: 15px; }
.stage-moves { white-space: nowrap; }
.stages-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; }
.stages-card h2 { margin: 0 0 4px; }
.stages-card p { margin: 0 0 10px; font-size: 13px; }
.stage-chips.is-compact .stage-chip { min-height: 34px; font-size: 12.5px; }
/* Cómo va el enganche (03/10): cinco números con su meta, y la tabla por semana plegada. */
.engage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.engage-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.engage-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.engage-goal { padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; color: var(--text-3); background: var(--surface-3); }
.engage-goal.is-ok { color: #fff; background: #0B6B4B; }
.engage-tile b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.engage-tile small { font-size: 11.5px; color: var(--text-3); }
.engage-tile p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.engage-trend.is-up { color: #0B6B4B; }
.engage-trend.is-down { color: #B42318; }
.engage-weeks { margin-top: 12px; }
.engage-weeks summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-2); }
.engage-table td, .engage-table th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.engage-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; max-width: 80ch; }
@media (max-width: 650px) {
  .stage-funnel li { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 4px; }
  .stage-funnel-bar { grid-column: 1 / -1; grid-row: 2; }
  .stage-funnel small { grid-column: 1 / -1; }
  .stage-search { flex-direction: column; align-items: stretch; }
  .stages-card { flex-direction: column; align-items: stretch; }
}

/* Seguimiento de ventas (04/10): la bitácora por cliente y la tabla de estrategias. */
.stage-log { margin-top: 8px; font-size: 12px; }
.stage-log summary { cursor: pointer; color: var(--text-2); font-weight: 600; list-style: none; }
.stage-log summary::-webkit-details-marker { display: none; }
.stage-log summary::before { content: '▸ '; color: var(--text-3); }
.stage-log[open] summary::before { content: '▾ '; }
.stage-log-last { font-weight: 500; }
.stage-log ol { margin: 8px 0 0; padding: 0 0 0 10px; list-style: none; border-left: 2px solid var(--line-2); display: grid; gap: 8px; }
.stage-log-item { display: grid; gap: 3px; }
.stage-log-head { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.stage-log-when { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage-log-what { font-weight: 600; color: var(--text); }
.stage-log-item.is-failed .stage-log-what { color: var(--text-3); }
.stage-log-resp { font-weight: 600; }
.stage-log-resp small { font-weight: 400; color: var(--text-3); }
.stage-log .is-good, .stage-log-last .is-good { color: var(--e600, #0B6B4B); }
.stage-log .is-bad, .stage-log-last .is-bad { color: var(--o600, #A84708); }
.stage-log-text { margin: 2px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); white-space: pre-wrap; line-height: 1.45; max-width: 60ch; font-size: 11.5px; }
.stage-nolog { display: block; margin-top: 8px; font-size: 11.5px; }
.stage-week { margin: 0 0 6px; font-size: 14px; }
.stage-strategies { margin-top: 18px; }
.stage-strategies-note { max-width: 80ch; margin: -4px 0 10px; font-size: 12.5px; line-height: 1.5; }
.stage-strategy-table td small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.stage-strategy-table tr.is-off td { opacity: .6; }
.stage-stats { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; }
.stage-stats b { font-variant-numeric: tabular-nums; }
.stage-example { margin-top: 6px; font-size: 12px; }
.stage-example summary { cursor: pointer; color: var(--e600, #0B6B4B); font-weight: 600; }
.stage-example p { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); white-space: pre-wrap; line-height: 1.5; max-width: 60ch; color: var(--text-2); }
.stage-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.stage-switch input { width: 18px; height: 18px; accent-color: var(--e600, #0B6B4B); }

/* «Registrar pago» (05/10): el botón de la fila (el que activa su plan con un pago) y su ventana. */
.stage-table .admin-small-btn.is-pay { color: #fff; background: #0B6B4B; box-shadow: none; }
.stage-table .admin-small-btn.is-pay:hover { background: #095C40; }
.pay-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#actionFields .pay-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; margin-top: 16px; }
#actionFields .pay-fields .field { margin: 0; }
#actionFields .field small.muted { font-size: 12px; font-weight: 600; }
#actionFields .field textarea + small { display: block; margin-top: 6px; }
#actionFields .field input[type='file'] { min-height: 0; padding: 10px 12px; font-size: 13px; }
#actionFields .pay-warning { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #7A3A05; background: #FFF1E2; box-shadow: inset 0 0 0 1px #F4C99C; }
@media (max-width: 520px) { #actionFields .pay-fields { grid-template-columns: 1fr; } }