/* ==========================================================================
   OleTickets — la base
   ==========================================================================
   Esta hoja va la PRIMERA en todas las páginas. Define la tipografía, los
   colores, las medidas y los cuatro o cinco trozos de interfaz que salen en
   todos los sitios (botones, campos, etiquetas, avisos). Las hojas de cada
   página solo montan lo suyo encima.

   La idea de todo el diseño cabe en una frase: EL CARTEL ES EL COLOR. Los
   carteles de una corrida o de una noche de copla ya vienen cargados de rojo,
   oro y negro. Si la web les pone alrededor marcos dorados, sombras de color
   y botones con degradado, compiten con ellos y gana el ruido. Así que todo
   lo que rodea al cartel va callado: hueso, negro y una sola tinta de acción.

   Las dos tintas de la marca reparten trabajo y no se pisan:
     · NARANJA (--accion) = lo que se pulsa y lo que cuesta dinero.
     · AZUL    (--marca)  = la marca. El logo, y poco más.
   Si en alguna página aparece un botón azul o un precio azul, está mal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La tipografía

   Archivo, servida desde nuestro propio servidor y no desde Google: así no
   dependemos de que un tercero esté en pie para que la web se lea, y no se
   manda la IP de cada visitante a otra empresa sin haberlo preguntado.

   Es un fichero variable con DOS ejes, peso y anchura, y por eso viene una
   sola familia en vez de dos. La anchura es la que da el aire de cartel
   impreso en los titulares (font-stretch: 118%) mientras el texto corrido se
   queda en la anchura normal, que es la que se lee sin cansar.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(/assets/fuentes/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* La catalana "ŀl" de Mallorca y algún apellido suelto viven aquí. Es un
   segundo fichero a propósito: el navegador solo lo baja si la página tiene
   alguna de esas letras. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(/assets/fuentes/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Los colores
   --------------------------------------------------------------------------
   Hueso de fondo y negro cálido de tinta. No blanco puro ni negro puro: los
   dos extremos aplanan la página y, sobre todo, hacen que un cartel viejo
   escaneado parezca sucio al lado.

   El naranja de la marca es #e1462a. Sobre hueso, ese naranja da 3,4:1 con
   texto pequeño, por debajo del 4,5:1 que pide la norma. Por eso hay dos:
   --accion para texto y bordes finos, y --accion-viva para manchas grandes
   (fondos de botón, barras), donde el ojo no tiene que descifrar letras.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Fondos */
  --papel: #f7f4ef;        /* el fondo de la página */
  --papel-2: #efeae1;      /* franjas alternas, filas al pasar por encima */
  --carta: #fffdfa;        /* tarjetas y paneles */

  /* Tinta */
  --tinta: #1a1714;        /* títulos y texto principal */
  --tinta-2: #56504a;      /* texto secundario; 7,4:1 sobre --papel */
  --tinta-3: #7c746b;      /* apoyos y datos menores; 4,6:1 sobre --papel */

  /* Líneas */
  --linea: #e4ded4;        /* separadores y bordes de tarjeta */
  --linea-2: #cdc4b7;      /* bordes de campos y botones secundarios */

  /* Acción (naranja de la marca) */
  --accion: #c33b1f;       /* texto, precios, iconos; 5,1:1 sobre --papel */
  --accion-viva: #e1462a;  /* fondos de botón y manchas grandes */
  --accion-suave: rgba(225, 70, 42, .10);

  /* Marca (azul). NO se usa para acciones. */
  --marca: #17559c;

  /* Estados */
  --bien: #17683c;
  --mal: #b3261e;
  --mal-suave: rgba(179, 38, 30, .09);

  /* Curvas. Una sola escala y una sola regla:
     lo que se pulsa y los campos van a --r; las tarjetas y paneles a --r-caja;
     el redondeo completo se reserva a etiquetas y filtros, que son píldoras. */
  --r: .5rem;
  --r-caja: .75rem;
  --r-pildora: 999px;

  /* Sombras teñidas del color del papel, nunca negro puro: una sombra gris
     sobre un fondo cálido se ve sucia. */
  --sombra: 0 1px 2px rgba(48, 38, 28, .05), 0 .5rem 1.5rem -.75rem rgba(48, 38, 28, .18);
  --sombra-alta: 0 1px 2px rgba(48, 38, 28, .06), 0 1.25rem 2.5rem -1rem rgba(48, 38, 28, .28);

  /* Medidas */
  --ancho: 76rem;          /* el ancho máximo del contenido */
  --aire: clamp(1rem, 3vw, 2rem);   /* el margen lateral, igual en todas las páginas */

  --curva: cubic-bezier(.16, 1, .3, 1);
}

/* El modo oscuro no es la versión clara con los colores dados la vuelta: el
   papel se vuelve un marrón muy oscuro (no gris) para que los carteles, que
   son cálidos, no floten sobre un fondo azulado que no pega con ellos. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #16130f;
    --papel-2: #1e1a16;
    --carta: #221e19;

    --tinta: #f4f0e9;
    --tinta-2: #b4aca1;
    --tinta-3: #8b8278;

    --linea: #302a23;
    --linea-2: #453d34;

    --accion: #ff8163;       /* aclarado: el naranja de marca sobre oscuro no llega a AA */
    --accion-viva: #e1462a;
    --accion-suave: rgba(255, 129, 99, .12);

    --marca: #7fb2f0;

    --bien: #58c98a;
    --mal: #ff8a80;
    --mal-suave: rgba(255, 138, 128, .12);

    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 .5rem 1.5rem -.75rem rgba(0, 0, 0, .6);
    --sombra-alta: 0 1px 2px rgba(0, 0, 0, .5), 0 1.25rem 2.5rem -1rem rgba(0, 0, 0, .7);
  }
}

/* --------------------------------------------------------------------------
   Reinicio
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* --------------------------------------------------------------------------
   Titulares
   --------------------------------------------------------------------------
   Anchura expandida y letras un poco apretadas entre sí. Es lo que separa un
   título de un cartel de un título de un procesador de textos.

   El interlineado NO baja de 1.05 aunque se vea más compacto: por debajo, la
   "j" y la "g" de un título en dos líneas se cortan contra la línea siguiente.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-stretch: 118%;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); letter-spacing: -.03em; line-height: 1.05; }
h2 { font-size: clamp(1.375rem, 1.05rem + 1.3vw, 1.875rem); }
h3 { font-size: 1.125rem; letter-spacing: -.01em; }

p { margin: 0; }

/* La medida del texto corrido. Pasadas las 68 letras por línea el ojo pierde
   el renglón al volver a la izquierda. */
.parrafo { max-width: 62ch; color: var(--tinta-2); }

a { color: var(--accion); }

/* --------------------------------------------------------------------------
   El foco del teclado
   --------------------------------------------------------------------------
   Se ve SIEMPRE y es el mismo en toda la web. Quien compra con el teclado o
   con un lector de pantalla necesita saber dónde está; quien usa el ratón no
   lo ve nunca porque es :focus-visible y no :focus.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--accion-suave); color: var(--tinta); }

/* --------------------------------------------------------------------------
   Envoltorios
   -------------------------------------------------------------------------- */

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--aire);
}

/* --------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------
   Tres y no más: el de comprar (naranja macizo), el de al lado (contorno) y
   el que parece un enlace. Si una página necesita un cuarto, casi siempre es
   que esa página tiene un problema de jerarquía, no de botones.

   Al pulsar bajan 1px. Es un detalle mínimo pero es lo que hace que el botón
   se sienta como una tecla y no como una imagen pegada.
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--accion-viva);
  color: #fff;                      /* 4,8:1 sobre el naranja vivo */
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;              /* el texto de un botón nunca parte en dos líneas */
  cursor: pointer;
  transition: background .15s var(--curva), transform .1s var(--curva);
}
.boton:hover { background: #cc3d23; }
.boton:active { transform: translateY(1px); }

.boton.secundario {
  background: transparent;
  border-color: var(--linea-2);
  color: var(--tinta);
}
.boton.secundario:hover { background: var(--papel-2); border-color: var(--tinta-3); }

.boton.grande { padding: .9rem 1.75rem; font-size: 1.05rem; }

.boton[disabled], .boton[aria-disabled="true"] {
  background: var(--linea);
  border-color: transparent;
  color: var(--tinta-3);
  cursor: not-allowed;
  transform: none;
}

.boton-enlace {
  padding: 0;
  border: none;
  background: none;
  color: var(--accion);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Campos
   --------------------------------------------------------------------------
   La etiqueta va SIEMPRE encima y escrita, nunca dentro del campo: un texto
   de ejemplo dentro desaparece en cuanto escribes y entonces ya no hay forma
   de saber qué se pedía en esa casilla.
   -------------------------------------------------------------------------- */

.campo { display: grid; gap: .35rem; }

.campo > span, .etiqueta-campo {
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.campo input, .campo select, .campo textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--linea-2);
  border-radius: var(--r);
  background: var(--carta);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;         /* 16px: por debajo, el iPhone hace zoom al tocar */
  line-height: 1.4;
}
select { cursor: pointer; }

::placeholder { color: var(--tinta-3); opacity: 1; }   /* 4,6:1, legible de verdad */

.campo .ayuda-campo { font-size: .8rem; color: var(--tinta-3); }
.campo .error-campo { font-size: .82rem; font-weight: 600; color: var(--mal); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea {
  border-color: var(--mal);
  background: var(--mal-suave);
}

/* --------------------------------------------------------------------------
   Etiquetas y píldoras
   -------------------------------------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: var(--r-pildora);
  background: var(--papel-2);
  color: var(--tinta-2);
  font-size: .75rem;       /* 12px: por debajo un texto funcional deja de leerse */
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.etiqueta.fuerte { background: var(--tinta); color: var(--papel); }
.etiqueta.accion { background: var(--accion-suave); color: var(--accion); }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.nota {
  padding: .9rem 1.1rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-3);
  border-radius: var(--r);
  background: var(--carta);
  color: var(--tinta-2);
  font-size: .9rem;
}
.nota b { color: var(--tinta); font-weight: 600; }
.nota.atencion { border-left-color: var(--accion-viva); }
.nota.mal { border-left-color: var(--mal); background: var(--mal-suave); }

/* --------------------------------------------------------------------------
   Los tres estados que casi siempre se olvidan
   --------------------------------------------------------------------------
   Cargando, vacío y roto. Una web que solo está dibujada para cuando todo va
   bien enseña una página en blanco justo el día que algo falla, que es el día
   en el que el usuario más necesita que le expliquen qué pasa.
   -------------------------------------------------------------------------- */

/* Cargando: se dibuja el hueco que van a ocupar las cosas, no una ruedecita.
   Así la página no pega un salto cuando llegan los datos. */
.hueso {
  background: linear-gradient(90deg, var(--papel-2) 25%, var(--linea) 37%, var(--papel-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--r);
  animation: hueso-brilla 1.4s ease-in-out infinite;
}
@keyframes hueso-brilla {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.sin-nada {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  text-align: center;
  color: var(--tinta-2);
}
.sin-nada h2 { color: var(--tinta); }
.sin-nada p { max-width: 34ch; }

/* --------------------------------------------------------------------------
   Movimiento
   --------------------------------------------------------------------------
   Poco y con motivo: entrar en pantalla, confirmar que has pulsado, y avisar
   de que algo está cargando. Nada que se mueva solo en bucle mientras lees.

   A quien lo pide, todo quieto. Ojo: este servidor tiene "reducir movimiento"
   activado en Windows, así que desde aquí la web se ve estática. Es correcto.
   -------------------------------------------------------------------------- */

.entra {
  animation: entra .5s var(--curva) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes entra {
  from { opacity: 0; transform: translateY(.75rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Saltar al contenido
   --------------------------------------------------------------------------
   Escondido hasta que se llega con el tabulador. Sin esto, quien navega con
   teclado tiene que pasar por los cinco enlaces del menú en CADA página antes
   de llegar a la lista de eventos.
   -------------------------------------------------------------------------- */

.saltar {
  position: absolute;
  left: .5rem;
  top: -3rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: var(--r);
  background: var(--tinta);
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s var(--curva);
}
.saltar:focus { top: .5rem; }

/* Para textos que tiene que oír un lector de pantalla pero que en pantalla
   sobran porque el dibujo de al lado ya lo dice (la lupa del buscador, por
   ejemplo). No se usa display:none: eso lo esconde también del lector. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}