:root {
    color-scheme: light;
    --ink: #192a3d;
    --muted: #5c6b7a;
    --line: #dde3ea;
    --surface: #ffffff;
    --soft: #f2f5f7;
    --primary: #192a3d;
    --primary-dark: #121519;
    --accent: #3a4f66;
    --gold: #b3893f;
    --gold-light: #e6d5ac;
    --gold-soft: #faf5e8;
    --good: #137950;
    --warn: #9b6515;
    --bad: #9d2d2d;
    --shadow: 0 1px 2px rgba(18, 21, 25, 0.05), 0 6px 16px rgba(18, 21, 25, 0.08);
    --shadow-soft: 0 1px 2px rgba(18, 21, 25, 0.04);
    --font-display: 'Unbounded', 'Arial Black', sans-serif;
    --font-body: 'Nunito Sans', Arial, Helvetica, sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
    .event-banner,
    .invitation-strip,
    .event-split-col,
    .layout-section,
    .notes-panel {
        animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .invitation-strip {
        animation-delay: 0.05s;
    }

    .event-split-col + .event-split-col {
        animation-delay: 0.08s;
    }
}

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

@media (prefers-reduced-motion: no-preference) {
    .event-banner::before {
        animation: star-twinkle 5s ease-in-out infinite;
    }

    .event-banner::after {
        animation: nebula-glow-breathe 7s ease-in-out infinite;
    }
}

@keyframes star-twinkle {
    0%,
    100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

@keyframes nebula-glow-breathe {
    0%,
    100% {
        opacity: 0.75;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

.meteor {
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(230, 213, 172, 0.55) 45%, transparent);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: rotate(35deg);
}

.event-banner > .meteor,
.admin-shell .topbar > .meteor {
    position: absolute;
    z-index: 0;
}

.meteor-a {
    top: 20%;
    left: 10%;
}

.meteor-b {
    top: 58%;
    left: 58%;
    width: 66px;
}

@media (prefers-reduced-motion: no-preference) {
    .meteor {
        animation: meteor-fall 9s ease-in infinite;
    }

    .meteor-b {
        animation-duration: 12s;
        animation-delay: 4s;
    }
}

@keyframes meteor-fall {
    0%,
    60% {
        opacity: 0;
        transform: rotate(35deg) translateX(0);
    }
    62% {
        opacity: 1;
    }
    72% {
        opacity: 0;
        transform: rotate(35deg) translateX(160px);
    }
    100% {
        opacity: 0;
        transform: rotate(35deg) translateX(160px);
    }
}

.site-foot {
    text-align: center;
    padding: 44px 16px 40px;
    border-top: 1px solid var(--line);
}

.site-foot-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.site-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.site-foot-social a:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--gold-soft);
}

.site-foot-social svg {
    width: 17px;
    height: 17px;
}

.site-foot-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 12.5px;
}

.site-foot-legal a {
    color: var(--muted);
    text-decoration: none;
}

.site-foot-legal a:hover {
    color: var(--gold);
    text-decoration: underline;
}

.site-foot-legal span {
    color: var(--line);
}

.site-foot-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12.5px;
    color: var(--muted);
    opacity: 0.8;
}

.site-foot-mark::before {
    content: '\2726  ';
    color: var(--gold);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--soft);
    overflow-x: hidden;
}

a {
    color: inherit;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.3px;
}

.topbar {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #141a26, #05070b);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: #fff;
}

.brand-logo {
    height: 52px;
    width: auto;
    display: block;
}

.brand-word {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 1px;
}

.brand-tagline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.topnav {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Vacio en casi todas las paginas -- ver la nota en account-nav.js, que es
   quien mete aqui adentro el boton de "3 lineas" del menu de Mi cuenta
   cuando la pagina lo trae. */
.topbar-slot:empty {
    display: none;
}

.topnav a {
    position: relative;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
    text-decoration: none;
    padding-bottom: 4px;
    transition: color 180ms ease, transform 180ms ease;
}

.topnav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-light);
    transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.topnav a:hover {
    color: #fff;
    transform: translateY(-1px);
}

.topnav a:hover::after {
    width: 100%;
}

.topnav a.active {
    color: var(--gold-light);
}

.topnav a.active::after {
    width: 100%;
}

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

.button.ghost-dark {
    min-height: 38px;
    padding: 0 18px;
    border-color: rgba(255, 255, 255, 0.24);
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}

.button.ghost-dark:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    box-shadow: none;
}

.button.gold-pill {
    min-height: 38px;
    padding: 0 20px;
    border-color: transparent;
    background: linear-gradient(180deg, #e2bb70, var(--gold-light));
    color: #1a1206;
    box-shadow: 0 8px 18px rgba(216, 176, 94, 0.28);
}

.button.gold-pill:hover {
    background: linear-gradient(180deg, #ecc989, var(--gold-light));
    box-shadow: 0 12px 24px rgba(216, 176, 94, 0.36);
}

.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.nav-burger .icon-close { display: none; }
.company-topbar.is-open .nav-burger .icon-open { display: none; }
.company-topbar.is-open .nav-burger .icon-close { display: block; }

.mobile-drawer {
    position: fixed;
    inset: var(--topbar-h, 68px) 0 0 0;
    z-index: 19;
    background: #05070b;
    display: flex;
    flex-direction: column;
    padding: 8px 26px 40px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
    overflow-y: auto;
}
.mobile-drawer.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
}
.mobile-drawer .drawer-link {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-drawer .drawer-link.is-active { color: var(--gold-light); }
.mobile-drawer .drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
}
.mobile-drawer .drawer-actions .button { width: 100%; min-height: 46px; }

@media (max-width: 860px) {
    .topbar.company-topbar {
        flex-direction: row;
        align-items: center;
        padding: 14px 20px;
    }
    .company-topbar .topnav { display: none; }
    .topnav-actions .topnav-only { display: none; }
    .nav-burger { display: flex; }
}

.page {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0;
}

.hero,
.panel,
.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 36px;
}

.panel,
.auth-card,
.table-panel {
    box-shadow: var(--shadow-soft);
}

.row-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.row-panel h1,
.row-panel p {
    margin-left: 0;
}

.public-event-url {
    word-break: break-all;
    overflow-wrap: anywhere;
}

.hero {
    min-height: 360px;
    display: flex;
    align-items: center;
}

.hero h1,
.panel h1,
.auth-card h1 {
    margin: 0 0 14px;
    font-size: 34px;
    line-height: 1.12;
}

.hero p,
.panel p,
.auth-card p {
    max-width: 680px;
    color: var(--muted);
    line-height: 1.6;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.eyebrow::before {
    content: '\2726';
    display: inline-block;
    margin-right: 7px;
    color: var(--gold);
    font-size: 11px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.event-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 0;
    margin: 20px 0 24px;
    padding: 10px 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.event-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
}

.event-nav-group + .event-nav-group {
    border-left: 1px solid var(--line);
}

.event-nav-group-label {
    padding: 0 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.6;
}

.event-nav-group-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.event-nav a {
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    color: var(--muted);
}

.event-nav a:hover {
    background: var(--soft);
}

.event-nav a.active {
    background: var(--primary);
    color: #fff;
}

@media (max-width: 900px) {
    .event-nav {
        flex-direction: column;
        gap: 10px;
    }

    .event-nav-group + .event-nav-group {
        border-left: none;
        border-top: 1px solid var(--line);
        padding-top: 10px;
    }
}

.stats-strip {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 180px;
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background 150ms ease;
}

.stat-item:hover {
    background: var(--soft);
}

.stat-item-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}

.stat-item-value {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--primary);
    line-height: 1.1;
}

.stat-item-sub {
    font-size: 13px;
    color: var(--muted);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.dashboard-col-wide {
    grid-column: 1 / -1;
}

.dashboard-col h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 20px;
}

.dashboard-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold);
}

.dashboard-col-icon svg {
    width: 16px;
    height: 16px;
}

.dashboard-col-icon.warn {
    background: rgba(217, 164, 65, 0.16);
    color: var(--warn);
}

.dash-event-list,
.dash-attention-list,
.dash-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.dash-event-row,
.dash-attention-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: var(--soft);
    transition: border-color 140ms ease, background 140ms ease;
}

.dash-event-row:hover,
.dash-attention-row:hover {
    border-color: var(--gold-light);
    background: var(--surface);
}

.dash-event-name {
    font-weight: 800;
}

.dash-event-meta,
.dash-attention-due {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 700;
}

.dash-attention-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-activity-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.dash-activity-list li:last-child {
    border-bottom: none;
}

.dash-activity-label {
    font-weight: 800;
}

.dash-activity-meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 860px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.chart-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.chart-group {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
}

.chart-group.is-total {
    border-color: var(--gold);
    background: var(--gold-soft);
}

.chart-group.is-large {
    margin-top: 18px;
    padding: 28px 32px;
}

.chart-group.is-large .chart-group-title {
    font-size: 26px;
}

.chart-group.is-large .chart-group-capacity {
    font-size: 13px;
}

.chart-group.is-large .chart-vbars {
    gap: 48px;
    margin-top: 6px;
}

.chart-group.is-large .chart-vbar-track {
    width: 56px;
    height: 180px;
}

.chart-group.is-large .chart-vbar-value {
    font-size: 20px;
}

.chart-group.is-large .chart-vbar-tag {
    font-size: 13px;
}

.chart-groups-heading {
    margin: 28px 0 4px;
}

.chart-group-header {
    margin: 0 0 12px;
}

.chart-group-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.2;
    color: var(--ink);
}

.chart-group-capacity {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.chart-vbars {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.chart-vbar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.chart-vbar-value {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}

.chart-vbar-track {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    width: 34px;
    height: 100px;
    border-radius: 6px;
    background: rgba(140, 150, 165, 0.18);
    overflow: hidden;
}

.chart-vbar-fill {
    width: 100%;
    min-height: 2px;
    border-radius: 6px 6px 0 0;
    transition: height 400ms ease;
}

.chart-vbar-fill.is-compras {
    background: var(--gold);
}

.chart-vbar-fill.is-cancelaciones {
    background: var(--bad);
}

.chart-vbar-fill.is-checkin {
    background: var(--good);
}

.chart-vbar-tag {
    align-self: stretch;
    margin-top: 6px;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    text-align: center;
    color: var(--muted);
    white-space: nowrap;
}

.button {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    overflow: hidden;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 24px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease,
        transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
}

.button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
    transform: translateX(-120%);
    pointer-events: none;
}

.button:hover::before {
    transform: translateX(120%);
    transition: transform 650ms ease;
}

.button:hover {
    border-color: #b8c6cc;
    background: #f7fafb;
    transform: translateY(-2px) scale(1.035);
    box-shadow: 0 8px 18px rgba(18, 21, 25, 0.1);
}

.button:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 80ms;
}

.button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.button.primary {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(18, 21, 25, 0.18);
}

.button.primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-dark));
    box-shadow: 0 14px 28px rgba(18, 21, 25, 0.26), 0 0 0 3px rgba(179, 137, 63, 0.14);
    transform: translateY(-2px) scale(1.035);
}

.button.primary::before {
    background: linear-gradient(115deg, transparent 40%, rgba(230, 213, 172, 0.45) 50%, transparent 60%);
}

.button.danger {
    border-color: #c44a4a;
    color: #9d2d2d;
}

.button.danger:hover {
    background: #fdecec;
    box-shadow: 0 8px 18px rgba(157, 45, 45, 0.14);
}

.button.ghost {
    min-height: 38px;
    padding: 0 16px;
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.button.ghost:hover {
    border-color: var(--line);
    background: var(--soft);
    color: var(--ink);
    transform: translateY(-1px) scale(1.03);
    box-shadow: none;
}

.button.ghost:active {
    transform: scale(0.96);
}

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

.danger-zone {
    margin-top: 18px;
    border-color: #edc6c6;
}

.auth-card {
    width: min(460px, 100%);
    margin: 0 auto;
}

.auth-card.wide {
    width: min(720px, 100%);
    margin-top: 16px;
}

.form {
    display: grid;
    gap: 16px;
}

.form label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.form input,
.form select {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    font: inherit;
    background: #ffffff;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Menu lateral del panel de cliente (Informacion general / Menu / lo que se
   agregue despues, ej. abonos) — sidebar simple, sin JS. */
/* Encabezado de "Mi cuenta" — plano, sin la caja/gradiente contenida de
   .event-banner: el fondo nebuloso ya lo pone .cuenta-shell en toda la pagina,
   asi que aqui solo hace falta el texto flotando encima, no otra tarjeta. */
.cuenta-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 4px 0 36px;
}

.cuenta-hero h1 {
    margin: 0;
    font-size: 40px;
}

.cuenta-hero p {
    margin: 6px 0 0;
}

/* Variante para el hero de la pagina publica del evento (event.php) — es una
   pila vertical (titulo, fecha, cuenta regresiva), no una fila titulo+acciones
   como en "Mi cuenta". */
.event-hero {
    display: block;
    padding-bottom: 8px;
}

.event-hero .event-banner-date {
    margin-top: 14px;
}

/* Saludo de bienvenida en cuenta-panel.php — cada "palabra" (Hola, / nombre)
   entra por separado en vez de aparecer todo junto, para que el momento de
   llegada se sienta un poco mas vivo sin exagerar. */
.word-reveal {
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    .word-reveal {
        opacity: 0;
        animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(0.2s + var(--w, 0) * 0.14s);
    }
}

@media (max-width: 700px) {
    .cuenta-hero {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 28px;
    }
}

.account-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* Reemplaza .panel dentro de "Mi cuenta": el contenido (datos, boletos, avisos,
   faq) ya no vive en tarjetas blancas propias — solo el boleto con QR sigue
   siendo tarjeta real (.panel.ticket-card), porque eso si es un objeto. */
.account-section {
    padding: 0;
}

.account-section + .account-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

@media (prefers-reduced-motion: no-preference) {
    .account-layout > * {
        animation: fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.1s;
    }

    .account-layout > *:nth-child(2) {
        animation-delay: 0.18s;
    }

    .account-layout > *:nth-child(3) {
        animation-delay: 0.26s;
    }
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 24px;
}

/* Una sola caja para todo el contenido de la derecha (en vez de que cada tarjeta de
   compra sea su propio elemento del grid) — con varias compras, dejar que el grid
   auto-coloque cada `.panel` era fragil: cualquier fila de mas rompia la alineacion
   con el menu sticky. Con un solo contenedor, el grid siempre tiene exactamente 2
   columnas (menu + contenido), sin ambiguedad. */
.account-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.account-nav-label {
    margin: 20px 14px 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.65;
}

.account-nav > .account-nav-label:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* Cada link trae su propio "chip" de icono (mismo tratamiento que las tarjetas
   de estadistica del panel principal: circulo con fondo suave) en vez de un
   icono suelto — asi el estado activo/hover se ve en el icono ademas del
   fondo de la fila, y el menu se siente como una sola familia visual con el
   resto del panel en vez de una lista de texto con iconitos al lado. */
.account-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--soft);
    color: var(--muted);
    flex-shrink: 0;
    transition: background-color 160ms ease, color 160ms ease;
}

.account-nav-icon svg {
    width: 16px;
    height: 16px;
}

.account-nav a:hover {
    background: var(--soft);
    color: var(--primary);
    transform: translateX(2px);
}

.account-nav a:hover .account-nav-icon {
    background: var(--surface);
    color: var(--primary);
}

.account-nav a.active {
    background: var(--gold-soft);
    color: var(--primary);
}

.account-nav a.active .account-nav-icon {
    background: rgba(216, 176, 94, 0.28);
    color: var(--gold);
}

/* Boton "hamburguesa" que abre el menu de la cuenta en movil -- oculto en
   escritorio (el menu lateral ya esta siempre visible ahi). Mismos iconos y
   logica de apertura/cierre que ya usa el sitio publico (company-header.php +
   company-site.js), para que el gesto "toca las 3 lineas y sale el menu" se
   sienta igual en toda la app. */
.account-nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.account-nav-burger .icon-close {
    display: none;
}

.account-nav-burger.is-open .icon-open {
    display: none;
}

.account-nav-burger.is-open .icon-close {
    display: block;
}

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

    .account-nav-burger {
        display: flex;
    }

    /* Antes envolvia sus 10 secciones en varias filas de pastillas con texto
       completo (o, en un intento anterior, solo iconos sin nombre) -- ninguna
       de las dos deja claro de un vistazo que hay algo que tocar. Ahora el
       menu vive oculto detras del boton de 3 lineas y se abre como pantalla
       completa con nombres grandes, igual que el menu movil del sitio
       publico (.mobile-drawer en company-header.php). */
    .account-nav {
        position: fixed;
        inset: var(--topbar-h, 68px) 0 0 0;
        z-index: 30;
        flex-direction: column;
        gap: 0;
        background: #05070b;
        padding: 8px 26px 40px;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
    }

    .account-nav.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
    }

    .account-nav a {
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 14px 4px;
        font-family: var(--font-display);
        font-size: 20px;
    }

    .account-nav a:hover {
        transform: none;
    }

    .account-nav-label {
        margin: 24px 4px 6px;
        padding-top: 0;
        border-top: none;
    }

    .account-nav-icon {
        width: 38px;
        height: 38px;
    }

    .account-nav-icon svg {
        width: 19px;
        height: 19px;
    }
}

/* Estado vacio reutilizable (panel de cliente) — icono + mensaje centrado, en vez de
   un simple parrafo "muted", para las secciones que todavia no tienen datos que mostrar
   (avisos, pagos, menu, info del evento). */
.empty-state {
    text-align: center;
    padding: 34px 20px;
}

.empty-state-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
    .empty-state-icon {
        animation: icon-float 3.2s ease-in-out infinite;
    }
}

@keyframes icon-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.empty-state-icon svg {
    width: 24px;
    height: 24px;
}

.empty-state h2 {
    margin: 0 0 8px;
}

.empty-state p {
    margin: 0 auto;
    max-width: 420px;
}

/* Bloque de datos de solo lectura (panel de cliente) — misma cuadricula visual que
   .form-grid pero para texto estatico en vez de inputs. */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin-top: 8px;
}

.info-row {
    display: grid;
    gap: 4px;
}

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

.info-row-value {
    font-size: 17px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

/* Tarjetas de estadistica para los 3 numeros centrales del registro (boletos,
   adultos, infantiles) — a diferencia del resto de "Datos de tu graduacion"
   (correo, telefono...), estos si son cifras que vale la pena resaltar, asi
   que llevan su propio tratamiento visual en vez de una fila de texto plano
   como las demas (ver .info-grid arriba, que se queda para el resto). */
.stat-tile-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 8px 0 28px;
}

.stat-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.stat-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--gold);
    flex-shrink: 0;
}

/* Los otros 3 tonos de "nebulosa" ya viven de fondo en .cuenta-shell (violeta,
   verde azulado, rosa) pero solo como decoracion — aqui por fin hacen algo
   funcional: distinguir de un vistazo cada tarjeta de estadistica sin tener
   que leer la etiqueta. El dorado se queda reservado para "boletos" (el
   numero mas importante), siguiendo la misma logica de "dorado = lo tuyo"
   que ya usan las sillas/mesas seleccionadas en el mapa interactivo. */
.stat-tile-icon.tone-violet {
    background: rgba(147, 91, 211, 0.18);
    color: #b48fe0;
}

.stat-tile-icon.tone-teal {
    background: rgba(64, 158, 196, 0.18);
    color: #7ec3dd;
}

.stat-tile-icon svg {
    width: 19px;
    height: 19px;
}

.stat-tile-value {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-tile-label {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--muted);
}

@media (max-width: 640px) {
    .stat-tile-row {
        grid-template-columns: 1fr;
    }
}

/* Tarjetas del menu del evento (panel de cliente) — los tiempos de la comida
   son de verdad una secuencia (entrada, plato fuerte, postre), asi que el
   numero de cada tarjeta encierra informacion real y no es solo decoracion. */
.menu-courses {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.menu-course {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--line);
}

.menu-course:last-child {
    border-bottom: none;
}

.menu-course-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.menu-course-name {
    margin: 3px 0 4px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}

.menu-course-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.checkbox-label {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.checkbox-label input {
    width: auto !important;
    height: auto !important;
}

.help {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.muted {
    color: var(--muted);
}

.table-panel {
    margin-top: 16px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
    margin-top: 16px;
}

.panel h2 {
    margin: 0 0 14px;
    font-size: 22px;
}

.layout-preview,
.empty-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #eef3f4;
}

.layout-preview {
    display: block;
    object-fit: contain;
}

[data-layout-zoom] {
    cursor: zoom-in;
}

.layout-preview.large {
    aspect-ratio: auto;
    max-height: calc(100vh - 180px);
}

.addon-thumb {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line);
    margin-bottom: 8px;
}

/* Panel de admin "Fotos del lugar" — miniaturas con boton de quitar debajo. */
.gallery-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.gallery-manage-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gallery-manage-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.gallery-manage-item .button.danger {
    min-height: 32px;
    padding: 0 12px;
    font-size: 11px;
}

/* Galeria publica en la pagina de compra — una foto protagonista con el titulo
   encima (como un cartel, no otra tarjeta blanca en la fila) y el resto del
   carrete en una tira que se desliza debajo. Mas ancha que el resto de la
   pagina para que respire como un momento aparte. Click para ver en grande
   via layout-zoom.js (mismo mecanismo que el mapa de mesas). */
.event-gallery-wide {
    width: 100vw;
    max-width: 1400px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
}

.event-gallery-feature {
    position: relative;
    width: min(100%, calc(100% - 32px));
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    background: var(--primary-dark);
}

.event-gallery-wide.is-solo {
    width: auto;
    max-width: none;
    left: auto;
    transform: none;
}

.event-gallery-wide.is-solo .event-gallery-feature {
    width: 100%;
}

.event-gallery-wide.is-solo .event-gallery-feature img {
    height: min(48vh, 380px);
}

.event-gallery-feature img {
    display: block;
    width: 100%;
    height: min(64vh, 520px);
    object-fit: cover;
    cursor: zoom-in;
}

.event-gallery-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 7, 11, 0) 35%, rgba(5, 7, 11, 0.88) 100%);
    pointer-events: none;
}

.event-gallery-feature figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 44px;
    color: #fff;
}

.event-gallery-feature figcaption .eyebrow {
    color: rgba(255, 255, 255, 0.8);
}

.event-gallery-feature figcaption .eyebrow::before {
    color: var(--gold-light);
}

.event-gallery-feature figcaption h2 {
    margin: 6px 0 8px;
    color: #fff;
    font-size: 36px;
}

.event-gallery-feature figcaption p {
    margin: 0;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.85);
}

.event-gallery-strip {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.event-gallery-strip img {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 220px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

.event-gallery-strip img:hover {
    transform: scale(1.03);
}

@media (max-width: 640px) {
    .event-gallery-feature figcaption {
        padding: 26px;
    }

    .event-gallery-feature figcaption h2 {
        font-size: 27px;
    }

    .event-gallery-feature img {
        height: 60vh;
    }
}

.layout-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(8, 18, 22, 0.86);
}

.layout-zoom-overlay[hidden] {
    display: none;
}

.layout-zoom-image {
    max-width: min(1200px, 96vw);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.layout-zoom-close {
    position: fixed;
    top: 18px;
    right: 18px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
}

.is-zooming-layout {
    overflow: hidden;
}

.empty-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 800;
}

.compact-form {
    margin-top: 18px;
}

/* Disclosure para "crear varias mesas a la vez" junto al formulario normal de
   una mesa -- mismo lenguaje visual que .faq-item (borde, marcador +/-) pero
   mas compacto, para no competir por atencion con el formulario de siempre. */
.table-bulk-create {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 16px;
}

.table-bulk-create summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.table-bulk-create summary::-webkit-details-marker {
    display: none;
}

.table-bulk-create summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--gold);
    transition: transform 160ms ease;
}

.table-bulk-create[open] summary::after {
    transform: rotate(45deg);
}

.table-bulk-create > .muted {
    margin-top: -4px;
    font-size: 13px;
}

.table-bulk-create form {
    padding-bottom: 16px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.data-table th,
.data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fbfb;
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
}

.data-table tbody tr {
    transition: background 140ms ease;
}

.data-table tbody tr:nth-child(even) {
    background: rgba(18, 21, 25, 0.018);
}

.data-table tbody tr:hover {
    background: #f8fbfb;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e8f3f4;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 800;
}

.badge.status-used,
.badge.status-active,
.badge.status-paid,
.badge.status-resolved {
    background: #e8f6ef;
    color: var(--good);
}

.badge.status-available,
.badge.status-closed,
.badge.status-inactive,
.badge.status-draft,
.badge.status-expired {
    background: #e8f3f4;
    color: var(--primary-dark);
}

.badge.status-holding,
.badge.status-pending,
.badge.status-paused,
.badge.status-open {
    background: #fff3df;
    color: var(--warn);
}

.badge.status-cancelled,
.badge.status-failed {
    background: #fdecec;
    color: var(--bad);
}

.badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 999px;
    background: currentColor;
}

code {
    padding: 3px 6px;
    border-radius: 5px;
    background: #edf2f3;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.copy-btn svg {
    width: 14px;
    height: 14px;
}

.copy-btn.is-copied {
    border-color: var(--good);
    color: var(--good);
}

.event-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.event-hero h1 {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.1;
}

.guest-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.event-layout-frame {
    display: grid;
    gap: 8px;
    margin: 0;
}

.event-layout {
    width: 100%;
    height: 100%;
    max-height: 620px;
    min-height: 360px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #eef3f4;
}

.event-layout-frame figcaption {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.event-banner {
    position: relative;
    overflow: hidden;
    padding: 44px 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: var(--shadow);
}

.event-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 8% 25%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.2px 1.2px at 22% 65%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.6px 1.6px at 38% 15%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.2px 1.2px at 54% 75%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1.6px 1.6px at 68% 35%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.2px 1.2px at 82% 60%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.6px 1.6px at 94% 20%, rgba(230, 213, 172, 0.5), transparent),
        radial-gradient(1.2px 1.2px at 12% 85%, rgba(230, 213, 172, 0.4), transparent);
    background-repeat: no-repeat;
    pointer-events: none;
}

.event-banner::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 160%;
    background: radial-gradient(circle, rgba(230, 213, 172, 0.12), transparent 65%);
    pointer-events: none;
}

.event-banner > * {
    position: relative;
    z-index: 1;
}

.event-banner .eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

.event-banner .eyebrow::before {
    color: var(--gold-light);
}

.event-banner h1 {
    margin: 0;
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: #fff;
}

.event-banner h1::after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 18px;
    background: linear-gradient(90deg, var(--gold-light), transparent);
}

.event-banner-date {
    margin: 14px 0 0;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
}

.event-banner p {
    color: rgba(255, 255, 255, 0.82);
}

.event-banner .muted {
    color: rgba(255, 255, 255, 0.62);
}

.event-banner.row-panel {
    align-items: center;
}

.event-banner.row-panel h1 {
    font-size: 34px;
}

.event-countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.event-hero-logo {
    position: absolute;
    top: 50%;
    left: 68%;
    transform: translate(-50%, -50%);
    max-width: 200px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 760px) {
    .event-hero-logo {
        position: static;
        transform: none;
        display: block;
        margin: 12px auto 0;
        max-width: 150px;
        max-height: 110px;
    }
}

/* Solo en la pagina publica de compra (event.php) -- unavailable.php tambien usa
   .event-hero pero con un layout de dos columnas distinto (nombre + layout del
   venue), que no se toca aqui. Aqui el logo ya no vive en el grid (position:
   absolute arriba), asi que el titulo/fecha/contador vuelven a apilarse en una
   sola columna, dandole al nombre todo el ancho de la tarjeta para cuando se
   pide que quede en una sola linea (si aun asi es demasiado largo, se recorta
   con "..." en vez de encimarse con el logo). */
.cuenta-hero.event-hero {
    display: block;
}

.cuenta-hero.event-hero h1 {
    max-width: calc(100% - 230px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 760px) {
    .cuenta-hero.event-hero h1 {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 12px 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(230, 213, 172, 0.25);
}

.countdown-value {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.countdown-today {
    margin: 26px 0 0;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--gold-light);
}

@media (prefers-reduced-motion: no-preference) {
    .countdown-unit:last-child {
        animation: countdown-pulse 1.6s ease-in-out infinite;
    }
}

@keyframes countdown-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(230, 213, 172, 0); }
    50% { box-shadow: 0 0 16px rgba(230, 213, 172, 0.4); }
}

/* Franja de invitacion — acento de color, no una tarjeta blanca elevada mas;
   la pagina del evento ya tiene suficientes cajas, esta es solo una barra. */
.invitation-strip {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
    padding: 20px 26px;
    border-radius: 12px;
    background: var(--gold-soft);
}

.invitation-strip-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 8px 20px rgba(179, 137, 63, 0.3);
}

.invitation-strip-icon svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
}

.invitation-strip-body {
    flex: 1;
    min-width: 0;
}

.invitation-strip-body h2 {
    margin: 2px 0 2px;
    font-size: 19px;
}

.invitation-strip-body p {
    margin: 0;
}

@media (max-width: 760px) {
    .invitation-strip {
        flex-direction: column;
        text-align: center;
        padding: 22px;
    }
}

/* Las dos rutas de compra (ya tienes codigo / aun no) ya no viven en tarjetas
   blancas apiladas — son dos columnas editoriales separadas por una linea,
   como una pagina de programa impreso. Las tarjetas se reservan para lo que
   de verdad es una eleccion tocable: tipo de boleto, metodo de pago, adicional. */
.event-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 40px;
    align-items: start;
}

.event-split.single {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

.event-split-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.event-split:not(.single) > .event-split-col + .event-split-col {
    position: relative;
    padding-left: 48px;
}

.event-split:not(.single) > .event-split-col + .event-split-col::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background: var(--line);
}

.event-split-heading {
    margin-bottom: 18px;
}

.event-split-heading h2 {
    margin: 0 0 10px;
    font-size: 26px;
}

.event-split-heading .guest-copy {
    margin: 0;
}

.event-addons {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.event-addons h2 {
    margin: 0 0 4px;
    font-size: 22px;
}

@media (max-width: 860px) {
    .event-split {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .event-split.single {
        grid-template-columns: 1fr;
    }

    .event-split:not(.single) > .event-split-col + .event-split-col {
        margin-top: 36px;
        padding-left: 0;
        padding-top: 36px;
    }

    .event-split:not(.single) > .event-split-col + .event-split-col::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }
}

.ticket-type-options {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

@media (prefers-reduced-motion: no-preference) {
    .ticket-type-options > .ticket-type-option {
        animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .ticket-type-options > .ticket-type-option:nth-child(2) {
        animation-delay: 0.06s;
    }

    .ticket-type-options > .ticket-type-option:nth-child(3) {
        animation-delay: 0.12s;
    }

    .ticket-type-options > .ticket-type-option:nth-child(4) {
        animation-delay: 0.18s;
    }

    .ticket-type-options > .ticket-type-option:nth-child(n + 5) {
        animation-delay: 0.22s;
    }
}

.ticket-type-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.ticket-type-option:not(.disabled):hover {
    border-color: var(--gold-light);
    transform: translateY(-2px);
}

.ticket-type-option.has-qty {
    border-color: var(--gold);
    background: var(--gold-soft);
    box-shadow: 0 10px 22px rgba(179, 137, 63, 0.18);
}

.ticket-type-option.disabled {
    opacity: 0.5;
}

.ticket-type-info {
    display: grid;
    gap: 3px;
}

.ticket-type-name {
    font-weight: 800;
}

.ticket-type-price {
    font-weight: 800;
    color: var(--primary-dark);
}

.ticket-type-avail {
    color: var(--muted);
    font-size: 13px;
}

.price-tag-cash {
    display: none;
}

.paying-cash .price-tag-normal {
    display: none;
}

.paying-cash .price-tag-cash {
    display: inline;
}

.price-strike {
    color: var(--muted);
    font-weight: 600;
    text-decoration: line-through;
    margin-right: 6px;
}

.price-final {
    color: var(--gold);
}

.ticket-type-perks {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.ticket-type-perks li {
    font-size: 12.5px;
    color: var(--gold);
}

.ticket-type-perks li::before {
    content: '\2726\0020';
}

.ticket-type-qty {
    display: grid;
    gap: 6px;
    justify-items: center;
    flex: none;
}

.qty-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--soft);
    transition: background 180ms ease;
}

.ticket-type-option.has-qty .qty-stepper {
    background: rgba(179, 137, 63, 0.14);
}

.qty-stepper.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: 0 1px 3px rgba(16, 20, 25, 0.12);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}

.qty-btn svg {
    width: 13px;
    height: 13px;
}

.qty-btn:hover {
    background: var(--gold);
    /* Blanco puro sobre --gold quedaba en ~2:1 de contraste (el dorado del
       tema oscuro, --d8b05e, es bastante claro) -- el mismo tono oscuro que
       ya usa .button.primary sobre fondo dorado en otras partes de la app. */
    color: #1a1206;
    box-shadow: 0 3px 8px rgba(179, 137, 63, 0.32);
}

.qty-btn:active {
    transform: scale(0.9);
}

.qty-input {
    width: 32px;
    height: 28px;
    text-align: center;
    border: none;
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    background: transparent;
    color: var(--ink);
    -moz-appearance: textfield;
}

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

.addon-heading {
    margin-top: 20px;
}

.payment-method-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 6px;
}

@media (prefers-reduced-motion: no-preference) {
    .payment-method-options > .payment-method-option {
        animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .payment-method-options > .payment-method-option:nth-child(2) {
        animation-delay: 0.06s;
    }

    .payment-method-options > .payment-method-option:nth-child(3) {
        animation-delay: 0.12s;
    }
}

.payment-method-options .payment-method-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 30px 8px 10px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.payment-method-option:hover {
    border-color: var(--gold-light);
    transform: translateY(-2px);
}

.payment-method-option.is-selected {
    border-color: var(--gold);
    background: var(--gold-soft);
    box-shadow: 0 10px 22px rgba(179, 137, 63, 0.18);
}

.payment-method-option input {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
}

.payment-method-check {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    transition: border-color 180ms ease, background 180ms ease;
}

.payment-method-option.is-selected .payment-method-check {
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: inset 0 0 0 3px var(--gold-soft);
}

.payment-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    transition: background 180ms ease, color 180ms ease;
}

.payment-method-option.is-selected .payment-method-icon {
    background: var(--gold);
    color: #ffffff;
}

.payment-method-icon svg {
    width: 14px;
    height: 14px;
}

.payment-method-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-method-hint {
    font-size: 12.5px;
    margin-top: -2px;
}


.layout-section {
    margin-top: 24px;
}

.layout-section .guest-legend {
    margin: 4px 0 18px;
}

@media (max-width: 760px) {
    .stat-item {
        flex-basis: 100%;
        border-right: none;
    }
}

.code-form {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.code-form label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.code-form input {
    width: 100%;
    height: 50px;
    border: 2px solid #c8d5da;
    border-radius: 6px;
    padding: 0 14px;
    font: inherit;
    text-transform: uppercase;
}

.code-form input:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(25, 42, 61, 0.14);
}

.door-page {
    width: min(560px, calc(100% - 24px));
    margin: 0 auto;
    padding: 16px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.door-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 4px 4px;
}

.door-top-brand {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.3px;
}

.door-top-brand b {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    margin-left: 6px;
}

.door-top-event {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 700;
    text-align: right;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.door-camera {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    aspect-ratio: 3 / 4;
    box-shadow: var(--shadow);
}

.door-camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.door-frame {
    position: absolute;
    inset: 12%;
    pointer-events: none;
}

.door-frame .corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--gold-light);
}

.door-frame .tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.door-frame .tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.door-frame .bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.door-frame .br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.door-camera-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.door-camera.is-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
}

.door-camera.is-unavailable::after {
    content: 'No se pudo acceder a la camara. Usa la busqueda manual.';
    padding: 0 28px;
    text-align: center;
    color: #cdd4de;
    font-size: 14px;
    font-weight: 700;
}

.door-camera.is-unavailable video,
.door-camera.is-unavailable .door-frame,
.door-camera.is-unavailable .door-camera-hint {
    display: none;
}

.door-status {
    min-height: 130px;
    border-radius: 16px;
    padding: 22px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: opacity 120ms ease;
}

.door-status.is-busy {
    opacity: 0.55;
}

.door-status-idle-text {
    margin: 0;
    padding: 30px 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 14.5px;
}

.door-status-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.door-status-pill {
    margin: 0 0 10px;
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}

.door-status-name {
    font-family: var(--font-display);
    font-size: clamp(28px, 8vw, 38px);
    margin: 0 0 10px;
    text-wrap: balance;
}

.door-status-detail {
    margin: 0 0 6px;
    font-size: 14.5px;
    color: var(--ink);
}

.door-status-message {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
}

.door-status-code {
    margin: 12px 0 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--muted);
}

.door-status.is-good .door-status-icon { background: rgba(59, 179, 131, 0.16); color: var(--good); }
.door-status.is-good .door-status-pill { background: rgba(59, 179, 131, 0.16); color: var(--good); }
.door-status.is-good { border-color: rgba(59, 179, 131, 0.4); }

.door-status.is-warn .door-status-icon { background: rgba(217, 164, 65, 0.18); color: var(--warn); }
.door-status.is-warn .door-status-pill { background: rgba(217, 164, 65, 0.18); color: var(--warn); }
.door-status.is-warn { border-color: rgba(217, 164, 65, 0.45); }

.door-status.is-bad .door-status-icon { background: rgba(226, 104, 95, 0.18); color: var(--bad); }
.door-status.is-bad .door-status-pill { background: rgba(226, 104, 95, 0.18); color: var(--bad); }
.door-status.is-bad { border-color: rgba(226, 104, 95, 0.45); }
.door-status.is-bad .door-status-message { color: var(--bad); }

.door-manual {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 4px 16px;
}

.door-manual summary {
    padding: 12px 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}

.door-manual[open] summary {
    color: var(--ink);
}

.door-manual-body {
    display: flex;
    gap: 8px;
    padding: 2px 0 16px;
}

.door-manual-body input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
    background: var(--soft);
    color: var(--ink);
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .door-camera {
        aspect-ratio: 16 / 10;
    }
}

.notes-panel {
    margin-top: 24px;
}

.notes-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.zone-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.zone-list li {
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
}

.zone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zone-name {
    font-weight: 800;
}

.zone-included {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
}

.zone-description-form {
    align-items: flex-start;
}

.zone-description-form label {
    flex: 1 1 100%;
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
}

.zone-description-form textarea {
    width: 100%;
    resize: vertical;
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: #192a3d;
}

.zone-included-products-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--muted);
}

.zone-included-products-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.zone-included-products-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    font-size: 13px;
}

.zone-included-qty-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.zone-included-qty-label input {
    width: 56px;
}

.notes-list li {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    background: var(--soft);
}

.notes-date {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary-dark);
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.notes-list p {
    margin: 6px 0 0;
}

.addon-list {
    display: grid;
    gap: 14px;
    margin: 14px 0 22px;
}

.addon-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 160ms ease;
}

.addon-item:hover {
    border-color: var(--gold-light);
}

.addon-item .addon-thumb {
    width: 64px;
    height: 64px;
    margin-bottom: 0;
    flex-shrink: 0;
    border-radius: 10px;
}

.addon-info {
    flex: 1;
}

.addon-info strong {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 17px;
    color: var(--primary);
}

.addon-item label {
    display: grid;
    gap: 4px;
    width: 96px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}

.addon-item input {
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 0 10px;
    text-align: center;
    font: inherit;
    font-weight: 800;
    color: var(--primary);
}

.addon-item input:focus {
    border-color: var(--gold);
    outline: 3px solid rgba(179, 137, 63, 0.15);
}

.order-breakdown {
    display: grid;
    gap: 6px;
    margin: 18px 0 0;
}

.order-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 14px;
}

.order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0;
    padding: 14px 18px;
    border: 1.5px solid var(--gold);
    border-radius: 10px;
    background: var(--gold-soft);
}

@media (prefers-reduced-motion: no-preference) {
    .order-total.is-pulsing {
        animation: total-pulse 420ms ease;
    }
}

@keyframes total-pulse {
    0% {
        transform: scale(1);
        box-shadow: none;
    }
    35% {
        transform: scale(1.03);
        box-shadow: 0 0 0 5px rgba(179, 137, 63, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

.order-total-label {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--muted);
}

.order-total-value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 24px;
    color: var(--primary-dark);
}

.guest-legend,
.seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.guest-legend span,
.seat-legend span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.available-dot {
    background: #ffffff;
    border: 2px solid var(--primary);
}

.selected-dot {
    background: var(--primary);
}

.held-dot {
    background: var(--warn);
}

.reserved-dot {
    background: #9aa6ac;
}

.layout-panel {
    margin-top: 16px;
}

.selection-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.25fr);
    gap: 16px;
    align-items: start;
}

/* Sin foto de referencia al lado (o con el mapa ya arriba, a todo el ancho) no
   hay segunda columna que dibujar -- una sola columna evita el hueco muerto
   que dejaria el grid de dos columnas con un solo hijo. */
.selection-workspace--single {
    grid-template-columns: 1fr;
}

.sticky-layout {
    position: sticky;
    top: 16px;
    margin-top: 0;
}

.tables-column {
    display: grid;
    gap: 16px;
}

.layout-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.layout-title-row h2 {
    margin: 0;
}

.selection-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.coordination-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    background: var(--soft);
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
}

.coordination-note strong {
    color: var(--primary);
}

.seat-form {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.seat-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0;
    background: var(--surface);
    overflow: hidden;
}

.seat-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: #f8fbfb;
}

.seat-table-header h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1;
}

.seat-table-header span {
    color: var(--muted);
    font-weight: 800;
}

.zone-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold) !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Una fila por mesa: el numero de columnas se fija al numero de sillas de esa
   mesa (--chairs, puesto inline por mesa en select.php) en vez de dejar que
   el grid las envuelva a una segunda fila. overflow-x es el respaldo para
   mesas con muchas sillas en pantallas angostas -- ahi se desliza en vez de
   apretar los botones hasta volverlos ilegibles. */
.seat-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(var(--chairs, 1), minmax(48px, 1fr));
    gap: 8px;
    padding: 18px;
    overflow-x: auto;
}

.seat {
    min-height: 44px;
}

.seat input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.seat span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.seat span:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Sin la palabra "Silla": el numero solo, grande, es todo lo que necesita
   el comprador para llevar la cuenta de lugares (ver nota arriba del grid). */
.seat-number {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.seat small {
    color: inherit;
    font-size: 10px;
    font-weight: 700;
}

.seat input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.seat.is-reserved span,
.seat input:disabled + span {
    background: #e4e9eb;
    color: #8a969d;
    cursor: not-allowed;
}

/* Selector de mesas completas (eventos en modo "por mesas") — misma paleta que .seat,
   pero cada tarjeta representa una mesa entera en vez de una sola silla. */
.table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.table-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 110px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.table-card:hover:not(:disabled) {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.table-card h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1;
}

.table-card small {
    color: inherit;
    font-size: 11px;
    font-weight: 700;
}

.table-card.is-selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.table-card.is-selected .zone-badge {
    color: var(--primary) !important;
}

.table-card.is-unavailable,
.table-card:disabled {
    background: #e4e9eb;
    color: #8a969d;
    cursor: not-allowed;
}

.confirm-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid #c8d5da;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(20, 36, 44, 0.13);
}

.confirm-bar > div {
    display: grid;
    gap: 4px;
}

.timer {
    color: var(--warn);
    font-size: 13px;
    font-weight: 800;
}

.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(25, 42, 61, 0.55);
}

.confirm-modal {
    width: min(440px, 100%);
    /* Fondo solido a proposito, NO var(--surface) -- mismo motivo que .fp-modal:
       dentro de .cuenta-shell esa variable es casi transparente. */
    background: #151a2a;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--shadow);
    text-align: left;
}

.confirm-modal h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.confirm-modal p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    white-space: pre-line;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 560px) {
    .confirm-modal-actions {
        flex-direction: column-reverse;
    }

    .confirm-modal-actions .button {
        width: 100%;
    }
}

.success-panel {
    text-align: center;
    width: min(640px, 100%);
    margin: 0 auto;
}

.success-hero {
    text-align: center;
    width: min(640px, 100%);
    margin: 0 auto 20px;
}

.success-hero h1 {
    font-size: 34px;
}

.success-hero h1::after {
    margin-left: auto;
    margin-right: auto;
}

.success-hero p {
    color: rgba(255, 255, 255, 0.85);
}

.success-hero .success-icon {
    margin: 0 auto 18px;
}

.success-panel p {
    margin-left: auto;
    margin-right: auto;
}

.success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 10px 26px rgba(179, 137, 63, 0.35);
}

.success-icon svg {
    width: 26px;
    height: 26px;
}

.code-stub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0;
    padding: 16px 28px;
    border: 1.5px dashed var(--gold);
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 1px;
    line-height: 1.3;
    word-break: break-word;
}

.order-summary-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 700;
    color: var(--primary);
}

.order-total {
    font-size: 1.15rem;
    margin: 4px 0 18px;
}

.success-actions {
    width: min(360px, 100%);
    margin: 24px auto 0;
}

.success-help {
    margin-top: 14px !important;
    font-size: 13px;
}

.ticket-grid {
    width: min(640px, 100%);
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
    gap: 18px;
}

.ticket-card {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .ticket-card {
        animation: ticket-deal-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(0.3s + var(--i, 0) * 110ms);
    }
}

.ticket-card {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.ticket-card:hover {
    transform: translateY(-4px) rotate(-0.6deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}

@keyframes ticket-deal-in {
    from {
        opacity: 0;
        transform: translateY(26px) rotate(-2.5deg) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
}

.ticket-top {
    padding: 20px 22px 18px;
    background: linear-gradient(180deg, var(--gold-soft), rgba(250, 245, 232, 0));
}

.ticket-top .eyebrow {
    margin-bottom: 8px;
}

.ticket-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ticket-seat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ticket-code {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: var(--primary);
}

.ticket-divider {
    position: relative;
    height: 0;
    border-top: 2px dashed var(--line);
}

.ticket-divider::before,
.ticket-divider::after {
    content: '';
    position: absolute;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--soft);
}

.ticket-divider::before {
    left: -11px;
}

.ticket-divider::after {
    right: -11px;
}

.ticket-qr {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.ticket-qr img {
    display: block;
    width: 168px;
    max-width: 100%;
    height: auto;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    cursor: zoom-in;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.ticket-qr img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.ticket-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 22px 20px;
}

.ticket-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}

.ticket-action-btn svg {
    width: 14px;
    height: 14px;
}

.ticket-action-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Boleto individual a "Imprimir" (el comprador lo guarda como PDF desde el
   propio dialogo del navegador) -- oculta todo el resto de la pagina y deja
   solo el boleto que se marco con .print-only. Fondo blanco fijo porque el
   panel normalmente vive sobre el degradado oscuro de .cuenta-shell, que no
   tiene caso imprimir. */
@media print {
    .topbar,
    .account-nav,
    .account-nav-burger,
    .cuenta-hero .actions,
    .site-foot,
    .ticket-actions {
        display: none !important;
    }

    body.printing-ticket .account-layout {
        display: block;
    }

    body.printing-ticket .account-section {
        display: none;
    }

    body.printing-ticket .ticket-card:not(.print-only) {
        display: none;
    }

    body.printing-ticket .ticket-card.print-only {
        display: flex !important;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    body.cuenta-shell {
        background: #ffffff;
    }

    body.cuenta-shell::before {
        display: none;
    }
}

.reservation-list {
    display: grid;
    gap: 10px;
    width: min(420px, 100%);
    margin: 24px auto 0;
}

.addon-summary {
    width: min(420px, 100%);
    margin: 20px auto 0;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    text-align: left;
}

.addon-summary p.eyebrow {
    margin-bottom: 6px;
}

.addon-summary ul {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--muted);
}

.reservation-list div {
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f7fafb;
    font-weight: 800;
}

.empty {
    margin: 0;
    padding: 44px 24px;
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    background: var(--soft);
    color: var(--muted);
    text-align: center;
    font-size: 14.5px;
}

.empty::before {
    content: '\2726';
    display: block;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 15px;
}

.section-gap {
    margin-top: 18px;
}

.search-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0;
    position: sticky;
    top: 12px;
    z-index: 5;
    padding: 16px;
    border-color: #c8d5da;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    color: var(--ink);
    font-weight: 800;
}

.search-box span {
    position: absolute;
    left: 16px;
    top: -9px;
    padding: 0 6px;
    background: #ffffff;
    color: var(--primary-dark);
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
}

.search-box input {
    width: 100%;
    height: 52px;
    border: 2px solid #c8d5da;
    border-radius: 6px;
    padding: 0 16px 0 42px;
    font: inherit;
    background: #ffffff;
}

.search-box::before {
    content: "";
    position: absolute;
    left: 17px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--muted);
    border-radius: 50%;
}

.search-box::after {
    content: "";
    position: absolute;
    left: 30px;
    width: 8px;
    height: 2px;
    background: var(--muted);
    transform: rotate(45deg);
    transform-origin: left center;
}

.search-box input:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(25, 42, 61, 0.14);
}

.search-box.select-box {
    flex: 0 1 240px;
}

.search-box.select-box::before,
.search-box.select-box::after {
    display: none;
}

.search-box.select-box select {
    width: 100%;
    height: 52px;
    border: 2px solid #c8d5da;
    border-radius: 6px;
    padding: 0 16px;
    font: inherit;
    background: #ffffff;
}

.search-box.select-box select:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(25, 42, 61, 0.14);
}

.search-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-weight: 800;
}

.search-counts span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 6px;
    background: #f3f7f7;
    border: 1px solid var(--line);
}

.search-counts strong {
    color: var(--primary-dark);
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.action-cell {
    min-width: 260px;
}

/* Formulario de abonar/pagar completo en Ordenes de compra: dos acciones distintas
   (agregar un abono vs. saldar todo) apiladas en vez de una sola fila de controles
   amontonados — el boton de "pagar completo" queda separado con su propia linea. */
.payment-actions-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 280px;
}

.payment-actions-full {
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    width: 100%;
    text-align: left;
}

.inline-form input {
    width: 96px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 10px;
    font: inherit;
    background: #ffffff;
}

.inline-form input[type="email"] {
    width: 220px;
}

.release-form input {
    width: 180px;
}

.table-edit-form {
    gap: 10px;
}

.table-edit-form label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.table-edit-form input[name="table_number"],
.table-edit-form input[name="chair_count"] {
    width: 92px;
}

.table-edit-form input[name="label"] {
    width: 180px;
}

.table-edit-form input[name="nombre"],
.table-edit-form input[name="apellido_paterno"],
.table-edit-form input[name="apellido_materno"],
.table-edit-form input[name="telefono"],
.table-edit-form input[name="menu_especial"] {
    width: 150px;
}

.table-edit-form input[name="ticket_quantity"],
.table-edit-form input[name="adultos"],
.table-edit-form input[name="infantiles"] {
    width: 76px;
}

.status {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 6px;
    font-weight: 800;
}

.status.good {
    color: var(--good);
    background: #e8f6ef;
}

.status.warn {
    color: var(--warn);
    background: #fff3df;
}

.status.bad {
    color: var(--bad);
    background: #fdecec;
}

.code {
    overflow: auto;
    padding: 16px;
    border-radius: 6px;
    background: #0f1e24;
    color: #edf7f7;
}

.checklist {
    display: grid;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.checklist li {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.checklist li.ok::before {
    content: "OK ";
    color: var(--good);
    font-weight: 900;
}

.checklist li.missing::before {
    content: "Falta ";
    color: var(--bad);
    font-weight: 900;
}

.checklist li a {
    color: var(--primary);
    text-decoration: none;
}

.checklist li a:hover strong {
    text-decoration: underline;
}

.checklist-body {
    display: flex;
    gap: 28px;
    align-items: center;
}

.checklist-body .checklist {
    flex: 1 1 auto;
}

.checklist-gauge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-track {
    stroke: var(--line);
}

.gauge-fill {
    stroke: var(--gold);
    transition: stroke-dashoffset 600ms ease;
}

.gauge-fill-complete {
    stroke: var(--good);
}

.gauge-percent-text {
    font-family: var(--font-display);
    font-size: 26px;
    fill: var(--primary);
}

.gauge-sub-text {
    font-size: 12px;
    fill: var(--muted);
}

@media (max-width: 640px) {
    .checklist-body {
        flex-direction: column;
        align-items: stretch;
    }

    .checklist-gauge {
        align-self: center;
    }
}

@media (max-width: 760px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 18px;
    }

    .event-banner h1 {
        font-size: 30px;
    }

    .page {
        width: min(100% - 20px, 1120px);
        padding: 20px 0;
    }

    .hero,
    .panel,
    .auth-card {
        padding: 22px;
    }

    .hero h1,
    .panel h1,
    .auth-card h1 {
        font-size: 28px;
    }

    .row-panel,
    .search-panel,
    .form-grid,
    .detail-grid,
    .selection-summary,
    .selection-workspace,
    .event-hero {
        grid-template-columns: 1fr;
    }

    .row-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-panel {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .event-layout {
        min-height: 240px;
    }

    .sticky-layout {
        position: static;
    }

    .layout-preview.large {
        max-height: 360px;
    }

    .seat-grid {
        grid-template-columns: repeat(var(--chairs, 1), minmax(40px, 1fr));
        gap: 6px;
    }

    .code-stub {
        padding: 14px 18px;
        font-size: 1.2rem;
    }

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

    .ticket-top {
        padding: 20px 20px 16px;
    }

    .ticket-qr img {
        width: 148px;
    }

    .confirm-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .action-cell {
        min-width: 220px;
    }
}

/* ==========================================================================
   Cuenta del cliente — fondo nebuloso continuo (no solo el hero, toda la
   pagina), y las mismas propiedades reescritas que .admin-shell/.door-shell
   para que .panel, .account-nav, .faq-item, etc. se reskinen solos via las
   custom properties. Las tarjetas se quitaron del markup de las vistas de
   cuenta-*.php (info-grid, empty-state, faq quedan sueltas sobre el fondo);
   lo unico que sigue siendo tarjeta real es el boleto con QR — sigue usando
   .panel a proposito y aqui se ve como cristal esmerilado sobre el cielo.
   ========================================================================== */

.cuenta-shell {
    color-scheme: dark;
    --ink: #e9edf5;
    --muted: #9aa7ba;
    --line: rgba(255, 255, 255, 0.14);
    --surface: rgba(255, 255, 255, 0.06);
    --soft: rgba(255, 255, 255, 0.03);
    --primary: #e9edf5;
    --primary-dark: #c3cad6;
    --gold: #d8b05e;
    --gold-light: #e9d19c;
    --gold-soft: rgba(216, 176, 94, 0.16);
    --good: #3bb383;
    --warn: #d9a441;
    --bad: #e2685f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.25);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25);
    min-height: 100vh;
    background-color: #0b0e18;
    color: var(--ink);
}

/* El cielo vive en una capa aparte, fija al viewport (no al alto de la
   pagina) — asi el contenido se desliza encima y las estrellas/nebulosas se
   quedan quietas, sin que el degradado de fondo se corte cuando la pagina es
   mas alta que una pantalla (eso pasaba usando background-attachment:fixed
   directo en .cuenta-shell: los porcentajes de posicion se recalculan contra
   el viewport y el degradado "se acababa" a la mitad de una pagina larga). */
.cuenta-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(1.6px 1.6px at 8% 12%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.2px 1.2px at 22% 38%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.6px 1.6px at 38% 6%, rgba(230, 213, 172, 0.45), transparent),
        radial-gradient(1.2px 1.2px at 54% 30%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.6px 1.6px at 68% 15%, rgba(230, 213, 172, 0.35), transparent),
        radial-gradient(1.2px 1.2px at 82% 42%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.6px 1.6px at 94% 8%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.2px 1.2px at 14% 68%, rgba(230, 213, 172, 0.3), transparent),
        radial-gradient(1.6px 1.6px at 45% 80%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.2px 1.2px at 78% 88%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.6px 1.6px at 92% 65%, rgba(230, 213, 172, 0.3), transparent),
        radial-gradient(ellipse 1000px 780px at 12% 10%, rgba(147, 91, 211, 0.34), transparent 68%),
        radial-gradient(ellipse 950px 720px at 88% 8%, rgba(64, 158, 196, 0.28), transparent 66%),
        radial-gradient(ellipse 1050px 880px at 82% 92%, rgba(199, 92, 149, 0.26), transparent 68%),
        radial-gradient(ellipse 850px 720px at 10% 95%, rgba(216, 176, 94, 0.24), transparent 66%),
        linear-gradient(180deg, #141c30 0%, #10141f 60%, #0d1120 100%);
}

.cuenta-shell > * {
    position: relative;
    z-index: 1;
}

.cuenta-shell > .layout-zoom-overlay {
    position: fixed;
}

/* Mismo problema que .layout-zoom-overlay arriba: confirm-modal.js hace
   document.body.appendChild(overlay), asi que .confirm-modal-overlay cae
   como hijo directo de body y ".cuenta-shell > *" (misma especificidad,
   pero declarada despues en el archivo) le gana su position:fixed y lo deja
   en relative -- el aviso terminaba renderizado en flujo normal al final de
   la pagina en vez de flotar centrado sobre la pantalla. */
.cuenta-shell > .confirm-modal-overlay {
    position: fixed;
}

.cuenta-shell .topbar {
    background: linear-gradient(135deg, #141a26, #05070b);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cuenta-shell .button.primary {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--gold), #a9843a);
    color: #1a1206;
    box-shadow: 0 8px 20px rgba(201, 162, 75, 0.28);
}

.cuenta-shell .button.primary:hover {
    background: linear-gradient(135deg, #d8b05e, #b8923f);
    box-shadow: 0 14px 28px rgba(201, 162, 75, 0.4), 0 0 0 3px rgba(216, 176, 94, 0.18);
}

/* El .button plano (no .primary, ej. "Ver mi graduacion" / "Cerrar sesion") no
   tenia equivalente oscuro para :hover -- el :hover base le pone fondo casi
   blanco (#f7fafb) pensado para el tema claro, pero el texto sigue heredando
   --ink, que aqui es casi blanco tambien. Texto invisible sobre su propio
   fondo al pasar el mouse. .admin-shell ya tenia este caso cubierto; a este
   panel se le habia quedado pendiente. */
.cuenta-shell .button {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.cuenta-shell .button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.26);
}

.cuenta-shell .form input,
.cuenta-shell .form select,
.cuenta-shell .form textarea,
.cuenta-shell .code-form input {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line);
    color: var(--ink);
}

.cuenta-shell .data-table th {
    background: rgba(255, 255, 255, 0.04);
}

.cuenta-shell .data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.cuenta-shell code {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
}

/* Seleccion de sillas/mesas — mismo tema nebuloso que el resto del flujo de
   compra, con mas profundidad y contraste que el resto de .cuenta-shell
   porque aqui la claridad es critica (elegir el lugar correcto bajo presion
   el dia del evento). */
.cuenta-shell .coordination-note {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line);
    border-left-color: var(--gold);
}

.cuenta-shell .coordination-note strong {
    color: var(--ink);
}

.cuenta-shell .guest-legend span,
.cuenta-shell .seat-legend span {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line);
    color: var(--muted);
}

.cuenta-shell .available-dot {
    background: transparent;
    border-color: var(--muted);
}

.cuenta-shell .selected-dot {
    background: var(--gold);
}

/* Mismo gris que .reserved-dot a proposito, no var(--warn) -- ese tono queda casi
   identico al dorado de "Seleccionada" en este tema, y ademas una silla apartada
   por alguien mas se ve igual de bloqueada que una ya ocupada en la selección real
   (solo cambia el texto de ayuda), asi que la leyenda no deberia prometer un color
   que no existe en la practica. */
.cuenta-shell .held-dot {
    background: #5a6474;
}

.cuenta-shell .reserved-dot {
    background: #5a6474;
}

/* La tarjeta por mesa le robaba ancho a las sillas: 12 sillas de 48px no
   entraban en la columna y la ultima quedaba fuera con scroll horizontal
   invisible. Mismo criterio que el resto de .cuenta-shell (ver nota de
   .account-section arriba): sin tarjeta contenedora, tipografia plana y una
   linea entre mesas -- las sillas mismas siguen siendo la eleccion tocable. */
.cuenta-shell .seat-table {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.cuenta-shell .tables-column {
    gap: 0;
}

.cuenta-shell .seat-table + .seat-table {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.cuenta-shell .seat-table-header {
    background: transparent;
    border-bottom: none;
    padding: 0 0 16px;
}

/* Las sillas ya no se aprietan en una sola fila con scroll horizontal oculto
   -- se envuelven en las filas que hagan falta para quedar todas completas
   y visibles sin deslizar. */
.cuenta-shell .seat-grid {
    grid-auto-flow: unset;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    padding: 0;
    row-gap: 10px;
    overflow-x: visible;
}

.cuenta-shell .zone-badge {
    background: var(--gold-soft);
}

/* .notes-date usa --primary-dark como FONDO (pensado para el tema claro, donde
   si es un color oscuro real) -- dentro de .cuenta-shell esa misma variable se
   redefine como un tono claro de texto, no de fondo, y el badge quedaba con
   texto dorado claro sobre un fondo tambien claro, casi invisible. Un tono
   oscuro fijo aqui mantiene el mismo look de "pastilla oscura" sin depender
   de un token que cambia de sentido segun el tema. */
.cuenta-shell .notes-date {
    background: rgba(0, 0, 0, 0.35);
}

.cuenta-shell .seat span,
.cuenta-shell .table-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line);
    color: var(--ink);
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}

.cuenta-shell .seat span:hover,
.cuenta-shell .table-card:hover:not(:disabled) {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.cuenta-shell .seat input:checked + span,
.cuenta-shell .table-card.is-selected {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--gold), #a9843a);
    color: #1a1206;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 22px rgba(201, 162, 75, 0.35), 0 0 0 3px rgba(216, 176, 94, 0.16);
}

.cuenta-shell .table-card.is-selected .zone-badge {
    color: var(--gold) !important;
}

.cuenta-shell .seat.is-reserved span,
.cuenta-shell .seat input:disabled + span,
.cuenta-shell .table-card.is-unavailable,
.cuenta-shell .table-card:disabled {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    box-shadow: none;
}

.cuenta-shell .layout-panel .layout-preview {
    border-radius: 14px;
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.03);
}

.cuenta-shell .confirm-bar {
    border-color: var(--line);
    background: rgba(11, 14, 24, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
}

.cuenta-shell .timer {
    color: var(--warn);
}

@media (prefers-reduced-motion: no-preference) {
    .cuenta-shell .seat-table {
        animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: min(calc(var(--i, 0) * 70ms), 560ms);
    }

    .cuenta-shell .table-grid {
        animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

/* ==========================================================================
   Admin dark shell (Nebula-inspired) — scoped under .admin-shell.
   Most components reskin automatically via the overridden custom
   properties below; a handful of rules with hardcoded light colors get
   explicit dark equivalents.
   ========================================================================== */

.admin-shell,
.door-shell {
    color-scheme: dark;
    --ink: #e7ebf1;
    --muted: #8b96a8;
    --line: #262e3a;
    --surface: #151a24;
    --soft: #0b0e14;
    --primary: #e7ebf1;
    --primary-dark: #c3cad6;
    --gold: #c9a24b;
    --gold-light: #e4c98a;
    --gold-soft: #26200f;
    --good: #3bb383;
    --warn: #d9a441;
    --bad: #e2685f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.25);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: var(--soft);
    color: var(--ink);
    min-height: 100vh;
}

.admin-shell .topbar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #141a26, #05070b);
    border-bottom: 1px solid var(--line);
}

.admin-shell .topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.4px 1.4px at 10% 30%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.1px 1.1px at 26% 65%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.4px 1.4px at 44% 20%, rgba(230, 213, 172, 0.5), transparent),
        radial-gradient(1.1px 1.1px at 61% 70%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.4px 1.4px at 79% 35%, rgba(230, 213, 172, 0.45), transparent),
        radial-gradient(1.1px 1.1px at 92% 65%, rgba(255, 255, 255, 0.35), transparent);
    background-repeat: no-repeat;
    pointer-events: none;
}

.admin-shell .topbar > * {
    position: relative;
    z-index: 1;
}

.admin-shell .topnav a {
    color: var(--muted);
}

.admin-shell .topnav a:hover {
    color: var(--ink);
}

.admin-shell .button,
.door-shell .button {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.admin-shell .button:hover,
.door-shell .button:hover {
    background: #1c2230;
    border-color: #333d4f;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.admin-shell .button.primary,
.door-shell .button.primary {
    background: linear-gradient(135deg, var(--gold), #a9843a);
    border-color: var(--gold);
    color: #1a1206;
    box-shadow: 0 8px 20px rgba(201, 162, 75, 0.28);
}

.admin-shell .button.primary:hover,
.door-shell .button.primary:hover {
    background: linear-gradient(135deg, #d8b05e, #b8923f);
    box-shadow: 0 14px 30px rgba(201, 162, 75, 0.4), 0 0 0 3px rgba(201, 162, 75, 0.18);
}

.admin-shell .panel h1 {
    position: relative;
    padding-bottom: 16px;
}

.admin-shell .panel h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-light), transparent);
}

.admin-shell .stat-item-value {
    text-shadow: 0 0 24px rgba(201, 162, 75, 0.25);
}

.admin-shell .button.danger {
    border-color: #7a3230;
    color: #f0958d;
}

.admin-shell .button.danger:hover {
    background: rgba(226, 104, 95, 0.12);
}

.admin-shell .event-nav a.active {
    background: var(--gold);
    color: #1a1206;
}

/* :not(.active): esta regla y la de arriba tienen la misma especificidad, asi
   que sin esto, pasar el mouse sobre la pestana YA activa le pisaba el fondo
   dorado con el fondo oscuro de :hover (por venir despues en el archivo) y
   dejaba el texto oscuro de .active casi invisible sobre fondo oscuro. */
.admin-shell .event-nav a:hover:not(.active) {
    background: var(--surface);
}

.admin-shell .form input,
.admin-shell .form select,
.admin-shell .form textarea,
.admin-shell .code-form input,
.admin-shell .search-box input,
.admin-shell .search-box.select-box select,
.admin-shell .inline-form input {
    background: #10141d;
    border-color: var(--line);
    color: var(--ink);
}

.admin-shell code {
    background: #10141d;
    color: var(--ink);
}

.admin-shell .data-table th {
    background: #10141d;
}

.admin-shell .data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.014);
}

.admin-shell .data-table tbody tr:hover {
    background: #10141d;
}

.admin-shell .seat-table-header {
    background: #10141d;
}

.admin-shell .seat span {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.admin-shell .seat input:checked + span {
    border-color: var(--gold);
    background: var(--gold);
    color: #1a1206;
}

.admin-shell .seat.is-reserved span,
.admin-shell .seat input:disabled + span {
    background: #10141d;
    color: var(--muted);
}

.admin-shell .confirm-bar {
    border-color: var(--line);
    background: rgba(11, 14, 20, 0.96);
}

.admin-shell .available-dot {
    background: transparent;
    border-color: var(--muted);
}

.admin-shell .selected-dot {
    background: var(--gold);
}

.admin-shell .badge {
    background: rgba(139, 150, 168, 0.16);
    color: var(--ink);
}

.admin-shell .badge.status-used,
.admin-shell .badge.status-active,
.admin-shell .badge.status-paid,
.admin-shell .badge.status-resolved {
    background: rgba(59, 179, 131, 0.16);
    color: var(--good);
}

.admin-shell .badge.status-available,
.admin-shell .badge.status-closed,
.admin-shell .badge.status-inactive,
.admin-shell .badge.status-draft,
.admin-shell .badge.status-expired {
    background: rgba(139, 150, 168, 0.16);
    color: var(--ink);
}

.admin-shell .badge.status-holding,
.admin-shell .badge.status-pending,
.admin-shell .badge.status-paused,
.admin-shell .badge.status-open {
    background: rgba(217, 164, 65, 0.16);
    color: var(--warn);
}

.admin-shell .badge.status-cancelled,
.admin-shell .badge.status-failed {
    background: rgba(226, 104, 95, 0.16);
    color: var(--bad);
}

.admin-shell .status.good {
    background: rgba(59, 179, 131, 0.14);
}

.admin-shell .status.warn {
    background: rgba(217, 164, 65, 0.14);
}

.admin-shell .status.bad {
    background: rgba(226, 104, 95, 0.14);
}

.admin-shell .empty-preview,
.admin-shell .layout-preview {
    background: #10141d;
}

.admin-shell .search-panel {
    background: rgba(21, 26, 36, 0.9);
    border-color: var(--line);
}

.admin-shell .search-box span {
    background: var(--soft);
    color: var(--muted);
}

.admin-shell .search-counts span {
    background: var(--soft);
    border-color: var(--line);
}

.admin-shell .stat-item:hover {
    background: #10141d;
}

.admin-layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 68px);
}

.admin-sidebar {
    width: 232px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 68px);
    padding: 24px 14px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: inset -1px 0 0 rgba(201, 162, 75, 0.08);
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.admin-sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

.admin-sidebar-nav a svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    opacity: 0.85;
}

.admin-sidebar-nav a:hover {
    background: var(--soft);
    color: var(--ink);
}

.admin-sidebar-label {
    margin: 16px 14px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.65;
}

.admin-sidebar-nav > .admin-sidebar-label:first-child {
    margin-top: 0;
}

.admin-sidebar-help {
    margin-top: auto;
}

.admin-sidebar-nav a.active {
    background: linear-gradient(90deg, var(--gold-soft), rgba(38, 32, 15, 0));
    color: var(--gold-light);
}

.admin-sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    box-shadow: 0 0 12px rgba(201, 162, 75, 0.5);
}

.admin-sidebar-foot {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--line);
}

.admin-sidebar-foot a {
    display: block;
    padding: 10px 14px;
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.admin-sidebar-foot a:hover {
    color: var(--ink);
}

.admin-sidebar-tagline {
    padding: 4px 14px 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.8;
}

.admin-sidebar-tagline::before {
    content: '\2726  ';
    color: var(--gold);
}

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

.admin-content .page {
    width: calc(100% - 48px);
}

@media (max-width: 900px) {
    .admin-layout {
        flex-direction: column;
    }

    /* .admin-content es un flex item de .admin-layout (ahora en columna) --
       el "stretch" automatico de align-items no basta cuando el contenido de
       adentro es texto largo sin envolver (ej. el nombre de un evento):
       el navegador termina anchando la caja al contenido en vez de al 375px
       reales de pantalla, y todo lo de adentro se ensancha en cadena
       (.page, .row-panel, el h1...). Ancho explicito, sin ambiguedad. */
    .admin-content {
        width: 100%;
    }

    .admin-sidebar {
        position: static;
        width: 100%;
        /* min-width:0 es lo que de verdad deja que overflow-x:auto funcione aqui:
           sin esto, un item de flex nunca se encoge por debajo del ancho minimo
           de su contenido (default min-width:auto), asi que en vez de volverse
           scrollable dentro de si misma, empujaba TODA la pagina mas ancha que
           la pantalla -- confirmado con una auditoria real en movil: el sidebar
           se salia hasta 552px de la pantalla en varias pantallas del admin. */
        min-width: 0;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 10px 14px;
    }

    .admin-sidebar-nav {
        /* flex: none cancela el flex:1 de la regla de escritorio (ahi tiene
           sentido, reparte alto en una columna) -- sin esto, aqui en fila
           horizontal se encogia a un puñado de pixeles para "compartir" el
           ancho con el tagline y "Cerrar sesion", y como no le cabia ni un
           icono ahi ni tenia su propio scroll, los iconos se desbordaban
           encima de ese texto en vez de quedarse dentro de su caja. */
        flex: none;
        flex-direction: row;
        min-width: 0;
    }

    .admin-sidebar-label {
        display: none;
    }

    .admin-sidebar-nav a span {
        display: none;
    }

    .admin-sidebar-help {
        margin-top: 0;
    }

    .admin-sidebar-foot {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .admin-sidebar {
        animation: fadeInLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .admin-content .panel,
    .admin-content .stats-strip,
    .admin-content .table-panel {
        animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .admin-content .stats-strip {
        animation-delay: 0.05s;
    }

    .admin-content .table-panel {
        animation-delay: 0.1s;
    }

    .admin-sidebar-nav a,
    .stat-item,
    .data-table tbody tr {
        transition: background 140ms ease, color 140ms ease, transform 140ms ease;
    }

    .button:active {
        transform: scale(0.97);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.faq-section-title {
    margin: 26px 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}

.faq-section-title:first-child {
    margin-top: 0;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    margin-bottom: 8px;
    padding: 0 18px;
}

/* Variante sin tarjeta contenedora (pagina del evento): el fondo de la seccion
   es el mismo gris de la pagina, asi que las filas necesitan su propia
   superficie blanca para distinguirse — en vez de otra tarjeta blanca extra
   envolviendolas a todas. */
.guest-faq-loose {
    margin-top: 40px;
}

.guest-faq-loose .faq-item {
    background: var(--surface);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--gold);
    transition: transform 160ms ease;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-answer {
    /* !important overrides the browser's own `details:not([open]) > * { display: none }`
       rule, which otherwise wins on specificity and would block the grid-rows transition
       below (a closed <details> can't animate something it never renders in the first place). */
    display: grid !important;
    grid-template-rows: 0fr;
    padding-bottom: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
    transition: grid-template-rows 320ms ease, padding-bottom 320ms ease;
}

.faq-item[open] .faq-answer {
    grid-template-rows: 1fr;
    padding-bottom: 16px;
}

.faq-answer p {
    margin: 0;
    overflow: hidden;
}

.faq-list-plain {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.faq-list-plain li {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
}

.guest-faq-contact {
    margin: 16px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--ink);
    font-size: 13.5px;
}

.guest-faq-contact a {
    color: var(--primary);
}

/* ==========================================================================
   Sitio publico de la empresa (nebula.events) — home, esencia, marcas,
   galeria. Reusa el mismo motivo "cielo estrellado" del event-banner para
   que el sitio de cara al publico se sienta igual de cuidado que el resto
   de la marca, no como una pantalla de admin con texto encima.
   ========================================================================== */

.company-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(165deg, rgba(36, 24, 56, 0.78), rgba(13, 10, 20, 0.68));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(216, 176, 94, 0.22);
    --gold: #d8b05e;
    --gold-light: #e9d19c;
}

/* Reflector que sigue el cursor — un span inyectado dentro de secciones
   oscuras y tarjetas. JS solo actualiza --spot-x/--spot-y en cada mousemove
   y agrega/quita "spotlight-active" en enter/leave; todo lo visual vive aqui. */
.spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    background: radial-gradient(
        circle 260px at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255, 255, 255, 0.16),
        transparent 70%
    );
}

.spotlight-active > .spotlight {
    opacity: 1;
}

.essence-card > .spotlight {
    background: radial-gradient(
        circle 200px at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(230, 213, 172, 0.35),
        transparent 70%
    );
}

.company-section {
    padding: 72px 0;
}

.company-section-head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.company-section-head h2 {
    position: relative;
    display: inline-block;
    margin: 8px 0 18px;
    padding-bottom: 16px;
}

.company-section-head h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.essence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.essence-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 12px;
    padding: 32px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.essence-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.essence-card h3 {
    margin: 0 0 10px;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.essence-card p {
    line-height: 1.65;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

/* En cuanto gallery-masonry.js corre, envuelve las fotos en columnas reales
   (siempre llena la mas corta) y el grid pasa a acomodarlas lado a lado en
   vez de envolver en filas — el flex-wrap de arriba es solo el respaldo
   mientras las imagenes cargan o si el JS no corre. */
.gallery-grid:has(.gallery-grid-col) {
    flex-wrap: nowrap;
}

.gallery-grid-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 16px;
}

.gallery-tile {
    flex: 1 1 260px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--soft), var(--line));
    border: 1px solid var(--line);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-grid-col .gallery-tile {
    flex: 0 0 auto;
}

.gallery-tile img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-tile:not(:has(img)) {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.gallery-tile:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow);
}

.epic-hero-inner {
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Scroll-reveal: JS toggles .is-visible via IntersectionObserver as each
   piece scrolls into view. Falls back to always-visible with no JS or when
   the user asked for less motion. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
}

.reveal-stagger.is-visible > * {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal-stagger.is-visible > *:nth-child(2) {
    animation-delay: 0.08s;
}

.reveal-stagger.is-visible > *:nth-child(3) {
    animation-delay: 0.16s;
}

.reveal-stagger.is-visible > *:nth-child(4) {
    animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal-stagger > * {
        opacity: 1;
        animation: none;
    }

    .epic-hero-inner {
        animation: none;
    }

    .scroll-cue-arrow {
        animation: none;
    }
}

/* Card tilt (JS sets the actual rotation via inline transform on mousemove);
   this just prepares perspective + a smooth return when the cursor leaves. */
.essence-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

@media (max-width: 860px) {
    .essence-grid {
        grid-template-columns: 1fr;
    }
}

/* Pasos numerados (pagina "Nebula" — que le ofrece la plataforma al graduado). */
.steps-list {
    display: grid;
    gap: 4px;
}

.step-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 24px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.step-item:last-child {
    border-bottom: none;
}

.step-number {
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--gold);
    line-height: 1;
}

.step-item h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.step-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.offer-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.offer-item-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.offer-item h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.offer-item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 860px) {
    .offer-grid {
        grid-template-columns: 1fr;
    }

    .step-item {
        grid-template-columns: 48px 1fr;
        gap: 16px;
    }

    .step-number {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   Epico: hero a pantalla completa, cielo estrellado real (canvas) y la
   home reestructurada como un recorrido narrativo por los 5 ejes de marca
   (The Journey, The Constellations, The Supernovas, The Rocket Science,
   Reach for the Stars). Solo para el sitio publico de cara al visitante.
   ========================================================================== */

.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Cuando una seccion full-bleed abre la pagina, se come el padding superior
   de .page para que el fondo llegue hasta pegado al header, sin franja. */
.page > .full-bleed:first-child {
    margin-top: -48px;
}

[data-starfield-zone] {
    position: relative;
}

.starfield-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
}

.epic-hero {
    position: relative;
    min-height: 78vh;
    padding: 110px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 20%, #1c2c40, var(--primary-dark) 70%);
    color: #ffffff;
}

@media (max-width: 700px) {
    .epic-hero {
        min-height: 62vh;
        padding: 80px 20px;
    }
}

.epic-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 100%, rgba(230, 213, 172, 0.10), transparent 60%);
    pointer-events: none;
}

.epic-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}

.epic-hero .eyebrow {
    color: var(--gold-light);
    font-size: 15px;
    letter-spacing: 5px;
}

.epic-hero h1 {
    color: #ffffff;
    font-size: clamp(3rem, 7.2vw, 6.4rem);
    line-height: 1.02;
    letter-spacing: -2px;
    margin: 18px 0 26px;
}

.epic-hero p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

.epic-hero .actions {
    justify-content: center;
    margin-top: 36px;
}

.scroll-cue {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .scroll-cue {
        display: none;
    }
}

.scroll-cue-arrow {
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-cue-arrow {
        animation: scroll-cue-fall 1.8s ease-in-out infinite;
    }
}

@keyframes scroll-cue-fall {
    0%, 100% {
        transform: scaleY(1);
        opacity: 0.4;
    }
    50% {
        transform: scaleY(1.3);
        opacity: 1;
    }
}

/* Capitulos narrativos */
.chapter {
    position: relative;
    padding: 130px 24px;
    overflow: hidden;
}

.chapter-dark {
    background: linear-gradient(180deg, var(--primary-dark), var(--primary));
    color: rgba(255, 255, 255, 0.92);
}

.chapter-light {
    background: var(--surface);
}

.chapter-photo {
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.chapter-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(18, 21, 25, 0.62), rgba(18, 21, 25, 0.88));
}

.chapter-photo .chapter-tag {
    border-color: var(--gold-light);
    color: var(--gold-light);
}

.chapter-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.chapter-number {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.chapter-dark .chapter-number {
    color: var(--gold-light);
}

.chapter-light .chapter-number {
    color: var(--gold);
}

.chapter h2 {
    font-size: clamp(2.2rem, 5vw, 3.9rem);
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin: 0 0 24px;
}

.chapter-dark h2 {
    color: #ffffff;
}

.chapter p {
    font-size: 1.08rem;
    line-height: 1.75;
}

.chapter-dark p {
    color: rgba(255, 255, 255, 0.78);
}

.chapter-light p {
    color: var(--muted);
}

.chapter-tag {
    display: inline-block;
    margin-top: 30px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chapter-dark .chapter-tag {
    border: 1px solid var(--gold-light);
    color: var(--gold-light);
}

.chapter-light .chapter-tag {
    border: 1px solid var(--gold);
    color: var(--gold);
}

.chapter-final {
    padding: 100px 24px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, #1c2c40, var(--primary-dark) 70%);
    color: #ffffff;
}

.chapter-final h2 {
    font-size: clamp(2.6rem, 6.2vw, 5.2rem);
    line-height: 1.05;
    letter-spacing: -1px;
    color: #ffffff;
    margin: 18px 0 28px;
}

.chapter-final .actions {
    justify-content: center;
    margin-top: 36px;
}

@media (max-width: 700px) {
    .chapter {
        padding: 90px 20px;
    }

    .chapter-final {
        padding: 70px 20px;
    }
}

/* Filas de marca — Grupo Magasta (Fest / Bright & Light / Reveie), foto a un
   lado y contenido al otro, alternando orden con .reverse. */
.brand-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* height fija, no min-height: con min-height, una foto vertical (retrato)
       le gana en alto a la columna de texto durante el cálculo de la fila de
       grid (su relación de aspecto intrínseca "pesa" más que el texto), e
       infla toda la fila muy por encima de las demás. Con height fija, la
       fila no se recalcula por contenido — texto y foto se estiran parejo a
       esta medida y object-fit: cover recorta la foto para llenarla, así las
       tres filas (Fest / Bright & Light / Reveie) miden exactamente igual. */
    height: 820px;
    background: linear-gradient(180deg, var(--primary-dark), var(--primary));
    color: rgba(255, 255, 255, 0.9);
}

.brand-row.reverse .brand-visual {
    order: 2;
}

.brand-row.reverse .brand-content {
    order: 1;
}

.brand-visual {
    position: relative;
    overflow: hidden;
    /* min-height:0 pisa el min-height:auto implícito de todo hijo de grid, que
       de otro modo obliga a la fila a crecer hasta el tamaño natural de la
       foto sin importar la height fija de .brand-row de arriba. */
    min-height: 0;
}

.brand-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.brand-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 64px;
    /* mismo motivo que en .brand-visual: sin esto, el texto más largo (Fest)
       vuelve a inflar la fila por encima de la height fija de arriba. */
    min-height: 0;
}

.brand-tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--gold-light);
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Escapado con .brand-content para no chocar con el .brand-logo del topbar
   (misma clase, dos contextos distintos — antes se mezclaban por el orden
   en el archivo y el topbar heredaba un margin-bottom que no le tocaba). */
.brand-content .brand-logo {
    /* .brand-content es flex column, y su align-items:stretch (default) estira
       cualquier hijo sin ancho fijo al ancho completo de la columna, ignorando
       max-width/width:auto — el logo terminaba forzado a 200x52 sin respetar su
       proporción real, viéndose deforme/apachurrado. align-self lo saca de ese
       estirado; height:auto pisa el height:52px fijo del .brand-logo del topbar
       para que el ancho se calcule a partir del alto real, no al revés. */
    align-self: flex-start;
    height: auto;
    max-height: 52px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
    margin-bottom: 24px;
}

/* Bright & Light usa un lockup apilado (monograma + wordmark en dos líneas),
   no una wordmark horizontal como Fest/Reveie — a la misma altura de 52px el
   texto inferior queda ilegible, así que este logo necesita más alto. */
.brand-content .brand-logo-stacked {
    max-height: 88px;
}

.brand-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 18px;
}

.brand-desc {
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 28px;
    max-width: 460px;
}

/* Variante clara — rompe la racha de azules cuando varias filas de marca
   van seguidas; el logo (solo existe en blanco) se vuelve negro con brightness(0). */
.brand-row.light {
    background: linear-gradient(180deg, var(--surface), var(--soft));
    color: var(--muted);
}

.brand-row.light .brand-tag {
    border-color: var(--gold);
    color: var(--gold);
}

.brand-row.light .brand-logo {
    filter: brightness(0);
}

.brand-row.light .brand-quote {
    color: var(--primary);
}

.brand-row.light .brand-desc {
    color: var(--muted);
}

@media (max-width: 900px) {
    .brand-row,
    .brand-row.reverse {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }

    .brand-row .brand-visual,
    .brand-row.reverse .brand-visual {
        order: 1;
        min-height: 320px;
    }

    .brand-row .brand-content,
    .brand-row.reverse .brand-content {
        order: 2;
        padding: 48px 28px;
    }

    .brand-desc {
        max-width: none;
    }
}

/* Banner de cierre para Magasta como casa — sin logo propio, tratamiento
   tipografico con degradado dorado sobre el mismo cielo del resto del sitio. */
.group-banner {
    padding: 120px 24px;
    text-align: center;
    background: linear-gradient(180deg, var(--surface), var(--soft));
}

.group-banner-inner {
    max-width: 620px;
    margin: 0 auto;
}

.group-banner-word {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    letter-spacing: 8px;
    margin: 0 0 18px;
    background: linear-gradient(135deg, var(--primary), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.group-banner-tagline {
    display: block;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 24px;
}

.group-banner p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

@media (max-width: 700px) {
    .group-banner {
        padding: 90px 20px;
    }
}

/* Hero de pagina interior — version mas corta del epic-hero, para Nosotros,
   Nebula, Magasta, Galeria y Cotizar. Mismo cielo estrellado, misma escala
   tipografica, para que ninguna pagina se sienta "menos" que el Inicio. */
.page-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 20%, #1c2c40, var(--primary-dark) 70%);
    color: #ffffff;
    padding: 90px 24px;
}

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 100%, rgba(230, 213, 172, 0.10), transparent 60%);
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-hero .eyebrow {
    color: var(--gold-light);
    font-size: 14px;
    letter-spacing: 4px;
}

.page-hero h1 {
    color: #ffffff;
    font-size: clamp(2.6rem, 6.2vw, 5rem);
    line-height: 1.04;
    letter-spacing: -1.5px;
    margin: 16px 0 20px;
}

.page-hero p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .page-hero-inner {
        animation: none;
    }
}

@media (max-width: 700px) {
    .page-hero {
        min-height: 48vh;
        padding: 70px 20px;
    }
}

/* Nebulosa a color — mismas manchas (purpura/azul/rosa/dorado) que el fondo
   del panel de cliente (.cuenta-shell::before), para que el sitio publico se
   sienta parte del mismo universo visual y no solo un azul marino plano.
   Se agregan como ::before detras del canvas de estrellas y del contenido. */
.epic-hero,
.page-hero,
.chapter-dark:not(.chapter-photo),
.chapter-final,
.brand-row:not(.light) {
    --gold: #d8b05e;
    --gold-light: #e9d19c;
}

.epic-hero::before,
.page-hero::before,
.chapter-dark:not(.chapter-photo)::before,
.chapter-final::before,
.brand-row:not(.light)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(ellipse 900px 700px at 12% 10%, rgba(147, 91, 211, 0.24), transparent 62%),
        radial-gradient(ellipse 850px 650px at 88% 8%, rgba(64, 158, 196, 0.2), transparent 60%),
        radial-gradient(ellipse 950px 800px at 82% 92%, rgba(199, 92, 149, 0.18), transparent 62%),
        radial-gradient(ellipse 750px 650px at 10% 95%, rgba(216, 176, 94, 0.16), transparent 60%);
}

.chapter-final {
    position: relative;
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .epic-hero::before,
    .page-hero::before,
    .chapter-dark:not(.chapter-photo)::before,
    .chapter-final::before,
    .brand-row:not(.light)::before {
        animation: nebula-drift-public 26s ease-in-out infinite alternate;
    }
}

@keyframes nebula-drift-public {
    0% {
        background-position: 12% 10%, 88% 8%, 82% 92%, 10% 95%;
    }
    100% {
        background-position: 18% 17%, 82% 14%, 76% 86%, 16% 89%;
    }
}

/* Botones primarios dentro de estas secciones oscuras — el mismo tratamiento
   dorado del panel de cliente en vez de navy-sobre-navy, para que el llamado
   a la accion realmente resalte contra el cielo estrellado. */
.epic-hero .button.primary,
.page-hero .button.primary,
.chapter-dark .button.primary,
.chapter-final .button.primary {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--gold), #a9843a);
    color: #1a1206;
    box-shadow: 0 8px 20px rgba(201, 162, 75, 0.28);
}

.epic-hero .button.primary:hover,
.page-hero .button.primary:hover,
.chapter-dark .button.primary:hover,
.chapter-final .button.primary:hover {
    background: linear-gradient(135deg, #e9d19c, #b8923f);
    box-shadow: 0 14px 28px rgba(201, 162, 75, 0.4), 0 0 0 3px rgba(216, 176, 94, 0.18);
}

/* Identidad de color por capitulo — cada eje narrativo de la home toma un
   acento distinto (violeta = constelaciones, coral = supernovas, azul =
   rocket science), reusando las mismas manchas de nebulosa que ya estan de
   fondo. La apertura y el cierre se quedan en dorado (llegada/logro). */
.chapter.chapter-accent-violet {
    --gold: #8b6fd1;
    --gold-light: #c9b6f7;
}

.chapter.chapter-accent-coral {
    --gold: #c14a72;
    --gold-light: #f2b8cd;
}

.chapter.chapter-accent-azure {
    --gold: #2f8fb0;
    --gold-light: #8fd3ec;
}

/* Reveie (entelados y ambientaciones sensoriales) toma un acento propio en
   la fila de marcas de Magasta — la tela como extension emocional, en un
   rosa-textil suave en vez del dorado de Fest. */
.brand-row.brand-accent-blush {
    --gold: #b56a92;
    --gold-light: #ecc9dc;
}

.chapter-accent-violet.chapter-photo::before {
    background: linear-gradient(180deg, rgba(32, 20, 46, 0.6), rgba(18, 12, 26, 0.88));
}

.chapter-accent-azure.chapter-photo::before {
    background: linear-gradient(180deg, rgba(14, 32, 40, 0.6), rgba(10, 20, 26, 0.88));
}

/* ==========================================================================
   Mapa interactivo de mesas — motor de dibujo en public/js/floor-plan.js
   (adaptado del prototipo en mapa-interactivo/). Usa directamente las
   variables de color ya definidas arriba (--surface, --line, --ink, --muted,
   --gold, --good, --warn, --bad) en vez de una paleta --fp-* aparte, para que
   se reskine solo dentro de .cuenta-shell (comprador) y .admin-shell (editor)
   igual que el resto de .panel/.seat/etc. Solo se portan las reglas que la
   fase actual usa: vista general del mapa (circulos de mesa) + el modal de
   "crear/editar mesa" del editor admin. Las reglas de detalle-de-silla del
   prototipo (.fp-detail-*, .fp-seat--*) no se portan a proposito: el modo de
   sillas SI usa el circulo de sillas del prototipo (renderTableDetail), en un
   modal grande al tocar una mesa -- pedido explicito para que la experiencia
   se sienta igual que la demo, no solo el mapa general.
   ========================================================================== */

#map-wrap,
#map-editor-wrap {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

/* El mapa de compra (comprador, no el editor admin) va a todo el ancho de la
   pagina y bien alto -- es la pieza central de la pantalla, no una miniatura
   de referencia al lado. */
#map-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

#map-wrap svg,
#map-editor-wrap svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 420px;
}

.map-panel {
    max-width: none;
}

.fp-overview {
    touch-action: pan-y;
}

.fp-overview.fp-overview--zoomed {
    touch-action: none;
}

.fp-bg {
    fill: var(--soft);
}

.fp-bg-image {
    pointer-events: none;
}

.fp-overview--with-bg .fp-table-circle {
    fill-opacity: 0.32;
}

.fp-table-circle {
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 2;
}

/* Modo "por mesas": esta mesa ya la aparto el comprador actual -- se distingue del
   verde/rojo de ocupacion normal (que solo indica "hay lugar" / "no hay lugar" para
   CUALQUIERA) con dorado, el mismo color que ya significa "esto es tuyo" en toda la
   app (checkbox de silla seleccionada, tarjeta de mesa .is-selected, leyenda). */
.fp-table--selected .fp-table-circle {
    fill: var(--gold);
    fill-opacity: 0.7;
    stroke: var(--gold);
    stroke-width: 3;
}

.fp-table-label {
    fill: #ffffff;
    font-size: 17px;
    font-weight: 700;
    pointer-events: none;
}

.fp-table {
    cursor: pointer;
}

.fp-table--editable {
    cursor: grab;
}

.fp-table--editable:active {
    cursor: grabbing;
}

.fp-zoom-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

.fp-zoom-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.fp-zoom-btn:hover {
    background: var(--soft);
}

.fp-zoom-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fp-zoom-btn--reset {
    font-size: 0.95rem;
}

/* Bandeja de mesas sin posicionar (editor admin, Fase 3) + controles de
   calibracion de tamaño — comparten el toolbar del editor. */
.fp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.fp-toolbar--settings {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
}

.fp-size-control {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--muted);
}

.fp-size-control input[type='range'] {
    accent-color: var(--gold);
}

.fp-unpositioned-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--soft);
    min-height: 56px;
}

.fp-unpositioned-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    cursor: grab;
}

/* Botones y formularios reutilizados por el modal de "crear/editar mesa". */
.fp-btn {
    font: inherit;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.fp-btn:hover {
    background: var(--soft);
}

.fp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fp-btn-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1206;
    font-weight: 700;
}

.fp-btn-primary:hover {
    background: #a9843a;
    border-color: #a9843a;
    color: #ffffff;
}

.fp-btn-danger {
    background: var(--surface);
    border-color: var(--bad);
    color: var(--bad);
}

.fp-btn-danger:hover {
    background: var(--soft);
}

.fp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.fp-field label {
    color: var(--muted);
}

.fp-field input,
.fp-field select {
    font: inherit;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}

.fp-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fp-stepper button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
}

.fp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
}

/* Fondo solido a proposito, NO var(--surface) -- dentro de .cuenta-shell esa
   variable es un blanco casi transparente (para el efecto de cristal
   esmerilado de las tarjetas normales), lo que dejaba el modal practicamente
   invisible sobre el cielo estrellado. Un modal necesita leerse encima de
   cualquier fondo, no fundirse con el. */
.fp-modal {
    background: #151a2a;
    border: 1px solid var(--line);
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.fp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fp-modal-header h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--ink);
}

.fp-modal-close {
    border: none;
    background: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
}

.fp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.fp-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.fp-alert--error {
    background: rgba(157, 45, 45, 0.12);
    color: var(--bad);
    border: 1px solid rgba(157, 45, 45, 0.28);
}

.fp-alert--success {
    background: rgba(19, 121, 80, 0.12);
    color: var(--good);
    border: 1px solid rgba(19, 121, 80, 0.28);
}

.fp-hint {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 4px;
}

/* Detalle de una mesa (circulo de sillas) -- el modal que abre al tocar una
   mesa en el mapa de compra, modo sillas. Mismo diseño que el prototipo. */
.fp-modal--detail {
    max-width: 520px;
}

.fp-detail-table {
    fill: var(--gold-soft);
    stroke: var(--gold);
    stroke-width: 2;
}

.fp-detail-table-label {
    font-size: 15px;
    font-weight: 700;
    fill: var(--ink);
}

.fp-seat circle {
    fill: var(--surface);
    stroke: var(--good);
    stroke-width: 2;
}

.fp-seat text {
    font-size: 13px;
    font-weight: 700;
    fill: var(--ink);
    pointer-events: none;
}

.fp-seat--reserved circle {
    fill: #9aa6ac;
    stroke: #9aa6ac;
}

.fp-seat--reserved text {
    fill: #ffffff;
}

/* Dorado, no var(--primary) -- mismo color que ya significa "esto es tuyo" en el
   resto de la app (checkbox de silla seleccionada, tarjeta de mesa .is-selected). */
.fp-seat--selected circle {
    fill: var(--gold);
    stroke: var(--gold);
}

.fp-seat--selected text {
    fill: #1a1206;
}

.fp-seat--clickable {
    cursor: pointer;
}

.fp-seat:not(.fp-seat--clickable) {
    cursor: default;
}