/* Palette adaptada (https://snipboard.io/Pza7f6.jpg): volt #D6F801, negro #000000, carbon #262626,
   gris oscuro #414141, gris medio #797979 (platino), gris #A4A4A4, gris claro #F8F8F8, blanco #FFFFFF */
:root { --screen-bg: #000000; --card-bg: #262626; --neon-lime: #D6F801; --neon-lime-hover: #E0FB32; --text-white: #ffffff; --text-grey: #A4A4A4; --border-dark: #414141; --platinum: #797979; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Rethink Sans', sans-serif; }
a { text-decoration: none; color: #fff; }
	a:hover { color: var(--neon-lime-hover); }

body { background-color: var(--screen-bg); color: var(--text-white); min-height: 100vh; padding-bottom: 3rem; overflow-x: hidden; }
.val { display: inline-block; background: #900; color: #fff; min-width: 10px; border-radius: 10px; padding: 2px; font-size: 0.8em; }

/* Header Navbar Line Matching Graphic Screen UI exactly */
.screen-header { background-color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 2rem; height: 80px; position: sticky; top: 0; z-index: 950; box-shadow: 0 4px 12px rgba(0,0,0,0.55); }

.header-left { display: flex; align-items: center; gap: 0.5rem; }
	.header-left #logoSmall { display: none; }
	.header-left #logoBig { display: inline-block; }

.header-center-welcome { background-color: var(--neon-lime); color: #000000; font-weight: 600; height: 80px; display: flex; align-items: center; padding: 0 2.5rem; font-size: 1.1rem; text-align: center; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); /* Simulates the geometric ribbon shape */ }

.header-right { display: flex; align-items: center; gap: 1.2rem; padding-left: 20px; position: relative; }

.auth-actions { display: flex; align-items: center; }
.logout-text { font-size: 1.2rem; }
.logout-icon { display: inline-block; vertical-align: middle; }

/* Dropdown user menu (top-right of masterpage) */
.user-menu { position: relative; }
.user-menu-trigger { background: none; border: none; cursor: pointer; color: var(--text-white); font-family: 'Rethink Sans', sans-serif; display: flex; align-items: center; gap: 0.4rem; }
	.user-menu-trigger:hover { color: var(--neon-lime-hover); }
	.menu-chevron { transition: transform 0.15s ease; }
	.user-menu.is-open .menu-chevron { transform: rotate(180deg); }

.user-menu-panel { display: none; position: absolute; top: calc(100% + 12px); right: 0; min-width: 230px; background-color: var(--card-bg); border: 1px solid var(--border-dark); border-radius: 10px; padding: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.55); z-index: 900; }
	.user-menu-panel.is-open { display: block; }

.user-menu-item { display: block; width: 100%; padding: 0.7rem 0.9rem; background: none; border: none; border-radius: 6px; color: var(--text-white); font-family: 'Rethink Sans', sans-serif; font-size: 0.85rem; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; }
	.user-menu-item:hover { background: rgba(214,248,1,0.08); color: var(--neon-lime-hover); }
	.user-menu-item.logout { color: #ff5c5c; }
	.user-menu-item.logout:hover { background: rgba(255,92,92,0.10); color: #ff7a7a; }
	.user-menu-separator { height: 1px; margin: 0.3rem 0.4rem; background-color: var(--border-dark); }


/* Sub-Headline Text Container styling settings */
.title-banner { padding: 1rem 1rem 1rem 1rem; }
	.title-banner h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.5px; text-align: center; }

/* Main Screen Core Dashboard Grid Split */
.main-layout { display: grid; grid-template-columns: 1fr 380px; padding: 0 2rem; gap: 2rem; }

@media (max-width: 992px) {
	.main-layout { grid-template-columns: 1fr; }
	.header-left #logoBig { display: none; }
	.header-left #logoSmall { display: inline-block; }
	.header-right .logout-text { display: none; }
	.screen-header { padding: 0.6rem 1rem; height: 70px; }
	.header-center-welcome { height: 70px; padding: 0 1.5rem; }
}

/* Mobile: compact upper bar (smaller logo and fonts so it fits without overflow) */
@media (max-width: 576px) {
	.screen-header { padding: 0.5rem 0.6rem; height: 56px; gap: 0.5rem; }
	.header-left img { max-height: 28px; width: auto; }
	.header-center-welcome { height: 56px; padding: 0 0.8rem; font-size: 0.75rem; white-space: nowrap; min-width: 0; }
	.header-right { gap: 0.5rem; padding-left: 8px; }
	.auth-actions a, .user-menu-trigger { font-size: 0.75rem; }
	.auth-actions a i, .user-menu-trigger i { font-size: 0.85rem; }
}

/* Grid layout implementation for ticket cards */
.room-selector {text-align:center; }
.tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }

.ticket-card { background-color: rgba(38, 38, 38, 0.85); border-radius: 10px; padding: 0.9rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 140px; border: 1px solid var(--border-dark); }

.card-title { font-size: 1rem; font-weight: 700; color: var(--text-white); }

.card-price-block { margin: 0.4rem 0; }

.member-price-display { font-size: 1.6rem; font-weight: 800; color: var(--neon-lime); line-height: 1; }

.member-label { font-size: 0.95rem; margin-top: 0.25rem; font-weight: 600; }

.card-availtickets { font-size: 0.85rem; font-weight: 700; color: var(--neon-lime); margin-left: 0.25rem; }

/* Buttons Styling */
.btn { border: none; border-radius: 6px; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; transition: background-color 0.15s ease-in-out; }

.btn-lime { background-color: var(--neon-lime); color: #000000; }

	.btn-lime:hover { background-color: var(--neon-lime-hover); }

.action-reserve-btn { width: 100%; border-radius: 8px; padding: 0.85rem; }

/* Sidebar Layout Container rules matching UI panel */
.sidebar-container { border-left: 1px solid var(--border-dark); padding-left: 1.5rem; }

.sidebar-inner h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-white); margin-bottom: 1.5rem; }

.sidebar-subheading { font-size: 0.9rem; color: var(--text-grey); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 1rem; }

.bookings-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; }

.booking-item { display: flex; justify-content: space-between; align-items: center; }

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

.booking-meta { font-weight: 600; font-size: 1rem; color: var(--neon-lime); text-transform: uppercase; }

.booking-name { font-size: 0.8rem; color: var(--text-white); margin-top: 0.15rem; }

.booking-price { font-size: 1.2rem; font-weight: 800; color: var(--neon-lime); }

.btn-checkout { width: 100%; padding: 0.9rem; border-radius: 6px; }

/* Live Interactive Debugging helper overlay */
.toggle-control-badge { position: fixed; bottom: 1.5rem; right: 1.5rem; background-color: #000; border: 1px solid #444; padding: 0.6rem 1.2rem; border-radius: 50px; font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 999; }

/* Guest View Variant Style Modifications Layer rules */
body.guest-mode .header-center-welcome { background-color: var(--card-bg); color: var(--text-grey); }
body.guest-mode .title-banner h1 { content: "CLASSES - RESERVATIONS & BOOKINGS"; }
body.guest-mode .member-price-display { color: var(--text-white); }
body.guest-mode .member-label { color: var(--text-grey); }
body.guest-mode .booking-meta { color: var(--neon-lime); }
body.guest-mode .booking-price { color: var(--text-white); }

/* For modal form to change password in masterpage */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
	.modal-overlay.is-open { display: flex; }

.modal-card { background-color: var(--card-bg); border: 1px solid var(--border-dark); border-radius: 12px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
	.modal-card h2 { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1.25rem; text-align: center; }

.modal-field-box { margin-bottom: 1.1rem; }
	.modal-field-box label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-grey); display: block; margin-bottom: 0.4rem; }

.modal-input { width: 100%; background-color: var(--screen-bg); border: 1px solid var(--border-dark); border-radius: 6px; padding: 0.8rem 1rem; color: var(--text-white); font-size: 1rem; font-family: 'Rethink Sans', sans-serif; }
	.modal-input:focus { border-color: var(--neon-lime); outline: none; }

.modal-msg { font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; min-height: 1.1em; }
	.modal-msg.error { color: #ff5c5c; }
	.modal-msg.success { color: var(--neon-lime); }

.modal-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
	.modal-actions .btn { flex: 1; }

.btn-secondary { background-color: transparent; border: 1px solid var(--border-dark); color: var(--text-white); }
	.btn-secondary:hover { border-color: var(--text-grey); }

.change-pwd-trigger { background: none; border: none; cursor: pointer; color: var(--text-white); font-family: 'Rethink Sans', sans-serif; display: flex; align-items: center; gap: 0.4rem; }
	.change-pwd-trigger:hover { color: var(--neon-lime-hover); }
	.change-pwd-trigger .logout-text { font-size: 1.2rem; }

/* Estado de membresía (Index.aspx) */
.membership-status { margin: 0 1rem 0.5rem 1rem; padding: 0.9rem 1.2rem; background-color: var(--card-bg); border: 1px solid var(--border-dark); border-left: 4px solid var(--neon-lime); border-radius: 8px; font-size: 1rem; color:var(--neon-lime); }

body.guest-mode .membership-status { border-left-color: var(--text-grey); color:var(--text-white); }

.no-membership-note { display: block; margin: 0 1rem 1rem 1rem; padding: 0.8rem 1.1rem; background-color: rgba(164,164,164,0.12); border: 1px dashed var(--border-dark); border-radius: 8px; color: var(--text-grey); font-size: 1rem; line-height: 1.4; }

/* Agrupación de tickets por fecha (calendario simple) */
.day-group { padding: 0 1rem; margin-bottom: 2rem; }

.day-group-title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--neon-lime); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-dark); }

body.guest-mode .day-group-title { color: var(--text-white); }

/* Carrito lateral */
.cart-item-remove { color: var(--text-grey); font-size: 0.9rem; margin-left: 0.75rem; cursor: pointer; }

	.cart-item-remove:hover { color: #ff5c5c; }

.cart-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 800; padding: 1rem 0; margin-top: 0.5rem; border-top: 1px solid var(--border-dark); }

.checkout-msg { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.75rem; }

	.checkout-msg.success { color: var(--neon-lime); }
	.checkout-msg.error { color: #ff5c5c; }

/* Ticket agotado */
.action-reserve-btn:disabled { background-color: var(--border-dark); color: var(--text-grey); cursor: not-allowed; }

/* MisTickets.aspx: revisión de tickets pagados */
.ticket-card.ticket-past { border-color: var(--border-dark); opacity: 0.75; background-color: #131313; }
	.ticket-card.ticket-past .member-price-display,
	.ticket-card.ticket-past .card-title,
	.ticket-card.ticket-past .booking-meta { color: var(--text-grey); }
	.ticket-card.ticket-past .booking-name { color: var(--text-grey); }

.ticket-card.ticket-current { border-color: rgba(214,248,1,0.45); }
	.ticket-card.ticket-current .member-price-display,
	.ticket-card.ticket-current .booking-meta { color: var(--neon-lime); }

.ticket-attendance { margin: 0.5rem 0 0.3rem; }
.attended-badge { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; }
	.attended-badge.yes { background-color: rgba(214,248,1,0.12); color: var(--neon-lime); }
	.attended-badge.no { background-color: rgba(164,164,164,0.15); color: var(--text-grey); }

/* Modal de QR (MisTickets.aspx) */
.qr-code-label { text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: 0.5rem; color: var(--neon-lime); margin-bottom: 1rem; }
.qr-box { text-align: center; margin-bottom: 1.25rem; }
	.qr-box img { max-width: 100%; background-color: #fff; padding: 0.75rem; border-radius: 8px; }

/* Botón de checkout procesando */
.btn-checkout:disabled { background-color: var(--border-dark); color: var(--text-grey); cursor: not-allowed; }

/* Páginas de resultado de pago (PaymentPostProcess / PaymentCancel) */
.result-layout { display: block; max-width: 760px; margin: 0 auto; padding: 1rem 1rem 2rem; }

.result-card { background-color: var(--card-bg); border: 1px solid var(--border-dark); border-radius: 12px; padding: 2.5rem 2rem; text-align: center; }

.result-icon { margin: 0 auto 1.25rem; max-width: 110px; }

	.result-icon img { max-width: 100%; }

.result-title { font-size: 1.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1rem; }

.result-text { font-size: 1rem; line-height: 1.6; color: var(--text-white); margin-bottom: 1.75rem; }

.result-card .btn-checkout { max-width: 360px; margin: 0 auto; display: block; }

/* MisTickets.aspx: canje de tickets de membresía (POR PLAN) - gris platino para distinguirlos de los pagados */
.ticket-card.tu-card { min-height: 120px; gap: 0.9rem; border: 1px solid var(--text-grey); background-color: rgba(164,164,164,0.08); }
	.ticket-card.tu-card .card-title { color: var(--text-white); }
	.ticket-card.tu-card .booking-meta { color: var(--text-grey); }
	.ticket-card.tu-card:hover { border-color: #F8F8F8; box-shadow: 0 0 0 1px rgba(164,164,164,0.35); }

.no-membership-note.exito { background-color: rgba(214,248,1,0.10); border-color: var(--neon-lime); color: var(--neon-lime); }

/* MisTickets.aspx: time-slot cards for canje */
.time-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; max-height: 300px; overflow-y: auto; }
.time-slot-card { background: var(--card-bg); border: 2px solid var(--border-dark); border-radius: 8px; padding: 0.75rem; text-align: center; cursor: pointer; transition: all 0.15s; }
.time-slot-card:hover { border-color: var(--neon-lime); }
.time-slot-card.selected { border-color: var(--neon-lime); background: rgba(214,248,1,0.1); box-shadow: 0 0 0 2px var(--neon-lime); }
.time-slot-card.full { opacity: 0.5; cursor: not-allowed; background: #131313; }
.time-slot-time { font-weight: 700; font-size: 0.95rem; color: var(--text-white); }
.time-slot-date { font-size: 0.7rem; color: var(--text-grey); margin-bottom: 0.25rem; text-transform: uppercase; font-weight: 600; }
.time-slot-avail { font-size: 0.7rem; color: var(--text-grey); }

/* Premium TU card (unlimited): borde volt, fondo platino, título volt, texto negro, badge en esquina sup. derecha */
.ticket-card.tu-card.premium { position: relative; border: 2px solid var(--neon-lime); background-color: rgba(121, 121, 121, 0.85); }
	.ticket-card.tu-card.premium:hover { border-color: var(--neon-lime-hover); box-shadow: 0 0 0 2px rgba(214,248,1,0.35); }
	.ticket-card.tu-card.premium .card-title { color: var(--neon-lime); padding-right: 6.25rem; }
	.ticket-card.tu-card.premium .booking-meta,
	.ticket-card.tu-card.premium .booking-name { color: #000000; }
	.ticket-card.tu-card.premium .badge-ilimitado { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--neon-lime); color: #000; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.badge-ilimitado { display: inline-block; background: var(--neon-lime); color: #000; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; margin-top: 0.5rem; }

/* Móvil: tarjetas de tickets ~30% más compactas */
@media (max-width: 576px) {
	.tickets-grid { gap: 0.6rem; }
	.ticket-card { padding: 0.6rem; min-height: 100px; }
	.card-title { font-size: 0.8rem; }
	.card-price-block { margin: 0.25rem 0; }
	.member-price-display { font-size: 1.15rem; }
	.member-label { font-size: 0.7rem; margin-top: 0.15rem; }
	.card-availtickets { font-size: 0.7rem; }
	.booking-meta { font-size: 0.7rem; }
	.booking-name { font-size: 0.65rem; margin-top: 0.1rem; }
	.action-reserve-btn { padding: 0.55rem; font-size: 0.8rem; border-radius: 6px; }
	.ticket-card.tu-card { min-height: 84px; gap: 0.5rem; }
	.ticket-card.tu-card.premium .card-title { padding-right: 3.2rem; }
	.badge-ilimitado { font-size: 0.6rem; padding: 0.2rem 0.45rem; }
	.ticket-attendance { margin: 0.3rem 0 0.5rem; }
	.attended-badge { font-size: 0.65rem; padding: 0.2rem 0.55rem; }
}

/* Checkout desplegable en móvil (Index.aspx): botón fijo a la derecha + panel inferior */
.cart-fab { display: none; position: fixed; right: 1rem; bottom: 1.25rem; z-index: 950; align-items: center; gap: 0.5rem; background-color: var(--neon-lime); color: #000000; border: none; border-radius: 50px; padding: 0.7rem 1.1rem; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.3px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.55); font-family: 'Rethink Sans', sans-serif; }
	.cart-fab:hover { background-color: var(--neon-lime-hover); }

.cart-drawer-close { display: none; }

@media (max-width: 992px) {
	.cart-fab { display: flex; }
	.sidebar-container { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; max-height: 75vh; overflow-y: auto; background-color: var(--card-bg); border: none; border-top: 1px solid var(--border-dark); border-radius: 14px 14px 0 0; padding: 1.1rem 1rem 1.5rem; transform: translateY(105%); transition: transform 0.25s ease; }
	.sidebar-container.is-open { transform: translateY(0); }
	.sidebar-inner { position: relative; }
	.cart-drawer-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0.15rem; right: 0.25rem; background: none; border: none; color: var(--text-grey); font-size: 1.2rem; cursor: pointer; padding: 0.4rem; z-index: 1; }
	.cart-drawer-close:hover { color: #ff5c5c; }
	body.cart-open .cart-fab { display: none; }
}