:root{--ink:#142833;--muted:#6c7a80;--green:#008f78;--line:#dce6e3;--bg:#f7faf9;--red:#c44242}*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}body{margin:0;background:var(--bg);color:var(--ink);font:15px Inter,Segoe UI,Arial,sans-serif}header{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1120px)/2));background:#fff;border-bottom:1px solid var(--line)}.brand{font-weight:800;font-size:20px;text-decoration:none;color:var(--ink)}.brand span{color:var(--green);font-size:27px}.brand small{font-size:10px;color:var(--green);margin-left:5px}.admin-link,.back{color:var(--green);text-decoration:none;font-weight:650}.container{max-width:1120px;margin:auto;padding:68px 24px;width:100%}.hero{max-width:680px;padding:30px 0}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:var(--green)}h1{font-size:clamp(36px,6vw,57px);line-height:1.03;letter-spacing:-2.5px;margin:12px 0 16px}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--green)}h2{font-size:21px;margin:0 0 22px}.hero>p{font-size:17px;line-height:1.6;color:var(--muted);max-width:570px;margin-bottom:30px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:27px;box-shadow:0 10px 35px #13453508}.identify{max-width:470px}label{font-size:13px;color:#526168;font-weight:700;display:block;margin-bottom:18px}input,select{font:inherit;width:100%;margin-top:7px;background:#fff;border:1px solid #cbd8d4;border-radius:8px;padding:13px;color:var(--ink);outline:0}input:focus,select:focus{border-color:var(--green)}input[readonly]{background:#f3f6f5;color:#718083}button,.button{border:0;border-radius:8px;background:var(--green);color:#fff;font:inherit;font-weight:750;padding:13px 18px;cursor:pointer;text-decoration:none;display:inline-block}button b{margin-left:18px;font-size:18px}.alert{padding:13px 16px;border-radius:99px;margin:0 0 22px;font-weight:650}.success{color:#08624f;background:#dcf3ea}.error{color:#902b2b;background:#fde9e9}.dashboard-head,.admin-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:31px}.dashboard-head h1,.admin-top h1{font-size:39px;margin-bottom:5px}.dashboard-head p,.admin-top p{margin:0;color:var(--muted)}.qr-mini{font-size:28px;color:var(--green);text-decoration:none}.two-cols{display:grid;grid-template-columns:minmax(340px,420px) 1fr;gap:28px;align-items:start}.money-input{position:relative}.money-input span{position:absolute;left:13px;top:20px;font-weight:700;color:var(--green)}.money-input input{padding-left:40px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:5px 0 18px}.section-title h2{margin:0}.section-title span{padding:3px 9px;background:#dbeeea;color:var(--green);border-radius:20px;font-weight:700}.requests{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}.request{display:flex;align-items:center;justify-content:space-between;padding:19px;border-bottom:1px solid var(--line);gap:15px}.request:last-child{border:0}.request strong{font-size:17px}.request p{margin:5px 0 0;color:var(--muted);font-size:13px}.status{white-space:nowrap;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800}.pendiente{color:#9a6500;background:#fff1c8}.aprobada{color:#08735c;background:#d9f3eb}.rechazada{color:#a92e3a;background:#fde2e5}.empty{padding:37px 25px;text-align:center;border:1px dashed #bdcfca;border-radius:15px;color:var(--muted);line-height:1.6}.centered{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.auth{width:min(100%,420px)}.auth h1{font-size:39px}.auth form{margin-top:28px}.auth button{width:100%}.back{display:block;margin-top:22px;font-size:13px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;margin-bottom:22px}.filters input,.filters select{margin:0;padding:11px}.filters button{padding:10px 16px}.table-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:830px}th{color:#627278;background:#f4f8f7;text-align:left;font-size:11px;text-transform:uppercase}th,td{padding:16px;border-bottom:1px solid var(--line)}td small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.actions{display:flex;gap:6px}.actions button{font-size:12px;padding:7px 9px}.reject{background:#fff!important;color:var(--red)!important;border:1px solid #e3a0a0}.outline{border:1px solid var(--green);color:var(--green);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}.no-data{text-align:center;color:var(--muted);padding:40px}.qr-card{text-align:center;width:min(100%,480px)}.qr-card h1{font-size:39px}.qr-card p{color:var(--muted)}.qr-card img{display:block;width:min(100%,320px);margin:22px auto}.qr-card code{display:block;overflow-wrap:anywhere;color:var(--muted);font-size:11px;margin:12px 0 22px}

/* GESTIÓN DE CUENTAS BANCARIAS & MODAL */
.bank-manager-section{margin-top:26px}
.bank-manager-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap;gap:15px}
.bank-manager-header h2{margin:2px 0 4px}
.bank-manager-header p{margin:0;color:var(--muted);font-size:13px}
.bank-manager-actions{display:flex;gap:10px;align-items:center}
.search-input{margin:0;padding:10px 14px;font-size:13px;min-width:240px}
.btn-primary{background:var(--green);color:#fff;border:0;padding:10px 16px;border-radius:8px;font-weight:700;cursor:pointer}
.badge-type{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase}
.badge-type.ahorro{background:#e0f2fe;color:#0369a1}
.badge-type.corriente{background:#fef3c7;color:#b45309}
.status-toggle-btn{background:none;border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.status-toggle-btn.active{color:#047857;background:#ecfdf5;border-color:#a7f3d0}
.status-toggle-btn.inactive{color:#6b7280;background:#f3f4f6;border-color:#d1d5db}
.status-toggle-btn .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-toggle-btn.active .dot{background:#10b981}
.status-toggle-btn.inactive .dot{background:#9ca3af}
.btn-edit{background:#f3f4f6;color:#374151;border:1px solid #d1d5db;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.btn-edit:hover{background:#e5e7eb}

/* MODAL STYLES */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:28px;box-shadow:0 20px 40px rgba(0,0,0,0.2);position:relative;animation:modalIn 0.25s ease-out}
@keyframes modalIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-header h3{margin:0;font-size:20px;color:var(--ink)}
.close-btn{background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted);padding:4px}
.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500;font-size:13px;margin-top:15px;margin-bottom:20px}
.checkbox-label input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--green)}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.btn-cancel{background:#f3f4f6;color:#374151;border:1px solid #d1d5db;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer}
.btn-save{background:var(--green);color:#fff;border:0;padding:10px 20px;border-radius:8px;font-weight:700;cursor:pointer}

/* CLIENT SELECTOR STYLES & EMBEDDED INPUT COPIER */
.bank-accounts-selector{margin-top:7px}
.bank-select-dropdown{width:100%;padding:13px;border:1px solid #cbd8d4;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.bank-empty-alert{background:#fff8e6;border:1px solid #fef3c7;color:#92400e;padding:12px 14px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.4;margin-top:7px}

.bank-details-container{width:100%;margin-top:0}
.btn-copy-full{width:100%;margin-top:6px;background:var(--green);color:#ffffff;border:0;border-radius:8px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:all 0.2s ease;box-shadow:0 4px 12px rgba(0,143,120,0.12)}
.btn-copy-full:hover{background:#007562;transform:translateY(-1px)}
.btn-copy-full.copied{background:#10b981!important}

/* SIDE-BY-SIDE COMMISSION CARDS (CUADRITOS) */
.commission-box-container{margin-top:18px;margin-bottom:18px}
.commission-box-title{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px}
.commission-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.commission-card{display:flex;align-items:flex-start;gap:10px;background:#ffffff;border:2px solid #cbd8d4;border-radius:12px;padding:14px;cursor:pointer;transition:all 0.2s ease;margin-bottom:0!important}
.commission-card:hover{border-color:var(--green);background:#f0fdf9}
.commission-card.selected{border-color:var(--green);background:#e6f7f3;box-shadow:0 4px 12px rgba(0,143,120,0.12)}
.commission-card input[type="radio"]{width:18px;height:18px;margin-top:2px;accent-color:var(--green);cursor:pointer}
.badge-opt{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;background:var(--green);color:#ffffff;padding:2px 7px;border-radius:6px;margin-bottom:6px}
.commission-card-content strong{display:block;font-size:13px;color:var(--ink);line-height:1.3;margin-bottom:4px}
.commission-card-content p{margin:0;font-size:12px;color:var(--muted);line-height:1.35}
.fee-preview-box{margin-top:12px;padding:14px;border-radius:10px;background:#e7f6f1;color:#08735c;font-size:13px;line-height:1.5;border:1px solid #bbf7d0}

/* ADMIN SOLICITUDES TABLE DETAILS & COPY BUTTONS */
.admin-bank-details{font-size:13px;line-height:1.4}
.admin-bank-details div{margin-bottom:3px}
.copy-account-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.copy-account-box code{font-weight:700;background:#eef7f4;padding:2px 6px;border-radius:4px;color:#047857}
.btn-copy-sm{background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s ease}
.btn-copy-sm:hover{background:#bae6fd}
.btn-copy-sm.copied{background:#10b981!important;color:#ffffff!important;border-color:#059669!important}
.badge-type.deposito{background:#dcfce7;color:#15803d}
.badge-type.retiro{background:#fee2e2;color:#b91c1c}
.view-bauche-link{display:inline-block;padding:4px 10px;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;border-radius:6px;font-weight:700;font-size:12px;text-decoration:none}
.view-bauche-link:hover{background:#dcfce7}
.muted-text{color:var(--muted);font-size:12px}

/* DARK MODE EXTRA STYLES */
body.dark .modal-card{background:#172522;border:1px solid var(--line);color:var(--ink)}
body.dark .modal-header h3{color:var(--ink)}
body.dark .bank-select-dropdown{background:#20312d;color:var(--ink);border-color:#42615a}
body.dark .btn-edit,body.dark .btn-cancel{background:#20312d;color:var(--ink);border-color:#42615a}
body.dark .badge-type.ahorro{background:#0c4a6e;color:#7dd3fc}
body.dark .badge-type.corriente{background:#78350f;color:#fde68a}
body.dark .status-toggle-btn.active{background:#064e3b;color:#6ee7b7;border-color:#047857}
body.dark .status-toggle-btn.inactive{background:#1f2937;color:#9ca3af;border-color:#374151}
body.dark .copy-account-box code{background:#1b3831;color:#6ee7b7}
body.dark .btn-copy-sm{background:#0c4a6e;color:#7dd3fc;border-color:#0369a1}
body.dark .badge-type.deposito{background:#14532d;color:#86efac}
body.dark .badge-type.retiro{background:#7f1d1d;color:#fca5a5}
body.dark .view-bauche-link{background:#14532d;color:#86efac;border-color:#166534}
body.dark .commission-card{background:#172522;border-color:#3b5650}
body.dark .commission-card.selected{background:#102a24;border-color:#21b89d}
body.dark .fee-preview-box{background:#102a24;border-color:#1a5c4e;color:#6ee7b7}
body.dark .commission-card-content strong{color:var(--ink)}
body.dark .commission-card-content p{color:var(--muted)}

@media(max-width:720px){header{height:64px;padding:0 18px}.container{padding:42px 18px}.hero{padding:10px 0}.two-cols{grid-template-columns:1fr}.dashboard-head h1,.admin-top h1{font-size:34px}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.filters button{grid-column:1/-1}.card{padding:21px}.request{padding:16px}.bank-manager-header{flex-direction:column;align-items:stretch}.bank-manager-actions{flex-direction:column;width:100%}.search-input{min-width:0;width:100%}.commission-grid{grid-template-columns:1fr}.admin-bottom{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr!important}}

.commissions-closure{margin:26px 0}.commissions-closure h2{margin:7px 0}.commissions-closure p{color:var(--muted);margin:0 0 20px;line-height:1.5}.closure-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-bottom:22px}.closure-form label{margin:0}.closure-form input{padding:11px}.closure-history td strong{color:var(--green)}@media(max-width:640px){.closure-form{grid-template-columns:1fr}.closure-form button{width:100%}}

.rate-form{display:grid;grid-template-columns:150px 1fr 1fr 1fr auto;gap:12px;align-items:end;margin-bottom:20px}.rate-form label{margin:0}.rate-form input,.rate-form select{padding:11px}@media(max-width:800px){.rate-form{grid-template-columns:1fr 1fr}.rate-form button{grid-column:1/-1}}

/* ADMIN HEADER STYLING */
.header-brand-wrap{display:flex;align-items:center;gap:10px}
.admin-badge{font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:6px;background:#eef5f3;color:var(--green)}
.header-actions{display:flex;align-items:center;gap:12px}
.btn-portal{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:700;background:#fff;transition:all .18s ease;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.btn-portal:hover{border-color:var(--green);color:var(--green);background:#f0fdf9;transform:translateY(-1px)}
.btn-logout{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;color:#a92e3a;text-decoration:none;font-size:13px;font-weight:700;transition:all .18s ease}
.btn-logout:hover{background:#fde2e5}

/* ADMIN TAB NAVIGATION - HORIZONTAL & INTERACTIVE */
.admin-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 26px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 143, 120, 0.35) transparent !important;
}

.admin-tabs::-webkit-scrollbar {
    height: 5px !important;
}
.admin-tabs::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 999px !important;
}
.admin-tabs::-webkit-scrollbar-thumb {
    background: rgba(0, 143, 120, 0.35) !important;
    border-radius: 999px !important;
}
.admin-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--green) !important;
}

.admin-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.admin-tab:hover {
    background: var(--green) !important;
    color: #ffffff !important;
    border-color: var(--green) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 143, 120, 0.3) !important;
}

.admin-tab:hover .tab-badge.neutral-badge,
.admin-tab:hover .tab-badge.alert-badge {
    background: #ffffff !important;
    color: var(--green) !important;
}

.admin-tab.active {
    background: linear-gradient(135deg, #008f78 0%, #007360 100%) !important;
    color: #ffffff !important;
    border-color: #007360 !important;
    box-shadow: 0 6px 18px rgba(0, 143, 120, 0.35) !important;
    transform: translateY(-1px) !important;
}

.tab-icon { font-size: 16px !important; line-height: 1 !important; }
.tab-text { line-height: 1 !important; }
.tab-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    transition: all 0.2s ease !important;
}
.tab-badge.alert-badge { background: #fef3c7 !important; color: #b45309 !important; }
.tab-badge.neutral-badge { background: #e0f2fe !important; color: #0369a1 !important; }
.tab-badge.active-badge { background: rgba(255, 255, 255, 0.28) !important; color: #ffffff !important; }

body.dark .admin-tabs {
    background: #172522 !important;
    border-color: #29413c !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    scrollbar-color: rgba(33, 184, 157, 0.4) transparent !important;
}
body.dark .admin-tabs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
}
body.dark .admin-tabs::-webkit-scrollbar-thumb {
    background: rgba(33, 184, 157, 0.4) !important;
}
body.dark .admin-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--green) !important;
}
body.dark .admin-tab {
    background: #1f312c !important;
    border-color: #2e4841 !important;
    color: #cbd5e1 !important;
}
body.dark .admin-tab:hover {
    background: #21b89d !important;
    color: #0d1716 !important;
    border-color: #21b89d !important;
    box-shadow: 0 6px 18px rgba(33, 184, 157, 0.4) !important;
}
body.dark .admin-tab.active {
    background: linear-gradient(135deg, #008f78 0%, #006655 100%) !important;
    color: #ffffff !important;
    border-color: #21b89d !important;
}

@media (max-width: 768px) {
    .admin-tabs {
        padding: 6px !important;
        gap: 6px !important;
    }
    .admin-tab {
        padding: 8px 14px !important;
        font-size: 12.5px !important;
    }
}

/* PIE DE PÁGINA (PAGINACIÓN REFINADA) */
.pagination-footer,.pagination{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-top:1px solid var(--line);background:#fafcfb;gap:14px;flex-wrap:wrap}
.pagination-info{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.pagination-badge{display:inline-block;background:#eef5f3;color:var(--green);padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800}
.pagination-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.page-numbers{display:flex;gap:4px;align-items:center}
.page-btn{padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;transition:all .18s ease;display:inline-flex;align-items:center;gap:5px;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.page-btn:hover{background:#f0fdf9;border-color:var(--green);color:var(--green);transform:translateY(-1px)}
.page-btn.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 8px rgba(0,143,120,0.3)}
.page-btn.disabled{opacity:.35;pointer-events:none;cursor:default;transform:none}
.btn-arrow{font-size:16px;line-height:1}
body.dark .pagination-footer,body.dark .pagination{background:#13201d;border-color:var(--line)}
body.dark .page-btn{background:#172522;border-color:var(--line);color:var(--ink)}
body.dark .page-btn:hover{background:#1b3831;color:var(--green)}
body.dark .pagination-badge{background:#1b2e29;color:var(--green)}
@media(max-width:640px){.pagination-footer,.pagination{flex-direction:column;align-items:flex-start}}

/* ADMIN SETTINGS & LOGO PREVIEW */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 4px 18px rgba(19,69,53,0.04)}
.card-desc{font-size:13.5px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.logo-preview-wrap{display:flex;align-items:center;gap:16px;padding:16px;background:#f8fbfa;border:1px solid var(--line);border-radius:12px;margin-bottom:20px}
.logo-placeholder{width:50px;height:50px;border-radius:10px;background:#eef7f4;color:var(--green);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.logo-preview-label strong{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.logo-preview-label{font-size:12.5px;color:var(--muted)}
.password-strength{height:4px;border-radius:99px;margin-top:6px;transition:all .2s ease;background:#e2e8f0}
.password-strength.weak{background:#ef4444;width:33%}
.password-strength.medium{background:#f59e0b;width:66%}
.password-strength.strong{background:#10b981;width:100%}
body.dark .settings-card{background:#172522;border-color:var(--line)}
body.dark .logo-preview-wrap{background:#13211e;border-color:var(--line)}
body.dark .logo-placeholder{background:#18362f;color:#6ee7b7}



/* FIX OVERFLOW - grid children */
.two-cols>*,.admin-bottom>*{min-width:0}

/* SETTINGS SECTION */
.settings-section{margin-top:26px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:27px}
.settings-card h3{margin:0 0 6px;font-size:18px}
.settings-card .card-desc{margin:0 0 22px;color:var(--muted);font-size:13px}
.logo-preview-wrap{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding:16px;background:#f4faf8;border:1px solid var(--line);border-radius:12px}
.logo-preview-wrap img{max-height:56px;max-width:180px;object-fit:contain}
.logo-preview-wrap .logo-placeholder{font-size:28px;font-weight:800;color:var(--green)}
.logo-preview-label{font-size:12px;color:var(--muted)}
.logo-preview-label strong{display:block;color:var(--ink);margin-bottom:2px}
.btn-danger{background:#fff;color:var(--red);border:1px solid #e3a0a0;border-radius:8px;padding:9px 16px;font-weight:700;cursor:pointer;font:inherit}
.btn-danger:hover{background:#fde9e9}
.password-strength{height:4px;border-radius:2px;background:#dce6e3;margin-top:6px;transition:.3s}
.password-strength.weak{background:#c44242;width:33%}
.password-strength.medium{background:#f59e0b;width:66%}
.password-strength.strong{background:#10b981;width:100%}
body.dark .settings-card{background:#172522;border-color:var(--line)}
body.dark .logo-preview-wrap{background:#1b2b27;border-color:#42615a}

/* =========================================================================
   LISTA DE SOLICITUDES EN VERTICAL (<= 760px)
   ========================================================================= */
@media (max-width: 760px) {
    .table-card {
        padding: 14px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .table-wrap {
        overflow: visible;
    }
    #requests-table {
        display: block;
        width: 100%;
        border: none;
    }
    #requests-table thead {
        display: none!important; /* Ocultar encabezados horizontales */
    }
    #requests-table tbody {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    #requests-table tbody tr {
        display: block;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    #requests-table tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
    }
    #requests-table td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #edf4f1;
        width: 100%;
        text-align: left;
    }
    #requests-table td:last-child {
        border-bottom: none;
        padding-top: 14px;
        padding-bottom: 0;
    }
    #requests-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--muted);
        margin-bottom: 4px;
        display: block;
    }
    #requests-table .actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #requests-table .actions button,
    #requests-table .actions label {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    #requests-table .copy-account-box {
        width: 100%;
        justify-content: space-between;
    }
    /* Client history list on mobile */
    .requests .request {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    .requests .request .status {
        align-self: flex-start;
    }

    body.dark #requests-table tbody tr {
        background: #172522;
        border-color: var(--line);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    body.dark #requests-table td {
        border-bottom-color: #233934;
    }
}

/* =========================================================================
   SOPORTE Y REPORTES DE ERRORES (CLIENTE Y ADMINISTRADOR)
   ========================================================================= */

/* Floating support button on client portal */
.support-float-btn {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #008f78;
    color: #ffffff;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 143, 120, 0.35);
    transition: all 0.2s ease;
    text-decoration: none;
}
.support-float-btn:hover {
    background: #007360;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 143, 120, 0.45);
}
@media (max-width: 600px) {
    .support-float-btn span {
        display: none;
    }
    .support-float-btn {
        padding: 12px;
        width: 46px;
        height: 46px;
        justify-content: center;
        font-size: 18px;
    }
}

/* Support Modal */
.support-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}
.support-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.support-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.support-modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.support-modal-desc {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0 0 20px;
    line-height: 1.45;
}
.btn-support-submit {
    width: 100%;
    padding: 13px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}
.btn-support-submit:hover {
    background: #007360;
    transform: translateY(-1px);
}
body.dark .support-modal-card {
    background: #172522;
    border: 1px solid var(--line);
    color: var(--ink);
}
body.dark .support-modal-desc {
    color: var(--muted);
}

/* Support admin filters and cards */
.support-filters-wrap {
    margin-bottom: 22px;
}
.support-filters {
    display: inline-flex;
    gap: 8px;
    background: #edf5f2;
    padding: 5px;
    border-radius: 12px;
    border: 1px solid var(--line);
    flex-wrap: wrap;
}
.support-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #4b5e58;
    text-decoration: none;
    transition: all 0.18s ease;
}
.support-pill:hover {
    color: var(--green);
    background: #ffffff;
}
.support-pill.active {
    background: #ffffff;
    color: var(--green);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.pill-count {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: #dbeae6;
    color: #0b6854;
}
.pill-count.alert-count {
    background: #fef3c7;
    color: #b45309;
}
.pill-count.success-count {
    background: #dcfce7;
    color: #15803d;
}
body.dark .support-filters {
    background: #172522;
    border-color: var(--line);
}
body.dark .support-pill {
    color: var(--muted);
}
body.dark .support-pill:hover,
body.dark .support-pill.active {
    background: #1f3430;
    color: var(--green);
}

/* Support cards in Admin */
.support-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}
.support-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.2s ease;
    border-left: 5px solid #d1d5db;
}
.support-card.card-pending {
    border-left-color: #f59e0b;
    background: #fffdfa;
}
.support-card.card-resolved {
    border-left-color: #10b981;
    background: #fafdfc;
    opacity: 0.9;
}
.support-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.support-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.support-badge {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.support-badge.badge-pending {
    background: #fef3c7;
    color: #b45309;
}
.support-badge.badge-resolved {
    background: #dcfce7;
    color: #15803d;
}
.support-type-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    background: #edf5f2;
    padding: 3px 8px;
    border-radius: 6px;
}
.support-date {
    font-size: 12px;
    color: var(--muted);
}
.support-client-info {
    margin-bottom: 12px;
}
.support-client-info strong {
    font-size: 15px;
    color: var(--ink);
    display: block;
    margin-bottom: 4px;
}
.support-contact-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted);
}
.btn-wa-contact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #25d366;
    color: #ffffff!important;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn-wa-contact:hover {
    background: #20ba5a;
    transform: translateY(-1px);
}
.client-reg-tag {
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}
.support-message-body {
    background: #f9fbfb;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
}
.support-message-body p {
    margin: 0;
}
.support-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.btn-support-resolve {
    background: #10b981;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}
.btn-support-resolve:hover {
    background: #059669;
}
.btn-support-reopen {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}
.btn-support-reopen:hover {
    background: #e5e7eb;
}
.btn-support-delete {
    background: #fff;
    color: #dc2626;
    border: 1px solid #fca5a5;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}
/* =========================================================================
   MODERN INTERACTIVE INDEX STYLES & DESIGN SYSTEM
   ========================================================================= */

/* Typography & Root Enhancements */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.01em;
}

/* Glassmorphism & Surface Helpers */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(220, 230, 227, 0.8);
    box-shadow: 0 12px 36px rgba(19, 69, 53, 0.05);
}

body.dark .glass-panel {
    background: rgba(23, 37, 34, 0.85);
    border-color: rgba(41, 65, 60, 0.8);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

/* Modern Sticky Header */
.modern-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(24px, calc((100% - 1180px)/2));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: all 0.25s ease;
}

body.dark .modern-header {
    background: rgba(16, 25, 24, 0.92);
    border-color: var(--line);
}

.header-brand-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

body.dark .status-pill {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

.status-pill .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.6);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-link {
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: color 0.15s ease;
}

.nav-link:hover {
    color: var(--green);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eef7f4;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
    border: 1px solid #cce8e0;
}

body.dark .user-chip {
    background: #173830;
    border-color: #24574c;
    color: #6ee7b7;
}

.user-chip .avatar-mini {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* Modern Dynamic Hero Grid */
.hero-wrapper {
    position: relative;
    padding: 48px 0 20px;
    overflow: hidden;
}

.hero-glow-bg {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 143, 120, 0.12) 0%, rgba(0, 143, 120, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-glow-bg-left {
    position: absolute;
    bottom: -50px;
    left: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 580px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0, 143, 120, 0.12) 0%, rgba(33, 184, 157, 0.15) 100%);
    border: 1px solid rgba(0, 143, 120, 0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: var(--green);
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(34px, 5vw, 50px);
    line-height: 1.08;
    letter-spacing: -1.8px;
    margin: 0 0 16px;
    color: var(--ink);
    font-weight: 800;
}

.hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, #008f78 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 26px;
}

.hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.trust-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

body.dark .trust-badge-item {
    background: #172522;
    border-color: var(--line);
    color: var(--ink);
}

.trust-badge-item .badge-icon {
    font-size: 16px;
}

/* Interactive Card in Hero */
.hero-card-interactive {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 16px 40px rgba(19, 69, 53, 0.08);
    position: relative;
    overflow: hidden;
}

body.dark .hero-card-interactive {
    background: #172522;
    border-color: var(--line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.hero-card-interactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #008f78, #21b89d, #10b981);
}

.hero-card-header h3 {
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--ink);
}

.hero-card-header p {
    margin: 0 0 20px;
    font-size: 13.5px;
    color: var(--muted);
}

.phone-input-wrap {
    position: relative;
    margin-bottom: 18px;
}

.phone-input-wrap .flag-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    padding-right: 8px;
    border-right: 1px solid #cbd8d4;
    pointer-events: none;
}

.phone-input-wrap input {
    padding-left: 90px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    height: 52px;
    border-radius: 12px;
}

.btn-hero-action {
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #008f78 0%, #007360 100%);
    box-shadow: 0 6px 18px rgba(0, 143, 120, 0.3);
    transition: all 0.2s ease;
}

.btn-hero-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 143, 120, 0.4);
}

/* Interactive Live Rate Calculator Simulator Widget */
.sim-calc-box {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
}

.sim-calc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sim-calc-header span {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 5px;
}

.sim-toggle-group {
    display: inline-flex;
    background: #f0f4f3;
    padding: 3px;
    border-radius: 8px;
    gap: 3px;
}

body.dark .sim-toggle-group {
    background: #111d1a;
}

.sim-toggle-btn {
    background: none;
    border: none;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sim-toggle-btn.active {
    background: #ffffff;
    color: var(--green);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

body.dark .sim-toggle-btn.active {
    background: #1c2c28;
    color: #6ee7b7;
}

.sim-chips-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sim-chip {
    background: #f4faf8;
    border: 1px solid #d2e6e1;
    color: #08735c;
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sim-chip:hover {
    background: #e1f3ed;
    border-color: var(--green);
}

.sim-chip.active {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.sim-result-card {
    background: #f8fbfa;
    border: 1px solid #dce8e4;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.dark .sim-result-card {
    background: #121d1b;
    border-color: #29413c;
}

.sim-result-card strong {
    color: var(--green);
    font-size: 14.5px;
}

/* Services / Features 3-Card Section */
.features-section {
    margin-top: 56px;
}

.section-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 36px;
}

.section-headline .eyebrow {
    margin-bottom: 6px;
    display: inline-block;
}

.section-headline h2 {
    font-size: clamp(26px, 4vw, 36px);
    margin: 0 0 10px;
    letter-spacing: -0.8px;
    font-weight: 800;
}

.section-headline p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
}

.features-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-item-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 4px 18px rgba(19, 69, 53, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.feature-item-card:hover {
    transform: translateY(-5px);
    border-color: #54a895;
    box-shadow: 0 16px 32px rgba(0, 143, 120, 0.1);
}

body.dark .feature-item-card {
    background: #172522;
    border-color: var(--line);
}

body.dark .feature-item-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    border-color: #21b89d;
}

.feature-icon-bubble {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e6f6f2 0%, #cbeee4 100%);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
}

body.dark .feature-icon-bubble {
    background: #10332c;
    color: #6ee7b7;
}

.feature-item-card h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--ink);
}

.feature-item-card p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}

/* Interactive Steps Section */
.steps-section {
    margin-top: 64px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 44px 34px;
}

body.dark .steps-section {
    background: #172522;
    border-color: var(--line);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 32px;
    position: relative;
}

.step-card {
    position: relative;
    padding-left: 20px;
    border-left: 3px solid #cbd8d4;
    transition: border-color 0.2s ease;
}

.step-card:hover {
    border-left-color: var(--green);
}

.step-num-badge {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--green);
    background: #eef7f4;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 8px;
}

body.dark .step-num-badge {
    background: #153b33;
    color: #6ee7b7;
}

.step-card h4 {
    font-size: 16.5px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--ink);
}

.step-card p {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
}

/* Supported Banks Grid */
.banks-showcase-section {
    margin-top: 56px;
}

.banks-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}

.bank-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.bank-tag-pill:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 143, 120, 0.12);
}

body.dark .bank-tag-pill {
    background: #172522;
    border-color: var(--line);
    color: var(--ink);
}

.bank-tag-pill .bank-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

/* FAQ Accordion Section */
.faq-section {
    margin-top: 56px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.faq-item {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

body.dark .faq-item {
    background: #172522;
    border-color: var(--line);
}

.faq-trigger {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 18px 22px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.faq-trigger:hover {
    color: var(--green);
}

.faq-trigger .faq-icon {
    font-size: 18px;
    font-weight: 400;
    transition: transform 0.2s ease;
    color: var(--green);
}

.faq-item.active .faq-trigger .faq-icon {
    transform: rotate(45deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
    padding: 0 22px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}

.faq-item.active .faq-content {
    max-height: 200px;
    padding-bottom: 18px;
}

/* Customer Dashboard Enhancements */
.client-hero-bar {
    background: linear-gradient(135deg, rgba(0, 143, 120, 0.08) 0%, rgba(33, 184, 157, 0.1) 100%);
    border: 1px solid rgba(0, 143, 120, 0.2);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

body.dark .client-hero-bar {
    background: linear-gradient(135deg, #122923 0%, #153830 100%);
    border-color: #24574c;
}

.client-profile-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.client-big-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #008f78 0%, #10b981 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 143, 120, 0.3);
}

.client-name-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--ink);
}

.client-meta-info {
    font-size: 13.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-meta-info a {
    color: #a92e3a;
    text-decoration: none;
    font-weight: 700;
}

.client-meta-info a:hover {
    text-decoration: underline;
}

.dashboard-stats-strip {
    display: flex;
    gap: 14px;
}

.stat-pill {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 14px;
    text-align: center;
}

body.dark .stat-pill {
    background: #172522;
    border-color: var(--line);
}

.stat-pill .num {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--green);
}

.stat-pill .lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}

/* Interactive Operation Selector Tabs */
.operation-tabs-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #f0f4f3;
    padding: 6px;
    border-radius: 14px;
    margin-bottom: 22px;
}

body.dark .operation-tabs-nav {
    background: #111d1a;
}

.op-tab-btn {
    border: none;
    background: none;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--muted);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.op-tab-btn:hover {
    color: var(--ink);
}

.op-tab-btn.active {
    background: #ffffff;
    color: var(--green);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

body.dark .op-tab-btn.active {
    background: #1c2c28;
    color: #6ee7b7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Drag & Drop Styled Voucher Upload */
.voucher-drop-zone {
    border: 2px dashed #cbd8d4;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    background: #fdfdfd;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin-top: 6px;
}

.voucher-drop-zone:hover {
    border-color: var(--green);
    background: #f0fdf9;
}

body.dark .voucher-drop-zone {
    background: #14221f;
    border-color: #3b5650;
}

.voucher-drop-zone input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.voucher-drop-icon {
    font-size: 26px;
    display: block;
    margin-bottom: 4px;
}

.voucher-drop-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    display: block;
}

.voucher-drop-hint {
    font-size: 11.5px;
    color: var(--muted);
    display: block;
    margin-top: 3px;
}

.voucher-file-chosen-preview {
    display: none;
    align-items: center;
    gap: 10px;
    background: #eef7f4;
    border: 1px solid #bbf7d0;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #047857;
    font-weight: 700;
}

/* Request History Filter Pills */
.history-filters-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.filter-pill {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-pill:hover {
    border-color: var(--green);
    color: var(--green);
}

.filter-pill.active {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

body.dark .filter-pill {
    background: #172522;
    border-color: var(--line);
}

body.dark .filter-pill.active {
    background: var(--green);
    color: #fff;
}

/* Floating Support Button Redesign */
.support-float-btn {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 99;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #008f78 0%, #007360 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 143, 120, 0.35);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.support-float-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 143, 120, 0.45);
}

/* Footer public */
.public-footer {
    margin-top: 80px;
    padding: 34px 0;
    border-top: 1px solid var(--line);
    background: transparent;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.public-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .features-cards-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }
    .public-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================================================================
   MODERN DYNAMIC ADMIN DASHBOARD & RICH FOOTER STYLES
   ========================================================================= */

/* Admin Header Enhancements */
.admin-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(24px, calc((100% - 1280px)/2));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 143, 120, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.header-brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-header .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--ink);
    text-decoration: none;
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.admin-header-center {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #f1f7f5;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

.admin-header-center .live-clock {
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

.admin-user-pill .user-role {
    font-size: 10px;
    padding: 2px 6px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 4px;
    text-transform: uppercase;
}

.btn-portal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(0, 143, 120, 0.25);
    border-radius: 10px;
    color: var(--green);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    background: #f0fdf9;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-portal:hover {
    background: var(--green);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 143, 120, 0.25);
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    transition: all 0.2s ease;
}

.btn-logout:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

/* Global Container Width */
.container.admin {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

/* KPI Quick Access Strip */
.admin-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.kpi-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--green);
}

.kpi-card.kpi-pending::before { background: #f59e0b; }
.kpi-card.kpi-cash::before { background: #10b981; }
.kpi-card.kpi-bank::before { background: #0284c7; }
.kpi-card.kpi-total::before { background: #8b5cf6; }
.kpi-card.kpi-support::before { background: #ec4899; }
.kpi-card.kpi-earnings::before { background: #10b981; }

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    box-shadow: 0 8px 20px rgba(0, 143, 120, 0.08);
}

.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: #f0fdf9;
}

.kpi-pending .kpi-icon { background: #fef3c7; }
.kpi-cash .kpi-icon { background: #ecfdf5; }
.kpi-bank .kpi-icon { background: #f0f9ff; }
.kpi-total .kpi-icon { background: #f5f3ff; }
.kpi-support .kpi-icon { background: #fdf2f8; }

.kpi-content {
    flex: 1;
    min-width: 0;
}

.kpi-label {
    display: block;
    font-size: 11.5px;
    font-weight: 750;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.kpi-badge.pulse-badge {
    background: #fef3c7;
    color: #92400e;
    animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

/* Rich Global Admin Footer */
.admin-global-footer {
    margin-top: 60px;
    border-top: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    padding: 44px 0 28px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.admin-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.admin-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1fr;
    gap: 36px;
    margin-bottom: 36px;
}

.footer-col h4 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    margin: 0 0 16px;
}

.footer-brand-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-brand-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 12px;
    font-weight: 700;
    max-width: fit-content;
}

.footer-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
}

.footer-link-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.footer-link-item:hover {
    color: var(--green);
    transform: translateX(2px);
}

.footer-server-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}

.footer-server-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-server-row strong {
    color: var(--ink);
}

.admin-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12.5px;
    color: var(--muted);
}

.footer-version-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: #eef7f4;
    color: #047857;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
}

.btn-scroll-top {
    background: #f1f5f9;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-scroll-top:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    transform: translateY(-2px);
}

/* Modern Glassmorphism Admin Login */
.admin-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 10% 20%, rgba(0, 143, 120, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(2, 132, 199, 0.08) 0%, transparent 40%),
                var(--bg);
}

.admin-login-card {
    max-width: 440px;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 143, 120, 0.15);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.admin-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green) 0%, #0284c7 100%);
}

.admin-login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-brand-logo {
    margin-bottom: 14px;
    display: inline-block;
}

.admin-login-header h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 6px 0;
    color: var(--ink);
}

.admin-login-header p {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0;
}

.input-with-toggle {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 36px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.password-toggle-btn:hover {
    color: var(--green);
}

.btn-login-submit {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 10px;
    background: linear-gradient(135deg, #008f78 0%, #007360 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 143, 120, 0.3);
    transition: all 0.2s ease;
    margin-top: 10px;
}

.btn-login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 143, 120, 0.4);
}

.login-footer-note {
    text-align: center;
    margin-top: 22px;
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* DARK MODE OVERRIDES FOR ADMIN DASHBOARD & FOOTER */
body.dark .admin-header {
    background: rgba(19, 32, 29, 0.92);
    border-color: rgba(33, 184, 157, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

body.dark .admin-status-pill {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

body.dark .admin-header-center {
    background: #172522;
    border-color: var(--line);
    color: var(--ink);
}

body.dark .admin-user-pill {
    background: #172522;
    border-color: var(--line);
    color: var(--ink);
}

body.dark .admin-user-pill .user-role {
    background: #29413c;
    color: #94a3b8;
}

body.dark .btn-logout {
    background: #451a1a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

body.dark .kpi-card {
    background: #172522;
    border-color: var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark .kpi-card:hover {
    border-color: var(--green);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

body.dark .kpi-icon { background: #13201d; }
body.dark .kpi-value { color: var(--ink); }

body.dark .admin-global-footer {
    background: #13201d;
    border-color: var(--line);
    color: var(--ink);
}

body.dark .footer-status-pill {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

body.dark .footer-link-item {
    color: var(--muted);
}

body.dark .footer-link-item:hover {
    color: var(--green);
}

body.dark .footer-server-info {
    background: #172522;
    border-color: var(--line);
}

body.dark .footer-server-row strong {
    color: var(--ink);
}

body.dark .footer-version-tag {
    background: #064e3b;
    color: #6ee7b7;
}

body.dark .btn-scroll-top {
    background: #172522;
    border-color: var(--line);
    color: var(--ink);
}

body.dark .btn-scroll-top:hover {
    background: var(--green);
    color: #fff;
}

body.dark .admin-login-wrapper {
    background: radial-gradient(circle at 10% 20%, rgba(33, 184, 157, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(2, 132, 199, 0.08) 0%, transparent 40%),
                #101918;
}

body.dark .admin-login-card {
    background: rgba(23, 37, 34, 0.95);
    border-color: rgba(33, 184, 157, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

@media (max-width: 992px) {
    .admin-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .footer-col:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .admin-header-center {
        display: none;
    }
    .admin-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .admin-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .footer-links-grid {
        grid-template-columns: 1fr;
    }
    .admin-kpi-strip {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .admin-kpi-strip {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   ENHANCED FILTERS, STICKY TABLES, TOOLTIPS, DROPZONES & TOASTS
   ========================================================================= */

/* Top header count highlight */
.count-highlight {
    font-weight: 800;
    color: var(--green);
    background: #eef7f4;
    padding: 2px 7px;
    border-radius: 6px;
}
body.dark .count-highlight {
    background: #14352e;
    color: #6ee7b7;
}

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-refresh:hover {
    border-color: var(--green);
    color: var(--green);
    transform: translateY(-1px);
}
.refresh-icon {
    font-size: 14px;
}
body.dark .btn-refresh {
    background: #172522;
    border-color: var(--line);
    color: var(--ink);
}

/* Enhanced Filters Toolbar */
/* Accessible Hidden Elements */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.filters-enhanced {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.1fr auto;
    gap: 12px;
    margin-bottom: 22px;
    align-items: center;
    background: #ffffff;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.filter-field-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.filter-field-search .input-icon {
    position: absolute;
    left: 12px;
    font-size: 14px;
    pointer-events: none;
    color: var(--muted);
    z-index: 2;
}

.filter-field-search input {
    margin: 0;
    padding: 10px 34px 10px 36px;
    font-size: 13.5px;
    border-radius: 8px;
    width: 100%;
}

.btn-clear-input {
    position: absolute;
    right: 10px;
    background: #e2e8f0;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-clear-input:hover {
    background: #cbd5e1;
    color: #0f172a;
}

.filter-field select,
.filter-field input {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.btn-filter-submit {
    background: var(--green);
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 750;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-filter-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 143, 120, 0.25);
}

.btn-filter-reset {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-filter-reset:hover {
    background: #e2e8f0;
    color: #0f172a;
}

body.dark .filters-enhanced {
    background: #172522;
    border-color: var(--line);
}
body.dark .btn-filter-reset {
    background: #20312d;
    border-color: var(--line);
    color: var(--muted);
}
body.dark .btn-filter-reset:hover {
    background: #283e39;
    color: var(--ink);
}

/* Sticky Table Headers & Sortable Columns */
.sticky-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.sticky-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fbfa;
    backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--line);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
body.dark .sticky-table thead th {
    background: #1a2c28;
    border-bottom-color: var(--line);
}

th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}
th.sortable:hover {
    background: #eef7f4;
    color: var(--green);
}
body.dark th.sortable:hover {
    background: #1d3630;
    color: #6ee7b7;
}

.sort-indicator {
    font-size: 11px;
    margin-left: 4px;
    opacity: 0.6;
}
th.sorted-asc .sort-indicator,
th.sorted-desc .sort-indicator {
    opacity: 1;
    color: var(--green);
    font-weight: 900;
}

/* Table Loading Overlay */
.table-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(3px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    color: var(--ink);
}
body.dark .table-loading-overlay {
    background: rgba(16, 25, 24, 0.8);
}

.loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(0, 143, 120, 0.2);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Interactive Tooltip Engine */
.tooltip-wrapper {
    display: inline-block;
    position: relative;
}

.tooltip-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #0369a1;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 2px 7px;
    border-radius: 5px;
    cursor: help;
    transition: all 0.15s ease;
}
.tooltip-trigger:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
}
body.dark .tooltip-trigger {
    background: #082f49;
    border-color: #0369a1;
    color: #7dd3fc;
}

.tooltip-trigger[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: #0f172a;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    z-index: 100;
}
.tooltip-trigger:hover[data-tip]::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Action Buttons */
.btn-approve {
    background: var(--green);
    color: #ffffff;
    border: none;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-approve:hover {
    background: #007562;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 143, 120, 0.3);
}

.btn-view-voucher {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-view-voucher:hover {
    background: #dcfce7;
    border-color: #86efac;
    transform: translateY(-1px);
}
body.dark .btn-view-voucher {
    background: #14532d;
    color: #86efac;
    border-color: #166534;
}

/* Row Updated Animation */
@keyframes rowPulse {
    0% { background: rgba(0, 143, 120, 0.18); }
    100% { background: transparent; }
}
.row-updated {
    animation: rowPulse 1.5s ease-out;
}

/* File Dropzone for Deposit Modal */
.file-dropzone {
    border: 2px dashed #cbd8d4;
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.file-dropzone:hover {
    border-color: var(--green);
    background: #f0fdf9;
}
.dropzone-icon {
    font-size: 28px;
}
body.dark .file-dropzone {
    background: #172522;
    border-color: #3b5650;
}
body.dark .file-dropzone:hover {
    border-color: var(--green);
    background: #1b3831;
}

/* Toast Notifications Container */
.toast-container {
    position: fixed;
    top: 86px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-item {
    pointer-events: auto;
    background: #ffffff;
    color: var(--ink);
    border-radius: 12px;
    padding: 14px 18px;
    min-width: 300px;
    max-width: 400px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateX(120%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    opacity: 0;
    border-left: 5px solid var(--green);
}

.toast-item.toast-show {
    transform: translateX(0);
    opacity: 1;
}

.toast-item.toast-success { border-left-color: #10b981; }
.toast-item.toast-error { border-left-color: #ef4444; }
.toast-item.toast-info { border-left-color: #0284c7; }

.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
    color: #fff;
}
.toast-success .toast-icon { background: #10b981; }
.toast-error .toast-icon { background: #ef4444; }
.toast-info .toast-icon { background: #0284c7; }

.toast-body {
    flex: 1;
}
.toast-body strong {
    display: block;
    font-size: 13.5px;
    margin-bottom: 2px;
}
.toast-body p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}
.toast-close:hover {
    color: var(--ink);
}

body.dark .toast-item {
    background: #172522;
    color: var(--ink);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line);
}

@media (max-width: 900px) {
    .filters-enhanced {
        grid-template-columns: 1fr 1fr;
    }
    .filter-field-search {
        grid-column: 1 / -1;
    }
    .filter-actions {
        grid-column: 1 / -1;
    }
}

/* =========================================================================
   SISTEMA DE ROLES Y GESTIÓN DE USUARIOS (RBAC)
   ========================================================================= */
.role-badge-admin {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
}
.role-badge-validador {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
}
body.dark .role-badge-admin {
    background: #064e3b !important;
    color: #a7f3d0 !important;
    border-color: #047857 !important;
}
body.dark .role-badge-validador {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

.status-pill-activo {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11.5px !important;
}
.status-pill-activo .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    display: inline-block;
}
.status-pill-inhabilitado {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11.5px !important;
}
.status-pill-inhabilitado .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
    display: inline-block;
}
body.dark .status-pill-activo {
    background: #14532d !important;
    color: #bbf7d0 !important;
    border-color: #16a34a !important;
}
body.dark .status-pill-inhabilitado {
    background: #7f1d1d !important;
    color: #fecaca !important;
    border-color: #dc2626 !important;
}

.user-row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #008f78, #21b89d);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,143,120,0.25);
}
.user-row-avatar.validador {
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    box-shadow: 0 2px 6px rgba(2,132,199,0.25);
}

.role-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 16px;
}
.role-radio-card {
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
    display: block;
    position: relative;
}
.role-radio-card:hover {
    border-color: var(--green);
    background: #f0fdf9;
}
.role-radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.role-radio-card.selected {
    border-color: var(--green);
    background: #e6f7f3;
    box-shadow: 0 0 0 2px rgba(0, 143, 120, 0.15);
}
.role-radio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.role-radio-header strong {
    font-size: 13.5px;
    color: var(--ink);
}
.role-radio-desc {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.35;
    margin: 0;
}
body.dark .role-radio-card {
    background: #172522;
    border-color: var(--line);
}
body.dark .role-radio-card:hover {
    background: #1a2f2b;
    border-color: var(--green);
}
body.dark .role-radio-card.selected {
    background: #133a32;
    border-color: var(--green);
}

.audit-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}
.audit-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font-size: 13px;
}
body.dark .audit-history-item {
    background: #1b2d28;
    border-color: var(--line);
}
.audit-history-item strong {
    color: var(--ink);
}
.audit-history-item small {
    color: var(--muted);
    font-size: 11px;
}

/* =========================================================================
   BOTONES DE PELIGRO, BOTONES SECUNDARIOS Y CIERRE DE MODALES
   ========================================================================= */
.btn-danger-solid {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
    border-radius: 9px !important;
    padding: 12px 22px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    letter-spacing: 0.2px !important;
}
.btn-danger-solid:hover:not(:disabled) {
    background: #b91c1c !important;
    border-color: #991b1b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
    color: #ffffff !important;
}
.btn-danger-solid:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}
.btn-danger-solid:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background: #991b1b !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-color: #7f1d1d !important;
    box-shadow: none !important;
    transform: none !important;
}
body.dark .btn-danger-solid {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #f43f5e !important;
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.4) !important;
}
body.dark .btn-danger-solid:hover:not(:disabled) {
    background: #be123c !important;
    border-color: #fb7185 !important;
    box-shadow: 0 6px 22px rgba(225, 29, 72, 0.6) !important;
}
body.dark .btn-danger-solid:disabled {
    background: #5c0f1e !important;
    color: rgba(255, 255, 255, 0.45) !important;
    border-color: #881337 !important;
}

.btn-secondary, .btn-secondary-sm {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.btn-secondary-sm {
    padding: 5px 11px !important;
    font-size: 12px !important;
}
.btn-secondary:hover, .btn-secondary-sm:hover:not(:disabled) {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
body.dark .btn-secondary, body.dark .btn-secondary-sm {
    background: #1f312c !important;
    color: #cbd5e1 !important;
    border-color: #334e47 !important;
}
body.dark .btn-secondary:hover, body.dark .btn-secondary-sm:hover:not(:disabled) {
    background: #283e39 !important;
    color: #ffffff !important;
    border-color: #42615a !important;
}

.modal-close {
    background: transparent !important;
    border: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: var(--muted) !important;
    cursor: pointer !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.modal-close:hover {
    color: var(--ink) !important;
    background: rgba(0, 0, 0, 0.06) !important;
}
body.dark .modal-close {
    color: #94a3b8 !important;
}
body.dark .modal-close:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* =========================================================================
   ZONA DE PELIGRO REFINADA Y AMIGABLE
   ========================================================================= */
.danger-zone-card {
    margin-top: 36px;
    border: 1px solid #fecaca;
    border-left: 6px solid #ef4444;
    background: #fffafa;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.05);
    transition: all 0.25s ease;
}
.danger-zone-card .danger-zone-eyebrow {
    color: #dc2626;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.danger-zone-card h2 {
    color: var(--ink);
    margin: 4px 0 8px;
    font-size: 20px;
}
.danger-zone-card p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 14px;
}
.danger-zone-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #991b1b;
    background: #fee2e2;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 650;
    border: 1px solid #fca5a5;
}
body.dark .danger-zone-card {
    background: #1c1517 !important;
    border: 1px solid #4a1d25 !important;
    border-left: 6px solid #f43f5e !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}
body.dark .danger-zone-card .danger-zone-eyebrow {
    color: #f43f5e !important;
}
body.dark .danger-zone-card h2 {
    color: #fecdd3 !important;
}
body.dark .danger-zone-card p {
    color: #cbd5e1 !important;
}
body.dark .danger-zone-badge {
    color: #fca5a5 !important;
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
}

/* =========================================================================
   MODAL DE RESET DE FÁBRICA AMIGABLE CON ALTO CONTRASTE
   ========================================================================= */
.reset-modal-card {
    max-width: 580px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}
body.dark .reset-modal-card {
    background: #172522 !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

.reset-modal-header {
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reset-modal-header h3 {
    color: var(--ink);
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 800;
}
body.dark .reset-modal-header h3 {
    color: #fecdd3 !important;
}

.reset-warning-banner {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    padding: 14px 16px;
    color: #9f1239;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
}
.reset-warning-banner strong {
    color: #881337;
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
}
body.dark .reset-warning-banner {
    background: #2c1619 !important;
    border-color: #5c1f26 !important;
    color: #fecdd3 !important;
}
body.dark .reset-warning-banner strong {
    color: #fda4af !important;
}

/* Radio cards de los modos de reset */
.reset-mode-card {
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
    display: block;
    position: relative;
}
.reset-mode-card:hover {
    border-color: var(--green);
    background: #f0fdf9;
}
.reset-mode-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.reset-mode-card.selected.partial {
    border-color: #10b981;
    background: #f0fdf4;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.reset-mode-card.selected.full {
    border-color: #ef4444;
    background: #fff5f5;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.reset-mode-card .mode-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
}
.reset-mode-card.full .mode-title {
    color: #b91c1c;
}
.reset-mode-card .mode-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    margin: 4px 0 0;
}
body.dark .reset-mode-card {
    background: #182824;
    border-color: #29413c;
}
body.dark .reset-mode-card:hover {
    background: #1c332d;
    border-color: #10b981;
}
body.dark .reset-mode-card.selected.partial {
    background: #10382d;
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}
body.dark .reset-mode-card.full {
    background: #201517;
    border-color: #402227;
}
body.dark .reset-mode-card.full:hover {
    background: #2a181c;
    border-color: #f43f5e;
}
body.dark .reset-mode-card.selected.full {
    background: #33151b;
    border-color: #f43f5e;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.25);
}
body.dark .reset-mode-card .mode-title {
    color: #e2ece9;
}
body.dark .reset-mode-card.full .mode-title {
    color: #fda4af;
}
body.dark .reset-mode-card .mode-desc {
    color: #94a3b8;
}

/* Checkbox de confirmación */
.reset-ack-box {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    transition: all 0.2s ease;
}
body.dark .reset-ack-box {
    background: #152220;
    border-color: #29413c;
}
.reset-ack-box label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
    margin: 0;
}
body.dark .reset-ack-box label {
    color: #cbd5e1;
}

/* Summary banner en fase 2 */
.summary-box-partial {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #065f46;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
}
.summary-box-partial strong {
    color: #047857;
}
body.dark .summary-box-partial {
    background: #0f3328;
    border-color: #059669;
    color: #a7f3d0;
}
body.dark .summary-box-partial strong {
    color: #6ee7b7;
}

.summary-box-full {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
}
.summary-box-full strong {
    color: #881337;
}
body.dark .summary-box-full {
    background: #33151b;
    border-color: #9f1239;
    color: #fecdd3;
}
body.dark .summary-box-full strong {
    color: #fda4af;
}

/* Aviso de 3 intentos */
.reset-attempts-notice {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #854d0e;
    line-height: 1.45;
}
body.dark .reset-attempts-notice {
    background: #25200e;
    border-color: #5e490e;
    color: #fef08a;
}

/* Input confirmation RESET */
.reset-confirm-input {
    border: 1.5px solid #fca5a5 !important;
    background: #ffffff !important;
    color: #991b1b !important;
    font-family: monospace !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    font-size: 14px !important;
}
.reset-confirm-input:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}
body.dark .reset-confirm-input {
    background: #182220 !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}
body.dark .reset-confirm-input:focus {
    border-color: #f43f5e !important;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25) !important;
}

/* =========================================================================
   BOTÓN FLOTANTE DE SOPORTE & KPI GANANCIAS DEL DÍA
   ========================================================================= */
.admin-support-floating-btn {
    position: fixed;
    right: 18px;
    bottom: 74px;
    z-index: 99;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.38);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.admin-support-floating-btn:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.55);
    color: #ffffff !important;
}
.admin-support-floating-btn:active {
    transform: translateY(-1px) scale(0.98);
}
.support-floating-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
}
.support-floating-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    line-height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseBadge 2s infinite;
}
body.dark .admin-support-floating-btn {
    background: linear-gradient(135deg, #db2777 0%, #9d174d 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
body.dark .support-floating-badge {
    border-color: #172522;
}

.kpi-card.kpi-earnings:hover {
    border-color: #10b981;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.15);
}
.kpi-card.kpi-earnings .kpi-icon {
    background: #ecfdf5 !important;
    color: #047857 !important;
}
body.dark .kpi-card.kpi-earnings .kpi-icon {
    background: #10382d !important;
    color: #6ee7b7 !important;
}
.kpi-badge.success-badge {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    margin-left: 6px !important;
    display: inline-block !important;
}
body.dark .kpi-badge.success-badge {
    background: #14532d !important;
    color: #86efac !important;
    border-color: #166534 !important;
}

@media (max-width: 640px) {
    .admin-support-floating-btn {
        right: 14px;
        bottom: 68px;
        width: 44px;
        height: 44px;
    }
}

/* =========================================================================
   RESPONSIVE CONTAINERS: WRAP UNDERNEATH WHEN OVERFLOWING
   (Solicitudes, Control de Fondo & Cierres, Usuarios, Filtros, KPIs)
   ========================================================================= */

/* 1. Header principal y secciones superiores con botones de acción */
.admin-top, .dashboard-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

/* 2. Barra de KPIs principal y de usuarios */
.admin-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

.user-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 14px !important;
}

@media (max-width: 992px) {
    .admin-kpi-strip {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
    .user-kpi-strip {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .admin-kpi-strip, .user-kpi-strip {
        grid-template-columns: 1fr !important;
    }
}

/* 3. Filtros avanzados de Solicitudes (.filters-enhanced) */
.filters-enhanced {
    display: grid !important;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.1fr auto !important;
    gap: 12px !important;
    align-items: center !important;
}

@media (max-width: 1120px) {
    .filters-enhanced {
        grid-template-columns: 1fr 1fr !important;
    }
    .filter-field-search {
        grid-column: 1 / -1 !important;
    }
    .filter-actions {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 620px) {
    .filters-enhanced {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }
    .filter-field {
        width: 100% !important;
    }
    .filter-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .filter-actions button {
        flex: 1 1 0 !important;
    }
}

/* 4. Resumen de fondos en Control de Cierres (.fund-summary-grid) */
.fund-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 26px !important;
}

@media (max-width: 540px) {
    .fund-summary-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 5. Historial de movimientos en Control de Cierres (.fund-history-filters) */
.fund-history-filters {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

@media (max-width: 1060px) {
    .fund-history-filters {
        grid-template-columns: 1fr 1fr !important;
    }
    .fund-history-filters input[name="fondo_ubicacion"] {
        grid-column: 1 / -1 !important;
    }
    .fund-history-filters .filter-actions-wrap {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 580px) {
    .fund-history-filters {
        grid-template-columns: 1fr !important;
    }
    .fund-history-filters .filter-actions-wrap {
        display: flex !important;
        width: 100% !important;
    }
    .fund-history-filters .filter-actions-wrap button,
    .fund-history-filters .filter-actions-wrap a {
        flex: 1 1 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* 6. Formulario de arqueo y cierre de comisiones (.closure-form) */
.closure-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 12px !important;
    align-items: end !important;
    margin-bottom: 22px !important;
}

@media (max-width: 820px) {
    .closure-form {
        grid-template-columns: 1fr 1fr !important;
    }
    .closure-form button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

@media (max-width: 540px) {
    .closure-form {
        grid-template-columns: 1fr !important;
    }
}

/* 7. Columnas en modales y formularios */
@media (max-width: 520px) {
    .form-grid-2col {
        grid-template-columns: 1fr !important;
    }
}

/* 8. Alerta y validación de cuentas bancarias sin fondos para envíos */
.bank-no-funds-alert {
    margin: 8px 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08);
    animation: alertFadeIn 0.25s ease-out;
}

body.dark .bank-no-funds-alert {
    background: #2a1518 !important;
    border-color: #5c2024 !important;
    color: #fca5a5 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.opt-no-funds {
    color: #b91c1c !important;
    font-weight: 600 !important;
}

body.dark .opt-no-funds {
    color: #f87171 !important;
}

.opt-funded {
    color: #047857 !important;
    font-weight: 700 !important;
}

body.dark .opt-funded {
    color: #34d399 !important;
}

.btn-disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background: #94a3b8 !important;
    border-color: #94a3b8 !important;
    pointer-events: none !important;
}

body.dark .btn-disabled {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

@keyframes alertFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================================
   REAL-TIME TOAST NOTIFICATIONS & SOUND TOGGLE STYLES
   ========================================================================= */

/* Sound Toggle Button in Header */
.btn-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(0, 143, 120, 0.22);
    border-radius: 999px;
    background: #f0fdf9;
    color: #047857;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-sound-toggle:hover {
    background: #008f78;
    color: #ffffff;
    border-color: #008f78;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 143, 120, 0.25);
}

.btn-sound-toggle.sound-muted {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

.btn-sound-toggle.sound-muted:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #94a3b8;
}

body.dark .btn-sound-toggle {
    background: #142823;
    border-color: #24574c;
    color: #34d399;
}

body.dark .btn-sound-toggle:hover {
    background: #008f78;
    color: #ffffff;
}

body.dark .btn-sound-toggle.sound-muted {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .btn-sound-toggle .sound-status-text {
        display: none;
    }
    .btn-sound-toggle {
        padding: 7px 9px;
    }
}

/* Toast Container */
.admin-toast-container {
    position: fixed;
    top: 86px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    width: calc(100vw - 48px);
    pointer-events: none;
}

/* Individual Toast */
.admin-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 143, 120, 0.2);
    border-left: 5px solid #008f78;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 143, 120, 0.08);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: all 0.3s ease;
}

.admin-toast.toast-hide {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
}

.admin-toast-solicitud {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf9 100%);
}

.admin-toast-reporte {
    border-left-color: #ec4899;
    background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
}

body.dark .admin-toast {
    background: #172522;
    border-color: #24574c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.dark .admin-toast-solicitud {
    background: linear-gradient(135deg, #172522 0%, #153830 100%);
    border-left-color: #34d399;
}

body.dark .admin-toast-reporte {
    background: linear-gradient(135deg, #1f1b24 0%, #291b24 100%);
    border-left-color: #f472b6;
}

.toast-icon-wrap {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 3px;
    line-height: 1.3;
}

.toast-body {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
    word-break: break-word;
}

.toast-body b {
    color: var(--ink);
}

.toast-link-btn {
    display: inline-block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #008f78;
    text-decoration: none;
    transition: color 0.15s ease;
}

.toast-link-btn:hover {
    color: #005f50;
    text-decoration: underline;
}

body.dark .toast-link-btn {
    color: #34d399;
}

.toast-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
    margin: -4px -4px 0 0;
    transition: color 0.15s ease;
}

.toast-close-btn:hover {
    color: #1e293b;
}

body.dark .toast-close-btn:hover {
    color: #ffffff;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* WhatsApp Notify Button in Client Success Banner */
.btn-wa-notify-company:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45) !important;
}

/* Real-time row highlight animation when new solicitud arrives */
@keyframes rowHighlightPulse {
    0% {
        background-color: rgba(16, 185, 129, 0.35);
        box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.65);
    }
    40% {
        background-color: rgba(16, 185, 129, 0.22);
        box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, 0.45);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.row-new-arrival {
    animation: rowHighlightPulse 4.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

body.dark .row-new-arrival {
    animation: rowHighlightDarkPulse 4.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes rowHighlightDarkPulse {
    0% {
        background-color: rgba(52, 211, 153, 0.32);
        box-shadow: inset 0 0 0 2px rgba(52, 211, 153, 0.75);
    }
    40% {
        background-color: rgba(52, 211, 153, 0.18);
        box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, 0.45);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* KPI Counter updated pulse */
@keyframes kpiBouncePulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); }
    60% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.kpi-updated-pulse {
    animation: kpiBouncePulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ═══════════════ CLIENT PORTAL REAL-TIME TOASTS & ROW ANIMATION ═══════════════ */
.client-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
    width: calc(100vw - 48px);
    pointer-events: none;
}

.client-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.06);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 5px solid #10b981;
}

.client-toast.client-toast-success {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}

.client-toast.client-toast-error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

body.dark .client-toast {
    background: #172522;
    border-color: #24574c;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55);
}

body.dark .client-toast.client-toast-success {
    background: linear-gradient(135deg, #172522 0%, #13392e 100%);
    border-left-color: #34d399;
}

body.dark .client-toast.client-toast-error {
    background: linear-gradient(135deg, #2a1618 0%, #36171a 100%);
    border-left-color: #f87171;
}

.client-toast.toast-hide {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
}

/* Card update pulse on status change */
@keyframes clientRowGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    30% {
        transform: scale(1.02);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.35);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

.client-row-updated {
    animation: clientRowGlow 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes clientRowGlowError {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }
    30% {
        transform: scale(1.02);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.35);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

.client-row-updated-error {
    animation: clientRowGlowError 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Client Sound Controls & Pending Sync Notice */
.client-sound-pill {
    margin-left: 6px;
    align-self: center;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(0, 143, 120, 0.2);
    background: #f0fdf9;
    color: #047857;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.client-sound-pill:hover {
    background: #008f78;
    color: #ffffff;
    border-color: #008f78;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 143, 120, 0.25);
}
.client-sound-pill.sound-muted {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}
.client-sound-pill.sound-muted:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #94a3b8;
}
body.dark .client-sound-pill {
    background: #142823;
    border-color: #24574c;
    color: #34d399;
}
body.dark .client-sound-pill:hover {
    background: #008f78;
    color: #ffffff;
}
body.dark .client-sound-pill.sound-muted {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.pending-sound-notice {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}
body.dark .pending-sound-notice {
    background: #132e27;
    border-color: #1b4b3f;
}
.pending-sound-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.pending-sound-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #065f46;
    font-weight: 600;
}
body.dark .pending-sound-text {
    color: #6ee7b7;
}
.btn-test-chime {
    background: #ffffff;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: #047857;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.btn-test-chime:hover {
    background: #047857;
    color: #ffffff;
    border-color: #047857;
    transform: scale(1.03);
}
body.dark .btn-test-chime {
    background: #173830;
    border-color: #2a6153;
    color: #a7f3d0;
}
body.dark .btn-test-chime:hover {
    background: #34d399;
    color: #0d1716;
}

.pulse-dot-green {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulseDotGreen 1.8s infinite;
}
@keyframes pulseDotGreen {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sound-unblock-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999999;
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    color: #ffffff;
    padding: 13px 22px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(4, 120, 87, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    animation: bounceInUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.sound-unblock-banner:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateX(-50%) scale(1.02);
}
@keyframes bounceInUp {
    from { opacity: 0; transform: translate(-50%, 40px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}