/* =========================================================================
   OFIPAGOS V2 — Estilos Globales de la SPA Desacoplada
   ========================================================================= */

:root {
    --bg-dark: #050508;
    --bg-panel: #0a0d14;
    --primary: #6be3b4; /* Verde OfiPagos */
    --primary-hover: #4dc296;
    --text-main: #ffffff;
    --text-muted: #8b9bb4;
    --border: rgba(255, 255, 255, 0.08);
    --danger: #ff5e5e;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; }

body { background-color: var(--bg-dark); color: var(--text-main); display: flex; min-height: 100vh; margin: 0; }
#app { width: 100%; display: flex; flex-direction: column; min-height: 100vh;}

/* ================= SPLIT LAYOUT LOGIN ================= */
.login-container { display: flex; width: 100%; min-height: 100vh; }

.brand-side {
    flex: 1;
    background: linear-gradient(135deg, #0a0d14 0%, #050508 100%);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; justify-content: center; padding: 60px;
    position: relative; overflow: hidden;
}

.brand-side::before {
    content: ''; position: absolute; top: -20%; left: -20%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(107, 227, 180, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.brand-logo { font-size: 2.5rem; font-weight: 900; color: var(--text-main); display: flex; align-items: center; gap: 12px; margin-bottom: 30px; position: relative; z-index: 2;}
.brand-logo i { color: var(--primary); }

.trust-badges { margin-top: 50px; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 2;}
.badge-item { display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.02); padding: 15px 20px; border-radius: 12px; border: 1px solid var(--border); }
.badge-icon { width: 40px; height: 40px; background: rgba(107, 227, 180, 0.1); color: var(--primary); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; }
.badge-text h4 { font-size: 0.9rem; margin-bottom: 3px; color: var(--text-main);}
.badge-text p { font-size: 0.75rem; color: var(--text-muted); }

.form-side {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 40px; background: var(--bg-dark);
}

.login-box { width: 100%; max-width: 420px; }
.login-header { margin-bottom: 35px; text-align: center; }
.login-header h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; color: var(--text-main); }
.login-header p { color: var(--text-muted); font-size: 0.9rem; }

.input-group { margin-bottom: 20px; position: relative; text-align: left;}
.input-group label { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }

.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper i.icon-left { position: absolute; left: 15px; color: var(--text-muted); font-size: 0.9rem; transition: 0.3s; }

.neo-input { 
    width: 100%; padding: 14px 15px 14px 45px; 
    background: var(--bg-panel); color: var(--text-main); 
    border: 1px solid var(--border); border-radius: 12px; 
    font-size: 0.95rem; outline: none; transition: 0.3s; 
}
.neo-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107, 227, 180, 0.1); }
.neo-input:focus + i.icon-left { color: var(--primary); }

.btn-eye { 
    position: absolute; right: 15px; background: transparent; border: none; 
    color: var(--text-muted); cursor: pointer; font-size: 1rem; transition: 0.3s;
}
.btn-eye:hover { color: var(--primary); }

.btn-submit { 
    width: 100%; background: var(--primary); color: #000; 
    padding: 15px; border: none; border-radius: 12px; 
    font-size: 1rem; font-weight: 800; cursor: pointer; 
    transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px;
    box-shadow: 0 4px 15px rgba(107, 227, 180, 0.2);
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(107, 227, 180, 0.4); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 900px) {
    .brand-side { display: none; }
    .form-side { padding: 20px; }
}

/* ── Login: Overlay de autenticación en proceso ─────────────────── */
.login-auth-overlay {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: rgba(5, 8, 15, 0.93); backdrop-filter: blur(14px);
    animation: lao-fadein 0.25s ease;
}
@keyframes lao-fadein { from { opacity: 0; } to { opacity: 1; } }
.lao-spinner {
    position: relative; width: 76px; height: 76px;
    display: flex; align-items: center; justify-content: center;
}
.lao-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid rgba(107,227,180,0.15);
    border-top-color: #6be3b4;
    animation: lao-spin 0.9s linear infinite;
}
.lao-ring-slow {
    position: absolute; inset: 8px; border-radius: 50%;
    border: 2px solid rgba(107,227,180,0.08);
    border-bottom-color: rgba(107,227,180,0.4);
    animation: lao-spin 1.6s linear infinite reverse;
}
@keyframes lao-spin { to { transform: rotate(360deg); } }
.lao-icon-ctr {
    position: relative; z-index: 1;
    color: #6be3b4; font-size: 1.5rem;
    animation: lao-pulse 1.8s ease-in-out infinite;
}
@keyframes lao-pulse { 0%,100%{opacity:0.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
.lao-title {
    color: #f1f5f9; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.2px;
}
.lao-dots { display: flex; gap: 7px; align-items: center; }
.lao-dots span {
    width: 7px; height: 7px; border-radius: 50%; background: #6be3b4;
    animation: lao-dot 1.2s ease-in-out infinite;
}
.lao-dots span:nth-child(2) { animation-delay: 0.18s; }
.lao-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes lao-dot { 0%,60%,100%{opacity:0.2;transform:scale(1)} 30%{opacity:1;transform:scale(1.35)} }
.lao-hint { font-size: 0.72rem; color: #64748b; letter-spacing: 0.5px; }

/* ── Login: Overlay de éxito ────────────────────────────────────── */
.login-success-overlay {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5, 8, 15, 0.96); backdrop-filter: blur(18px);
    animation: lao-fadein 0.3s ease;
}
.lso-card {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    animation: lso-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lso-in { from{opacity:0;transform:scale(0.82)} to{opacity:1;transform:scale(1)} }
.lso-title {
    font-size: 1.7rem; font-weight: 900; color: #f1f5f9; letter-spacing: -0.4px; margin-top: 4px;
}
.lso-sub {
    font-size: 0.82rem; color: #6be3b4; font-weight: 600;
    letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px;
}
.lso-bar {
    width: 210px; height: 3px;
    background: rgba(255,255,255,0.07); border-radius: 10px; overflow: hidden;
}
.lso-bar-fill {
    height: 100%; background: linear-gradient(90deg, #6be3b4, #4dc296);
    border-radius: 10px; animation: lso-prog 1.8s ease-in-out forwards;
}
@keyframes lso-prog { from{width:0} to{width:100%} }
.lso-redirect {
    font-size: 0.72rem; color: #64748b;
    letter-spacing: 0.8px; text-transform: uppercase;
}

/* ── Login: Cuenta suspendida ────────────────────────────────────── */
.login-suspended-msg {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    color: #fca5a5;
    animation: login-shake 0.38s ease;
}
.login-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}
.login-wa-btn:hover { background: #1ebe5d; }
.login-wa-btn i { font-size: 1rem; }

/* ── Login: Error inline ─────────────────────────────────────────── */
.login-error-msg {
    background: rgba(239,68,68,0.07);
    border: 1px solid rgba(239,68,68,0.22);
    border-radius: 10px; padding: 11px 14px;
    margin-bottom: 16px;
    display: flex; align-items: flex-start; gap: 10px;
    color: #f87171; font-size: 0.84rem; line-height: 1.45;
    animation: login-shake 0.38s ease;
}
@keyframes login-shake {
    0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
    40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

/* ── KYC: Banner rechazo en modal perfil ─────────────────────────── */
.kyc-rechazo-alert {
    margin: 0 14px 14px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.22);
    border-radius: 10px;
    overflow: hidden;
}
.kyc-rechazo-head {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px 10px;
    background: rgba(239,68,68,0.08);
    border-bottom: 1px solid rgba(239,68,68,0.15);
}
.kyc-rechazo-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    background: rgba(239,68,68,0.12); color: #ef4444;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.kyc-rechazo-titulo {
    font-size: 0.82rem; font-weight: 700; color: #f87171; line-height: 1.3;
}
.kyc-rechazo-sub {
    font-size: 0.72rem; color: #94a3b8; margin-top: 2px;
}
.kyc-rechazo-motivo {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(239,68,68,0.12);
}
.kyc-rechazo-motivo-lbl {
    font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 4px;
}
.kyc-rechazo-motivo-txt {
    font-size: 0.82rem; color: #fca5a5; line-height: 1.45;
    background: rgba(239,68,68,0.05);
    border-left: 3px solid rgba(239,68,68,0.4);
    padding: 6px 10px; border-radius: 0 6px 6px 0;
}
.kyc-rechazo-docs {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(239,68,68,0.12);
}
.kyc-rechazo-docs-lbl {
    font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 7px;
    display: flex; align-items: center; gap: 5px;
}
.kyc-rechazo-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: #cbd5e1; padding: 3px 0;
}
.kyc-rechazo-item i { color: #f87171; font-size: 0.72rem; width: 14px; flex-shrink: 0; }
.kyc-rechazo-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px; cursor: pointer;
    background: rgba(239,68,68,0.1); color: #f87171;
    border: none; border-top: 1px solid rgba(239,68,68,0.18);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2px;
    transition: background 0.2s;
}
.kyc-rechazo-cta:hover { background: rgba(239,68,68,0.18); }
[data-theme="light"] .kyc-rechazo-motivo-txt { background: rgba(239,68,68,0.04); color: #dc2626; }
[data-theme="light"] .kyc-rechazo-item { color: #374151; }
[data-theme="light"] .kyc-rechazo-cta { color: #dc2626; background: rgba(239,68,68,0.06); }

/* =======================================================
   DASHBOARD ADMIN / CLIENTE (MÉTRICAS Y BALANCES SPA)
   ======================================================= */
.dashboard-layout { display: flex; flex-direction: column; width: 100vw; height: 100vh; overflow: hidden; background: #0a0f1a; }
.topbar-spa { height: 75px; flex-shrink: 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: #111827; }
.brand { font-size: 1.4rem; font-weight: 800; color: #f1f5f9; display: flex; align-items: center; gap: 10px; }
.user-info { display: flex; align-items: center; gap: 20px; }
.user-greeting { color: #94a3b8; font-size: 0.95rem; }
.user-greeting strong { color: #f1f5f9; }

.main-content-spa { flex: 1; padding: 40px; overflow-y: auto; background: radial-gradient(circle at top right, rgba(56, 184, 141, 0.05), transparent 50%); }

/* align-items: center centra la tarjeta virtual verticalmente respecto al wallet card */
.bank-grid { display: grid; grid-template-columns: 1fr 380px; gap: 30px; margin-bottom: 40px; align-items: center; }
.balance-section { background: #1a2235; border-radius: 16px; padding: 30px; border: 1px solid rgba(148, 163, 184, 0.08); position: relative; overflow: hidden; }
.balance-section::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; background: rgba(107, 227, 180, 0.12); filter: blur(60px); opacity: 0.5; border-radius: 50%; pointer-events: none; }
.balance-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #94a3b8; }

.main-balance { font-size: 3.5rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; color: #f1f5f9; }
.currency { font-size: 1.5rem; color: #6be3b4; font-weight: 600; align-self: flex-start; margin-top: 15px; }

.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.action-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(148, 163, 184, 0.08); padding: 15px; border-radius: 16px; color: #f1f5f9; cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 500; font-size: 0.85rem; }
.action-btn i { font-size: 1.5rem; color: #6be3b4; }
.action-btn:hover { background: rgba(107, 227, 180, 0.1); border-color: #6be3b4; transform: translateY(-3px); }

/* =======================================================
   TARJETA VIRTUAL PREMIUM OFIPAGOS
   ======================================================= */
.virtual-card-wrapper { perspective: 1000px; display: flex; align-items: center; justify-content: center; }
.virtual-card { 
    width: 100%; height: 230px; border-radius: 20px; padding: 25px; 
    display: flex; flex-direction: column; justify-content: space-between; 
    background: linear-gradient(135deg, #197a5b 0%, #08261c 100%); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2); 
    position: relative; overflow: hidden; transition: transform 0.5s ease; transform-style: preserve-3d; color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}
.virtual-card:hover { transform: rotateY(5deg) rotateX(5deg) scale(1.02); }

.card-shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); animation: cardShine 6s infinite; pointer-events: none; z-index: 1;
}
@keyframes cardShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.card-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2;}
.chip-container { display: flex; align-items: center; gap: 15px; }

.real-chip { 
    width: 45px; height: 35px; background: linear-gradient(135deg, #e0c37c, #ad873b); 
    border-radius: 6px; position: relative; overflow: hidden; 
    box-shadow: inset 0 0 4px rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.2); 
}
.real-chip::before { content:''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0,0,0,0.2); }
.real-chip::after { content:''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.2); }

.contactless-icon { font-size: 1.5rem; color: rgba(255,255,255,0.8); transform: rotate(90deg); margin-top: 5px; }
.card-type { font-weight: 800; font-size: 1.2rem; letter-spacing: 1px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); font-style: italic;}
.card-number { position: relative; z-index: 2; margin-top: 15px; font-family: monospace; font-size: 1.4rem; letter-spacing: 3px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.card-bottom { display: flex; justify-content: space-between; font-size: 0.85rem; text-transform: uppercase; position: relative; z-index: 2; align-items: flex-end; }
.card-label { font-size: 0.55rem; color: rgba(255,255,255,0.6); margin-bottom: 2px; letter-spacing: 1px;}
.card-value { font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); letter-spacing: 1px; }

/* =======================================================
   GRÁFICAS DE FLUJO
   ======================================================= */
.charts-wrapper { display: flex; gap: 20px; }
.card-section { background: #1a2235; border-radius: 14px; padding: 25px 30px; border: 1px solid rgba(148, 163, 184, 0.08); }
.section-header h3 { font-size: 1.1rem; color: #f1f5f9; font-weight: 600; margin: 0; }
.period-buttons { display: flex; gap: 5px; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 3px; }
.period-btn { background: transparent; border: none; color: #94a3b8; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.3s; }
.period-btn.active, .period-btn:hover { background: #6be3b4; color: #000; }

.btn-logout { background: rgba(239, 68, 68, 0.08); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 10px; padding: 8px 15px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.btn-logout:hover { background: #ef4444; color: #fff; }

/* =========================================================================
   DISEÑO DEL TOPBAR
   ========================================================================= */
.neo-topbar { position: sticky; top: 15px; z-index: 1050; display: flex; justify-content: space-between; align-items: center; background: rgba(20, 20, 22, 0.7); backdrop-filter: blur(16px); padding: 18px 25px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05); margin-bottom: 25px; width: 100%; transition: all 0.4s; }
#topbar-left { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0; }
#mobileMenuBtn { display: none !important; } 
.neo-greeting { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.neo-greeting h1 { font-size: 1.35rem; font-weight: 800; margin-bottom: 4px; color: var(--text-main); display: flex; align-items: center; gap: 8px; letter-spacing: -0.5px; }
.nombre-truncado { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; display: inline-block; vertical-align: middle;}
.neo-greeting p { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.saludo-desktop { display: inline; }
.neo-topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; position: relative; }
.neo-action-btn { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); width: 44px; height: 44px; border-radius: 14px; display: flex; justify-content: center; align-items: center; color: var(--text-main); cursor: pointer; transition: all 0.3s; flex-shrink: 0; }
.neo-action-btn:hover { background: var(--primary); color: #000; border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(107, 227, 180, 0.25); }
.neo-dot { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 20px; border: 3px solid var(--bg-panel); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; color: #fff; }

/* Botón soporte en topbar — solo visible en móvil */
.topbar-soporte-mobile { display: none !important; }

@media (max-width: 900px) {
    .bank-grid { grid-template-columns: 1fr; gap: 20px; }
    .charts-grid { grid-template-columns: 1fr !important; }
    #mobileMenuBtn { display: flex !important; margin-right: 15px; }
    .neo-topbar { top: 10px; padding: 12px 15px; border-radius: 16px; gap: 10px; width: 100%; flex-direction: row; }
    .neo-greeting h1 { font-size: 1.05rem; margin-bottom: 0; display: flex; align-items: center; gap: 5px; }
    .saludo-desktop { display: none; }
    .topbar-soporte-mobile { display: flex !important; }
    .nombre-truncado { max-width: 140px; }
    .neo-greeting p { display: none; }
}

/* =========================================================================
   TARJETA VIRTUAL PREMIUM — Base + Animaciones de onda
   ========================================================================= */
/* Tarjeta virtual — proporciones reales de tarjeta de crédito/débito ISO 7810 (85.6 × 53.98 mm = 1.586:1) */
.vcard-premium {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #060d1f 0%, #091830 55%, #060c1a 100%);
    border: 1px solid rgba(107, 227, 180, 0.22);
    border-radius: 18px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1.586 / 1;   /* ISO 7810 — tarjeta bancaria real */
    min-height: unset;          /* no forzar altura, que la ratio lo controle */
    width: 100%;
    cursor: default;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform 0.45s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.45s ease;
}
.vcard-hovered {
    transform: perspective(700px) rotateY(4deg) rotateX(3deg) translateY(-5px);
    box-shadow: 0 35px 65px rgba(0,0,0,0.75), 0 0 50px rgba(107,227,180,0.09), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Grid de puntos — enmascarado en onda desde esquina inferior-izquierda */
.vcard-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(107,227,180,0.45) 1.2px, transparent 1.2px);
    background-size: 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse at -5% 115%, black 0%, black 18%, rgba(0,0,0,0.55) 38%, transparent 62%);
    mask-image:         radial-gradient(ellipse at -5% 115%, black 0%, black 18%, rgba(0,0,0,0.55) 38%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}

/* Brillo ambiente verde desde esquina inferior-izquierda */
.vcard-glow {
    position: absolute;
    bottom: -45px; left: -45px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(107,227,180,0.2) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

/* Destello de luz que recorre la tarjeta */
.vcard-shine {
    position: absolute;
    top: 0; left: -100%;
    width: 55%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.045) 50%, transparent);
    transform: skewX(-22deg);
    animation: vcardShine 8s infinite;
    pointer-events: none; z-index: 1;
}
@keyframes vcardShine {
    0%   { left: -100%; }
    16%  { left: 160%;  }
    100% { left: 160%;  }
}

/* Anillos de onda animados */
.vcard-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(107, 227, 180, 0.18);
    bottom: -80px; left: -80px;
    animation: vcardRipple 5.5s infinite ease-out;
    pointer-events: none; z-index: 0;
}
.vcard-ring-1 { width: 170px; height: 170px; animation-delay: 0s; }
.vcard-ring-2 { width: 300px; height: 300px; animation-delay: 1.8s; }
.vcard-ring-3 { width: 440px; height: 440px; animation-delay: 3.6s; }

@keyframes vcardRipple {
    0%   { opacity: 0.65; transform: scale(0.75); }
    100% { opacity: 0;    transform: scale(1.22); }
}

/* =========================================================================
   TABLA HISTORIAL — Estilos de clases (responsiva)
   ========================================================================= */
.historial-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.historial-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 680px;
}
.col-neto { white-space: nowrap; }
.historial-table thead tr {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #888890;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.historial-table th { padding: 14px 12px; font-weight: 700; }
.historial-table td { padding: 13px 12px; }

/* Dispersiones — filas más compactas */
.historial-table-disp th { padding: 9px 12px !important; }
.historial-table-disp td { padding: 7px 12px !important; }

.tx-row {
    border-bottom: 1px solid rgba(255,255,255,0.03);
    cursor: pointer;
    transition: background 0.25s;
}
.tx-row-hovered { background: rgba(107,227,180,0.04); }
.tx-empty { text-align: center; padding: 30px; color: #888890; }
.tx-muted  { color: #888890; font-size: 0.83rem; }
.tx-ref    { color: #6be3b4; font-weight: 600; font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; }

.tx-amount-in  { color: #6be3b4; font-weight: 800; font-size: 0.97rem; }
.tx-amount-out { color: #ff5e5e; font-weight: 800; font-size: 0.97rem; }

.badge-ingreso, .badge-egreso {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.73rem; font-weight: 700;
}
.badge-ingreso { background: rgba(107,227,180,0.1); color: #6be3b4; }
.badge-egreso  { background: rgba(255,94,94,0.1);   color: #ff5e5e; }

.estado-aprobado  { color: #6be3b4; font-size: 0.78rem; font-weight: 600; }
.estado-pendiente { color: #f5a623; font-size: 0.78rem; font-weight: 600; }
.estado-rechazado { color: #ff5e5e; font-size: 0.78rem; font-weight: 600; }

.btn-comprobante {
    background: rgba(107,227,180,0.1);
    border: 1px solid rgba(107,227,180,0.3);
    color: #6be3b4;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
}
.btn-comprobante:hover { background: rgba(107,227,180,0.25); }

/* =========================================================================
   MOBILE (≤768px) — Tarjeta virtual oculta + Historial como cards compactas
   ========================================================================= */
@media (max-width: 768px) {

    /* Ocultar tarjeta virtual — solo visible en tablet/PC */
    .vcard-premium { display: none !important; }
    .bank-grid     { grid-template-columns: 1fr !important; }

    /* Historial — quitar scroll horizontal */
    .historial-scroll  { overflow-x: unset; }
    .historial-table   { min-width: unset; width: 100%; border-collapse: separate; border-spacing: 0 4px; }

    /* Ocultar cabecera */
    .historial-table thead { display: none; }

    /* Cada fila = card compacta con borde separador visible */
    .historial-table tbody tr.tx-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 5px;
        padding: 10px 12px;
        background: rgba(255,255,255,0.03);
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.12);
        border-left: 3px solid rgba(107,227,180,0.45);
        margin-bottom: 8px;
    }
    .historial-table tbody tr.tx-row:active { background: rgba(107,227,180,0.06); }

    /* Reset celdas */
    .historial-table td { padding: 0; border: none; display: flex; align-items: center; }

    /* ── Fila 1: badge tipo | monto neto | estado chip ── */
    .col-tipo   { grid-column: 1; grid-row: 1; }
    .col-neto   { grid-column: 2; grid-row: 1; font-size: 0.9rem !important; font-weight: 800 !important; white-space: nowrap; }
    .col-estado { grid-column: 3; grid-row: 1; justify-content: flex-end; }

    /* ── Fila 2: referencia | fecha ── */
    .col-ref    { grid-column: 1 / 3; grid-row: 2; }
    .col-fecha  { grid-column: 3;     grid-row: 2; justify-content: flex-end; white-space: nowrap; }

    /* Columnas ocultas en mobile */
    .col-monto  { display: none !important; }
    .col-accion { display: none !important; }

    /* Estado como chip compacto */
    .estado-aprobado, .estado-pendiente, .estado-rechazado {
        font-size: 0.65rem; font-weight: 700; padding: 2px 7px;
        border-radius: 20px; white-space: nowrap;
    }
    .estado-aprobado  { background: rgba(107,227,180,0.12); }
    .estado-pendiente { background: rgba(245,166,35,0.12);  }
    .estado-rechazado { background: rgba(255,94,94,0.12);   }

    /* Referencia más compacta */
    .tx-ref { font-size: 0.7rem; letter-spacing: 0; }

    /* Fecha pequeña */
    .col-fecha .tx-muted { font-size: 0.65rem; }

    /* Badges tipo pills compactos */
    .badge-ingreso, .badge-egreso { padding: 3px 9px; font-size: 0.7rem; border-radius: 20px; }
}

/* =========================================================================
   MOBILE — Tabla dispersiones (historial-table-disp) — grid card propio
   ========================================================================= */
@media (max-width: 768px) {

    /* Grid 2 columnas × 3 filas para cada card de dispersión */
    .historial-table-disp tbody tr.tx-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        row-gap: 5px;
        padding: 8px 10px !important;
        border-left: 3px solid rgba(74,144,226,0.5);
    }

    /* Fila 1: [pill tipo + ref]  |  [estado badge] */
    .historial-table-disp .col-tipo {
        grid-column: 1; grid-row: 1;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }
    .historial-table-disp .col-estado {
        grid-column: 2; grid-row: 1;
        justify-content: flex-end;
        align-items: flex-start;
    }
    /* Fechas del estado: ocultas en mobile — solo el badge */
    .historial-table-disp .estado-fecha-det { display: none !important; }

    /* Fila 2: monto + fee (apilados en columna) */
    .historial-table-disp .col-neto {
        grid-column: 1 / -1; grid-row: 2;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px;
        white-space: normal !important;
    }
    .historial-table-disp .col-neto .tx-amount-out { font-size: 0.93rem !important; }

    /* Fila 3: destino (banco, titular, numero… apilados en columna) */
    .historial-table-disp .col-ref {
        grid-column: 1 / -1; grid-row: 3;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px;
    }

    /* Ocultar: monto COP y botón acción */
    .historial-table-disp .col-monto  { display: none !important; }
    .historial-table-disp .col-accion { display: none !important; }

    /* Separador visual entre banco y titular en destino */
    .historial-table-disp .col-ref > div { line-height: 1.35; }
}

/* =========================================================================
   MOBILE — Tabla terceros (historial-table-terceros) — grid card propio
   ========================================================================= */

/* Estilos base del documento (desktop) — reutilizados en ambos modos */
.doc-tipo-badge {
    font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.6px;
}
.doc-num-val {
    font-size: 0.82rem; font-weight: 600; color: var(--text-primary);
    letter-spacing: 0.3px; margin-top: 3px;
}
.contacto-correo {
    display: flex; align-items: center;
    font-size: 0.75rem; color: var(--text-primary);
    overflow: hidden; max-width: 100%;
}
.contacto-tel {
    font-size: 0.68rem; color: var(--text-muted); margin-top: 3px;
}

@media (max-width: 768px) {

    /* Grid 2 columnas × 3 filas para cada card de tercero */
    .historial-table-terceros tbody tr.tx-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        row-gap: 8px;
        border-left: 3px solid rgba(107,227,180,0.5);
    }

    /* Fila 1: [avatar + nombre]  |  [badge estado] */
    .historial-table-terceros .col-tipo {
        grid-column: 1; grid-row: 1;
        align-items: center;
    }
    .historial-table-terceros .col-estado {
        grid-column: 2; grid-row: 1;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 3px;
    }
    /* Ocultar fechas en mobile — solo el badge de estado */
    .historial-table-terceros .tercero-fechas-det { display: none !important; }

    /* Fila 2: documento (tipo · número) en una sola línea horizontal */
    .historial-table-terceros .col-ref {
        grid-column: 1 / -1; grid-row: 2;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px;
    }
    .historial-table-terceros .col-ref .doc-tipo-badge { margin-top: 0; font-size: 0.72rem; }
    .historial-table-terceros .col-ref .doc-num-val    { margin-top: 0; font-size: 0.8rem; }

    /* Fila 3: contacto (correo + teléfono apilados) */
    .historial-table-terceros .col-neto {
        grid-column: 1 / -1; grid-row: 3;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px;
        white-space: normal !important;
    }
    .historial-table-terceros .col-neto .contacto-correo {
        font-size: 0.73rem;
        max-width: calc(100vw - 48px);
    }
    .historial-table-terceros .col-neto .contacto-tel { margin-top: 0; }

    /* Ocultar botón acción (tap en fila abre perfil) */
    .historial-table-terceros .col-accion { display: none !important; }

    /* Avatar más pequeño en mobile */
    .historial-table-terceros .t-avatar {
        width: 34px !important; height: 34px !important;
        font-size: 0.75rem !important; flex-shrink: 0;
    }
}

/* ── Cuentas bancarias: estilos específicos ─────────────────────────────── */
.cb-avatar {
    width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px;
    background: rgba(107,227,180,0.1); color: #6be3b4;
    border: 1px solid rgba(107,227,180,0.2);
}
.cb-banco-nombre { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.cb-tipo-cuenta  { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; }
.cb-num          { font-family: monospace; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; }
.cb-avatar-lg    { width: 52px !important; height: 52px !important; border-radius: 12px !important; font-size: 1rem !important; flex-shrink: 0; }

/* ── Modal Registrar Cuenta — botones tipo selector ────────────────────── */
.cb-tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cb-tipo-btn {
    padding: 14px 10px; border-radius: 10px; cursor: pointer;
    font-size: 0.82rem; font-weight: 700;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transition: 0.2s; border: 2px solid rgba(100,116,139,0.18);
    background: rgba(100,116,139,0.07); color: #64748b;
    line-height: 1.2;
}
.cb-tipo-btn .cb-tipo-icon { font-size: 1.3rem; margin-bottom: 2px; }
.cb-tipo-btn .cb-tipo-sub  { font-size: 0.7rem; font-weight: 400; opacity: 0.7; }
.cb-tipo-btn.active-propia  { background: rgba(107,227,180,0.12); border-color: rgba(107,227,180,0.5); color: #6be3b4; }
.cb-tipo-btn.active-tercero { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.5); color: #a78bfa; }
.cb-tipo-btn:hover:not(.active-propia):not(.active-tercero) { background: rgba(100,116,139,0.13); color: #94a3b8; }

/* ── Tarjeta titular (Propia) ───────────────────────────────────────────── */
.cb-titular-card {
    background: rgba(107,227,180,0.06); border: 1px solid rgba(107,227,180,0.2);
    border-radius: 10px; padding: 11px 14px;
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.cb-titular-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: rgba(107,227,180,0.15);
    display: flex; align-items: center; justify-content: center;
    color: #6be3b4; font-size: 0.8rem; font-weight: 800;
}
.cb-titular-info { flex: 1; min-width: 0; }
.cb-titular-nombre { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-titular-sub { font-size: 0.68rem; color: #6be3b4; margin-top: 1px; }
.cb-titular-badge {
    font-size: 0.65rem; white-space: nowrap; margin-left: auto;
    background: rgba(107,227,180,0.12); color: #6be3b4;
    border: 1px solid rgba(107,227,180,0.25); padding: 2px 9px; border-radius: 20px;
}

/* ── Tarjeta preview tercero ────────────────────────────────────────────── */
.cb-tercero-card {
    margin-top: 10px; background: rgba(167,139,250,0.06);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: 10px; padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
}
.cb-tercero-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: rgba(167,139,250,0.15);
    display: flex; align-items: center; justify-content: center;
    color: #a78bfa; font-size: 0.85rem; font-weight: 800;
}
.cb-tercero-nombre { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.cb-tercero-doc    { font-size: 0.72rem; color: var(--text-muted); }
.cb-tercero-badge  {
    font-size: 0.65rem; white-space: nowrap; margin-left: auto;
    background: rgba(167,139,250,0.12); color: #a78bfa;
    border: 1px solid rgba(167,139,250,0.25); padding: 2px 9px; border-radius: 20px;
}

/* ── Warning box "sin terceros" ─────────────────────────────────────────── */
.cb-warn-box {
    background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.2);
    border-radius: 10px; padding: 12px 14px;
    font-size: 0.8rem; color: #f5a623;
    display: flex; gap: 8px; align-items: center;
}

/* ── Separador en formulario ────────────────────────────────────────────── */
.cb-sep { border-top: 1px solid rgba(255,255,255,0.06); margin: 16px 0 14px; }

/* ── Info box SARLAFT ───────────────────────────────────────────────────── */
.cb-info-box {
    background: rgba(107,227,180,0.05); border: 1px solid rgba(107,227,180,0.15);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 18px;
    font-size: 0.78rem; color: #94a3b8;
    display: flex; gap: 8px; align-items: flex-start;
}

/* ── Light mode overrides del formulario ────────────────────────────────── */
[data-theme="light"] .cb-tipo-btn { background: #f4f7fc; border-color: #cbd5e1; color: #64748b; }
[data-theme="light"] .cb-tipo-btn:hover:not(.active-propia):not(.active-tercero) { background: #e8eef5; color: #475569; }
[data-theme="light"] .cb-tipo-btn.active-propia  { background: rgba(5,150,105,0.07); border-color: rgba(5,150,105,0.4); color: #047857; }
[data-theme="light"] .cb-tipo-btn.active-tercero { background: rgba(109,40,217,0.07); border-color: rgba(109,40,217,0.35); color: #6d28d9; }
[data-theme="light"] .cb-titular-card  { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.2); }
[data-theme="light"] .cb-titular-avatar { background: rgba(5,150,105,0.1); color: #047857; }
[data-theme="light"] .cb-titular-sub   { color: #047857; }
[data-theme="light"] .cb-titular-badge { background: rgba(5,150,105,0.08); color: #047857; border-color: rgba(5,150,105,0.25); }
[data-theme="light"] .cb-tercero-card  { background: rgba(109,40,217,0.04); border-color: rgba(109,40,217,0.18); }
[data-theme="light"] .cb-tercero-avatar{ background: rgba(109,40,217,0.08); color: #6d28d9; }
[data-theme="light"] .cb-tercero-badge { background: rgba(109,40,217,0.08); color: #6d28d9; border-color: rgba(109,40,217,0.25); }
[data-theme="light"] .cb-warn-box      { background: rgba(180,120,0,0.05); border-color: rgba(180,120,0,0.2); color: #92600a; }
[data-theme="light"] .cb-sep           { border-top-color: #e8eef5; }
[data-theme="light"] .cb-info-box      { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.15); color: #475569; }

/* ── Modal Registrar Cuenta — compactación para caber sin scroll ────────── */
.cb-modal-cuenta .gmodal-header { padding: 12px 18px 10px !important; }
.cb-modal-cuenta .gmodal-body   { padding: 11px 18px 0  !important; }
.cb-modal-cuenta .gmodal-actions { padding: 8px 18px 14px !important; }
.cb-modal-cuenta .gmodal-body > div { margin-bottom: 9px !important; }

/* Labels más pequeños */
.cb-modal-cuenta .gf-label { font-size: 0.68rem !important; margin-bottom: 2px !important; letter-spacing: 0.3px; }

/* Inputs más bajos */
.cb-modal-cuenta .gf-input { padding: 6px 10px !important; font-size: 0.82rem !important; }

/* Tipo selector horizontal — icono + texto en fila, sin subtítulo */
.cb-modal-cuenta .cb-tipo-grid { gap: 8px; }
.cb-modal-cuenta .cb-tipo-btn {
    padding: 9px 10px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
}
.cb-modal-cuenta .cb-tipo-btn .cb-tipo-icon { font-size: 1rem !important; margin-bottom: 0 !important; }
.cb-modal-cuenta .cb-tipo-btn .cb-tipo-sub  { display: none !important; }

/* Titular card más bajo */
.cb-modal-cuenta .cb-titular-card { padding: 7px 12px !important; margin-bottom: 7px !important; }
.cb-modal-cuenta .cb-titular-avatar { width: 28px !important; height: 28px !important; font-size: 0.65rem !important; }
.cb-modal-cuenta .cb-titular-nombre { font-size: 0.8rem !important; }
.cb-modal-cuenta .cb-titular-sub    { font-size: 0.63rem !important; }
.cb-modal-cuenta .cb-titular-badge  { font-size: 0.6rem !important; padding: 1px 7px !important; }
.cb-modal-cuenta .cb-tercero-card   { padding: 7px 12px !important; margin-top: 7px !important; }
.cb-modal-cuenta .cb-tercero-avatar { width: 28px !important; height: 28px !important; font-size: 0.65rem !important; }

/* Separador más ajustado */
.cb-modal-cuenta .cb-sep { margin: 6px 0 !important; }

/* Zona PDF — horizontal y compacta, override del inline style */
.cb-modal-cuenta .gf-file-drop {
    padding: 9px 14px !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.cb-modal-cuenta .gf-file-drop i { font-size: 1.1rem !important; flex-shrink: 0; margin: 0 !important; }
.cb-modal-cuenta .gf-file-drop .gf-file-hint,
.cb-modal-cuenta .gf-file-drop .gf-file-name { font-size: 0.78rem !important; }
.cb-modal-cuenta .gf-file-drop span:last-of-type { font-size: 0.65rem !important; }

/* Info box compacta */
.cb-modal-cuenta .cb-info-box {
    padding: 6px 10px !important;
    font-size: 0.71rem !important;
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
}

/* Tabla cuentas bancarias: celdas compactas */
.historial-table-cuentas th { padding: 9px 10px !important; }
.historial-table-cuentas td { padding: 8px 10px !important; }
.historial-table-cuentas .cb-avatar { width: 32px; height: 32px; font-size: 0.65rem; border-radius: 7px; }
.historial-table-cuentas .col-tipo  { display: flex; align-items: center; gap: 9px; }

/* Botón Ver en tabla */
.cb-btn-ver {
    background: rgba(107,227,180,0.08);
    border: 1px solid rgba(107,227,180,0.2);
    color: #6be3b4;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}
.cb-btn-ver:hover { background: rgba(107,227,180,0.16); border-color: rgba(107,227,180,0.4); }

/* Botón Ver PDF en modal detalle */
.cb-btn-cert {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.22);
    color: #f87171;
    padding: 4px 12px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}
.cb-btn-cert:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.38); }
[data-theme="light"] .cb-btn-cert { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.2); color: #dc2626; }

/* Modal detalle — filas de información */
.cb-detalle-fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cb-detalle-fila:last-child { border-bottom: none; }
.cb-detalle-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cb-detalle-val {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}
body.light-mode .cb-btn-ver { background: rgba(0,160,110,0.07); border-color: rgba(0,160,110,0.2); color: #00a06e; }
body.light-mode .cb-detalle-fila { border-bottom-color: rgba(0,0,0,0.06); }
body.light-mode .cb-detalle-lbl { color: #64748b; }

@media (max-width: 768px) {
    /* Fila compacta flex — override del grid general de historial-table */
    .historial-table-cuentas tbody tr.tx-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 7px 10px !important;
        margin-bottom: 3px !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        row-gap: 0 !important;
        border-left: 3px solid rgba(107,227,180,0.4) !important;
    }
    /* Titular: flexible, nombre truncado, sin avatar ni doc */
    .historial-table-cuentas .col-tipo {
        flex: 1 !important; min-width: 0 !important;
        display: flex !important; align-items: center !important; gap: 7px !important;
        grid-column: unset !important; grid-row: unset !important;
    }
    .historial-table-cuentas .col-tipo .cb-avatar { display: none !important; }
    .historial-table-cuentas .col-tipo > div { min-width: 0; }
    .historial-table-cuentas .col-tipo > div > div:first-child {
        font-size: 0.77rem !important; font-weight: 700 !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 115px;
    }
    .historial-table-cuentas .col-tipo > div > div:nth-child(2) { display: none !important; }
    /* Banco/Tipo: oculto (visible en modal detalle) */
    .historial-table-cuentas .col-ref { display: none !important; }
    /* Número de cuenta: compacto */
    .historial-table-cuentas .col-neto {
        flex-shrink: 0 !important;
        grid-column: unset !important; grid-row: unset !important;
    }
    .historial-table-cuentas .col-neto .cb-num {
        font-size: 0.64rem !important; letter-spacing: 0.2px;
        max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Estado: solo badge, sin fechas ni avisos */
    .historial-table-cuentas .col-estado {
        flex-shrink: 0 !important; flex-direction: column !important;
        align-items: flex-end !important; gap: 2px !important;
        grid-column: unset !important; grid-row: unset !important;
    }
    .historial-table-cuentas .col-estado .badge-estado { font-size: 0.54rem !important; padding: 2px 5px !important; }
    .historial-table-cuentas .col-estado > div { display: none !important; }
    /* Acción: visible, solo ícono */
    .historial-table-cuentas .col-accion {
        display: flex !important; flex-shrink: 0 !important;
        grid-column: unset !important; grid-row: unset !important;
    }
    .historial-table-cuentas .cb-btn-ver { padding: 5px 7px !important; font-size: 0 !important; line-height: 1 !important; }
    .historial-table-cuentas .cb-btn-ver i { font-size: 0.78rem !important; margin: 0 !important; }
}

/* =========================================================================
   GRÁFICAS — Estilos base y responsivos
   ========================================================================= */
.chart-panel {
    background: rgba(20,20,22,0.8);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 25px;
}
.chart-title {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}
.canvas-chart-wrap {
    position: relative;
    height: 260px;
    width: 100%;
}
.canvas-chart-donut {
    height: 240px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .chart-panel {
        padding: 16px 14px;
        border-radius: 16px;
    }
    .chart-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    .canvas-chart-wrap {
        height: 180px;
    }
    .canvas-chart-donut {
        height: 170px;
        margin-top: 6px;
    }
    /* Charts en una sola columna con gap menor */
    .charts-wrapper {
        gap: 14px !important;
        margin-top: 18px !important;
    }
}

/* =========================================================================
   MODAL COMPROBANTE — Transición de entrada/salida
   ========================================================================= */
.comprobante-fade-enter-active { transition: opacity 0.22s ease, transform 0.22s ease; }
.comprobante-fade-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
.comprobante-fade-enter-from  { opacity: 0; transform: scale(0.96); }
.comprobante-fade-leave-to    { opacity: 0; transform: scale(0.96); }

@media print {
    body > *:not(#areaImprimibleV2) { display: none !important; }
    #areaImprimibleV2 { position: static !important; box-shadow: none !important; border: none !important; max-height: none !important; }
}

/* =========================================================================
   DIMMING — sidebar / topbar / bottom-nav se opacitan cuando hay modal abierto
   ========================================================================= */
.modal-activo #mainSidebar          { opacity: 0.25; pointer-events: none; transition: opacity 0.3s; }
.modal-activo .neo-topbar           { opacity: 0.2;  pointer-events: none; transition: opacity 0.3s; }
.modal-activo .bottom-nav           { opacity: 0.15; pointer-events: none; transition: opacity 0.3s; }

/* =========================================================================
   MODALES GLOBALES — Acreditación / Dispersión  (estilo V1)
   ========================================================================= */
.gmodal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.80);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Panel principal — igual que los paneles de V1 */
.gmodal-drawer {
    background: #1a2235;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: relative;
}

/* Cabecera del modal */
.gmodal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.gmodal-header > div     { display: flex; align-items: center; gap: 10px; }
.gmodal-badge {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.gmodal-badge-green { background: rgba(107, 227, 180, 0.12); color: #6be3b4; border: 1px solid rgba(107, 227, 180, 0.2); }
.gmodal-badge-blue  { background: rgba(74, 144, 226, 0.12);  color: #4a90e2;  border: 1px solid rgba(74, 144, 226, 0.2);  }

.gmodal-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    border-bottom: none;
    padding: 0;
    letter-spacing: -0.2px;
}
.gmodal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    margin-left: auto;
    transition: color 0.2s;
}
.gmodal-close:hover { color: #f1f5f9; }

/* Cuerpo scrolleable */
.gmodal-loading { padding: 40px; text-align: center; color: #94a3b8; font-size: 0.9rem; }
.gmodal-body    { padding: 18px 22px; overflow-y: auto; flex: 1; }
.gmodal-actions { display: flex; gap: 10px; margin-top: 16px; padding: 14px 22px 16px; border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }

/* Banner de saldo (dispersión) */
.gmodal-saldo-banner {
    background: rgba(74, 144, 226, 0.08);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gmodal-saldo-label { color: #94a3b8; font-size: 0.85rem; font-weight: 600; }
.gmodal-saldo-valor { color: #4a90e2; font-size: 2rem; font-weight: 900; font-family: monospace; }
.gmodal-saldo-valor small { font-size: 0.9rem; color: #94a3b8; font-weight: 600; margin-left: 4px; }

/* Campos del formulario */
.gf-group { margin-bottom: 12px; }
.gf-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.gf-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.gf-input {
    width: 100%;
    padding: 10px 12px;
    background: #0f1623;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}
.gf-input::placeholder      { color: #4a5568; }
.gf-input:focus              { border-color: #6be3b4; box-shadow: 0 0 0 3px rgba(107, 227, 180, 0.08); outline: none; }
.gf-input-green              { color: #6be3b4; font-size: 1.05rem; font-weight: bold; font-family: monospace; }
.gf-input-blue               { color: #4a90e2; font-size: 1.05rem; font-weight: bold; font-family: monospace; }
.gf-input-blue:focus         { border-color: #4a90e2; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.08); }
.gf-error { display: block; color: #ef4444; font-size: 0.78rem; margin-top: 5px; font-weight: bold; }
.gf-error i { margin-right: 4px; }

/* Zona de upload */
.gf-file-drop {
    border: 2px dashed rgba(107, 227, 180, 0.3);
    padding: 14px 16px;
    text-align: center;
    border-radius: 8px;
    background: rgba(107, 227, 180, 0.02);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}
.gf-file-drop:hover            { border-color: rgba(107, 227, 180, 0.55); background: rgba(107, 227, 180, 0.04); }
.gf-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.gf-file-hint  { color: #94a3b8; font-size: 0.84rem; pointer-events: none; }
.gf-file-hint i { color: #6be3b4; margin-right: 6px; font-size: 1.1rem; }
.gf-file-name  { display: block; font-size: 0.82rem; color: #6be3b4; margin-top: 6px; }
.gf-file-name i { margin-right: 5px; }

/* Botones */
.gf-btn-cancel {
    flex: 1;
    padding: 11px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
}
.gf-btn-cancel:hover { background: rgba(148, 163, 184, 0.15); color: #f1f5f9; }

.gf-btn-submit {
    flex: 2;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.gf-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.gf-btn-green { background: #6be3b4; color: #000; box-shadow: 0 4px 15px rgba(107, 227, 180, 0.2); }
.gf-btn-green:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(107, 227, 180, 0.35); }
.gf-btn-blue  { background: #4a90e2; color: #fff; box-shadow: 0 4px 15px rgba(74, 144, 226, 0.2); }
.gf-btn-blue:hover:not(:disabled)  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35); }

/* Platform pill buttons */
.gf-plat-btn {
    background: rgba(100,116,139,0.08);
    color: #94a3b8;
    border: 1px solid rgba(100,116,139,0.15);
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
}
.gf-plat-btn.active {
    background: rgba(107,227,180,0.12);
    color: #6be3b4;
    border: 1px solid rgba(107,227,180,0.3);
    font-weight: 700;
}
.gf-plat-btn:hover:not(.active) { background: rgba(100,116,139,0.14); color: #cbd5e1; }
[data-theme="light"] .gf-plat-btn { color: #475569; background: rgba(100,116,139,0.08); border-color: rgba(100,116,139,0.2); }
[data-theme="light"] .gf-plat-btn.active { color: #059669; background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.35); }
[data-theme="light"] .gf-plat-btn:hover:not(.active) { background: rgba(100,116,139,0.14); color: #1e293b; }

/* Transición del overlay y el drawer */
.gmodal-fade-enter-active { transition: opacity 0.22s ease; }
.gmodal-fade-leave-active { transition: opacity 0.18s ease; }
.gmodal-fade-enter-from,
.gmodal-fade-leave-to     { opacity: 0; }
.gmodal-fade-enter-from .gmodal-drawer { transform: translateY(16px) scale(0.98); transition: transform 0.22s ease; }
.gmodal-fade-leave-to   .gmodal-drawer { transform: translateY(10px) scale(0.98); transition: transform 0.18s ease; }

/* Mobile: sheet desde abajo */
@media (max-width: 540px) {
    .gf-row             { grid-template-columns: 1fr; }
    .gmodal-overlay     { align-items: flex-end; padding: 0; }
    .gmodal-drawer      { border-radius: 20px 20px 0 0; max-height: 95vh; max-width: 100%; }
    .gmodal-body        { padding: 20px; }
    .gmodal-header      { padding: 18px 20px 14px; }
}

/* =========================================================================
   MODO DÍA — Blanco Corporativo + Sidebar Azul Naval
   Contenido: fondo blanco/grisáceo empresarial
   Sidebar:   mantiene el azul corporativo oscuro (#0d1e45)
   ========================================================================= */
[data-theme="light"] {
    --bg-dark:       #eef2f8;
    --bg-panel:      #ffffff;
    --bg-card:       #f4f7fc;
    --primary:       #6be3b4;
    --primary-hover: #4dc296;
    --text-main:     #0f1e3a;
    --text-muted:    #64748b;
    --border:        #d5dde8;
    --danger:        #e53e3e;
    --warning:       #d97706;
    --bg-app:        #eef2f8;
}

/* Fondo de página — blanco grisáceo */
[data-theme="light"] body        { background: #eef2f8; color: #0f1e3a; }
[data-theme="light"] #scrollMain { background: #eef2f8; }
[data-theme="light"] .card-section { background: #ffffff !important; border-color: #e2e8f0 !important; color: #1e293b; }

/* ── Sidebar — mantiene azul corporativo oscuro ─────────────────────── */
[data-theme="light"] #mainSidebar {
    background: #0d1e45 !important;
    border-right-color: rgba(255,255,255,0.06) !important;
}
/* Texto del sidebar sobre fondo oscuro — debe ser claro */
[data-theme="light"] #mainSidebar .nav-links a        { color: rgba(200,215,240,0.75); }
[data-theme="light"] #mainSidebar .nav-links a:hover  { background: rgba(107,227,180,0.08); color: #6be3b4; }
[data-theme="light"] #mainSidebar .nav-links a.active { background: rgba(107,227,180,0.12); color: #6be3b4; }
[data-theme="light"] #mainSidebar .nav-section-label  { color: rgba(200,215,240,0.4); }
[data-theme="light"] #mainSidebar .session-info       { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="light"] #mainSidebar .time-display       { color: #ddeaff; }
[data-theme="light"] #mainSidebar .date-display       { color: rgba(200,215,240,0.55); }
[data-theme="light"] #mainSidebar .sidebar-footer     { border-top-color: rgba(255,255,255,0.07); }

/* ── Topbar — blanco limpio ──────────────────────────────────────────── */
[data-theme="light"] .neo-topbar {
    background: rgba(255,255,255,0.97) !important;
    border-color: #d5dde8 !important;
    box-shadow: 0 1px 12px rgba(15,30,58,0.08) !important;
    backdrop-filter: blur(16px) !important;
}
[data-theme="light"] .neo-greeting h1      { color: #0f1e3a; }
[data-theme="light"] .neo-greeting p       { color: #64748b; }
[data-theme="light"] .neo-action-btn       { background: #f4f7fc; border-color: #d5dde8; color: #0f1e3a; }
[data-theme="light"] .neo-action-btn:hover { background: #6be3b4; color: #000; border-color: #6be3b4; }
[data-theme="light"] .neo-topbar.topbar-scrolled .neo-topbar-actions {
    background: rgba(255,255,255,0.97);
    border-color: #d5dde8;
    box-shadow: 0 4px 20px rgba(15,30,58,0.1);
}
[data-theme="light"] .neo-topbar.topbar-scrolled #mobileMenuBtn {
    background: rgba(255,255,255,0.97) !important;
    border-color: #d5dde8 !important;
    box-shadow: 0 4px 12px rgba(15,30,58,0.08) !important;
    color: #0f1e3a !important;
}

/* ── Gráficas ─────────────────────────────────────────────────────────── */
[data-theme="light"] .chart-panel  { background: #ffffff; border-color: #d5dde8; box-shadow: 0 2px 12px rgba(15,30,58,0.06); }
[data-theme="light"] .chart-title  { color: #0f1e3a; }

/* ── Tabla historial ─────────────────────────────────────────────────── */
[data-theme="light"] .historial-panel {
    background: #ffffff !important;
    border: 1px solid #d5dde8 !important;
    box-shadow: 0 2px 12px rgba(15,30,58,0.06) !important;
}
[data-theme="light"] .historial-panel h3     { color: #0f1e3a !important; }
[data-theme="light"] .historial-table thead tr { color: #64748b; border-bottom-color: #e8eef5; }
[data-theme="light"] .tx-row                   { border-bottom-color: #d1dae6; border-color: #d1dae6; border-left-color: rgba(5,150,105,0.5); background: #f8fafc; }
[data-theme="light"] .tx-row-hovered           { background: #f4f7fc; }
[data-theme="light"] .tx-muted                 { color: #64748b; }
[data-theme="light"] .tx-ref                   { color: #1a4fa0; }
[data-theme="light"] .tx-amount-in             { color: #0d9488; }
[data-theme="light"] .tx-amount-out            { color: #e53e3e; }
[data-theme="light"] .badge-ingreso            { background: rgba(13,148,136,0.1); color: #0d9488; }
[data-theme="light"] .badge-egreso             { background: rgba(229,62,62,0.1);  color: #dc2626; }
[data-theme="light"] .estado-aprobado          { color: #0d9488; }
[data-theme="light"] .estado-pendiente         { color: #d97706; }
[data-theme="light"] .estado-rechazado         { color: #e53e3e; }
[data-theme="light"] .btn-comprobante          { background: #f4f7fc; border-color: #d5dde8; color: #1a4fa0; }
[data-theme="light"] .btn-comprobante:hover    { background: #e8eef5; }

/* ── Tarjeta de saldo — hero card se mantiene oscura (premium) ───────── */
[data-theme="light"] .bank-grid > div:first-child {
    background: linear-gradient(135deg, #0d1e45 0%, #1a3470 100%) !important;
    border: 1px solid rgba(107,227,180,0.28) !important;
    box-shadow: 0 15px 40px rgba(13,30,69,0.22), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
[data-theme="light"] .bank-grid > div:first-child button {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
[data-theme="light"] .bank-grid > div:first-child button:hover {
    background: rgba(107,227,180,0.18) !important;
    border-color: rgba(107,227,180,0.4) !important;
    color: #6be3b4 !important;
}

/* ── Modales — fondo blanco con sombra institucional ────────────────── */
[data-theme="light"] .gmodal-overlay   { background: rgba(15,30,58,0.55); }
[data-theme="light"] .gmodal-drawer    { background: #ffffff; border-color: #d5dde8; box-shadow: 0 20px 60px rgba(15,30,58,0.18); }
[data-theme="light"] .acred-overlay    { background: rgba(15,30,58,0.55); }
[data-theme="light"] .acred-modal      { background: #ffffff; border-color: #d5dde8; box-shadow: 0 20px 60px rgba(15,30,58,0.18); }
[data-theme="light"] .gmodal-header    { border-bottom-color: #e8eef5; }
[data-theme="light"] .gmodal-title     { color: #0f1e3a; }
[data-theme="light"] .gmodal-close     { color: #64748b; }
[data-theme="light"] .gmodal-close:hover { color: #0f1e3a; }
[data-theme="light"] .gmodal-actions   { border-top-color: #e8eef5; background: rgba(244,247,252,0.8); }
[data-theme="light"] .gmodal-loading   { color: #64748b; }

[data-theme="light"] .gf-label              { color: #1e293b; }
[data-theme="light"] .gf-input             { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .gf-input::placeholder { color: #94a3b8; }
[data-theme="light"] .gf-input:focus        { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,0.12); background: #fff; }
[data-theme="light"] .gf-input-green        { color: #047857; }
[data-theme="light"] .gf-input-blue         { color: #1a4fa0; }
[data-theme="light"] .gf-file-drop          { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .gf-file-drop:hover    { background: #f0faf7; border-color: #059669; }
[data-theme="light"] .gf-file-hint          { color: #475569; }
[data-theme="light"] .gf-file-name          { color: #047857; }
[data-theme="light"] .gf-btn-cancel         { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
[data-theme="light"] .gf-btn-cancel:hover   { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .gf-btn-green          { background: #6be3b4; color: #042f20; font-weight: 800; }
[data-theme="light"] .gmodal-title          { color: #0f172a; font-size: 1.05rem; }
[data-theme="light"] .gmodal-body           { color: #1e293b; }
[data-theme="light"] .gmodal-loading        { color: #475569; }
[data-theme="light"] .gmodal-saldo-banner   { background: #f4f7fc; border-color: #d5dde8; }
[data-theme="light"] .gmodal-saldo-label    { color: #64748b; }
[data-theme="light"] .gmodal-saldo-valor    { color: #0f1e3a; }

/* ── Modo día — Modal Perfil Tercero (perfil-drawer) ──────────────────── */
[data-theme="light"] .perfil-header        { border-bottom-color: #e8eef5; }
[data-theme="light"] .perfil-nombre        { color: #0f172a; }
[data-theme="light"] .perfil-doc           { color: #64748b; }
[data-theme="light"] .perfil-btn-edit      { background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.25); color: #047857; }
[data-theme="light"] .perfil-btn-edit:hover{ background: rgba(5,150,105,0.16); }
[data-theme="light"] .perfil-close         { background: #f1f5f9; color: #64748b; }
[data-theme="light"] .perfil-close:hover   { background: rgba(239,68,68,0.1); color: #dc2626; }
[data-theme="light"] .perfil-tabs          { border-bottom-color: #e2e8f0; }
[data-theme="light"] .perfil-tab           { color: #64748b; }
[data-theme="light"] .perfil-tab:hover     { color: #334155; }
[data-theme="light"] .perfil-tab.active    { color: #047857; border-bottom-color: #047857; }
[data-theme="light"] .perfil-body          { background: transparent; }
[data-theme="light"] .perfil-seccion       { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .perfil-sec-titulo    { background: #f1f5f9; border-bottom-color: #e2e8f0; color: #047857; }
[data-theme="light"] .perfil-campo         { border-bottom-color: #f0f4f8; }
[data-theme="light"] .perfil-label         { color: #64748b; }
[data-theme="light"] .perfil-valor         { color: #0f172a; }
[data-theme="light"] .perfil-cuenta-item   { border-bottom-color: #f0f4f8; }
[data-theme="light"] .perfil-cuenta-icon   { background: rgba(5,150,105,0.1); color: #047857; }
[data-theme="light"] .perfil-cuenta-banco  { color: #0f172a; }
[data-theme="light"] .perfil-cuenta-num    { color: #64748b; }
[data-theme="light"] .perfil-no-cuentas    { color: #94a3b8; }
[data-theme="light"] .perfil-footer        { border-top-color: #e2e8f0; background: #f8fafc; }
[data-theme="light"] .perfil-footer .btn-save   { background: #059669; color: #fff; }
[data-theme="light"] .perfil-footer .btn-save:hover { background: #047857; }
[data-theme="light"] .perfil-footer .btn-cancel { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
[data-theme="light"] .perfil-footer .btn-cancel:hover { background: #e2e8f0; }

/* ── Modo día — inputs del wizard y perfil (wiz-input, wiz-label) ──────── */
[data-theme="light"] .wiz-input        { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .wiz-input::placeholder { color: #94a3b8; }
[data-theme="light"] .wiz-input:focus  { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,0.12); background: #ffffff; }
[data-theme="light"] .wiz-input option { background: #ffffff; color: #0f172a; }
[data-theme="light"] .wiz-label        { color: #1e293b; }
[data-theme="light"] .wiz-divider      { color: #047857; border-top-color: #e2e8f0; }
[data-theme="light"] .wiz-info-txt     { color: #64748b; }
[data-theme="light"] .wiz-aviso        { background: rgba(5,150,105,0.07); border-color: rgba(5,150,105,0.25); color: #047857; }
[data-theme="light"] .kyc-resumen-item { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .kyc-resumen-label{ color: #64748b; }
[data-theme="light"] .kyc-resumen-val  { color: #0f172a; }
[data-theme="light"] .kyc-dropzone     { background: #f8fafc; border-color: #cbd5e1; color: #94a3b8; }
[data-theme="light"] .kyc-dropzone:hover { border-color: #059669; background: #f0fdf9; }
[data-theme="light"] .kyc-placeholder  { color: #94a3b8; }
[data-theme="light"] .kyc-checklist    { color: #64748b; }
[data-theme="light"] .kyc-check-item span { color: #475569; }
[data-theme="light"] .perfil-foto-vacio { background: #f1f5f9; color: #94a3b8; }
[data-theme="light"] .perfil-foto-lbl  { color: #64748b; }
[data-theme="light"] .reenvio-motivo-banner { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.25); color: #991b1b; }

/* =========================================================================
   DISPERSIÓN V1-STYLE — Componentes del modal ancho
   ========================================================================= */
/* Modal ancho para dispersión — compacto y centrado */
.gmodal-drawer-wide {
    max-width: 680px !important;
    width: min(680px, 96vw) !important;
    max-height: 88vh !important;
}
.gmodal-drawer-wide .gmodal-header  { padding: 14px 18px 12px !important; }
.gmodal-drawer-wide .gmodal-title   { font-size: 1rem !important; }
.gmodal-drawer-wide .gmodal-badge   { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; border-radius: 8px !important; }
.gmodal-drawer-wide .gmodal-body    { padding: 12px 16px 14px !important; }
.gmodal-drawer-wide .gmodal-actions { padding-top: 10px !important; margin-top: 10px !important; }
.gmodal-drawer-wide .gf-label       { font-size: 0.72rem !important; margin-bottom: 4px !important; }
.gmodal-drawer-wide .gf-input       { padding: 8px 10px !important; font-size: 0.82rem !important; }
.gmodal-drawer-wide .gf-btn-cancel,
.gmodal-drawer-wide .gf-btn-submit  { padding: 9px 16px !important; font-size: 0.82rem !important; }

/* Grid de dos columnas compacto */
.disp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; }
@media (max-width: 620px) { .disp-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Caja de cuentas buscable */
.disp-account-box { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px; }
.disp-search-wrap { position: relative; margin-bottom: 6px; }
.disp-search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #888890; font-size: 0.78rem; pointer-events: none; }
.disp-search-input { width: 100%; padding: 7px 10px 7px 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #fff; outline: none; font-size: 0.8rem; transition: border-color 0.2s; }
.disp-search-input:focus { border-color: #6be3b4; }
.disp-list { max-height: 130px; overflow-y: auto; border-radius: 5px; }
.disp-list::-webkit-scrollbar { width: 3px; }
.disp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.disp-item { padding: 7px 10px; border: 1px solid transparent; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: 0.18s; border-radius: 5px; margin-bottom: 2px; }
.disp-item:hover { background: rgba(107,227,180,0.05); }
.disp-item.selected { background: rgba(107,227,180,0.13); border: 1px solid #6be3b4; border-left: 3px solid #6be3b4; }
.disp-item-title { font-weight: 600; font-size: 0.8rem; color: #fff; display: block; margin-bottom: 1px; }
.disp-item-desc  { font-size: 0.66rem; color: #888890; font-family: monospace; display: block; }
.disp-item.selected .disp-item-title { color: #6be3b4; }
.disp-empty { padding: 14px 10px; text-align: center; color: #888890; font-size: 0.78rem; }

/* Toggle de moneda */
.disp-currency-toggle { display: flex; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; overflow: hidden; margin-bottom: 8px; }
.disp-currency-btn { flex: 1; padding: 7px; text-align: center; font-size: 0.78rem; font-weight: bold; color: #888890; cursor: pointer; transition: 0.22s; user-select: none; }
.disp-currency-btn.active { background: #6be3b4; color: #000; }

/* Calculadora visual compacta */
.disp-math-box { background: linear-gradient(145deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 14px; flex: 1; }
.disp-math-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 0.75rem; color: #888890; }
.disp-math-row-trm { border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 10px; margin-bottom: 10px; }
.disp-math-val { font-family: monospace; font-size: 0.8rem; font-weight: 700; }
[data-theme="light"] .disp-math-row-trm { border-bottom-color: #cbd5e1; }

/* Monto COP en tabla de dispersiones */
.monto-cop-disp { font-family: monospace; font-size: 0.82rem; font-weight: 700; color: #6be3b4; white-space: nowrap; }
[data-theme="light"] .monto-cop-disp { color: #047857; }

/* Ticket pre-comprobante compacto */
.disp-ticket { background: rgba(0,0,0,0.22); border: 2px dashed rgba(255,255,255,0.1); border-radius: 14px; padding: 16px 20px; max-width: 460px; margin: 0 auto 14px; position: relative; }
.disp-ticket::before, .disp-ticket::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; background: #1a2235; border-radius: 50%; transform: translateY(-50%); }
.disp-ticket::before { left: -11px; }
.disp-ticket::after  { right: -11px; }
.disp-ticket-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 10px; margin-bottom: 10px; gap: 10px; }

/* Helper de color para textos dentro del modal dispersión */
.disp-text-primary { color: #fff; }
.disp-text-muted   { color: #888890; }

/* ── Modo Día — Dispersión ─────────────────────────────────────────────── */
[data-theme="light"] .disp-text-primary { color: #0f172a; }
[data-theme="light"] .disp-text-muted   { color: #475569; }
[data-theme="light"] .disp-account-box { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .disp-search-wrap i { color: #64748b; }
[data-theme="light"] .disp-search-input { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .disp-search-input::placeholder { color: #94a3b8; }
[data-theme="light"] .disp-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] .disp-item { border-bottom-color: #e2e8f0; }
[data-theme="light"] .disp-item:hover { background: rgba(5,150,105,0.06); }
[data-theme="light"] .disp-item.selected { background: rgba(5,150,105,0.1); border-color: #059669; }
[data-theme="light"] .disp-item-title { color: #0f172a; }
[data-theme="light"] .disp-item.selected .disp-item-title { color: #059669; }
[data-theme="light"] .disp-item-desc { color: #475569; }
[data-theme="light"] .disp-empty { color: #64748b; }
[data-theme="light"] .disp-currency-toggle { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .disp-currency-btn { color: #475569; }
[data-theme="light"] .disp-currency-btn.active { background: #059669; color: #fff; }
[data-theme="light"] .disp-math-box { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .disp-math-row { color: #475569; }
[data-theme="light"] .disp-ticket { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .disp-ticket::before,
[data-theme="light"] .disp-ticket::after { background: #ffffff; }
[data-theme="light"] .disp-ticket-row { border-bottom-color: #e2e8f0; }

/* =========================================================================
   TERCEROS VIEW — tabla desktop + cards mobile
   ========================================================================= */

/* Botón "Añadir Tercero" */
.btn-tercero-nuevo {
    background: #6be3b4; color: #000; padding: 10px 20px;
    border: none; border-radius: 10px; font-weight: 700; font-size: 0.88rem;
    cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.25s;
    box-shadow: 0 4px 14px rgba(107,227,180,0.2);
}
.btn-tercero-nuevo:hover { opacity: 0.85; transform: translateY(-1px); }

/* Panel de filtros */
.terceros-filtros {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.t-search-wrap { position: relative; flex: 1; min-width: 200px; }
.t-search-wrap > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #888890; font-size: 0.82rem; pointer-events: none; }
.t-search-input { width: 100%; padding: 8px 32px 8px 30px; background: rgba(0,0,0,0.22); border: 1px solid rgba(148,163,184,0.15); border-radius: 8px; color: var(--text-main); font-size: 0.85rem; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.t-search-input:focus { border-color: #6be3b4; }
.t-clear-btn { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 0.75rem; padding: 2px 4px; }
.t-filter-select { padding: 8px 10px; background: rgba(0,0,0,0.22); border: 1px solid rgba(148,163,184,0.15); border-radius: 8px; color: var(--text-main); font-size: 0.82rem; outline: none; cursor: pointer; }
.t-filter-select:focus { border-color: #6be3b4; }
.t-filter-count { font-size: 0.82rem; white-space: nowrap; margin-left: 4px; }

/* Mostrar/ocultar según viewport */
.terceros-desktop { display: block; }
.terceros-mobile  { display: none; }
@media (max-width: 768px) {
    .terceros-desktop { display: none; }
    .terceros-mobile  { display: block; }
    .terceros-filtros { flex-direction: column; }
    .t-search-wrap    { width: 100%; }
    .t-filter-select  { width: 100%; }
}

/* Tabla desktop */
.terceros-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.terceros-table thead tr {
    border-bottom: 1px dashed rgba(148,163,184,0.2);
    text-align: left; color: #94a3b8; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px;
}
.terceros-table thead th { padding: 8px 12px; font-weight: 700; }
.terceros-row { border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.18s; }
.terceros-row:hover { background: rgba(107,227,180,0.03); }
.terceros-row td { padding: 11px 12px; vertical-align: middle; }
.terceros-empty { text-align: center; padding: 40px 20px; color: #94a3b8; font-size: 0.88rem; }

/* Tipografías compartidas */
.t-avatar  { width: 30px; height: 30px; border-radius: 50%; background: rgba(107,227,180,0.12); color: #6be3b4; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.72rem; flex-shrink: 0; border: 1px solid rgba(107,227,180,0.25); }
.t-titular { color: var(--text-main); font-weight: 600; font-size: 0.82rem; line-height: 1.2; }
.t-sub     { color: #94a3b8; font-size: 0.70rem; margin-top: 1px; line-height: 1.2; }
.t-banco   { color: #6be3b4; font-weight: 600; font-size: 0.82rem; }
.t-muted   { color: #94a3b8; font-size: 0.78rem; }
.t-cuenta  { color: var(--text-main); font-family: monospace; font-size: 0.82rem; }
.badge-estado { padding: 2px 7px; border-radius: 4px; font-size: 0.63rem; font-weight: 700; white-space: nowrap; letter-spacing: 0.3px; }

/* Cards mobile */
.tercero-card { margin-bottom: 5px; padding: 8px 11px !important; }

/* Paginación */
.terceros-paginacion {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; margin-top: 12px;
    padding: 10px 14px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 10px;
}
.btn-pag { background: rgba(255,255,255,0.04); color: var(--text-main); border: 1px solid var(--border); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; transition: 0.2s; }
.btn-pag:hover:not(:disabled) { background: rgba(107,227,180,0.15); border-color: #6be3b4; color: #6be3b4; }
.btn-pag:disabled { opacity: 0.3; cursor: not-allowed; }

/* Wizard de pasos en el modal */
.t-steps {
    display: flex; align-items: center; gap: 0;
    padding: 12px 20px 0; margin-bottom: -4px;
}
.t-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.t-step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; background: rgba(255,255,255,0.06); border: 2px solid rgba(148,163,184,0.2); color: #94a3b8; transition: 0.3s; }
.t-step.active .t-step-dot { background: rgba(107,227,180,0.15); border-color: #6be3b4; color: #6be3b4; }
.t-step.done .t-step-dot   { background: #6be3b4; border-color: #6be3b4; color: #000; }
.t-step span { font-size: 0.68rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.t-step.active span { color: #6be3b4; }
.t-step-line { flex: 1; height: 2px; background: rgba(148,163,184,0.15); margin: 0 8px; margin-bottom: 16px; transition: 0.3s; }
.t-step-line.active { background: #6be3b4; }

/* Resumen persona en paso 2 */
.t-resumen-persona {
    display: flex; align-items: center; gap: 10px;
    background: rgba(107,227,180,0.06); border: 1px solid rgba(107,227,180,0.15);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 16px;
}

/* =========================================================================
   FORMULARIOS GENÉRICOS — usados en TercerosView y otros modales
   ========================================================================= */
.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.form-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.form-input:focus { border-color: #6be3b4; box-shadow: 0 0 0 3px rgba(107,227,180,0.1); }
.form-input option { background: #111827; color: #f1f5f9; }

.btn-primary-full {
    width: 100%;
    background: #6be3b4;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 13px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-primary-full:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.btn-primary-full:disabled { opacity: 0.45; cursor: not-allowed; }

/* =========================================================================
   WIZARD TERCERO — Modal, pasos, grids responsivos
   ========================================================================= */

/* Modal — desktop: 680px centrado / mobile: full-screen */
.gmodal-tercero {
    max-width: 680px !important;
    width: min(680px, 96vw) !important;
    max-height: 92vh !important;
    display: flex;
    flex-direction: column;
}
@media (max-width: 600px) {
    .gmodal-tercero {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        inset: 0 !important;
    }
}

/* Header del wizard */
.wiz-header { padding: 9px 14px 8px !important; }
.wiz-subtitle { font-size: 0.75rem; }

/* Barra de pasos */
.wiz-steps-bar {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.wiz-step {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.wiz-step-dot {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(148,163,184,0.2);
    color: #94a3b8; transition: 0.25s;
}
.wiz-step.active .wiz-step-dot { background: rgba(107,227,180,0.15); border-color: #6be3b4; color: #6be3b4; }
.wiz-step.done   .wiz-step-dot { background: #6be3b4; border-color: #6be3b4; color: #000; font-size: 0.65rem; }
.wiz-step-lbl {
    font-size: 0.62rem; color: #94a3b8;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap;
}
.wiz-step.active .wiz-step-lbl { color: #6be3b4; }
@media (max-width: 400px) { .wiz-step-lbl { display: none; } }
.wiz-step-line {
    flex: 1; height: 2px;
    background: rgba(148,163,184,0.15);
    margin: 0 6px; margin-bottom: 14px;
    transition: background 0.3s;
}
.wiz-step-line.active { background: #6be3b4; }

/* Body del wizard — scrollable */
.wiz-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 14px 10px !important;
    overscroll-behavior: contain;
}
.wiz-body::-webkit-scrollbar { width: 3px; }
.wiz-body::-webkit-scrollbar-thumb { background: rgba(107,227,180,0.2); border-radius: 10px; }

/* Espaciado estándar entre secciones */
.wiz-mb { margin-bottom: 6px; }

/* Labels y inputs compactos */
.wiz-label {
    display: block;
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.wiz-novence-chk {
    font-size: 0.68rem; color: #6be3b4;
    margin-left: 6px; cursor: pointer; font-weight: 500;
}
.wiz-input {
    width: 100%;
    padding: 6px 9px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 7px;
    color: var(--text-main);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.wiz-input:focus { border-color: #6be3b4; box-shadow: 0 0 0 2px rgba(107,227,180,0.1); }
.wiz-input:disabled { opacity: 0.45; cursor: not-allowed; }
.wiz-input option { background: #111827; color: #f1f5f9; }

/* Separador de sección */
.wiz-divider {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    font-weight: 700;
    padding: 5px 0 3px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 5px;
    margin-top: 2px;
}

/* Grids responsivos del wizard */
.wiz-g2   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wiz-g3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.wiz-g-doc { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }

@media (max-width: 600px) {
    .wiz-g2    { grid-template-columns: 1fr 1fr; gap: 8px; }   /* se mantiene 2col */
    .wiz-g3    { grid-template-columns: 1fr; gap: 8px; }        /* 3col → 1col */
    .wiz-g-doc { grid-template-columns: 90px 1fr; gap: 8px; }   /* doc: más angosto */
    .wiz-input { padding: 7px 9px; font-size: 0.8rem; }
    .wiz-label { font-size: 0.7rem; }
    .wiz-mb    { margin-bottom: 8px; }
}

/* Botones de navegación wizard */
.wiz-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 4px;
}

/* Texto informativo pequeño */
.wiz-info-txt {
    font-size: 0.78rem; color: #94a3b8;
    margin: 0 0 10px; line-height: 1.4;
}

/* Aviso de compliance */
.wiz-aviso {
    background: rgba(245,166,35,0.07);
    border: 1px solid rgba(245,166,35,0.2);
    border-radius: 7px;
    padding: 10px 12px;
    font-size: 0.78rem;
    color: #f5a623;
    line-height: 1.4;
    display: flex; gap: 8px; align-items: flex-start;
}
.wiz-aviso i { margin-top: 2px; flex-shrink: 0; }

/* =========================================================================
   KYC DROPZONES — Soportes fotográficos paso 3
   ========================================================================= */
.kyc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.kyc-dropzone {
    position: relative;
    border: 2px dashed rgba(107,227,180,0.25);
    border-radius: 10px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background: rgba(0,0,0,0.18);
    transition: border-color 0.2s, background 0.2s;
}
.kyc-dropzone:hover { border-color: rgba(107,227,180,0.55); background: rgba(107,227,180,0.04); }
.kyc-dropzone.filled { border-style: solid; border-color: rgba(107,227,180,0.4); }
/* Posición absoluta garantiza que la imagen llene el dropzone sin depender del flex */
.kyc-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}
.kyc-placeholder {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 8px; text-align: center;
    pointer-events: none;
}
.kyc-placeholder i    { font-size: 1.5rem; color: #6be3b4; opacity: 0.6; }
.kyc-placeholder span { font-size: 0.75rem; font-weight: 600; color: #f1f5f9; }
.kyc-remove {
    position: absolute; top: 5px; right: 5px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(239,68,68,0.85); color: #fff;
    border: none; font-size: 0.65rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 20; transition: background 0.2s;
}
.kyc-remove:hover { background: #ef4444; }

@media (max-width: 600px) {
    .kyc-dropzone { aspect-ratio: 5/3; } /* un poco más ancho en mobile */
    .kyc-placeholder i { font-size: 1.2rem; }
    .kyc-placeholder span { font-size: 0.7rem; }
}

/* Checklist de documentos */
.kyc-checklist {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.05);
}
.kyc-check-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: #f1f5f9;
}

/* ── Motivo de rechazo inline ── */
.t-rechazo-motivo {
    margin-top: 4px;
    font-size: 0.72rem;
    color: #fca5a5;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.18);
    border-radius: 5px;
    padding: 4px 8px;
    line-height: 1.4;
    max-width: 240px;
}
.t-rechazo-motivo i { margin-right: 4px; }

/* ── Botón re-enviar docs ── */
.t-btn-reenviar {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: rgba(245,166,35,0.12);
    border: 1px solid rgba(245,166,35,0.35);
    border-radius: 6px;
    color: #f5a623;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.t-btn-reenviar:hover { background: rgba(245,166,35,0.22); }

/* ── Modal re-envío ── */
.gmodal-reenvio {
    max-width: 520px !important;
    width: min(520px, 96vw) !important;
}
@media (max-width: 600px) {
    .gmodal-reenvio {
        width: 100vw !important; max-width: 100vw !important;
        border-radius: 0 !important; margin: 0 !important;
        position: fixed !important; inset: 0 !important;
    }
}

/* Banner motivo rechazo dentro del modal */
.reenvio-motivo-banner {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-left: 3px solid #ef4444;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #fca5a5;
    margin-bottom: 12px;
    line-height: 1.5;
}
.reenvio-motivo-banner i { color: #ef4444; font-size: 1rem; margin-top: 2px; flex-shrink: 0; }

/* Tarjetas de resumen paso 4 */
.kyc-resumen-item {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(148,163,184,0.1);
    border-radius: 7px;
    padding: 8px 10px;
}
.kyc-resumen-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8; font-weight: 600;
    margin-bottom: 2px;
}
.kyc-resumen-val {
    font-size: 0.82rem; color: #f1f5f9;
    font-weight: 500; word-break: break-word;
}

/* ══════════════════════════════════════════════
   PERFIL DE TERCERO — Modal/Drawer completo
══════════════════════════════════════════════ */

/* Botón "Ver perfil" en tabla */
.t-btn-perfil {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    background: rgba(107,227,180,0.1);
    border: 1px solid rgba(107,227,180,0.3);
    border-radius: 6px;
    color: #6be3b4;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.t-btn-perfil:hover { background: rgba(107,227,180,0.2); border-color: rgba(107,227,180,0.5); }

/* Overlay backdrop */
.perfil-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: flex-start; justify-content: flex-end;
}

/* Drawer lateral */
.perfil-drawer {
    position: relative;
    width: min(520px, 100vw);
    height: 100vh;
    background: #111827;
    border-left: 1px solid rgba(148,163,184,0.1);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: -8px 0 40px rgba(0,0,0,0.4);
}
@media (max-width: 600px) {
    .perfil-drawer {
        width: 100vw;
        border-left: none;
    }
}

/* Header del perfil */
.perfil-header {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 20px 16px;
    background: linear-gradient(135deg, rgba(107,227,180,0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(148,163,184,0.08);
    flex-shrink: 0;
}
.perfil-avatar-lg {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #6be3b4 0%, #4ecba0 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; color: #0a0f1a;
    flex-shrink: 0;
    text-transform: uppercase;
}
.perfil-header-info { flex: 1; min-width: 0; }
.perfil-nombre {
    font-size: 1.05rem; font-weight: 700; color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.perfil-doc {
    font-size: 0.78rem; color: #94a3b8;
    margin-top: 2px;
}
.perfil-header-actions {
    display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.perfil-btn-edit {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px;
    background: rgba(107,227,180,0.12);
    border: 1px solid rgba(107,227,180,0.3);
    border-radius: 6px;
    color: #6be3b4;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.perfil-btn-edit:hover { background: rgba(107,227,180,0.22); }
.perfil-close {
    width: 32px; height: 32px; border-radius: 6px;
    background: rgba(148,163,184,0.08);
    border: 1px solid rgba(148,163,184,0.12);
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 1rem;
    cursor: pointer; transition: background 0.2s, color 0.2s;
}
.perfil-close:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Barra de pestañas */
.perfil-tabs {
    display: flex;
    border-bottom: 1px solid rgba(148,163,184,0.1);
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.perfil-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 10px 6px;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: 0.75rem; font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
}
.perfil-tab i { font-size: 0.78rem; }
.perfil-tab:hover { color: #94a3b8; }
.perfil-tab.active { color: #6be3b4; border-bottom-color: #6be3b4; }
@media (max-width: 400px) {
    .perfil-tab span { display: none; }
    .perfil-tab { padding: 10px; }
    .perfil-tab i { font-size: 1rem; }
}

/* Body scrollable */
.perfil-body {
    flex: 1; overflow-y: auto;
    padding: 16px 20px;
    display: flex; flex-direction: column; gap: 16px;
}
.perfil-body::-webkit-scrollbar { width: 4px; }
.perfil-body::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); border-radius: 2px; }

/* Sección dentro del perfil */
.perfil-seccion {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(148,163,184,0.07);
    border-radius: 8px;
    overflow: hidden;
}
.perfil-sec-titulo {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(148,163,184,0.07);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6be3b4;
}
.perfil-sec-titulo i { font-size: 0.8rem; }

/* Grid de campos */
.perfil-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 4px 0;
}
.perfil-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    padding: 4px 0;
}
@media (max-width: 480px) {
    .perfil-grid { grid-template-columns: 1fr; }
}
.perfil-campo {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(148,163,184,0.05);
}
.perfil-campo:last-child { border-bottom: none; }
.perfil-label {
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 3px;
}
.perfil-valor {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
    word-break: break-word;
    line-height: 1.4;
}
.perfil-valor.vacio { color: #475569; font-style: italic; }

/* Fotos KYC en perfil */
.perfil-fotos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 14px;
}
@media (max-width: 480px) {
    .perfil-fotos-grid { grid-template-columns: repeat(2, 1fr); }
}
.perfil-foto-item {
    display: flex; flex-direction: column; gap: 4px;
    align-items: center;
}
.perfil-foto-thumb {
    position: relative;
    width: 100%; aspect-ratio: 3/2;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(148,163,184,0.1);
    cursor: pointer;
}
.perfil-foto-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.perfil-foto-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
    color: #fff; font-size: 1.1rem;
}
.perfil-foto-thumb:hover .perfil-foto-overlay { opacity: 1; }
.perfil-foto-vacio {
    width: 100%; aspect-ratio: 3/2;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    border: 1px dashed rgba(148,163,184,0.2);
    display: flex; align-items: center; justify-content: center;
    color: #475569; font-size: 1.2rem;
}
.perfil-foto-lbl {
    font-size: 0.62rem; color: #64748b;
    text-align: center; line-height: 1.3;
    font-weight: 500;
}

/* Cuentas bancarias vinculadas */
.perfil-cuentas-list {
    padding: 4px 0;
}
.perfil-cuenta-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(148,163,184,0.05);
}
.perfil-cuenta-item:last-child { border-bottom: none; }
.perfil-cuenta-icon {
    width: 30px; height: 30px; border-radius: 6px;
    background: rgba(107,227,180,0.1);
    border: 1px solid rgba(107,227,180,0.2);
    display: flex; align-items: center; justify-content: center;
    color: #6be3b4; font-size: 0.85rem; flex-shrink: 0;
}
.perfil-cuenta-info { flex: 1; min-width: 0; }
.perfil-cuenta-banco {
    font-size: 0.82rem; font-weight: 600; color: #e2e8f0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perfil-cuenta-num {
    font-size: 0.72rem; color: #64748b; margin-top: 1px;
}
.perfil-no-cuentas {
    padding: 12px 14px;
    font-size: 0.8rem; color: #475569;
    text-align: center;
}

/* Footer con acciones de edición */
.perfil-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(148,163,184,0.08);
    display: flex; gap: 10px; justify-content: flex-end;
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.perfil-footer .btn-save {
    padding: 8px 20px;
    background: #6be3b4;
    border: none; border-radius: 6px;
    color: #0a0f1a; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; transition: background 0.2s;
}
.perfil-footer .btn-save:hover { background: #4ecba0; }
.perfil-footer .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.perfil-footer .btn-cancel {
    padding: 8px 16px;
    background: rgba(148,163,184,0.08);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 6px;
    color: #94a3b8; font-size: 0.85rem;
    cursor: pointer; transition: background 0.2s;
}
.perfil-footer .btn-cancel:hover { background: rgba(148,163,184,0.15); }

/* ══════════════════════════════════════════════
   DROPZONE DE EDICIÓN DE FOTO EN PERFIL
══════════════════════════════════════════════ */
.perfil-foto-edit {
    position: relative;
    width: 100%; aspect-ratio: 3/2;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
    border: 1.5px dashed rgba(107,227,180,0.35);
    cursor: pointer;
    transition: border-color 0.2s;
}
.perfil-foto-edit:hover { border-color: rgba(107,227,180,0.75); }
.perfil-foto-edit-overlay {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    background: rgba(0,0,0,0.5);
    color: #6be3b4;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s;
}
.perfil-foto-edit:hover .perfil-foto-edit-overlay { background: rgba(0,0,0,0.65); }
.perfil-foto-edit-overlay i { font-size: 1.1rem; }

/* ══════════════════════════════════════════════
   VISOR DE FOTOS KYC — Lightbox con zoom
══════════════════════════════════════════════ */
.foto-visor-overlay {
    position: fixed; inset: 0; z-index: 999999; /* encima de todo, incluyendo gmodal-overlay (99990) */
    background: rgba(0,0,0,0.93);
    display: flex; flex-direction: column;
}

/* Toolbar superior */
.foto-visor-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.foto-visor-titulo {
    font-size: 0.88rem; font-weight: 600; color: #f1f5f9;
}

/* Área de imagen — scrollable al hacer zoom */
.foto-visor-img-wrap {
    flex: 1;
    overflow: auto;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}
.foto-visor-img-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.foto-visor-img-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.foto-visor-img {
    max-width: 90vw; max-height: 75vh;
    object-fit: contain;
    border-radius: 6px;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    cursor: default;
    display: block;
    flex-shrink: 0;
}
/* Visor PDF — iframe ocupa todo el espacio disponible */
.foto-visor-pdf {
    flex: 1;
    width: 100%; height: 100%;
    border: none;
    background: #fff;
}

/* Controles de zoom en la parte inferior */
.foto-visor-controls {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 16px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.foto-visor-zoom-lbl {
    font-size: 0.8rem; color: #94a3b8; font-weight: 700;
    min-width: 46px; text-align: center;
    letter-spacing: 0.04em;
}

/* Botones del visor */
.foto-visor-btn {
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #e2e8f0; font-size: 0.88rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}
.foto-visor-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.foto-visor-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.foto-visor-btn-close:hover:not(:disabled) {
    background: rgba(239,68,68,0.25);
    border-color: rgba(239,68,68,0.4);
    color: #fca5a5;
}

/* ══════════════════════════════════════════════════════════════════
   ALERT ÉXITO PREMIUM — 100% custom Vue (sin SweetAlert)
   ══════════════════════════════════════════════════════════════════ */

/* SweetAlert base para warnings/errors */
.swal-ofipagos {
    border: 1px solid rgba(148,163,184,0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7) !important;
}

/* ── Overlay fondo ── */
.ae-overlay {
    position: fixed; inset: 0;
    background: rgba(4,8,16,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 999998;
    padding: 24px;
}

/* ── Card principal ── */
.ae-card {
    width: min(400px, 100%);
    border-radius: 24px;
    overflow: hidden;
    background: #07111f;
    border: 1px solid rgba(107,227,180,0.1);
    box-shadow:
        0 0 0 1px rgba(107,227,180,0.05),
        0 24px 60px rgba(0,0,0,0.7),
        0 0 80px rgba(107,227,180,0.04);
}

/* ── Header verde oscuro ── */
.ae-header {
    position: relative;
    background: linear-gradient(160deg, #071a11 0%, #091510 50%, #07111f 100%);
    padding: 44px 24px 36px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* Línea inferior del header */
.ae-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107,227,180,0.25), transparent);
}
/* Resplandor ambiental detrás del icono */
.ae-header::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107,227,180,0.08) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* ── SVG checkmark animado ── */
.ae-check-svg {
    position: relative; z-index: 1;
    width: 80px; height: 80px;
    filter: drop-shadow(0 0 18px rgba(107,227,180,0.25));
    animation: aeSvgPulse 3s ease-in-out infinite;
}
@keyframes aeSvgPulse {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(107,227,180,0.2)); }
    50%       { filter: drop-shadow(0 0 28px rgba(107,227,180,0.45)); }
}

/* Círculo que se dibuja */
.ae-check-circle {
    stroke: #6be3b4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 155;
    stroke-dashoffset: 155;
    animation: aeCircleDraw 0.65s cubic-bezier(0.65,0,0.45,1) 0.1s forwards;
}
@keyframes aeCircleDraw { to { stroke-dashoffset: 0; } }

/* Check que se dibuja después del círculo */
.ae-check-mark {
    stroke: #6be3b4;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 38;
    stroke-dashoffset: 38;
    animation: aeCheckDraw 0.38s cubic-bezier(0.65,0,0.45,1) 0.72s forwards;
}
@keyframes aeCheckDraw  { to { stroke-dashoffset: 0; } }

/* Puntos decorativos en el header */
.ae-header-dots {
    position: absolute; bottom: 14px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 5px;
}
.ae-header-dots span {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(107,227,180,0.2);
}
.ae-header-dots span:nth-child(2) { background: rgba(107,227,180,0.4); }

/* ── Body ── */
.ae-body {
    padding: 28px 28px 30px;
    text-align: center;
}

.ae-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 3.5px;
    color: rgba(107,227,180,0.6);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ae-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 22px;
}

/* ── Block de referencia ── */
.ae-ref-block {
    background: rgba(107,227,180,0.04);
    border: 1px solid rgba(107,227,180,0.15);
    border-radius: 14px;
    padding: 14px 20px 16px;
    margin-bottom: 20px;
}
.ae-ref-label {
    font-size: 0.55rem;
    letter-spacing: 3px;
    color: #334155;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.ae-ref-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.18rem;
    font-weight: 800;
    color: #6be3b4;
    letter-spacing: 2px;
    word-break: break-all;
}

.ae-message {
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.7;
    margin: 0 0 24px;
}

/* ── Botón ── */
.ae-btn {
    width: 100%;
    background: linear-gradient(135deg, #6be3b4 0%, #3dcf9e 100%);
    color: #040e18;
    padding: 14px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 6px 28px rgba(107,227,180,0.22);
}
.ae-btn:hover   { opacity: 0.92; box-shadow: 0 8px 36px rgba(107,227,180,0.36); }
.ae-btn:active  { transform: scale(0.98); }

/* ── Transiciones Desktop ── */
.ae-fade-enter-active { transition: opacity 0.22s ease; }
.ae-fade-leave-active { transition: opacity 0.18s ease; }
.ae-fade-enter-from, .ae-fade-leave-to { opacity: 0; }

.ae-fade-enter-active .ae-card {
    animation: aeCardIn 0.32s cubic-bezier(0.34,1.2,0.64,1) both;
}
@keyframes aeCardIn {
    from { transform: scale(0.86) translateY(24px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* ── Desktop: Card horizontal — panel verde lateral + contenido ── */
@media (min-width: 601px) {
    .ae-card {
        width: 500px;
        border-radius: 18px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    /* Panel izquierdo verde oscuro */
    .ae-header {
        width: 148px;
        flex-shrink: 0;
        padding: 40px 14px 36px;
        border-radius: 18px 0 0 18px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Línea vertical a la derecha del panel izquierdo */
    .ae-header::after {
        left: auto; right: 0;
        bottom: 8%; top: 8%;
        width: 1px; height: auto;
        background: linear-gradient(180deg, transparent, rgba(107,227,180,0.22), transparent);
    }
    /* Puntos debajo del SVG, apilados verticalmente */
    .ae-header-dots {
        position: static;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        gap: 6px;
    }
    .ae-check-svg { width: 62px; height: 62px; }
    /* Panel derecho con contenido */
    .ae-body {
        flex: 1;
        padding: 28px 26px 28px 24px;
        text-align: left;
    }
    .ae-eyebrow { text-align: left; }
    .ae-title {
        font-size: 1.2rem;
        text-align: left;
        margin-bottom: 14px;
    }
    .ae-ref-block {
        text-align: left;
        padding: 12px 16px 14px;
        margin-bottom: 14px;
    }
    .ae-ref-label { color: #475569; }
    .ae-ref-value { font-size: 1.05rem; letter-spacing: 1.5px; }
    .ae-message {
        text-align: left;
        font-size: 0.77rem;
        margin-bottom: 18px;
    }
    .ae-btn {
        padding: 11px;
        font-size: 0.88rem;
        border-radius: 10px;
    }
    /* Animación de entrada en desktop: desliza ligeramente desde arriba */
    .ae-fade-enter-active .ae-card {
        animation: aeCardInDesktop 0.3s cubic-bezier(0.34,1.1,0.64,1) both;
    }
    @keyframes aeCardInDesktop {
        from { transform: translateY(-18px) scale(0.96); opacity: 0; }
        to   { transform: translateY(0)     scale(1);    opacity: 1; }
    }
}

/* ── Mobile: Bottom Sheet ── */
@media (max-width: 600px) {
    .ae-overlay { align-items: flex-end; padding: 0; }
    .ae-card {
        width: 100%;
        border-radius: 22px 22px 0 0;
        border-bottom: none;
    }
    .ae-fade-enter-active .ae-card {
        animation: aeSheetIn 0.38s cubic-bezier(0.32,0.72,0,1) both;
    }
    .ae-fade-leave-active .ae-card {
        animation: aeSheetOut 0.26s ease-in both;
    }
    @keyframes aeSheetIn  { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes aeSheetOut { from { transform: translateY(0); }    to { transform: translateY(100%); } }
    .ae-body { padding-bottom: max(28px, env(safe-area-inset-bottom, 28px)); }
}

/* ══════════════════════════════════════════════════════════════════
   MODAL ACREDITACIONES — overlay + cajón compacto premium
   ══════════════════════════════════════════════════════════════════ */

/* SweetAlert2 siempre encima de cualquier modal */
.swal2-container { z-index: 999999 !important; }

/* Popup premium sin icono nativo */
.swal-ofipagos { border: 1px solid rgba(148,163,184,0.1) !important; border-radius: 14px !important; box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important; }

/* Transición del modal */
.acred-fade-enter-active, .acred-fade-leave-active { transition: opacity 0.22s ease; }
.acred-fade-enter-from, .acred-fade-leave-to { opacity: 0; }

/* Overlay — idéntico al de dispersión */
.acred-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.80);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Caja del modal — idéntica al gmodal-drawer */
.acred-modal {
    background: #1a2235;
    border: 1px solid rgba(148,163,184,0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    overflow: hidden;
}

/* Barra de acciones — padding lateral + fondo premium */
.acred-modal .gmodal-actions {
    padding: 16px 24px 22px;
    margin-top: 0;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* Botón cancelar dentro del modal de acreditación */
.acred-modal .gf-btn-cancel {
    flex: 0 0 auto;
    padding: 13px 22px;
    border-radius: 10px;
}

/* Botón enviar — más alto, sombra verde, bordes redondeados */
.acred-modal .gf-btn-submit {
    flex: 1;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 18px rgba(107,227,180,0.25);
    transition: box-shadow 0.2s, opacity 0.2s;
}
.acred-modal .gf-btn-submit:hover:not(:disabled) {
    box-shadow: 0 6px 26px rgba(107,227,180,0.4);
    opacity: 0.93;
}

/* Cuerpo con un poco más de respiro */
.acred-modal .gmodal-body {
    padding: 22px 24px 8px;
}

/* Header del modal */
.acred-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.acred-close-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(148,163,184,0.1);
    color: #64748b;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    transition: background 0.18s, color 0.18s;
}
.acred-close-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.25); }

/* Campos del formulario */
.acred-field { margin-bottom: 15px; }
.acred-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.85rem; font-weight: 500;
    color: #94a3b8;
    margin-bottom: 8px;
}
.acred-step {
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(107,227,180,0.1);
    border: 1px solid rgba(107,227,180,0.25);
    color: #6be3b4; font-size: 0.65rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.acred-input {
    width: 100%; padding: 12px;
    background: #0f1623;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 8px;
    color: #f1f5f9; font-size: 0.88rem;
    outline: none;
    transition: border-color 0.18s;
    box-sizing: border-box;
}
.acred-input:focus { border-color: #6be3b4; box-shadow: 0 0 0 3px rgba(107,227,180,0.08); }
.acred-input::placeholder { color: #4a5568; }
.acred-monto { color: #6be3b4 !important; font-size: 1.1rem !important; font-weight: 700 !important; font-family: monospace !important; }

/* Dropzone de comprobante */
.acred-dropzone {
    border: 1.5px dashed rgba(107,227,180,0.25);
    border-radius: 10px;
    background: rgba(107,227,180,0.02);
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 80px;
}
.acred-dropzone:hover, .acred-dropzone.loaded {
    border-color: rgba(107,227,180,0.45);
    background: rgba(107,227,180,0.04);
}

/* Botón de envío */
.acred-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #6be3b4 0%, #3ecfa0 100%);
    color: #050f1a;
    padding: 13px;
    border: none;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(107,227,180,0.2);
    letter-spacing: 0.3px;
}
.acred-submit-btn:hover:not(:disabled) { box-shadow: 0 6px 28px rgba(107,227,180,0.35); opacity: 0.95; }
.acred-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ─── Loader Premium "Generando Comprobante" ─────────────────────────── */
.cl-loader {
    background: #ffffff;
    border-radius: 18px;
    width: 210px;
    overflow: hidden;
    box-shadow: 0 32px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}
.cl-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 22px 20px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.cl-scan-beam {
    position: absolute;
    top: 0; left: -70%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(107,227,180,0.18), transparent);
    animation: clBeam 1.1s ease-in-out infinite;
}
@keyframes clBeam {
    0%   { left: -70%; }
    100% { left: 130%; }
}
.cl-icon-ring {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(107,227,180,0.1);
    border: 1.5px solid rgba(107,227,180,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 20px rgba(107,227,180,0.15);
}
.cl-content {
    padding: 14px 18px 10px;
}
.cl-strip {
    height: 7px;
    border-radius: 4px;
    background: #e5e7eb;
    margin-bottom: 7px;
    opacity: 0;
    animation: clFadeIn 0.22s ease forwards;
}
.cl-strip-accent {
    background: linear-gradient(90deg, #d1fae5, #a7f3d0);
}
@keyframes clFadeIn {
    0%   { opacity: 0; transform: scaleX(0.6); transform-origin: left; }
    100% { opacity: 1; transform: scaleX(1); }
}
.cl-progress-wrap {
    margin: 0 18px 12px;
    height: 3px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}
.cl-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6be3b4, #059669);
    border-radius: 2px;
    animation: clProgress 1.2s ease-in-out forwards;
    width: 0%;
}
@keyframes clProgress {
    0%   { width: 0%; }
    60%  { width: 75%; }
    100% { width: 100%; }
}
.cl-label {
    text-align: center;
    padding: 0 16px 14px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #374151;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   UTILIDADES COMPARTIDAS — Page header, stats, empty, filtros,
   paginación, búsqueda  (usadas en PlataformasView y futuras vistas)
   ═══════════════════════════════════════════════════════════ */

/* ── Page header ── */
.cb-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}
.cb-page-title {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 0 0 3px 0;
    font-weight: 700;
}
.cb-page-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}
.cb-btn-nuevo {
    background: #6be3b4;
    color: #000;
    padding: 11px 22px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(107,227,180,0.22);
    transition: background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.cb-btn-nuevo:hover { background: #4ecba0; box-shadow: 0 6px 18px rgba(107,227,180,0.3); }

/* ── Stat cards row ── */
.cb-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}
.cb-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}
.cb-stat-num {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}
.cb-stat-lbl {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Empty state ── */
.cb-empty-state {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 52px 30px;
    text-align: center;
}
.cb-empty-icon {
    font-size: 2.8rem;
    color: rgba(148,163,184,0.25);
    margin-bottom: 14px;
}
.cb-empty-title {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 6px;
}
.cb-empty-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── Filter bar ── */
.cb-filtros-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.cb-filtros-left  { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-filtros-right { display: flex; gap: 8px; align-items: center; }

.cb-filtro-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cb-filtro-btn:hover { border-color: rgba(107,227,180,0.35); color: var(--text-primary); }
.cb-filtro-active {
    background: rgba(107,227,180,0.12) !important;
    border-color: rgba(107,227,180,0.4) !important;
    color: #6be3b4 !important;
    font-weight: 700 !important;
}
.cb-filtro-count {
    background: rgba(148,163,184,0.15);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 0.67rem;
    font-weight: 700;
}
.cb-filtro-active .cb-filtro-count { background: rgba(107,227,180,0.2); }

/* ── Search ── */
.cb-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cb-search-icon {
    position: absolute;
    left: 9px;
    color: var(--text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}
.cb-search-input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 6px 10px 6px 28px;
    width: 175px;
    transition: border-color 0.2s;
    outline: none;
}
.cb-search-input:focus { border-color: rgba(107,227,180,0.4); }
.cb-search-input::placeholder { color: var(--text-muted); }

/* ── Pagination bar ── */
.cb-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}
.cb-pag-info { font-size: 0.72rem; color: var(--text-muted); }
.cb-pag-controls { display: flex; align-items: center; gap: 4px; }
.cb-pag-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
}
.cb-pag-btn:hover:not(:disabled) { border-color: rgba(107,227,180,0.4); color: #6be3b4; }
.cb-pag-btn:disabled { opacity: 0.35; cursor: default; }
.cb-pag-num {
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
    padding: 0 4px;
}
.cb-pag-num:hover { color: var(--text-primary); }
.cb-pag-active {
    background: rgba(107,227,180,0.15) !important;
    color: #6be3b4 !important;
    font-weight: 700 !important;
}
.cb-pag-perpage { display: flex; align-items: center; gap: 6px; }
.cb-select-mini {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.72rem;
    cursor: pointer;
    outline: none;
}

/* ── Ver button text (hidden on mobile) ── */
.cb-btn-ver-txt { margin-left: 5px; }

/* ═══════════════════════════════════════════════════════════
   PLATAFORMAS VIEW — Estilos específicos
   ═══════════════════════════════════════════════════════════ */

/* ── Platform avatar ── */
.plat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.plat-avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; border-radius: 7px; }

.plat-nombre {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
}

/* ── Type badges ── */
.plat-tipo-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.plat-tipo-master {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.25);
}
.plat-tipo-modelo {
    background: rgba(148,163,184,0.1);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.2);
}

/* ── Credentials ── */
.plat-username {
    font-family: monospace;
    font-weight: 700;
    color: #6be3b4;
    font-size: 0.88rem;
}
.plat-correo {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Table row hover ── */
.historial-table-plat tbody tr.plat-fila:hover td {
    background: rgba(107,227,180,0.035);
}

/* ── Estado card in detail modal ── */
.plat-estado-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 24px;
    border-radius: 12px;
    min-width: 200px;
    text-align: center;
}
.plat-estado-aprobado {
    background: rgba(107,227,180,0.1);
    border: 1px solid rgba(107,227,180,0.3);
    color: #6be3b4;
}
.plat-estado-en-revisión, .plat-estado-en-revision {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    color: #f59e0b;
}
.plat-estado-rechazado {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
}

/* ── Detail grid ── */
.plat-detalle-grid { display: flex; flex-direction: column; gap: 10px; }
.plat-detalle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
    gap: 10px;
}
.plat-detalle-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Platform select with icon preview ── */
.plat-select-wrap { position: relative; }
.plat-select-preview {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

/* ── Type selector cards ── */
.plat-tipo-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s;
    color: var(--text-muted);
    font-size: 0.82rem;
    background: var(--bg-card);
}
.plat-tipo-card:hover { border-color: rgba(107,227,180,0.3); color: var(--text-primary); }
.plat-tipo-card-active {
    background: rgba(107,227,180,0.1) !important;
    border-color: rgba(107,227,180,0.45) !important;
    color: #6be3b4 !important;
}

/* ── Light mode overrides ── */
[data-theme="light"] .cb-search-input { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .cb-filtro-btn   { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
[data-theme="light"] .cb-btn-nuevo    { box-shadow: 0 4px 14px rgba(5,150,105,0.2); }
[data-theme="light"] .cb-stat-card    { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .cb-empty-state  { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .plat-correo     { color: #64748b; }

/* ── Plataformas light mode ── */
[data-theme="light"] .plat-tipo-card          { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
[data-theme="light"] .plat-tipo-card:hover    { border-color: rgba(5,150,105,0.3); color: #0f172a; }
[data-theme="light"] .plat-tipo-card-active   { background: rgba(5,150,105,0.08) !important; border-color: rgba(5,150,105,0.4) !important; color: #059669 !important; }
[data-theme="light"] .plat-detalle-row        { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .plat-detalle-lbl        { color: #64748b; }
[data-theme="light"] .plat-estado-aprobado    { background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.25); color: #059669; }
[data-theme="light"] .plat-estado-en-revisión,
[data-theme="light"] .plat-estado-en-revision { background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.25); color: #d97706; }
[data-theme="light"] .plat-estado-rechazado   { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); color: #dc2626; }

/* ── Aviso info en formulario (light/dark) ── */
.plat-aviso-info {
    background: rgba(107,227,180,0.06);
    border: 1px solid rgba(107,227,180,0.18);
    border-radius: 8px;
    padding: 10px 13px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: #94a3b8;
}
[data-theme="light"] .plat-aviso-info {
    background: rgba(5,150,105,0.05);
    border-color: rgba(5,150,105,0.2);
    color: #475569;
}

/* ── Responsive mobile ── */
@media (max-width: 640px) {
    .cb-page-header  { flex-direction: column; align-items: flex-start; }
    .cb-stats-row    { grid-template-columns: 1fr 1fr; }
    .cb-filtros-bar  { flex-direction: column; align-items: flex-start; }
    .cb-search-input { width: 140px; }
    .cb-btn-ver-txt  { display: none; }
    .plat-correo     { display: none; }
    .historial-table-plat th:nth-child(5),
    .historial-table-plat td:nth-child(5) { display: none; } /* ocultar fecha en móvil */
}

/* =========================================================================
   MOBILE — historial-table-plataformas (card layout vertical stack)
   ========================================================================= */
@media (max-width: 768px) {

    /* Tabla y tbody como bloques */
    .historial-table-plataformas,
    .historial-table-plataformas tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Card fullwidth — stack vertical */
    .historial-table-plataformas tbody tr.tx-row {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 13px 14px !important;
        background: rgba(255,255,255,0.03) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-left: 3px solid rgba(107,227,180,0.45) !important;
        margin-bottom: 8px !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }

    /* Ocultar todas las celdas por defecto */
    .historial-table-plataformas td {
        display: none !important;
        padding: 0 !important;
        border: none !important;
    }

    /* ─── BLOQUE 1: avatar + nombre + "vinculada fecha" ─── */
    .historial-table-plataformas .col-tipo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .historial-table-plataformas .col-tipo > div { min-width: 0; overflow: hidden; }

    /* ─── BLOQUE 2: estado badge (Aprobado / En Revisión / Rechazado) ─── */
    .historial-table-plataformas .col-estado {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 7px !important;
        padding-top: 7px !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
    }

    /* ─── BLOQUE 3: tipo badge (Master / Modelo) ─── */
    .historial-table-plataformas .col-fecha {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 5px !important;
        white-space: nowrap !important;
    }

    /* ─── BLOQUE 4: @username + correo ─── */
    .historial-table-plataformas .col-ref {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 5px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .historial-table-plataformas .col-ref .tx-ref { font-size: 0.75rem !important; }
    .historial-table-plataformas .col-ref > div   { font-size: 0.67rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Ocultar botón de acción */
    .historial-table-plataformas .col-accion { display: none !important; }
}

/* Panel padding reducido en mobile para maximizar ancho de cards */
@media (max-width: 640px) {
    .historial-panel { padding: 14px !important; }
}

/* =========================================================================
   MI PERFIL V2 — pv2-* components
   ========================================================================= */

/* ── Banner hero ── */
.pv2-banner {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgba(107,227,180,0.07) 0%, rgba(56,184,141,0.02) 100%);
    border: 1px solid rgba(107,227,180,0.12);
    border-radius: 22px; padding: 36px 40px;
    display: flex; align-items: center; gap: 28px;
    margin-bottom: 22px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.18);
}
[data-theme="light"] .pv2-banner {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 40%, #f8fffe 100%) !important;
    border-color: #6ee7b7 !important;
    box-shadow: 0 6px 28px rgba(5,150,105,0.10) !important;
}
[data-theme="light"] .pv2-eyebrow { color: #059669 !important; opacity: 1 !important; }

/* ── Avatar ── */
.pv2-avatar {
    width: 100px; height: 100px; border-radius: 28px; flex-shrink: 0;
    background: linear-gradient(135deg, #6be3b4, #38b88d);
    color: #000; font-size: 2.8rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(107,227,180,0.3);
    border: 4px solid rgba(107,227,180,0.25);
}

/* ── Badges banner ── */
.pv2-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    padding: 5px 13px; border-radius: 9px; font-size: 0.76rem; font-weight: 600; color: var(--text-primary);
}
[data-theme="light"] .pv2-badge { background: #f0fdf9; border-color: #a7f3d0; color: #1e293b; }
[data-theme="light"] .pv2-badge i { color: #059669 !important; }

/* ── Grid 3 columnas ── */
.pv2-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

/* ── Card de info (3 columnas) ── */
.pv2-card {
    position: relative; overflow: hidden;
    background: rgba(20,20,22,0.8); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 18px; padding: 22px 24px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}
[data-theme="light"] .pv2-card { background: #ffffff !important; border-color: #d1fae5 !important; box-shadow: 0 4px 18px rgba(5,150,105,0.07) !important; }
[data-theme="light"] .pv2-card-header i { color: #059669 !important; }
[data-theme="light"] .pv2-card-header { color: #1e293b !important; }

.pv2-card-header {
    font-size: 0.82rem; font-weight: 800; color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-transform: uppercase; letter-spacing: 0.3px;
}
[data-theme="light"] .pv2-card-header { border-bottom-color: #e8eef5; }

/* ── Read-only fields ── */
.pv2-ro-field {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.pv2-ro-field:last-of-type { margin-bottom: 0; }
.pv2-ro-field:hover { border-color: rgba(107,227,180,0.18); background: rgba(107,227,180,0.02); }
[data-theme="light"] .pv2-ro-field { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .pv2-ro-field:hover { border-color: #b7d4c0; background: #ffffff; }

.pv2-ro-label { font-size: 0.63rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; display: block; margin-bottom: 6px; }
.pv2-ro-val { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--text-primary); font-weight: 500; min-width: 0; }
.pv2-ro-icon {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
    background: rgba(107,227,180,0.1); color: #6be3b4;
    display: flex; align-items: center; justify-content: center; font-size: 0.78rem;
}
[data-theme="light"] .pv2-ro-icon { background: rgba(5,150,105,0.12); color: #059669; }
[data-theme="light"] .pv2-ro-val { color: #1e293b; }
[data-theme="light"] .pv2-ro-label { color: #059669; letter-spacing: 0.5px; }

/* ── Tarjetas de sección (KYC, 2FA, Footer) ── */
.pv2-sec-card {
    background: rgba(20,20,22,0.8); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 18px; padding: 24px 28px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}
[data-theme="light"] .pv2-sec-card { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 18px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .pv2-sec-header i { color: #059669 !important; }
[data-theme="light"] .pv2-sec-header > div > div:first-child { background: rgba(5,150,105,0.1) !important; }

.pv2-sec-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 18px; margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .pv2-sec-header { border-bottom-color: #e8eef5; }

.pv2-estado-badge {
    padding: 5px 13px; border-radius: 50px; font-size: 0.76rem; font-weight: 700;
    border: 1px solid; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* ── KYC mensajes ── */
.pv2-kyc-msg {
    padding: 16px 20px; border-radius: 12px; border: 1px solid; font-size: 0.85rem; line-height: 1.6; text-align: center;
}
.pv2-kyc-ok     { background: rgba(107,227,180,0.08); color: #6be3b4; border-color: rgba(107,227,180,0.25); }
.pv2-kyc-review { background: rgba(74,144,226,0.08);  color: #4a90e2; border-color: rgba(74,144,226,0.25); }
.pv2-kyc-reject { background: rgba(255,94,94,0.08);   color: #ff5e5e; border-color: rgba(255,94,94,0.25); }
[data-theme="light"] .pv2-kyc-ok     { background: rgba(5,150,105,0.06); color: #059669; border-color: rgba(5,150,105,0.2); }
[data-theme="light"] .pv2-kyc-review { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
[data-theme="light"] .pv2-kyc-reject { background: #fff1f2; color: #dc2626; border-color: #fecaca; }

/* ── KYC upload ── */
.pv2-kyc-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv2-upload-box {
    border: 2px dashed rgba(255,255,255,0.15); border-radius: 14px; padding: 22px 16px;
    text-align: center; cursor: pointer; transition: 0.25s; background: rgba(255,255,255,0.02);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pv2-upload-box:hover { border-color: #6be3b4; background: rgba(107,227,180,0.04); }
[data-theme="light"] .pv2-upload-box { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .pv2-upload-box:hover { border-color: #059669; background: rgba(5,150,105,0.03); }

.pv2-upload-icon { font-size: 1.8rem; color: var(--text-muted); margin-bottom: 2px; transition: 0.25s; }
.pv2-upload-box:hover .pv2-upload-icon { color: #6be3b4; transform: translateY(-4px); }
[data-theme="light"] .pv2-upload-box:hover .pv2-upload-icon { color: #059669; }
.pv2-upload-nombre { font-size: 0.8rem; color: var(--text-primary); font-weight: 700; }

/* ── Zona QR ── */
.pv2-qr-zona {
    margin-top: 20px; padding-top: 20px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
[data-theme="light"] .pv2-qr-zona { border-top-color: #e2e8f0; }

/* ── Botones ── */
.pv2-btn-solid {
    background: #6be3b4; color: #000; border: none;
    padding: 12px 22px; border-radius: 11px; font-weight: 700; font-size: 0.88rem;
    cursor: pointer; align-items: center; gap: 8px; transition: 0.25s;
    box-shadow: 0 4px 14px rgba(107,227,180,0.2);
}
.pv2-btn-solid:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(107,227,180,0.35); }
.pv2-btn-solid:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.pv2-btn-outline {
    background: rgba(255,255,255,0.03); color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 12px 20px; border-radius: 11px; font-weight: 600; font-size: 0.88rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.25s;
}
.pv2-btn-outline:hover { border-color: #6be3b4; color: #6be3b4; background: rgba(107,227,180,0.04); }
[data-theme="light"] .pv2-btn-outline { background: #ffffff; border-color: #cbd5e1; color: #1e293b; }
[data-theme="light"] .pv2-btn-outline:hover { border-color: #059669; color: #059669; background: #f8fafc; }

.pv2-btn-danger {
    background: rgba(255,94,94,0.08); color: #ff5e5e;
    border: 1px solid rgba(255,94,94,0.25);
    padding: 12px 20px; border-radius: 11px; font-weight: 700; font-size: 0.88rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.25s;
}
.pv2-btn-danger:hover { background: rgba(255,94,94,0.16); }
[data-theme="light"] .pv2-btn-danger { background: #fff1f2; color: #dc2626; border-color: #fecaca; }

/* ── Info alert (Expediente Protegido) — light mode ── */
[data-theme="light"] .pv2-info-alert { background: #eff6ff !important; border-color: #bfdbfe !important; }
[data-theme="light"] .pv2-info-alert-title { color: #1d4ed8 !important; }
[data-theme="light"] .pv2-info-alert-desc { color: #3b5fc0 !important; }

/* ── 2FA code inputs — light mode ── */
[data-theme="light"] .pv2-2fa-code-input {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* ── gf-btn-blue ── */
.gf-btn-blue {
    background: #4a90e2 !important; color: #fff !important;
    box-shadow: 0 4px 14px rgba(74,144,226,0.3) !important;
}
.gf-btn-blue:hover { background: #3a7fcf !important; }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    /* Banner */
    .pv2-banner { flex-direction: column; text-align: center; padding: 28px 20px; gap: 16px; }
    .pv2-avatar { width: 80px; height: 80px; font-size: 2.2rem; border-radius: 22px; }
    .pv2-banner h2 { font-size: 1.5rem; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
    .pv2-banner-badges { justify-content: center !important; }

    /* Grid info */
    .pv2-grid-3 { grid-template-columns: 1fr; gap: 14px; }

    /* Secciones */
    .pv2-sec-card { padding: 18px; }
    .pv2-sec-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pv2-estado-badge { align-self: flex-start; }

    /* KYC uploads */
    .pv2-kyc-upload-grid { grid-template-columns: 1fr; }
    .pv2-kyc-btn-row { text-align: center !important; }
    .pv2-kyc-btn-row .pv2-btn-solid { width: 100%; justify-content: center; }

    /* Alerta expediente */
    .pv2-info-alert { flex-direction: column !important; gap: 10px !important; }

    /* Footer credenciales */
    .pv2-footer-card { flex-direction: column !important; align-items: stretch !important; }
    .pv2-footer-btns { flex-direction: column !important; width: 100%; }
    .pv2-footer-btns .pv2-btn-outline,
    .pv2-footer-btns .pv2-btn-solid { width: 100% !important; justify-content: center !important; }
}

/* ── Teléfonos pequeños (≤ 480px) ── */
@media (max-width: 480px) {
    .pv2-banner { padding: 20px 16px; border-radius: 16px; }
    .pv2-banner h2 { font-size: 1.25rem !important; }
    .pv2-badge { font-size: 0.68rem; padding: 4px 10px; }
    .pv2-sec-card { padding: 14px 16px; border-radius: 14px; }
    .pv2-upload-box { padding: 20px 14px; min-height: 100px; }
    .pv2-upload-icon { font-size: 2rem; }
    .pv2-upload-nombre { font-size: 0.82rem; }
    .pv2-estado-badge { font-size: 0.7rem; padding: 4px 10px; }
    .pv2-kyc-msg { padding: 14px 16px; font-size: 0.82rem; }
    .pv2-btn-solid, .pv2-btn-outline, .pv2-btn-danger { font-size: 0.84rem; padding: 11px 18px; }
    .pv2-card { padding: 18px 16px; border-radius: 14px; }
    .pv2-ro-field { padding: 10px 12px; }
}

/* =========================================================================
   CHAT WIDGET — Burbuja flotante de soporte (cw-*)
   ========================================================================= */

/* ── FAB button ── */
.cw-fab {
    position: fixed; bottom: 28px; right: 28px; z-index: 9000;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #6be3b4, #38b88d);
    color: #000; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 6px 24px rgba(107,227,180,0.45);
    transition: transform 0.25s, box-shadow 0.25s;
}
.cw-fab:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(107,227,180,0.55); }
.cw-fab.cw-fab-open { background: linear-gradient(135deg, #475569, #334155); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }

/* ── Badge no-leídos en FAB ── */
.cw-badge {
    position: absolute; top: -4px; right: -4px;
    background: #ff5e5e; color: #fff; font-size: 0.62rem; font-weight: 900;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-dark, #050508);
    animation: cw-pulse 2s infinite;
}
@keyframes cw-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,94,94,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(255,94,94,0); }
}

/* ── Panel flotante ── */
.cw-panel {
    position: fixed; bottom: 96px; right: 28px; z-index: 8999;
    width: 360px; max-height: 560px;
    background: var(--bg-panel, #0a0d14);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(107,227,180,0.08);
}
[data-theme="light"] .cw-panel {
    background: #ffffff; border-color: #e2e8f0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Animación de entrada */
.cw-slide-enter-active, .cw-slide-leave-active { transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.cw-slide-enter-from, .cw-slide-leave-to { opacity: 0; transform: translateY(20px) scale(0.95); }

/* ── Header del panel ── */
.cw-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px;
    background: linear-gradient(135deg, #0d1f14 0%, #0a1a10 100%);
    flex-shrink: 0;
}
[data-theme="light"] .cw-panel-header { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }

.cw-panel-brand { display: flex; align-items: center; gap: 10px; }
.cw-panel-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(107,227,180,0.2); color: #6be3b4;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    flex-shrink: 0;
}
[data-theme="light"] .cw-panel-icon { background: rgba(5,150,105,0.15); color: #059669; }
.cw-panel-title { font-size: 0.9rem; font-weight: 800; color: #fff; }
[data-theme="light"] .cw-panel-title { color: #0f172a; }
.cw-panel-sub { font-size: 0.67rem; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
[data-theme="light"] .cw-panel-sub { color: #64748b; }
.cw-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #6be3b4; display: inline-block; animation: cw-blink 2s infinite; }
[data-theme="light"] .cw-online-dot { background: #059669; }
@keyframes cw-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

.cw-close-btn {
    background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.7);
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
    transition: background 0.2s;
}
.cw-close-btn:hover { background: rgba(255,255,255,0.15); }
[data-theme="light"] .cw-close-btn { background: rgba(0,0,0,0.06); color: #475569; }

/* ── Vista base ── */
.cw-view { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cw-view-chat { padding: 0; gap: 0; }

/* ── Hero HOME ── */
.cw-hero { background: rgba(107,227,180,0.05); border: 1px solid rgba(107,227,180,0.1); border-radius: 14px; padding: 14px 16px; }
[data-theme="light"] .cw-hero { background: #f0fdf9; border-color: #a7f3d0; }
.cw-hero-greeting { font-size: 0.9rem; font-weight: 700; color: var(--text-main); }
[data-theme="light"] .cw-hero-greeting { color: #0f172a; }
.cw-hero-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; }

/* ── Botón nuevo ── */
.cw-btn-nuevo {
    width: 100%; padding: 11px; border-radius: 12px;
    background: linear-gradient(135deg, #6be3b4, #38b88d); color: #000;
    border: none; cursor: pointer; font-weight: 800; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity 0.2s, transform 0.2s;
}
.cw-btn-nuevo:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Section label ── */
.cw-section-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 0 2px; }

/* ── Lista de tickets en el widget ── */
.cw-tickets-list { display: flex; flex-direction: column; gap: 6px; }
.cw-ticket-item {
    position: relative;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 11px 13px; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.cw-ticket-item:hover { border-color: rgba(107,227,180,0.25); background: rgba(107,227,180,0.04); }
[data-theme="light"] .cw-ticket-item { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .cw-ticket-item:hover { border-color: #a7f3d0; background: #f0fdf9; }

.cw-tk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cw-tk-num { font-size: 0.68rem; font-family: monospace; font-weight: 700; color: var(--text-muted); }
.cw-tk-asunto { font-size: 0.82rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
[data-theme="light"] .cw-tk-asunto { color: #1e293b; }
.cw-tk-bottom { display: flex; justify-content: space-between; align-items: center; }
.cw-tk-cat { font-size: 0.68rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.cw-tk-fecha { font-size: 0.66rem; color: var(--text-muted); }
.cw-tk-badge {
    position: absolute; top: 8px; right: 8px;
    background: #ff5e5e; color: #fff; font-size: 0.6rem; font-weight: 900;
    padding: 1px 6px; border-radius: 50px; min-width: 18px; text-align: center;
}

/* ── Estado badges ── */
.cw-tk-estado, .sv2-est-badge {
    font-size: 0.65rem; font-weight: 800; padding: 2px 8px;
    border-radius: 50px; border: 1px solid; white-space: nowrap;
}
.cw-est-abierto    { color: #f5a623; background: rgba(245,166,35,0.12);  border-color: rgba(245,166,35,0.3); }
.cw-est-respondido { color: #4a90e2; background: rgba(74,144,226,0.12); border-color: rgba(74,144,226,0.3); }
.cw-est-cerrado    { color: #6be3b4; background: rgba(107,227,180,0.1); border-color: rgba(107,227,180,0.25); }

/* ── Empty state ── */
.cw-empty { text-align: center; padding: 24px 16px; color: var(--text-muted); font-size: 0.82rem; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cw-empty i { font-size: 1.8rem; opacity: 0.4; }
.cw-loading { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ── Chat header ── */
.cw-chat-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
[data-theme="light"] .cw-chat-header { border-bottom-color: #e2e8f0; }
.cw-back-btn {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: rgba(255,255,255,0.05); border: none; color: var(--text-main);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.cw-back-btn:hover { background: rgba(255,255,255,0.1); }
[data-theme="light"] .cw-back-btn { background: #f1f5f9; color: #1e293b; }
.cw-chat-info { flex: 1; min-width: 0; }
.cw-chat-num { font-size: 0.68rem; font-family: monospace; color: var(--text-muted); }
.cw-chat-asunto { font-size: 0.82rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="light"] .cw-chat-asunto { color: #1e293b; }

/* ── Mensajes ── */
.cw-messages {
    flex: 1; overflow-y: auto; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 10px;
    scroll-behavior: smooth;
}
.cw-msg { display: flex; flex-direction: column; max-width: 85%; }
.cw-msg-client { align-self: flex-end; align-items: flex-end; }
.cw-msg-admin  { align-self: flex-start; align-items: flex-start; }
.cw-msg-system { align-self: center; }

.cw-msg-label { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.cw-msg-bubble {
    padding: 9px 13px; border-radius: 14px; font-size: 0.82rem; line-height: 1.5;
    word-break: break-word;
}
.cw-msg-client .cw-msg-bubble { background: #6be3b4; color: #000; border-radius: 14px 14px 4px 14px; }
.cw-msg-admin  .cw-msg-bubble { background: rgba(255,255,255,0.06); color: var(--text-main); border-radius: 14px 14px 14px 4px; border: 1px solid rgba(255,255,255,0.08); }
[data-theme="light"] .cw-msg-client .cw-msg-bubble { background: #059669; color: #fff; }
[data-theme="light"] .cw-msg-admin .cw-msg-bubble  { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }

.cw-msg-time { font-size: 0.6rem; color: var(--text-muted); margin-top: 3px; }
.cw-msg-system-txt { font-size: 0.72rem; color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 5px 12px; border-radius: 50px; display: flex; align-items: center; gap: 5px; }
[data-theme="light"] .cw-msg-system-txt { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.cw-adjunto { color: #6be3b4; text-decoration: none; display: flex; align-items: center; gap: 5px; font-size: 0.8rem; }

/* ── Input area chat ── */
.cw-input-area {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
[data-theme="light"] .cw-input-area { border-top-color: #e2e8f0; }
.cw-textarea {
    flex: 1; padding: 8px 12px; border-radius: 10px; resize: none;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-main); font-size: 0.82rem; outline: none; line-height: 1.5;
    font-family: 'Inter', sans-serif;
}
.cw-textarea:focus { border-color: rgba(107,227,180,0.3); }
[data-theme="light"] .cw-textarea { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .cw-textarea:focus { border-color: #6ee7b7; }

.cw-send-btn {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: #6be3b4; color: #000; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
    align-self: flex-end; transition: opacity 0.2s;
}
.cw-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cw-closed-notice { text-align: center; padding: 10px; font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
[data-theme="light"] .cw-closed-notice { border-top-color: #e2e8f0; }

/* ── Nuevo ticket form ── */
.cw-form-header { display: flex; align-items: center; gap: 10px; padding: 0 0 6px 0; }
.cw-form-title { font-size: 0.9rem; font-weight: 800; color: var(--text-main); }
[data-theme="light"] .cw-form-title { color: #1e293b; }
.cw-form-sub { font-size: 0.72rem; color: var(--text-muted); }
.cw-form-body { display: flex; flex-direction: column; gap: 10px; }
.cw-field { display: flex; flex-direction: column; gap: 5px; }
.cw-label { font-size: 0.62rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.7px; }
.cw-select, .cw-input {
    padding: 9px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-main); font-size: 0.82rem; outline: none;
    font-family: 'Inter', sans-serif;
}
.cw-select:focus, .cw-input:focus { border-color: rgba(107,227,180,0.3); }
[data-theme="light"] .cw-select, [data-theme="light"] .cw-input { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
.cw-textarea-form {
    padding: 9px 12px; border-radius: 10px; resize: none;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-main); font-size: 0.82rem; outline: none;
    font-family: 'Inter', sans-serif; line-height: 1.5;
}
.cw-textarea-form:focus { border-color: rgba(107,227,180,0.3); }
[data-theme="light"] .cw-textarea-form { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
.cw-error { font-size: 0.75rem; color: #ff5e5e; display: flex; align-items: center; gap: 6px; }
.cw-btn-submit {
    width: 100%; padding: 11px; border-radius: 12px;
    background: linear-gradient(135deg, #6be3b4, #38b88d); color: #000;
    border: none; cursor: pointer; font-weight: 800; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity 0.2s;
}
.cw-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Móvil (celular): ocultar burbuja flotante — el acceso es por el topbar */
@media (max-width: 900px) {
    .cw-fab   { display: none !important; }
    .cw-panel { display: none !important; }
}
/* Tablet/PC: panel ocupa posición normal — reajuste fino en pantallas muy pequeñas */
@media (min-width: 901px) and (max-width: 1100px) {
    .cw-panel { right: 10px; width: 340px; }
}

/* =========================================================================
   SOPORTE VIEW — Página completa /soporte (sv2-*)
   ========================================================================= */

/* ── Botón nuevo ── */
.sv2-btn-nuevo {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 11px;
    background: #6be3b4; color: #000; border: none;
    font-size: 0.85rem; font-weight: 800; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(107,227,180,0.25);
}
.sv2-btn-nuevo:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(107,227,180,0.35); }

/* ── KPI row ── */
.sv2-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.sv2-kpi-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 16px 18px; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.sv2-kpi-card:hover, .sv2-kpi-card.active { border-color: rgba(107,227,180,0.3); background: rgba(107,227,180,0.05); }
.sv2-kpi-num { font-size: 1.8rem; font-weight: 900; color: var(--text-main); font-family: monospace; }
.sv2-kpi-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; margin-top: 2px; }
.sv2-kpi-abierto .sv2-kpi-num    { color: #f5a623; }
.sv2-kpi-respondido .sv2-kpi-num { color: #4a90e2; }
.sv2-kpi-cerrado .sv2-kpi-num    { color: #6be3b4; }
[data-theme="light"] .sv2-kpi-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
[data-theme="light"] .sv2-kpi-card:hover, [data-theme="light"] .sv2-kpi-card.active { border-color: #6ee7b7; background: #f0fdf9; }

/* ── Split layout (lista + chat) ── */
.sv2-split { display: grid; grid-template-columns: 320px 1fr; gap: 18px; min-height: 540px; }

/* ── Lista lateral ── */
.sv2-list {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px; overflow-y: auto; max-height: 600px;
}
[data-theme="light"] .sv2-list { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }

.sv2-ticket-row {
    position: relative;
    padding: 14px 16px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.sv2-ticket-row:last-child { border-bottom: none; }
.sv2-ticket-row:hover { background: rgba(107,227,180,0.04); }
.sv2-ticket-row.sv2-ticket-active { background: rgba(107,227,180,0.07); border-left: 3px solid #6be3b4; }
[data-theme="light"] .sv2-ticket-row { border-bottom-color: #f1f5f9; }
[data-theme="light"] .sv2-ticket-row:hover { background: #f0fdf9; }
[data-theme="light"] .sv2-ticket-row.sv2-ticket-active { background: #ecfdf5; border-left-color: #059669; }

.sv2-unread-badge {
    position: absolute; top: 10px; right: 10px;
    background: #ff5e5e; color: #fff; font-size: 0.6rem; font-weight: 900;
    padding: 1px 6px; border-radius: 50px;
}

/* ── Panel chat ── */
.sv2-chat-panel {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px; display: flex; flex-direction: column;
    overflow: hidden; max-height: 600px;
}
[data-theme="light"] .sv2-chat-panel { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }

.sv2-chat-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; padding: 40px 20px; text-align: center; color: var(--text-muted);
}
.sv2-chat-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(107,227,180,0.08); color: #6be3b4;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; margin-bottom: 16px;
    border: 2px dashed rgba(107,227,180,0.25);
}
[data-theme="light"] .sv2-chat-empty-icon { background: #f0fdf9; border-color: #a7f3d0; }

.sv2-chat-header {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
[data-theme="light"] .sv2-chat-header { border-bottom-color: #e2e8f0; }

.sv2-cat-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(107,227,180,0.1); color: #6be3b4;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
[data-theme="light"] .sv2-cat-icon { background: rgba(5,150,105,0.1); color: #059669; }

/* ── Mensajes ── */
.sv2-messages { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.sv2-msg { display: flex; flex-direction: column; max-width: 75%; }
.sv2-msg-client { align-self: flex-end; align-items: flex-end; }
.sv2-msg-admin  { align-self: flex-start; align-items: flex-start; }
.sv2-msg-system { align-self: center; }

.sv2-msg-label { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.sv2-msg-bubble {
    padding: 10px 16px; border-radius: 16px; font-size: 0.85rem; line-height: 1.55; word-break: break-word;
}
.sv2-msg-client .sv2-msg-bubble { background: #6be3b4; color: #000; border-radius: 16px 16px 4px 16px; }
.sv2-msg-admin  .sv2-msg-bubble { background: rgba(255,255,255,0.05); color: var(--text-main); border-radius: 16px 16px 16px 4px; border: 1px solid rgba(255,255,255,0.08); }
[data-theme="light"] .sv2-msg-client .sv2-msg-bubble { background: #059669; color: #fff; }
[data-theme="light"] .sv2-msg-admin  .sv2-msg-bubble { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
.sv2-msg-time { font-size: 0.62rem; color: var(--text-muted); margin-top: 4px; }

.sv2-msg-system-row { align-self: center; }
.sv2-msg-system-txt {
    font-size: 0.73rem; color: var(--text-muted);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    padding: 5px 14px; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px;
}
[data-theme="light"] .sv2-msg-system-txt { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }

/* ── Input área ── */
.sv2-input-area { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
[data-theme="light"] .sv2-input-area { border-top-color: #e2e8f0; }
.sv2-textarea {
    flex: 1; padding: 10px 14px; border-radius: 12px; resize: none;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-main); font-size: 0.85rem; outline: none;
    font-family: 'Inter', sans-serif; line-height: 1.5;
}
.sv2-textarea:focus { border-color: rgba(107,227,180,0.3); }
[data-theme="light"] .sv2-textarea { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .sv2-textarea:focus { border-color: #6ee7b7; }

.sv2-send-btn {
    padding: 0 20px; border-radius: 12px; flex-shrink: 0;
    background: #6be3b4; color: #000; border: none; cursor: pointer;
    font-weight: 800; font-size: 0.85rem;
    display: flex; align-items: center; gap: 8px;
    transition: opacity 0.2s;
}
.sv2-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sv2-cerrado-notice { padding: 12px 18px; font-size: 0.78rem; color: var(--text-muted); border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
[data-theme="light"] .sv2-cerrado-notice { border-top-color: #e2e8f0; }

/* ── gf-btn-green ── */
.gf-btn-green { background: #6be3b4 !important; color: #000 !important; box-shadow: 0 4px 14px rgba(107,227,180,0.25) !important; }
.gf-btn-green:hover { background: #4dc296 !important; }

/* ── Mobile soporte ── */
@media (max-width: 768px) {
    .sv2-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .sv2-split { grid-template-columns: 1fr; }
    .sv2-list { max-height: 280px; }
    .sv2-chat-panel { max-height: 420px; }
}

/* =========================================================================
   NOTIFICACIONES — Dropdown bandeja en topbar
   ========================================================================= */

/* ── Wrapper relativo para posicionar el panel ── */
.notif-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── Botón campana con badge ── */
.notif-trigger { position: relative; }

.notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    border-radius: 50px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bg-panel, #0a0d14);
    animation: notif-pulse 2s ease-in-out infinite;
}

@keyframes notif-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--bg-panel, #0a0d14); }
    50%       { box-shadow: 0 0 0 2px var(--bg-panel, #0a0d14), 0 0 0 4px rgba(239,68,68,0.25); }
}

/* ── Panel dropdown ── */
.notif-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    width: 360px;
    max-height: 480px;
    background: var(--bg-panel, #0a0d14);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(107,227,180,0.06);
    overflow: hidden;
    z-index: 8800;
    display: flex;
    flex-direction: column;
}
/* Versión teleportada al body — usa position:fixed para escapar del overflow:hidden del layout */
.notif-panel-fixed {
    position: fixed !important;
    top: 74px;
    right: 16px;
}
[data-theme="light"] .notif-panel {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(5,150,105,0.08);
}

/* ── Transición slide-down ── */
.notif-drop-enter-active, .notif-drop-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
.notif-drop-enter-from, .notif-drop-leave-to { opacity: 0; transform: translateY(-8px) scale(0.97); }

/* ── Header del panel ── */
.notif-panel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
[data-theme="light"] .notif-panel-hdr { border-bottom-color: #f1f5f9; }

.notif-panel-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main, #fff);
}
[data-theme="light"] .notif-panel-title { color: #1e293b; }

.notif-mark-all-btn {
    background: none;
    border: 1px solid rgba(107,227,180,0.25);
    color: #6be3b4;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: background 0.15s;
}
.notif-mark-all-btn:hover { background: rgba(107,227,180,0.08); }
[data-theme="light"] .notif-mark-all-btn { color: #059669; border-color: #a7f3d0; }
[data-theme="light"] .notif-mark-all-btn:hover { background: #f0fdf4; }

/* ── Lista scrollable ── */
.notif-list {
    overflow-y: auto;
    flex: 1;
    max-height: 390px;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Cada notificación ── */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-item.notif-unread { background: rgba(107,227,180,0.04); }
.notif-item.notif-unread:hover { background: rgba(107,227,180,0.07); }

[data-theme="light"] .notif-item { border-bottom-color: #f8fafc; }
[data-theme="light"] .notif-item:hover { background: #f8fafc; }
[data-theme="light"] .notif-item.notif-unread { background: #f0fdf9; }
[data-theme="light"] .notif-item.notif-unread:hover { background: #e6f9f4; }

/* Notificación con ruta navegable — cursor pointer + feedback visual */
.notif-item.notif-navegable { cursor: pointer; }
.notif-item.notif-navegable:hover { background: rgba(107,227,180,0.06) !important; }
[data-theme="light"] .notif-item.notif-navegable:hover { background: #f0fdf9 !important; }

/* ── Ícono circular por tipo ── */
.notif-ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.notif-ico-acreditacion { background: rgba(107,227,180,0.12); color: #6be3b4; }
.notif-ico-sistema      { background: rgba(74,144,226,0.12);  color: #4a90e2; }
.notif-ico-soporte      { background: rgba(168,85,247,0.12);  color: #a855f7; }
.notif-ico-tercero      { background: rgba(245,166,35,0.12);  color: #f5a623; }
.notif-ico-pago         { background: rgba(107,227,180,0.12); color: #6be3b4; }
.notif-ico-credito      { background: rgba(245,158,11,0.12);  color: #f59e0b; }

/* ── Cuerpo del texto ── */
.notif-body { flex: 1; min-width: 0; }

.notif-titulo {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main, #fff);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="light"] .notif-titulo { color: #1e293b; }

.notif-msg {
    font-size: 0.75rem;
    color: var(--text-muted, #8b9bb4);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="light"] .notif-msg { color: #64748b; }

.notif-time {
    font-size: 0.68rem;
    color: var(--text-muted, #8b9bb4);
    margin-top: 4px;
    opacity: 0.7;
}

/* ── Punto de no leído ── */
.notif-dot {
    width: 8px; height: 8px;
    background: #6be3b4;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ── Estado vacío / cargando ── */
.notif-empty, .notif-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 0;
    color: var(--text-muted, #8b9bb4);
    font-size: 0.82rem;
}
.notif-empty i  { font-size: 1.5rem; opacity: 0.35; }
.notif-loading i { font-size: 1.3rem; color: #6be3b4; }

/* ── Ajuste mobile ── */
@media (max-width: 480px) {
    .notif-panel {
        width: calc(100vw - 24px);
        right: -12px;
    }
    .notif-panel-fixed {
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        top: 64px !important;
    }
}

/* =========================================================================
   AGENCIA MASTER — AgenciaView estilos (ag2-*)
   ========================================================================= */

/* ── Header de página ── */
.ag2-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.ag2-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #f5a623;
    margin-bottom: 6px;
}

.ag2-page-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-main, #fff);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ag2-page-title i { color: #f5a623; }
[data-theme="light"] .ag2-page-title { color: #1e293b; }

.ag2-page-sub {
    font-size: 0.83rem;
    color: var(--text-muted, #8b9bb4);
    max-width: 460px;
    line-height: 1.5;
}
[data-theme="light"] .ag2-page-sub { color: #64748b; }

/* ── Botón Nueva Solicitud ── */
.ag2-btn-nueva {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(245,166,35,0.1);
    border: 1px solid rgba(245,166,35,0.35);
    color: #f5a623;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ag2-btn-nueva:hover {
    background: rgba(245,166,35,0.18);
    box-shadow: 0 4px 14px rgba(245,166,35,0.2);
}
[data-theme="light"] .ag2-btn-nueva {
    background: #fffbeb;
    border-color: #fbbf24;
    color: #d97706;
}
[data-theme="light"] .ag2-btn-nueva:hover { background: #fef3c7; }

/* ── KPI row ── */
.ag2-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.ag2-kpi {
    background: var(--bg-panel, #0a0d14);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}
.ag2-kpi:hover    { border-color: rgba(255,255,255,0.14); }
.ag2-kpi.active   { border-color: rgba(107,227,180,0.4); background: rgba(107,227,180,0.05); }

[data-theme="light"] .ag2-kpi          { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .ag2-kpi:hover    { border-color: #94a3b8; }
[data-theme="light"] .ag2-kpi.active   { border-color: #6ee7b7; background: #f0fdf9; }

.ag2-kpi-ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
}
.ag2-kpi.active .ag2-kpi-ico { background: rgba(107,227,180,0.12); color: #6be3b4; }

.ag2-kpi-warn .ag2-kpi-ico  { background: rgba(245,166,35,0.1);  color: #f5a623; }
.ag2-kpi-ok   .ag2-kpi-ico  { background: rgba(107,227,180,0.1); color: #6be3b4; }
.ag2-kpi-err  .ag2-kpi-ico  { background: rgba(239,68,68,0.1);   color: #ef4444; }

.ag2-kpi-num {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-main, #fff);
    line-height: 1;
    margin-bottom: 3px;
}
[data-theme="light"] .ag2-kpi-num { color: #1e293b; }

.ag2-kpi-lbl {
    font-size: 0.72rem;
    color: var(--text-muted, #8b9bb4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* ── Tabla ── */
.ag2-table-wrap {
    overflow-x: auto;
}

.ag2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.ag2-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, #8b9bb4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
[data-theme="light"] .ag2-table th { border-bottom-color: #f1f5f9; }

.ag2-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-main, #fff);
    vertical-align: middle;
}
[data-theme="light"] .ag2-table td { border-bottom-color: #f8fafc; color: #1e293b; }

.ag2-table tbody tr:hover { background: rgba(255,255,255,0.02); }
[data-theme="light"] .ag2-table tbody tr:hover { background: #f8fafc; }
.ag2-table tbody tr:last-child td { border-bottom: none; }

/* ── Chips y badges ── */
.ag2-plat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main, #fff);
}
[data-theme="light"] .ag2-plat-chip { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }

.ag2-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.ag2-badge-warn  { background: rgba(245,166,35,0.12); color: #f5a623; border: 1px solid rgba(245,166,35,0.25); }
.ag2-badge-ok    { background: rgba(107,227,180,0.12); color: #6be3b4; border: 1px solid rgba(107,227,180,0.25); }
.ag2-badge-err   { background: rgba(239,68,68,0.1);   color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.ag2-badge-muted { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); }

[data-theme="light"] .ag2-badge-warn  { background: #fffbeb; color: #d97706; border-color: #fde68a; }
[data-theme="light"] .ag2-badge-ok    { background: #f0fdf9; color: #059669; border-color: #a7f3d0; }
[data-theme="light"] .ag2-badge-err   { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
[data-theme="light"] .ag2-badge-muted { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }

/* ── Nota truncada ── */
.ag2-nota {
    font-size: 0.75rem;
    color: var(--text-muted, #8b9bb4);
    cursor: help;
}
[data-theme="light"] .ag2-nota { color: #64748b; }

/* ── Estado vacío ── */
.ag2-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted, #8b9bb4);
}
.ag2-empty i       { font-size: 2.5rem; display: block; margin-bottom: 14px; opacity: 0.3; }
.ag2-empty-title   { font-size: 1rem; font-weight: 700; color: var(--text-main, #fff); margin-bottom: 6px; }
.ag2-empty-sub     { font-size: 0.82rem; line-height: 1.5; }
[data-theme="light"] .ag2-empty-title { color: #1e293b; }

/* ── Input con ícono en el modal ── */
.ag2-input-wrap { position: relative; }
.ag2-input-icon {
    position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 0.85rem;
    pointer-events: none;
}
.ag2-input-with-icon { padding-left: 38px !important; }
.ag2-input-hint {
    font-size: 0.72rem;
    color: var(--text-muted, #8b9bb4);
    margin-top: 5px;
    line-height: 1.4;
}
[data-theme="light"] .ag2-input-hint { color: #94a3b8; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .ag2-kpi-row          { grid-template-columns: repeat(2, 1fr); }
    .ag2-page-header      { flex-direction: column; align-items: flex-start; }
    .ag2-btn-nueva        { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .ag2-kpi-row          { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ag2-kpi              { padding: 12px 12px; }
    .ag2-kpi-num          { font-size: 1.2rem; }
}

/* =========================================================================
   FINANCIAMIENTO V2 — FinanciamientoView estilos (fin2-*)
   ========================================================================= */

/* ── Header ── */
.fin2-page-title {
    font-size: 1.45rem; font-weight: 800;
    color: var(--text-main, #fff);
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.fin2-page-title i { color: #6be3b4; }
[data-theme="light"] .fin2-page-title { color: #1e293b; }

.fin2-page-sub { font-size: 0.83rem; color: var(--text-muted, #8b9bb4); line-height: 1.5; }
[data-theme="light"] .fin2-page-sub { color: #64748b; }

/* ── KPI Row ── */
.fin2-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-bottom: 20px;
}
.fin2-kpi {
    background: var(--bg-panel, #0a0d14);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
}
[data-theme="light"] .fin2-kpi { background: #ffffff !important; border-color: #e2e8f0 !important; }

.fin2-kpi-ico {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.fin2-kpi-red    .fin2-kpi-ico { background: rgba(239,68,68,0.1);   color: #ef4444; }
.fin2-kpi-amber  .fin2-kpi-ico { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.fin2-kpi-ok     .fin2-kpi-ico { background: rgba(107,227,180,0.1); color: #6be3b4; }
.fin2-kpi-neutral .fin2-kpi-ico{ background: rgba(74,144,226,0.1);  color: #4a90e2; }

.fin2-kpi-num { font-size: 1.35rem; font-weight: 800; color: var(--text-main, #fff); line-height: 1; margin-bottom: 3px; }
.fin2-kpi-lbl { font-size: 0.7rem; color: var(--text-muted, #8b9bb4); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
[data-theme="light"] .fin2-kpi-num { color: #1e293b; }

/* ── Info banner ── */
.fin2-info-banner {
    display: flex; align-items: flex-start; gap: 12px;
    background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2);
    border-radius: 10px; padding: 12px 16px;
    font-size: 0.82rem; color: var(--text-muted, #8b9bb4); line-height: 1.5;
    margin-bottom: 24px;
}
[data-theme="light"] .fin2-info-banner { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ── Lista de créditos ── */
.fin2-credits-list { display: flex; flex-direction: column; gap: 16px; }

.fin2-credit-card {
    background: var(--bg-panel, #0a0d14);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; padding: 20px 22px;
    transition: border-color 0.2s;
}
.fin2-credit-card:hover { border-color: rgba(107,227,180,0.2); }
.fin2-card-vencido { border-left: 3px solid #ef4444 !important; }
.fin2-card-pagado  { border-left: 3px solid #6be3b4 !important; opacity: 0.75; }
[data-theme="light"] .fin2-credit-card { background: #ffffff !important; border-color: #e2e8f0 !important; }
[data-theme="light"] .fin2-credit-card:hover { border-color: #6ee7b7 !important; }

/* Fila superior */
.fin2-card-top {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.fin2-card-id { font-family: monospace; font-size: 0.82rem; font-weight: 800; color: var(--text-muted, #8b9bb4); flex-shrink: 0; }
.fin2-card-tipo { font-size: 0.9rem; font-weight: 700; color: var(--text-main, #fff); }
[data-theme="light"] .fin2-card-tipo { color: #1e293b; }

/* Métricas */
.fin2-card-metrics {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px;
}
.fin2-card-metric-lbl { font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted, #8b9bb4); margin-bottom: 3px; font-weight: 600; }
.fin2-card-metric-val { font-size: 0.92rem; font-weight: 800; font-family: monospace; color: var(--text-main, #fff); }
[data-theme="light"] .fin2-card-metric-val { color: #1e293b; }

/* Progress */
.fin2-progress-track {
    height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;
}
[data-theme="light"] .fin2-progress-track { background: #e2e8f0; }
.fin2-progress-bar {
    height: 100%; background: linear-gradient(90deg, #6be3b4, #4dc296);
    border-radius: 3px; transition: width 0.4s ease;
}

.fin2-card-progress-wrap {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.fin2-card-progress-wrap .fin2-progress-track { flex: 1; }
.fin2-card-pct { font-size: 0.75rem; font-weight: 700; color: #6be3b4; white-space: nowrap; }

/* Footer de la card */
.fin2-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fin2-card-last-pago { font-size: 0.75rem; color: var(--text-muted, #8b9bb4); }
[data-theme="light"] .fin2-card-last-pago { color: #64748b; }

.fin2-btn-detalle {
    padding: 7px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
    background: rgba(107,227,180,0.08); border: 1px solid rgba(107,227,180,0.25); color: #6be3b4;
    cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;
    transition: background 0.15s;
}
.fin2-btn-detalle:hover { background: rgba(107,227,180,0.16); }
[data-theme="light"] .fin2-btn-detalle { background: #f0fdf9; border-color: #a7f3d0; color: #059669; }

/* Chip plataforma */
.fin2-plat-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
    font-size: 0.72rem; font-weight: 600; color: var(--text-muted, #8b9bb4);
}
[data-theme="light"] .fin2-plat-chip { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }

/* ── Badges de estado ── */
.fin2-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.fin2-badge-activo  { background: rgba(74,144,226,0.12);  color: #4a90e2; border: 1px solid rgba(74,144,226,0.25); }
.fin2-badge-pagado  { background: rgba(107,227,180,0.12); color: #6be3b4; border: 1px solid rgba(107,227,180,0.25); }
.fin2-badge-vencido { background: rgba(239,68,68,0.1);    color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.fin2-badge-mora    { background: rgba(245,158,11,0.12);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
[data-theme="light"] .fin2-badge-activo  { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
[data-theme="light"] .fin2-badge-pagado  { background: #f0fdf9; color: #059669; border-color: #a7f3d0; }
[data-theme="light"] .fin2-badge-vencido { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
[data-theme="light"] .fin2-badge-mora    { background: #fffbeb; color: #d97706; border-color: #fde68a; }

/* ════════════════════════════════
   DRAWER DE DETALLE
   ════════════════════════════════ */
.fin2-drawer-overlay {
    position: fixed; inset: 0; z-index: 8900;
    background: rgba(0,0,0,0.55); display: flex; justify-content: flex-end;
    backdrop-filter: blur(2px);
}
.fin2-drawer {
    width: min(540px, 95vw); height: 100vh; overflow-y: auto;
    background: var(--bg-panel, #0a0d14);
    border-left: 1px solid rgba(255,255,255,0.09);
    display: flex; flex-direction: column; gap: 0;
    box-shadow: -20px 0 50px rgba(0,0,0,0.4);
}
[data-theme="light"] .fin2-drawer { background: #ffffff !important; border-left-color: #e2e8f0 !important; }
.fin2-drawer::-webkit-scrollbar { width: 4px; }
.fin2-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Transición slide-in derecha */
.fin2-slide-enter-active, .fin2-slide-leave-active { transition: transform 0.25s ease, opacity 0.2s; }
.fin2-slide-enter-from, .fin2-slide-leave-to { transform: translateX(40px); opacity: 0; }

.fin2-drawer-hdr {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 22px 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
[data-theme="light"] .fin2-drawer-hdr { border-bottom-color: #f1f5f9; }
.fin2-drawer-ref { font-family: monospace; font-size: 0.78rem; color: var(--text-muted, #8b9bb4); margin-bottom: 4px; }
.fin2-drawer-tipo { font-size: 1.1rem; font-weight: 800; color: var(--text-main, #fff); }
[data-theme="light"] .fin2-drawer-tipo { color: #1e293b; }
.fin2-drawer-close {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fin2-drawer-close:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .fin2-drawer-close { border-color: #e2e8f0; color: #64748b; }

/* Métricas drawer */
.fin2-drawer-metrics {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
[data-theme="light"] .fin2-drawer-metrics { border-bottom-color: #f1f5f9; }
.fin2-metric {
    padding: 16px 18px; border-right: 1px solid rgba(255,255,255,0.06); text-align: center;
}
.fin2-metric:last-child { border-right: none; }
[data-theme="light"] .fin2-metric { border-right-color: #f1f5f9; }
.fin2-metric-lbl { font-size: 0.65rem; color: var(--text-muted, #8b9bb4); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 5px; font-weight: 600; }
.fin2-metric-val { font-size: 0.95rem; font-weight: 800; font-family: monospace; color: var(--text-main, #fff); }
[data-theme="light"] .fin2-metric-val { color: #1e293b; }

/* Progress drawer */
.fin2-drawer-progress-wrap { padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
[data-theme="light"] .fin2-drawer-progress-wrap { border-bottom-color: #f1f5f9; }

/* Botón abonar */
.fin2-abonar-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
[data-theme="light"] .fin2-abonar-row { border-bottom-color: #f1f5f9; }
.fin2-saldo-info { font-size: 0.8rem; color: var(--text-muted, #8b9bb4); }
[data-theme="light"] .fin2-saldo-info { color: #64748b; }
.fin2-btn-abonar {
    padding: 8px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 700;
    background: #6be3b4; color: #000; border: none; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 7px; transition: opacity 0.15s;
}
.fin2-btn-abonar:hover { opacity: 0.88; }

.fin2-pagado-banner {
    padding: 12px 22px; font-size: 0.82rem; font-weight: 700; color: #6be3b4;
    background: rgba(107,227,180,0.06); border-bottom: 1px solid rgba(107,227,180,0.1);
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
[data-theme="light"] .fin2-pagado-banner { background: #f0fdf9; border-bottom-color: #d1fae5; }

/* Split cronograma + historial */
.fin2-drawer-split {
    display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .fin2-drawer-split { border-bottom-color: #f1f5f9; background: #ffffff; }
.fin2-split-col { padding: 18px 18px; border-right: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
.fin2-split-col:last-child { border-right: none; }
[data-theme="light"] .fin2-split-col { border-right-color: #f1f5f9; background: #ffffff; }
.fin2-split-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted, #8b9bb4); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
[data-theme="light"] .fin2-split-title { color: #94a3b8; }

/* Mini table cronograma */
.fin2-schedule-table-wrap { overflow-x: auto; }
.fin2-mini-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.fin2-mini-table th { text-align: left; padding: 5px 6px; color: var(--text-muted); font-size: 0.67rem; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fin2-mini-table td { padding: 6px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-main, #fff); }
[data-theme="light"] .fin2-mini-table { background: #ffffff; }
[data-theme="light"] .fin2-mini-table th { border-bottom-color: #f1f5f9; background: #f8fafc; color: #64748b; }
[data-theme="light"] .fin2-mini-table td { border-bottom-color: #f0f4f8; color: #1e293b !important; background: #ffffff; }
[data-theme="light"] .fin2-mini-table tr:hover td { background: #f8fafc; }

.fin2-cuota-est { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.6rem; }
.fin2-cuota-ok   { background: rgba(107,227,180,0.12); color: #6be3b4; }
.fin2-cuota-pend { background: rgba(255,255,255,0.06); color: var(--text-muted); }
[data-theme="light"] .fin2-cuota-ok   { background: #d1fae5; color: #059669; }
[data-theme="light"] .fin2-cuota-pend { background: #e2e8f0; color: #94a3b8; }

/* Cronograma único (no cuotas) */
.fin2-schedule-single { display: flex; flex-direction: column; gap: 0; }
.fin2-schedule-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.78rem; }
.fin2-schedule-row:last-child { border-bottom: none; }
.fin2-schedule-row span:first-child { color: var(--text-muted, #8b9bb4); }
.fin2-schedule-row span:last-child { font-weight: 600; color: var(--text-main, #fff); }
[data-theme="light"] .fin2-schedule-row { border-bottom-color: #f0f4f8; }
[data-theme="light"] .fin2-schedule-row span:first-child { color: #64748b; }
[data-theme="light"] .fin2-schedule-row span:last-child { color: #1e293b; }

/* Historial de pagos */
.fin2-pagos-empty { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.fin2-pagos-list { display: flex; flex-direction: column; gap: 0; max-height: 280px; overflow-y: auto; }
.fin2-pago-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fin2-pago-row:last-child { border-bottom: none; }
[data-theme="light"] .fin2-pago-row { border-bottom-color: #f0f4f8; }
.fin2-pago-fecha  { font-size: 0.78rem; color: var(--text-main, #fff); font-weight: 600; }
.fin2-pago-metodo { font-size: 0.68rem; color: var(--text-muted, #8b9bb4); margin-top: 1px; }
.fin2-pago-monto  { font-family: monospace; font-weight: 700; font-size: 0.85rem; color: #6be3b4; }
[data-theme="light"] .fin2-pago-fecha  { color: #1e293b; }
[data-theme="light"] .fin2-pago-metodo { color: #64748b; }

/* Observaciones */
.fin2-obs {
    padding: 14px 22px; font-size: 0.78rem; color: var(--text-muted, #8b9bb4);
    background: rgba(245,158,11,0.04); border-top: 1px solid rgba(245,158,11,0.1); flex-shrink: 0;
}
[data-theme="light"] .fin2-obs { background: #fffbeb; border-top-color: #fde68a; color: #92400e; }

/* ── Modal Abonar ── */
.fin2-abonar-summary {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; overflow: hidden;
}
[data-theme="light"] .fin2-abonar-summary { background: #f8fafc; border-color: #e2e8f0; }
.fin2-abonar-sumrow {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.82rem;
    color: var(--text-muted, #8b9bb4);
}
.fin2-abonar-sumrow:last-child { border-bottom: none; }
[data-theme="light"] .fin2-abonar-sumrow { border-bottom-color: #f1f5f9; color: #64748b; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .fin2-kpi-row        { grid-template-columns: repeat(2, 1fr); }
    .fin2-card-metrics   { grid-template-columns: repeat(3, 1fr); }
    .fin2-drawer-metrics { grid-template-columns: repeat(2, 1fr); }
    .fin2-drawer-split   { grid-template-columns: 1fr; }
    .fin2-split-col      { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 480px) {
    .fin2-kpi-row      { grid-template-columns: 1fr 1fr; gap: 8px; }
    .fin2-card-metrics { grid-template-columns: repeat(2, 1fr); }
    .fin2-kpi-num      { font-size: 1.1rem; }
}
@media (max-width: 768px) {
    [data-theme="light"] .fin2-split-col { border-bottom-color: #f1f5f9; }
}

/* =========================================================================
   ONBOARDING WIZARD — Estilos del flujo de primer inicio de sesión
   ========================================================================= */
.ob-root {
    min-height: 100vh;
    background: var(--bg-dark, #050508);
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

/* ── Cabecera ── */
.ob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ob-logo {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}
.ob-logout-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all .2s;
}
.ob-logout-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }

/* ── Body ── */
.ob-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 60px;
}
.ob-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* ── Indicador de pasos ── */
.ob-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 4px;
}
.ob-step {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.ob-step-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all .3s;
    border: 2px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.3);
    background: transparent;
}
.ob-step.activo .ob-step-icon {
    background: #6be3b4;
    border-color: #6be3b4;
    color: #050508;
}
.ob-step.completado .ob-step-icon {
    background: rgba(107,227,180,0.15);
    border-color: #6be3b4;
    color: #6be3b4;
}
.ob-step-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    margin-right: 8px;
}
.ob-step.activo .ob-step-label { color: #6be3b4; font-weight: 600; }
.ob-step.completado .ob-step-label { color: rgba(255,255,255,0.5); }
.ob-step-line {
    width: 32px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 0 4px;
}

/* ── Tarjeta del wizard ── */
.ob-card {
    background: #0f1520;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 36px 40px;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ob-card-wide { max-width: 680px; text-align: left; align-items: flex-start; }
.ob-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 18px;
}
.ob-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.ob-card-sub {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin: 0 0 24px;
    line-height: 1.6;
}

/* ── Campos de formulario ── */
.ob-field { width: 100%; margin-bottom: 16px; text-align: left; }
.ob-label { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.ob-input-wrap { position: relative; }
.ob-input-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}
.ob-input {
    width: 100%;
    padding: 11px 40px 11px 36px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
}
.ob-input:focus { border-color: #6be3b4; }
.ob-eye {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 4px;
}
.ob-eye:hover { color: rgba(255,255,255,0.6); }

/* ── Requisitos de contraseña ── */
.ob-reqs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 20px;
    text-align: left;
}
.ob-req {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    transition: color .2s;
}
.ob-req i { font-size: 0.7rem; }
.ob-req.ok { color: #6be3b4; }
.ob-req.ok i { color: #6be3b4; }

/* ── Botones ── */
.ob-btn-primary {
    width: 100%;
    padding: 13px;
    background: #6be3b4;
    color: #050508;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s;
}
.ob-btn-primary:hover:not(:disabled) { background: #4dc296; }
.ob-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ob-btn-secondary {
    width: 100%;
    padding: 11px;
    background: rgba(107,227,180,0.1);
    color: #6be3b4;
    border: 1px solid rgba(107,227,180,0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s;
}
.ob-btn-secondary:hover:not(:disabled) { background: rgba(107,227,180,0.18); }
.ob-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.ob-btn-skip {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 12px;
    padding: 4px 0;
    transition: color .2s;
}
.ob-btn-skip:hover { color: rgba(255,255,255,0.6); }

/* ── Mensajes de error ── */
.ob-error {
    width: 100%;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

/* ── Sección 2FA ── */
.ob-steps-mini { width: 100%; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ob-step-mini { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.ob-step-num {
    width: 22px; height: 22px;
    background: rgba(107,227,180,0.15);
    color: #6be3b4;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    flex-shrink: 0;
}
.ob-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    width: fit-content;
    align-self: center;
}
.ob-qr-img { width: 160px; height: 160px; display: block; }
.ob-secret-wrap { width: 100%; text-align: center; margin-bottom: 8px; }
.ob-secret-code {
    font-family: monospace;
    font-size: 0.95rem;
    letter-spacing: 3px;
    color: #6be3b4;
    background: rgba(107,227,180,0.08);
    border: 1px solid rgba(107,227,180,0.2);
    border-radius: 6px;
    padding: 8px 16px;
    margin-top: 4px;
    display: inline-block;
}

/* ── Grid de documentos ── */
.ob-doc-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.ob-doc-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ob-doc-required { border-color: rgba(107,227,180,0.2); }
.ob-doc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.ob-doc-header i { color: #6be3b4; font-size: 0.9rem; }
.ob-badge-req {
    font-size: 0.65rem;
    background: rgba(107,227,180,0.15);
    color: #6be3b4;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.ob-doc-hint { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin: 0; }
.ob-file-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: border-color .2s, color .2s;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.ob-file-label:hover { border-color: #6be3b4; color: #6be3b4; }
.ob-file-label i { flex-shrink: 0; font-size: 0.85rem; }
/* Nombre de archivo: recorta con ellipsis sin romper el layout en móvil */
.ob-fname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    line-height: 1.3;
}

/* ── Estado seleccionado en file labels ── */
.ob-file-selected { border-color: #6be3b4 !important; color: #6be3b4 !important; border-style: solid !important; }
[data-theme="light"] .ob-file-selected { border-color: #059669 !important; color: #059669 !important; }

/* ── Formulario cuenta bancaria (grid 2 cols) ── */
.ob-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    margin-bottom: 16px;
}
.ob-field-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .ob-form-grid { grid-template-columns: 1fr; } }

/* ── Pantalla de revisión ── */
.ob-audit-anim {
    position: relative;
    width: 80px; height: 80px;
    margin: 0 auto 20px;
}
.ob-audit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #6be3b4;
    animation: ob-spin 1.2s linear infinite;
}
.ob-audit-ring-slow {
    inset: 8px;
    border-top-color: rgba(107,227,180,0.3);
    animation-duration: 2s;
    animation-direction: reverse;
}
.ob-audit-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #6be3b4;
}
@keyframes ob-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ob-audit-steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 0;
    text-align: left;
}
.ob-audit-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.ob-audit-done    { color: #6be3b4; background: rgba(107,227,180,0.08); border-color: rgba(107,227,180,0.2); }
.ob-audit-active  { color: #f5a623; background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.2); }
.ob-audit-pending { color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.03); }

/* ── Modo claro ── */
[data-theme="light"] .ob-root         { background: #f0f4f8; }
[data-theme="light"] .ob-header       { border-color: #e2e8f0; }
[data-theme="light"] .ob-logo         { color: #0f172a; }
[data-theme="light"] .ob-logout-btn   { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .ob-card         { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .ob-card-title   { color: #0f172a; }
[data-theme="light"] .ob-card-sub     { color: #64748b; }
[data-theme="light"] .ob-label        { color: #64748b; }
[data-theme="light"] .ob-input        { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; }
[data-theme="light"] .ob-input:focus  { border-color: #059669; }
[data-theme="light"] .ob-req          { color: #94a3b8; }
[data-theme="light"] .ob-req.ok       { color: #059669; }
[data-theme="light"] .ob-btn-primary  { background: #059669; }
[data-theme="light"] .ob-btn-primary:hover:not(:disabled) { background: #047857; }
[data-theme="light"] .ob-doc-item     { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .ob-doc-header   { color: #0f172a; }
[data-theme="light"] .ob-file-label   { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
[data-theme="light"] .ob-step-mini    { color: #64748b; }
[data-theme="light"] .ob-audit-pending { color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .ob-secret-code  { background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.2); color: #059669; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ob-card, .ob-card-wide { padding: 24px 20px; border-radius: 12px; }
    .ob-doc-grid { grid-template-columns: 1fr; }
    .ob-reqs { grid-template-columns: 1fr; }
    .ob-header { padding: 14px 20px; }
    .ob-steps { gap: 2px; }
    .ob-step-line { width: 16px; }
}