/* =====================================================
   PUBLIC RESERVAS — Vista Pública Fullscreen
   Zona 21 Complejo Deportivo
===================================================== */

/* ---- Variables raíz ---- */
:root {
   --pr-radius: 12px;
   --pr-radius-lg: 20px;
   --pr-glass: rgba(255, 255, 255, 0.06);
   --pr-glass-hover: rgba(255, 255, 255, 0.10);
   --pr-border: rgba(255, 255, 255, 0.10);
   --pr-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
   --pr-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --card-w: 360px;
   --card-h: auto;
}

/* ---- Reset y Base ---- */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html,
body {
   height: 100%;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}

body {
   background-color: var(--bg, #0d0d0d);
   color: var(--text, #fff);
   font-family: 'Inter', 'Outfit', system-ui, sans-serif;
}

/* =====================================================
   NAVBAR
===================================================== */
.navbar-pub {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 10px 0;
}

.navbar-pub.scrolled {
   background: rgba(13, 13, 13, 0.96) !important;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.navbar-pub .brand-logo {
   height: auto;
   min-height: 36px;
   max-height: 52px;
   width: auto;
   max-width: 200px;
   object-fit: contain;
}

.navbar-pub .brand-name {
   font-size: 1.3rem;
   font-weight: 800;
   letter-spacing: -0.5px;
   color: #fff;
}

.navbar-pub .nav-link-pub {
   color: rgba(255, 255, 255, 0.75);
   font-weight: 500;
   padding: 6px 14px;
   border-radius: 8px;
   transition: color var(--pr-transition), background var(--pr-transition);
   text-decoration: none;
}

.navbar-pub .nav-link-pub:hover {
   color: #fff;
   background: var(--pr-glass);
}

.btn-nav-login {
   background: var(--primary);
   color: #fff !important;
   font-weight: 600;
   padding: 7px 18px !important;
   border-radius: 8px;
   transition: opacity var(--pr-transition), transform var(--pr-transition);
}

.btn-nav-login:hover {
   opacity: 0.88;
   transform: translateY(-1px);
}

/* ── Tabs de navegación del cliente logueado ── */
.btn-nav-tab {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: rgba(255, 255, 255, 0.6);
   font-weight: 600;
   font-size: 0.855rem;
   padding: 7px 14px;
   border-radius: 8px;
   text-decoration: none;
   border: 1px solid transparent;
   background: none;
   cursor: pointer;
   transition: color var(--pr-transition), background var(--pr-transition), border-color var(--pr-transition);
}

.btn-nav-tab:hover {
   color: #fff;
   background: var(--pr-glass);
   border-color: var(--pr-border);
}

.btn-nav-tab.active {
   color: #fff;
   background: var(--primary);
   border-color: transparent;
   box-shadow: 0 2px 12px rgba(255, 87, 34, 0.35);
}

.btn-nav-tab.active:hover {
   opacity: 0.9;
}

/* ── Botón Cerrar Sesión ── */
.btn-nav-logout {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: rgba(255, 255, 255, 0.45);
   font-weight: 600;
   font-size: 0.855rem;
   padding: 7px 12px;
   border-radius: 8px;
   text-decoration: none;
   border: 1px solid transparent;
   transition: color var(--pr-transition), background var(--pr-transition), border-color var(--pr-transition);
}

.btn-nav-logout:hover {
   color: #f87171;
   background: rgba(239, 68, 68, 0.08);
   border-color: rgba(239, 68, 68, 0.20);
}

/* =====================================================
   MODAL MI PERFIL
===================================================== */
.perfil-modal-content {
   background: #111;
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 20px;
   color: #fff;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.perfil-modal-header {
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   padding: 20px 24px;
}

.perfil-modal-footer {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   padding: 16px 24px;
   gap: 10px;
}

.perfil-avatar-wrap {
   position: relative;
   flex-shrink: 0;
}

.perfil-avatar-sm {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary, #ff5722), rgba(255, 87, 34, 0.5));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   color: #fff;
   flex-shrink: 0;
   overflow: hidden;
   border: 2px solid rgba(255, 255, 255, 0.15);
   box-shadow: 0 4px 16px rgba(255, 87, 34, 0.3);
   cursor: pointer;
}

.perfil-avatar-initials {
   font-size: 1.2rem;
   font-weight: 800;
   letter-spacing: -0.5px;
   line-height: 1;
   color: #fff;
   text-transform: uppercase;
   pointer-events: none;
}

.perfil-avatar-edit-btn {
   position: absolute;
   bottom: -2px;
   right: -4px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--primary, #ff5722);
   border: 2px solid #111;
   color: #fff;
   font-size: 0.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: transform 0.2s, background 0.2s;
   padding: 0;
   line-height: 1;
}

.perfil-avatar-edit-btn:hover {
   transform: scale(1.15);
   background: #e64a19;
}

.perfil-label {
   display: block;
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.38);
   margin-bottom: 6px;
}

.perfil-input {
   display: block;
   width: 100%;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 10px;
   color: #fff;
   padding: 10px 14px;
   font-size: 0.92rem;
   font-family: inherit;
   outline: none;
   transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
   appearance: none;
   -webkit-appearance: none;
}

.perfil-input:focus {
   border-color: var(--primary, #ff5722);
   background: rgba(255, 255, 255, 0.09);
   box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

.perfil-input::placeholder {
   color: rgba(255, 255, 255, 0.22);
}

.perfil-input option {
   background: #1a1a1a;
   color: #fff;
}

input[type="date"].perfil-input::-webkit-calendar-picker-indicator {
   filter: invert(1) opacity(0.4);
   cursor: pointer;
}

/* Wrapper para input + ojo */
.perfil-input-wrap {
   position: relative;
}

.perfil-input-wrap .perfil-input {
   padding-right: 40px;
}

.perfil-btn-eye {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.3);
   cursor: pointer;
   font-size: 0.95rem;
   padding: 4px;
   line-height: 1;
   transition: color 0.2s;
}

.perfil-btn-eye:hover {
   color: rgba(255, 255, 255, 0.7);
}

/* Errores de campo */
.perfil-field-error {
   font-size: 0.75rem;
   color: #f87171;
   margin-top: 4px;
   min-height: 16px;
   line-height: 1.3;
}

/* Divisor entre secciones */
.perfil-divider {
   position: relative;
   text-align: center;
   margin: 20px 0 16px;
}

.perfil-divider::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 1px;
   background: rgba(255, 255, 255, 0.08);
}

.perfil-divider span {
   position: relative;
   background: #111;
   padding: 0 14px;
   font-size: 0.78rem;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.5);
   letter-spacing: 0.5px;
}

/* Botón guardar */
.btn-perfil-guardar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: var(--primary, #ff5722);
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 8px 15px;
   font-size: 0.9rem;
   font-weight: 700;
   font-family: inherit;
   cursor: pointer;
   transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
   box-shadow: 0 4px 16px rgba(255, 87, 34, 0.35);
}

.btn-perfil-guardar:hover {
   opacity: 0.9;
   transform: translateY(-1px);
   box-shadow: 0 6px 22px rgba(255, 87, 34, 0.5);
}

.btn-perfil-guardar:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
}

/* =====================================================
   HERO — FULLSCREEN
===================================================== */
#hero {
   position: relative;
   width: 100%;
   height: 100vh;
   min-height: 600px;
   overflow: hidden;
   display: flex;
   align-items: center;
}

#hero .hero-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center 20%;
   background-repeat: no-repeat;
   transform: scale(1.03);
   transition: transform 8s ease;
}

#hero:hover .hero-bg {
   transform: scale(1);
}

#hero .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(105deg,
         rgba(0, 0, 0, 0.88) 0%,
         rgba(0, 0, 0, 0.60) 45%,
         rgba(0, 0, 0, 0.20) 100%);
}

/* =====================================================
   HERO LAYOUT — 2 columnas
===================================================== */
.hero-layout {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 32px;
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   align-items: center;
   gap: 40px;
   padding-top: 55px;
   /* compensa navbar */
}

/* ── Columna izquierda ── */
.hero-left {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--primary);
   color: #fff;
   font-size: 0.73rem;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 20px;
   margin-bottom: 22px;
}

#hero h1 {
   font-size: clamp(2.4rem, 4.5vw, 3.8rem);
   font-weight: 900;
   line-height: 1.1;
   letter-spacing: -1px;
   color: #fff;
   margin-bottom: 18px;
}

#hero h1 span {
   color: var(--primary);
}

.hero-sub {
   font-size: 1.05rem;
   color: rgba(255, 255, 255, 0.70);
   margin-bottom: 36px;
   line-height: 1.65;
   max-width: 480px;
}

/* ── Filtro hero ── */
.hero-filtro {
   display: flex;
   align-items: flex-end;
   gap: 12px;
   flex-wrap: wrap;
}

.filtro-grupo {
   display: flex;
   flex-direction: column;
}

.filtro-grupo label {
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.45);
   margin-bottom: 6px;
}

.filtro-input {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid var(--pr-border);
   border-radius: 10px;
   color: #fff;
   padding: 11px 16px;
   font-size: 0.95rem;
   min-width: 170px;
   outline: none;
   transition: border-color var(--pr-transition), background var(--pr-transition);
}

.filtro-input:focus {
   background: rgba(255, 255, 255, 0.12);
   border-color: var(--primary);
}

input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1) opacity(0.5);
   cursor: pointer;
}

.btn-buscar {
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 11px 24px;
   font-weight: 700;
   font-size: 0.95rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: opacity var(--pr-transition), transform var(--pr-transition), box-shadow var(--pr-transition);
   box-shadow: 0 4px 20px rgba(255, 87, 34, 0.4);
}

.btn-buscar:hover {
   opacity: 0.9;
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(255, 87, 34, 0.55);
}

.btn-buscar.loading {
   pointer-events: none;
   opacity: 0.7;
}

/* =====================================================
   CARRUSEL WRAPPER
===================================================== */
.hero-right {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}

.carrusel-wrapper {
   position: relative;
   width: 100%;
   height: 580px;
   display: flex;
   align-items: center;
   justify-content: center;
   perspective: 1200px;
}

/* Vacío */
.carrusel-vacio {
   text-align: center;
   color: rgba(255, 255, 255, 0.3);
   font-size: 1rem;
}

.carrusel-vacio i {
   font-size: 3rem;
   display: block;
   margin-bottom: 12px;
}

/* ── Track ── */
.carrusel-track {
   position: relative;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
}

/* =====================================================
   SLIDES — Cards de cancha
===================================================== */
.cancha-slide {
   position: absolute;
   top: 50%;
   left: 50%;
   width: var(--card-w);
   transform: translate(-50%, -50%) translateX(0) scale(0.72) translateZ(-180px);
   opacity: 0;
   pointer-events: none;
   transition:
      transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.45s ease,
      filter 0.45s ease;
   background: rgba(15, 15, 15, 0.92);
   border: 1px solid var(--pr-border);
   border-radius: var(--pr-radius-lg);
   overflow: hidden;
   box-shadow: var(--pr-shadow);
   filter: blur(1px) brightness(0.6);
   will-change: transform, opacity;
}

/* Centro — resaltada */
.cancha-slide.pos-center {
   transform: translate(-50%, -50%) translateX(0) scale(1) translateZ(0);
   opacity: 1;
   pointer-events: auto;
   filter: none;
   z-index: 10;
   box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 87, 34, 0.2);
}

/* Derecha */
.cancha-slide.pos-right {
   transform: translate(-50%, -50%) translateX(70%) scale(0.78) translateZ(-120px) rotateY(-18deg);
   opacity: 0.55;
   pointer-events: none;
   filter: blur(0.5px) brightness(0.55);
   z-index: 5;
}

/* Izquierda */
.cancha-slide.pos-left {
   transform: translate(-50%, -50%) translateX(-70%) scale(0.78) translateZ(-120px) rotateY(18deg);
   opacity: 0.55;
   pointer-events: none;
   filter: blur(0.5px) brightness(0.55);
   z-index: 5;
}

/* Ocultas */
.cancha-slide.pos-hidden {
   opacity: 0;
   pointer-events: none;
   z-index: 1;
   filter: blur(2px);
}

/* ── Foto ── */
.slide-foto {
   position: relative;
   height: 180px;
   overflow: hidden;
   background: #1a1a1a;
   flex-shrink: 0;
}

.slide-foto img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.cancha-slide.pos-center:hover .slide-foto img {
   transform: scale(1.04);
}

.slide-foto-fallback {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
   color: rgba(255, 255, 255, 0.15);
   font-size: 4rem;
}

/* Badges */
.badge-disponibles {
   position: absolute;
   top: 12px;
   right: 12px;
   background: var(--primary);
   color: #fff;
   font-size: 0.68rem;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 20px;
   display: flex;
   align-items: center;
   gap: 5px;
   box-shadow: 0 2px 10px rgba(255, 87, 34, 0.4);
}

.badge-disponibles i {
   font-size: 0.4rem;
}

.badge-disponibles.sin-disp {
   background: #3a3a3a;
   color: rgba(255, 255, 255, 0.4);
   box-shadow: none;
}

.badge-tipo {
   position: absolute;
   bottom: 10px;
   left: 12px;
   background: rgba(0, 0, 0, 0.72);
   backdrop-filter: blur(8px);
   color: rgba(255, 255, 255, 0.85);
   font-size: 0.68rem;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 6px;
   border: 1px solid var(--pr-border);
}

/* ── Info de la slide ── */
.slide-info {
   padding: 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 0;
}

.slide-nombre {
   font-size: 1.15rem;
   font-weight: 800;
   color: #fff;
   margin-bottom: 6px;
   letter-spacing: -0.3px;
}

.slide-meta {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.45);
   margin-bottom: 14px;
   flex-wrap: wrap;
}

.slide-meta i {
   font-size: 0.82rem;
}

.slide-precio {
   color: var(--primary);
   font-weight: 700;
}

/* =====================================================
   SLOTS dentro de la slide
===================================================== */
.slide-slots {
   display: flex;
   flex-direction: column;
}

.slots-title {
   font-size: 0.65rem;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.35);
   margin-bottom: 8px;
}

.slots-list {
   display: flex;
   flex-direction: column;
   gap: 5px;
   max-height: 220px;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.slots-list::-webkit-scrollbar {
   width: 3px;
}

.slots-list::-webkit-scrollbar-track {
   background: transparent;
}

.slots-list::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.12);
   border-radius: 4px;
}

.slot-row {
   display: grid;
   grid-template-columns: 60px 65px 1fr auto;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid transparent;
   border-radius: 8px;
   padding: 8px 12px;
   transition: background var(--pr-transition), border-color var(--pr-transition);
}

.slot-row.disponible:hover {
   background: rgba(255, 87, 34, 0.08);
   border-color: rgba(255, 87, 34, 0.25);
}

.slot-row.ocupado {
   opacity: 0.4;
}

.slot-hora {
   font-weight: 700;
   font-size: 0.88rem;
   color: #fff;
}

.slot-hora-fin {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.4);
}

.slot-precio {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.5);
   font-weight: 500;
}

.btn-reservar {
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 6px;
   padding: 5px 14px;
   font-size: 0.78rem;
   font-weight: 700;
   cursor: pointer;
   transition: opacity var(--pr-transition), transform var(--pr-transition);
   white-space: nowrap;
}

.btn-reservar:hover {
   opacity: 0.88;
   transform: scale(1.02);
}

.slot-ocupado-label {
   font-size: 0.74rem;
   color: rgba(255, 255, 255, 0.22);
   font-style: italic;
   text-align: right;
}

.no-slots-msg {
   text-align: center;
   padding: 20px 0 8px;
   color: rgba(255, 255, 255, 0.3);
   font-size: 0.85rem;
}

.no-slots-msg i {
   font-size: 1.8rem;
   display: block;
   margin-bottom: 8px;
}

/* =====================================================
   CARRUSEL — FLECHAS
===================================================== */
.carrusel-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 20;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #fff;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 1.1rem;
   transition: background var(--pr-transition), transform var(--pr-transition), border-color var(--pr-transition);
   backdrop-filter: blur(6px);
}

.carrusel-arrow:hover {
   background: var(--primary);
   border-color: var(--primary);
   transform: translateY(-50%) scale(1.08);
}

.carrusel-arrow--prev {
   left: 0;
}

.carrusel-arrow--next {
   right: 0;
}

/* =====================================================
   CARRUSEL — DOTS
===================================================== */
.carrusel-dots {
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 20;
   display: flex;
   gap: 8px;
}

.dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, 0.25);
   cursor: pointer;
   transition: background var(--pr-transition), transform var(--pr-transition);
   padding: 0;
}

.dot.active {
   background: var(--primary);
   transform: scale(1.3);
}

/* =====================================================
   MODAL RESERVAR
===================================================== */
.modal-reservar .modal-content {
   background: #111;
   border: 1px solid var(--pr-border);
   border-radius: var(--pr-radius-lg);
   color: #fff;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.modal-reservar .modal-header {
   border-bottom: 1px solid var(--pr-border);
   padding: 20px 24px;
}

.modal-reservar .modal-title {
   font-weight: 800;
   font-size: 1.1rem;
}

.modal-reservar .btn-close {
   filter: invert(1) opacity(0.6);
}

.slot-resumen {
   background: linear-gradient(135deg, rgba(255, 87, 34, 0.12), rgba(255, 87, 34, 0.04));
   border: 1px solid rgba(255, 87, 34, 0.25);
   border-radius: var(--pr-radius);
   padding: 18px 20px;
}

.slot-resumen .cancha-r-nombre {
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 4px;
}

.slot-resumen .hora-r {
   font-size: 1.5rem;
   font-weight: 900;
   color: var(--primary);
   letter-spacing: -0.5px;
}

.slot-resumen .precio-r {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.6);
   margin-top: 4px;
}

.modal-reservar .form-label {
   font-size: 0.78rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
   letter-spacing: 0.7px;
   margin-bottom: 6px;
}

.modal-reservar .form-control {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid var(--pr-border);
   border-radius: 10px;
   color: #fff;
   padding: 11px 14px;
   transition: border-color var(--pr-transition), background var(--pr-transition);
}

.modal-reservar .form-control:focus {
   background: rgba(255, 255, 255, 0.09);
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
   color: #fff;
}

.modal-reservar .form-control::placeholder {
   color: rgba(255, 255, 255, 0.25);
}

.modal-reservar .form-control.campo-precargado {
   border-color: rgba(34, 197, 94, 0.4);
   background: rgba(34, 197, 94, 0.05);
   color: rgba(255, 255, 255, 0.9);
}

.modal-reservar .form-control.campo-precargado:focus {
   border-color: rgba(34, 197, 94, 0.65);
   box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
   background: rgba(34, 197, 94, 0.08);
}

.btn-confirmar-reserva {
   width: 100%;
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 14px;
   font-weight: 800;
   font-size: 1rem;
   cursor: pointer;
   margin-top: 8px;
   transition: opacity var(--pr-transition), transform var(--pr-transition), box-shadow var(--pr-transition);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.btn-confirmar-reserva:hover {
   opacity: 0.9;
   transform: translateY(-1px);
   box-shadow: 0 6px 24px rgba(255, 87, 34, 0.4);
}

/* =====================================================
   FOOTER
===================================================== */
#footer-pub {
   border-top: 1px solid var(--pr-border);
   background: var(--bg);
   padding: 20px 10px;
   /* Safe area para iPhone (home indicator) */
   padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.footer-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   background: var(--pr-glass);
   border: 1px solid var(--pr-border);
   border-radius: 8px;
   color: rgba(255, 255, 255, 0.55);
   font-size: 1rem;
   text-decoration: none;
   transition: background var(--pr-transition), color var(--pr-transition), border-color var(--pr-transition);
}

.footer-social a:hover {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary);
}

/* =====================================================
   SKELETON (por compatibilidad)
===================================================== */
@keyframes shimmer {
   0% {
      background-position: -800px 0;
   }

   100% {
      background-position: 800px 0;
   }
}

.skeleton {
   background: linear-gradient(90deg, #1e1e1e 25%, #2a2a2a 50%, #1e1e1e 75%);
   background-size: 800px 100%;
   animation: shimmer 1.6s infinite linear;
   border-radius: 8px;
}

/* =====================================================
   AUTH PAGES — Login / Registro / Recuperar
===================================================== */
.auth-page {
   min-height: 100vh;
   padding: 30px 16px 40px;
   background: radial-gradient(ellipse at 60% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
      radial-gradient(ellipse at 20% 80%, rgba(255, 87, 34, 0.10) 0%, transparent 55%),
      var(--bg, #0d0d0d);
}

.auth-card {
   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid rgba(255, 255, 255, 0.09);
   border-radius: 24px;
   padding: 15px 30px;
   width: 100%;
   max-width: 420px;
   box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
   animation: authCardIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes authCardIn {
   from {
      opacity: 0;
      transform: translateY(24px) scale(0.97);
   }

   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* Ícono decorativo */
.auth-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   border-radius: 18px;
   background: linear-gradient(135deg, var(--primary, #6366f1), rgba(99, 102, 241, 0.5));
   box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35);
   font-size: 1.8rem;
   color: #fff;
}

.auth-logo {
   max-height: 56px;
   max-width: 160px;
   object-fit: contain;
}

.auth-title {
   font-size: 1.6rem;
   font-weight: 800;
   color: #fff;
   letter-spacing: -0.5px;
   margin-bottom: 6px;
}

.auth-subtitle {
   font-size: 0.88rem;
   color: rgba(255, 255, 255, 0.45);
   line-height: 1.5;
   margin-bottom: 0;
}

/* ── Campos ── */
.auth-field {
   display: flex;
   flex-direction: column;
}

.auth-label {
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.4);
   margin-bottom: 8px;
}

.input-icon-wrap {
   position: relative;
   display: flex;
   align-items: center;
}

.input-icon {
   position: absolute;
   left: 14px;
   color: rgba(255, 255, 255, 0.3);
   font-size: 0.95rem;
   pointer-events: none;
   z-index: 1;
}

.auth-input {
   width: 100%;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 12px;
   color: #fff;
   padding: 5px 35px;
   font-size: 0.95rem;
   font-family: inherit;
   outline: none;
   transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.auth-input::placeholder {
   color: rgba(255, 255, 255, 0.20);
}

.auth-input:focus {
   background: rgba(255, 255, 255, 0.09);
   border-color: var(--primary, #6366f1);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.auth-input.input-error {
   border-color: #ef4444;
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Ojo contraseña */
.btn-eye {
   position: absolute;
   right: 12px;
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.3);
   cursor: pointer;
   padding: 4px;
   font-size: 1rem;
   line-height: 1;
   transition: color 0.2s ease;
   z-index: 1;
}

.btn-eye:hover {
   color: rgba(255, 255, 255, 0.7);
}

/* Mensaje de error inline */
.field-error {
   font-size: 0.78rem;
   color: #f87171;
   margin-top: 5px;
   min-height: 18px;
   line-height: 1.3;
}

/* ── Barra de fortaleza de contraseña ── */
.password-strength {
   display: flex;
   align-items: center;
   gap: 10px;
}

.strength-track {
   flex: 1;
   height: 4px;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.08);
   overflow: hidden;
}

.strength-fill {
   height: 100%;
   border-radius: 4px;
   transition: width 0.4s ease, background 0.4s ease;
   width: 0%;
}

.strength-label {
   font-size: 0.72rem;
   font-weight: 600;
   min-width: 70px;
   text-align: right;
}

/* ── Botón primario ── */
.btn-auth-primary {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   background: linear-gradient(135deg, var(--primary, #6366f1), #8b5cf6);
   color: #fff;
   border: none;
   border-radius: 12px;
   padding: 10px 20px;
   font-size: 0.97rem;
   font-weight: 700;
   font-family: inherit;
   cursor: pointer;
   transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
   box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
   text-decoration: none;
}

.btn-auth-primary:hover {
   opacity: 0.9;
   transform: translateY(-1px);
   box-shadow: 0 8px 28px rgba(99, 102, 241, 0.5);
   color: #fff;
}

.btn-auth-primary:disabled {
   opacity: 0.65;
   cursor: not-allowed;
   transform: none;
}

/* Spinner en botón */
.spin {
   animation: spinAnim 0.8s linear infinite;
   display: inline-block;
}

@keyframes spinAnim {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* ── Divisor ── */
.auth-divider {
   position: relative;
   text-align: center;
   margin: 20px 0;
}

.auth-divider::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 1px;
   background: rgba(255, 255, 255, 0.08);
}

.auth-divider span {
   position: relative;
   background: transparent;
   padding: 0 14px;
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.3);
   font-weight: 500;
}

/* ── Botón Google ── */
.btn-google {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   padding: 12px 24px;
   font-size: 0.92rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
   cursor: pointer;
   transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, color 0.2s ease;
}

.btn-google:hover {
   background: rgba(255, 255, 255, 0.10);
   border-color: rgba(255, 255, 255, 0.22);
   color: #fff;
   transform: translateY(-1px);
}

.google-icon {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

/* ── Links ── */
.auth-link-small {
   font-size: 0.84rem;
   color: rgba(255, 255, 255, 0.45);
   text-decoration: none;
   transition: color 0.2s ease;
}

.auth-link-small.fw-semibold {
   color: var(--primary, #6366f1);
}

.auth-link-small:hover {
   color: #fff;
}

/* ── Notice / Alert ── */
.auth-notice {
   border-radius: 12px;
   padding: 14px 16px;
   font-size: 0.88rem;
   font-weight: 500;
}

.auth-notice--error {
   background: rgba(239, 68, 68, 0.12);
   border: 1px solid rgba(239, 68, 68, 0.30);
   color: #fca5a5;
}

/* ── Botón Volver ── */
.btn-auth-back {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 0.82rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.38);
   text-decoration: none;
   padding: 6px 12px 6px 8px;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.03);
   transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
   width: fit-content;
}

.btn-auth-back i {
   font-size: 0.88rem;
   transition: transform 0.22s ease;
}

.btn-auth-back:hover {
   color: var(--primary, #6366f1);
   background: rgba(99, 102, 241, 0.08);
   border-color: rgba(99, 102, 241, 0.25);
   transform: translateX(-2px);
}

.btn-auth-back:hover i {
   transform: translateX(-3px);
}

/* ── Responsive auth ── */
@media (max-width: 480px) {
   .auth-card {
      padding: 28px 20px;
   }

   .auth-title {
      font-size: 1.35rem;
   }
}

/* =====================================================
   RESPONSIVE MOBILE — Hero + Carrusel
   En móviles: texto arriba, carrusel abajo (1 columna)
===================================================== */
@media (max-width: 991px) {
   #hero {
      height: auto;
      min-height: 100dvh;
      align-items: flex-start;
      overflow-y: auto;
   }

   .hero-layout {
      grid-template-columns: 1fr;
      padding: 90px 20px 48px;
      gap: 28px;
      align-items: start;
   }

   .hero-left {
      align-items: flex-start;
   }

   #hero h1 {
      font-size: clamp(2rem, 7vw, 3rem);
   }

   .hero-sub {
      font-size: 0.95rem;
      max-width: 100%;
      margin-bottom: 24px;
   }

   .hero-filtro {
      width: 80%;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      margin-bottom: 30px;
      padding-left: 15px;
   }

   .filtro-grupo {
      width: 100%;
   }

   .filtro-input {
      width: 100%;
      min-width: 0;
   }

   .btn-buscar {
      display: none;
   }

   .hero-right {
      width: 100%;
      height: auto;
      align-items: flex-start;
   }

   .carrusel-wrapper {
      height: 520px;
      width: 100%;
      margin-top: 8px;
      /* Espacio extra al fondo para que el carrusel no tape el footer */
      margin-bottom: 30px;
   }

   .carrusel-dots {
      bottom: -15px;
   }

   .navbar-pub .brand-logo,
   .navbar-pub .brand-name {
      display: none !important;
   }

   :root {
      --card-w: calc(100vw - 64px);
   }
}

@media (max-width: 480px) {
   .hero-layout {
      padding: 65px 15px 40px;
      gap: 24px;
   }

   .carrusel-wrapper {
      height: 480px;
      margin-bottom: 32px;
   }

   .carrusel-dots {
      bottom: -20px;
   }

   :root {
      --card-w: calc(100vw - 40px);
   }

   .hero-eyebrow {
      font-size: 0.65rem;
   }

   #hero h1 {
      font-size: clamp(1.8rem, 8vw, 2.4rem);
   }
}

/* =====================================================
   HISTORIAL PAGE LAYOUT
===================================================== */
#historial-page {
   min-height: 100vh;
   padding-top: 90px;
   padding-bottom: 60px;
   position: relative;
   overflow-x: hidden;
}

.historial-bg-deco {
   position: fixed;
   inset: 0;
   background:
      radial-gradient(ellipse at 80% 10%, rgba(var(--primary-rgb, 255, 87, 34), 0.12) 0%, transparent 55%),
      radial-gradient(ellipse at 10% 90%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
      var(--bg, #0d0d0d);
   z-index: -1;
}

.historial-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
}

/* ── Header ── */
.historial-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   margin-bottom: 32px;
}

.historial-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--primary);
   color: #fff;
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 20px;
   margin-bottom: 16px;
}

.historial-header h1 {
   font-size: clamp(1.8rem, 3.5vw, 2.8rem);
   font-weight: 900;
   color: #fff;
   letter-spacing: -0.5px;
   margin-bottom: 8px;
}

.historial-header h1 span {
   color: var(--primary);
}

.historial-sub {
   color: rgba(255, 255, 255, 0.55);
   font-size: 0.95rem;
   margin: 0;
}

/* ── Stats chips ── */
.historial-stats {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.stat-chip {
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 12px;
   padding: 10px 16px;
   min-width: 100px;
}

.stat-chip i {
   font-size: 1.4rem;
   color: rgba(255, 255, 255, 0.35);
}

.stat-chip.success i {
   color: #22c55e;
}

.stat-chip.warning i {
   color: #f59e0b;
}

.stat-num {
   display: block;
   font-size: 1.3rem;
   font-weight: 800;
   color: #fff;
   line-height: 1;
}

.stat-lbl {
   display: block;
   font-size: 0.68rem;
   color: rgba(255, 255, 255, 0.4);
   text-transform: uppercase;
   letter-spacing: 0.8px;
   margin-top: 2px;
}

/* ── Card principal ── */
.historial-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ── Filtros ── */
.historial-filtros {
   display: flex;
   align-items: flex-end;
   gap: 12px;
   flex-wrap: wrap;
   padding: 20px 24px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.07);
   background: rgba(0, 0, 0, 0.2);
}

.filtro-item {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.filtro-lbl {
   font-size: 0.65rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.35);
}

.filtro-ctrl {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 8px;
   color: #fff;
   padding: 8px 12px;
   font-size: 0.875rem;
   font-family: inherit;
   outline: none;
   transition: border-color 0.25s, background 0.25s;
   min-width: 140px;
}

.filtro-ctrl:focus {
   border-color: var(--primary);
   background: rgba(255, 255, 255, 0.09);
}

.filtro-ctrl option {
   background: #1a1a1a;
}

.filtro-buscar {
   flex: 1;
   max-width: 320px;
}

.filtro-search-wrap {
   position: relative;
}

.filtro-search-icon {
   position: absolute;
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
   color: rgba(255, 255, 255, 0.3);
   font-size: 0.85rem;
}

.filtro-ctrl--search {
   padding-left: 32px;
   min-width: 200px;
}

/* ── Tabla ── */
.historial-table-wrap {
   overflow-x: auto;
}

.historial-thead th {
   background: rgba(0, 0, 0, 0.3);
   color: rgba(255, 255, 255, 0.4);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 12px 16px;
   border: none;
}

#historial-tbody td {
   padding: 13px 16px;
   border-color: rgba(255, 255, 255, 0.05);
   font-size: 0.9rem;
}

/* ── Badges de estado (mismo estilo que admin) ── */
.badge-estado {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 0.73rem;
   font-weight: 700;
   line-height: 1;
}

.badge-confirmada {
   background: rgba(34, 197, 94, 0.15);
   color: #4ade80;
   border: 1px solid rgba(34, 197, 94, 0.25);
}

.badge-pendiente {
   background: rgba(245, 158, 11, 0.15);
   color: #fbbf24;
   border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-cancelada {
   background: rgba(239, 68, 68, 0.15);
   color: #f87171;
   border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-expirada {
   background: rgba(107, 114, 128, 0.15);
   color: #9ca3af;
   border: 1px solid rgba(107, 114, 128, 0.25);
}

.badge-no-show {
   background: rgba(139, 92, 246, 0.15);
   color: #c4b5fd;
   border: 1px solid rgba(139, 92, 246, 0.25);
}

/* ── Btn detalle ── */
.btn-detalle-reserva {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.7);
   border-radius: 6px;
   padding: 5px 12px;
   font-size: 0.78rem;
   cursor: pointer;
   transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-detalle-reserva:hover {
   background: var(--primary);
   border-color: var(--primary);
   color: #fff;
}

/* ── Sin resultados ── */
.historial-empty {
   text-align: center;
   padding: 60px 24px;
   color: rgba(255, 255, 255, 0.3);
}

.historial-empty i {
   font-size: 3.5rem;
   display: block;
   margin-bottom: 16px;
}

.historial-empty p {
   font-size: 1rem;
   margin-bottom: 20px;
}

.btn-reservar-now {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--primary);
   color: #fff;
   padding: 10px 22px;
   border-radius: 8px;
   font-weight: 700;
   font-size: 0.9rem;
   text-decoration: none;
   transition: opacity 0.2s, transform 0.2s;
}

.btn-reservar-now:hover {
   opacity: 0.88;
   transform: translateY(-1px);
   color: #fff;
}

/* ── Modal detalle cliente ── */
.historial-modal-content {
   background: #111;
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 20px;
   color: #fff;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.historial-modal-header {
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   padding: 20px 24px;
}

.historial-modal-footer {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-card {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   padding: 14px 16px;
   height: 100%;
}

.dc-card-label {
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.35);
   margin-bottom: 8px;
}

.dc-card-val {
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
}

.dc-card-sub {
   font-size: 0.82rem;
   color: rgba(255, 255, 255, 0.4);
   margin-top: 2px;
}

input[type="date"].filtro-ctrl::-webkit-calendar-picker-indicator {
   filter: invert(1) opacity(0.4);
   cursor: pointer;
}

/* =====================================================
   CARDS MÓVIL — Historial Reservas
===================================================== */
.reserva-card-mob {
   padding: 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   flex-direction: column;
   gap: 10px;
   transition: background 0.2s;
}

.reserva-card-mob:first-child {
   border-top: none;
}

.reserva-card-mob:last-child {
   border-bottom: none;
}

.reserva-card-mob:active {
   background: rgba(255, 255, 255, 0.03);
}

/* Fila superior: fecha + badge */
.rc-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 10px;
}

.rc-fecha-wrap {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.rc-fecha {
   font-size: 0.78rem;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.55);
   text-transform: capitalize;
   letter-spacing: 0.2px;
}

.rc-hora {
   font-size: 1.05rem;
   font-weight: 800;
   color: #fff;
   letter-spacing: -0.3px;
}

/* Fila media: cancha */
.rc-mid {
   display: flex;
   align-items: center;
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.55);
}

.rc-cancha {
   font-weight: 600;
   color: rgba(255, 255, 255, 0.8);
}

/* Fila inferior: monto + botón */
.rc-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.rc-monto {
   font-size: 1.1rem;
   font-weight: 800;
   color: var(--primary);
}

/* ── Responsive — breakpoints ── */
@media (max-width: 768px) {
   #historial-page {
      padding-top: 72px;
      padding-bottom: 40px;
   }

   .historial-container {
      padding: 0 14px;
   }

   .historial-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 20px;
   }

   .historial-header h1 {
      font-size: 1.6rem;
      margin-bottom: 4px;
   }

   .historial-sub {
      font-size: 0.85rem;
   }

   .historial-stats {
      width: 100%;
      gap: 8px;
   }

   .stat-chip {
      flex: 1;
      min-width: 0;
      padding: 8px 12px;
      gap: 8px;
   }

   .stat-chip i {
      font-size: 1.1rem;
   }

   .stat-num {
      font-size: 1.05rem;
   }

   .stat-lbl {
      font-size: 0.6rem;
   }

   .historial-card {
      border-radius: 14px;
   }

   .historial-filtros {
      gap: 10px;
      padding: 14px 16px;
   }

   .filtro-item {
      min-width: 130px;
      flex: 1;
   }

   .filtro-buscar {
      max-width: 100%;
      width: 100%;
   }

   .historial-empty {
      padding: 40px 16px;
   }

   /* Modal en móvil */
   .historial-modal-content {
      border-radius: 16px 16px 0 0;
   }

   .modal-dialog {
      margin: auto 0 0;
      max-width: 100% !important;
   }

   .dc-card {
      padding: 12px 14px;
   }

   .dc-card-val {
      font-size: 0.92rem;
   }
}

@media (max-width: 400px) {
   .historial-stats {
      flex-direction: row;
      flex-wrap: nowrap;
   }

   .stat-chip {
      padding: 7px 8px;
      gap: 6px;
   }

   .stat-chip i {
      font-size: 0.95rem;
   }

   .rc-hora {
      font-size: 0.95rem;
   }

   .rc-monto {
      font-size: 1rem;
   }
}

/* =====================================================
   AUTH LAYOUT — Layout de autenticación (main_auth)
===================================================== */

/* Layout auth: pantalla completa sin scroll */
body.auth-body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: var(--bg, #0d0d0d);
}

.auth-topbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   padding: 18px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: transparent;
}

.auth-topbar-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
}

.auth-topbar-brand .brand-logo {
   max-height: 36px;
   object-fit: contain;
}

.auth-topbar-brand .brand-name {
   font-family: 'Outfit', sans-serif;
   font-weight: 900;
   font-size: 1.1rem;
   letter-spacing: -0.5px;
   color: #fff;
   text-transform: uppercase;
}

.auth-back-btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 0.82rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.38);
   text-decoration: none;
   padding: 7px 14px 7px 10px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(8px);
   transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.auth-back-btn i {
   font-size: 0.9rem;
   transition: transform 0.22s ease;
}

.auth-back-btn:hover {
   color: var(--primary, #6366f1);
   background: rgba(99, 102, 241, 0.10);
   border-color: rgba(99, 102, 241, 0.28);
   transform: translateX(-2px);
}

.auth-back-btn:hover i {
   transform: translateX(-3px);
}

main.auth-main {
   flex: 1;
}

/* ── Modal Mi Perfil — ancho máximo */
.perfil-modal-dialog {
   max-width: 560px;
}

/* ── Footer — link de desarrollo */
.footer-dev-link {
   color: var(--primary);
   font-weight: 600;
}