/* ============================================================================
   CRM Pádel multi-club · css/styles.css
   Sistema de diseño único y reutilizable para TODOS los módulos.

   Mobile-first REAL (celular en la cancha). Paleta verde/lima, alto contraste.
   Nada de texto claro sobre lima. Targets táctiles >= 44px. Inputs 16px (iOS).

   ORDEN DEL ARCHIVO
     1. Variables (tokens)        6. Componentes de formulario
     2. Reset y base              7. Componentes de datos/UI
     3. Utilidades                8. Modal / bottom-sheet
     4. Layout con sesión         9. Calendario (Reservas)
     5. Pantallas de auth        10. Responsive (>=768px)
   ========================================================================== */

/* ============================================================================
   1) VARIABLES (TOKENS)
   ========================================================================== */
:root {
    /* Paleta verde/lima -------------------------------------------------- */
    --verde-900: #14320a;
    --verde-800: #24500f;
    --verde-700: #3d6b12;
    --verde-600: #4d7c0f;   /* marca / theme-color */
    --verde-500: #65a30d;
    --lima-600:  #4d7c0f;
    --lima-500:  #84cc16;
    --lima-400:  #a3e635;
    --lima-300:  #bef264;
    --lima-100:  #ecfccb;
    --lima-50:   #f7fee7;

    /* Neutros ----------------------------------------------------------- */
    --gris-900: #111827;
    --gris-800: #1f2937;
    --gris-700: #374151;
    --gris-600: #4b5563;
    --gris-500: #6b7280;
    --gris-400: #9ca3af;
    --gris-300: #d1d5db;
    --gris-200: #e5e7eb;
    --gris-100: #f3f4f6;
    --gris-50:  #f9fafb;
    --blanco:   #ffffff;

    /* Semánticos -------------------------------------------------------- */
    --ok:          #15803d;
    --ok-suave:    #dcfce7;
    --error:       #b91c1c;
    --error-suave: #fee2e2;
    --info:        #1d4ed8;
    --info-suave:  #dbeafe;
    --alerta:      #b45309;
    --alerta-suave:#fef3c7;

    /* Roles de superficie / texto -------------------------------------- */
    --fondo:        var(--gris-100);
    --superficie:   var(--blanco);
    --superficie-2: var(--gris-50);
    --borde:        var(--gris-200);
    --borde-fuerte: var(--gris-300);
    --texto:        var(--gris-900);
    --texto-suave:  var(--gris-600);
    --texto-tenue:  var(--gris-500);
    --acento:       var(--verde-600);
    --acento-texto: var(--blanco);      /* texto sobre botón verde */
    --foco:         var(--lima-500);

    /* Tipografía -------------------------------------------------------- */
    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, "Noto Sans", sans-serif;

    /* Espaciado (escala) ------------------------------------------------ */
    --e1: 0.25rem;  --e2: 0.5rem;  --e3: 0.75rem;  --e4: 1rem;
    --e5: 1.5rem;   --e6: 2rem;    --e7: 3rem;

    /* Radios / sombras -------------------------------------------------- */
    --r-sm: 6px;  --r: 10px;  --r-lg: 16px;  --r-full: 999px;
    --sombra-1: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
    --sombra-2: 0 4px 12px rgba(17, 24, 39, .10);
    --sombra-3: 0 12px 32px rgba(17, 24, 39, .18);

    /* Medidas de layout ------------------------------------------------- */
    --alto-barra:   56px;
    --ancho-lateral: 224px;
    --alto-navinf:  62px;
    --tap:          44px;   /* target táctil mínimo */

    /* Capas (z-index) --------------------------------------------------- */
    --z-barra:   40;
    --z-lateral: 30;
    --z-navinf:  40;
    --z-modal:   60;
}

/* ============================================================================
   2) RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }

body {
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    overflow-x: clip;          /* ningún elemento hace scrollear la página en horizontal */
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--texto); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

a { color: var(--verde-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

input, select, textarea, button { font-family: inherit; }

/* Números tabulares alineados (montos, stock, cantidades). */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Foco visible y consistente (accesibilidad de teclado). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ============================================================================
   3) UTILIDADES
   ========================================================================== */
.oculto { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.solo-movil       { display: revert; }
.solo-escritorio  { display: none; }

.txt-suave  { color: var(--texto-suave); }
.txt-tenue  { color: var(--texto-tenue); }
.txt-centro { text-align: center; }
.txt-derecha{ text-align: right; }
.txt-mono   { font-variant-numeric: tabular-nums; }
.negrita    { font-weight: 700; }

.mt-2 { margin-top: var(--e2); } .mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); } .mt-5 { margin-top: var(--e5); }
.mb-2 { margin-bottom: var(--e2); } .mb-3 { margin-bottom: var(--e3); }
.mb-4 { margin-bottom: var(--e4); }

.fila       { display: flex; gap: var(--e3); align-items: center; }
.fila-wrap  { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.entre      { justify-content: space-between; }
.col        { display: flex; flex-direction: column; gap: var(--e3); }
.crece      { flex: 1 1 auto; min-width: 0; }

/* ============================================================================
   4) LAYOUT CON SESIÓN (header, sidebar, main, bottom-nav)
   ========================================================================== */

/* Marca del club (reutilizada en barra y auth). */
.marca { display: inline-flex; align-items: baseline; gap: 4px; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca__num { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--verde-600); }
.marca__txt { font-weight: 700; font-size: .8rem; letter-spacing: .18em; color: var(--gris-700); }
/* Logo subido por el club: reemplaza a la marca de texto. Se limita por alto
   para que cualquier proporción entre bien en la barra. */
.marca__logo { display: block; height: 34px; width: auto; max-width: 190px; object-fit: contain; }

/* Barra superior fija. */
.barra-top {
    position: sticky; top: 0; z-index: var(--z-barra);
    display: flex; align-items: center; justify-content: space-between;
    height: var(--alto-barra);
    padding: 0 var(--e4);
    padding-top: env(safe-area-inset-top);
    height: calc(var(--alto-barra) + env(safe-area-inset-top));
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}
.barra-top__usuario { display: flex; align-items: center; gap: var(--e3); }
.usuario-nombre { font-size: .9rem; color: var(--texto-suave); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar (oculto en móvil, visible en escritorio). */
.lateral { display: none; }
.lateral__nav { display: flex; flex-direction: column; gap: 2px; padding: var(--e3); }

.nav-link {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e3);
    min-height: var(--tap);
    border-radius: var(--r);
    color: var(--gris-700); font-weight: 600; font-size: .95rem;
    text-decoration: none;
}
.nav-link:hover { background: var(--gris-100); text-decoration: none; }
.nav-link--activo { background: var(--verde-600); color: var(--blanco); }
.nav-link--activo:hover { background: var(--verde-700); }
.nav-link__icono { display: inline-flex; }
.nav-link__icono svg { width: 22px; height: 22px; }
/* Contador de pendientes (Solicitudes). Sobre el ítem activo hereda el color
   del texto para no perder contraste contra el fondo verde. */
.nav-link__contador {
    margin-left: auto; min-width: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; border-radius: var(--r-full);
    background: var(--error); color: var(--blanco);
    font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.nav-link--activo .nav-link__contador { background: var(--blanco); color: var(--verde-700); }

/* Contenido principal. */
.contenido {
    padding: var(--e4);
    padding-bottom: calc(var(--alto-navinf) + env(safe-area-inset-bottom) + var(--e4));
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* Barra de navegación inferior (móvil). */
.nav-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-navinf);
    display: flex; overflow-x: auto;
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-inferior::-webkit-scrollbar { display: none; }
.nav-inf-link {
    flex: 1 1 0; min-width: 0;               /* los 7 ítems se reparten y encogen: caben sin corte */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: var(--e2) 2px;
    min-height: var(--alto-navinf);          /* >=44px: target táctil cómodo */
    color: var(--gris-500); font-size: .56rem; font-weight: 600;
    text-decoration: none; text-align: center;
}
.nav-inf-link__txt { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-inf-link:hover { text-decoration: none; }
.nav-inf-link__icono svg { width: 22px; height: 22px; }
.nav-inf-link--activo { color: var(--verde-600); }
.nav-inf-link--activo .nav-inf-link__icono { color: var(--verde-600); }

/* Cabecera de página reutilizable (título + acciones). */
.pagina-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4);
}
.pagina-cabecera__titulo { display: flex; flex-direction: column; gap: 2px; }
.pagina-cabecera__acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Barra de filtros / herramientas. */
.barra-filtros {
    display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center;
    margin-bottom: var(--e4);
}

/* ============================================================================
   5) PANTALLAS DE AUTH (login / setup) — layout propio centrado
   ========================================================================== */
.pantalla-auth {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    padding: var(--e4);
    background:
        radial-gradient(1200px 400px at 50% -10%, var(--lima-100), transparent),
        var(--fondo);
}
.auth-caja { width: 100%; max-width: 400px; }
.auth-card {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-2);
    padding: var(--e6) var(--e5);
}
.auth-marca { display: flex; align-items: baseline; gap: 6px; justify-content: center; margin-bottom: var(--e4); }
.auth-marca .marca__num { font-size: 1.8rem; }
.auth-marca .marca__txt { font-size: .95rem; }
.auth-marca .marca__logo { height: 56px; max-width: 240px; margin: 0 auto; }
.auth-titulo { text-align: center; margin-bottom: var(--e4); }
.auth-pie { text-align: center; margin-top: var(--e4); color: var(--texto-suave); font-size: .9rem; }
.setup-texto { color: var(--texto-suave); margin-bottom: var(--e4); text-align: center; }

.form-vertical { display: flex; flex-direction: column; gap: var(--e4); }

/* ============================================================================
   6) COMPONENTES DE FORMULARIO
   ========================================================================== */

/* --- Botón -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    min-height: var(--tap); padding: 0 var(--e4);
    border-radius: var(--r); border: 1px solid transparent;
    font-size: .95rem; font-weight: 700; line-height: 1; text-align: center;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
    -webkit-user-select: none; user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

.btn--primario   { background: var(--verde-600); color: var(--blanco); border-color: var(--verde-600); }
.btn--primario:hover { background: var(--verde-700); border-color: var(--verde-700); }

.btn--secundario { background: var(--superficie); color: var(--verde-700); border-color: var(--borde-fuerte); }
.btn--secundario:hover { background: var(--gris-100); }

.btn--peligro    { background: var(--error); color: var(--blanco); border-color: var(--error); }
.btn--peligro:hover { background: #991b1b; border-color: #991b1b; }

.btn--fantasma   { background: transparent; color: var(--gris-700); border-color: transparent; }
.btn--fantasma:hover { background: var(--gris-100); }

.btn--sm     { min-height: 36px; padding: 0 var(--e3); font-size: .85rem; }
.btn--lg     { min-height: 52px; padding: 0 var(--e5); font-size: 1.05rem; }
.btn--bloque { display: flex; width: 100%; }
.btn--icono  { padding: 0; width: var(--tap); height: var(--tap); }

/* --- Campo (label + input) --------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo__label { font-size: .85rem; font-weight: 700; color: var(--gris-700); }
.campo__ayuda { font-size: .8rem; color: var(--texto-tenue); }
.campo__error { font-size: .8rem; color: var(--error); font-weight: 600; }

.campo__input,
.select,
textarea.campo__input {
    width: 100%;
    min-height: var(--tap);
    padding: var(--e3);
    font-size: 16px;              /* clave anti-zoom iOS */
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r);
    -webkit-appearance: none; appearance: none;
}
textarea.campo__input { min-height: 88px; resize: vertical; line-height: 1.5; }
.campo__input::placeholder { color: var(--gris-400); }
.campo__input:focus, .select:focus {
    border-color: var(--verde-600);
    outline: 3px solid var(--lima-300);
    outline-offset: 0;
}
.campo__input:disabled, .select:disabled { background: var(--gris-100); color: var(--texto-tenue); }
.campo--error .campo__input, .campo--error .select { border-color: var(--error); }

/* --- Select con flecha propia ------------------------------------------ */
.select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--e3) center;
    background-size: 20px;
}

/* --- Checkbox táctil ---------------------------------------------------- */
.check {
    display: inline-flex; align-items: center; gap: var(--e3);
    min-height: var(--tap); padding: var(--e2) 0; cursor: pointer;
    font-size: .95rem; color: var(--texto);
}
.check input[type="checkbox"],
.check input[type="radio"] {
    width: 24px; height: 24px; flex: 0 0 auto;
    accent-color: var(--verde-600); cursor: pointer;
}
.check__txt { line-height: 1.3; }

/* --- Chip seleccionable (multi-select táctil) --------------------------- *
   Estructura: <label class="chip"><input type="checkbox|radio" ...><span>…</span></label>
   Estado activo: automático con :checked; o forzado con .chip--activo.       */
.chip {
    display: inline-flex; align-items: center; gap: var(--e2);
    min-height: var(--tap); padding: var(--e2) var(--e4);
    border: 1px solid var(--borde-fuerte); border-radius: var(--r-full);
    background: var(--superficie); color: var(--gris-700);
    font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    -webkit-user-select: none; user-select: none;
}
.chip:hover { background: var(--gris-100); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(input:checked),
.chip--activo {
    background: var(--lima-400); border-color: var(--verde-600); color: var(--verde-900);
}
.chip:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ============================================================================
   7) COMPONENTES DE DATOS / UI
   ========================================================================== */

/* --- Card --------------------------------------------------------------- */
.card {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-1);
    padding: var(--e4);
}
.card + .card { margin-top: var(--e3); }
.card__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.card__titulo { font-size: 1.05rem; font-weight: 700; }
.card__cuerpo { color: var(--texto); }
.card__pie { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--borde); display: flex; gap: var(--e2); flex-wrap: wrap; }

/* --- Badge -------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px var(--e2); border-radius: var(--r-full);
    font-size: .75rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
    background: var(--gris-200); color: var(--gris-800);
}
.badge--verde  { background: var(--lima-100); color: var(--verde-800); }
.badge--lima   { background: var(--lima-400); color: var(--verde-900); }
.badge--gris   { background: var(--gris-200); color: var(--gris-700); }
.badge--rojo,
.badge--error  { background: var(--error-suave); color: var(--error); }
.badge--amarillo,
.badge--alerta { background: var(--alerta-suave); color: var(--alerta); }
.badge--azul,
.badge--info   { background: var(--info-suave); color: var(--info); }
.badge--ok     { background: var(--ok-suave); color: var(--ok); }

/* --- Tabla responsive --------------------------------------------------- *
   Patrón recomendado: en escritorio, envolver la <table class="tabla"> en un
   <div class="tabla-scroll solo-escritorio">; en móvil, renderizar la lista
   equivalente con <div class="cards-movil"> (se oculta sola en escritorio).  */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.tabla {
    width: 100%; border-collapse: collapse; background: var(--superficie);
    font-size: .92rem;
}
.tabla thead th {
    text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--texto-suave);
    padding: var(--e3); background: var(--superficie-2);
    border-bottom: 2px solid var(--borde); white-space: nowrap;
}
.tabla tbody td { padding: var(--e3); border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--gris-50); }
.tabla .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .col-acciones { text-align: right; white-space: nowrap; }

/* Lista de tarjetas para móvil (equivalente a la tabla). */
.cards-movil { display: flex; flex-direction: column; gap: var(--e3); }
.card-item { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-1); padding: var(--e4); }
.card-item__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.card-item__titulo { font-weight: 700; font-size: 1rem; }
.card-item__dato { display: flex; justify-content: space-between; gap: var(--e3); font-size: .9rem; padding: 2px 0; }
.card-item__dato dt { color: var(--texto-tenue); }
.card-item__dato dd { font-variant-numeric: tabular-nums; text-align: right; }

/* --- KPI (tarjeta de métrica) ------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.kpi {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--r-lg); box-shadow: var(--sombra-1);
    padding: var(--e4); display: flex; flex-direction: column; gap: 2px;
}
.kpi__label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--texto-tenue); }
.kpi__valor { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto); }
.kpi__detalle { font-size: .82rem; color: var(--texto-suave); }
.kpi--verde  { border-left: 4px solid var(--verde-600); }
.kpi--lima   { border-left: 4px solid var(--lima-500); }
.kpi--ok     { border-left: 4px solid var(--ok); }
.kpi--error  { border-left: 4px solid var(--error); }
.kpi--alerta { border-left: 4px solid var(--alerta); }
.kpi--info   { border-left: 4px solid var(--info); }

/* --- Barra de progreso -------------------------------------------------- *
   El relleno toma su ancho de la variable --pct (o de un width inline).      */
.barra-progreso {
    position: relative; width: 100%; height: 10px;
    background: var(--gris-200); border-radius: var(--r-full); overflow: hidden;
}
.barra-progreso__relleno {
    height: 100%; width: var(--pct, 0%);
    background: var(--verde-600); border-radius: var(--r-full);
    transition: width .3s ease;
}
.barra-progreso--ok     .barra-progreso__relleno { background: var(--ok); }
.barra-progreso--alerta .barra-progreso__relleno { background: var(--alerta); }
.barra-progreso--error  .barra-progreso__relleno { background: var(--error); }

/* --- Estado vacío ------------------------------------------------------- */
.estado-vacio {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--e3); padding: var(--e7) var(--e4); color: var(--texto-suave);
}
.estado-vacio__icono { color: var(--gris-400); }
.estado-vacio__icono svg { width: 48px; height: 48px; }
.estado-vacio__titulo { color: var(--texto); }
.estado-vacio__texto { max-width: 32ch; }

/* --- Flash (éxito / error / info) -------------------------------------- */
.flash-zona { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.flash {
    padding: var(--e3) var(--e4); border-radius: var(--r);
    border: 1px solid transparent; font-weight: 600; font-size: .92rem;
}
.flash--ok    { background: var(--ok-suave);    color: var(--ok);    border-color: #bbf7d0; }
.flash--error { background: var(--error-suave); color: var(--error); border-color: #fecaca; }
.flash--info  { background: var(--info-suave);  color: var(--info);  border-color: #bfdbfe; }

/* ============================================================================
   8) MODAL / BOTTOM-SHEET
   Estructura:
     <div class="modal" id="mi-modal" aria-hidden="true">
       <div class="modal__caja" role="dialog" aria-modal="true">
         <div class="modal__cabecera">
           <h2 class="modal__titulo">…</h2>
           <button class="modal__cerrar" data-cerrar-modal aria-label="Cerrar">…</button>
         </div>
         <div class="modal__cuerpo">…</div>
         <div class="modal__pie">…</div>
       </div>
     </div>
   Se abre con abrirModal('mi-modal') / se cierra con cerrarModal().
   En móvil el panel entra como bottom-sheet; en escritorio, centrado.
   ========================================================================== */
.modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none; align-items: flex-end; justify-content: center;
    background: rgba(17, 24, 39, .5);
    padding: 0;
}
.modal.is-abierto { display: flex; }
.modal__caja {
    width: 100%; max-height: 92vh; overflow-y: auto;
    background: var(--superficie);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--sombra-3);
    padding: var(--e5) var(--e4);
    padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom));
    animation: subir-hoja .22s ease;
}
@keyframes subir-hoja { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.modal__titulo { font-size: 1.2rem; }
.modal__cerrar {
    width: var(--tap); height: var(--tap); flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r); color: var(--gris-600);
}
.modal__cerrar:hover { background: var(--gris-100); }
.modal__cuerpo { display: flex; flex-direction: column; gap: var(--e4); }
.modal__pie { display: flex; gap: var(--e2); margin-top: var(--e5); }
.modal__pie .btn { flex: 1 1 auto; }

/* Bloqueo del scroll de fondo cuando hay un modal abierto. */
body.modal-abierto { overflow: hidden; }

/* ============================================================================
   9) CALENDARIO (módulo Reservas)
   Estructura sugerida (grid único):
     <div class="calendario">
       <div class="calendario__grid" style="--canchas:3">
         <div class="cal-esquina"></div>
         <div class="cal-cabecera">Cancha 1</div> … (una por cancha)
         <div class="cal-hora">18:00</div>
         <div class="slot" data-cancha="1" data-hora="18:00"></div> … (una por cancha)
         …
         <!-- eventos colocados por posición explícita: -->
         <div class="evento evento--partido" style="grid-column:2; grid-row:3 / span 2">…</div>
       </div>
     </div>
   Las celdas .slot se colocan solas; los .evento se ubican con grid-column /
   grid-row inline y quedan por encima de los slots.
   ========================================================================== */
.calendario { max-height: 75vh; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie); }
.calendario__grid {
    display: grid;
    grid-template-columns: var(--cal-ancho-hora, 52px) repeat(var(--canchas, 3), minmax(0, 1fr));
    grid-auto-rows: var(--cal-alto-slot, 56px);
    position: relative;
}
.cal-esquina { position: sticky; left: 0; z-index: 2; background: var(--superficie-2); border-bottom: 2px solid var(--borde); border-right: 1px solid var(--borde); }
.cal-cabecera {
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: var(--texto-suave);
    background: var(--superficie-2); border-bottom: 2px solid var(--borde); border-right: 1px solid var(--borde);
    position: sticky; top: 0; z-index: 4;   /* sobre eventos (z-3) y esquina (z-2): no se transparenta al hacer scroll */
}
.cal-hora {
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 2px var(--e2); font-size: .72rem; color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
    background: var(--superficie-2); border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
    position: sticky; left: 0; z-index: 1;
}
.slot { border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--superficie); }
.slot:hover { background: var(--lima-50); cursor: pointer; }
.slot--bloqueado { background: repeating-linear-gradient(45deg, var(--gris-100), var(--gris-100) 6px, var(--gris-50) 6px, var(--gris-50) 12px); cursor: not-allowed; }

/* Bloques de evento (reservas) — colores por tipo, alto contraste. */
.evento {
    margin: 2px; padding: var(--e2); border-radius: var(--r-sm);
    font-size: .74rem; font-weight: 600; line-height: 1.2; overflow: hidden;
    z-index: 3; cursor: pointer; color: var(--verde-900);
    background: var(--lima-300); border-left: 3px solid var(--verde-600);
    display: flex; flex-direction: column; gap: 2px;
}
.evento__titulo { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento__meta { font-size: .68rem; opacity: .85; }
.evento--partido         { background: #d9f99d; border-left-color: var(--verde-600); }
.evento--clase-individual{ background: #bae6fd; border-left-color: #0369a1; color: #0c4a6e; }
.evento--clase-grupal    { background: #a5f3fc; border-left-color: #0e7490; color: #164e63; }
.evento--americano       { background: #fde68a; border-left-color: #b45309; color: #78350f; }
.evento--torneo          { background: #ddd6fe; border-left-color: #6d28d9; color: #4c1d95; }
.evento--evento          { background: #fbcfe8; border-left-color: #be185d; color: #831843; }
.evento--cancelada       { opacity: .5; text-decoration: line-through; }

/* El calendario se ajusta al ancho de pantalla (sin scroll horizontal).
   En móvil se compacta la columna de horas y las tipografías. */
@media (max-width: 640px) {
    .calendario__grid { --cal-ancho-hora: 40px; }
    .cal-cabecera { font-size: .66rem; padding: 0 2px; text-align: center; }
    .cal-hora { font-size: .6rem; padding: 2px 3px; }
    .evento { font-size: .64rem; padding: 3px; margin: 1px; }
    .evento__meta { display: none; }
}

/* ============================================================================
   10) RESPONSIVE — ESCRITORIO (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
    .solo-movil      { display: none !important; }
    .solo-escritorio { display: revert; }

    /* Sidebar visible; oculta la barra inferior. */
    .lateral {
        display: block; position: fixed; z-index: var(--z-lateral);
        top: calc(var(--alto-barra) + env(safe-area-inset-top));
        left: 0; bottom: 0; width: var(--ancho-lateral);
        background: var(--superficie); border-right: 1px solid var(--borde);
        overflow-y: auto;
    }
    .nav-inferior { display: none; }

    .contenido {
        margin-left: var(--ancho-lateral);
        width: auto;          /* con margin-left, width:100% desbordaría el ancho del sidebar */
        max-width: none;
        padding: var(--e5) var(--e6);
        padding-bottom: var(--e6);
    }
    .usuario-nombre { max-width: none; }

    /* En escritorio los modales se muestran centrados (no bottom-sheet). */
    .modal { align-items: center; padding: var(--e5); }
    .modal__caja {
        max-width: 560px; border-radius: var(--r-lg);
        padding: var(--e5); padding-bottom: var(--e5);
        animation: aparecer .18s ease;
    }
    @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .modal__pie { justify-content: flex-end; }
    .modal__pie .btn { flex: 0 0 auto; }

    h1 { font-size: 1.75rem; }
}

@media (min-width: 1024px) {
    .contenido { padding-left: var(--e7); padding-right: var(--e7); }
}

/* Respeta la preferencia de menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}