/* clientes.css — Portal de Cliente. Se apoya en Tabler (CDN) para los
   componentes base. Diseño calcado (adaptado a los 3 datos reales que hay:
   Deuda Actual/Saldo/Estado) de una referencia visual que el usuario compartió:
   fondo oscuro con glow difuminado, shell flotante redondeado, card
   "destacada" con degradado, gauges circulares (Chart.js) con brillo, sidebar
   con pill de degradado en el ítem activo. Tema oscuro por defecto + toggle a
   claro (persistido en localStorage, ver js/theme.js) — variables por tema
   bajo [data-theme]. Colores de estado VALIDADOS con el validador de
   contraste/CVD del skill de dataviz para AMBOS modos (ver memoria del
   proyecto) — no cambiar sin volver a validar. */

/* Transición nativa del navegador entre páginas (View Transitions API,
   cross-document): la página que se va se desvanece mientras la nueva
   aparece encima, en vez del salto brusco de una navegación normal. Es
   progressive enhancement puro — en navegadores sin soporte (Firefox/Safari
   a la fecha) simplemente no hace nada, la navegación sigue funcionando
   igual que siempre, sin errores. No requiere JS. */
@view-transition {
    navigation: auto;
}

:root, [data-theme="dark"] {
    --cp-bg:         #1c2440;
    --cp-page-bg:    #10152a;
    --cp-card-bg:    #29324f;
    --cp-card-bg-2:  #323c5c;
    --cp-text:       #eef1f6;
    --cp-text-muted: #939bb1;
    --cp-border:     rgba(255,255,255,0.09);
    --cp-sidebar-bg: #161c30;
    --cp-sidebar-text: #b2b9cc;
    --cp-danger:  #e0574f;
    --cp-warning: #c07f1e;
    --cp-success: #3aab77;
    --cp-info:    #5d78e8;
    --cp-brand-from: #4f6df5;
    --cp-brand-to:   #8b5cf6;
    --cp-glow-1: rgba(79,109,245,0.28);
    --cp-glow-2: rgba(139,92,246,0.20);
    --cp-shadow: rgba(0,0,0,0.5);
    --cp-track:  rgba(255,255,255,0.08);
}

[data-theme="light"] {
    --cp-bg:         #eef1f4;
    --cp-page-bg:    #dde1e7;
    --cp-card-bg:    #ffffff;
    --cp-card-bg-2:  #f5f6f8;
    --cp-text:       #1c212b;
    --cp-text-muted: #5b6472;
    --cp-border:     #e1e4ea;
    --cp-sidebar-bg: #f7f8fa;
    --cp-sidebar-text: #57606f;
    --cp-danger:  #c65a5a;
    --cp-warning: #ab7422;
    --cp-success: #4f9d69;
    --cp-info:    #6d7ce0;
    --cp-brand-from: #6d7ce0;
    --cp-brand-to:   #8b5cf6;
    --cp-glow-1: rgba(109,124,224,0.32);
    --cp-glow-2: rgba(139,92,246,0.24);
    --cp-shadow: rgba(30,35,50,0.14);
    --cp-track:  #e6e9ef;
}

html, body { height: 100%; }
body, .cp-login-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--cp-page-bg);
    color: var(--cp-text);
    transition: background 0.2s ease, color 0.2s ease;
}

/* ══════════════════════════ TOGGLE DE TEMA ══════════════════════════ */

.cp-theme-toggle {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--cp-card-bg-2); border: 1px solid var(--cp-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--cp-text-muted); cursor: pointer; font-size: 1.1rem;
    transition: color 0.15s, border-color 0.15s;
}
.cp-theme-toggle:hover { color: var(--cp-text); border-color: var(--cp-brand-to); }

/* ══════════════════════════ LOGIN ══════════════════════════ */

/* Antes tenía overflow:hidden + una altura FIJA (height, no min-height) —
   a diferencia de .cp-app-shell (el resto de /clientes), que usa min-height
   y por eso ya se ve bien centrado en móvil: si el contenido necesita más
   alto que el viewport (ej. teclado abierto al tocar un campo, la barra de
   direcciones del navegador móvil, o simplemente una pantalla chica), con
   height fijo + overflow:hidden el contenido se recortaba sin forma de
   hacer scroll para verlo — quedaba "descentrado"/cortado. Corregido para
   igualar el mismo patrón que ya funciona bien en el resto de la sección. */
.cp-login-body { margin: 0; }

.cp-login-wrap {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh; /* alto real visible en móvil, sin la barra de direcciones/teclado */
    margin: 18px;
    border-radius: 24px;
    overflow: hidden; /* recorta los círculos de glow decorativos al borde redondeado — igual que .cp-app-shell */
    box-shadow: 0 24px 70px var(--cp-shadow);
    position: relative;
    background: var(--cp-bg);
}
.cp-login-wrap::before {
    content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%;
    background: var(--cp-glow-1); filter: blur(90px); top: -160px; right: -120px; z-index: 0;
}
.cp-login-wrap::after {
    content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
    background: var(--cp-glow-2); filter: blur(90px); bottom: -140px; left: 30%; z-index: 0;
}

.cp-theme-toggle-floating { position: absolute; top: 20px; right: 20px; z-index: 2; }

.cp-login-brand {
    flex: 1 1 46%;
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.cp-login-brand::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    top: -200px; right: -200px;
}
.cp-login-brand::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    bottom: -150px; left: -100px;
}
.cp-login-brand-inner { position: relative; z-index: 1; max-width: 420px; color: #fff; }
.cp-brand-logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 24px;
}
.cp-login-brand-inner h1 { font-size: 2rem; font-weight: 800; margin: 0 0 12px; }
.cp-login-brand-inner p { font-size: 1rem; opacity: 0.92; line-height: 1.6; margin-bottom: 28px; }
.cp-brand-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-brand-list li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; opacity: 0.95; }
.cp-brand-list .ti { font-size: 1.2rem; }

.cp-login-form-col {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-bg);
    padding: 24px;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.cp-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-border);
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.2);
}
.cp-login-card h2 { font-weight: 800; margin-bottom: 4px; color: var(--cp-text); }
.cp-login-sub { color: var(--cp-text-muted); font-size: 0.9rem; margin-bottom: 24px; }

.cp-btn-login {
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    border: none;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(79,109,245,0.3);
}
.cp-btn-login:hover { opacity: 0.92; }

/* Tabler pone pointer-events:none en .input-icon-addon por defecto (pensado
   para íconos puramente decorativos) — sin este override el ojo JAMÁS
   recibe clics/toques, aunque el JS esté perfecto. Bug real preexistente
   (ya estaba así desde antes, no lo introduje yo), encontrado recién ahora
   porque hasta hoy nadie había verificado la interacción real en un
   navegador, solo que el HTML/JS se sirviera correctamente. */
.cp-eye { cursor: pointer; pointer-events: auto; }

.cp-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--cp-danger) 12%, transparent);
    color: var(--cp-danger);
    border: 1px solid color-mix(in srgb, var(--cp-danger) 30%, transparent);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-bottom: 18px;
}

.cp-login-footer { text-align: center; font-size: 0.8rem; color: var(--cp-text-muted); margin: 22px 0 0; }

/* Honeypot: fuera de pantalla mediante posición absoluta, NO display:none
   (algunos bots detectan y saltan campos con display:none/visibility:hidden,
   pero sí completan uno que consideran "visible" para el DOM). */
.cp-hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cp-captcha-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-captcha-img {
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--cp-border);
    background: #ecf0f4;
}
.cp-captcha-reload {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-card-bg-2);
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    color: var(--cp-text-muted);
    cursor: pointer;
}
.cp-captcha-reload:hover { color: var(--cp-text); }
.cp-captcha-input { letter-spacing: 2px; }

@media (max-width: 900px) {
    .cp-login-brand { display: none; }
    .cp-login-form-col { flex: 1 1 100%; }
}

/* ══════════════════════════ APP SHELL / DASHBOARD ══════════════════════════ */

.cp-app-shell {
    display: flex;
    margin: 18px;
    min-height: calc(100vh - 36px);
    min-height: calc(100dvh - 36px); /* alto real visible en móvil, sin la barra de direcciones/teclado */
    background: var(--cp-bg);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 70px var(--cp-shadow);
    position: relative;
}
.cp-app-shell::before {
    content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%;
    background: var(--cp-glow-1); filter: blur(90px); top: -160px; right: -100px; z-index: 0;
}
.cp-app-shell::after {
    content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
    background: var(--cp-glow-2); filter: blur(90px); bottom: -160px; left: 260px; z-index: 0;
}

.cp-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--cp-sidebar-bg);
    color: var(--cp-sidebar-text);
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    border-right: 1px solid var(--cp-border);
    position: relative;
    z-index: 1;
}
.cp-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--cp-text); font-weight: 800; font-size: 1.05rem;
    padding: 8px 10px 24px;
}
.cp-sidebar-brand .ti { font-size: 1.4rem; color: var(--cp-brand-to); }

.cp-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cp-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--cp-sidebar-text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.cp-nav a .ti { font-size: 1.15rem; }
.cp-nav a:hover { background: var(--cp-card-bg-2); color: var(--cp-text); }
.cp-nav a.active {
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    color: #fff;
    box-shadow: 0 8px 20px rgba(79,109,245,0.35);
}
.cp-nav a.active .ti { color: #fff; }

.cp-sidebar-footer {
    border-top: 1px solid var(--cp-border);
    padding-top: 14px;
    margin-top: 14px;
}
.cp-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; }
.cp-sidebar-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.cp-sidebar-user-name { color: var(--cp-text); font-size: 0.85rem; font-weight: 600; line-height: 1.2; }
.cp-sidebar-user-code { color: var(--cp-text-muted); font-size: 0.72rem; }
.cp-logout-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; border: none; background: none;
    color: var(--cp-sidebar-text); padding: 10px;
    border-radius: 10px; font-size: 0.88rem; cursor: pointer; text-align: left;
}
.cp-logout-btn:hover { background: var(--cp-card-bg-2); color: var(--cp-text); }

.cp-main { flex: 1; min-width: 0; position: relative; z-index: 1; overflow-y: auto; }
.cp-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 32px;
    border-bottom: 1px solid var(--cp-border);
}
.cp-topbar h1 { font-size: 1.3rem; font-weight: 800; margin: 0; color: var(--cp-text); }
.cp-topbar p { margin: 2px 0 0; color: var(--cp-text-muted); font-size: 0.85rem; }

.cp-content { padding: 28px 32px; }

.cp-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 22px; }
@media (max-width: 860px) { .cp-stats-row { grid-template-columns: 1fr; } }

.cp-stat-card {
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-border);
    border-radius: 20px;
    padding: 22px 24px;
}
.cp-stat-card.cp-featured {
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    border: none;
    box-shadow: 0 16px 36px rgba(79,109,245,0.35);
}
.cp-stat-card.cp-featured .cp-stat-label,
.cp-stat-card.cp-featured .cp-stat-value,
.cp-stat-card.cp-featured .cp-stat-sub { color: #fff; }
.cp-stat-card.cp-featured .cp-stat-sub { color: rgba(255,255,255,0.82); }
/* Gauge Chart.js embebido en la card en vez de un ícono plano — antes era una
   fila de "donas" aparte debajo de las cards de número, mismo dato repetido
   dos veces; el usuario pidió combinarlas en una sola card por métrica. */
.cp-stat-gauge-mini { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.cp-stat-gauge-mini canvas { filter: drop-shadow(0 0 5px var(--gauge-glow, transparent)); }
.cp-stat-gauge-mini-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.15rem; color: var(--gauge-color, var(--cp-text-muted));
}
.cp-stat-card.cp-featured .cp-stat-gauge-mini-icon { color: #fff; }

.cp-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cp-stat-label { font-size: 0.82rem; color: var(--cp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-stat-value { font-size: 2.1rem; font-weight: 800; color: var(--cp-text); line-height: 1.15; }
.cp-stat-sub { font-size: 0.82rem; color: var(--cp-text-muted); margin-top: 4px; }

.cp-badge-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 700;
}
.cp-badge-pill.active    { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); }
.cp-badge-pill.suspended { background: color-mix(in srgb, var(--cp-danger) 16%, transparent); color: var(--cp-danger); }
.cp-badge-pill.success   { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); }
.cp-badge-pill.warning   { background: color-mix(in srgb, var(--cp-warning) 16%, transparent); color: var(--cp-warning); }
.cp-badge-pill.danger    { background: color-mix(in srgb, var(--cp-danger) 16%, transparent); color: var(--cp-danger); }

/* ── Tabla de Facturas (zebra striping para diferenciar filas) ──────────── */
.cp-table-card {
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-border);
    border-radius: 18px;
    overflow: hidden;
}
.cp-table-wrap { overflow-x: auto; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; white-space: nowrap; }
.cp-table th {
    text-align: left; padding: 14px 18px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--cp-text-muted);
    border-bottom: 1px solid var(--cp-border);
}
.cp-table td { padding: 13px 18px; color: var(--cp-text); border-bottom: 1px solid var(--cp-border); }
.cp-table tbody tr:last-child td { border-bottom: none; }
.cp-table tbody tr:nth-child(even) { background: var(--cp-card-bg-2); }
.cp-table-view-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--cp-card-bg-2); color: var(--cp-brand-to);
    text-decoration: none; transition: background 0.15s;
}
.cp-table-view-btn:hover { background: var(--cp-brand-to); color: #fff; }

.cp-pagination {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 20px;
}
.cp-page-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 10px;
    background: var(--cp-card-bg); border: 1px solid var(--cp-border);
    color: var(--cp-text); text-decoration: none; font-size: 0.85rem; font-weight: 600;
    transition: background 0.15s;
}
.cp-page-btn:hover { background: var(--cp-card-bg-2); }
.cp-page-btn.disabled { opacity: 0.4; pointer-events: none; }
.cp-page-info { color: var(--cp-text-muted); font-size: 0.85rem; }

.cp-placeholder-card {
    background: var(--cp-card-bg);
    border: 1px dashed var(--cp-border);
    border-radius: 20px;
    padding: 60px 24px;
    text-align: center;
    color: var(--cp-text-muted);
}
.cp-placeholder-card .ti { font-size: 2.4rem; margin-bottom: 12px; display: block; color: var(--cp-brand-to); }

/* ── Test de Velocidad (fast.com incorporado) ───────────────────────────── */
.cp-speedtest-frame-wrap {
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-border);
    border-radius: 18px;
    overflow: hidden;
    height: calc(100vh - 200px);
    min-height: 480px;
}
.cp-speedtest-frame-wrap iframe {
    width: 100%; height: 100%; border: 0; display: block;
}

/* El modal (soporte.php) usa var(--cp-card-bg) para su fondo, que cambia de
   claro a oscuro con el toggle — el ícono de cerrar de Bootstrap (.btn-close)
   es oscuro por defecto (pensado para fondo claro) y quedaría invisible en
   modo oscuro; se invierte automáticamente según el tema en vez de fijarlo a
   una sola variante con .btn-close-white. */
[data-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ══════════════════════════ REPORTAR PAGO ══════════════════════════ */

.cp-alert.info {
    background: color-mix(in srgb, var(--cp-info) 12%, transparent);
    color: var(--cp-info);
    border-color: color-mix(in srgb, var(--cp-info) 30%, transparent);
}
.cp-alert .ti { font-size: 1.1rem; flex-shrink: 0; }

.cp-form-card {
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-border);
    border-radius: 18px;
    padding: 28px;
    max-width: 680px;
    margin: 0 auto;
}
.cp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 560px) {
    .cp-form-row { grid-template-columns: 1fr; }
}
.cp-form-label {
    display: block; font-size: 0.85rem; font-weight: 600;
    color: var(--cp-text); margin-bottom: 6px;
}
.cp-form-static {
    display: flex; align-items: center;
    height: 38px; padding: 0 14px;
    background: var(--cp-card-bg-2);
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    color: var(--cp-text-muted);
    font-weight: 700;
    font-size: 0.95rem;
}
.cp-currency-input { position: relative; }
.cp-currency-input .cp-currency-prefix {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--cp-text-muted); font-weight: 600; pointer-events: none;
}
.cp-currency-input input { padding-left: 28px !important; }
.cp-char-count { text-align: right; font-size: 0.78rem; color: var(--cp-text-muted); margin-top: 4px; }

/* ══════════════════════════ NOTIFICACIONES (Dashboard) ══════════════════════════ */
.cp-notif-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.cp-notif {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--cp-card-bg); border: 1px solid var(--cp-border);
    border-left: 4px solid var(--cp-info);
    border-radius: 12px; padding: 14px 16px; font-size: 0.9rem; color: var(--cp-text);
}
.cp-notif > .ti { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; color: var(--cp-info); }
.cp-notif-body { flex: 1; line-height: 1.45; }
.cp-notif-cause { margin-top: 4px; font-size: 0.82rem; color: var(--cp-text-muted); }
.cp-notif-close {
    background: none; border: none; color: var(--cp-text-muted); cursor: pointer;
    padding: 2px; border-radius: 6px; flex-shrink: 0; display: flex;
}
.cp-notif-close:hover { color: var(--cp-text); background: var(--cp-card-bg-2); }
.cp-notif-close:disabled { opacity: 0.5; cursor: not-allowed; }

.cp-notif-warning { border-left-color: var(--cp-warning); }
.cp-notif-warning > .ti { color: var(--cp-warning); }
.cp-notif-danger { border-left-color: var(--cp-danger); }
.cp-notif-danger > .ti { color: var(--cp-danger); }
.cp-notif-success { border-left-color: var(--cp-success); }
.cp-notif-success > .ti { color: var(--cp-success); }
.cp-notif-info { border-left-color: var(--cp-info); }
.cp-notif-info > .ti { color: var(--cp-info); }

/* ══════════════════════════ MODAL genérico (Mi Cuenta / Confirmar cierre de sesión) ══════════════════════════
   Propio, sin depender de bootstrap.bundle.min.js — nav.php se incluye en
   vistas que NO cargan ese JS (dashboard/facturas/reportar_pago/test_velocidad),
   solo soporte.php lo carga. Mismo criterio que /staff (.staff-modal-backdrop). */
.cp-sidebar-user { cursor: pointer; border-radius: 12px; transition: background 0.15s; }
.cp-sidebar-user:hover { background: var(--cp-card-bg-2); }

.cp-modal-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.55);
    align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cp-modal-backdrop.open { display: flex; }
.cp-modal-backdrop.show { opacity: 1; }
.cp-modal {
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-border);
    border-radius: 18px;
    width: 100%; max-width: 460px;
    max-height: 88vh; overflow-y: auto;
    padding: 24px 26px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s ease;
}
.cp-modal-backdrop.show .cp-modal { transform: translateY(0) scale(1); }
.cp-modal-sm { max-width: 380px; }
.cp-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cp-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--cp-text); }
.cp-modal-close { background: none; border: none; color: var(--cp-text-muted); cursor: pointer; padding: 4px; border-radius: 8px; display: flex; }
.cp-modal-close:hover { color: var(--cp-text); background: var(--cp-card-bg-2); }
.cp-modal-header-actions { display: flex; align-items: center; gap: 4px; }
.cp-modal-icon-btn { background: none; border: none; color: var(--cp-text-muted); cursor: pointer; padding: 4px; border-radius: 8px; display: flex; }
.cp-modal-icon-btn:hover { color: var(--cp-text); background: var(--cp-card-bg-2); }
.cp-modal-section { margin-bottom: 22px; }
.cp-modal-section:last-child { margin-bottom: 0; }
.cp-modal-section-title { font-size: 0.82rem; font-weight: 700; color: var(--cp-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
.cp-modal-body-text { font-size: 0.9rem; color: var(--cp-text); line-height: 1.5; margin: 0 0 20px; }
.cp-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.cp-avatar-preview {
    width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.7rem; margin: 0 auto 14px;
}
.cp-avatar-preview svg { width: 100%; height: 100%; }
.cp-avatar-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 4px; }
.cp-avatar-option {
    background: var(--cp-card-bg-2); border: 2px solid transparent; border-radius: 50%;
    padding: 0; cursor: pointer; transition: border-color 0.15s, transform 0.1s;
    width: 100%; aspect-ratio: 1; overflow: hidden;
}
.cp-avatar-option svg { width: 100%; height: 100%; display: block; }
.cp-avatar-option:hover { transform: scale(1.06); }
.cp-avatar-option.selected { border-color: var(--cp-brand-to); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-brand-to) 35%, transparent); }

.cp-field-hint { font-size: 0.78rem; color: var(--cp-text-muted); margin-top: 5px; }
.cp-field-hint.ok { color: var(--cp-success); }
.cp-field-hint.bad { color: var(--cp-danger); }

.cp-modal-msg { font-size: 0.84rem; border-radius: 10px; padding: 9px 12px; margin-top: 12px; display: none; }
.cp-modal-msg.show { display: block; }
.cp-modal-msg.ok { background: color-mix(in srgb, var(--cp-success) 14%, transparent); color: var(--cp-success); }
.cp-modal-msg.bad { background: color-mix(in srgb, var(--cp-danger) 12%, transparent); color: var(--cp-danger); }

/* ── Pagar en línea: botón "Pagar ahora"/"Pagar" + modal de pasarelas ───── */
.cp-pay-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    color: #fff; border: none; border-radius: 10px;
    padding: 8px 16px; font-size: 0.86rem; font-weight: 700;
    cursor: pointer; transition: opacity 0.15s, transform 0.1s;
}
.cp-pay-btn:hover { opacity: 0.92; }
.cp-pay-btn:active { transform: scale(0.97); }
.cp-pay-btn:disabled { opacity: 0.6; cursor: default; }
.cp-pay-btn-sm { padding: 5px 11px; font-size: 0.78rem; border-radius: 8px; }

/* Dentro de la card "Deuda Actual" (.cp-featured) el fondo de la card usa el
   MISMO degradado que el botón — sin esto el botón se funde y desaparece
   visualmente contra la card. Fondo sólido + texto de marca + sombra real
   para que resalte como botón real, del ancho de su propio texto (no de
   toda la card) y con un cambio de color claro al pasar el mouse. */
.cp-stat-card.cp-featured .cp-pay-btn {
    align-self: flex-start;
    background: #fff;
    color: var(--cp-brand-to);
    border-radius: 999px;
    padding: 9px 20px;
    box-shadow: 0 6px 18px rgba(10,15,35,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}
.cp-stat-card.cp-featured .cp-pay-btn:hover {
    opacity: 1;
    background: var(--cp-brand-to);
    color: #fff;
    box-shadow: 0 8px 22px rgba(10,15,35,0.4);
    transform: translateY(-1px);
}
.cp-stat-card.cp-featured .cp-pay-btn:active { transform: translateY(0) scale(0.97); }

.cp-pago-gateway-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cp-pago-gateway-btn {
    display: flex; align-items: center; gap: 12px;
    background: var(--cp-card-bg-2); border: 1px solid var(--cp-border);
    border-radius: 12px; padding: 12px 14px; cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    width: 100%; text-align: left;
}
.cp-pago-gateway-btn:hover { border-color: var(--cp-brand-to); transform: translateY(-1px); }
.cp-pago-gateway-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.cp-pago-gateway-btn img { height: 26px; max-width: 90px; object-fit: contain; }
.cp-pago-gateway-btn span.cp-pago-provider-name { font-weight: 600; color: var(--cp-text); font-size: 0.92rem; }
.cp-pago-gateway-btn span.cp-pago-provider-price { margin-left: auto; font-weight: 700; color: var(--cp-text); font-size: 0.88rem; }
.cp-pago-gateway-btn span.cp-pago-provider-price + span.ti-chevron-right { margin-left: 8px; }
.cp-pago-gateway-btn span.ti-chevron-right { margin-left: auto; color: var(--cp-text-muted); }

.cp-pago-loading, .cp-pago-empty {
    text-align: center; color: var(--cp-text-muted); font-size: 0.88rem; padding: 20px 10px;
}
#cp_pago_widget_container { margin-top: 8px; }

/* ── Confirmación de pago: monto real + aviso de comisión de la pasarela ── */
.cp-pago-confirm { display: flex; flex-direction: column; gap: 4px; }
.cp-pago-confirm-provider { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cp-pago-confirm-provider img { height: 24px; max-width: 90px; object-fit: contain; }
.cp-pago-confirm-provider span { font-weight: 700; color: var(--cp-text); font-size: 0.92rem; }
.cp-pago-confirm-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.86rem; color: var(--cp-text-muted); padding: 6px 0;
    border-bottom: 1px solid var(--cp-border);
}
.cp-pago-confirm-row span:last-child { color: var(--cp-text); font-weight: 600; }
.cp-pago-confirm-row.cp-pago-confirm-total {
    border-bottom: none; margin-top: 4px; font-size: 1rem; font-weight: 700; color: var(--cp-text);
}
.cp-pago-confirm-row.cp-pago-confirm-total span:last-child { color: var(--cp-text); font-weight: 800; font-size: 1.05rem; }
.cp-pago-confirm-note {
    font-size: 0.78rem; color: var(--cp-text-muted); margin: 10px 0 4px;
    background: color-mix(in srgb, var(--cp-info) 10%, transparent); border-radius: 8px; padding: 9px 11px;
}
.cp-pago-confirm-actions { display: flex; gap: 10px; margin-top: 14px; }
.cp-pago-confirm-actions button { flex: 1; }
.cp-pago-confirm-actions .cp-btn-primary {
    background: linear-gradient(135deg, var(--cp-brand-from), var(--cp-brand-to));
    color: #fff; border: none; border-radius: 10px; padding: 10px 14px;
    font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
}
.cp-pago-confirm-actions .cp-btn-primary:hover { opacity: 0.92; }
.cp-pago-confirm-actions .cp-btn-secondary {
    background: var(--cp-card-bg-2); color: var(--cp-text); border: 1px solid var(--cp-border);
    border-radius: 10px; padding: 10px 14px; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.cp-pago-confirm-actions button:disabled { opacity: 0.5; cursor: default; }

/* ── Detalle de factura (modal al hacer clic en el número) ──────────────── */
.cp-invoice-number-link { color: var(--cp-brand-to); text-decoration: none; cursor: pointer; font-weight: 600; }
.cp-invoice-number-link:hover { text-decoration: underline; }

.cp-detalle-summary {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px;
    background: var(--cp-card-bg-2); border-radius: 10px; padding: 14px; margin-bottom: 18px;
}
.cp-detalle-summary-item .label { font-size: 0.72rem; color: var(--cp-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.cp-detalle-summary-item .value { font-size: 0.95rem; color: var(--cp-text); font-weight: 700; margin-top: 2px; }

.cp-detalle-payment {
    border: 1px solid var(--cp-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.cp-detalle-payment:last-child { margin-bottom: 0; }
.cp-detalle-payment-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.88rem; padding: 3px 0; }
.cp-detalle-payment-row .label { color: var(--cp-text-muted); }
.cp-detalle-payment-row .value { color: var(--cp-text); font-weight: 600; text-align: right; }
/* Comprobantes/IDs de transacción largos (ej. "pi_3Tv4f0E5N5fwNuzA12o3s0H2" de
   Stripe) no caben en una fila de dos columnas sin desbordarse — esta variante
   apila el label arriba y el valor abajo, en monoespaciada, con quiebre de
   línea permitido en cualquier punto para que nunca se salga del margen. */
.cp-detalle-payment-row.cp-detalle-payment-row-stack { flex-direction: column; align-items: flex-start; gap: 3px; }
.cp-detalle-payment-row-stack .value {
    text-align: left; word-break: break-all; font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem;
}
.cp-detalle-method-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.cp-detalle-method-badge.online { background: color-mix(in srgb, var(--cp-info) 16%, transparent); color: var(--cp-info); }
.cp-detalle-method-badge.manual { background: color-mix(in srgb, var(--cp-text-muted) 16%, transparent); color: var(--cp-text-muted); }
.cp-detalle-notes { font-size: 0.78rem; color: var(--cp-text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cp-border); }

/* ── Imprimir el detalle de factura: solo ese recuadro, nada más de la
   página (sidebar, topbar, etc.) — técnica estándar de "imprimir solo este
   div": todo se oculta con visibility (no display:none, así se conserva el
   layout/flow) salvo el modal, que además se repone a flujo normal/estático
   para no depender del position:fixed (no imprime bien en algunos navegadores). */
body.cp-printing-detalle * { visibility: hidden; }
body.cp-printing-detalle #cp_detalle_backdrop,
body.cp-printing-detalle #cp_detalle_backdrop * { visibility: visible; }
body.cp-printing-detalle #cp_detalle_backdrop {
    position: absolute; inset: 0; background: #fff; padding: 24px; display: block;
}
body.cp-printing-detalle #cp_detalle_backdrop .cp-modal { box-shadow: none; max-height: none; }
body.cp-printing-detalle #cp_detalle_print,
body.cp-printing-detalle #cp_detalle_close { display: none !important; }
@media print {
    body.cp-printing-detalle #cp_detalle_backdrop .cp-modal { color: #000; background: #fff; }
    body.cp-printing-detalle #cp_detalle_backdrop .cp-detalle-summary,
    body.cp-printing-detalle #cp_detalle_backdrop .cp-detalle-payment { background: #f4f4f4; border-color: #ccc; }
}