/* ═══════════════════════════════════════════════════════════════════
   SALÓN PAMPA · La paleta, las tipografías y las reglas táctiles.
   ═══════════════════════════════════════════════════════════════════

   Una sola fuente de verdad para las siete páginas.

   POR QUÉ EXISTE ESTE ARCHIVO
   Antes cada página declaraba su propia paleta. Terminaron habiendo
   CUATRO paletas distintas conviviendo:

     · la portada y la escuela   negro #0b0a0a, dorado #e6c687
     · el campus y el panel      superficies #191816 en vez de #1d1c1a
     · gracias y cuenta-confirmada  negro AZULADO #0e0e11 y un dorado
       mostaza #c9a227, que es otro dorado, no el de la marca
     · el panel, además, en Cinzel y Plus Jakarta Sans en lugar de
       Bitter e Inter

   El cliente no ve "cuatro archivos". Ve que después de comprar lo
   mandan a una página que parece de otra empresa. Eso es lo que se
   arregla acá.

   CÓMO SE USA
   Va enlazado en el <head> ANTES del <style> de cada página, para que
   una página pueda pisar un valor si de verdad lo necesita. Ninguna
   debería necesitarlo: si estás por hacerlo, probablemente falte un
   token acá.

   REGLA: ningún color literal en el CSS de las páginas. Si aparece un
   #hex nuevo, o es un token que falta, o es un error.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fondos, de más hondo a más cerca ───────────────────────────
     Tres niveles, no dos: el fondo de la página, el de una zona y el
     de una tarjeta. Con dos niveles las tarjetas flotan sin apoyo. */
  --bg:        #0b0a0a;   /* la página */
  --bg-2:      #151413;   /* una franja o zona */
  --surf:      #1d1c1a;   /* una tarjeta */
  --surf-2:    #26241f;   /* una tarjeta encima de otra, o el hover */

  /* ── Bordes ─────────────────────────────────────────────────────
     --line es el borde en reposo; --line-2 el mismo borde cuando el
     mouse pasa por encima. La diferencia tiene que notarse sin gritar. */
  --line:      #33312d;
  --line-2:    #454239;

  /* ── Texto ──────────────────────────────────────────────────────
     Sobre --bg: --ink da 19.2:1, --ink-2 da 12.4:1 y --mut 7.4:1.
     Los tres pasan AA holgados. No agregar un cuarto gris más apagado:
     abajo de --mut ya se empieza a perder gente. */
  --ink:       #fefefe;
  --ink-2:     #c6c3bd;
  --mut:       #a29e94;

  /* ── El dorado de la marca ──────────────────────────────────────
     #e6c687 es un champagne cálido, no un oro amarillo. Da 11.9:1
     sobre el fondo, así que sirve para texto y no solo de adorno. */
  --gold:      #e6c687;
  --gold-sf:   rgba(230,198,135,.12);  /* relleno suave */
  --gold-glow: rgba(230,198,135,.15);  /* halo de foco */
  --gold-dim:  rgba(230,198,135,.6);   /* dorado apagado */
  --gold-lt:   #f0d59e;                /* el dorado aclarado, al pasar el mouse */
  --on-gold:   #1a1712;                /* texto ENCIMA del dorado */

  /* ── Acento neutro ──────────────────────────────────────────────
     El blanco que usan los botones principales de la portada. */
  --acc:       #fefefe;
  --acc-dk:    #d8d8d8;
  --acc-sf:    rgba(254,254,254,.09);
  --on-acc:    #0b0a0a;                /* texto ENCIMA del blanco */

  /* ── Estados ────────────────────────────────────────────────────
     Los alias existen porque el código viejo dice --succ, --success,
     --dang, --danger y --err para la misma idea. En vez de renombrar
     cientos de usos y arriesgar romper algo, apuntan todos al mismo
     color. Para código nuevo: --ok, --warn, --bad. */
  --ok:        #3fb950;
  --warn:      #e6a23c;
  --bad:       #e5484d;
  --ok-sf:     rgba(63,185,80,.12);
  --warn-sf:   rgba(230,162,60,.12);
  --bad-sf:    rgba(229,72,77,.12);

  --succ:      var(--ok);      --success:  var(--ok);
  --succ-bg:   var(--ok-sf);
  --dang:      var(--bad);     --danger:   var(--bad);   --err: var(--bad);
  --dang-bg:   var(--bad-sf);
  --warn-bg:   var(--warn-sf);
  --sf:        var(--surf);   /* gracias.html y cuenta-confirmada.html */

  /* ── Tipografía ─────────────────────────────────────────────────
     Bitter para títulos (serif con peso, aire de barbería vieja),
     Inter para todo lo demás (se lee bien chico y en pantalla mala).
     Georgia y el stack del sistema van de reserva por si Google
     Fonts tarda o está bloqueado: la página se lee igual. */
  --disp: "Bitter", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* ── Forma y movimiento ─────────────────────────────────────────── */
  --r:    8px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t:    .65s var(--ease);
}

/* ═══════════════════════════════════════════════════════════════════
   REGLAS COMPARTIDAS
   ═══════════════════════════════════════════════════════════════════ */

/* ── El dedo no es un mouse ─────────────────────────────────────────
   `pointer: coarse` es cierto en un teléfono o una tablet y falso en
   una notebook, incluso una con pantalla táctil que se está usando con
   el trackpad. Así que esto agranda los botones donde se tocan con el
   dedo y NO toca nada en escritorio, donde 32px con un mouse está
   perfecto y agrandarlos arruinaría el diseño.

   44px es el mínimo cómodo: es el ancho aproximado de la yema de un
   pulgar adulto. Debajo de eso la gente le erra y culpa al sitio. */
@media (pointer: coarse) {
  button, a.btn, .btn, .btn-sm, .btn-tbl, .btn-icon, .btn-primary,
  .btn-cancel, .chico, .ps-btn, .cart-qty-btn, .cart-close-btn,
  .btn-cart-header, .btn-campus-header, .btn-reservar-header,
  .dash-tab-btn, [role="button"] {
    min-height: 44px;
  }
  /* Los redondos crecen en los dos ejes o quedan ovalados. */
  .cart-qty-btn, .btn-icon, .cart-close-btn { min-width: 44px; }

  /* Enlaces sueltos dentro de texto corrido quedan como están: acá
     solo entran los de navegación, que son blancos de dedo. */
  nav a, .menu a, header a { min-height: 44px; display: inline-flex;
                             align-items: center; }
}

/* ── iOS y el zoom traicionero ──────────────────────────────────────
   Safari en iPhone hace zoom solo cuando enfocás un campo con letra
   menor a 16px. El zoom no se deshace al salir del campo: el usuario
   queda con la página corrida al costado, sin entender qué pasó, y
   muchos abandonan ahí mismo. 16px no es una preferencia estética,
   es el umbral exacto que evita el zoom. */
input, select, textarea { font-size: 16px; }

/* ── Foco visible ───────────────────────────────────────────────────
   `:focus-visible` se activa cuando navegás con el teclado, pero no
   cuando hacés clic con el mouse. Así el borde dorado aparece para
   quien lo necesita sin ensuciar el clic de todos los demás. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Respetar a quien pidió menos movimiento ────────────────────────
   Es una opción del sistema operativo. Quien la activó suele tener
   vértigo o migraña con las animaciones; no es un capricho. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Nada se sale de la pantalla ────────────────────────────────────
   Una sola imagen o tabla ancha empuja el <body> y aparece la barra
   horizontal en TODA la página, no solo en el elemento culpable. */
html, body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   EL CALENDARIO EN EL TELÉFONO
   ═══════════════════════════════════════════════════════════════════

   En 360px de ancho, una grilla de siete columnas deja casilleros de
   unos 37px. Entra el número del día y nada más: el título de la clase
   queda cortado en la tercera letra.

   Así que en pantallas angostas la grilla se esconde y aparece la misma
   información en lista, que es como se ve un calendario en cualquier
   teléfono. Las dos vistas salen del mismo pintado en calendario.js:
   no hay dos verdades que puedan desincronizarse.

   Vive acá y no en campus.html o admin.html porque el calendario es el
   mismo componente en las dos pantallas. Si el estilo estuviera
   duplicado, tarde o temprano una de las dos se quedaría atrás.
   ═══════════════════════════════════════════════════════════════════ */

.agenda { display: none; }

.ag-fila {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  text-align: left; color: var(--ink); font-family: var(--sans);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.ag-fila:hover, .ag-fila:focus-visible {
  border-color: var(--line-2); background: var(--surf-2);
}

/* El día, en un bloque fijo, para que todos los títulos arranquen
   alineados por más que el número tenga una o dos cifras. */
.ag-fecha {
  flex: none; width: 46px; text-align: center; line-height: 1.15;
  padding: 6px 0; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--line);
}
.ag-fecha b     { display: block; font-size: 19px; font-family: var(--disp); }
.ag-fecha small { display: block; font-size: 10px; text-transform: uppercase;
                  letter-spacing: .08em; color: var(--mut); margin-top: 1px; }
.ag-fecha.hoy   { border-color: var(--gold); background: var(--gold-sf); }
.ag-fecha.hoy b, .ag-fecha.hoy small { color: var(--gold); }

.ag-que        { min-width: 0; }
.ag-que b      { display: block; font-size: 14.5px; font-weight: 600; }
.ag-que small  { display: block; font-size: 12.5px; color: var(--mut); margin-top: 2px; }

.ag-vacio {
  color: var(--mut); font-size: 14px; text-align: center;
  padding: 26px 14px; border: 1px dashed var(--line);
  border-radius: 10px; line-height: 1.55;
}

@media (max-width: 640px) {
  .rejilla { display: none; }
  .agenda  { display: block; }

  /* Los cuatro botones de mes no entran en una línea de 360px. */
  .calmes { flex-wrap: wrap; }
  .calmes h3 { flex: 1 1 100%; order: -1; margin-bottom: 8px; }
}
