/* Lanzarote Wine Guide — hoja de la aplicación (T7)
   Solo lo que el manual de la plantilla no cubre: resultados del buscador,
   tarjetas de evento con datos de filtro, mapas y estados vacíos.
   Las clases de la plantilla (registro, filtros, itinerario, agenda-semana,
   leyenda, terreno…) NO se redefinen aquí: vienen de styles.css. */

/* ---------- Buscador: resultados en línea ---------- */

.app-buscador-resultados {
  margin-top: 0.6rem;
}
.app-buscador-estado {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--malvasia-tinta);
}
.app-buscador-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filete);
}
.app-buscador-item {
  border-bottom: 1px solid var(--filete);
}
.app-buscador-enlace {
  display: block;
  padding: 0.55rem 0.4rem;
  text-decoration: none;
  color: inherit;
}
.app-buscador-enlace:hover { background: var(--cal); }
.app-buscador-nombre { font-weight: 600; }
.app-buscador-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}
.app-oculto { display: none !important; }

/* ---------- Agenda: tarjetas de evento ---------- */

.app-eventos {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.app-evento {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 0.3rem 1.2rem;
  align-items: baseline;
  padding: 0.9rem 0.4rem;
  border-bottom: 1px solid var(--filete);
}
.app-evento:hover { background: var(--cal); }
.app-evento-fecha {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--malvasia-tinta);
}
.app-evento-fecha strong { display: block; font-size: 0.95rem; color: var(--tinta); }
.app-evento-titulo {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}
.app-evento-lugar {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  color: var(--tinta-2);
}
.app-evento-datos {
  margin: 0.2rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}
.app-evento-precio {
  font-family: var(--mono);
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
}
.app-evento-precio a { color: var(--lava); }

/* ---------- Mapas ---------- */

.app-mapa {
  margin: 1.6rem 0 0;
}
.app-mapa-lienzo {
  height: 380px;
  border: 1px solid var(--tinta);
  background: var(--cal);
}
.app-mapa-lienzo .leaflet-popup-content { font-family: var(--serif); font-size: 0.92rem; }
.app-mapa-lienzo .leaflet-popup-content a { color: var(--lava); }
.app-mapa-nota {
  margin: 0.45rem 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--tinta-2);
}
.app-mapa-fallo {
  padding: 1rem;
  border: 1px solid var(--filete);
  font-size: 0.9rem;
}

/* ---------- Rutas ---------- */

.app-ruta-parada {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.2rem 0.8rem;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid var(--filete-suave);
}
.app-ruta-num {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--lava);
}
.app-ruta-datos {
  margin: 0.15rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}
.app-ruta-regla {
  margin: 1.2rem 0 0;
  padding: 0.8rem 0.9rem;
  border-left: 3px solid var(--malvasia);
  background: var(--cal);
  font-size: 0.92rem;
}
.app-ruta-regla-rotulo {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--malvasia-tinta);
  margin-bottom: 0.2rem;
}

/* ---------- Avisos de la aplicación ---------- */

.app-aviso-afiliacion {
  margin: 1.6rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--lava);
  background: var(--cal);
  font-size: 0.9rem;
}
.app-aviso-afiliacion strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lava-tinta);
  margin-bottom: 0.25rem;
}

/* ---------- Estados vacíos de la aplicación ---------- */

.app-vacio {
  padding: 1.2rem 0.4rem;
  border-bottom: 1px solid var(--filete);
  font-size: 0.95rem;
  color: var(--tinta-2);
}

/* ---------- Móvil ---------- */

@media (max-width: 720px) {
  .app-evento {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
  .app-evento-precio { text-align: left; }
  .app-mapa-lienzo { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-evento, .app-buscador-enlace { transition: none; }
}