/* ==========================================================================
   Componentes UI — CableSpeedy Admin
   Estados obligatorios por componente: default/hover/focus/active/disabled/loading
   ========================================================================== */

/* ---- Botones ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: var(--r-btn);
    font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 600;
    letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn .ico { width: 17px; height: 17px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: var(--fs-12); border-radius: var(--r-md); }
.btn-lg { height: 46px; padding: 0 20px; font-size: var(--fs-14); }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); color: var(--accent-ink); box-shadow: var(--shadow-accent); }

.btn-secondary { background: var(--surface); color: var(--text-secondary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-faint); color: var(--text); }

.btn-subtle { background: transparent; color: var(--text-secondary); }
.btn-subtle:hover { background: var(--surface-2); color: var(--text); }

.btn-dark { background: var(--nav-bg); color: var(--nav-text-strong); }
.btn-dark:hover { background: var(--nav-bg-2); box-shadow: var(--shadow-md); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-ink); }

/* Loading */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
    content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    color: var(--accent-ink); animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Card base ---------------------------------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); box-shadow: var(--shadow-xs);
}
.card__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.card__title { font-size: var(--fs-14); font-weight: 700; letter-spacing: -0.01em; }
.card__subtitle { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.card__body { padding: var(--space-5); }
.card__body--flush { padding: 0; }
.h-full { height: 100%; }

/* ---- Encabezado de página ---------------------------------------------- */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
    margin-bottom: var(--space-6); flex-wrap: wrap;
}
.page-head h2 { font-size: var(--fs-22); font-weight: 700; letter-spacing: -0.025em; }
.page-head .sub { color: var(--text-muted); font-size: var(--fs-13); margin-top: 3px; }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- KPI (secundarios) -------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
    padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med);
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kpi__ico { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex: 0 0 auto; }
.kpi__ico .ico { width: 18px; height: 18px; }
.kpi__ico--accent  { background: var(--accent-soft); color: var(--accent-deep); }
.kpi__ico--success { background: var(--success-soft); color: var(--success-ink); }
.kpi__ico--danger  { background: var(--danger-soft); color: var(--danger-ink); }
.kpi__ico--info    { background: var(--info-soft); color: var(--info-ink); }
.kpi__ico--warn    { background: var(--warn-soft); color: var(--warn-ink); }
.kpi__ico--neutral { background: var(--neutral-soft); color: var(--text-secondary); }
.kpi__label { font-size: var(--fs-12); color: var(--text-muted); font-weight: 500; }
.kpi__value { font-size: var(--fs-28); font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1.05; }
.kpi__value small { font-size: var(--fs-16); font-weight: 600; color: var(--text-muted); }
.kpi__foot { margin-top: 8px; font-size: var(--fs-12); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

/* ---- Banda de cobranza (hero financiero, no card-soup) ------------------ */
.cobranza {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
    box-shadow: var(--shadow-sm); overflow: hidden;
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
}
.cobranza__main { padding: var(--space-6); }
.cobranza__side {
    padding: var(--space-6);
    background: var(--nav-bg);
    background-image: linear-gradient(160deg, var(--nav-bg-2), var(--nav-bg));
    color: var(--nav-text); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
}
.cobranza__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cobranza__figures { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); margin-top: var(--space-4); }
.figure { display: flex; flex-direction: column; gap: 3px; }
.figure__label { font-size: var(--fs-12); color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.figure__dot { width: 8px; height: 8px; border-radius: var(--r-full); }
.figure__value { font-size: var(--fs-22); font-weight: 700; letter-spacing: -0.025em; }
.figure__value.is-cobrado { color: var(--accent-deep); }
.figure__value.is-pendiente { color: var(--warn-ink); }

.progress-track { height: 10px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; margin-top: var(--space-5); }
.progress-fill { height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width var(--t-slow); }
.progress-legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-12); color: var(--text-muted); }

.cobranza__ring { display: flex; align-items: baseline; gap: 10px; }
.cobranza__pct { font-size: var(--fs-34); font-weight: 800; letter-spacing: -0.035em; color: var(--accent-hi); line-height: 1; }
.cobranza__side .lbl { font-size: var(--fs-13); color: var(--nav-muted); }
.cobranza__meter { height: 8px; border-radius: var(--r-full); background: oklch(1 0 0 / 0.10); overflow: hidden; }
.cobranza__meter > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width var(--t-slow); }
.cobranza__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-13); }
.cobranza__row .k { color: var(--nav-muted); }
.cobranza__row .v { color: var(--nav-text-strong); font-weight: 600; }

/* ---- Badges de estado --------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 8px; border-radius: var(--r-full);
    font-size: var(--fs-11); font-weight: 600; line-height: 1.45; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.badge--success { background: var(--success-soft); color: var(--success-ink); }
.badge--danger  { background: var(--danger-soft); color: var(--danger-ink); }
.badge--warn    { background: var(--warn-soft); color: var(--warn-ink); }
.badge--info    { background: var(--info-soft); color: var(--info-ink); }
.badge--accent  { background: var(--accent-soft); color: var(--accent-deep); }
.badge--neutral { background: var(--neutral-soft); color: var(--text-secondary); }
.badge--dark    { background: var(--nav-bg); color: var(--nav-text-strong); }
.badge.no-dot::before { display: none; }

/* ---- Toolbar + filtros (tablas modernas) -------------------------------- */
.toolbar {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle);
}
.toolbar__search {
    display: flex; align-items: center; gap: 8px; height: 38px; min-width: 220px; flex: 1 1 240px; max-width: 360px;
    padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--surface-2); color: var(--text-muted);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.toolbar__search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-ring); }
.toolbar__search .ico { width: 16px; height: 16px; }
.toolbar__search input { border: 0; background: transparent; outline: none; font: inherit; font-size: var(--fs-13); color: var(--text); width: 100%; }
.toolbar__spacer { flex: 1 1 auto; }

/* Chips de filtro */
.filter-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--surface);
    color: var(--text-secondary); font-size: var(--fs-13); font-weight: 500; cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.filter-chip:hover { border-color: var(--border-strong); color: var(--text); }
.filter-chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.filter-chip .ico { width: 15px; height: 15px; }
.filter-chip__count { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-full); background: var(--surface-sunken); color: var(--text-muted); }
.filter-chip.is-active .filter-chip__count { background: var(--accent); color: var(--accent-ink); }

/* Select nativo estilizado */
.select-field {
    height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--border); border-radius: var(--r-btn);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
    font: inherit; font-size: var(--fs-13); color: var(--text); appearance: none; cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.select-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.select-field:disabled { background-color: var(--surface-2); color: var(--text-muted); cursor: not-allowed; opacity: .7; }

/* ---- Tabla -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
@media (max-width: 575.98px) { .table { min-width: 480px; } } /* evita columnas aplastadas */
.table thead th {
    position: sticky; top: 0; z-index: 1;
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-faint); font-weight: 600; background: var(--surface-2);
    padding: 11px var(--space-5); border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody td {
    padding: 13px var(--space-5); border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-13); color: var(--text-secondary); vertical-align: middle;
}
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-strong { color: var(--text); font-weight: 600; }
.table .cell-primary { display: flex; align-items: center; gap: 10px; }

.table-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-12); color: var(--text-muted); flex-wrap: wrap;
}
.pager { display: flex; gap: 4px; align-items: center; }
.pager button, .pager .btn-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-secondary); font-size: var(--fs-12); font-weight: 600; cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pager button:hover, .pager .btn-page:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.pager button.is-active, .pager .btn-page.is-active { background: var(--nav-bg); color: var(--nav-text-strong); border-color: var(--nav-bg); }
.pager-gap { color: var(--text-faint); padding: 0 2px; }

/* Avatar en celdas/listas */
.cell-avatar, .list-row__avatar {
    width: 34px; height: 34px; border-radius: var(--r-md);
    background: var(--accent-soft); color: var(--accent-deep);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-12); flex: 0 0 auto;
}

/* ---- Listas limpias ----------------------------------------------------- */
.list-clean { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.list-row:first-child { padding-top: 0; }
.list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-row__main { flex: 1 1 auto; min-width: 0; }
.list-row__title { font-size: var(--fs-13); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row__meta { font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-row__value { font-size: var(--fs-13); font-weight: 700; color: var(--text); text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---- Empty state (enseña) ---------------------------------------------- */
.empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: var(--space-8) var(--space-4); color: var(--text-muted);
}
.empty__ico { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--surface-sunken); color: var(--text-faint); display: grid; place-items: center; margin-bottom: var(--space-3); }
.empty__ico .ico { width: 22px; height: 22px; }
.empty__title { font-size: var(--fs-14); font-weight: 600; color: var(--text-secondary); }
.empty__text { font-size: var(--fs-13); margin-top: 3px; max-width: 280px; }
.empty__action { margin-top: var(--space-4); }

/* ---- Skeleton loader ---------------------------------------------------- */
.sk { position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: var(--r-sm); }
.sk::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.55), transparent);
    animation: shimmer 1.3s var(--ease) infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 12px; margin: 6px 0; }
.sk-line.w-40 { width: 40%; } .sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; }
.sk-circle { width: 34px; height: 34px; border-radius: var(--r-md); }

/* ---- Progress genérico -------------------------------------------------- */
.progress { height: 8px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width var(--t-slow); }
.progress > span.is-success { background: var(--success); }
.progress > span.is-warn { background: var(--warn); }
.progress > span.is-danger { background: var(--danger); }

/* ---- Alertas / flash ---------------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: var(--r-md);
    font-size: var(--fs-13); font-weight: 500; margin-bottom: var(--space-4); border: 1px solid transparent;
}
.alert .ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.alert__close { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .55; font-size: 18px; line-height: 1; }
.alert__close:hover { opacity: 1; }
.alert--success { background: var(--success-soft); color: var(--success-ink); border-color: oklch(0.87 0.06 152); }
.alert--danger  { background: var(--danger-soft); color: var(--danger-ink); border-color: oklch(0.90 0.05 25); }
.alert--warn    { background: var(--warn-soft); color: var(--warn-ink); border-color: oklch(0.90 0.06 78); }
.alert--info    { background: var(--info-soft); color: var(--info-ink); border-color: oklch(0.89 0.05 258); }

/* ---- Toasts ------------------------------------------------------------- */
.toast-host { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 1080; pointer-events: none; }
.toast-item {
    display: flex; align-items: center; gap: 10px; background: var(--nav-bg); color: var(--nav-text-strong);
    padding: 11px 15px; border-radius: var(--r-btn); font-size: var(--fs-13); font-weight: 500;
    box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px);
    transition: opacity var(--t-med), transform var(--t-med); max-width: 340px; border: 1px solid var(--nav-border);
}
.toast-item.is-visible { opacity: 1; transform: translateY(0); }
.toast-item b, .toast-item strong { color: var(--accent-hi); font-weight: 600; }
.toast-item__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); flex: 0 0 auto; }

/* ---- Modal -------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; background: oklch(0.16 0.03 262 / 0.55); backdrop-filter: blur(2px); z-index: 1060; display: grid; place-items: center; padding: var(--space-4); }
.modal {
    width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden;
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.modal__title { font-size: var(--fs-16); font-weight: 700; }
.modal__body { padding: var(--space-5); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--surface-2); }

/* ---- Formularios -------------------------------------------------------- */
.form-field { margin-bottom: var(--space-4); }
.form-field > label { display: block; font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.input {
    width: 100%; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r-btn);
    background: var(--surface); padding: 0 14px; font-family: var(--font-sans); font-size: var(--fs-14); color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.input:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.input.has-error { border-color: var(--danger); }
.field-error { color: var(--danger-ink); font-size: var(--fs-12); margin-top: 6px; }

/* ---- Checkbox / Radio (nativos estilizados, accesibles) ----------------- */
.control { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-13); color: var(--text-secondary); cursor: pointer; user-select: none; }
.control input[type="checkbox"], .control input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.control input:disabled { cursor: not-allowed; }
.control.is-disabled { color: var(--text-faint); cursor: not-allowed; }

/* ---- Switch ------------------------------------------------------------- */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-13); color: var(--text-secondary); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
    width: 38px; height: 22px; border-radius: var(--r-full); background: var(--border-strong);
    position: relative; transition: background var(--t-fast); flex: 0 0 auto;
}
.switch__track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: var(--r-full); background: #fff; box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; }

/* ---- Tooltip genérico --------------------------------------------------- */
.tip { position: relative; display: inline-flex; }
.tip__bubble {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    background: var(--nav-bg); color: var(--nav-text-strong); font-size: var(--fs-12); font-weight: 500;
    padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast); z-index: 1060;
}
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Input group (prefijo/sufijo, ej. S/) ------------------------------- */
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--r-btn); border-bottom-left-radius: var(--r-btn); }
.input-group > :last-child { border-top-right-radius: var(--r-btn); border-bottom-right-radius: var(--r-btn); }
.input-group__addon {
    display: inline-flex; align-items: center; padding: 0 12px; font-size: var(--fs-13); font-weight: 600;
    color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-strong);
}
.input-group .input + .input-group__addon, .input-group__addon + .input { border-left: 0; }
.field-hint { color: var(--text-muted); font-size: var(--fs-12); margin-top: 6px; }

/* ---- Tabs --------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); }
.tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    padding: 10px 14px; font: inherit; font-size: var(--fs-13); font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--text-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb__sep { color: var(--text-faint); display: inline-flex; }
.breadcrumb__sep .ico { width: 15px; height: 15px; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---- Spinner / loader --------------------------------------------------- */
.spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid var(--border-strong); border-top-color: var(--accent);
    animation: spin .7s linear infinite; display: inline-block;
}
.spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.spinner--lg { width: 30px; height: 30px; border-width: 3px; }
.loader-block { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: var(--space-8); color: var(--text-muted); font-size: var(--fs-13); }

/* ---- Activity item ------------------------------------------------------ */
.activity { display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.activity-item:last-child { border-bottom: 0; }
.activity-item__dot {
    width: 30px; height: 30px; border-radius: var(--r-md); flex: 0 0 auto; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent-deep);
}
.activity-item__dot .ico { width: 16px; height: 16px; }
.activity-item__body { flex: 1 1 auto; min-width: 0; }
.activity-item__text { font-size: var(--fs-13); color: var(--text); }
.activity-item__text b { font-weight: 600; }
.activity-item__time { font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }

/* ---- Metric card (compacto, con delta) ---------------------------------- */
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-xs); }
.metric__label { font-size: var(--fs-12); color: var(--text-muted); font-weight: 500; }
.metric__value { font-size: var(--fs-22); font-weight: 700; letter-spacing: -0.025em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.metric__delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); font-weight: 600; margin-top: 6px; }
.metric__delta .ico { width: 14px; height: 14px; }
.metric__delta.is-up { color: var(--success-ink); }
.metric__delta.is-down { color: var(--danger-ink); }

/* ---- Segmented / tabs --------------------------------------------------- */
.segmented { display: inline-flex; padding: 3px; background: var(--surface-sunken); border-radius: var(--r-btn); gap: 2px; }
.segmented button {
    height: 32px; padding: 0 14px; border: 0; background: transparent; border-radius: var(--r-md);
    font: inherit; font-size: var(--fs-13); font-weight: 600; color: var(--text-muted); cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

.legend-inline { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.legend-inline .item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--text-secondary); font-weight: 500; }
.legend-inline .swatch { width: 10px; height: 10px; border-radius: 3px; }

.chart-box { position: relative; width: 100%; height: 296px; }
.chart-box canvas { max-width: 100%; }
@media (max-width: 767.98px) { .chart-box { height: 260px; } }
@media (max-width: 480px) { .chart-box { height: 230px; } }

/* ---- Grid genérico (reutilizable en módulos) ---------------------------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }

@media (max-width: 1199.98px) {
    .col-7, .col-8 { grid-column: span 12; }
    .col-4, .col-5 { grid-column: span 6; }
}
@media (max-width: 767.98px) {
    .col-3, .col-4, .col-5, .col-6 { grid-column: span 12; }
}

/* ---- Dashboard: grilla real que se redistribuye por tamaño -------------- */
.dash { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); align-items: stretch; }
.dash > * { min-width: 0; }
.d-cobranza    { grid-column: span 12; }
.d-kpis        { grid-column: span 12; }
.d-chart-main  { grid-column: span 8; }
.d-chart-donut { grid-column: span 4; }
.d-proximos    { grid-column: span 8; }
.d-pagos       { grid-column: span 4; }
.d-deuda       { grid-column: span 6; }
.d-hoy         { grid-column: span 6; }

/* KPIs internos */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

/* Tablet grande / desktop chico */
@media (max-width: 1199.98px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cobranza { grid-template-columns: 1fr; }
    .d-chart-main, .d-proximos { grid-column: span 12; }
    .d-chart-donut, .d-pagos { grid-column: span 12; }
    .d-deuda, .d-hoy { grid-column: span 6; }
}
@media (max-width: 767.98px) {
    .d-deuda, .d-hoy { grid-column: span 12; }
}
@media (max-width: 575.98px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .toast-host { left: 16px; right: 16px; bottom: 16px; }
    .toast-item { max-width: none; }
}

/* Ultrawide: redistribuir widgets en columnas, sin estirar componentes */
@media (min-width: 2000px) {
    .dash { gap: var(--space-5); }
    .d-cobranza { grid-column: span 8; }
    .d-kpis { grid-column: span 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-chart-main { grid-column: span 8; }
    .d-chart-donut { grid-column: span 4; }
    .d-proximos { grid-column: span 12; }
    .d-pagos { grid-column: span 4; }
    .d-deuda { grid-column: span 4; }
    .d-hoy { grid-column: span 4; }
}
@media (min-width: 2560px) {
    /* charts + próximos comparten una sola fila (5 + 3 + 4 = 12) */
    .d-chart-main { grid-column: span 5; }
    .d-chart-donut { grid-column: span 3; }
    .d-proximos { grid-column: span 4; }
}

/* ---- Link button (acción textual dentro de formularios) ------------------ */
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-12); font-weight: 600; color: var(--primary); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ---- Wizard / Stepper (Nueva instalación) -------------------------------- */
.wizard { max-width: 860px; margin-inline: auto; overflow: hidden; }
.wizard__body { padding: var(--space-6); }
.wizard__title { font-size: var(--fs-18); font-weight: 650; margin: 0 0 var(--space-1); color: var(--text); }
.wizard__title:focus { outline: none; }
.wizard__hint { font-size: var(--fs-13); color: var(--text-muted); margin: 0 0 var(--space-5); }
.wizard__foot { align-items: center; }

.stepper { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--surface-2); }
.stepper__item { flex: 1 1 0; min-width: 0; position: relative; }
.stepper__btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; background: none; border: 0; padding: 6px 4px; font: inherit; color: var(--text-muted); cursor: pointer; text-align: left; border-radius: var(--r-sm); }
.stepper__btn:disabled { cursor: default; }
.stepper__num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); font-size: var(--fs-12); font-weight: 700; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-muted); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.stepper__label { font-size: var(--fs-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper__item.is-current .stepper__btn { color: var(--text); }
.stepper__item.is-current .stepper__num { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.stepper__item.is-done .stepper__num { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.stepper__item.is-done .stepper__btn { color: var(--text-secondary); }
.stepper__item.is-done .stepper__btn:hover .stepper__label { text-decoration: underline; }

/* Tarjetas seleccionables (plan) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
.choice-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.choice-card:hover { border-color: var(--border-strong); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--accent-soft); }
.choice-card__service { font-size: var(--fs-11); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.choice-card__name { font-size: var(--fs-14); font-weight: 650; color: var(--text); }
.choice-card__price { font-size: var(--fs-18); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-top: var(--space-1); }
.choice-card__price small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }

/* Ficha del titular existente */
.titular-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-4); background: var(--surface); }
.titular-card__head { display: flex; align-items: center; gap: var(--space-3); }
.titular-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font-size: var(--fs-13); color: var(--text-secondary); }
.titular-card__services { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.titular-card__label { font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.titular-card__service { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-13); padding: 6px 0; min-width: 0; }

/* Resumen de confirmación */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.summary { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-4); }
.summary__head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-12); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--fs-13); }
.summary dt { color: var(--text-muted); }
.summary dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    .wizard__body { padding: var(--space-4); }
    .stepper { padding: var(--space-3) var(--space-4); }
    .stepper__label { display: none; }
    .stepper__item.is-current .stepper__label { display: inline; }
    .summary-grid { grid-template-columns: 1fr; }
    .titular-card__service { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .stepper__num, .choice-card { transition: none; }
}

/* ---- Combobox con búsqueda (selector de cliente) ------------------------- */
.combo { position: relative; }
.combo__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 4px; }
.combo__opt { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer; color: var(--text); }
.combo__opt.is-active { background: var(--surface-2); }
.combo__empty { padding: 10px; font-size: var(--fs-13); color: var(--text-muted); }