/* =============================================================================
   SABORA · USUARIOS, PERFILES Y RECIBOS
   -----------------------------------------------------------------------------
   Extraído de los bloques <style> que vivían dentro de los .razor. Se conserva
   el origen de cada tramo para poder seguir migrándolo a componentes.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Pages/Usuarios/AcademyDetailAdminModal.razor
   -------------------------------------------------------------------------- */
    .academy-admin-detail { font-family: var(--sb-font); padding: 10px; }
    .loading-container, .error-container { text-align: center; padding: 40px; color: var(--sb-neutral-500); }
    .modal-header { margin-bottom: 20px; }
    .academy-branding { display: flex; align-items: center; gap: 15px; }
    .academy-logo { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
    .subdomain { font-size: 0.85rem; color: var(--sb-neutral-400); }
    
    .course-admin-item { padding: 12px; border-bottom: 1px solid var(--sb-neutral-100); }
    .course-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
    .course-name { font-weight: 700; }
    .course-level { font-size: 0.8rem; color: var(--sb-neutral-500); background: var(--sb-neutral-50); padding: 2px 8px; border-radius: 4px; }
    .schedule-chip { display: inline-block; font-size: 0.75rem; background: var(--sb-blue-50); color: var(--sb-blue-500); padding: 2px 8px; border-radius: 99px; margin-right: 5px; }

    .admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    .admin-table th { text-align: left; font-size: 0.75rem; color: var(--sb-neutral-400); text-transform: uppercase; padding: 10px; }
    .admin-table td { padding: 10px; border-bottom: 1px solid var(--sb-neutral-50); font-size: 0.9rem; }
    .amount { font-weight: 700; }

    .modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/BulkPaymentDialog.razor
   -------------------------------------------------------------------------- */
    .pay-receipts-dialog { font-family: var(--sb-font); padding: 10px; }
    .dialog-header h3 { margin: 0; color: var(--sb-neutral-800); font-weight: 800; display: flex; align-items: center; gap: 10px; }
    .dialog-header p { color: var(--sb-neutral-500); margin-top: 5px; font-size: 0.9rem; }
    
    .receipts-list-summary { padding: 0; margin: 20px 0; border: none; background: transparent; }
    .receipt-block { background: var(--sb-neutral-50); border-radius: 12px; padding: 15px; margin-bottom: 15px; border: 1px solid var(--sb-neutral-200); }
    .receipt-header { border-bottom: 1px solid var(--sb-neutral-200); padding-bottom: 8px; margin-bottom: 12px; }
    .r-title { font-weight: 800; color: var(--sb-neutral-800); font-size: 0.95rem; }
    
    .receipt-details { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
    .line-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--sb-neutral-600); }
    .line-right { display: flex; align-items: center; gap: 10px; }
    .l-amt { font-weight: 600; }
    .btn-delete-line { border: none; background: var(--sb-red-100); color: var(--sb-red-500); border-radius: 4px; width: 20px; height: 20px; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .btn-delete-line:hover { background: var(--sb-red-200); }

    .discount-section-label { font-size: 0.75rem; font-weight: 700; color: var(--sb-neutral-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
    .discount-section-label i { color: #22c55e; }
    .add-adjustment-row { display: grid; grid-template-columns: 1fr 110px 40px; gap: 8px; margin-bottom: 15px; padding: 10px; background: rgba(0,0,0,0.03); border-radius: 8px; }
    .adjustment-input { font-size: 0.8rem; height: 32px !important; }
    .adjustment-amount { font-size: 0.8rem; height: 32px !important; }

    .receipt-subtotal { border-top: 1px dashed var(--sb-neutral-300); padding-top: 10px; display: flex; justify-content: space-between; font-weight: 700; color: var(--sb-neutral-800); font-size: 0.9rem; }

    .form-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 25px; }
    .form-field { display: flex; flex-direction: column; gap: 5px; }
    .form-field label { font-size: 0.8rem; font-weight: 700; color: var(--sb-neutral-500); text-transform: uppercase; }
    .form-field.highlight { padding: 10px; background: #fff7ed; border-radius: 8px; border: 1px solid #ffedd5; }
    
    .check-field { flex-direction: row !important; align-items: center; gap: 10px !important; }
    .check-field label { text-transform: none; color: var(--sb-neutral-800); cursor: pointer; }

    .payment-grand-total { background: var(--sb-neutral-800); color: white; padding: 20px; border-radius: 12px; margin-bottom: 25px; }
    .total-row { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 5px; opacity: 0.8; }
    .total-row.surcharge { color: #fdba74; opacity: 1; font-weight: 600; }
    .total-row.grand { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 10px; padding-top: 10px; font-size: 1.3rem; font-weight: 900; opacity: 1; }

    .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

    .alert-box { padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 15px; align-items: flex-start; }
    .alert-box.error { background: var(--sb-red-50); color: var(--sb-red-800); border: 1px solid var(--sb-red-200); }
    .alert-box i { margin-top: 4px; font-size: 1.1rem; }
    .alert-box p { margin: 4px 0 0; font-size: 0.9rem; opacity: 0.9; }

    .loading-state { text-align: center; padding: 20px; color: var(--sb-neutral-500); }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/ManualMonthlyReceiptModal.razor
   -------------------------------------------------------------------------- */
    .manual-modal { display: flex; flex-direction: column; gap: 18px; }
    .manual-section { background: var(--sb-neutral-0); border: 1px solid var(--sb-neutral-200); border-radius: 14px; padding: 16px; }
    .manual-grid { display: grid; gap: 12px; }
    .manual-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .manual-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .manual-row { display: flex; align-items: end; gap: 12px; }
    .manual-table { width: 100%; border-collapse: collapse; }
    .manual-table th, .manual-table td { padding: 8px; border-bottom: 1px solid var(--sb-neutral-100); }
    .manual-table th { font-size: .75rem; color: var(--sb-neutral-500); text-transform: uppercase; }
    .manual-actions { display: flex; gap: 8px; }
    .manual-summary { display: flex; justify-content: space-between; align-items: center; }
    .cash-badge { font-size: .8rem; font-weight: 700; }

    @media (max-width: 900px) {
        .manual-grid.cols-4, .manual-grid.cols-3 { grid-template-columns: 1fr; }
        .manual-row { flex-direction: column; align-items: stretch; }
    }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/ManualMonthlyReceiptPage.razor
   -------------------------------------------------------------------------- */
    .manual-page-wrap {
        padding: 18px;
        min-height: calc(100vh - 56px);
    }

    .manual-top-card {
        background: var(--sb-neutral-0);
        border: 1px solid var(--border2);
        border-radius: 18px;
        box-shadow: var(--shadow2);
        padding: 16px 18px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .manual-loading-full {
        display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 20px; color: var(--sb-neutral-500); gap: 20px; text-align: center; background: white; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }
    .manual-loading-full p { font-size: 1.1rem; font-weight: 500; margin: 0; }

    .manual-top-card h2 {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 800;
        color: #17213a;
    }

    .manual-top-card p {
        margin: 4px 0 0;
        color: var(--sb-neutral-500);
        font-weight: 600;
    }

    .manual-state-note {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 700;
        color: var(--sb-neutral-600);
        background: var(--sb-neutral-100);
    }

    .manual-message {
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 12px;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .manual-message.error {
        background: var(--sb-red-50);
        color: var(--sb-red-700);
        border: 1px solid var(--sb-red-200);
    }

    .manual-message.success {
        background: var(--sb-green-50);
        color: var(--sb-green-800);
        border: 1px solid #bbf7d0;
    }

    .manual-period-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .manual-add-grid {
        display: grid;
        grid-template-columns: minmax(260px, 2fr) minmax(230px, 2fr) minmax(150px, 1fr) minmax(170px, 1fr);
        gap: 12px;
        align-items: end;
        margin-bottom: 14px;
    }

    .manual-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .manual-field label {
        font-size: 0.72rem;
        color: #7a8599;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 0.7px;
    }

    .manual-control {
        width: 100%;
        height: 46px;
        border: 1px solid #d9dfea;
        border-radius: 13px;
        padding: 0 12px;
        font-size: 1rem;
        color: #27314b;
        background: var(--sb-neutral-0);
        font-weight: 600;
    }

    .manual-control:focus {
        outline: none;
        border-color: #d43b1a;
        box-shadow: 0 0 0 3px rgba(212, 59, 26, 0.15);
    }

    .manual-btn-dark {
        width: 100%;
        height: 46px;
        border: none;
        border-radius: 13px;
        background: #1f2a44;
        color: var(--sb-neutral-0);
        font-weight: 800;
        letter-spacing: 0.4px;
        cursor: pointer;
    }

    .manual-btn-dark:hover:not(:disabled) {
        filter: brightness(1.06);
    }

    .manual-btn-dark:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .manual-course-meta {
        margin-top: 8px;
        display: grid;
        gap: 4px;
        border-radius: 12px;
        border: 1px solid var(--sb-neutral-200);
        border-left: 4px solid #d43b1a;
        background: var(--sb-neutral-50);
        padding: 10px 12px;
        font-size: 0.82rem;
        color: #52617f;
    }

    .manual-cash-checkbox {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        color: #1f2a44;
        margin-top: 4px;
    }

    .manual-cash-open {
        color: var(--sb-green-600);
        font-size: 0.86rem;
        font-weight: 700;
    }

    .manual-cash-closed {
        color: var(--sb-red-700);
        font-size: 0.86rem;
        font-weight: 700;
    }

    .manual-empty-row {
        color: #9aa5ba;
        font-weight: 600;
        text-align: center;
    }


    .manual-page-wrap .enroll-card {
        overflow: visible;
    }

    .btn-action-premium {
        background: linear-gradient(135deg, #d43b1a 0%, #a32d14 100%);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(212, 59, 26, 0.2);
        margin-right: 6px;
    }

    .btn-action-premium:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(212, 59, 26, 0.3);
        filter: brightness(1.05);
    }

    .plan-select-inline {
        background: rgba(99, 102, 241, 0.08);
        color: var(--brand, #6366f1);
        border: 1.5px solid rgba(99, 102, 241, 0.25);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 28px;
        min-height: 40px;
        width: 100%;
    }

    .plan-select-inline:hover {
        border-color: var(--brand, #6366f1);
        background-color: rgba(99, 102, 241, 0.14);
    }

    .plan-select-inline:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }

    .btn-dialog-primary {
        background: #d43b1a;
        color: white;
        border: none;
        padding: 10px 24px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
        letter-spacing: 0.5px;
    }

    .btn-dialog-primary:hover {
        background: #b53216;
        box-shadow: 0 4px 12px rgba(181, 50, 22, 0.2);
    }

    .btn-dialog-secondary {
        background: var(--sb-neutral-100);
        color: var(--sb-neutral-600);
        border: 1px solid var(--sb-neutral-200);
        padding: 10px 24px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
        letter-spacing: 0.5px;
    }

    .btn-dialog-secondary:hover {
        background: var(--sb-neutral-200);
    }

    .premium-dialog {
        border-radius: 20px !important;
        overflow: hidden;
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
    }

    .manual-plan-wrap {
        display: flex;
        align-items: end;
        gap: 10px;
    }

    .manual-line-main {
        font-weight: 700;
        color: #1f2a44;
    }

    .manual-line-sub {
        margin-top: 2px;
        color: #8ca0bc;
        font-size: 0.82rem;
        font-weight: 600;
    }

    .manual-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .manual-type-badge.pack {
        background: #fff7ed;
        color: #c2410c;
        border: 1px solid var(--sb-amber-200);
    }

    .manual-type-badge.ajuste {
        background: #eef2ff;
        color: #3730a3;
        border: 1px solid #c7d2fe;
    }

    @media (max-width: 1100px) {
        .manual-period-grid,
        .manual-add-grid {
            grid-template-columns: 1fr;
        }

        .manual-top-card {
            flex-direction: column;
            align-items: flex-start;
        }
    }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/ReceiptDateModal.razor
   -------------------------------------------------------------------------- */
    .receipt-date-modal {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 8px;
    }

    .receipt-date-modal .modal-header h4 {
        margin: 0;
        font-weight: 800;
        font-size: 1.1rem;
    }

    .receipt-date-modal .modal-header p {
        margin: 6px 0 0;
        color: var(--sb-neutral-500);
        font-size: 0.85rem;
    }

    .receipt-date-modal .modal-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .receipt-date-modal .modal-body label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--sb-neutral-400);
        font-weight: 700;
    }

    .receipt-date-modal .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/UserDetail.razor
   -------------------------------------------------------------------------- */
    /* Foto de perfil ampliable: el visor lo pinta PhotoZoomHost desde el layout. */
    .clickable-photo { cursor: zoom-in; }

    :root {
        --profile-primary: var(--sb-brand);
        --profile-bg: var(--sb-neutral-50);
        --card-bg: var(--sb-neutral-0);
        --text-dark: var(--sb-neutral-900);
        --text-muted: var(--sb-neutral-500);
        --radius-lg: 16px;
        --radius-xl: 20px;
        --shadow-sm: var(--sb-shadow-xs);
        --shadow-md: var(--sb-shadow-sm);
    }

    .user-detail-shell, .premium-profile-page {
        font-family: var(--sb-font);
        padding-bottom: 40px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .animate-fade-in {
        animation: userDetailFadeIn 0.25s ease-out;
    }

    @keyframes userDetailFadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ------------------------------------------------------------- Hero Header --- */
    .user-hero-card {
        background: var(--sb-neutral-0);
        border-radius: 16px;
        border: 1px solid var(--sb-neutral-200);
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
        padding: 20px 24px;
        margin-bottom: 20px;
        position: relative;
    }

    .user-hero-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .user-btn-back-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 10px;
        color: var(--sb-neutral-700);
        font-family: var(--sb-font);
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .user-btn-back-pill:hover {
        background: var(--sb-neutral-100);
        color: var(--sb-brand);
        border-color: var(--sb-neutral-300);
        transform: translateX(-2px);
    }

    .user-hero-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
    }

    .user-hero-main {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1 1 500px;
        min-width: 0;
    }

    .user-avatar-group {
        position: relative;
        flex-shrink: 0;
    }

    .user-avatar, .user-avatar-initials {
        width: 88px;
        height: 88px;
        border-radius: 18px;
        border: 3px solid var(--sb-neutral-100);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
        object-fit: cover;
        background: var(--sb-neutral-50);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-avatar { cursor: zoom-in; transition: transform 0.2s; }
    .user-avatar:hover { transform: scale(1.03); }

    .user-avatar-initials {
        font-size: 2.8rem;
        font-weight: 800;
        color: white;
        background: linear-gradient(135deg, var(--sb-brand) 0%, #ff7a50 100%);
    }

    .user-avatar-edit-btn {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 34px;
        height: 34px;
        background: var(--sb-neutral-900);
        color: white;
        border: 2.5px solid var(--sb-neutral-0);
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
        z-index: var(--sb-z-raised);
    }
    .user-avatar-edit-btn:hover {
        background: var(--sb-brand);
        transform: scale(1.12);
        box-shadow: 0 6px 14px rgba(212, 59, 26, 0.35);
    }
    .user-avatar-edit-btn.is-uploading {
        background: var(--sb-brand);
        pointer-events: none;
    }

    .sb-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .user-hero-info {
        flex: 1;
        min-width: 0;
    }

    .user-hero-name-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .user-hero-title {
        font-size: 1.65rem;
        font-weight: 800;
        color: var(--sb-neutral-900);
        margin: 0;
        line-height: 1.2;
    }

    .user-hero-badges {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .sb-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        line-height: 1.2;
    }
    .sb-badge--success { background: var(--sb-green-50); color: var(--sb-green-700); border: 1px solid var(--sb-green-200); }
    .sb-badge--neutral { background: var(--sb-neutral-100); color: var(--sb-neutral-600); border: 1px solid var(--sb-neutral-200); }
    .sb-badge--info { background: var(--sb-blue-50); color: var(--sb-blue-700); border: 1px solid var(--sb-blue-200); }
    .sb-badge--purple { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
    .sb-badge--warning { background: var(--sb-amber-50); color: var(--sb-amber-700); border: 1px solid var(--sb-amber-200); }

    .user-hero-contact-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        color: var(--sb-neutral-500);
        font-size: 0.85rem;
    }

    .user-contact-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--sb-neutral-600);
        text-decoration: none;
        padding: 3px 8px;
        border-radius: 6px;
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-150);
        transition: all 0.15s ease;
        font-size: 0.82rem;
        font-weight: 500;
    }
    .user-contact-chip:hover {
        background: var(--sb-neutral-100);
        color: var(--sb-neutral-900);
    }
    .user-contact-chip--whatsapp {
        color: #15803d;
        background: #f0fdf4;
        border-color: #bbf7d0;
    }
    .user-contact-chip--whatsapp:hover {
        background: #dcfce7;
        color: #166534;
    }

    .user-hero-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* ----------------------------------------------------------- KPI Grid --- */
    .user-kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
    }

    .user-kpi-card {
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 14px;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
        transition: all 0.18s ease;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    }
    .user-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
        border-color: var(--sb-neutral-300);
    }
    .user-kpi-card.is-active {
        border-color: var(--sb-brand);
        box-shadow: 0 0 0 2px rgba(200, 40, 0, 0.12);
    }

    .user-kpi-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--sb-neutral-100);
        color: var(--sb-neutral-700);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        flex-shrink: 0;
    }
    .user-kpi-card:hover .user-kpi-icon { background: var(--sb-brand-50); color: var(--sb-brand); }
    .user-kpi-card.is-active .user-kpi-icon { background: var(--sb-brand); color: white; }

    .user-kpi-card--warning .user-kpi-icon { background: var(--sb-red-50); color: var(--sb-red-600); }
    .user-kpi-card--warning.is-active .user-kpi-icon { background: var(--sb-red-600); color: white; }
    .user-kpi-card--success .user-kpi-icon { background: var(--sb-green-50); color: var(--sb-green-600); }
    .user-kpi-card--success.is-active .user-kpi-icon { background: var(--sb-green-600); color: white; }

    .user-kpi-data {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .user-kpi-value {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--sb-neutral-900);
        line-height: 1.2;
    }
    .user-kpi-value small {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--sb-neutral-400);
    }
    .user-kpi-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--sb-neutral-500);
        margin-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* ---------------------------------------------------- Unified Tabs Nav --- */
    .user-tabs-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 14px;
        padding: 6px;
        margin-bottom: 20px;
        overflow-x: auto;
    }

    .user-tab-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 10px;
        border: none;
        background: transparent;
        color: var(--sb-neutral-600);
        font-family: var(--sb-font);
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
    }
    .user-tab-btn i { font-size: 0.95rem; }
    .user-tab-btn:hover {
        background: var(--sb-neutral-100);
        color: var(--sb-neutral-900);
    }
    .user-tab-btn.is-active {
        background: var(--sb-brand);
        color: var(--sb-neutral-0);
        box-shadow: 0 2px 8px rgba(200, 40, 0, 0.22);
    }
    .user-tab-btn.is-active i { color: var(--sb-neutral-0); }

    .user-tab-badge {
        font-size: 0.72rem;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--sb-neutral-200);
        color: var(--sb-neutral-700);
    }
    .user-tab-btn.is-active .user-tab-badge {
        background: rgba(255, 255, 255, 0.25);
        color: white;
    }
    .user-tab-badge--warning {
        background: var(--sb-red-500);
        color: white;
    }

    /* ------------------------------------------------- Tab Content Wrapper --- */
    .user-tab-content-card {
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
        min-height: 420px;
    }

    .user-tab-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .user-tab-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--sb-neutral-900);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .user-tab-title i { color: var(--sb-brand); }

    /* ---------------------------------------------------- Courses Tab Grid --- */
    .user-courses-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
    }

    .user-course-card {
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 18px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .user-course-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.09), 0 6px 12px -2px rgba(15, 23, 42, 0.04);
        border-color: rgba(234, 88, 12, 0.3);
    }
    .user-course-card.is-inactive {
        opacity: 0.76;
        background: var(--sb-neutral-50);
        border-style: dashed;
    }
    .user-course-card.is-inactive:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -2px rgba(15, 23, 42, 0.06);
        border-color: var(--sb-neutral-300);
    }

    .user-course-card-top-bar {
        height: 4px;
        width: 100%;
        background: linear-gradient(90deg, #ea580c 0%, #f97316 60%, #fb923c 100%);
        transition: opacity 0.2s ease;
    }
    .user-course-card.is-inactive .user-course-card-top-bar {
        background: var(--sb-neutral-300);
    }

    .user-course-card-content {
        padding: 20px 20px 16px 20px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .user-course-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }
    .user-course-icon-badge {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        background: linear-gradient(135deg, rgba(234, 88, 12, 0.12) 0%, rgba(249, 115, 22, 0.05) 100%);
        border: 1px solid rgba(234, 88, 12, 0.18);
        color: var(--sb-brand);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.18rem;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
    .user-course-card:hover .user-course-icon-badge {
        transform: scale(1.05);
    }
    .user-course-card.is-inactive .user-course-icon-badge {
        background: var(--sb-neutral-100);
        border-color: var(--sb-neutral-200);
        color: var(--sb-neutral-400);
    }

    .user-course-badges {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .user-course-level-chip {
        background: var(--sb-neutral-100);
        color: var(--sb-neutral-700);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 3px 10px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        line-height: 1.4;
    }
    .user-course-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 700;
        line-height: 1.4;
    }
    .user-course-status-pill.is-active {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #065f46;
    }
    .user-course-status-pill.is-inactive {
        background: var(--sb-neutral-100);
        border: 1px solid var(--sb-neutral-200);
        color: var(--sb-neutral-600);
    }
    .status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
    }
    .user-course-status-pill.is-active .status-dot {
        background: #10b981;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        animation: sb-pulse-green 2s infinite;
    }
    .user-course-status-pill.is-inactive .status-dot {
        background: #9ca3af;
    }

    @keyframes sb-pulse-green {
        0% {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
        }
        70% {
            box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        }
    }

    .user-course-main {
        margin-bottom: 14px;
    }
    .user-course-name {
        font-size: 1.18rem;
        font-weight: 800;
        color: var(--sb-neutral-900);
        margin: 0 0 4px 0;
        letter-spacing: -0.015em;
        line-height: 1.25;
    }
    .user-course-academy {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--sb-neutral-500);
    }
    .user-course-academy i {
        color: var(--sb-brand);
        font-size: 0.8rem;
    }

    .user-course-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: auto;
    }
    .user-course-info-item {
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 12px;
        padding: 9px 11px;
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        transition: all 0.2s ease;
    }
    .user-course-card:hover .user-course-info-item {
        background: #ffffff;
        border-color: var(--sb-neutral-300);
    }
    .user-course-info-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: #ffffff;
        border: 1px solid var(--sb-neutral-200);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sb-brand);
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    .user-course-info-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }
    .user-course-info-label {
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--sb-neutral-400);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.1;
        margin-bottom: 2px;
    }
    .user-course-info-value {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--sb-neutral-800);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
    .user-course-info-time {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--sb-brand);
    }

    .user-course-footer {
        padding: 12px 20px;
        background: var(--sb-neutral-50);
        border-top: 1px solid var(--sb-neutral-200);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .user-course-state-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.76rem;
        font-weight: 600;
        color: #059669;
    }
    .user-course-state-label.is-muted {
        color: var(--sb-neutral-500);
    }
    .user-course-state-label i {
        font-size: 0.72rem;
    }

    .user-course-action-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 14px;
        border-radius: 10px;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid transparent;
        white-space: nowrap;
    }
    .user-course-action-btn.btn-danger-soft {
        background: #fef2f2;
        color: #e11d48;
        border-color: #fecdd3;
    }
    .user-course-action-btn.btn-danger-soft:hover {
        background: #e11d48;
        color: #ffffff;
        border-color: #e11d48;
        box-shadow: 0 4px 14px rgba(225, 29, 72, 0.28);
        transform: translateY(-1px);
    }
    .user-course-action-btn.btn-success-soft {
        background: #ecfdf5;
        color: #059669;
        border-color: #a7f3d0;
    }
    .user-course-action-btn.btn-success-soft:hover {
        background: #059669;
        color: #ffffff;
        border-color: #059669;
        box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
        transform: translateY(-1px);
    }

    @media (max-width: 520px) {
        .user-courses-grid {
            grid-template-columns: 1fr;
        }
        .user-course-info-grid {
            grid-template-columns: 1fr;
        }
    }

    /* --------------------------------------------------- Danger Zone Card --- */
    .danger-zone-card {
        border: 1px solid var(--sb-red-200);
        border-radius: 16px;
        background: linear-gradient(135deg, #fff7f7 0%, var(--sb-red-50) 100%);
        padding: 20px;
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    .danger-zone-copy h4 {
        margin: 0 0 4px 0;
        color: var(--sb-red-800);
        font-size: 1rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .danger-zone-copy p {
        margin: 0;
        color: var(--sb-red-700);
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* ------------------------------------------------ Payments Table Helpers --- */
    .receipt-date-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 8px;
        padding: 4px 10px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--sb-neutral-700);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .receipt-date-btn:hover:not(:disabled) {
        background: var(--sb-neutral-100);
        border-color: var(--sb-neutral-300);
        color: var(--sb-brand);
    }
    .receipt-date-btn i {
        color: var(--sb-neutral-400);
        font-size: 0.78rem;
    }

    .caja-badge-ok {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 800;
        background: var(--sb-green-50);
        color: var(--sb-green-700);
        border: 1px solid var(--sb-green-200);
    }
    .caja-btn-register {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        background: var(--sb-amber-50);
        color: var(--sb-amber-700);
        border: 1px dashed var(--sb-amber-200);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .caja-btn-register:hover:not(:disabled) {
        background: var(--sb-amber-100);
        border-style: solid;
    }

    .batch-actions-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 12px;
        padding: 12px 18px;
        gap: 16px;
        flex-wrap: wrap;
    }
    .batch-info {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.88rem;
        color: var(--sb-neutral-700);
    }
    .batch-info i {
        color: var(--sb-brand);
        font-size: 1.1rem;
    }
    .batch-total {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 10px;
        background: white;
        border-radius: 6px;
        border: 1px solid var(--sb-neutral-200);
    }

    /* ------------------------------------------------ Responsive Overrides --- */
    @media (max-width: 900px) {
        .user-hero-body {
            flex-direction: column;
            align-items: stretch;
        }
        .user-hero-main {
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-top: 0;
        }
        .user-hero-name-row, .user-hero-contact-row, .user-hero-badges {
            justify-content: center;
        }
        .user-hero-actions {
            justify-content: center;
        }
    }

    @media (max-width: 600px) {
        .user-kpi-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .user-tab-content-card {
            padding: 16px;
        }
    }

    .user-profile-grid-detail {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 15px;
    }

    .user-profile-grid-detail .full-width {
        grid-column: span 2;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--sb-neutral-100);
    }

    .detail-item .label {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-item .value {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-dark);
    }

    .profile-details-card h3 {
        margin-top: 0;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-dark);
        font-size: 1.1rem;
    }

    .coins-balance-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        flex-wrap: wrap;
        gap: 20px;
        background: var(--sb-neutral-50);
        padding: 20px;
        border-radius: 16px;
        border: 1px solid var(--sb-neutral-200);
    }

    .balance-card {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .balance-icon {
        width: 50px;
        height: 50px;
        background: var(--sb-amber-100);
        color: var(--sb-amber-600);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 4px 6px -1px rgba(217, 119, 6, 0.1);
    }

    .balance-info {
        display: flex;
        flex-direction: column;
    }

    .balance-info .label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 0.5px;
    }

    .balance-info .amount {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--sb-amber-700);
    }

    .balance-info .amount small {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--sb-amber-600);
    }

    .add-coins-actions {
        flex: 1;
        max-width: 500px;
    }

    .add-input-group {
        display: flex;
        gap: 10px;
        align-items: center;
        background: white;
        padding: 6px;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--sb-neutral-200);
    }

    .attendance-container {
        padding: 20px;
        background: var(--sb-neutral-25);
        border-radius: 12px;
    }

    .attendance-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
    }

    .attendance-toolbar h3 {
        margin: 2px 0 0;
        color: var(--text-dark);
        font-size: 1.6rem;
        font-weight: 800;
    }

    .attendance-eyebrow,
    .attendance-detail-eyebrow {
        display: block;
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .attendance-nav {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 12px;
        padding: 6px;
    }

    .attendance-icon-button,
    .attendance-today-button,
    .attendance-retry-button {
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 800;
        transition: all 0.2s ease;
    }

    .attendance-icon-button {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: white;
        color: var(--profile-primary);
        box-shadow: var(--shadow-sm);
    }

    .attendance-icon-button:hover,
    .attendance-today-button:hover,
    .attendance-retry-button:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .attendance-today-button,
    .attendance-retry-button {
        min-height: 36px;
        padding: 0 14px;
        background: var(--profile-primary);
        color: white;
    }

    .attendance-legend {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 18px;
        color: var(--sb-neutral-600);
        font-size: 0.9rem;
        font-weight: 700;
    }

    .attendance-legend span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .legend-dot {
        width: 13px;
        height: 13px;
        border-radius: 4px;
        display: inline-block;
    }

    .legend-dot.attended { background: #43b756; }
    .legend-dot.missed { background: #f25050; }
    .legend-dot.pending { background: #ffb000; }

    .attendance-layout {
        display: grid;
        grid-template-columns: minmax(360px, 1fr) minmax(280px, 0.8fr);
        gap: 20px;
        align-items: start;
    }

    .attendance-calendar-card,
    .attendance-detail-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 18px;
        box-shadow: var(--shadow-sm);
    }

    .attendance-weekdays,
    .attendance-month-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 8px;
    }

    .attendance-weekdays {
        margin-bottom: 8px;
    }

    .attendance-weekdays span {
        color: #737b83;
        font-size: 0.84rem;
        font-weight: 800;
        text-align: center;
        padding: 6px 0;
    }

    .attendance-day {
        position: relative;
        aspect-ratio: 1;
        min-width: 0;
        border: 2px solid transparent;
        border-radius: 12px;
        background: var(--sb-neutral-50);
        color: #30363d;
        font-size: 1.2rem;
        font-weight: 900;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .attendance-day:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .attendance-day.is-outside {
        color: #b7bec5;
        background: #f3f4f6;
    }

    .attendance-day.is-today {
        border-color: var(--profile-primary);
    }

    .attendance-day.is-selected {
        box-shadow: 0 0 0 3px rgba(200, 40, 0, 0.15);
    }

    .attendance-day.attended {
        background: #e5f7e8;
        color: #33a548;
    }

    .attendance-day.missed {
        background: #fde8eb;
        color: var(--sb-red-500);
    }

    .attendance-day.pending {
        background: #fff6d8;
        color: #ffb000;
    }

    .attendance-day-count {
        position: absolute;
        right: 7px;
        bottom: 6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.8);
        color: inherit;
        font-size: 0.68rem;
        line-height: 18px;
        text-align: center;
    }

    .attendance-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .attendance-detail-header h4 {
        margin: 3px 0 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1.3;
    }

    .attendance-day-status,
    .attendance-status-pill {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .attendance-day-status.attended,
    .attendance-status-pill.attended {
        background: var(--sb-green-100);
        color: #168a2f;
    }

    .attendance-day-status.missed,
    .attendance-status-pill.missed {
        background: var(--sb-red-100);
        color: var(--sb-red-600);
    }

    .attendance-day-status.pending,
    .attendance-status-pill.pending {
        background: var(--sb-amber-100);
        color: #b77900;
    }

    .attendance-class-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .attendance-class-item {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 12px;
        border: 1px solid var(--sb-neutral-150);
        border-radius: 12px;
        background: var(--sb-neutral-50);
    }

    .attendance-class-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .attendance-class-icon.attended { background: var(--sb-green-100); color: var(--sb-green-600); }
    .attendance-class-icon.missed { background: var(--sb-red-100); color: var(--sb-red-500); }
    .attendance-class-icon.pending { background: #fff6d8; color: #ffb000; }

    .attendance-class-copy {
        min-width: 0;
    }

    .attendance-class-copy h5 {
        margin: 0 0 4px;
        color: var(--text-dark);
        font-size: 1rem;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    .attendance-class-copy p,
    .attendance-class-copy span {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.88rem;
        font-weight: 600;
    }

    .attendance-empty-day,
    .attendance-error-state {
        display: flex;
        min-height: 220px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: var(--text-muted);
        text-align: center;
    }

    .attendance-empty-day i,
    .attendance-error-state i {
        font-size: 2.3rem;
        opacity: 0.35;
    }

    @media (max-width: 1100px) {
        .attendance-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 640px) {
        .attendance-container {
            padding: 12px;
        }

        .attendance-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .attendance-nav {
            justify-content: space-between;
        }

        .attendance-calendar-card,
        .attendance-detail-card {
            padding: 12px;
        }

        .attendance-weekdays,
        .attendance-month-grid {
            gap: 5px;
        }

        .attendance-day {
            border-radius: 10px;
            font-size: 0.95rem;
        }

        .attendance-class-item {
            grid-template-columns: 40px minmax(0, 1fr);
        }

        .attendance-status-pill {
            grid-column: 1 / -1;
            justify-content: center;
        }
    }

    .text-success { color: var(--sb-green-500) !important; }
    .text-danger { color: var(--sb-red-500) !important; }
    /* Premium Coins System Styles */
    .coins-container {
        padding: 0;
        background: transparent;
    }

    .coins-header-card {
        background: var(--sb-neutral-0);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 18px;
        color: var(--sb-neutral-900);
        margin-bottom: 24px;
        box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
    }

    .coins-card-top-bar {
        height: 4px;
        width: 100%;
        background: linear-gradient(90deg, #f59e0b 0%, #ea580c 60%, #f97316 100%);
    }

    .balance-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 26px 20px 26px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .balance-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .coin-glow-icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 1px solid #fcd34d;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #d97706;
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
        flex-shrink: 0;
    }

    .balance-details {
        display: flex;
        flex-direction: column;
    }

    .balance-label {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sb-neutral-500);
        display: block;
        margin-bottom: 4px;
    }

    .balance-value-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .balance-amount {
        font-size: 2.2rem;
        font-weight: 900;
        margin: 0;
        line-height: 1;
        letter-spacing: -0.02em;
        color: var(--sb-neutral-900);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .coins-badge-currency {
        font-size: 0.8rem;
        font-weight: 700;
        color: #b45309;
        background: #fef3c7;
        border: 1px solid #fde68a;
        padding: 4px 10px;
        border-radius: 999px;
        letter-spacing: 0;
    }

    .btn-refresh-coins {
        background: var(--sb-neutral-100);
        border: 1px solid var(--sb-neutral-200);
        color: var(--sb-neutral-600);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-refresh-coins:hover {
        background: var(--sb-neutral-200);
        color: var(--sb-neutral-900);
        transform: rotate(45deg);
    }

    .balance-right-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-200);
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--sb-neutral-700);
    }

    .quick-add-section {
        background: var(--sb-neutral-50);
        border-top: 1px solid var(--sb-neutral-200);
        border-radius: 0 0 18px 18px;
        padding: 18px 26px 22px 26px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .quick-add-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.82rem;
        font-weight: 800;
        color: var(--sb-neutral-700);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .input-row {
        display: flex;
        gap: 14px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .input-field-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .input-field-quantity {
        min-width: 140px;
    }

    .flex-2 {
        flex: 2;
        min-width: 200px;
    }

    .input-field-group label {
        font-size: 0.74rem;
        font-weight: 700;
        color: var(--sb-neutral-600);
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .coins-concept-input {
        height: 42px !important;
        border-radius: 10px;
        font-size: 0.88rem;
    }

    .action-btn-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .coins-submit-btn {
        height: 42px;
        padding: 0 20px;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .toggle-group {
        display: flex;
        background: var(--sb-neutral-200);
        border-radius: 10px;
        padding: 3px;
        gap: 4px;
        height: 42px;
        box-sizing: border-box;
    }

    .toggle-btn {
        border: none;
        padding: 0 14px;
        border-radius: 7px;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        background: transparent;
        color: var(--sb-neutral-600);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        height: 36px;
    }

    .toggle-btn.active-ingreso {
        background: #ffffff;
        color: #059669;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .toggle-btn.active-gasto {
        background: #ffffff;
        color: #e11d48;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .history-section {
        border: 1px solid var(--sb-neutral-200);
        border-radius: 18px;
        padding: 22px;
        background: var(--sb-neutral-0);
        box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04);
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        color: var(--sb-neutral-900);
    }

    .section-title i { color: var(--sb-brand); }
    .section-title h3,
    .section-title h4 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--sb-neutral-900); }

    .table-sabora-wrapper {
        border-radius: 12px;
        overflow: hidden;
    }

    .table-sabora {
        width: 100%;
        border-collapse: collapse;
    }

    .table-sabora thead th {
        background: #f8f9fa;
        padding: 12px 15px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: #999;
        letter-spacing: 0.5px;
    }

    .table-sabora tbody tr {
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
    }

    .table-sabora tbody tr:hover { background: var(--sb-neutral-25); }

    .table-sabora td { padding: 15px; font-size: 14px; color: #444; }

    .date-cell { color: #888; font-family: monospace; }
    .concept-cell { font-weight: 500; }

    .pill-tipo {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .pill-tipo.ingreso { background: #e8f5e9; color: #2e7d32; }
    .pill-tipo.gasto { background: #ffebee; color: #c62828; }

    .amount-cell { font-weight: 700; }
    .amount-cell.positive { color: #2e7d32; }
    .amount-cell.negative { color: #c62828; }

    .balance-cell { font-weight: 600; color: #666; }

    .btn-delete-mov {
        background: none;
        border: none;
        color: #ff5252;
        cursor: pointer;
        padding: 5px;
        opacity: 0.6;
        transition: all 0.2s;
    }
    .btn-delete-mov:hover { opacity: 1; transform: scale(1.1); }

    .loading-state-coins {
        text-align: center;
        padding: 40px;
        color: #888;
    }

    .coin-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid var(--sb-neutral-200);
        border-top: 4px solid var(--sb-brand);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 15px;
    }

    .empty-state-coins {
        text-align: center;
        padding: 40px;
        color: #999;
    }

    .empty-icon-blob {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.3;
    }

    .empty-state-coins h4 { margin: 0; color: #444; }

    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    
    .animate-row {
        animation: slideUp 0.3s ease-out forwards;
        opacity: 0;
    }

    @keyframes slideUp {
        from { transform: translateY(10px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/UserProfile.razor
   -------------------------------------------------------------------------- */
    .user-profile-layout.is-embedded,
    .is-embedded .user-profile-layout {
        display: block;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .user-profile-layout.is-embedded .user-profile-form,
    .is-embedded .user-profile-form {
        width: 100%;
        max-width: 100%;
    }

    .user-profile-form-sections {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .user-profile-section-card {
        background: var(--sb-neutral-25);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 16px;
        padding: 20px;
        transition: all 0.2s ease;
    }
    .user-profile-section-card:hover {
        border-color: var(--sb-neutral-300);
    }

    .user-profile-section-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--sb-neutral-900);
        margin: 0 0 16px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .user-profile-section-title i {
        color: var(--sb-brand);
        font-size: 1.05rem;
    }

    .user-profile-section-hint {
        font-size: 0.85rem;
        color: var(--sb-neutral-500);
        margin: -8px 0 16px 0;
        line-height: 1.4;
    }

    .user-profile-fields-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
    .user-profile-fields-grid.single-col {
        grid-template-columns: 1fr;
    }

    .user-profile-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .full-width { grid-column: 1 / -1; }
    .user-profile-switches {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
        background: var(--sb-neutral-0);
        padding: 18px;
        border-radius: 14px;
        border: 1px solid var(--sb-neutral-200);
        margin-top: 8px;
    }
    .user-profile-switch {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: var(--sb-neutral-50);
        border: 1px solid var(--sb-neutral-200);
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--sb-neutral-700);
        cursor: pointer;
        transition: all 0.18s ease;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }
    .user-profile-switch:hover {
        border-color: var(--sb-brand-200, #fdba74);
        background: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    }

    .user-profile-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid var(--sb-neutral-200);
    }

    /* Social Links Editor Styles */
    .social-links-editor { display: flex; flex-direction: column; gap: 12px; }
    .social-links-editor-row { display: flex; gap: 8px; align-items: flex-end; }
    .social-links-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
    .social-links-empty { color: var(--sb-neutral-500); font-size: 0.9rem; font-style: italic; padding: 8px 0; }
    .social-links-error { color: var(--sb-red-600); font-size: 0.85rem; margin: 4px 0; }
    .social-link-item { display: flex; gap: 8px; align-items: center; background: var(--sb-neutral-50); padding: 8px; border-radius: 8px; border: 1px solid var(--sb-neutral-200); }

    /* Skeleton Loading Styles */
    .shimmer {
        background: #f6f7f8;
        background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
        background-repeat: no-repeat;
        background-size: 800px 104px; 
        animation-duration: 1.5s;
        animation-fill-mode: forwards; 
        animation-iteration-count: infinite;
        animation-name: placeholderShimmer;
        animation-timing-function: linear;
    }
    @keyframes placeholderShimmer {
        0% { background-position: -468px 0; }
        100% { background-position: 468px 0; }
    }
    .skeleton-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 4px solid white;
        background-color: #e5e7eb;
    }
    .skeleton-text {
        height: 14px;
        border-radius: 4px;
        margin-bottom: 8px;
        width: 60%;
        background-color: #e5e7eb;
    }
    .skeleton-text.h3 { height: 24px; width: 180px; margin-bottom: 12px; }
    .skeleton-text.small { height: 12px; width: 120px; }
    .skeleton-input {
        height: 48px;
        border-radius: 8px;
        width: 100%;
        background-color: #f3f4f6;
    }
    .skeleton-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .animate-fade-in {
        animation: fadeIn 0.4s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/UserReceiptModal.razor
   -------------------------------------------------------------------------- */
    .premium-receipt-wrapper { font-family: var(--sb-font); padding: 5px; background: var(--sb-neutral-50); border-radius: 16px; }
    .loading-state, .error-state { text-align: center; padding: 40px; color: var(--sb-neutral-500); }
    
    .receipt-card { 
        background: white; 
        border-radius: 12px; 
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
        padding: 30px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--sb-neutral-200);
    }

    .receipt-watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
        font-size: 8rem;
        font-weight: 900;
        color: rgba(0,0,0,0.03);
        pointer-events: none;
        text-transform: uppercase;
        z-index: var(--sb-z-base);
        white-space: nowrap;
    }

    .receipt-top-section { display: flex; justify-content: space-between; align-items: flex-start; z-index: var(--sb-z-base); position: relative; }
    .brand-info { display: flex; align-items: center; gap: 12px; }
    .receipt-logo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--sb-neutral-100); }
    .academy-name { display: block; font-weight: 800; font-size: 1.2rem; color: var(--sb-neutral-900); line-height: 1.1; }
    .receipt-label { font-size: 0.7rem; text-transform: uppercase; color: var(--sb-neutral-400); letter-spacing: 1px; font-weight: 600; }
    
    .receipt-meta { text-align: right; }
    .receipt-id { display: block; font-weight: 700; color: #d43b1a; font-size: 0.9rem; }
    .receipt-date { font-size: 0.75rem; color: var(--sb-neutral-500); }

    .receipt-divider { height: 0; border: none; margin: 20px 0; }
    .receipt-divider.dashed { border-top: 2px dashed var(--sb-neutral-100); }

    .receipt-main { margin: 20px 0; z-index: var(--sb-z-base); position: relative; }
    /* Todo acotado al wrapper: `.line-item` (BulkPaymentDialog) y las reglas
       legacy de `.receipt-table` pisaban estos estilos y aplanaban las líneas. */
    .premium-receipt-wrapper .receipt-table { display: table; width: 100%; border-collapse: collapse; margin: 0; }
    .premium-receipt-wrapper .receipt-table th { text-align: left; font-size: 0.65rem; color: var(--sb-neutral-400); padding: 0 0 10px; font-weight: 800; letter-spacing: 1px; }
    .premium-receipt-wrapper .receipt-table th.text-right { text-align: right; }
    .premium-receipt-wrapper .receipt-table td { padding: 14px 0; vertical-align: top; border-top: 1px solid var(--sb-neutral-100); }
    .premium-receipt-wrapper .receipt-table tbody tr:first-child td { border-top: none; }
    /* Cada concepto: título y debajo sus detalles, uno por línea. */
    .premium-receipt-wrapper .line-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; font-size: inherit; color: inherit; }
    .premium-receipt-wrapper .line-title { display: block; font-weight: 700; color: var(--sb-neutral-800); font-size: 0.95rem; line-height: 1.3; }
    .premium-receipt-wrapper .line-detail { display: block; font-size: 0.75rem; color: var(--sb-neutral-500); margin: 0; line-height: 1.35; }
    .premium-receipt-wrapper .line-detail.line-cuota { color: var(--sb-brand); font-weight: 700; }
    .premium-receipt-wrapper .line-price { text-align: right; font-weight: 800; color: var(--sb-neutral-900); font-size: 1rem; white-space: nowrap; width: 1%; padding-left: 16px; }
    .premium-receipt-wrapper .text-right { text-align: right; }

    .premium-receipt-wrapper .receipt-summary { display: flex; flex-direction: column; gap: 8px; background: var(--sb-neutral-50); border-radius: 12px; padding: 16px 20px; margin: 0; }
    .premium-receipt-wrapper .summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--sb-neutral-500); }
    .premium-receipt-wrapper .summary-row.grand-total { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--sb-neutral-200); color: var(--sb-neutral-900); font-size: 1.2rem; font-weight: 900; }

    .payments-log { background: var(--sb-neutral-50); border-radius: 8px; padding: 15px; margin-top: 10px; }
    /* Acotado al modal: `.section-title` también existe en la ficha del alumno
       y en asistencias con otro aspecto. */
    .premium-receipt-wrapper .section-title { font-size: 0.65rem; font-weight: 800; color: var(--sb-neutral-400); display: block; margin-bottom: 10px; }
    .payment-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .p-method { display: block; font-weight: 700; font-size: 0.85rem; color: var(--sb-neutral-800); }
    .p-date { font-size: 0.7rem; color: var(--sb-neutral-500); }
    .p-val { font-weight: 700; color: var(--sb-neutral-800); font-size: 0.9rem; }

    .receipt-footer { margin-top: 30px; text-align: center; }
    .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 16px; border-radius: 99px; font-weight: 800; font-size: 0.7rem; border: 1px solid currentColor; margin-bottom: 15px; }
    .status-badge.pagado { background: var(--sb-green-50); color: #059669; }
    .status-badge.pendiente { background: var(--sb-amber-50); color: var(--sb-amber-600); }
    .footer-msg { font-size: 0.65rem; color: var(--sb-neutral-400); margin-bottom: 20px; max-width: 80%; margin-left: auto; margin-right: auto; }
    
    .decorative-barcode { height: 30px; background-image: repeating-linear-gradient(90deg, var(--sb-neutral-200) 0, var(--sb-neutral-200) 2px, transparent 2px, transparent 5px, var(--sb-neutral-200) 5px, var(--sb-neutral-200) 8px); opacity: 0.5; width: 60%; margin: 0 auto; }

/* ----------------------------------------------------------------------------
   Pages/Usuarios/Users.razor
   -------------------------------------------------------------------------- */
    /* Avatar del usuario en el listado: misma pinta que en pre-inscripciones. */
    .users-avatar {
        flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
        object-fit: cover; background: var(--sb-neutral-100); border: 1px solid var(--sb-neutral-200);
    }
    .users-avatar-initials {
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-600)); border-color: var(--sb-blue-600);
        color: var(--sb-neutral-0); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.5px;
        text-transform: uppercase; user-select: none;
    }
    .users-avatar-cell { display: flex; align-items: center; justify-content: center; }