/* ========================================
   VARIABLES (tema claro / oscuro)
======================================== */

:root{

    --brand:#ff6600;
    --brand2:#ff9a3d;
    --brandSoft:rgba(255,102,0,0.12);
    --ind:#10b981;

    --bg:#f5f5f7;
    --surface:#ffffff;
    --surface2:#f1f1f4;
    --text:#16161a;
    --muted:#6b6b76;
    --border:#e6e6ea;
    --shadow:0 10px 30px rgba(20,20,40,0.08);

    --radius:20px;

    --fontTitle:'Poppins', 'Segoe UI', sans-serif;
    --fontBody:'Inter', 'Segoe UI', sans-serif;
}

body.dark{

    --bg:#0e0e12;
    --surface:#18181f;
    --surface2:#23232c;
    --text:#f2f2f5;
    --muted:#a0a0ab;
    --border:#2c2c36;
    --shadow:0 10px 30px rgba(0,0,0,0.45);
}



/* ========================================
   GENERAL
======================================== */

html{

    scroll-behavior:smooth;
}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:var(--fontBody);
    background:var(--bg);
    color:var(--text);
    transition:background 0.3s, color 0.3s;
    overflow-x:hidden;
}

body.modalOpen{

    overflow:hidden;
}

body.conCarrito{

    padding-bottom:110px;
}

h1, h2, h3, h4{

    font-family:var(--fontTitle);
}

button{

    font-family:inherit;
}

.mono{

    font-family:Consolas, monospace;
    font-size:12px;
}



/* ========================================
   BOTONES
======================================== */

.primaryBtn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    margin-top:18px;
    background:linear-gradient(135deg, var(--brand), var(--brand2));
    color:white;
    border:none;
    padding:15px 22px;
    border-radius:14px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    text-decoration:none;
    transition:0.25s;
    box-shadow:0 8px 20px rgba(255,102,0,0.3);
}

.primaryBtn:hover{

    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(255,102,0,0.4);
}

.primaryBtn:disabled{

    background:#9a9aa3;
    box-shadow:none;
    cursor:not-allowed;
    transform:none;
}

.primaryBtn.big{

    width:auto;
    margin-top:0;
    padding:16px 28px;
    font-size:16px;
}

.ghostBtn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--surface2);
    color:var(--text);
    border:1px solid var(--border);
    padding:12px 18px;
    border-radius:12px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    text-decoration:none;
    transition:0.25s;
}

.ghostBtn:hover{

    border-color:var(--brand);
    color:var(--brand);
}

.ghostBtn.light{

    background:rgba(255,255,255,0.12);
    color:white;
    border-color:rgba(255,255,255,0.3);
    backdrop-filter:blur(6px);
}

.ghostBtn.danger{

    color:#e53935;
    margin-top:12px;
}

.ghostBtn.full{

    width:100%;
    margin-top:12px;
}

.linkBtn{

    background:none;
    border:none;
    color:var(--brand);
    font-weight:700;
    cursor:pointer;
    margin-top:14px;
    display:inline-flex;
    gap:8px;
    align-items:center;
}



/* ========================================
   LANDING (PRESENTACIÓN)
======================================== */

.landing{

    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.bgVideo{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
}

.landingOverlay{

    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.35), rgba(0,0,0,0.85)),
        linear-gradient(180deg, rgba(255,102,0,0.15), rgba(0,0,0,0.6));
}

.landingContent{

    position:relative;
    z-index:2;
    text-align:center;
    color:white;
    padding:0 20px;
    animation:subir 1s ease both;
}

.landingLogo{

    display:block;
    margin-left:auto;
    margin-right:auto;
    width:220px;
    max-width:60vw;
    margin-bottom:22px;
    filter:drop-shadow(0 10px 25px rgba(0,0,0,0.5));
}

.landingKicker{

    display:inline-block;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    padding:8px 18px;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:30px;
    margin-bottom:22px;
    backdrop-filter:blur(6px);
}

.landingContent h1{

    font-size:clamp(42px, 8vw, 96px);
    line-height:1.02;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:-1px;
    margin-bottom:20px;
}

.gradText{

    background:linear-gradient(90deg, #ff6600, #ffb347, #ff6600);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:brillo 4s linear infinite;
}

.landingContent p{

    font-size:clamp(16px, 2vw, 22px);
    margin-bottom:36px;
    opacity:0.9;
}

.exploreBtn{

    background:linear-gradient(135deg, var(--brand), var(--brand2));
    color:white;
    border:none;
    padding:18px 42px;
    border-radius:40px;
    font-size:17px;
    font-weight:800;
    letter-spacing:1px;
    cursor:pointer;
    transition:0.3s;
    display:inline-flex;
    align-items:center;
    gap:12px;
    box-shadow:0 12px 30px rgba(255,102,0,0.45);
}

.exploreBtn:hover{

    transform:translateY(-4px) scale(1.03);
}

.scrollHint{

    position:absolute;
    bottom:30px;
    z-index:2;
    color:white;
    font-size:22px;
    cursor:pointer;
    animation:rebote 1.8s infinite;
}

@keyframes subir{

    from{ opacity:0; transform:translateY(30px); }
    to{ opacity:1; transform:none; }
}

@keyframes brillo{

    to{ background-position:200% center; }
}

@keyframes rebote{

    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(10px); }
}



/* ========================================
   HEADER
======================================== */

body.landingMode .header{

    display:none;
}

.header{

    width:100%;
    height:76px;
    background:color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter:blur(14px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid var(--border);
}

.logoContainer{

    display:flex;
    align-items:center;
    cursor:pointer;
}

.logoImg{

    height:52px;
    object-fit:contain;
}

.navbar{

    display:flex;
    gap:34px;
}

.navbar a{

    text-decoration:none;
    color:var(--text);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    transition:0.3s;
}

.navbar a:hover,
.activeNav{

    color:var(--brand) !important;
}

.headerRight{

    display:flex;
    align-items:center;
    gap:12px;
}

.themeToggle{

    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface2);
    color:var(--text);
    cursor:pointer;
    transition:0.3s;
}

.themeToggle:hover{

    transform:rotate(20deg);
}

.loginBtn{

    background:linear-gradient(135deg, var(--brand), var(--brand2));
    color:white;
    padding:11px 18px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s;
    white-space:nowrap;
}

.loginBtn:hover{

    transform:translateY(-2px);
}

.logoutIcon{

    opacity:0.7;
    font-size:13px;
}



/* ========================================
   HOME
======================================== */

.homePage,
.eventoPage,
.adminPage{

    display:none;
}



/* ========================================
   BANNER INTERACTIVO
======================================== */

.heroCarousel{

    position:relative;
    height:min(78vh, 640px);
    min-height:520px;
    overflow:hidden;
    background:#0b0b0f;
    color:white;
}

.slide{

    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.9s ease, visibility 0.9s;
}

.slide.active{

    opacity:1;
    visibility:visible;
}

.slideBg{

    position:absolute;
    inset:-40px;
    background-size:cover;
    background-position:center;
    filter:blur(28px) saturate(1.4) brightness(0.7);
    transform:scale(1.1);
}

.slide.active .slideBg{

    animation:kenBurns 12s ease-out both;
}

@keyframes kenBurns{

    from{ transform:scale(1.25); }
    to{ transform:scale(1.08); }
}

.slideShade{

    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(5,5,10,0.92) 0%, rgba(5,5,10,0.55) 55%, rgba(5,5,10,0.2) 100%),
        linear-gradient(0deg, rgba(5,5,10,0.85) 0%, transparent 40%);
}

.slideContent{

    position:relative;
    z-index:2;
    height:100%;
    max-width:1300px;
    margin:0 auto;
    padding:70px 60px 90px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:50px;
}

.slideText > *{

    opacity:0;
    transform:translateY(25px);
    transition:0.7s ease;
}

.slide.active .slideText > *{

    opacity:1;
    transform:none;
}

.slide.active .slideText > *:nth-child(2){ transition-delay:0.1s; }
.slide.active .slideText > *:nth-child(3){ transition-delay:0.2s; }
.slide.active .slideText > *:nth-child(4){ transition-delay:0.3s; }
.slide.active .slideText > *:nth-child(5){ transition-delay:0.4s; }

.slideTag{

    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--brandSoft);
    color:#ffb27a;
    border:1px solid rgba(255,102,0,0.4);
    padding:7px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:16px;
}

.slideText h2{

    font-size:clamp(40px, 6vw, 76px);
    line-height:1;
    font-weight:900;
    margin-bottom:8px;
    text-shadow:0 6px 30px rgba(0,0,0,0.5);
}

.slideText h3{

    font-size:clamp(18px, 2.2vw, 26px);
    font-weight:500;
    color:#ffcf9e;
    margin-bottom:22px;
}

.slideMeta{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:28px;
}

.slideMeta span{

    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);
    padding:9px 14px;
    border-radius:12px;
    font-size:14px;
    display:flex;
    gap:8px;
    align-items:center;
}

.slideActions{

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
}

.slidePrice{

    font-size:15px;
    opacity:0.9;
}

.slidePrice b{

    font-size:22px;
    color:#ffb27a;
}

.slidePoster{

    justify-self:center;
    width:100%;
    max-width:460px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
    cursor:pointer;
    transition:transform 0.2s ease-out;
    opacity:0;
}

.slide.active .slidePoster{

    animation:posterIn 0.9s 0.2s ease both;
}

@keyframes posterIn{

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

.slidePoster img{

    width:100%;
    max-height:440px;
    object-fit:cover;
    display:block;
}

.heroTagline{

    position:absolute;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    font-family:var(--fontTitle);
    font-weight:800;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:13px;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);
    white-space:nowrap;
}

.heroTagline i{

    color:var(--brand);
}

.heroArrow{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(0,0,0,0.3);
    color:white;
    font-size:18px;
    cursor:pointer;
    backdrop-filter:blur(8px);
    transition:0.25s;
}

.heroArrow:hover{

    background:var(--brand);
    border-color:var(--brand);
}

.heroArrow.left{ left:18px; }
.heroArrow.right{ right:18px; }

.heroDots{

    position:absolute;
    bottom:26px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    gap:10px;
}

.dot{

    width:46px;
    height:5px;
    border:none;
    border-radius:5px;
    background:rgba(255,255,255,0.25);
    cursor:pointer;
    overflow:hidden;
    padding:0;
}

.dot span{

    display:block;
    height:100%;
    width:0;
    background:var(--brand);
}

.dot.active span{

    animation:progreso 6s linear forwards;
}

.heroCarousel.paused .dot.active span{

    animation-play-state:paused;
}

@keyframes progreso{

    to{ width:100%; }
}



/* ========================================
   FILTROS
======================================== */

.filtersBar{

    max-width:1240px;
    margin:-46px auto 0;
    position:relative;
    z-index:5;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
    padding:22px 26px;
    display:flex;
    flex-direction:column;
    gap:16px;
    width:calc(100% - 40px);
}

.searchBox{

    display:flex;
    align-items:center;
    gap:12px;
    background:var(--surface2);
    border-radius:14px;
    padding:0 18px;
}

.searchBox i{

    color:var(--muted);
}

#searchInput{

    flex:1;
    padding:16px 0;
    border:none;
    background:none;
    font-size:16px;
    outline:none;
    color:var(--text);
}

.filterGroup{

    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.filterLabel{

    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
    min-width:110px;
    display:flex;
    gap:8px;
    align-items:center;
}

.chips{

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.chip{

    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    padding:9px 16px;
    border-radius:30px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:0.2s;
}

.chip small{

    background:var(--surface2);
    border-radius:10px;
    padding:1px 7px;
    font-size:11px;
}

.chip:hover{

    border-color:var(--brand);
}

.chip.active{

    background:var(--brand);
    border-color:var(--brand);
    color:white;
}

.chip.active small{

    background:rgba(255,255,255,0.25);
}



/* ========================================
   EVENTOS
======================================== */

.eventsWrap{

    max-width:1240px;
    margin:0 auto;
    padding:50px 20px 30px;
}

.sectionHead{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:26px;
    gap:10px;
}

.sectionKicker{

    color:var(--brand);
    font-weight:800;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.sectionHead h2{

    font-size:34px;
}

.resultCount{

    color:var(--muted);
    font-weight:600;
}

.eventsGrid{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:26px;
}

.eventCard{

    background:var(--surface);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    cursor:pointer;
    transition:0.35s;
    border:1px solid var(--border);
    animation:subir 0.5s ease both;
}

.eventCard:hover{

    transform:translateY(-8px);
    box-shadow:0 24px 50px rgba(255,102,0,0.18);
}

.eventImg{

    position:relative;
    height:230px;
    overflow:hidden;
}

.eventImg img{

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 25%;
    transition:transform 0.6s;
}

.eventCard:hover .eventImg img{

    transform:scale(1.08);
}

.eventImg::after{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent 50%);
}

.eventCat,
.eventCity{

    position:absolute;
    z-index:2;
    font-size:12px;
    font-weight:700;
    padding:6px 12px;
    border-radius:20px;
}

.eventCat{

    top:14px;
    left:14px;
    background:var(--brand);
    color:white;
}

.eventCity{

    bottom:14px;
    left:14px;
    background:rgba(0,0,0,0.5);
    color:white;
    backdrop-filter:blur(6px);
}

.eventCardInfo{

    padding:18px 20px 20px;
}

.eventDate{

    color:var(--brand);
    font-weight:700;
    font-size:13px;
}

.eventCardInfo h3{

    font-size:22px;
    margin:6px 0 2px;
}

.eventCardInfo p{

    color:var(--muted);
    font-size:14px;
}

.eventPlace{

    margin-top:8px;
    display:flex;
    gap:8px;
    align-items:center;
}

.eventCardFoot{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--border);
    font-size:14px;
}

.eventCardFoot b{

    font-size:17px;
}

.miniBtn{

    background:var(--brandSoft);
    color:var(--brand);
    padding:8px 14px;
    border-radius:10px;
    font-weight:700;
    transition:0.25s;
}

.eventCard:hover .miniBtn{

    background:var(--brand);
    color:white;
}

.emptyState{

    grid-column:1 / -1;
    text-align:center;
    padding:50px 20px;
    color:var(--muted);
}

.emptyState i{

    font-size:46px;
    margin-bottom:14px;
    color:var(--brand);
}

.emptyState p{

    margin-bottom:16px;
}



/* ========================================
   DESCARGA LA APP
======================================== */

.appPromo{

    max-width:1240px;
    width:calc(100% - 40px);
    margin:30px auto 10px;
    border-radius:28px;
    padding:50px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:40px;
    align-items:center;
    color:white;
    background:
        radial-gradient(circle at 85% 30%, rgba(255,102,0,0.35), transparent 50%),
        linear-gradient(135deg, #15151c, #0b0b10);
    overflow:hidden;
    scroll-margin-top:90px;
}

.appPromo h2{

    font-size:clamp(28px, 4vw, 44px);
    line-height:1.1;
    margin:8px 0 14px;
}

.appPromoTexto > p{

    opacity:0.8;
    line-height:1.6;
    max-width:520px;
}

.appFeatures{

    list-style:none;
    margin:22px 0 26px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.appFeatures li{

    display:flex;
    gap:12px;
    align-items:center;
}

.appFeatures i{

    width:34px;
    height:34px;
    border-radius:10px;
    background:rgba(255,102,0,0.18);
    color:#ff9a3d;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.appDescarga{

    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.appQR{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.appQR img{

    width:120px;
    height:120px;
    border-radius:14px;
    background:white;
}

.appQR small{

    font-size:12px;
    opacity:0.7;
}

.appNota{

    margin-top:20px;
    font-size:12.5px;
    opacity:0.6 !important;
}

.appTelefonos{

    position:relative;
    height:520px;
}

.telefono{

    position:absolute;
    width:240px;
    aspect-ratio:9 / 20;
    border-radius:34px;
    padding:8px;
    background:#000;
    box-shadow:0 30px 60px rgba(0,0,0,0.6), 0 0 0 2px #2c2c36;
    left:50%;
    top:50%;
    transform:translate(-30%, -50%) rotate(4deg);
    transition:transform 0.5s;
}

.telefono.atras{

    transform:translate(-95%, -46%) rotate(-8deg) scale(0.9);
    opacity:0.9;
}

.appPromo:hover .telefono{

    transform:translate(-25%, -52%) rotate(2deg);
}

.appPromo:hover .telefono.atras{

    transform:translate(-105%, -46%) rotate(-11deg) scale(0.9);
}

.telefono img{

    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:27px;
}



/* ========================================
   BENEFICIOS + FOOTER
======================================== */

.benefits{

    max-width:1240px;
    margin:30px auto 50px;
    width:calc(100% - 40px);
    background:var(--surface);
    border-radius:var(--radius);
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    padding:30px;
    gap:25px;
    box-shadow:var(--shadow);
}

.benefit{

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

.benefit i{

    font-size:32px;
    color:var(--brand);
}

.benefit h4{

    font-size:14px;
}

.benefit p{

    color:var(--muted);
    font-size:13px;
}

.footer{

    text-align:center;
    padding:30px;
    color:var(--muted);
    border-top:1px solid var(--border);
}

.footer img{

    height:40px;
    margin-bottom:8px;
}



/* ========================================
   PÁGINA DEL EVENTO
======================================== */

.eventHero{

    position:relative;
    overflow:hidden;
    color:white;
    background:#0b0b0f;
}

.eventHeroBg{

    position:absolute;
    inset:-40px;
    background-size:cover;
    background-position:center;
    filter:blur(30px) brightness(0.55) saturate(1.3);
}

.eventHero::after{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(5,5,10,0.9), rgba(5,5,10,0.4));
}

.eventHeroInner{

    position:relative;
    z-index:2;
    max-width:1300px;
    margin:0 auto;
    padding:40px;
    display:grid;
    grid-template-columns:300px 1fr;
    gap:40px;
    align-items:center;
}

.eventPoster{

    width:100%;
    aspect-ratio:3 / 4;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 25px 60px rgba(0,0,0,0.6);
}

.eventHeroText h1{

    font-size:clamp(34px, 5vw, 60px);
    line-height:1.05;
}

.eventHeroText h3{

    color:#ffcf9e;
    font-weight:500;
    margin-bottom:12px;
}

.eventHeroText p{

    max-width:620px;
    opacity:0.85;
    margin-bottom:20px;
    line-height:1.5;
}

.backLink{

    display:block;
    background:none;
    border:none;
    color:rgba(255,255,255,0.75);
    font-weight:600;
    cursor:pointer;
    margin-bottom:16px;
}

.backLink:hover{

    color:white;
}

.eventMain{

    max-width:1400px;
    margin:0 auto;
    padding:26px 20px 40px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 360px;
    gap:24px;
    align-items:start;
}

.planoCard,
.sideCard{

    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}

.planoCard{

    padding:24px;
    scroll-margin-top:90px;
}

.planoHead{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.planoHead h2{

    font-size:28px;
}

.pisoTabs{

    display:flex;
    background:var(--surface2);
    border-radius:14px;
    padding:4px;
}

.pisoTab{

    border:none;
    background:none;
    color:var(--text);
    padding:10px 18px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
}

.pisoTab.active{

    background:var(--brand);
    color:white;
}

.planoFiltros{

    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:16px;
}

.zonaChip .dotColor{

    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--zc);
    display:inline-block;
}

.zonaChip.active{

    background:var(--zc);
    border-color:var(--zc);
}

.planoFiltrosRow{

    display:flex;
    flex-wrap:wrap;
    gap:22px;
    align-items:center;
}

.rangeFilter{

    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:13px;
    min-width:220px;
}

.rangeFilter input{

    accent-color:var(--brand);
}

.switch{

    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    user-select:none;
}

.switch input{

    display:none;
}

.slider{

    width:42px;
    height:24px;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:20px;
    position:relative;
    transition:0.25s;
}

.slider::after{

    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:white;
    box-shadow:0 2px 5px rgba(0,0,0,0.3);
    transition:0.25s;
}

.switch input:checked + .slider{

    background:var(--brand);
    border-color:var(--brand);
}

#switchIndividuales input:checked + .slider{

    background:var(--ind);
    border-color:var(--ind);
}

.switch input:checked + .slider::after{

    left:20px;
}



/* ========================================
   PLANO SVG
======================================== */

.planoWrap{

    position:relative;
    border-radius:18px;
    overflow:hidden;
    background:#12131a;
}

#planoSvg{

    display:block;
    width:100%;
    height:auto;
    max-height:78vh;
    user-select:none;
    touch-action:pan-y;
}

#planoSvg.zoomed{

    cursor:grab;
    touch-action:none;
}


.zoomControls{

    position:absolute;
    right:12px;
    top:12px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.zoomControls button{

    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(30,31,40,0.85);
    color:white;
    cursor:pointer;
    backdrop-filter:blur(6px);
}

.zoomControls button:hover{

    background:var(--brand);
}

.planoTooltip{

    position:absolute;
    pointer-events:none;
    background:rgba(255,255,255,0.97);
    color:#111;
    padding:10px 14px;
    border-radius:12px;
    font-size:13px;
    line-height:1.5;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    opacity:0;
    transform:translateY(4px);
    transition:opacity 0.15s, transform 0.15s;
    white-space:nowrap;
    z-index:5;
}

.planoTooltip.show{

    opacity:1;
    transform:none;
}

.tipInd{

    color:var(--ind);
    font-weight:700;
}

.legend{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:14px;
    font-size:13px;
    color:var(--muted);
}

.legend span{

    display:flex;
    align-items:center;
    gap:8px;
}

.lg{

    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
}

.lgDisp{ background:linear-gradient(135deg, #e53935, #1e9be9, #f5b400); }
.lgSel{ background:white; border:3px solid var(--brand); }
.lgSold{ background:#2c2e36; }
.lgInd{ background:var(--ind); border-radius:4px; box-shadow:0 0 6px rgba(16,185,129,0.7); }
.lgPalco{ background:#1e9be9; border-radius:4px; }



/* ========================================
   SIDEBAR DEL EVENTO
======================================== */

.eventSide{

    display:flex;
    flex-direction:column;
    gap:20px;
    position:sticky;
    top:96px;
}

.sideCard{

    padding:20px;
}

.sideCard h3{

    font-size:17px;
    margin-bottom:14px;
    display:flex;
    gap:10px;
    align-items:center;
}

.sideCard h3 i{

    color:var(--brand);
}

.zonaItem{

    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-radius:12px;
    cursor:pointer;
    transition:0.2s;
}

.zonaItem:hover{

    background:var(--surface2);
}

.zonaColor{

    width:14px;
    height:34px;
    border-radius:6px;
    flex-shrink:0;
}

.zonaInfo{

    flex:1;
    display:flex;
    flex-direction:column;
}

.zonaInfo small,
.zonaPrecio small{

    color:var(--muted);
    font-size:12px;
}

.zonaPrecio{

    text-align:right;
    display:flex;
    flex-direction:column;
}

.zonaPrecio .agotado{

    color:#e53935;
    font-weight:700;
}

.feeNote{

    margin-top:14px;
    font-size:12.5px;
    color:var(--muted);
    background:var(--surface2);
    padding:12px;
    border-radius:12px;
    line-height:1.5;
}

.feeNote i{

    color:var(--brand);
}

.mapFrame{

    border-radius:14px;
    overflow:hidden;
    height:230px;
    background:var(--surface2);
}

.mapFrame iframe{

    width:100%;
    height:100%;
    border:0;
}

.mapInfo{

    display:flex;
    flex-direction:column;
    margin:12px 0;
    font-size:14px;
    color:var(--muted);
}

.mapInfo b{

    color:var(--text);
}

.mapBtns{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.eventVideo{

    width:100%;
    border-radius:14px;
}



/* ========================================
   BARRA FLOTANTE DEL CARRITO
======================================== */

.cartBar{

    position:fixed;
    left:50%;
    bottom:20px;
    transform:translate(-50%, 160%);
    width:min(820px, calc(100% - 24px));
    background:rgba(18,18,24,0.94);
    color:white;
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:22px;
    padding:14px 14px 14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    z-index:500;
    box-shadow:0 20px 60px rgba(0,0,0,0.45);
    transition:transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.cartBar.show{

    transform:translate(-50%, 0);
}

.cartBar.bump{

    animation:bump 0.45s;
}

@keyframes bump{

    40%{ transform:translate(-50%, -8px) scale(1.02); }
}

.cartBarInfo{

    flex:1;
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
    min-width:0;
}

.cartBadge{

    position:relative;
    width:48px;
    height:48px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--brand), var(--brand2));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.cartBadge span{

    position:absolute;
    top:-6px;
    right:-6px;
    background:white;
    color:var(--brand);
    font-size:12px;
    font-weight:900;
    min-width:22px;
    height:22px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
}

.cartItemsTxt{

    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:340px;
}

.cartSub{

    font-size:12px;
    opacity:0.65;
}

.cartBarRight{

    display:flex;
    align-items:center;
    gap:10px;
}

.cartTotal{

    font-family:var(--fontTitle);
    font-size:22px;
    font-weight:800;
    margin-right:6px;
    white-space:nowrap;
}

.cartClear{

    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.15);
    background:transparent;
    color:white;
    cursor:pointer;
}

.cartClear:hover{

    background:#e53935;
}

.cartBuy{

    background:linear-gradient(135deg, var(--brand), var(--brand2));
    border:none;
    color:white;
    font-weight:800;
    padding:14px 22px;
    border-radius:14px;
    cursor:pointer;
    display:flex;
    gap:10px;
    align-items:center;
    white-space:nowrap;
}



/* ========================================
   TOASTS
======================================== */

.toastZone{

    position:fixed;
    left:50%;
    bottom:120px;
    transform:translateX(-50%);
    z-index:2000;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    pointer-events:none;
}

body.modalOpen .toastZone{

    bottom:auto;
    top:24px;
}

.toast{

    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
    padding:12px 18px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
    font-weight:600;
    font-size:14px;
    animation:toastIn 0.3s ease;
    transition:0.4s;
    max-width:90vw;
}

.toast i{

    color:var(--brand);
    margin-right:6px;
}

.toast.out{

    opacity:0;
    transform:translateY(10px);
}

@keyframes toastIn{

    from{ opacity:0; transform:translateY(16px) scale(0.95); }
}



/* ========================================
   MODALES (VENTANAS EMERGENTES)
======================================== */

.modal{

    position:fixed;
    inset:0;
    background:rgba(5,5,10,0.65);
    backdrop-filter:blur(6px);
    display:none;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:999;
}

.modal.open{

    display:flex;
    animation:fadeIn 0.25s ease;
}

.modalBox{

    background:var(--surface);
    color:var(--text);
    width:520px;
    max-width:100%;
    max-height:92vh;
    overflow-y:auto;
    border-radius:26px;
    padding:28px;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,0.5);
    animation:popIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.modalBox.small{

    width:430px;
}

.modalBox.large{

    width:860px;
}

@keyframes fadeIn{

    from{ opacity:0; }
}

@keyframes popIn{

    from{ opacity:0; transform:translateY(30px) scale(0.95); }
}

.modalBox h2{

    margin-bottom:6px;
    padding-right:30px;
}

.modalSub{

    color:var(--muted);
    font-size:14px;
    margin-bottom:10px;
}

.closeModal{

    position:absolute;
    top:18px;
    right:18px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--surface2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:14px;
    z-index:3;
    transition:0.2s;
}

.closeModal:hover{

    background:var(--brand);
    color:white;
}



/* ========================================
   LOGIN
======================================== */

.loginInput{

    width:100%;
    padding:15px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface2);
    color:var(--text);
    margin-top:14px;
    font-size:15px;
    outline:none;
}

.loginInput:focus{

    border-color:var(--brand);
}

.passwordContainer{

    position:relative;
}

.showPassword{

    position:absolute;
    right:15px;
    top:calc(50% + 7px);
    transform:translateY(-50%);
    cursor:pointer;
}

.rememberContainer{

    display:flex;
    align-items:center;
    gap:10px;
    margin-top:16px;
    font-size:14px;
}

.switchAuthBtn{

    width:100%;
    margin-top:14px;
    background:none;
    border:none;
    color:var(--brand);
    font-weight:700;
    cursor:pointer;
}

.helpList p{

    padding:14px;
    background:var(--surface2);
    border-radius:12px;
    margin-top:10px;
    display:flex;
    gap:12px;
    align-items:center;
}

.helpList i{

    color:var(--brand);
}



/* ========================================
   POPUP PALCO / GENERAL
======================================== */

.palcoHead{

    margin:-28px -28px 18px;
    padding:28px;
    border-radius:26px 26px 0 0;
    background:linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
    color:white;
}

.palcoHead p{

    opacity:0.85;
}

.palcoTipo{

    display:inline-flex;
    gap:8px;
    align-items:center;
    background:rgba(0,0,0,0.25);
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    margin-bottom:10px;
}

.palcoTipo.ind{

    background:var(--ind);
}

.mesa{

    position:relative;
    width:300px;
    height:300px;
    margin:10px auto;
}

.mesaCentro{

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:150px;
    height:150px;
    border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), color-mix(in srgb, var(--c) 15%, transparent));
    border:3px solid var(--c);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:13px;
    color:var(--muted);
}

.mesaCentro b{

    font-size:34px;
    color:var(--text);
    font-family:var(--fontTitle);
}

.silla{

    position:absolute;
    width:46px;
    height:46px;
    margin:-23px 0 0 -23px;
    border-radius:14px;
    border:2px solid var(--ind);
    background:color-mix(in srgb, var(--ind) 15%, var(--surface));
    color:var(--text);
    font-weight:800;
    font-size:15px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
}

.silla:hover:not(.sold):not(.fija){

    transform:scale(1.12);
}

.silla.fija{

    cursor:default;
    border-color:var(--brand);
    background:var(--brandSoft);
    color:var(--brand);
}

.silla.sel{

    background:var(--brand);
    border-color:var(--brand);
    color:white;
    box-shadow:0 6px 16px rgba(255,102,0,0.45);
}

.silla.sold{

    background:#2c2e36;
    border-color:#2c2e36;
    color:#6b6e7a;
    cursor:not-allowed;
}

.palcoResumen{

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-top:14px;
}

.palcoResumen div{

    background:var(--surface2);
    border-radius:14px;
    padding:12px;
    text-align:center;
    display:flex;
    flex-direction:column;
}

.palcoResumen small{

    color:var(--muted);
    font-size:12px;
}

.palcoResumen b{

    font-size:16px;
}

.stepperQty{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin:16px 0;
}

.stepperQty button{

    width:52px;
    height:52px;
    border-radius:50%;
    border:2px solid var(--brand);
    background:var(--surface);
    color:var(--brand);
    font-size:18px;
    cursor:pointer;
}

.stepperQty button:disabled{

    opacity:0.3;
    cursor:not-allowed;
}

.stepperQty span{

    font-family:var(--fontTitle);
    font-size:44px;
    font-weight:800;
    min-width:60px;
    text-align:center;
}



/* ========================================
   CHECKOUT
======================================== */

.checkoutBox{

    width:720px;
}

.stepper{

    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    padding-right:40px;
}

.step{

    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:14px;
    color:var(--muted);
    white-space:nowrap;
}

.step span{

    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--surface2);
    display:flex;
    align-items:center;
    justify-content:center;
}

.step.active{

    color:var(--text);
}

.step.active span{

    background:var(--brand);
    color:white;
}

.step.done span{

    background:var(--ind);
    color:white;
}

.stepLine{

    flex:1;
    height:2px;
    background:var(--border);
}

.checkoutStep h2{

    margin-bottom:14px;
}

.checkoutEvent{

    display:flex;
    gap:14px;
    align-items:center;
    background:var(--surface2);
    border-radius:16px;
    padding:12px;
    margin-bottom:14px;
}

.checkoutEvent img{

    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:12px;
}

.checkoutEvent div{

    display:flex;
    flex-direction:column;
    font-size:13px;
    color:var(--muted);
    gap:2px;
}

.checkoutEvent b{

    color:var(--text);
    font-size:15px;
}

.checkoutItems{

    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:260px;
    overflow-y:auto;
}

.checkoutItem{

    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:14px;
}

.checkoutItem div{

    flex:1;
    display:flex;
    flex-direction:column;
}

.checkoutItem small{

    color:var(--muted);
}

.checkoutItem span{

    font-weight:700;
}

.checkoutItem button{

    width:30px;
    height:30px;
    border-radius:50%;
    border:none;
    background:var(--surface2);
    color:var(--muted);
    cursor:pointer;
}

.checkoutItem button:hover{

    background:#e53935;
    color:white;
}

.breakdown{

    margin-top:18px;
    background:var(--surface2);
    border-radius:16px;
    padding:14px 18px;
}

.bRow{

    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:14px;
    color:var(--muted);
}

.bRow span:last-child{

    color:var(--text);
    font-weight:600;
}

.bRow.total{

    border-top:1px dashed var(--border);
    margin-top:6px;
    padding-top:12px;
    font-size:18px;
    font-weight:800;
    color:var(--text);
}

.bRow.total span:last-child{

    color:var(--brand);
    font-weight:800;
}

.checkoutFooter{

    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:18px;
    position:sticky;
    bottom:-28px;
    margin-bottom:-28px;
    padding:14px 0 22px;
    background:var(--surface);
    border-top:1px solid var(--border);
    z-index:2;
}

.checkoutFooter .primaryBtn{

    width:auto;
    margin-top:0;
    min-width:220px;
}



/* ----- facturación electrónica ----- */

.feToggle{

    display:flex;
    gap:14px;
    align-items:flex-start;
    border:2px solid var(--border);
    border-radius:16px;
    padding:16px;
    cursor:pointer;
    transition:0.2s;
}

.feToggle:has(input:checked){

    border-color:var(--brand);
    background:var(--brandSoft);
}

.feToggle input{

    width:20px;
    height:20px;
    accent-color:var(--brand);
    margin-top:2px;
    flex-shrink:0;
}

.feToggle div{

    display:flex;
    flex-direction:column;
    gap:4px;
}

.feToggle small{

    color:var(--muted);
}

.feForm{

    display:none;
    margin-top:16px;
    animation:subir 0.35s ease;
}

.feForm.open{

    display:block;
}

.formGrid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.formGrid label{

    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}

.formGrid .full{

    grid-column:1 / -1;
}

.formGrid input,
.formGrid select{

    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface2);
    color:var(--text);
    font-size:14px;
    outline:none;
    width:100%;
}

.formGrid input:focus,
.formGrid select:focus{

    border-color:var(--brand);
}

.formGrid .invalid{

    border-color:#e53935;
    background:rgba(229,57,53,0.08);
}

.docRow{

    display:flex;
    gap:8px;
}

.dvBox{

    display:none;
    align-items:center;
    padding:0 12px;
    border-radius:10px;
    background:var(--brandSoft);
    color:var(--brand);
    font-weight:800;
    white-space:nowrap;
}



/* ----- métodos de pago ----- */

.paymentMethods{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap:12px;
}

.paymentMethod{

    border:2px solid var(--border);
    border-radius:16px;
    padding:14px;
    text-align:center;
    cursor:pointer;
    transition:0.25s;
    font-weight:600;
    font-size:14px;
}

.paymentMethod:hover{

    transform:translateY(-3px);
}

.paymentMethod.active{

    border-color:var(--brand);
    background:var(--brandSoft);
}

.paymentMethod img{

    width:56px;
    height:56px;
    object-fit:contain;
    margin-bottom:6px;
    background:white;
    border-radius:10px;
}

.metodoTxt{

    margin-top:14px;
    font-size:14px;
    color:var(--muted);
}

.terms{

    display:flex;
    gap:10px;
    align-items:center;
    margin-top:14px;
    font-size:14px;
}

.terms input{

    accent-color:var(--brand);
    width:18px;
    height:18px;
}

.simNote{

    margin-top:10px;
    font-size:12px;
    color:var(--muted);
}



/* ========================================
   TICKET + FACTURA
======================================== */

.successHead{

    text-align:center;
    margin-bottom:20px;
}

.successIcon{

    width:70px;
    height:70px;
    margin:0 auto 12px;
    border-radius:50%;
    background:var(--ind);
    color:white;
    font-size:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:popIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
    box-shadow:0 0 0 10px rgba(16,185,129,0.15);
}

.ticketGrid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.ticketCard,
.invoiceCard{

    background:var(--surface2);
    border-radius:20px;
    padding:20px;
}

.ticketCard{

    border:2px dashed var(--border);
    text-align:center;
}

.ticketCard h3{

    margin-bottom:6px;
}

.ticketCard p{

    font-size:14px;
    color:var(--muted);
}

.ticketItems{

    list-style:none;
    margin:12px 0;
    font-size:13px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.ticketItems li{

    background:var(--surface);
    border-radius:8px;
    padding:6px 10px;
}

.ticketCode{

    font-family:Consolas, monospace;
    font-weight:700;
    color:var(--brand) !important;
}

.invoiceCard h3{

    margin-bottom:10px;
    display:flex;
    gap:10px;
    align-items:center;
}

.invoiceCard h3 i{

    color:var(--brand);
}

.invoiceCard .breakdown{

    background:var(--surface);
}

.feBadge{

    display:inline-flex;
    gap:8px;
    align-items:center;
    background:rgba(16,185,129,0.15);
    color:var(--ind);
    font-weight:700;
    font-size:13px;
    padding:6px 12px;
    border-radius:20px;
    margin-bottom:12px;
}

.feDatos{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.feDatos div{

    background:var(--surface);
    border-radius:10px;
    padding:8px 10px;
    display:flex;
    flex-direction:column;
    font-size:13px;
    overflow:hidden;
}

.feDatos small{

    color:var(--muted);
    font-size:11px;
}

.cufe{

    display:block;
    margin-top:10px;
    word-break:break-all;
    font-family:Consolas, monospace;
    font-size:10.5px;
    color:var(--muted);
}

#qrcode{

    width:100%;
    min-height:220px;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

#qrImage{

    width:200px;
    height:200px;
    background:white;
    border-radius:14px;
    padding:8px;
}

.qrNote{

    font-size:12px !important;
}

.qrTimerContainer{

    position:relative;
    width:90px;
    height:90px;
    margin:14px auto 6px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.progressRing{

    position:absolute;
    transform:rotate(-90deg) scale(0.75);
}

.progressBg{

    fill:none;
    stroke:var(--border);
    stroke-width:8;
}

.progressCircle{

    fill:none;
    stroke:var(--brand);
    stroke-width:8;
    stroke-linecap:round;
    stroke-dasharray:326;
    stroke-dashoffset:0;
    transition:stroke-dashoffset 1s linear;
}

#qrTimer{

    position:absolute;
    font-weight:800;
    font-size:17px;
    color:var(--brand);
}



/* ========================================
   MIS COMPRAS
======================================== */

.misCompras{

    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:14px;
}

.compraGuardada{

    display:flex;
    gap:14px;
    align-items:center;
    background:var(--surface2);
    border-radius:18px;
    padding:12px;
}

.compraGuardada > img,
.compraImg{

    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:14px;
    flex-shrink:0;
}

.compraImg{

    background:var(--brandSoft);
    color:var(--brand);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.compraInfo{

    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.compraInfo small{

    color:var(--muted);
}

.feTag{

    align-self:flex-start;
    font-size:12px;
    font-weight:700;
    color:var(--ind);
    background:rgba(16,185,129,0.12);
    padding:3px 10px;
    border-radius:10px;
    margin-top:4px;
}

.compraSide{

    text-align:right;
}

.compraSide b{

    font-size:18px;
}

.compraBtns{

    display:flex;
    gap:8px;
    margin-top:8px;
}

.verBtn,
.eliminarBtn{

    border:none;
    padding:9px 12px;
    border-radius:10px;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
}

.verBtn{

    background:var(--brand);
    color:white;
}

.eliminarBtn{

    background:transparent;
    color:#e53935;
    border:1px solid #e53935;
}



/* ========================================
   ADMIN
======================================== */

.adminPage{

    min-height:100vh;
}

.adminContainer{

    max-width:1300px;
    margin:0 auto;
    padding:40px 20px;
}

.adminSubtitle{

    margin:4px 0 22px;
    color:var(--muted);
    font-size:17px;
}

.adminStats{

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:16px;
    margin-bottom:22px;
}

.adminStats div{

    background:var(--surface);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    border-left:5px solid var(--brand);
}

.adminStats small{

    color:var(--muted);
}

.adminStats b{

    font-size:24px;
    font-family:var(--fontTitle);
}

.adminSearch{

    margin-bottom:22px;
}

.adminSearch input{

    width:100%;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--text);
    font-size:16px;
    outline:none;
}

.tableScroll{

    overflow-x:auto;
    border-radius:20px;
    box-shadow:var(--shadow);
}

.adminTable{

    width:100%;
    min-width:900px;
    border-collapse:collapse;
    background:var(--surface);
}

.adminTable th{

    background:var(--brand);
    color:white;
    padding:16px;
    text-align:left;
    font-size:14px;
}

.adminTable td{

    padding:14px 16px;
    border-bottom:1px solid var(--border);
    font-size:14px;
}

.adminTable td small{

    color:var(--muted);
}



/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:1150px){

    .eventMain{

        grid-template-columns:1fr;
    }

    .eventSide{

        position:static;
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media(max-width:900px){

    .header{

        flex-wrap:wrap;
        height:auto;
        padding:12px 16px;
        gap:10px;
    }

    .navbar{

        order:3;
        width:100%;
        justify-content:space-around;
        gap:10px;
        font-size:13px;
    }

    .navbar a{

        flex-direction:column;
        gap:2px;
    }

    .logoImg{

        height:40px;
    }

    .slideContent{

        grid-template-columns:1fr;
        padding:70px 24px 80px;
        gap:20px;
    }

    .slidePoster{

        display:none;
    }

    .heroArrow{

        display:none;
    }

    .filterLabel{

        min-width:auto;
        width:100%;
    }

    .eventHeroInner{

        grid-template-columns:1fr;
        padding:24px 16px;
        gap:20px;
    }

    .eventPoster{

        max-width:200px;
        aspect-ratio:1;
    }

    .planoCard{

        padding:16px;
    }

    .ticketGrid{

        grid-template-columns:1fr;
    }

    .cartItemsTxt{

        max-width:160px;
    }
}

@media(max-width:900px){

    .appPromo{

        grid-template-columns:1fr;
        padding:30px 22px;
    }

    .appTelefonos{

        height:400px;
    }

    .telefono{

        width:180px;
    }
}

@media(max-width:600px){

    .filtersBar{

        width:calc(100% - 32px);
        padding:16px;
    }

    .sectionHead h2{

        font-size:26px;
    }

    .heroTagline{

        font-size:10px;
        letter-spacing:2px;
    }

    .formGrid{

        grid-template-columns:1fr;
    }

    .modalBox{

        padding:22px;
        border-radius:22px;
    }

    .palcoHead{

        margin:-22px -22px 16px;
        padding:22px;
    }

    .mesa{

        transform:scale(0.85);
        margin:-10px auto;
    }

    .stepper .step{

        font-size:0;
        gap:0;
    }

    .stepper .step span{

        font-size:14px;
    }

    .cartBar{

        bottom:10px;
        padding:10px;
        gap:8px;
    }

    .cartSub,
    .cartClear,
    .cartItemsTxt{

        display:none;
    }

    .header{

        flex-wrap:wrap;
    }

    .logoImg{

        height:34px;
    }

    .loginBtn{

        padding:9px 12px;
        font-size:13px;
    }

    .userName{

        max-width:90px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .themeToggle{

        width:36px;
        height:36px;
    }

    .cartTotal{

        font-size:17px;
    }

    .cartBuy{

        padding:12px 14px;
    }

    .compraGuardada{

        flex-wrap:wrap;
    }

    .compraSide{

        width:100%;
        text-align:left;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .checkoutFooter .primaryBtn{

        min-width:0;
        flex:1;
    }
}




/* ========================================
   VERIFICACIÓN DE CORREO / LOGIN
======================================== */

.bannerVerificar{

    display:none;
    position:sticky;
    top:76px;
    z-index:90;
    background:#fff4e5;
    color:#7a4a00;
    border-bottom:1px solid #ffd59a;
    padding:10px 20px;
    font-size:14px;
    font-weight:600;
    text-align:center;
}

.bannerVerificar.show{

    display:block;
}

body.landingMode .bannerVerificar{

    display:none;
}

.bannerVerificar button{

    margin-left:10px;
    background:var(--brand);
    color:white;
    border:none;
    border-radius:8px;
    padding:6px 12px;
    font-weight:700;
    cursor:pointer;
}

.modalBox.centrado{

    text-align:center;
}

.verificaIcono{

    width:76px;
    height:76px;
    margin:6px auto 14px;
    border-radius:50%;
    background:var(--brandSoft);
    color:var(--brand);
    font-size:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.linkBtn.olvide{

    display:block;
    margin:12px auto 0;
    font-size:14px;
}

.separador{

    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:13px;
    margin:14px 0 4px;
}

.separador::before,
.separador::after{

    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}

.googleBtn{

    width:100%;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    transition:0.2s;
}

.googleBtn:hover{

    border-color:#4285f4;
}



/* ========================================
   RESERVA TEMPORAL + FECHAS
======================================== */

.reservaTimer{

    display:none;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:#ffcf7a;
    white-space:nowrap;
}

.reservaTimer.show{

    display:flex;
}

.reservaTimer.urgente{

    color:#ff6b6b;
    animation:latir 1s infinite;
}

.reservaTimer.enCheckout{

    justify-content:center;
    background:#fff4e5;
    color:#7a4a00;
    border-radius:12px;
    padding:10px;
    margin:0 40px 14px 0;
    font-weight:600;
    font-size:14px;
}

body.dark .reservaTimer.enCheckout{

    background:#3a2a10;
    color:#ffcf7a;
}

.reservaTimer.enCheckout.urgente{

    background:#ffe5e5;
    color:#c62828;
}

@keyframes latir{

    50%{ opacity:0.55; }
}

.eventFecha{

    position:absolute;
    z-index:2;
    top:14px;
    right:14px;
    width:54px;
    padding:6px 0;
    border-radius:14px;
    background:white;
    color:#111;
    text-align:center;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.eventFecha b{

    font-family:var(--fontTitle);
    font-size:22px;
    letter-spacing:0;
    color:var(--brand);
}

.faltanTag{

    display:inline-block;
    margin-left:8px;
    font-size:11px;
    font-weight:700;
    color:#0f8a5f;
    background:rgba(16,185,129,0.12);
    padding:2px 8px;
    border-radius:10px;
}

.slideMeta .faltan{

    background:rgba(16,185,129,0.18);
    border-color:rgba(16,185,129,0.4);
    color:#7ef0c4;
}



/* ========================================
   ADMIN: CABECERA Y PESTAÑAS
======================================== */

.adminHead{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:24px;
}

.adminTabs{

    display:flex;
    gap:6px;
    background:var(--surface);
    border:1px solid var(--border);
    padding:5px;
    border-radius:14px;
    flex-wrap:wrap;
}

.adminTabs button{

    border:none;
    background:none;
    color:var(--text);
    padding:10px 16px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    gap:8px;
    align-items:center;
}

.adminTabs button.active{

    background:var(--brand);
    color:white;
}

.adminPanel{

    display:none;
}

.adminPanel.active{

    display:block;
    animation:subir 0.3s ease;
}

.ingresoTag{

    font-size:12px;
    font-weight:700;
    padding:3px 8px;
    border-radius:8px;
    background:var(--surface2);
}

.ingresoTag.completo{

    background:rgba(16,185,129,0.15);
    color:#0f8a5f;
}



/* ========================================
   ADMIN: EVENTOS
======================================== */

.eventosAdminHead{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.eventosAdminHead .adminSubtitle{

    margin:0;
    font-size:14px;
}

.eventosAdmin{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
    gap:16px;
}

.eventoAdmin{

    display:flex;
    flex-wrap:wrap;
    gap:14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:12px;
    box-shadow:var(--shadow);
}

.eventoAdmin.oculto{

    opacity:0.6;
}

.eventoAdmin img{

    width:90px;
    height:110px;
    border-radius:12px;
    object-fit:cover;
}

.eventoAdminInfo{

    flex:1;
    min-width:160px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.eventoAdminInfo small{

    color:var(--muted);
}

.badges{

    display:flex;
    gap:6px;
    margin-bottom:4px;
}

.badge{

    font-size:11px;
    font-weight:700;
    padding:3px 8px;
    border-radius:8px;
}

.badge.verde{ background:rgba(16,185,129,0.14); color:#0f8a5f; }
.badge.gris{ background:var(--surface2); color:var(--muted); }
.badge.naranja{ background:var(--brandSoft); color:var(--brand); }

.eventoAdminBtns{

    width:100%;
    display:flex;
    gap:8px;
}

.eventoAdminBtns .ghostBtn{

    padding:9px 12px;
    font-size:13px;
}

.eventoAdminBtns .ghostBtn:first-child{

    flex:1;
}

.eventoAdminBtns .danger{

    margin-top:0;
}

.editorEvento{

    display:grid;
    grid-template-columns:200px 1fr;
    gap:20px;
    margin-top:14px;
}

.previewAfiche{

    width:100%;
    aspect-ratio:3 / 4;
    border-radius:16px;
    background:var(--surface2);
    border:2px dashed var(--border);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--muted);
    overflow:hidden;
}

.previewAfiche i{

    font-size:34px;
}

.previewAfiche img{

    width:100%;
    height:100%;
    object-fit:cover;
}

.subirAfiche{

    cursor:pointer;
}

.ayuda{

    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:12px;
}

.formGrid textarea{

    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface2);
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    resize:vertical;
}

.formGrid .check{

    flex-direction:row;
    align-items:center;
    gap:10px;
    color:var(--text);
}

.formGrid .check input{

    width:18px;
    height:18px;
    accent-color:var(--brand);
}

.preciosTitulo{

    margin-top:22px;
}

.preciosEditor{

    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}

.precioFila{

    display:grid;
    grid-template-columns:14px 1fr 150px 150px;
    gap:12px;
    align-items:center;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:12px;
}

.precioFila > div{

    display:flex;
    flex-direction:column;
}

.precioFila small{

    color:var(--muted);
    font-size:12px;
}

.precioFila label{

    display:flex;
    flex-direction:column;
    gap:3px;
    font-size:11px;
    font-weight:700;
    color:var(--muted);
}

.precioFila input{

    padding:9px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
    color:var(--text);
}

.precioFila .zonaColor{

    height:28px;
}



/* ========================================
   ADMIN: ESTADÍSTICAS (gráficas)
======================================== */

.viz{

    --viz-surface:#ffffff;
    --viz-ink:#0b0b0b;
    --viz-ink2:#52514e;
    --viz-muted:#898781;
    --viz-grid:#e1e0d9;
    --viz-base:#c3c2b7;
    --series-1:#2a78d6;
}

body.dark .viz{

    --viz-surface:#18181f;
    --viz-ink:#f0efec;
    --viz-ink2:#c3c2b7;
    --viz-muted:#898781;
    --viz-grid:#2c2c2a;
    --viz-base:#383835;
    --series-1:#3987e5;
}

.statsFiltros{

    display:flex;
    gap:16px;
    align-items:flex-end;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.statsFiltros label{

    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:13px;
    font-weight:700;
    color:var(--muted);
}

.statsFiltros select{

    padding:11px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:15px;
    min-width:280px;
}

.segmento{

    display:flex;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:4px;
}

.segmento button{

    border:none;
    background:none;
    color:var(--text);
    padding:9px 14px;
    border-radius:9px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    gap:8px;
    align-items:center;
}

.segmento button.active{

    background:var(--brand);
    color:white;
}

.kpis{

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
    margin-bottom:18px;
}

.kpi{

    background:var(--viz-surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.kpi small{

    color:var(--viz-ink2);
    font-weight:600;
}

.kpi b{

    font-size:30px;
    color:var(--viz-ink);
    font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kpi span{

    color:var(--viz-muted);
    font-size:13px;
}

.statsGrid{

    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:18px;
}

.vizCard{

    background:var(--viz-surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:20px;
    color:var(--viz-ink);
}

.calorCard{

    grid-row:span 3;
}

.vizHead{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.vizHead h3{

    font-size:17px;
}

.vizHead p{

    color:var(--viz-ink2);
    font-size:13px;
    margin-top:2px;
}

.calorWrap{

    position:relative;
    background:#12131a;
    border-radius:16px;
    overflow:hidden;
}

.calorWrap .planoSvg{

    display:block;
    width:100%;
    height:auto;
    max-height:72vh;
}

.calorLeyenda{

    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    font-size:12px;
    color:var(--viz-ink2);
}

.calorEscala{

    flex:1;
    height:10px;
    border-radius:5px;
    background:linear-gradient(90deg, #12131a, #962810 18%, #dc4614 42%, #f98c1e 68%, #fcc83c 86%, #fff6cd);
}

.vizNota{

    margin-top:10px;
    font-size:12px;
    color:var(--viz-muted);
}

.flujoControl{

    display:none;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.flujoControl.show{

    display:flex;
}

.flujoControl input{

    flex:1;
    accent-color:var(--brand);
}

.flujoControl span{

    font-size:13px;
    color:var(--viz-ink2);
    white-space:nowrap;
}

.playBtn{

    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:var(--brand);
    color:white;
    cursor:pointer;
    flex-shrink:0;
}

.barraFila{

    display:grid;
    grid-template-columns:150px 1fr 90px;
    gap:12px;
    align-items:center;
    padding:6px 4px;
    border-radius:8px;
    cursor:default;
}

.barraFila:hover{

    background:var(--surface2);
}

.barraEtiqueta{

    font-size:13px;
    color:var(--viz-ink);
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.barraEtiqueta .punto{

    width:8px;
    height:8px;
    border-radius:50%;
    flex-shrink:0;
}

.barraPista{

    height:14px;
    border-left:1px solid var(--viz-base);
}

.barraPista i{

    display:block;
    height:100%;
    background:var(--series-1);
    border-radius:0 4px 4px 0;
}

.barraValor{

    font-size:13px;
    font-weight:700;
    color:var(--viz-ink);
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.lineaSvg{

    width:100%;
    height:auto;
    display:block;
}

.lineaSvg .grid{ stroke:var(--viz-grid); stroke-width:1; }
.lineaSvg .base{ stroke:var(--viz-base); stroke-width:1; }
.lineaSvg .eje{ fill:var(--viz-muted); font-size:11px; font-family:system-ui, sans-serif; }
.lineaSvg .linea{ fill:none; stroke:var(--series-1); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.lineaSvg .area{ fill:var(--series-1); opacity:0.12; }
.lineaSvg .cruz{ stroke:var(--viz-muted); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.lineaSvg .punto{ fill:var(--series-1); stroke:var(--viz-surface); stroke-width:2; opacity:0; }
.lineaSvg .hoverDia:hover .cruz,
.lineaSvg .hoverDia:hover .punto{ opacity:1; }

.vizVacio{

    text-align:center;
    color:var(--viz-muted);
    font-size:13px;
    padding:14px;
}

.vizTip{

    position:fixed;
    z-index:3000;
    pointer-events:none;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px 12px;
    font-size:13px;
    line-height:1.45;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    opacity:0;
    transition:opacity 0.12s;
}

.vizTip.show{

    opacity:1;
}



/* ========================================
   ADMIN: TAQUILLA
======================================== */

.taquillaGrid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.camara{

    position:relative;
    aspect-ratio:4 / 3;
    background:#0b0b0f;
    border-radius:20px;
    overflow:hidden;
}

.camara video{

    width:100%;
    height:100%;
    object-fit:cover;
}

.marcoQR{

    position:absolute;
    inset:18% 25%;
    border:3px solid rgba(255,255,255,0.85);
    border-radius:20px;
    box-shadow:0 0 0 2000px rgba(0,0,0,0.35);
}

.camaraOff{

    position:absolute;
    inset:0;
    background:#0b0b0f;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    padding:20px;
}

.camaraOff.oculta{

    display:none;
}

.camaraOff > i{

    font-size:42px;
    color:var(--brand);
}

.camaraOff .primaryBtn{

    width:auto;
}

.manual{

    display:flex;
    gap:10px;
    margin-top:12px;
}

.manual input{

    flex:1;
    padding:13px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-family:Consolas, monospace;
}

.resultadoTaquilla{

    min-height:240px;
    border-radius:20px;
    border:2px dashed var(--border);
    background:var(--surface);
    padding:22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:8px;
    color:var(--muted);
}

.resultadoTaquilla > i{

    font-size:40px;
}

.resultadoTaquilla.valida{

    border:2px solid #10b981;
    background:rgba(16,185,129,0.08);
    color:var(--text);
}

.resultadoTaquilla.rechazada{

    border:2px solid #e53935;
    background:rgba(229,57,53,0.08);
    color:var(--text);
}

.resIcono{

    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:white;
    animation:popIn 0.35s;
}

.valida .resIcono{ background:#10b981; }
.rechazada .resIcono{ background:#e53935; }

.resDetalle{

    width:100%;
    background:var(--surface);
    border-radius:12px;
    padding:12px;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-top:6px;
}

.resDetalle small{

    color:var(--muted);
}

.resDetalle ul{

    margin:6px 0 6px 18px;
    font-size:13px;
}

.resBotones{

    display:flex;
    gap:10px;
    width:100%;
    flex-wrap:wrap;
}

.resBotones .primaryBtn{

    flex:1;
}

.resBotones .ghostBtn{

    margin-top:18px;
    flex:1;
}

.aviso{

    color:#b26a00;
    font-size:13px;
    font-weight:600;
}

.historialTitulo{

    margin:20px 0 10px;
    font-size:16px;
    display:flex;
    align-items:center;
    gap:10px;
}

.historialTitulo span{

    background:var(--brand);
    color:white;
    border-radius:10px;
    padding:1px 9px;
    font-size:13px;
}

.historial{

    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:280px;
    overflow-y:auto;
}

.histItem{

    display:flex;
    align-items:center;
    gap:12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
}

.histItem > i{

    color:#10b981;
}

.histItem div{

    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}

.histItem small{

    color:var(--muted);
    font-family:Consolas, monospace;
    font-size:11px;
}

.histItem span{

    font-size:12px;
    color:var(--muted);
}

@media(max-width:1000px){

    .statsGrid,
    .taquillaGrid{

        grid-template-columns:1fr;
    }

    .calorCard{

        grid-row:auto;
    }
}

@media(max-width:700px){

    .editorEvento{

        grid-template-columns:1fr;
    }

    .editorImagen{

        max-width:200px;
    }

    .precioFila{

        grid-template-columns:14px 1fr;
    }

    .precioFila label{

        grid-column:2;
    }

    .barraFila{

        grid-template-columns:100px 1fr 70px;
    }

    .statsFiltros select{

        min-width:0;
        width:100%;
    }

    .reservaTimer:not(.enCheckout){

        display:none !important;
    }
}




/* ========================================
   QR PROTEGIDO + BOLETA USADA (WEB)
======================================== */

.qrProtegido{

    position:relative;
    width:220px;
    margin:12px auto 0;
    border-radius:16px;
    overflow:hidden;
    background:white;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.qrProtegido #qrcode{

    min-height:0;
    margin:0;
    padding:10px;
}

.qrProtegido #qrcode svg{

    width:100%;
    height:auto;
    display:block;
}

/* marca de agua tenue: no impide leer el QR, pero identifica al dueño */
.marcaAgua{

    position:absolute;
    inset:-20%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    transform:rotate(-30deg);
    pointer-events:none;
}

.marcaAgua span{

    white-space:nowrap;
    font-size:11px;
    font-weight:700;
    color:rgba(255,102,0,0.22);
    text-align:center;
}

.qrCubierta{

    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:20px;
    text-align:center;
    font-size:13px;
    font-weight:700;
    color:#444;
    background:#f1f1f4;
}

.qrCubierta i{

    font-size:28px;
    color:var(--brand);
}

.qrProtegido.oculto .qrCubierta{

    display:flex;
}

.qrProtegido.oculto #qrcode{

    filter:blur(14px);
}

.estadoParcialWeb{

    display:none;
    background:rgba(16,185,129,0.12);
    color:#0f8a5f;
    border-radius:10px;
    padding:8px 10px;
    font-size:13px;
    margin-top:10px;
}

.estadoParcialWeb.show{

    display:block;
}

.qrUsadoWeb{

    position:relative;
    width:200px;
    height:200px;
    margin:12px auto 10px;
    border-radius:16px;
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
}

.qrUsadoWeb > i{

    font-size:130px;
    color:var(--border);
}

.selloWeb{

    position:absolute;
    padding:6px 14px;
    border:4px solid #e53935;
    color:#e53935;
    border-radius:10px;
    font-family:var(--fontTitle);
    font-weight:900;
    font-size:24px;
    letter-spacing:3px;
    transform:rotate(-14deg);
    background:color-mix(in srgb, var(--surface) 80%, transparent);
}

.qrUsadoWeb.recien .selloWeb{

    animation:sellarWeb 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

@keyframes sellarWeb{

    from{ transform:rotate(-14deg) scale(2.4); opacity:0; }
}

.usadaTitulo{

    font-size:17px;
}

.compraGuardada{

    position:relative;
}

.compraGuardada.usada{

    filter:grayscale(1);
    opacity:0.65;
}

.usadaTag{

    align-self:flex-start;
    font-size:11px;
    font-weight:800;
    background:#e5e7eb;
    color:#374151;
    padding:3px 9px;
    border-radius:10px;
    margin-bottom:4px;
}

.usadaTag.parcial{

    background:rgba(16,185,129,0.14);
    color:#0f8a5f;
}

body.dark .usadaTag{

    background:#2c2e36;
    color:#e5e7eb;
}




/* ========================================
   MI CUENTA
======================================== */

.avatarMini{

    width:26px;
    height:26px;
    border-radius:50%;
    background:white;
    color:var(--brand);
    font-size:12px;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.cuentaBox{

    width:480px;
}

.cuentaCabeza{

    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:20px;
    padding-right:30px;
}

.cuentaCabeza h2{

    margin:0;
    padding:0;
    font-size:22px;
}

.cuentaCabeza p{

    color:var(--muted);
    font-size:14px;
    word-break:break-all;
}

.avatarGrandeWeb{

    width:72px;
    height:72px;
    flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(135deg, var(--brand), var(--brand2));
    color:white;
    font-family:var(--fontTitle);
    font-size:26px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 24px rgba(255,102,0,0.3);
}

.cuentaChips{

    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}

.chipRol,
.chipOk,
.chipPendiente{

    font-size:12px;
    font-weight:700;
    padding:4px 10px;
    border-radius:10px;
    display:inline-flex;
    gap:6px;
    align-items:center;
    border:none;
}

.chipRol{

    background:var(--brandSoft);
    color:var(--brand);
}

.chipOk{

    background:rgba(16,185,129,0.14);
    color:#0f8a5f;
}

.chipPendiente{

    background:#fff4e5;
    color:#92400e;
    cursor:pointer;
}

.cuentaStats{

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-bottom:18px;
}

.cuentaStats div{

    background:var(--surface2);
    border-radius:14px;
    padding:12px;
    text-align:center;
    display:flex;
    flex-direction:column;
}

.cuentaStats b{

    font-family:var(--fontTitle);
    font-size:18px;
}

.cuentaStats small{

    color:var(--muted);
    font-size:12px;
}

.cuentaOpciones{

    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
}

.cuentaOpciones button{

    display:flex;
    gap:14px;
    align-items:center;
    padding:14px 16px;
    border:none;
    border-bottom:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:15px;
    font-weight:600;
    text-align:left;
    cursor:pointer;
}

.cuentaOpciones button:last-child{

    border-bottom:none;
}

.cuentaOpciones button:hover{

    background:var(--surface2);
}

.cuentaOpciones button i{

    width:20px;
    color:var(--brand);
}

.cuentaOpciones .salir,
.cuentaOpciones .salir i{

    color:#e53935;
}