/* Parrilla del Festival de Sitges.
   Oscuro de partida: se usa a oscuras, en la cola del cine y de noche, y una
   pantalla blanca a las dos de la madrugada deslumbra. */

:root {
  --fondo: #0e0d13;
  --fondo-2: #171622;
  --fondo-3: #1f1e2e;
  --borde: #2e2c42;
  --texto: #eceaf5;
  --texto-2: #a09db8;
  --acento: #ff4d6d;          /* el rojo del festival */
  --acento-2: #ffb703;        /* interés */
  --aviso: #ff8c42;

  /* Un color por etiqueta, y ninguno repetido: el sentido tiene que leerse sin
     pararse a leer. El naranja se reserva para lo que va mal (choques y traslados
     apurados), asi que «presencia» va en cian y no en naranja, o dejaria de
     distinguirse justo lo que importa distinguir.
     Contraste medido sobre el fondo de los bloques (#1f1e2e) y sobre el de los que
     estan en el plan (#3a1a28); el minimo de la tabla es 7,9:1. */
  --et-gratis:    #4ade80;   /* verde   9,4:1 */
  --et-presencia: #38bdf8;   /* cian    7,6:1 */
  --et-coloquio:  #d8b4fe;   /* violeta 9,3:1 */
  --et-choca:     #ff8c42;   /* naranja 7,1:1 */
  --alto-fila: 66px;
  --ancho-salas: 116px;
  --alto-cabecera-parrilla: 30px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* El panel y el velo se declaran con display:flex/block, y esa regla gana al
   comportamiento por defecto de [hidden]. Sin esto, los filtros salen abiertos
   al cargar la pagina. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  flex: 0 0 auto;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
  padding: env(safe-area-inset-top) 0 0;
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 6px;
}

.marca { margin: 0; font-size: 17px; letter-spacing: .02em; font-weight: 650; }
.marca-anyo { color: var(--acento); }

.cabecera-acciones { display: flex; gap: 6px; }

/* Los días. Se desplazan a lo ancho en el móvil sin romper la cabecera. */
.dias {
  display: flex;
  gap: 4px;
  padding: 0 8px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dias::-webkit-scrollbar { display: none; }

.dia {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 5px 8px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--fondo-3);
  color: var(--texto-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  position: relative;
}
.dia-semana { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.dia-numero { font-size: 17px; font-weight: 650; }
.dia.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
/* Punto en los días en los que ya hay algo planificado. */
.dia.con-plan::after {
  content: "";
  position: absolute;
  top: 4px; right: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acento-2);
}
.dia.activo.con-plan::after { background: #fff; }

.barra-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 8px;
  font-size: 12px;
  color: var(--texto-2);
}
.zoom { display: flex; gap: 4px; }

/* ------------------------------------------------------------------ botones */

.boton, .boton-icono {
  font: inherit;
  color: var(--texto);
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.boton-icono { padding: 6px 10px; }
.boton:hover, .boton-icono:hover { background: #2a2840; }
.boton.principal { border-color: var(--acento); }
.boton.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.pequeno { padding: 5px 10px; font-size: 13px; }
.boton-icono .etiqueta { font-size: 13px; }
@media (max-width: 520px) { .boton-icono .etiqueta { display: none; } }

.chincheta {
  background: var(--acento);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.enlace {
  background: none;
  border: 0;
  color: var(--texto-2);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 0 0 6px;
}

/* ----------------------------------------------------------------- parrilla */

main { flex: 1 1 auto; min-height: 0; position: relative; }

.parrilla-envoltorio {
  height: 100%;
  overflow: auto;
  /* Sin esto, arrastrar la parrilla a lo ancho en el móvil arrastra la página. */
  overscroll-behavior: contain;
}

.rejilla {
  position: relative;
  width: max-content;
  min-width: 100%;
  padding-bottom: 24px;
}

.fila { display: flex; }

/* La columna de salas se queda pegada a la izquierda al desplazar el tiempo. */
.celda-sala {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: 0 0 var(--ancho-salas);
  width: var(--ancho-salas);
  height: var(--alto-fila);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--fondo-2);
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
}
.celda-sala-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* Salto al mapa desde la columna. Area de pulsacion de 30px: se usa con el pulgar
   y con el movil en la mano por la calle. */
.celda-sala-mapa {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}
.celda-sala-mapa:hover { background: var(--fondo-3); opacity: 1; }

/* La cabecera de horas se queda pegada arriba. */
.fila-horas {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--fondo-2);
}
.fila-horas .celda-sala,
.fila-horas .pista { height: var(--alto-cabecera-parrilla); }
.fila-horas .esquina { z-index: 5; }

.pista {
  position: relative;
  flex: 0 0 var(--ancho-pista);
  width: var(--ancho-pista);
  height: var(--alto-fila);
  border-bottom: 1px solid var(--borde);
}

.marca-hora {
  position: absolute;
  top: 0;
  height: 100%;
  padding-left: 5px;
  border-left: 1px solid var(--borde);
  font-size: 11px;
  color: var(--texto-2);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.marca-hora.madrugada { color: #7d7a99; }

.linea-hora {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--borde);
  opacity: .6;
}

.ahora {
  position: absolute;
  top: var(--alto-cabecera-parrilla);
  bottom: 0;
  width: 2px;
  margin-left: var(--ancho-salas);
  background: var(--acento);
  z-index: 2;
  pointer-events: none;
}

/* ------------------------------------------------------------- las sesiones */

.sesion {
  position: absolute;
  top: 3px;
  height: calc(var(--alto-fila) - 7px);
  overflow: hidden;
  text-align: left;
  padding: 4px 6px;
  border: 1px solid var(--borde);
  border-left: 3px solid #55506e;
  border-radius: 7px;
  background: var(--fondo-3);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
}
.sesion:hover { background: #2a2840; z-index: 2; }

.sesion-titulo {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sesion-pie {
  font-size: 10px;
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sesion.interesa { border-left-color: var(--acento-2); }
.sesion.en-plan {
  background: #3a1a28;
  border-color: var(--acento);
  border-left-color: var(--acento);
}
/* Solo la hora se tine de rosa en los bloques del plan: si esta regla cogiera
   todo el pie, ganaria por especificidad a los colores de las etiquetas y las
   dejaria a todas del mismo color, que es justo lo contrario de lo que se busca. */
.sesion.en-plan .et-hora { color: #ffb0bf; }
.sesion.choca { outline: 2px solid var(--aviso); outline-offset: -2px; }
.sesion.cortos { border-style: dashed; }

/* Los bloques estrechos (un corto de cinco minutos) no caben con dos lineas. La
   clase la pone parrilla.js con el ancho ya calculado. */
.sesion.estrecho .sesion-pie { display: none; }
.sesion.estrecho .sesion-titulo { -webkit-line-clamp: 3; font-size: 11px; }

/* Etiquetas del pie de un bloque. El separador va en el ::before de la siguiente,
   asi que al no pintarse una etiqueta no queda ningun punto suelto. */
.et { white-space: nowrap; }
.et + .et::before { content: " · "; color: var(--texto-2); }
.et-hora { color: var(--texto-2); }
.et-gratis    { color: var(--et-gratis);    font-weight: 600; }
.et-presencia { color: var(--et-presencia); font-weight: 600; }
.et-coloquio  { color: var(--et-coloquio);  font-weight: 600; }
.et-choca     { color: var(--et-choca);     font-weight: 700; }

.vacio, .error {
  position: absolute;
  inset: 40% 0 auto;
  text-align: center;
  color: var(--texto-2);
  padding: 0 24px;
}
.error { color: var(--aviso); }

/* ------------------------------------------------------------------- panel */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 10;
}

.panel {
  position: fixed;
  z-index: 11;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 92vw);
}
@media (max-width: 700px) {
  /* En el móvil, hoja que sube desde abajo: se alcanza con el pulgar. */
  .panel {
    top: auto;
    left: 0;
    width: auto;
    max-height: 82vh;
    border-radius: 16px 16px 0 0;
  }
}

.panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
}
.panel-cabecera h2 { margin: 0; font-size: 15px; }
.panel-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 20px; }
.panel-pie { padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
             border-top: 1px solid var(--borde); }
.panel-pie .boton { width: 100%; justify-content: center; }

.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 12px; color: var(--texto-2); margin-bottom: 4px; }
.campo input {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--borde);
  background: var(--fondo-3);
  color: var(--texto);
}

.grupo { border: 0; padding: 0; margin: 0 0 16px; }
.grupo legend { font-size: 12px; color: var(--texto-2); padding: 0 0 6px; }
.opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  cursor: pointer;
}
.opcion input { accent-color: var(--acento); width: 17px; height: 17px; }

/* ------------------------------------------------------------------- ficha */

.ficha {
  width: min(680px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--fondo-2);
  color: var(--texto);
  overflow: auto;
}
.ficha::backdrop { background: rgba(0, 0, 0, .65); }

.cerrar-ficha { position: sticky; top: 8px; float: right; margin: 8px 8px 0 0; z-index: 2; }

.js-ficha-cuerpo { padding: 16px 18px 22px; }

.ficha-cabecera h2 { margin: 0 30px 4px 0; font-size: 20px; line-height: 1.2; }
.ficha-meta { margin: 0 0 8px; color: var(--texto-2); font-size: 13px; }
.ficha-extras { margin: 8px 0 0; font-size: 13px; color: var(--acento-2); }

.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; }
.etiquetas li {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  color: var(--texto-2);
}

.ficha-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }

.aviso-choque {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--aviso);
  background: rgba(255, 140, 66, .1);
  font-size: 13px;
}
.aviso-suave { color: var(--texto-2); font-size: 13px; font-style: italic; }

.peli {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.peli-cartel { width: 108px; flex: 0 0 108px; border-radius: 8px; align-self: flex-start; }
.peli-texto { min-width: 0; }
.peli-texto h3 { margin: 0; font-size: 16px; }
.peli-original { margin: 2px 0 0; font-size: 13px; color: var(--texto-2); font-style: italic; }
.peli-datos { margin: 6px 0 0; font-size: 12px; color: var(--texto-2); }
.peli-sinopsis { margin: 8px 0 0; font-size: 14px; }
.peli-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.otros-pases { margin-top: 12px; font-size: 13px; }
.otros-pases-titulo { margin: 0 0 4px; color: var(--texto-2); font-size: 12px; }
.otros-pases ul { margin: 0; padding-left: 18px; }
.otros-pases li.en-plan { color: var(--acento); font-weight: 600; }

@media (max-width: 520px) {
  .peli { flex-direction: column; }
  .peli-cartel { width: 92px; flex-basis: auto; }
}

/* --------------------------------------------------------------- mi plan */

/* Conmutador de vista. En el movil se queda sin la palabra "Mi": el espacio de
   la cabecera es el que es y "Plan" se entiende igual. */
.vistas {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.vista {
  font: inherit;
  font-size: 13px;
  color: var(--texto-2);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.vista.activo { background: var(--acento); color: #fff; }
.vista.activo .chincheta { background: rgba(0, 0, 0, .3); }

.plan {
  height: 100%;
  overflow-y: auto;
  padding: 14px 14px 40px;
  max-width: 760px;
  margin: 0 auto;
}

.plan-vacio { color: var(--texto-2); text-align: center; padding: 40px 10px; }
.plan-vacio p { margin: 0 0 10px; }
.plan-vacio .apunte { font-size: 13px; max-width: 44ch; margin: 0 auto; }

.plan-resumen {
  font-size: 13px;
  color: var(--texto-2);
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--borde);
}

.plan-dia { margin-top: 22px; }
.plan-dia h2 {
  margin: 0 0 10px;
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.plan-lista { list-style: none; margin: 0; padding: 0; }

.plan-sesion {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  background: var(--fondo-2);
}
.plan-sesion.choca { border-color: var(--aviso); border-left-color: var(--aviso); }

.plan-hora {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.plan-hora strong { font-size: 15px; }
.plan-hora span { font-size: 12px; color: var(--texto-2); }

.plan-cuerpo { min-width: 0; flex: 1 1 auto; }
.plan-titulo {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.plan-titulo:hover { color: var(--acento); }
.plan-meta { margin: 3px 0 0; font-size: 12px; color: var(--texto-2); }
.plan-aviso { margin: 5px 0 0; font-size: 12px; color: var(--aviso); }
.plan-acciones { display: flex; gap: 6px; margin-top: 8px; }

/* El hueco entre dos sesiones. Es lo que hay que leer de un vistazo, asi que se
   distingue por color: naranja si no da tiempo, apagado si sobra media tarde. */
.plan-hueco {
  font-size: 12px;
  color: var(--texto-2);
  padding: 7px 0 7px 22px;
  margin-left: 24px;
  border-left: 2px dotted var(--borde);
}
.plan-hueco.ajustado { color: var(--acento-2); }
.plan-hueco.mal { color: var(--aviso); font-weight: 600; border-left-color: var(--aviso); }
.plan-hueco.largo { font-style: italic; }

.plan-pendientes h2 { color: var(--acento-2); }
.plan-pendiente {
  padding: 10px 12px;
  border: 1px dashed var(--borde);
  border-radius: 10px;
  margin-bottom: 8px;
}
.plan-opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

@media (max-width: 560px) {
  .marca { font-size: 15px; }
  .vista { padding: 5px 9px; font-size: 12px; }
  .plan { padding: 12px 10px 40px; }
  .plan-sesion { gap: 9px; padding: 9px 10px; }
  .plan-hora { flex-basis: 46px; }
}

.plan-huerfanas {
  margin: 10px 0 0;
  padding: 8px 11px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--fondo-2);
  font-size: 12px;
  color: var(--texto-2);
}

/* ------------------------------------------------------------------ mapa */

.mapa-envoltorio {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mapa { flex: 1 1 auto; min-height: 0; background: var(--fondo-3); }

/* Leaflet viene con su propio aspecto claro. Aqui se le baja el brillo a las
   teselas para que no deslumbre de noche, que es cuando se usa esto. */
.leaflet-tile-pane { filter: brightness(.72) contrast(1.06) saturate(.85); }
.leaflet-container { background: var(--fondo-3); font: inherit; }
.leaflet-control-attribution {
  background: rgba(14, 13, 19, .8) !important;
  color: var(--texto-2) !important;
  font-size: 10px;
}
.leaflet-control-attribution a { color: var(--texto-2) !important; }
.leaflet-bar a {
  background: var(--fondo-2) !important;
  color: var(--texto) !important;
  border-color: var(--borde) !important;
}
.leaflet-bar a:hover { background: #2a2840 !important; }

/* Chinchetas. Un circulo con el numero de sesiones y el nombre al lado: en un
   mapa de cuatro puntos, leer el nombre sin tener que pulsar ahorra mucho.
   Se llaman .pin y no .marca porque .marca ya es el titulo de la cabecera. */
.pin {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.pin-cuenta {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fondo-2);
  border: 2px solid var(--texto-2);
  color: var(--texto);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.pin-nombre {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto);
  text-shadow: 0 0 4px #000, 0 0 8px #000;
}
.pin-plan .pin-cuenta { background: var(--acento); border-color: #fff; color: #fff; }
/* Sala sin sesiones ese dia: se apaga, pero no tanto como para no poder leerla
   sobre el mapa. A .45 se confundia con los rotulos del propio OpenStreetMap. */
.pin-vacia { opacity: .62; }
.pin-vacia .pin-cuenta { border-style: dashed; }
.pin-sin-sitio .pin-cuenta { background: var(--aviso); border-color: #fff; color: #1a1a1a; }

/* Globo de informacion de una sala. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--fondo-2);
  color: var(--texto);
  border: 1px solid var(--borde);
}
.leaflet-popup-content { margin: 12px 14px; font: inherit; }
.leaflet-popup-close-button { color: var(--texto-2) !important; }
.globo h3 { margin: 0 0 4px; font-size: 15px; }
.globo-direccion { margin: 0 0 6px; font-size: 12px; color: var(--texto-2); }
.globo-notas { margin: 0 0 6px; font-size: 12px; color: var(--texto-2); font-style: italic; }
.globo-andando { margin: 8px 0; font-size: 11px; color: var(--acento-2); }
.globo-ir { margin: 2px 0 4px; }

/* La lista de sesiones, plegable. En el movil un dia del Melia son veintitres
   pases: desplegados tapan el mapa entero. */
.globo-caja { margin-top: 6px; }
.globo-caja > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-2);
  padding: 4px 0;
  border-top: 1px solid var(--borde);
}
.globo-caja[open] > summary { color: var(--texto); }
.globo-vacio { margin: 0 0 6px; font-size: 12px; color: var(--texto-2); }
.globo-sesiones { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; }
.globo-sesiones li { border-top: 1px solid var(--borde); }
.globo-sesiones button {
  font: inherit;
  font-size: 12px;
  color: var(--texto);
  background: none;
  border: 0;
  padding: 6px 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.globo-sesiones button:hover { color: var(--acento); }
.globo-sesiones li.en-plan button { color: var(--acento); font-weight: 600; }

/* Aviso de salas sin ubicacion y barra de ajuste. */
.mapa-aviso {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  max-width: min(560px, 92%);
  margin: 0;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--aviso);
  background: rgba(24, 18, 14, .95);
  color: var(--aviso);
  font-size: 12px;
  text-align: center;
}

.mapa-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  background: var(--fondo-2);
}
.mapa-pista { font-size: 11px; color: var(--texto-2); }

.mapa-json {
  flex: 0 0 auto;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  background: var(--fondo-2);
}
.mapa-json p { margin: 0 0 6px; font-size: 12px; color: var(--texto-2); }
.mapa-json code { background: var(--fondo-3); padding: 1px 4px; border-radius: 4px; }
.mapa-json textarea {
  width: 100%;
  max-height: 26vh;
  font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px;
  resize: vertical;
}
.mapa-json-botones { display: flex; gap: 8px; margin-top: 8px; }

@media (max-width: 560px) {
  .mapa-pista { display: none; }
  .pin-nombre { font-size: 10px; }
}

.pin-plan-cuenta { color: var(--acento); font-weight: 700; }

/* Chincheta buscada desde la parrilla. Late unos segundos: con seis chinchetas
   juntas, abrir el globo no basta para saber cual es la que has pedido. */
.pin-buscado .pin-cuenta {
  animation: latido 1.1s ease-in-out 2;
  border-color: var(--acento-2);
}
@keyframes latido {
  0%, 100% { transform: scale(1); box-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
  50%      { transform: scale(1.45); box-shadow: 0 0 0 8px rgba(255, 183, 3, .25); }
}
@media (prefers-reduced-motion: reduce) {
  .pin-buscado .pin-cuenta { animation: none; box-shadow: 0 0 0 6px rgba(255, 183, 3, .35); }
}

/* Tope de alto del globo. Con la direccion, el enlace, los tiempos andando, las
   notas y la lista de sesiones, el del Auditori llegaba a 508 px y tapaba el mapa
   entero en el movil. */
.leaflet-popup-content { max-height: 52vh; overflow-y: auto; }
.globo-notas {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Insignias de la ficha. Mismos colores que las etiquetas de la parrilla: lo que
   se aprende en una pantalla vale en la otra. La de «gratuita» lleva ademas el
   cursor de ayuda, porque es deduccion nuestra y no un dato del festival. */
.insignias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.insignia {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid currentColor;
}
.insignia-con-nota { cursor: help; }
.insignia-gratis    { color: var(--et-gratis);    background: rgba(74, 222, 128, .12); }
.insignia-presencia { color: var(--et-presencia); background: rgba(56, 189, 248, .12); }
.insignia-coloquio  { color: var(--et-coloquio);  background: rgba(216, 180, 254, .12); }