/* ════════════════════════════════════════════════════
     THE STAGE DOOR — Bootstrap Theme
     DNA source: login page
  ════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────
     1. TOKEN SYSTEM
  ────────────────────────────────────────────────── */
:root {
    /* Core palette — from login */
    --sd-black: #080808;
    --sd-curtain: #0f0f0f;
    --sd-deep: #141414;
    --sd-card: #1a1a1a;
    --sd-surface: #222222;
    --sd-raised: #2a2a2a;
    --sd-gold: #c9a84c;
    --sd-gold-light: #dfc072;
    --sd-gold-dim: #a88840;
    --sd-gold-text: #e8c96a;
    --sd-gold-glow: rgba(201,168,76,0.22);
    --sd-gold-border: rgba(201,168,76,0.25);
    --sd-gold-subtle: rgba(201,168,76,0.18);
    --sd-gold-focus: rgba(201,168,76,0.55);
    --sd-gold-ring: rgba(201,168,76,0.12);
    --sd-crimson: #8b1a1a;
    --sd-crimson-lt: #a32020;
    --sd-crimson-dk: #6a1212;
    --sd-sage: #3a5c4e;
    --sd-sage-lt: #4a7260;
    --sd-sage-dk: #2c4438;
    --sd-slate: #2e3d5c;
    --sd-slate-lt: #3a4d74;
    --sd-slate-dk: #22304a;
    --sd-amber: #b86a1a;
    --sd-amber-lt: #d07e28;
    --sd-amber-dk: #8a4e12;
    --sd-cream: #f5f0e8;
    --sd-cream-dim: rgba(245,240,232,0.65);
    --sd-cream-faint: rgba(245,240,232,0.45);
    --sd-cream-ghost: rgba(245,240,232,0.28);
    --sd-inset: inset 0 1px 0 rgba(201,168,76,0.15);
    --sd-glow: 0 0 0 3px var(--sd-gold-ring);
    /* Bootstrap semantic mapping */
    --bs-body-bg: var(--sd-curtain);
    --bs-body-color: var(--sd-cream);
    --bs-body-font-family: 'Jost', sans-serif;
    --bs-body-font-weight: 300;
    --bs-border-color: var(--sd-gold-subtle);
    --bs-border-radius: 5px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 7px;
    --bs-border-radius-xl: 10px;
    --bs-border-radius-pill: 50rem;
    --bs-primary: var(--sd-gold);
    --bs-primary-rgb: 201,168,76;
    --bs-secondary: var(--sd-surface);
    --bs-secondary-rgb: 34,34,34;
    --bs-success: var(--sd-sage);
    --bs-success-rgb: 58,92,78;
    --bs-danger: var(--sd-crimson);
    --bs-danger-rgb: 139,26,26;
    --bs-warning: var(--sd-amber);
    --bs-warning-rgb: 184,106,26;
    --bs-info: var(--sd-slate);
    --bs-info-rgb: 46,61,92;
    --bs-light: var(--sd-surface);
    --bs-dark: var(--sd-black);
    --bs-link-color: var(--sd-gold-text);
    --bs-link-hover-color: var(--sd-gold-light);
    --bs-card-bg: var(--sd-card);
    --bs-card-border-color: var(--sd-gold-border);
}

/* ──────────────────────────────────────────────────
     2. BASE & BACKGROUND — login DNA
  ────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--sd-curtain);
    color: var(--sd-cream);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    /* Sticky footer — direct child grows */
    body > div.container,
    body > div.container-fluid {
        flex: 1;
    }

    /* Curtain texture — vertical stripe from login */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: repeating-linear-gradient( 90deg, transparent 0px, transparent 28px, rgba(0,0,0,0.18) 28px, rgba(0,0,0,0.18) 30px ), linear-gradient(180deg, #1e1e1e 0%, #111111 40%, #080808 100%);
        pointer-events: none;
        z-index: 0;
    }

    /* Spotlight from above — exactly as login */
    body::after {
        content: '';
        position: fixed;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        width: 900px;
        height: 900px;
        background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.18) 0%, transparent 65%);
        pointer-events: none;
        z-index: 1;
    }

/* All content above background layers */
.navbar, main, header, footer,
.page-content, .container, .container-fluid {
    position: relative;
    z-index: 2;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Playfair Display', serif;
    color: var(--sd-cream);
    font-weight: 700;
}

a {
    color: var(--sd-gold-text);
    text-decoration: none;
    transition: color .2s;
}

    a:hover {
        color: var(--sd-gold-light);
    }

hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sd-gold), transparent);
    opacity: .3;
    margin: 2rem 0;
}

/* ──────────────────────────────────────────────────
     3. NAVBAR — login card border language
  ────────────────────────────────────────────────── */
.navbar {
    background: linear-gradient(180deg, #242424 0%, #181818 100%) !important;
    border-bottom: 1px solid var(--sd-gold-border);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.07), 0 4px 32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(201,168,76,0.12);
    padding: 0.6rem 0;
    position: relative;
    z-index: 100;
}

    /* Gold shimmer line — same as login card inset */
    .navbar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--sd-gold) 30%, var(--sd-gold-light) 50%, var(--sd-gold) 70%, transparent 100%);
        opacity: .75;
    }

    /* Corner flourishes — login card language */
    .navbar::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201,168,76,0.15), transparent);
    }

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: var(--sd-gold) !important;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 12px rgba(201,168,76,0.25);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .navbar-brand svg {
        filter: drop-shadow(0 0 5px rgba(201,168,76,0.45));
    }

.nav-link {
    color: var(--sd-cream-faint) !important;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.55rem 1rem !important;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    border-radius: 0 !important;
    white-space: nowrap;
}

    .nav-link:hover,
    .nav-link.active {
        color: var(--sd-gold) !important;
        border-bottom-color: var(--sd-gold);
    }

.navbar-toggler {
    border: 1px solid var(--sd-gold-subtle) !important;
    border-radius: 5px !important;
    padding: .35rem .6rem;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(201,168,76,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.dropdown-menu {
    background: var(--sd-card);
    border: 1px solid var(--sd-gold-border);
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.05), 0 16px 48px rgba(0,0,0,0.7), inset 0 1px 0 rgba(201,168,76,0.1);
    padding: .4rem 0;
}

.dropdown-item {
    color: var(--sd-cream-faint);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    padding: .45rem 1.1rem;
    transition: background .15s, color .15s;
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: rgba(201,168,76,0.08);
        color: var(--sd-gold);
    }

.dropdown-divider {
    border-color: var(--sd-gold-subtle);
}

.dropdown-header {
    color: var(--sd-gold);
    font-size: 0.65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
}

/* ──────────────────────────────────────────────────
     4. CARDS — login card DNA
  ────────────────────────────────────────────────── */
.card {
    background: linear-gradient(160deg, var(--sd-card) 0%, var(--sd-deep) 100%);
    border: 1px solid var(--sd-gold-border);
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.07), 0 8px 40px rgba(0,0,0,0.6), var(--sd-inset);
    position: relative;
    overflow: hidden;
}

    /* Corner flourishes — exactly like login card */
    .card .card-corner {
        position: absolute;
        width: 18px;
        height: 18px;
        border-color: rgba(201,168,76,0.3);
        border-style: solid;
        pointer-events: none;
    }

        .card .card-corner.tl {
            top: 0;
            left: 0;
            border-width: 2px 0 0 2px;
        }

        .card .card-corner.tr {
            top: 0;
            right: 0;
            border-width: 2px 2px 0 0;
        }

        .card .card-corner.bl {
            bottom: 0;
            left: 0;
            border-width: 0 0 2px 2px;
        }

        .card .card-corner.br {
            bottom: 0;
            right: 0;
            border-width: 0 2px 2px 0;
        }

.card-header {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--sd-gold-subtle);
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    color: var(--sd-gold);
    padding: 0.8rem 1.25rem;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 8px rgba(201,168,76,0.2);
}

.card-footer {
    background: rgba(0,0,0,0.25);
    border-top: 1px solid var(--sd-gold-subtle);
    color: var(--sd-cream-ghost);
    font-size: 0.8rem;
}

.card-title {
    font-family: 'Playfair Display', serif;
    color: var(--sd-gold);
    text-shadow: 0 1px 8px rgba(201,168,76,0.15);
}

.card-subtitle {
    color: var(--sd-cream-faint);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.card-text {
    color: var(--sd-cream-dim);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ──────────────────────────────────────────────────
     5. BUTTONS
  ────────────────────────────────────────────────── */
.btn {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 0.55rem 1.3rem;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    border: 1px solid transparent;
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

    .btn:focus-visible {
        box-shadow: var(--sd-glow) !important;
        outline: none;
    }

/* Primary — Gold — login button DNA */
.btn-primary {
    background: linear-gradient(135deg, #b8922a 0%, #d4a93a 50%, #b8922a 100%);
    border-color: rgba(201,168,76,0.4);
    color: #1a0e0e;
    box-shadow: 0 4px 20px rgba(201,168,76,0.2);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #c89e30 0%, #e0b840 50%, #c89e30 100%);
        color: #1a0e0e;
        box-shadow: 0 6px 28px rgba(201,168,76,0.35);
    }

.btn-secondary {
    background: var(--sd-surface);
    border-color: var(--sd-gold-subtle);
    color: var(--sd-cream-dim);
}

    .btn-secondary:hover {
        background: var(--sd-raised);
        color: var(--sd-cream);
        border-color: var(--sd-gold-border);
    }

.btn-danger {
    background: var(--sd-crimson);
    border-color: rgba(139,26,26,0.6);
    color: var(--sd-cream);
    box-shadow: 0 4px 16px rgba(139,26,26,0.3);
}

    .btn-danger:hover {
        background: var(--sd-crimson-lt);
        color: var(--sd-cream);
        box-shadow: 0 6px 22px rgba(139,26,26,0.45);
    }

.btn-success {
    background: var(--sd-sage);
    border-color: rgba(58,92,78,0.5);
    color: var(--sd-cream);
    box-shadow: 0 4px 16px rgba(58,92,78,0.25);
}

    .btn-success:hover {
        background: var(--sd-sage-lt);
        color: var(--sd-cream);
    }

.btn-warning {
    background: var(--sd-amber);
    border-color: rgba(184,106,26,0.5);
    color: var(--sd-cream);
}

    .btn-warning:hover {
        background: var(--sd-amber-lt);
        color: var(--sd-cream);
    }

.btn-info {
    background: var(--sd-slate);
    border-color: rgba(46,61,92,0.5);
    color: var(--sd-cream);
}

    .btn-info:hover {
        background: var(--sd-slate-lt);
        color: var(--sd-cream);
    }

.btn-light {
    background: var(--sd-surface);
    border-color: var(--sd-gold-border);
    color: var(--sd-cream-dim);
}

    .btn-light:hover {
        background: var(--sd-raised);
        color: var(--sd-gold);
        border-color: var(--sd-gold);
    }

.btn-dark {
    background: var(--sd-black);
    border-color: var(--sd-gold-subtle);
    color: var(--sd-cream-dim);
}

    .btn-dark:hover {
        background: #141414;
        color: var(--sd-cream);
    }

.btn-outline-primary {
    color: var(--sd-gold);
    border-color: rgba(201,168,76,0.4);
    background: transparent;
}

    .btn-outline-primary:hover {
        background: rgba(201,168,76,0.1);
        color: var(--sd-gold-light);
        border-color: var(--sd-gold);
    }

.btn-outline-secondary {
    color: var(--sd-cream-faint);
    border-color: var(--sd-gold-subtle);
    background: transparent;
}

    .btn-outline-secondary:hover {
        background: rgba(245,240,232,0.05);
        color: var(--sd-cream);
        border-color: var(--sd-gold-border);
    }

.btn-outline-danger {
    color: #e08080;
    border-color: rgba(139,26,26,0.45);
    background: transparent;
}

    .btn-outline-danger:hover {
        background: rgba(139,26,26,0.12);
        color: #f0a0a0;
    }

.btn-outline-success {
    color: #80c0a8;
    border-color: rgba(58,92,78,0.45);
    background: transparent;
}

    .btn-outline-success:hover {
        background: rgba(58,92,78,0.12);
        color: #a0d0bc;
    }

.btn-sm {
    font-size: 0.65rem;
    padding: .35rem .9rem;
}

.btn-lg {
    font-size: 0.8rem;
    padding: .75rem 1.8rem;
}

.btn-link {
    color: var(--sd-gold-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.88rem;
}

    .btn-link:hover {
        color: var(--sd-gold-light);
    }

/* ──────────────────────────────────────────────────
     6. FORMS — login input DNA
  ────────────────────────────────────────────────── */
.form-label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sd-cream-faint);
    margin-bottom: 0.45rem;
    font-weight: 400;
}

.form-control,
.form-select {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid var(--sd-gold-subtle) !important;
    border-radius: 5px !important;
    color: var(--sd-cream) !important;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    padding: .65rem .9rem;
    transition: border-color .25s, box-shadow .25s;
    caret-color: var(--sd-gold);
}

    .form-control::placeholder {
        color: var(--sd-cream-ghost) !important;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--sd-gold-focus) !important;
        box-shadow: 0 0 0 3px var(--sd-gold-ring) !important;
        background: rgba(0,0,0,0.45) !important;
        outline: none;
    }

    .form-select option {
        background: var(--sd-card);
        color: var(--sd-cream);
    }

    .form-control:disabled,
    .form-select:disabled {
        opacity: .4 !important;
        cursor: not-allowed;
    }

    .form-control.is-valid {
        border-color: var(--sd-sage-lt) !important;
    }

    .form-control.is-invalid {
        border-color: var(--sd-crimson-lt) !important;
    }

.valid-feedback {
    color: #80c0a8;
    font-size: 0.78rem;
}

.invalid-feedback {
    color: #e08080;
    font-size: 0.78rem;
}

.form-text {
    color: var(--sd-cream-faint);
    font-size: 0.78rem;
}

.input-group-text {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid var(--sd-gold-subtle) !important;
    color: var(--sd-cream-faint);
    font-size: 0.85rem;
    transition: color .2s;
}

.input-group:focus-within .input-group-text {
    border-color: var(--sd-gold-focus) !important;
    color: var(--sd-gold);
}

/* Checkbox / radio normales (NO switches) */
.form-check-input:not(.form-switch .form-check-input) {
    background-color: transparent !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    border-radius: 3px !important;
    width: 14px;
    height: 14px;
}

    .form-check-input:not(.form-switch .form-check-input):checked {
        background-color: var(--sd-gold) !important;
        border-color: var(--sd-gold) !important;
    }

    .form-check-input:not(.form-switch .form-check-input):focus {
        box-shadow: 0 0 0 3px var(--sd-gold-ring) !important;
    }

.form-check-input[type="radio"]:not(.form-switch .form-check-input) {
    border-radius: 50% !important;
}

.form-check-label {
    color: var(--sd-cream-faint);
    font-size: 0.88rem;
    cursor: pointer;
}

/* Switches (toggle Activo, TieneCarnet, etc.) — tamaño/forma propios, con background-size explícito */
.form-switch .form-check-input {
    width: 2.6em !important;
    height: 1.4em !important;
    border-radius: var(--bs-border-radius-pill) !important;
    background-color: rgba(0,0,0,0.35) !important;
    border: 1px solid var(--sd-gold-subtle) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 1.1em 1.1em !important;
    margin-left: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(245,240,232,0.6)'/%3e%3c/svg%3e") !important;
}

    .form-switch .form-check-input:checked {
        background-color: var(--sd-gold) !important;
        border-color: var(--sd-gold) !important;
        background-position: right center !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a0e0e'/%3e%3c/svg%3e") !important;
    }

    .form-switch .form-check-input:focus {
        box-shadow: 0 0 0 3px var(--sd-gold-ring) !important;
        border-color: var(--sd-gold-focus) !important;
    }

.form-range::-webkit-slider-thumb {
    background: var(--sd-gold);
}

.form-range::-webkit-slider-runnable-track {
    background: rgba(201,168,76,0.12);
    height: 4px;
}

textarea.form-control {
    resize: vertical;
}

/* ──────────────────────────────────────────────────
     7. ALERTS
  ────────────────────────────────────────────────── */
.alert {
    border-radius: 5px;
    font-size: 0.88rem;
    border-width: 1px;
    border-left-width: 3px;
    padding: .75rem 1rem;
}

.alert-primary {
    background: rgba(201,168,76,0.08);
    border-color: rgba(201,168,76,0.4);
    color: var(--sd-gold-text);
}

.alert-secondary {
    background: rgba(34,34,34,0.8);
    border-color: var(--sd-gold-subtle);
    color: var(--sd-cream-dim);
}

.alert-success {
    background: rgba(58,92,78,0.12);
    border-color: rgba(58,92,78,0.5);
    color: #90ccb4;
}

.alert-danger {
    background: rgba(139,26,26,0.15);
    border-color: rgba(139,26,26,0.5);
    color: #e09090;
}

.alert-warning {
    background: rgba(184,106,26,0.12);
    border-color: rgba(184,106,26,0.5);
    color: #d4a060;
}

.alert-info {
    background: rgba(46,61,92,0.2);
    border-color: rgba(46,61,92,0.55);
    color: #94aad0;
}

/* ──────────────────────────────────────────────────
     8. BADGES
  ────────────────────────────────────────────────── */
.badge {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: .3em .65em;
}

.bg-primary {
    background: var(--sd-gold-dim) !important;
    color: #1a0e0e !important;
}

.bg-secondary {
    background: var(--sd-surface) !important;
    color: var(--sd-cream-dim) !important;
    border: 1px solid var(--sd-gold-subtle);
}

.bg-success {
    background: var(--sd-sage) !important;
    color: var(--sd-cream) !important;
}

.bg-danger {
    background: var(--sd-crimson) !important;
    color: var(--sd-cream) !important;
}

.bg-warning {
    background: var(--sd-amber) !important;
    color: var(--sd-cream) !important;
}

.bg-info {
    background: var(--sd-slate) !important;
    color: var(--sd-cream) !important;
}

.bg-light {
    background: var(--sd-surface) !important;
    color: var(--sd-cream-dim) !important;
}

.bg-dark {
    background: var(--sd-black) !important;
    color: var(--sd-cream) !important;
}

.text-primary {
    color: var(--sd-gold) !important;
}

.text-secondary {
    color: var(--sd-cream-faint) !important;
}

.text-success {
    color: #90ccb4 !important;
}

.text-danger {
    color: #e09090 !important;
}

.text-warning {
    color: #d4a060 !important;
}

.text-info {
    color: #94aad0 !important;
}

.text-muted {
    color: var(--sd-cream-faint) !important;
}

.text-light {
    color: var(--sd-cream-dim) !important;
}

/* ──────────────────────────────────────────────────
     9. TABLES
  ────────────────────────────────────────────────── */
.table {
    color: var(--sd-cream-dim);
    font-size: 0.88rem;
    border-color: rgba(201,168,76,0.1);
}

    .table thead th {
        background: rgba(0,0,0,0.35);
        color: var(--sd-gold);
        font-family: 'Jost', sans-serif;
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--sd-gold-subtle);
        padding: .75rem 1rem;
    }

    .table td {
        border-color: rgba(201,168,76,0.07);
        padding: .7rem 1rem;
        vertical-align: middle;
    }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(201,168,76,0.025);
    color: var(--sd-cream-dim);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(201,168,76,0.06);
    color: var(--sd-cream);
}

/* ──────────────────────────────────────────────────
     10. MODALS
  ────────────────────────────────────────────────── */
.modal-content {
    background: linear-gradient(160deg, var(--sd-card) 0%, var(--sd-deep) 100%);
    border: 1px solid var(--sd-gold-border);
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.07), 0 24px 64px rgba(0,0,0,0.8), var(--sd-inset);
}

.modal-header {
    border-bottom: 1px solid var(--sd-gold-subtle);
    padding: 1.1rem 1.5rem;
}

.modal-title {
    font-family: 'Playfair Display', serif;
    color: var(--sd-gold);
    font-size: 1.15rem;
    text-shadow: 0 1px 8px rgba(201,168,76,0.2);
}

.modal-footer {
    border-top: 1px solid var(--sd-gold-subtle);
}

.btn-close {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg);
    opacity: .5;
}

    .btn-close:hover {
        opacity: .9;
    }

/* ──────────────────────────────────────────────────
     11. PROGRESS
  ────────────────────────────────────────────────── */
.progress {
    background-color: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 5px;
    height: 6px;
}

.progress-bar {
    background: linear-gradient(90deg, var(--sd-gold-dim), var(--sd-gold));
    border-radius: 5px;
}

    .progress-bar.bg-success {
        background: linear-gradient(90deg, var(--sd-sage-dk), var(--sd-sage-lt)) !important;
    }

    .progress-bar.bg-danger {
        background: linear-gradient(90deg, var(--sd-crimson-dk), var(--sd-crimson-lt)) !important;
    }

    .progress-bar.bg-info {
        background: linear-gradient(90deg, var(--sd-slate-dk), var(--sd-slate-lt)) !important;
    }

    .progress-bar.bg-warning {
        background: linear-gradient(90deg, var(--sd-amber-dk), var(--sd-amber-lt)) !important;
    }

/* ──────────────────────────────────────────────────
     12. LIST GROUPS
  ────────────────────────────────────────────────── */
.list-group-item {
    background: var(--sd-card);
    border-color: var(--sd-gold-subtle);
    color: var(--sd-cream-dim);
    font-size: 0.88rem;
    transition: background .15s, color .15s;
}

    .list-group-item.active {
        background: rgba(201,168,76,0.1);
        border-color: var(--sd-gold-subtle);
        color: var(--sd-gold);
    }

.list-group-item-action:hover {
    background: rgba(201,168,76,0.06);
    color: var(--sd-cream);
}

/* ──────────────────────────────────────────────────
     13. PAGINATION
  ────────────────────────────────────────────────── */
.page-link {
    background: var(--sd-card);
    border-color: var(--sd-gold-subtle);
    color: var(--sd-cream-dim);
    font-size: 0.82rem;
    transition: all .2s;
}

    .page-link:hover {
        background: rgba(201,168,76,0.08);
        border-color: var(--sd-gold-border);
        color: var(--sd-gold);
    }

.page-item.active .page-link {
    background: var(--sd-gold-dim);
    border-color: var(--sd-gold-dim);
    color: #1a0e0e;
}

.page-item.disabled .page-link {
    background: transparent;
    opacity: .3;
}

/* ──────────────────────────────────────────────────
     14. TABS & PILLS
  ────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--sd-gold-subtle);
}

    .nav-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--sd-cream-faint) !important;
        border-radius: 0 !important;
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: .55rem 1rem !important;
        transition: color .2s, border-color .2s;
    }

        .nav-tabs .nav-link:hover {
            color: var(--sd-gold) !important;
        }

        .nav-tabs .nav-link.active {
            background: transparent !important;
            color: var(--sd-gold) !important;
            border-bottom-color: var(--sd-gold) !important;
        }

.nav-pills .nav-link {
    border-radius: 5px !important;
    color: var(--sd-cream-faint) !important;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: .45rem 1rem !important;
    transition: all .2s;
}

    .nav-pills .nav-link:hover {
        background: rgba(201,168,76,0.06);
        color: var(--sd-gold) !important;
    }

    .nav-pills .nav-link.active {
        background: rgba(201,168,76,0.12) !important;
        color: var(--sd-gold) !important;
        border: 1px solid var(--sd-gold-border);
    }

/* ──────────────────────────────────────────────────
     15. BREADCRUMB
  ────────────────────────────────────────────────── */
.breadcrumb {
    font-size: 0.78rem;
}

.breadcrumb-item a {
    color: var(--sd-gold-text);
}

    .breadcrumb-item a:hover {
        color: var(--sd-gold-light);
    }

.breadcrumb-item.active {
    color: var(--sd-cream-faint);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(201,168,76,0.3);
    content: "›";
}

/* ──────────────────────────────────────────────────
     16. ACCORDION
  ────────────────────────────────────────────────── */
.accordion-item {
    background: var(--sd-card);
    border: 1px solid var(--sd-gold-subtle);
    border-radius: 5px !important;
    margin-bottom: .35rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.04);
}

.accordion-button {
    background: rgba(0,0,0,0.2) !important;
    color: var(--sd-cream-dim) !important;
    font-size: 0.88rem;
    font-weight: 400;
    box-shadow: none !important;
}

    .accordion-button:not(.collapsed) {
        color: var(--sd-gold) !important;
        background: rgba(201,168,76,0.05) !important;
    }

    .accordion-button::after {
        filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg);
        opacity: .5;
    }

.accordion-body {
    color: var(--sd-cream-dim);
    font-size: 0.88rem;
    background: var(--sd-card);
}

/* ──────────────────────────────────────────────────
     17. TOAST
  ────────────────────────────────────────────────── */
.toast {
    background: var(--sd-card);
    border: 1px solid var(--sd-gold-border);
    border-radius: 5px;
    color: var(--sd-cream-dim);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.05), 0 8px 32px rgba(0,0,0,0.7), var(--sd-inset);
}

.toast-header {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--sd-gold-subtle);
    color: var(--sd-gold);
    font-family: 'Playfair Display', serif;
    font-size: 0.88rem;
}

.toast-body {
    font-size: 0.83rem;
}

/* ──────────────────────────────────────────────────
     18. SPINNERS
  ────────────────────────────────────────────────── */
.spinner-border, .spinner-grow {
    color: var(--sd-gold);
}

/* ──────────────────────────────────────────────────
     19. POPOVERS & TOOLTIPS
  ────────────────────────────────────────────────── */
.popover {
    background: var(--sd-card);
    border: 1px solid var(--sd-gold-border);
    border-radius: 5px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7), var(--sd-inset);
}

.popover-header {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--sd-gold-subtle);
    color: var(--sd-gold);
    font-family: 'Playfair Display', serif;
}

.popover-body {
    color: var(--sd-cream-dim);
    font-size: 0.85rem;
}

.tooltip-inner {
    background: var(--sd-card);
    border: 1px solid var(--sd-gold-subtle);
    color: var(--sd-cream);
    font-size: 0.78rem;
}

/* ──────────────────────────────────────────────────
     20. FOOTER
  ────────────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%);
    border-top: 1px solid var(--sd-gold-border);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.05), 0 -8px 32px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(201,168,76,0.08);
    padding: 2rem 0 1.5rem;
    position: relative;
    color: var(--sd-cream-faint);
    font-size: 0.82rem;
    z-index: 2;
}

    /* Gold shimmer line — mirrors navbar */
    .site-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--sd-gold) 30%, var(--sd-gold-light) 50%, var(--sd-gold) 70%, transparent 100%);
        opacity: .65;
    }

    .site-footer .footer-brand {
        font-family: 'Playfair Display', serif;
        color: var(--sd-gold);
        font-size: 1rem;
        letter-spacing: 0.06em;
        text-shadow: 0 1px 8px rgba(201,168,76,0.2);
        margin-bottom: .25rem;
    }

    .site-footer .footer-tagline {
        font-size: 0.65rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--sd-cream-ghost);
    }

    .site-footer a {
        color: rgba(201,168,76,0.55);
        transition: color .2s;
    }

        .site-footer a:hover {
            color: var(--sd-gold);
        }

    .site-footer .footer-divider {
        border: none;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201,168,76,0.15), transparent);
        margin: 1.2rem 0;
    }

    .site-footer .footer-copy {
        font-size: 0.7rem;
        color: var(--sd-cream-ghost);
        letter-spacing: 0.06em;
    }

/* ──────────────────────────────────────────────────
     21. DEMO HELPERS
  ────────────────────────────────────────────────── */
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sd-gold);
    border-left: 2px solid var(--sd-gold);
    padding-left: .75rem;
    margin-bottom: 1.4rem;
    opacity: .8;
}

.demo-section {
    padding: 3rem 0;
    border-bottom: 1px solid rgba(201,168,76,0.07);
}

.swatch {
    height: 52px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.06);
    margin-bottom: .35rem;
}

.swatch-label {
    font-size: 0.68rem;
    color: var(--sd-cream-faint);
    letter-spacing: .08em;
}

.hero-section {
    padding: 5rem 0 3.5rem;
    text-align: center;
    position: relative;
}

.hero-eyebrow {
    font-size: 0.65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--sd-gold);
    margin-bottom: .75rem;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--sd-cream);
    line-height: 1.15;
    margin-bottom: 1.1rem;
}

    .hero-title em {
        color: var(--sd-gold);
        font-style: italic;
    }

.hero-sub {
    color: var(--sd-cream-dim);
    font-size: 1rem;
    max-width: 540px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.gold-rule-center {
    width: 60px;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sd-gold), transparent);
    margin: 1.5rem auto;
    opacity: .5;
}

/* ──────────────────────────────────────────────
   STAGE DOOR — Premium Index Tables
   ────────────────────────────────────────────── */

.sd-index-wrap {
    background: linear-gradient(160deg, var(--sd-card) 0%, var(--sd-deep) 100%);
    border: 1px solid var(--sd-gold-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.1), 0 20px 60px rgba(0,0,0,0.75), var(--sd-inset);
    overflow: hidden;
    position: relative;
    margin-bottom: 2.5rem;
}

    /* Gold shimmer line on top — same language as the navbar */
    .sd-index-wrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--sd-gold) 30%, var(--sd-gold-light) 50%, var(--sd-gold) 70%, transparent 100%);
        opacity: .8;
        z-index: 1;
    }

    /* Ornamental corners — reuses the .card-corner idea from your theme */
    .sd-index-wrap .sd-corner {
        position: absolute;
        width: 22px;
        height: 22px;
        border-color: rgba(201,168,76,0.35);
        border-style: solid;
        pointer-events: none;
        z-index: 2;
    }

        .sd-index-wrap .sd-corner.tl {
            top: -1px;
            left: -1px;
            border-width: 2px 0 0 2px;
        }

        .sd-index-wrap .sd-corner.tr {
            top: -1px;
            right: -1px;
            border-width: 2px 2px 0 0;
        }

        .sd-index-wrap .sd-corner.bl {
            bottom: -1px;
            left: -1px;
            border-width: 0 0 2px 2px;
        }

        .sd-index-wrap .sd-corner.br {
            bottom: -1px;
            right: -1px;
            border-width: 0 2px 2px 0;
        }

.sd-index-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid var(--sd-gold-subtle);
    position: relative;
}

.sd-index-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--sd-gold);
    text-shadow: 0 1px 10px rgba(201,168,76,0.25);
    margin: 0;
    letter-spacing: .02em;
}

    .sd-index-title i {
        font-size: 1.1rem;
        opacity: .85;
    }

.sd-index-header .btn {
    font-size: 0.68rem;
}

.sd-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    color: var(--sd-cream-dim);
}

    .sd-table thead th {
        background: rgba(0,0,0,0.45);
        color: var(--sd-gold);
        font-family: 'Jost', sans-serif;
        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--sd-gold-subtle);
        text-align: left;
    }

    .sd-table tbody tr {
        border-bottom: 1px solid rgba(201,168,76,0.08);
        transition: background .18s ease;
    }

        .sd-table tbody tr:nth-of-type(even) {
            background: rgba(255,255,255,0.012);
        }

        .sd-table tbody tr:last-child {
            border-bottom: none;
        }

        .sd-table tbody tr:hover {
            background: rgba(201,168,76,0.07);
        }

    .sd-table td {
        padding: 1rem 1.5rem;
        vertical-align: middle;
        font-size: 0.88rem;
    }

        .sd-table td:first-child {
            color: var(--sd-cream);
            font-weight: 500;
        }

/* Empty state */
.sd-index-empty {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--sd-cream-faint);
    font-size: 0.9rem;
}

    .sd-index-empty i {
        display: block;
        font-size: 1.8rem;
        color: var(--sd-gold-subtle);
        margin-bottom: .75rem;
    }

/* Action icon-buttons */
.sd-actions {
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

.sd-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    border: 1px solid var(--sd-gold-subtle);
    background: rgba(0,0,0,0.3);
    color: var(--sd-cream-faint);
    transition: all .18s ease;
    text-decoration: none;
    font-size: 0.85rem;
}

    .sd-action-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }

.sd-action-edit:hover {
    background: rgba(201,168,76,0.15);
    border-color: var(--sd-gold);
    color: var(--sd-gold);
}

.sd-action-details:hover {
    background: rgba(46,61,92,0.3);
    border-color: var(--sd-slate-lt);
    color: #94aad0;
}

.sd-action-delete:hover {
    background: rgba(139,26,26,0.22);
    border-color: var(--sd-crimson-lt);
    color: #e09090;
}

/* Order/badge pill */
.sd-order-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 .5rem;
    border-radius: var(--bs-border-radius-pill);
    background: rgba(201,168,76,0.12);
    border: 1px solid var(--sd-gold-subtle);
    color: var(--sd-gold);
    font-size: 0.75rem;
    font-weight: 600;
}

.sd-header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* ──────────────────────────────────────────────
   STAGE DOOR — Formularios Edit/Create
   ────────────────────────────────────────────── */

.sd-form-wrap {
    background: linear-gradient(160deg, var(--sd-card) 0%, var(--sd-deep) 100%);
    border: 1px solid var(--sd-gold-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.1), 0 20px 60px rgba(0,0,0,0.75), var(--sd-inset);
    overflow: hidden;
    position: relative;
    margin-bottom: 2.5rem;
}

    .sd-form-wrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--sd-gold) 30%, var(--sd-gold-light) 50%, var(--sd-gold) 70%, transparent 100%);
        opacity: .8;
        z-index: 1;
    }

.sd-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid var(--sd-gold-subtle);
}

.sd-form-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--sd-gold);
    text-shadow: 0 1px 10px rgba(201,168,76,0.25);
    margin: 0;
    letter-spacing: .02em;
}

.sd-form-body {
    padding: 1.75rem;
}

.sd-form-actions {
    display: flex;
    gap: .6rem;
    padding: 1.25rem 1.75rem;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid var(--sd-gold-subtle);
}

.sd-field {
    margin-bottom: 1.15rem;
}

/* Label invisible que reserva exactamente el mismo espacio que un .form-label real,
   así el contenido de abajo (switch, toggle, lo que sea) siempre arranca alineado
   con cualquier campo de texto vecino, sin depender de un margen fijo */
.sd-switch-spacer {
    display: block;
    visibility: hidden;
    margin-bottom: 0.45rem; /* mismo valor que .form-label */
}

/* Switch-style checkbox wrapper for booleans (TieneCarnet, Activo) */
.sd-switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem; /* mismo padding vertical que .form-control para igualar altura */
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--sd-gold-subtle);
    border-radius: 5px;
    min-height: calc(1.5em + 1.3rem + 2px); /* aprox. altura real de .form-control */
}

    .sd-switch-field .form-check {
        margin: 0;
        padding-left: 0;
    }

.sd-switch-label {
    font-size: 0.85rem;
    color: var(--sd-cream-dim);
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .sd-switch-label i {
        color: var(--sd-gold);
    }

/* Gender toggle — pill-style radio buttons */
.sd-gender-toggle {
    display: flex;
    gap: .6rem;
}

    .sd-gender-toggle input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .sd-gender-toggle label {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .6rem 1rem;
        border: 1px solid var(--sd-gold-subtle);
        border-radius: 5px;
        background: rgba(0,0,0,0.25);
        color: var(--sd-cream-faint);
        font-size: 0.82rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .18s ease;
    }

        .sd-gender-toggle label:hover {
            border-color: var(--sd-gold-border);
            color: var(--sd-cream);
        }

    .sd-gender-toggle input[type="radio"]:checked + label {
        background: rgba(201,168,76,0.14);
        border-color: var(--sd-gold);
        color: var(--sd-gold);
        box-shadow: 0 0 0 1px rgba(201,168,76,0.25);
    }


/* ──────────────────────────────────────────────
   STAGE DOOR — Responsive fixes para los
   componentes sd-index-wrap / sd-form-wrap
   ────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .sd-index-header,
    .sd-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .9rem;
    }

    .sd-header-actions,
    .sd-form-actions {
        flex-wrap: wrap;
        width: 100%;
    }

        .sd-header-actions .btn,
        .sd-form-actions .btn {
            flex: 1 1 auto;
            white-space: nowrap;
        }

    .sd-index-header,
    .sd-form-header,
    .sd-form-body,
    .sd-form-actions {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    /* Tabla: en vez de desbordar toda la página, que scrollee solo ella */
    .sd-index-wrap {
        overflow-x: auto;
    }

        .sd-index-wrap .sd-table {
            min-width: 640px; /* fuerza el scroll interno en vez de aplastar columnas */
        }

    .sd-table thead th {
        white-space: normal;
    }

    .sd-gender-toggle {
        flex-direction: column;
    }
}

/* ──────────────────────────────────────────────
   STAGE DOOR — Ajustes finos de navbar responsive
   ────────────────────────────────────────────── */

/* Si el menú + nombre de usuario no caben en una sola fila,
   que los ítems completos bajen en bloque a una segunda línea
   (nunca a media palabra) en vez de desbordar la página */
.navbar-expand-sm .navbar-nav {
    flex-wrap: wrap;
    row-gap: .25rem;
}

/* Logo más chico en pantallas muy angostas, para que el botón
   hamburguesa quede al lado en vez de empujado hacia abajo */
@media (max-width: 400px) {
    .navbar-logo {
        max-height: 42px;
    }
}

/* ──────────────────────────────────────────────
   STAGE DOOR — Selector de calendario nativo
   (input[type=date]) visible sobre fondo oscuro
   ────────────────────────────────────────────── */

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg) brightness(1.3);
    opacity: .9;
    cursor: pointer;
    transition: opacity .15s ease;
}

    input[type="date"]::-webkit-calendar-picker-indicator:hover,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
        opacity: 1;
    }