:root {
    --black: #050505;
    --bg: #070707;
    --panel: #0e0e0e;
    --panel-light: #141414;
    --panel-elevated: #181715;
    --panel-soft: #0b0b0b;
    --border: #262626;
    --border-light: #343434;
    --border-gold: rgba(221, 185, 120, .46);
    --gold: #ddb978;
    --gold-bright: #efd49c;
    --gold-dark: #8c7044;
    --gold-faint: rgba(221, 185, 120, .08);
    --white: #f4f1ea;
    --gray: #918f89;
    --gray-soft: #696863;
    --green: #8fc49a;
    --danger: #d77f7f;
    --danger-border: #6d3838;
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, .58);
    --shadow-md: 0 16px 44px rgba(0, 0, 0, .34);
    --transition: 180ms ease;
}

/* ==========================================
   RESET / BASE
========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    color: var(--white);
    background:
        radial-gradient(circle at 78% -10%, rgba(221,185,120,.07), transparent 32%),
        linear-gradient(180deg, #070707 0%, #050505 100%);
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border-radius: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 2px;
}

::selection {
    color: #080808;
    background: var(--gold);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #444 #0b0b0b;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #0b0b0b;
}

*::-webkit-scrollbar-thumb {
    background: #3a3936;
    border: 2px solid #0b0b0b;
}

.hidden {
    display: none !important;
}

/* ==========================================
   TYPOGRAPHY / BRAND DETAILS
========================================== */
.overline,
.section-label {
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.8px;
    line-height: 1.35;
    text-transform: uppercase;
}

.gold-line {
    width: 72px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright));
}

/* ==========================================
   GLOBAL FORM CONTROLS
========================================== */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea,
#attendanceType,
#attendanceStudentSelect,
#attendanceActivityName,
#attendanceWorkshopSelect,
#planSelect,
#planStartDate {
    width: 100%;
    min-height: 43px;
    padding: 0 13px;
    color: var(--white);
    background: linear-gradient(180deg, #151515, #111);
    border: 1px solid #30302f;
    border-radius: 0;
    outline: 0;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.form-group textarea {
    min-height: 96px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #5f5e5a;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
#attendanceType:hover,
#attendanceStudentSelect:hover,
#attendanceActivityName:hover,
#attendanceWorkshopSelect:hover,
#planSelect:hover,
#planStartDate:hover {
    border-color: #45433f;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
#attendanceType:focus,
#attendanceStudentSelect:focus,
#attendanceActivityName:focus,
#attendanceWorkshopSelect:focus,
#planSelect:focus,
#planStartDate:focus {
    border-color: var(--gold-dark);
    background: #171612;
    box-shadow: 0 0 0 3px rgba(221,185,120,.055);
}

select option {
    color: var(--white);
    background: #141414;
}

/* ==========================================
   BUTTON SYSTEM
========================================== */
.gold-button,
.logout-button,
.danger-button {
    min-height: 41px;
    border-radius: 0;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: transform var(--transition), border-color var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition);
}

.gold-button {
    width: 100%;
    margin-top: 18px;
    padding: 0 18px;
    color: #0a0907;
    background: linear-gradient(135deg, #cba76a 0%, #e2c286 48%, #cfa968 100%);
    border: 1px solid #e2c286;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 9px 24px rgba(221,185,120,.08);
}

.gold-button:hover {
    color: var(--gold-bright);
    background: #11100d;
    border-color: var(--gold);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
    transform: translateY(-1px);
}

.gold-button:disabled {
    opacity: .48;
    cursor: wait;
    transform: none;
}

.logout-button {
    width: 100%;
    height: 39px;
    padding: 0 16px;
    color: #96948e;
    background: #0d0d0d;
    border: 1px solid var(--border-light);
}

.logout-button:hover {
    color: var(--gold-bright);
    background: #12110e;
    border-color: var(--gold-dark);
}

.danger-button {
    min-height: 41px;
    padding: 0 16px;
    color: var(--danger);
    background: #100b0b;
    border: 1px solid var(--danger-border);
}

.danger-button:hover {
    color: #efaaaa;
    background: #201111;
    border-color: #9a4e4e;
}

/* ==========================================
   LOGIN
========================================== */
.login-view {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 8%, rgba(221,185,120,.065), transparent 30%),
        #050505;
}

.login-panel {
    position: relative;
    width: min(480px, calc(100vw - 28px));
    height: min(690px, calc(100dvh - 24px));
    padding: 24px 36px 20px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #111 0%, #0d0d0d 100%);
    border: 1px solid #30302e;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.025);
}

.login-panel::before {
    content: "";
    position: absolute;
    inset: -1px auto auto -1px;
    width: 86px;
    height: 1px;
    background: var(--gold);
}

.login-brand {
    text-align: center;
}

.login-logo {
    display: block;
    width: 195px;
    max-width: 78%;
    max-height: 82px;
    object-fit: contain;
    margin: 0 auto 26px;
}

.login-brand h1 {
    margin: 50px 0 0;
    color: var(--white);
    font-size: 34px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 1px;
}

.login-brand .gold-line {
    width: 74px;
    margin: 18px auto;
}

.login-subtitle {
    color: var(--gray);
    font-size: 12px;
    line-height: 1.5;
}

.login-form {
    width: 100%;
    margin-top: 92px;
}

.login-form .gold-button {
    width: 100%;
}

.login-message {
    min-height: 18px;
    margin-bottom: 3px;
    color: #d88484;
    font-size: 10px;
}

.login-partners {
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.partners-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
}

.partner-logo {
    display: block;
    object-fit: contain;
    opacity: .92;
}

.mqr-logo {
    width: 78px;
    height: 62px;
}

.emuna-logo {
    width: 105px;
    height: 59px;
}

.partner-divider {
    width: 1px;
    height: 39px;
    background: #343434;
}

/* ==========================================
   APP LAYOUT
========================================== */
.dashboard-view {
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    overflow: hidden;
}

.sidebar {
    position: relative;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 18px 15px 16px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(221,185,120,.025), transparent 25%),
        #0a0a0a;
    border-right: 1px solid #242424;
    box-shadow: 16px 0 44px rgba(0,0,0,.16);
}

.sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 120px;
    background: linear-gradient(180deg, var(--gold-dark), transparent);
}

.sidebar-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.sidebar-logo {
    width: 150px;
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

.sidebar-title {
    padding-bottom: 14px;
    text-align: center;
    border-bottom: 1px solid #242424;
}

/* El logo ya comunica la marca; evitamos repetir “Mambo Magic”. */
.sidebar-title span {
    display: none;
}

.sidebar-title small {
    display: block;
    color: var(--gold);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 3px;
}

.sidebar-nav {
    display: grid;
    gap: 3px;
    margin-top: 16px;
}

.nav-item {
    position: relative;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    color: #898781;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.6px;
    transition: color var(--transition), background var(--transition), border-color var(--transition), padding var(--transition);
}

.nav-item::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    background: transparent;
}

.nav-item:hover {
    padding-left: 16px;
    color: var(--white);
    background: #0f0f0f;
    border-color: #202020;
}

.nav-item.active {
    padding-left: 16px;
    color: var(--gold-bright);
    background: linear-gradient(90deg, rgba(221,185,120,.07), rgba(221,185,120,.018));
    border-color: #292721;
}

.nav-item.active::before {
    background: var(--gold);
    box-shadow: 0 0 12px rgba(221,185,120,.18);
}

.sidebar-partners {
    margin-top: auto;
    margin-bottom: 10px;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-top: 1px solid #242424;
}

.sidebar-mqr {
    width: 56px;
    height: 44px;
    object-fit: contain;
    opacity: .8;
}

.sidebar-emuna {
    width: 66px;
    height: 43px;
    object-fit: contain;
    opacity: .8;
}

.sidebar-divider {
    width: 1px;
    height: 27px;
    background: #303030;
}

.sidebar > .logout-button {
    flex-shrink: 0;
}

.admin-main {
    min-width: 0;
    height: 100dvh;
    padding: 22px 34px 28px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 72% 0%, rgba(221,185,120,.028), transparent 28%),
        linear-gradient(180deg, #080808 0%, #060606 100%);
}

/* ==========================================
   TOP HEADER
========================================== */
.admin-header {
    min-height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.admin-header h1 {
    margin-top: 7px;
    font-size: clamp(23px, 2.25vw, 32px);
    font-weight: 850;
    letter-spacing: .5px;
    line-height: 1.05;
}

.header-line {
    width: 72px;
    margin: 12px 0 0;
}

.admin-user {
    padding: 6px 0 6px 16px;
    text-align: right;
    border-left: 1px solid #242424;
}

.admin-user strong,
.admin-user span {
    display: block;
}

.admin-user strong {
    color: #dedbd4;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .4px;
}

.admin-user span {
    margin-top: 4px;
    color: #6f6e69;
    font-size: 9px;
}

/* ==========================================
   SHARED PANELS / SECTION CARDS
========================================== */
.welcome-section {
    position: relative;
    margin-top: 20px;
    padding: 21px 24px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(221,185,120,.035), transparent 34%),
        linear-gradient(180deg, #111 0%, #0d0d0d 100%);
    border: 1px solid #282828;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018), var(--shadow-md);
}

.welcome-section::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 76px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.welcome-section h2 {
    margin: 7px 0 6px;
    font-size: clamp(23px, 2.25vw, 30px);
    font-weight: 850;
    letter-spacing: -.2px;
    line-height: 1.06;
}

.welcome-section h2 span {
    color: var(--gold-bright);
}

.welcome-section > p:last-child {
    max-width: 760px;
    color: var(--gray);
    font-size: 11px;
    line-height: 1.5;
}

.quick-section {
    margin-top: 20px;
}

.section-heading {
    margin-bottom: 12px;
}

.section-heading h2 {
    margin-top: 6px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.1px;
}

/* ==========================================
   DASHBOARD STATS
========================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.stat-card {
    position: relative;
    min-height: 104px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: linear-gradient(180deg, #111, #0d0d0d);
    border: 1px solid #262626;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.014);
    transition: border-color var(--transition), transform var(--transition), background var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: #3b3529;
    background: linear-gradient(180deg, #13120f, #0d0d0d);
}

.stat-title {
    color: var(--gold);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 2.2px;
}

.stat-card strong {
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -.8px;
}

.stat-card p {
    color: #73716c;
    font-size: 9px;
    letter-spacing: .8px;
}

.status-online {
    color: var(--green);
    font-size: 11px !important;
    letter-spacing: 2px;
}

.status-online::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    vertical-align: 1px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(143,196,154,.35);
}

/* ==========================================
   QUICK ACTIONS
========================================== */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.quick-card {
    position: relative;
    min-height: 82px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
    background: #101010;
    border: 1px solid #282828;
    cursor: pointer;
    text-align: left;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.quick-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(221,185,120,.055), #101010 45%);
    border-color: var(--gold-dark);
    box-shadow: var(--shadow-md);
}

.quick-card > span {
    min-width: 34px;
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.quick-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 2px;
}

.quick-card p {
    color: var(--gray);
    font-size: 9px;
    line-height: 1.4;
}

/* ==========================================
   GLOBAL MESSAGES
========================================== */
#studentsMessage,
#plansMessage,
#attendanceMessage,
#workshopsMessage,
#attendanceSelectedInfo {
    min-height: 18px;
    margin-top: 10px;
    color: #b8b4aa;
    font-size: 9px;
    line-height: 1.4;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-height: 760px) {
    .login-panel {
        height: calc(100dvh - 18px);
        padding: 14px 34px 12px;
    }

    .login-logo {
        width: 165px;
        max-height: 60px;
        margin-bottom: 12px;
    }

    .login-brand h1 {
        margin-top: 28px;
        font-size: 22px;
    }

    .login-brand .gold-line {
        margin: 14px auto 13px;
    }

    .login-subtitle {
        font-size: 10px;
    }

    .login-form {
        margin-top: 56px;
    }

    .form-group {
        margin-bottom: 12px;
    }

    .form-group input,
    .form-group select {
        min-height: 42px;
    }

    .login-form .gold-button {
        min-height: 43px;
        margin-top: 17px;
    }

    .login-partners {
        padding-top: 9px;
    }

    .mqr-logo {
        width: 66px;
        height: 49px;
    }

    .emuna-logo {
        width: 90px;
        height: 47px;
    }

    .partner-divider {
        height: 27px;
    }
}

@media (max-width: 1050px) {
    .dashboard-view {
        grid-template-columns: 204px minmax(0, 1fr);
    }

    .admin-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 750px) {
    html,
    body {
        height: auto;
        overflow: auto;
    }

    .login-view {
        min-height: 100vh;
        height: auto;
        overflow: visible;
    }

    .login-panel {
        width: 100%;
        height: auto;
        padding: 28px 23px 22px;
    }

    .login-brand h1 {
        margin-top: 30px;
    }

    .login-form {
        margin-top: 60px;
    }

    .login-partners {
        margin-top: 32px;
    }

    .dashboard-view {
        display: block;
        height: auto;
        overflow: visible;
    }

    .sidebar {
        height: auto;
        padding: 16px;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .sidebar-logo-box,
    .sidebar-title,
    .sidebar-partners {
        display: none;
    }

    .sidebar-nav {
        margin-top: 0;
        display: flex;
        gap: 6px;
        overflow-x: auto;
    }

    .nav-item,
    .nav-item:hover,
    .nav-item.active {
        flex: 0 0 auto;
        min-width: 120px;
        padding: 0 12px;
        text-align: center;
    }

    .nav-item::before {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: -1px;
        width: auto;
        height: 2px;
    }

    .sidebar > .logout-button {
        display: none;
    }

    .admin-main {
        height: auto;
        padding: 28px 18px 50px;
        overflow: visible;
    }

    .admin-header {
        display: block;
    }

    .admin-user {
        margin-top: 18px;
        padding: 12px 0 0;
        text-align: left;
        border-left: 0;
        border-top: 1px solid #222;
    }

    .welcome-section {
        margin-top: 26px;
        padding: 25px 22px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   ANALYTICS / CAJA / TARIFAS
========================================== */
.analytics-section {
    margin-top: 12px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(20,20,20,.94), rgba(11,11,11,.96));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.analytics-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.analytics-header h2 {
    margin-top: 3px;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: .2px;
}

.analytics-header p:not(.section-label) {
    margin-top: 4px;
    color: var(--gray);
    font-size: 11px;
}

.analytics-controls {
    display: grid;
    grid-template-columns: 88px 138px auto auto;
    gap: 7px;
    align-items: center;
}

.analytics-controls select,
.analytics-controls input {
    height: 36px;
    padding: 0 9px;
    color: var(--white);
    background: #111;
    border: 1px solid #343434;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.analytics-button {
    width: auto;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
}

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.analytics-kpi {
    min-width: 0;
    padding: 11px 12px;
    background: #0b0b0b;
    border: 1px solid #292929;
    border-top-color: rgba(221,185,120,.42);
}

.analytics-kpi > span {
    display: block;
    color: var(--gold);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.analytics-kpi strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--white);
    font-size: 21px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-kpi small {
    display: block;
    margin-top: 4px;
    color: var(--gray-soft);
    font-size: 9px;
}

.analytics-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.analytics-panel {
    min-width: 0;
    max-height: 172px;
    padding: 10px;
    overflow: auto;
    background: #090909;
    border: 1px solid #262626;
}

.analytics-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #202020;
}

.analytics-panel-heading span,
.pricing-heading,
.ledger-columns h3,
.ledger-attendance-section h3 {
    color: var(--gold);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.analytics-panel-heading small {
    color: var(--gray-soft);
    font-size: 8px;
}

.analytics-list,
.ledger-list {
    display: grid;
    gap: 2px;
    margin-top: 5px;
}

.analytics-row,
.ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: center;
    padding: 6px 3px;
    border-bottom: 1px solid #1d1d1d;
}

.analytics-row span,
.ledger-row span {
    min-width: 0;
    overflow: hidden;
    color: #d6d2c8;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-row strong,
.ledger-row > strong,
.ledger-money-row > b {
    color: var(--white);
    font-size: 11px;
}

.analytics-row small,
.ledger-row small {
    grid-column: 1 / -1;
    color: var(--gray-soft);
    font-size: 8px;
}

.analytics-empty {
    padding: 10px 2px;
    color: var(--gray-soft);
    font-size: 9px;
    line-height: 1.45;
}

.analytics-message {
    min-height: 14px;
    margin-top: 7px;
    color: var(--gold-bright);
    font-size: 9px;
}

.payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.payment-grid .form-group {
    min-width: 0;
}

.analytics-dialog-card {
    width: min(980px, calc(100vw - 28px));
    max-height: min(88vh, 820px);
    overflow: auto;
}

.ledger-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.ledger-summary > div {
    padding: 10px;
    background: #0b0b0b;
    border: 1px solid #292929;
}

.ledger-summary span {
    display: block;
    color: var(--gold);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.ledger-summary strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
}

.ledger-columns {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 12px;
}

.ledger-columns > section,
.ledger-attendance-section {
    padding: 11px;
    background: #0a0a0a;
    border: 1px solid #262626;
}

.ledger-attendance-section {
    margin-top: 12px;
}

.ledger-money-row,
.ledger-attendance-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 2px;
}

.ledger-money-row > div,
.ledger-attendance-row > div:first-child {
    min-width: 0;
}

.ledger-money-row > div > strong,
.ledger-attendance-row > div:first-child > strong {
    display: block;
    color: var(--white);
    font-size: 10px;
}

.ledger-money-row > div > span,
.ledger-attendance-row > div:first-child > span {
    display: block;
    margin-top: 2px;
}

.ledger-money-row > div > small,
.ledger-attendance-row > div:first-child > small {
    display: block;
    margin-top: 2px;
}

.ledger-attendance-payment {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.ledger-attendance-payment b {
    color: var(--gold-bright);
    font-size: 11px;
}

.ledger-attendance-payment small {
    grid-column: auto;
}

.ledger-plan-covered {
    padding: 3px 6px;
    color: var(--green) !important;
    background: rgba(143,196,154,.06);
    border: 1px solid rgba(143,196,154,.22);
    font-size: 7px !important;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.pricing-explainer {
    margin: 8px 0 14px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.5;
}

.pricing-heading {
    margin: 14px 0 6px;
}

.pricing-list {
    display: grid;
    gap: 6px;
}

.pricing-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 12px;
    padding: 7px 9px;
    background: #0b0b0b;
    border: 1px solid #272727;
}

.pricing-name {
    color: var(--white);
    font-size: 10px;
}

.pricing-row small {
    display: block;
    margin-top: 2px;
    color: var(--gray-soft);
    font-size: 8px;
}

.pricing-money-field {
    position: relative;
    display: block;
    width: 100%;
}

.pricing-currency {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    pointer-events: none;
}

.pricing-money-field input {
    width: 100%;
    min-height: 36px;
    padding: 0 12px 0 30px;
    color: var(--white);
    background: #111;
    border: 1px solid #343434;
    text-align: right;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield;
}

.pricing-money-field input:focus {
    border-color: var(--gold-dark);
    outline: none;
    box-shadow: 0 0 0 1px rgba(200,169,107,.12);
}

.pricing-money-field input::-webkit-outer-spin-button,
.pricing-money-field input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.pricing-single-row {
    margin-bottom: 2px;
}

@media (max-width: 1180px) {
    .analytics-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .analytics-header {
        align-items: stretch;
        flex-direction: column;
    }

    .analytics-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-summary-grid,
    .ledger-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-detail-grid,
    .ledger-columns,
    .payment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .analytics-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .analytics-controls {
        grid-template-columns: 1fr;
    }

    .analytics-button {
        width: 100%;
    }

    .pricing-row {
        grid-template-columns: 1fr;
    }
}

.stat-card-clickable {
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.stat-card-clickable:hover,
.stat-card-clickable:focus-visible {
    border-color: var(--gold-dark);
    background: #13120f;
    transform: translateY(-1px);
}

.analytics-subheading {
    margin: 9px 0 3px;
    padding-top: 7px;
    color: var(--gold-dark);
    border-top: 1px solid #242424;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
}


/* ==========================================
   PREMIUM COMPACT · HISTORIALES / DIALOGS
========================================== */

/* El diálogo genérico mide 520px. Analytics necesita un contenedor
   realmente ancho; aplicarlo al <dialog> evita que el contenido se
   corte hacia la izquierda dentro de overflow:hidden. */
.admin-dialog.analytics-dialog {
    width: min(980px, calc(100vw - 32px));
    max-width: min(980px, calc(100vw - 32px));
    max-height: calc(100dvh - 28px);
}

.admin-dialog.analytics-dialog .analytics-dialog-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.attendance-history-controls {
    display: grid;
    grid-template-columns: 170px minmax(190px, 260px);
    gap: 10px;
    align-items: center;
    margin: 4px 0 14px;
}

.attendance-history-controls select,
.attendance-history-controls input {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    color: #dedbd3;
    background: #0a0a0a;
    border: 1px solid #302f2c;
    outline: none;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.attendance-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attendance-history-section {
    margin-top: 0;
}

@media (max-width: 750px) {
    .admin-dialog.analytics-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
    }

    .attendance-history-controls {
        grid-template-columns: 1fr;
    }

    .attendance-history-summary {
        grid-template-columns: 1fr 1fr;
    }
}

.attendance-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 3px;
}

.attendance-history-row > div strong,
.attendance-history-row > div small {
    display: block;
}

.attendance-history-row > div strong {
    color: var(--white);
    font-size: 10px;
}

.attendance-history-row > div small {
    margin-top: 3px;
    color: var(--gray-soft);
    font-size: 8px;
}

.attendance-history-row > b {
    color: var(--gold-bright);
    font-size: 15px;
}


/* ==========================================
   WORKSHOPS · PRECIO + SELECTOR DE HORA
   ========================================== */

.workshop-money-field {
    width: 100%;
}

.workshop-time-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    width: 100%;
}

.workshop-time-field input[type="time"] {
    width: 100%;
    min-width: 0;
}

.workshop-time-field input[type="time"]::-webkit-calendar-picker-indicator {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.workshop-time-picker-button {
    display: grid;
    place-items: center;
    min-width: 52px;
    min-height: 46px;
    padding: 0;
    color: var(--gold);
    background: #111;
    border: 1px solid #3a3327;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.workshop-time-picker-button:hover,
.workshop-time-picker-button:focus-visible {
    background: #17140f;
    border-color: var(--gold-dark);
    outline: none;
}

.workshop-time-picker-button:active {
    transform: translateY(1px);
}

.workshop-time-picker-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 760px) {
    .workshop-time-field {
        grid-template-columns: minmax(0, 1fr) 48px;
    }

    .workshop-time-picker-button {
        min-width: 48px;
        min-height: 44px;
    }
}

/* ==========================================================
   CLASE ACTIVA / SESIÓN EN VIVO
   ========================================================== */

.class-session-console {
    margin-bottom: 18px;
    padding: 20px 24px;
    border: 1px solid rgba(212, 176, 106, 0.22);
    background:
        linear-gradient(135deg, rgba(212, 176, 106, 0.045), rgba(255,255,255,0.01)),
        #0d0d0d;
}

.class-session-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.class-session-heading h2 {
    margin: 4px 0 5px;
}

.class-session-heading p:last-child {
    margin-bottom: 0;
}

.class-session-live-badge {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(115, 199, 139, 0.35);
    color: #91d6a5;
    background: rgba(115, 199, 139, 0.07);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.class-session-start-area,
.class-session-active-area {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-top: 18px;
}

.class-session-select-group {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.class-session-main-button {
    flex: 0 0 190px;
    height: 43px;
    min-height: 43px;
    padding: 0 24px;
    margin-top: 0;
    align-self: flex-end;
}

.class-session-active-area {
    align-items: stretch;
}

.class-session-stat {
    flex: 1 1 0;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid #282828;
    background: #0a0a0a;
}

.class-session-stat span {
    display: block;
    margin-bottom: 8px;
    color: #c8a96b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.class-session-stat strong {
    color: #f5f1ea;
    font-size: 24px;
}

.class-session-message {
    min-height: 18px;
    margin: 12px 0 0;
    color: #b8b0a4;
    font-size: 12px;
}

#attendanceActivityName.is-session-locked {
    border-color: rgba(212, 176, 106, 0.45);
    color: #d9bf86;
    opacity: 1;
    cursor: not-allowed;
}

/* ==========================================================
   CLASE ACTIVA - CONTROL HEIGHT SYNC v11.3
   Fuerza exactamente la misma altura visual entre el select
   de clase y los botones de la sesión en vivo.
   ========================================================== */
.class-session-start-area .class-session-select-group select,
.class-session-start-area .class-session-main-button,
.class-session-active-area .class-session-main-button {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: 1 !important;
}

/* ==========================================================
   CLASES SIMULTÁNEAS / SESIONES EN VIVO v12
   ========================================================== */
.class-session-active-area {
    display: block;
    margin-top: 16px;
}

.class-session-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.class-session-card {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #282828;
    background: #090909;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.class-session-card.is-selected {
    border-color: rgba(212, 176, 106, 0.62);
    background: linear-gradient(135deg, rgba(212, 176, 106, 0.07), rgba(255,255,255,0.01)), #0a0a0a;
    box-shadow: inset 3px 0 0 rgba(212, 176, 106, 0.8);
}

.class-session-card-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.class-session-card-main > div {
    min-width: 0;
}

.class-session-card-main strong {
    display: block;
    color: #f5f1ea;
    font-size: 15px;
    line-height: 1.25;
}

.class-session-card-main span:not(.class-session-card-status) {
    display: block;
    margin-top: 4px;
    color: #817d77;
    font-size: 10px;
}

.class-session-card-status {
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 1px solid rgba(115, 199, 139, 0.28);
    color: #91d6a5;
    background: rgba(115, 199, 139, 0.05);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.class-session-card-stats {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #202020;
    color: #8c8881;
    font-size: 10px;
}

.class-session-card-stats strong {
    margin-right: 3px;
    color: #d9bf86;
    font-size: 13px;
}

.class-session-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 8px;
    margin-top: 12px;
}

.class-session-select-button,
.class-session-finish-button {
    height: 36px;
    border: 1px solid #343434;
    background: transparent;
    color: #aaa59e;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    cursor: pointer;
}

.class-session-select-button:hover,
.class-session-select-button.is-selected {
    border-color: rgba(212, 176, 106, 0.58);
    color: #d9bf86;
    background: rgba(212, 176, 106, 0.06);
}

.class-session-finish-button:hover {
    border-color: rgba(210, 110, 110, 0.4);
    color: #dca1a1;
}

.class-session-select-button:disabled,
.class-session-finish-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* ==========================================================
   WORKSHOP · CLASE EN VIVO v13
   ========================================================== */
.workshop-live-class-section {
    margin-top: 16px;
}

.workshop-live-class-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.workshop-live-class-heading h2 {
    margin: 2px 0 6px;
}

.workshop-live-class-heading p:last-child {
    margin-bottom: 0;
}

.workshop-live-badge {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(115, 199, 139, 0.28);
    color: #91d6a5;
    background: rgba(115, 199, 139, 0.05);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.workshop-live-class-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.workshop-live-class-stats article {
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid #292929;
    background: #0a0a0a;
}

.workshop-live-class-stats span,
.workshop-live-class-stats strong {
    display: block;
}

.workshop-live-class-stats span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.workshop-live-class-stats strong {
    margin-top: 7px;
    color: var(--white);
    font-size: 24px;
    line-height: 1;
}

.workshop-live-class-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.workshop-live-class-actions .workshop-action-button {
    margin-top: 0;
}

#workshopLiveClassMessage {
    min-height: 18px;
    margin: 10px 0 0;
}

.attendance-money-field {
    width: 100%;
}

/* ==========================================================
   QR POR SESIÓN ACTIVA v14
   ========================================================== */

.class-session-card-actions {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 0.42fr) minmax(0, 0.72fr);
}

.class-session-qr-button {
    height: 36px;
    border: 1px solid rgba(212, 176, 106, 0.42);
    background: rgba(212, 176, 106, 0.04);
    color: #d9bf86;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    cursor: pointer;
}

.class-session-qr-button:hover {
    border-color: rgba(212, 176, 106, 0.72);
    background: rgba(212, 176, 106, 0.09);
}

.session-qr-card {
    width: min(920px, calc(100vw - 40px));
}

.session-qr-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 18px;
}

.session-qr-visual {
    min-height: 330px;
    display: grid;
    place-items: center;
    padding: 20px;
    border: 1px solid #2b2b2b;
    background: #f7f5ef;
    color: #111;
}

.session-qr-visual svg {
    display: block;
    width: min(100%, 330px);
    height: auto;
}

.session-qr-settings {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.session-qr-link-box {
    padding: 14px;
    border: 1px solid #292929;
    background: #0a0a0a;
}

.session-qr-link-box span {
    display: block;
    margin-bottom: 8px;
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.session-qr-link-box code {
    display: block;
    max-height: 92px;
    overflow: auto;
    color: #c8c3ba;
    font-family: Consolas, monospace;
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: normal;
}

.session-qr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.session-qr-actions .gold-button,
.session-qr-actions .logout-button {
    width: 100%;
    margin-top: 0;
}

#sessionQrMessage {
    min-height: 18px;
    margin: 12px 0 0;
}


/* ==========================================
   QR SESIONES · POPUP CORREGIDO v14.1
   ========================================== */
.admin-dialog.session-qr-dialog {
    width: min(940px, calc(100vw - 40px));
    max-width: min(940px, calc(100vw - 40px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
}

.admin-dialog.session-qr-dialog .session-qr-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 28px;
    overflow: visible;
    box-sizing: border-box;
}

.admin-dialog.session-qr-dialog .admin-dialog-header,
.admin-dialog.session-qr-dialog .session-qr-layout,
.admin-dialog.session-qr-dialog .session-qr-settings,
.admin-dialog.session-qr-dialog .form-group,
.admin-dialog.session-qr-dialog .session-qr-link-box,
.admin-dialog.session-qr-dialog .session-qr-actions {
    min-width: 0;
    max-width: 100%;
}

.admin-dialog.session-qr-dialog .session-qr-layout {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
}

.admin-dialog.session-qr-dialog #sessionQrBaseUrl {
    width: 100%;
    min-width: 0;
}

.admin-dialog.session-qr-dialog .session-qr-link-box code {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 820px) {
    .admin-dialog.session-qr-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .admin-dialog.session-qr-dialog .session-qr-card {
        padding: 18px 14px;
    }

    .admin-dialog.session-qr-dialog .session-qr-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .admin-dialog.session-qr-dialog .session-qr-visual {
        min-height: 260px;
    }

    .admin-dialog.session-qr-dialog .session-qr-actions {
        grid-template-columns: 1fr;
    }
}