:root{
  --bg:#060a17;
  --ink:#f2f5f7;
  --accent:#c8f10a;
  --maxw:1450px;
}

/*Hace que por defecto la version desktop se vea y la movil no*/
.desktop-only { display:block; } 
.mobile-only  { display:none; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

/* Header con imagen y hotspots */
.site-header{position:sticky; top:0; z-index:9999; background:#07152a}
.header-wrap{position:relative; max-width:var(--maxw); margin:0 auto}
.header-wrap>img{width:100%; height:auto; display:block}

/* Hotspots */
.hotspots{ position:absolute; inset:0; display:grid; grid-template-columns:9% 11.1% 15% 13.8% 11.8% 12.4% 12.3% 14.4%; }
.hotspots a{display:block}
.hotspots a:hover{outline:2px solid rgba(200,241,10,1); outline-offset:-2px}

/* Menú móvil base */
.nav-toggle{display:none; position:absolute; right:10px; top:10px; z-index:2; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:10px; padding:8px 12px}
.mobile-nav{display:none; position:absolute; left:0; right:0; top:100%; background:#07152a; border-bottom:2px solid var(--accent)}
.mobile-nav a{display:block; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08)}

@media (max-width: 900px){
  .hotspots{display:none}
  .nav-toggle{display:block}
}

/* Oculta toda la sección de auditoría en pantallas < 1024px */
@media (max-width: 1023px){
  #rcAuditSection{ display:none !important; }
}


/* Secciones de imagen */
.section-img img{width:100%; height:auto; display:block}

/*  PAGINA DE INICIO - Imagen 07: 7 botones absolutos */
.hotspot-inicio-abs{ position:relative; }
.hotspot-inicio-abs .hotspots{ position:absolute; inset:0; }
.hotspot-inicio-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-inicio-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-inicio-abs .b1{ --x: 3.3%;  --y: 18%; --w: 12.5%; --h: 48%; }
.hotspot-inicio-abs .b2{ --x: 16%;   --y: 49%; --w: 12.5%; --h: 46%; }
.hotspot-inicio-abs .b3{ --x: 29%;   --y: 18%; --w: 12.5%; --h: 48%; }
.hotspot-inicio-abs .b4{ --x: 40%;   --y: 49%; --w: 20%;  --h: 46%; }
.hotspot-inicio-abs .b5{ --x: 59%;   --y: 18%; --w: 11.5%; --h: 48%; }
.hotspot-inicio-abs .b6{ --x: 72%;   --y: 49%; --w: 12.5%; --h: 46%; }
.hotspot-inicio-abs .b7{ --x: 85%;   --y: 18%; --w: 11.5%; --h: 48%; }
@media (max-width:900px){
  .hotspot-inicio-abs .hotspots{ display:block !important; }
}

/*  PAGINA DE INICIO - mobile */
.hotspot-inicio-abs-mobile{ position:relative; }
.hotspot-inicio-abs-mobile .hotspots{ position:absolute; inset:0; }
.hotspot-inicio-abs-mobile a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-inicio-abs-mobile a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-inicio-abs-mobile .b1{ --x: 4.7%;  --y: 18%; --w: 14.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b2{ --x: 19%;   --y: 49%; --w: 12.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b3{ --x: 32%;   --y: 18%; --w: 12.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b4{ --x: 40%;   --y: 49%; --w: 20%;  --h: 45%; }
.hotspot-inicio-abs-mobile .b5{ --x: 58%;   --y: 18%; --w: 12.5%; --h: 45%; }
.hotspot-inicio-abs-mobile .b6{ --x: 70.6%;   --y: 48%; --w: 11.5%; --h: 44%; }
.hotspot-inicio-abs-mobile .b7{ --x: 81%;   --y: 18%; --w: 14.5%; --h: 45%; }
@media (max-width:900px){
  .hotspot-inicio-abs-mobile .hotspots{ display:block !important; }
}

/*  PAGINA DE NOSOTROS - Imagen 06: 4 botones absolutos */
.hotspot-nosotros-abs{ position:relative; }
.hotspot-nosotros-abs .hotspots{ position:absolute; inset:0; }
.hotspot-nosotros-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-nosotros-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-nosotros-abs .b1{ --x: 0%;  --y: 0%; --w: 45.6%; --h: 25%; }
.hotspot-nosotros-abs .b2{ --x: 0%;   --y: 25%; --w: 45.6%; --h: 25%; }
.hotspot-nosotros-abs .b3{ --x: 0%;   --y: 50%; --w: 45.6%; --h: 25%; }
.hotspot-nosotros-abs .b4{ --x: 0%;   --y: 75%; --w: 45.6%;  --h: 25%; }
@media (max-width:900px){
  .hotspot-nosotros-abs .hotspots{ display:block !important; }
}

/*  PAGINA DE NOSOTROS - mobile */
.hotspot-nosotros-abs-mobile{ position:relative; }
.hotspot-nosotros-abs-mobile .hotspots{ position:absolute; inset:0; }
.hotspot-nosotros-abs-mobile a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-nosotros-abs-mobile a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-nosotros-abs-mobile .b1{ --x: 0%;  --y: 0%; --w: 44.5%; --h: 24.5%; }
.hotspot-nosotros-abs-mobile .b2{ --x: 0%;   --y: 24%; --w: 44.5%; --h: 30%; }
.hotspot-nosotros-abs-mobile .b3{ --x: 0%;   --y: 54%; --w: 44.5%; --h: 24.5%; }
.hotspot-nosotros-abs-mobile .b4{ --x: 0%;   --y: 77%; --w: 44.5%;  --h: 22.5%; }
@media (max-width:900px){
  .hotspot-nosotros-abs-mobile .hotspots{ display:block !important; }
}

/*  PAGINA DE DIAS Y HORARIO - Imagen 03: 4 botones absolutos */
.hotspot-diashoras-abs{ position:relative; }
.hotspot-diashoras-abs .hotspots{ position:absolute; inset:0; }
.hotspot-diashoras-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-diashoras-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-diashoras-abs .b1{ --x: 0%;  --y: 0%; --w: 25%; --h: 100%; }
.hotspot-diashoras-abs .b2{ --x: 25%;   --y: 0%; --w: 25%; --h: 100%; }
.hotspot-diashoras-abs .b3{ --x: 50%;   --y: 0%; --w: 25%; --h: 100%; }
.hotspot-diashoras-abs .b4{ --x: 75%;   --y: 0%; --w: 25%;  --h: 100%; }
@media (max-width:900px){
  .hotspot-diashoras-abs .hotspots{ display:block !important; }
}
/*  PAGINA DE TARIFAS Y PROMOCIONES - Imagen 06: 4 botones absolutos */
.hotspot-tarifas-abs{ position:relative; }
.hotspot-tarifas-abs .hotspots{ position:absolute; inset:0; }
.hotspot-tarifas-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-tarifas-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-tarifas-abs .b1{ --x: 8%;  --y: 0%; --w: 11.6%; --h: 60%; }
.hotspot-tarifas-abs .b2{ --x: 32%;   --y: 0%; --w: 11.6%; --h: 60%; }
.hotspot-tarifas-abs .b3{ --x: 56.5%;   --y: 0%; --w: 11.6%; --h: 60%; }
.hotspot-tarifas-abs .b4{ --x: 79.5%;   --y: 0%; --w: 11.6%;  --h: 60%; }
@media (max-width:900px){
  .hotspot-tarifas-abs .hotspots{ display:block !important; }
} 

/*  ACADEMIA - Imagen 13: 4 botones absolutos */
.hotspot-academia-abs{ position:relative; }
.hotspot-academia-abs .hotspots{ position:absolute; inset:0; }
.hotspot-academia-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-academia-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-academia-abs .b1{ --x: 0%;  --y: 0%; --w: 28.5%; --h: 100%; }
.hotspot-academia-abs .b2{ --x: 28.5%;   --y: 0%; --w: 21.5%; --h: 100%; }
.hotspot-academia-abs .b3{ --x: 50%;   --y: 0%; --w: 25%; --h: 100%; }
.hotspot-academia-abs .b4{ --x: 75%;   --y: 0%; --w: 25%;  --h: 100%; }
@media (max-width:900px){
  .hotspot-academia-abs .hotspots{ display:block !important; }
}



/*  PAGINA DE UBICACIÓN - Imagen 06: 4 botones absolutos */
.hotspot-ubicacion-abs{ position:relative; }
.hotspot-ubicacion-abs .hotspots{ position:absolute; inset:0; }
.hotspot-ubicacion-abs a{ position:absolute; display:block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.hotspot-ubicacion-abs a:hover{ outline:2px dashed rgba(200,241,10,.35); outline-offset:-2px; }
.hotspot-ubicacion-abs .b1{ --x: 0%;      --y: 50%; --w: 16.2%; --h: 50%; }
.hotspot-ubicacion-abs .b2{ --x: 16.2%;   --y: 0%; --w: 16.2%; --h: 50%; }
.hotspot-ubicacion-abs .b3{ --x: 67.6%;   --y: 50%; --w: 16.2%; --h: 50%; }
.hotspot-ubicacion-abs .b4{ --x: 83.8%;   --y: 0%; --w: 16.2%;  --h: 50%; }
@media (max-width:900px){
  .hotspot-ubicacion-abs .hotspots{ display:block !important; }
} 


/* Volver al principio (Imagen 11) */
.hotspot-backtop{position:relative}
.hotspot-backtop .back-to-top{ --x:35%; --y:61%; --w:30%; --h:29%; position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); display:block; }
.hotspot-backtop .back-to-top:hover{ outline:2px dashed rgba(200,241,10,1); outline-offset:-2px }

/* Footer */
.site-footer{background:#07152a}
.site-footer img{width:100%; height:auto; display:block}

/* Menú móvil por imágenes pegadas a la derecha (cerrado por defecto) */
#mobile-nav.menu-images{ display:none; }
@media (max-width: 900px){
  /*hace que la version movil se vea y la desktop no*/
  .desktop-only { display:none !important; }
  .mobile-only  { display:block !important; }

  #mobile-nav.menu-images{
    position: fixed; top:0; right:0; bottom:0; left:auto;
    z-index:9999; background:#07152a; border-left:2px solid var(--accent);
    padding:56px 0 0 0; width:max-content; overflow-y:auto;
  }
  #mobile-nav.menu-images.is-open{ display:flex !important; flex-direction:column; align-items:flex-end; gap:0; }
  #mobile-nav.menu-images a{ display:block; margin:0 !important; border:0 !important; line-height:0; width:auto; }
  :root{ --menu-img-h: clamp(40px, 10vw, 72px); }
  #mobile-nav.menu-images img{ display:block; height:var(--menu-img-h)!important; width:auto!important; margin:0; padding:0; }
  .nav-toggle{ display:block !important; position:fixed; top:12px; right:12px; z-index:10000; }
  .header-wrap > img, .hotspots{ display:none !important; }
}

/* Botones dentro de páginas */
.page-buttons{ padding: 16px; }
.btn-grid{ max-width: var(--maxw); margin: 0 auto; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.btn-solid{ text-align:center; padding:12px 14px; font-weight:700; color:#07152a; background: var(--accent); border-radius:999px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.btn-solid:hover{ filter: brightness(0.95); }

/* Contenedor móvil de la home */
#home-mobile {
  max-width: var(--maxw);
  margin: 0 auto;
}

#home-mobile img{
  display:block;
  width:100%;
  height:auto;
  line-height:0;
  /* Evita saltos de contenido al cargar */
  contain: content;
}
 body {
      font-family: Arial, sans-serif;
      background-image: url("assets/FONDO.png");
      background-size: cover; 
      background-attachment: fixed;
      margin: 0;
    }

    #admin-panel,
    #user-panel {
      background: #042A48;
    }

    #login-panel{
      background: transparent;
    }

    #btn-logout-admin,
    #btn-logout-user{
      color: #000 !important;              /* fuerza negro */
    }
    /* 1) Texto del checkbox en LOGIN en blanco */
#cancel-policy-wrapper label{
  color: #fff;
}

/* 2) Títulos en blanco dentro de USER y ADMIN */
#user-panel h2,
#admin-panel h2,
#admin-panel h3{         /* "Usuarios registrados" encima de la tabla */
  color: #fff;
}

/* 3) "Crear usuario:" y cualquier otro label dentro de ADMIN en blanco */
#admin-panel label{
  color: #0c2b45;
}

/* --- Legibilidad dentro del ADMIN (no lo pediste, pero evita que
       el texto quede blanco sobre la tabla/form blancos) --- */

/* Inputs / selects con texto oscuro sobre fondo claro */
#admin-panel input,
#admin-panel select{
  background: #fff;
  color: #0c2b45;
  border: 1px solid rgba(0,0,0,.15);
}

 /* … tu CSS existente … */

/* === RESET finito de color para evitar gris heredado del sitio === */
/* 1) Admin/User: texto base BLANCO (fondo oscuro) */
#admin-panel,
#user-panel{
  color: #fff;
}

/* 2) Zonas claras del sistema: texto base OSCURO */
#login-hero .login-form,
#confirm-container,
#contenedor-canchas,
#weekly-calendars,
.header{
  color: #0c2b45;  /* azul oscuro legible */
}

#weekly-calendars #weekly-calendars-title{
  color: #fff !important;  /* azul oscuro legible */
}

/* 3) Botones: heredan el color de su contenedor (por si el sitio fuerza gris) */
#login-hero button,
#admin-panel button,
#user-panel button,
#confirm-container button{
  color: inherit;
}

/* 4) Slots disponibles: asegura texto oscuro sobre fondo claro */
.slot,
.slot.available{
  color: #0c2b45;
}

/* 5) Etiqueta "Fecha:" en la cabecera */
.header label{
  color: #0c2b45;
}
/* Recuadro azul para "Fecha:" (inicio, usuarios y admin) */
.header label[for="fecha"]{
  background: #042A48;
  color: #fff !important;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;     /* evita salto de línea en "Fecha:" */
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}


/* 6) Mantén en blanco lo que pediste (por si el reset de arriba compite) */
#login-hero #cancel-policy-wrapper label{
  color: #fff !important;  /* checkbox de políticas en blanco */
}
#user-panel h2,
#admin-panel h2,
#admin-panel label{
  color: #fff;   /* títulos y labels del admin/user en blanco */
}
#admin-panel h3,
#admin-panel h4
{color: #042A48;}


/* Tabla de usuarios: fondo claro y texto oscuro */
#admin-panel #user-list{ 
    position: relative;
  /* Ajusta esta variable si tienes un header/menú fijo arriba */
  --fixed-top: 0px;
  /* Alturas exactas de los elementos sticky */
  --title-h: 44px;   /* altura del H3 */
  --search-h: 48px;  /* altura de la barra de búsqueda */ 
  background: #fff; }
#admin-panel #user-list th,
#admin-panel #user-list td{ color: #0c2b45; }
#admin-panel #user-list th{ background: #f0f4f8; }


    #login-panel,
    #admin-panel,
    #user-panel {
      padding: 15px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      max-width: 600px;
      margin: auto 0 20px;
    }

    h2 {
      margin-top: 0;
    }

    input,
    select,
    button {
      font-size: 14px;
    }

    #login-panel input,
    #login-panel button,
    #admin-panel input,
    #admin-panel select,
    #admin-panel button,
    #user-panel button {
      width: 90%;
      padding: 8px;
      margin: 6px 0;
    }

    #user-list {
      max-height: 300px;
      overflow-y: auto;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: #fff;
      padding: 5px;
    }

    #user-list table {
      width: 100%;
      border-collapse: collapse;
    }

    #user-list th,
    #user-list td {
      border: 1px solid #ccc;
      padding: 6px;
      text-align: center;
    }

    #user-list th {
      background: #eee;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    /* Alinea botones de acciones uno al lado del otro */
    .action-btn-container {
      display: flex;
      gap: 4px;
      justify-content: center;
    }

    .action-btn {
      padding: 4px 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
    }

    .action-edit {
      background: #3498db;
      color: #fff;
    }

    .action-delete {
      background: #e74c3c;
      color: #fff;
    }

    .header {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    .header label {
      font-weight: bold;
    }

    #fecha {
      padding: 6px;
      font-size: 16px;
    }

    /* ==== CANCHAS con 4 fondos (uno por cada cancha) ==== */
    
    /* Centra y limita el ancho de las canchas */
    
    /* Reset de caja para evitar sorpresas con padding/ancho */
    *, *::before, *::after { box-sizing: border-box; }

    /* Lateral fluido y centrado real */
    #contenedor-canchas{
      padding-inline: clamp(16px, 5vw, 28px); /* más aire en pantallas chicas */
      margin-inline: auto;
    }

    /* Un pequeño margen lateral extra por si el fondo luce “al ras” */
    @media (max-width: 600px){
      .cancha{ margin-inline: 6px; }
    }

    /* Oculto accesible (déjalo como lo tienes) */
    .sr-only{
      position:absolute !important;
      width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    /* CANCHA */
    .cancha{
      /* variables de espaciado */
      --label-safe: 56px;      /* alto del cintillo de la imagen (ajústalo) */
      --pad-x: 2em;           /* padding lateral */
      --pad-y: 2em;           /* padding base */
      --pad-top: calc(var(--pad-y) + var(--label-safe));  /* no tapar el título */
      --pad-bottom: 4em;      /* más respiro abajo */

      display: flex;
    
      position: relative;
      width: 100%;
      border-radius: 12px;
      overflow: hidden;

      /* Fondo: anclado al título */
      background-size: cover;
      background-position: left top;   /* foco en el rótulo */
      background-repeat: no-repeat;

      /* Relación de aspecto de tu imagen (2048x572) */
      aspect-ratio: 2048 / 572;

      /* 👇 ESTA es la clave: padding único que NO se pisa */
      padding: var(--pad-top) var(--pad-x) var(--pad-bottom);

      box-shadow: 0 1px 3px rgba(0,0,0,.1);
      margin: 0 0 20px 0;
    }

    /* Overlay sutil para legibilidad */
    .cancha::before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));
      z-index: 0;
    }
    .cancha > *{ position: relative; z-index: 1; }

    /* Mapea cada cancha a su imagen */
    .cancha[data-court="1"]{ background-image: url('../assets/CANCHA1.jpg'); }
    .cancha[data-court="2"]{ background-image: url('../assets/CANCHA2.jpg'); }
    .cancha[data-court="3"]{ background-image: url('../assets/CANCHA3.jpg'); }
    .cancha[data-court="4"]{ background-image: url('../assets/CANCHA4.jpg'); }

    .cancha h3 {
      margin-top: 0;
      font-size: 18px;
    }

    /* C.1 El contenedor de slots centra las filas */
    .slots{
      display: flex;
      flex-wrap: wrap;
      --gap: 10px;                 /* ajusta si quieres más/menos separación */
      gap: var(--gap);               /* separaciones entre chips */
      justify-content: center;   /* centra cada fila */
      margin-block: auto;   /* reparte el espacio arriba/abajo → centro vertical */
    }

    .slot {
      display: flex;               /* centra vertical y horizontal */
      align-items: center;
      justify-content: center;
      flex: 0 0 180px;           /* ancho fijo base */
      min-height: 48px;
      text-align: center;
      border: 2px solid #555;
      border-radius: 4px;
      user-select: none;
      transition: background .2s, color .2s;
    }

    /* ===== MOBILE: tarjeta se adapta a los slots + grid 4/5 columnas ===== */
    @media (max-width: 900px){
      /* 1) La cancha ya NO fuerza alto: crece según el contenido (slots) */
      .cancha{
        aspect-ratio: auto;     /* quita alto fijo */
        min-height: unset;
        display: block;         /* evita que flex aplaste el contenido en móviles */
      }

      /* 2) Grid robusto para que los slots entren y no se salgan */
      .slots{
        display: grid !important;        /* reemplaza flex solo en móvil */
        gap: var(--gap, 10px);
        grid-template-columns: repeat(3, 1fr);  /* 4 columnas por defecto */
        align-content: start;             /* contenido desde arriba */
        justify-items: stretch;           /* cada celda llena su columna */
        margin-block: 0;                  /* cancela centrado vertical previo */
      }
      
     /* Los slots NO están dentro de #admin-panel; viven en #contenedor-canchas */
#contenedor-canchas .slot{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;                 /* permite que el contenido se encoja */
}

/* Fila flexible que se envuelve cuando no cabe */
#contenedor-canchas .slot .slot-line{
  display: flex;
  flex-wrap: wrap;              /* se parte en varias líneas si no cabe */
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  row-gap: 2px;
  width: 100%;                  /* ocupa todo el ancho del slot */
  min-width: 0;                 /* habilita el encogimiento */
}

/* Separador visual */
#contenedor-canchas .slot .sep{
  opacity: .7;
  padding: 0 2px;
}
  
#contenedor-canchas .slot .slot-time{
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  flex: 0 0 auto;               /* la hora no se comprime */
  font-size: 1em;               /* base */
}
  
/* ↓↓↓ TODO lo que NO es ${ts} más pequeño ↓↓↓ */
#contenedor-canchas .slot .slot-user,
#contenedor-canchas .slot .slot-phone{
  flex: 1 1 140px;              /* pueden crecer/encoger y envolver */
  min-width: 0;                 /* IMPORTANTÍSIMO para que encoja en flex */
  font-size: 0.72em;            /* más pequeño que la hora */
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* En móviles puedes reducir un poco más si quieres */
@media (max-width: 480px){
  #contenedor-canchas .slot .slot-user,
  #contenedor-canchas .slot .slot-phone{
    font-size: 0.68em;
  }
}
      

      /* 3) Cada slot llena su celda, con padding y texto centrado V/H */
      .slot{
        width: 100%;
        min-height: 44px;
        padding: 1px;
        display: flex;
        align-items: center;   /* centrado vertical del texto */
        justify-content: center; /* centrado horizontal */
        text-align: center;

        /* neutraliza el ancho fijo de escritorio (flex-basis: 180px) */
        flex: unset;
        max-width: none;
      }

       /* === IMÁGENES MÓVILES PARA CANCHAS === */
      .cancha[data-court="1"]{ background-image: url('../assets/mobile/CANCHA1.jpg'); }
      .cancha[data-court="2"]{ background-image: url('../assets/mobile/CANCHA2.jpg'); }
      .cancha[data-court="3"]{ background-image: url('../assets/mobile/CANCHA3.jpg'); }
      .cancha[data-court="4"]{ background-image: url('../assets/mobile/CANCHA4.jpg'); }
    }
    
    .slot.available {
      background: #fff;
      cursor: pointer;
    }

    .slot.available:hover {
      background: #eef;
    }

    .slot.selected {
      background: #f1c40f;
      border-color: #d4ac0d;
      color: #000;
    }

    .slot.reserved-normal {
      background: #e74c3c;
      border-color: #c0392b;
      color: #fff;
    }

    .slot.reserved-academia {
      background: #f1c40f;
      border-color: #d4ac0d;
      color: #000;
    }

    .slot.reserved-paquete {
      background: #3498db;
      border-color: #2980b9;
      color: #fff;
    }

    /* Selección de USUARIO (amarillo, como antes) */
    .slot.selected-user {
      background: #f1c40f;
      border-color: #d4ac0d;
      color: #000;
    }

    /* Selección de ADMIN (morado claro) */
    .slot.selected-admin {
      background: #e8d5ff;
      border-color: #b185ff;
      color: #000;
    }


    #confirm-container {
      display: none;
      background: #fff;
      padding: 15px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      margin: auto 0 20px;
    }

    #confirm-container .admin-only {
      display: grid;
      grid-template-columns: max-content 1fr;
      column-gap: 12px;
      row-gap: 8px;
      align-items: center;
      margin-bottom: 10px;
    }

    #confirm-container button {
      background: #2ecc71;
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      width: 100%;
      padding: 8px;
      margin-top: 6px;
    }

    #confirm-container button:disabled {
      background: #aaa;
      cursor: default;
    }

    #cancel-policy-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      margin-top: 10px;
    }

    #cancel-policy-wrapper input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    #cancel-policy-wrapper label {
      cursor: pointer;
    }

    #weekly-calendars{
      display: none;              
      flex-direction: column;
      gap: 16px;
      margin-top: 30px;
    }
    #weekly-calendars > h3{
      margin: 0 0 10px 0;
    }
    .calendar-week{
      flex: none;
      width: 100%;
      background:#fff;
      border-radius:8px;
      box-shadow:0 1px 4px rgba(0,0,0,0.1);
      overflow:hidden;
      padding: 6px 8px 10px;
    }
    .calendar-week h4{
      margin: 0 0 8px 0;
    }


    .fc {
      font-size: 12px;
    }
    
      /* FullCalendar: que el título respete salto de línea y envuelva */
  .fc .fc-event-title,
  .fc .fc-event-main{
    white-space: pre-line;      /* respeta \n */
    word-break: break-word;     /* parte palabras largas si hace falta */
  }

  /* Evita recortes del contenido interno */
  .fc .fc-v-event .fc-event-main-frame{
    overflow: visible;
  }
  .fc .fc-timegrid-event .fc-event-main{
    overflow: visible;
  }

  /* Texto un poco más chico para que quepa cómodo */
  .fc .fc-timegrid-event .fc-event-title{
    font-size: .85em;
    line-height: 1.15;
  }

  /* Un poquito más de alto en cada “renglón” de la grilla */
  .fc .fc-timegrid-slot{
    min-height: 2.6em; /* ajusta si quieres más/menos */
  }


    #res-phone[readonly] {
      background: #f5f5f5;
      cursor: not-allowed;
    }

/* Contenedor del hero con la imagen de fondo RESPONSIVA */
.login-hero{
  position: relative;
  width: 100%;
  margin: 0 auto;

  /* usa tu imagen de login aquí */
  background-color: #042A48;
  background-position: center;/* centra el foco */

  /* centra el formulario dentro */
  display: grid;
  place-items: center;
  gap: 12px;               /* espacio entre h1 y el formulario */

  /* base visible de imagen; si el formulario necesita más,
     el contenedor CRECE (la imagen se expande con él) */
  min-height: clamp(420px, 60vh, 760px);

  /* respiro en bordes en cualquier pantalla */
  padding: clamp(16px, 4vw, 32px);
}

/* Base de títulos del hero (misma “letra”) */
.login-title{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 800;        /* bold fuerte como en el banner */
  letter-spacing: .02em;
  line-height: 1.05;
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Título principal: verde neón del banner */
.login-hero .login-title:first-of-type{
  color: #D6FF86;          /* verde neón */
  font-size: clamp(32px, 6vw, 96px);
}

/* Subtítulo: blanco y un poco más “apretado” */
.login-hero .login-title:nth-of-type(2){
  color: #FFFFFF;
  font-weight: 600;        /* un poco menos pesado que el principal */
  font-size: clamp(14px, 2.2vw, 28px);
  letter-spacing: .08em;   /* look de subtítulo largo del banner */
}


/* velito para legibilidad del texto sobre la imagen (opcional) */
.login-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.25));
  z-index: 0;
}

/* La tarjeta de login queda dentro, centrada y encima del fondo */
.login-form{
  position: relative; /* importante: que cuente para la altura del hero */
  z-index: 1;
  width: min(520px, 100%);
  max-width: 520px;

  /* Estilo del panel: usa el tuyo o este translúcido */
  background: rgba(255,255,255,.86);     /* se ve el fondo */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

/* Inputs/botón conservan ancho completo dentro del panel */
.login-form input,
.login-form button{
  width: 100%;
  height: 52px;
  margin: 12px 0;
  padding: 0 20px;
  font-size: 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  outline: none;
}

/* Tu botón con estilo */
.login-form button{
  background: #d6ff86;
  color: #0c2b45;
  font-weight: 800;
  cursor: pointer;
  border: none;
}

/* Quita el posicionamiento absoluto anterior en móviles */
@media (max-width: 900px){
  .login-form{ width: 100%; max-width: 520px; padding: 16px; }
}

.login-check{ margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.login-msg{ color:#ff6961; margin-top:8px; }

/* === POP-UP de imagen de confirmación === */
#confirm-img-overlay{
  position: fixed;
  inset: 0;
  display: none;                 /* se muestra por JS */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 10000;                /* por encima de todo */
}
#confirm-img{
  position: relative;
  width: min(90vw, 520px);
  max-height: 90vh;
}
#confirm-img img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
#confirm-img-close{
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 22px;
  line-height: 36px;
  cursor: pointer;
}

/* Ocultamiento controlado por JS (gana sobre estilos de la web madre) */
.auth-hidden{
  display: none !important;
}
/* ==== Compactar hero en móviles ==== */
@media (max-width: 600px){
  /* Menos alto y menos espacio vertical */
  .login-hero{
    min-height: unset;           /* no fuerces 60vh */
    padding: 12px 16px 16px;     /* menos padding */
    gap: 1px;                    /* menos espacio entre títulos y formulario */
  }

  /* Título principal y subtítulo más contenidos */
  .login-hero .login-title:first-of-type{
    font-size: clamp(22px, 7vw, 36px);
    line-height: 1.02;
  }
  .login-hero .login-title:nth-of-type(2){
    font-size: clamp(12px, 3.2vw, 18px);
    letter-spacing: .06em;
    line-height: 1.1;
  }

  /* Formulario más compacto */
  .login-form{
    padding: 12px;
  }
  .login-form input,
  .login-form button{
    height: 46px;
    margin: 8px 0;              /* menos separación entre campos */
    font-size: 16px;
  }

  /* Texto de políticas con menos margen */
  #cancel-policy-wrapper{
    margin-top: 6px;
    font-size: 12px;
  }
}/* Móvil: quita aire debajo del checkbox hasta el borde azul */
@media (max-width: 600px){
  /* fuerza el borde inferior del bloque azul */
  #login-hero.login-hero{
    min-height: unset !important;
    padding-bottom: 6px !important;   /* ajusta 6→4 si lo quieres aún más chico */
  }

  /* quita aire dentro de la tarjeta blanca */
  #login-hero .login-form{
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }

  /* el bloque del checkbox sin margen extra */
  #cancel-policy-wrapper{
    margin-bottom: 0 !important;
  }

  /* si no hay mensaje, que no ocupe espacio */
  #login-msg{
    margin-top: 4px !important;
  }
  #login-msg:empty{
    display: none !important;
  }
}
/* Admin: botón "Crear" con texto azul */
#admin-panel #btn-create{
  color: #0c2b45 !important; /* azul oscuro de la interfaz */
}
/* ===== Panel: Usuarios con penalización ===== */
#penalty-panel{
  background: #042A48;
  color: #fff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: auto 0 20px;
}
#penalty-panel h2,
#penalty-panel label{ color:#fff; }

#penalty-panel select,
#penalty-panel input,
#penalty-panel button{
  width: 90%;
  padding: 8px;
  margin: 6px 0;
}

/* Botón agregar penalización (mismo look que el login) */
#btn-add-penalty{
  background: #d6ff86;
  color: #0c2b45;
  font-weight: 800;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Lista de penalizados */
#penalty-list{
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  margin-top: 10px;
}
#penalty-list table{ width: 100%; border-collapse: collapse; }
#penalty-list th, #penalty-list td{
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
  color: #0c2b45;
}
#penalty-list th{
  background: #f0f4f8;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Botón quitar penalización */
.penalty-remove{
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  background: #e74c3c;
  color: #fff;
}

/* Mensaje de login cuando el usuario está penalizado */
.login-msg.alert{
  background: #ffecec;
  color: #c0392b;
  border-left: 4px solid #e74c3c;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 700;
}
#admin-panel #user-list > h3{
  position: sticky;
  top: var(--fixed-top);
  z-index: 40;
  margin: 0;                 /* evita colapso de márgenes */
  display: flex; align-items: center;
  height: var(--title-h);    /* fija altura real */
  padding: 0 12px;
  background: #fff;
  color: #0c2b45;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: -2px solid #e5e7eb;
}

#admin-panel #user-list .users-searchbar{
  position: sticky;
  top: calc(var(--fixed-top) + var(--title-h));
  z-index: 35;
  margin: 0;                 /* evita huecos */
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  height: var(--search-h);   /* fija altura real */
  padding: 0 12px;
  background: #fff;
  border-bottom: 0px solid #e5e7eb;
}
#admin-panel #user-list table{
  width: 100%;
  border-collapse: separate;   /* clave para sticky de <th> */
  border-spacing: 0;           /* que no se abran huecos */
}

#admin-panel #user-list table thead th{
  position: sticky;
  top: calc(var(--fixed-top) + var(--title-h) + var(--search-h));
  z-index: 30;
  background: #f0f4f8;
  box-shadow: 0 1px 0 #e5e7eb;   /* línea inferior */
  padding: 10px 8px;
}

/* Fondo sólido para filas (evita “transparencias” al scrollear) */
#admin-panel #user-list table tbody td{
  background: #fff;
}

/* (Opcional) si ves un “micro hueco” en algunos navegadores, fuerza una fina superposición */
#admin-panel #user-list .users-searchbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:#e5e7eb;
}
/* ===== [NO SUBA LA TABLA] — scroll solo dentro de la tabla ===== */

/* 1) El contenedor general ya NO scrollea */
#user-list{
  max-height: none !important;
  overflow: visible !important;
}

/* 2) Creamos un wrapper para la tabla que sí scrollea */
#admin-panel #user-list .users-table-wrap{
  /* Ajusta altura a gusto: 50vh, 60vh o un px fijo */
  max-height: 60vh;
  overflow: auto;
  background: #fff;
  border-top: 1px solid #e5e7eb;    /* línea superior */
  overscroll-behavior: contain;      /* evita “arrastrar” el scroll del body */
}

/* 3) La tabla dentro del wrapper */
#admin-panel #user-list .users-table-wrap table{
  width: 100%;
  border-collapse: separate; /* más estable para encabezados pegajosos */
  border-spacing: 0;
}

/* 4) El <thead> queda pegado dentro del wrapper (no respecto a la ventana) */
#admin-panel #user-list .users-table-wrap thead th{
  position: sticky !important;
  top: 0;                      /* tope del wrapper, no del viewport */
  z-index: 1;
  background: #f0f4f8;
  box-shadow: 0 1px 0 #e5e7eb;
}

/* 5) Quitamos 'sticky' del título y de la barra de búsqueda para
      que no interfieran: ellos quedan fijos en el flujo, sin gaps */
#admin-panel #user-list > h3,
#admin-panel #user-list .users-searchbar{
  position: static !important;
  height: auto;               /* por si definiste alturas fijas */
  padding: 8px 12px;
  margin: 0 0 6px 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* Fondo sólido en las celdas para evitar traslucidos al scrollear */
#admin-panel #user-list .users-table-wrap tbody td{
  background: #fff;
}
/* === USERS: 5 filas visibles, scroll sólo dentro de la tabla === */

/* 1) El contenedor general de la lista NO scrollea */
#user-list{
  max-height: none !important;
  overflow: visible !important;
}

/* 2) Título y barra de búsqueda sin sticky (evita micro huecos) */
#admin-panel #user-list > h3,
#admin-panel #user-list .users-searchbar{
  position: static !important;
  margin: 0 0 6px 0;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* 3) Viewport con scroll para la tabla */
#admin-panel #user-list .users-table-wrap{
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  overscroll-behavior: contain;   /* que no “arrastre” el scroll del body */
}

/* 4) Tabla estable dentro del viewport */
#admin-panel #user-list .users-table-wrap table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  table-layout: fixed;            /* columnas estables */
  word-break: break-word;
}

/* 5) <thead> pegado a la parte superior del viewport (no del viewport global) */
#admin-panel #user-list .users-table-wrap thead th{
  position: sticky !important;
  top: 0;
  z-index: 1;
  background: #f0f4f8;
  box-shadow: 0 1px 0 #e5e7eb;   /* línea inferior */
  padding: 10px 8px;
}

/* Fondo sólido en filas para que no “asome” el fondo del body */
#admin-panel #user-list .users-table-wrap tbody td{
  background: #fff;
}

/* === User Cart (ligero, sin romper tu UI) === */
.rc-cart-grid{
  display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .rc-cart-grid{ grid-template-columns:1fr; } }
.rc-cart-sec{ border:1px solid #1e293b; border-radius:12px; padding:10px; background:rgba(255,255,255,0.02); }
.rc-cart-sec h4{ margin:0 0 8px; display:flex; align-items:center; gap:8px; font-size:16px; }
.rc-tag{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:rgba(6,215,255,.12); border:1px solid rgba(6,215,255,.35); }
.rc-tag--muted{ background:rgba(136,146,166,.12); border-color:rgba(136,146,166,.35); }
.rc-list{ display:flex; flex-direction:column; gap:8px; }
.rc-empty{ opacity:.7; font-style:italic; }
.rc-item{ border:1px solid #1e293b; border-radius:10px; padding:8px; }
.rc-item__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rc-item__date{ }
.rc-badge{ font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid rgba(6,215,255,.35); background:rgba(6,215,255,.12); }
.rc-item__cancel{ margin-top:6px; font-size:12px; opacity:.8; }

/* === Carrito compacto en ESCRITORIO (una sola línea por reserva) === */
@media (min-width: 901px){
  #rcUserCart .rc-list{ gap:6px; }
  #rcUserCart .rc-item{
    padding:6px 10px;
    line-height:1.2;
  }
  #rcUserCart .rc-item__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:nowrap;          /* ⬅️ evita que baje a otra línea */
    margin:0;                  /* quita margen extra si lo hubiera */
  }
  #rcUserCart .rc-item__date,
  #rcUserCart .rc-badge,
  #rcUserCart .rc-item__cancel{
    white-space:nowrap;        /* ⬅️ mantiene fecha, hora y etiqueta en una línea */
  }
  #rcUserCart .rc-item__date strong{ margin-right:8px; }
  #rcUserCart .rc-item__cancel{ margin-top:0; } /* ⬅️ evita salto vertical en “Cancelada” */
}



/* ==== Carrito en ESCRITORIO: columnas más anchas y una sola línea por item ==== */
@media (min-width: 901px){
  /* 1) Las columnas se autoajustan: cada sección tendrá al menos 560px de ancho.
        Si no cabe en 3 columnas, pasa a 2 o 1 para evitar saltos de línea. */
  #rcUserCart .rc-cart-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); /* <-- ajusta 560 si lo quieres más/menos ancho */
    gap: 16px;
  }

  /* 2) Cada reserva en una sola línea, sin cortes */
  #rcUserCart .rc-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    white-space: nowrap;      /* no permitir saltos de línea */
    overflow: visible;        /* nada recortado */
  }
  #rcUserCart .rc-item__head{ display: contents; } /* usamos sus hijos dentro del flex */

  /* 3) Fecha+hora en línea; el chip y "Cancelada" a la derecha */
  #rcUserCart .rc-item__date{ white-space: nowrap; }
  #rcUserCart .rc-badge{ margin-left: auto; white-space: nowrap; }
  #rcUserCart .rc-item__cancel{ white-space: nowrap; }
}



/* ===== Sección "Canceladas" colapsable ===== */
#rcUserCart .rc-collapsible{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
}
#rcUserCart .rc-collapse-btn{
  appearance:none; border:0; background:transparent; color:#e5e7eb;
  font: inherit; font-weight:700; cursor:pointer; padding:0; position:relative;
  padding-right:18px; /* espacio para el chevron */
}
#rcUserCart .rc-collapse-btn::after{
  content:"▾"; /* chevron */
  position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(0deg);
  transition: transform .2s ease;
  opacity:.85;
}
#rcUserCart #rcSecCancelled:not(.is-collapsed) .rc-collapse-btn::after{
  transform:translateY(-50%) rotate(180deg);
}

/* Contenedor de la lista con transición suave */
#rcUserCart #rcListCancelled{
  transition: max-height .2s ease;
  overflow:hidden;
}

/* En estado colapsado, aseguramos que no ocupe espacio */
#rcUserCart #rcSecCancelled.is-collapsed #rcListCancelled{
  max-height:0;
}


/* ===== Secciones colapsables: Realizadas y Canceladas ===== */
#rcUserCart .rc-collapsible{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
}

#rcUserCart .rc-collapse-btn{
  appearance:none; border:0; background:transparent; color:#e5e7eb;
  font:inherit; font-weight:700; cursor:pointer; padding:0; position:relative;
  padding-right:18px; /* espacio para el chevron */
}
#rcUserCart .rc-collapse-btn::after{
  content:"▾";
  position:absolute; right:0; top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition: transform .2s ease;
  opacity:.85;
}

/* Chevron rotado cuando la sección está abierta */
#rcUserCart #rcSecPast:not(.is-collapsed) .rc-collapse-btn::after,
#rcUserCart #rcSecCancelled:not(.is-collapsed) .rc-collapse-btn::after{
  transform:translateY(-50%) rotate(180deg);
}

/* Contenedores con transición suave y ocultamiento real al colapsar */
#rcUserCart #rcListPast,
#rcUserCart #rcListCancelled{
  transition: max-height .2s ease;
  overflow:hidden;
}

#rcUserCart #rcSecPast.is-collapsed #rcListPast,
#rcUserCart #rcSecCancelled.is-collapsed #rcListCancelled{
  max-height:0;
}