/*
 * Ajustes del theme sobre el CSS de la demo (assets/css/demo/, que se mantiene sin cambios).
 * Solo lo que cambia al pasar de la demo a WordPress.
 */

/* La barra de administración de WordPress ocupa altura: la app (100dvh) se ajusta para no desbordar. */
body.admin-bar .app { height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .app { height: calc(100dvh - 46px); }
}

/* En la demo, la foto y el título de la tarjeta eran <button>; aquí son enlaces a la ficha. */
.photo > a:first-child { display: block; width: 100%; height: 100%; }
a.title-button { color: inherit; text-decoration: none; }
a.title-button:hover { text-decoration: underline; }
.also-card { text-decoration: none; }
.menu-links a { text-decoration: none; }

/* Menú de escritorio: oculto en móvil (lo muestra desktop.css). */
.desk-nav { display: none; }

/* Eventos sin imagen destacada. */
.cover-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #f3d2db, #e9edf1); }
.also-image.cover-empty { position: absolute; inset: 0; z-index: -2; }

/* Cancelado, aplazado o entradas agotadas. */
.card-flag { position: absolute; left: 14px; bottom: 14px; background: #34465a; color: #fff; font-weight: 700; font-size: 15px; padding: 6px 12px; border-radius: 8px; }
.card.is-cancelled .when { text-decoration: line-through; }

/* ---- Paso 4: agenda ---- */

/* Panel de categorías: enlaces con el aspecto de los botones de filtro de la demo. */
a.category { color: inherit; text-decoration: none; }
a.category:hover { border-color: var(--pink); color: #c71746; }

/* Calendario: los días son enlaces (con eventos) o texto (sin eventos o pasados). */
.calendar-grid .cal-day { display: block; min-height: 43px; border-radius: 10px; position: relative; padding: 9px 0 10px; font-size: 18px; color: inherit; text-decoration: none; }
.calendar-grid .cal-day.past { opacity: .35; }
.calendar-grid a.cal-day:hover { outline: 2px solid var(--teal); }

/* Buscador: es un formulario (?q=); mismo aspecto que en la demo. */
#search-box input { flex: 1; min-width: 0; border: 0; padding: 0 14px; font-size: 17px; min-height: 48px; background: transparent; color: inherit; }
#search-box input:focus { outline: none; }
.search-button.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.search-button.active .icon { color: #fff; }
.search-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; margin: 10px 0 4px; font-size: 16px; }
.search-summary p { margin: 0; }
.search-summary a { color: #087f93; font-weight: 700; text-decoration: none; }
[data-search-hidden] { display: none !important; }

/* Página de categoría. */
.category-lead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 14px 0 22px; }
.category-lead h1 { margin: 0; }
.category-lead p { margin: 0; color: #627186; }
.category-badge-static { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.category-badge-static .category-icon { width: 46px; height: 46px; }
.category-page .info-button { display: block; text-align: center; margin: 26px 0 8px; }

/* Ficha de evento. */
a.event-category { text-decoration: none; }
.event-hero > img { display: block; width: 100%; height: 225px; object-fit: cover; }
.event-cancelled { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #34465a; color: #fff; font-weight: 700; }
.event-schedule { display: block; margin-top: 6px; font-size: 16px; color: #405167; }
.event-text { font-size: 18px; line-height: 1.6; margin: 0 0 18px; overflow-wrap: anywhere; }
.event-text p { margin: 0 0 14px; }
.event-text a { color: #087f93; }
.event-place h2 a { color: inherit; text-decoration: none; }
.event-about .event-cta { margin-top: 10px; }
/* Listado «Otros eventos [de la categoría]»: imagen, texto y una flecha pequeña a la derecha. */
.related-event a { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; color: #405167; padding: 10px 12px 10px 10px; text-decoration: none; }
.related-event a > img,
.related-event a > .cover-empty { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 10px; object-fit: cover; }
.related-event a > span:not(.icon) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.related-event a > span:not(.icon) > strong { font-size: 17px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.related-event a > span:not(.icon) > small { font-size: 14px; }
.related-event a > span:not(.icon) > span { font-size: 14px; color: #6b7481; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-event a > .icon { flex: 0 0 16px; width: 16px; height: 16px; color: #9aa6b4; }
.related-event a:hover { background: #f8f9fb; }

/* ---- Ficha de evento: ajustes del 01/10/2026 ---- */

/* Imágenes dentro de la descripción. */
.event-text img {
    max-width: 100%;
    height: auto;
}

/* Me gusta y compartir bajo el título y la categoría, antes del cuadro de la fecha. */
.event-intro .event-social { margin: 0 0 18px; }

/* «+ información» (horario particular): enlaza con la descripción. */
.event-date a.anchor-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Dónde comer cerca de aquí. */
.event-food { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; padding: 16px 18px; border-radius: 14px; background: #34465a; color: #fff; text-decoration: none; }
.event-food .icon { width: 30px; height: 30px; flex-shrink: 0; }
.event-food > span:not(.icon):not(.event-food-arrow) { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.event-food strong { font-size: 19px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; }
.event-food small { font-size: 14px; text-transform: uppercase; opacity: .85; }
.event-food-arrow { font-size: 34px; line-height: 1; }

/* Otros eventos de la categoría: botón final. */
.event-more-link { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--pink); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; text-decoration: none; }
.event-more-link span { font-size: 26px; line-height: 1; }

/* Más eventos en [lugar]: carrusel horizontal (como «Además hoy»). */
.place-events .also-heading h2 { font-size: 23px; margin: 0; }
.place-track { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 0 10px; scrollbar-width: thin; scrollbar-color: #c1c8ce transparent; }
.place-event { flex: 0 0 62%; max-width: 230px; scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid #dce2e8; border-radius: 14px; background: #fff; overflow: hidden; color: #405167; text-decoration: none; }
.place-event-image { position: relative; display: block; aspect-ratio: 16 / 10; background: #e9edf1; }
.place-event-image img,
.place-event-image .cover-empty { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Fotos verticales: sin esto, la caja con aspect-ratio crece hasta la altura de la foto. */
.place-event-image > img { position: absolute; inset: 0; }
.place-event-date { position: absolute; left: 10px; bottom: -18px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(32, 45, 62, .18); line-height: 1; color: #cf234c; font-size: 13px; }
.place-event-date strong { font-size: 22px; font-weight: 900; }
.place-event-copy { display: flex; flex-direction: column; gap: 6px; padding: 26px 12px 14px; }
.place-event-copy strong { font-size: 17px; line-height: 1.2; }
.place-event-copy small { font-size: 15px; color: #cf234c; }

/* Imagen de la ficha: parallax y desenfoque al bajar (lo aplica app.js, como el theme actual). */
.event-hero { overflow: hidden; }
.event-hero > img { will-change: transform, filter; }

/* Hoja de compartir: menú de opciones desde abajo, como la web actual. */
.share-sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(32, 45, 62, .45); }
.share-sheet[hidden] { display: none; }
.share-sheet-panel { width: 100%; max-width: 540px; max-height: 88%; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 18px 18px max(14px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(32, 45, 62, .2); }
.share-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.share-sheet-head p { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .3px; }
.share-sheet-head button { min-width: 44px; min-height: 44px; font-size: 26px; }
.share-sheet-list a,
.share-sheet-list button { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 51px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 17px; color: #405167; text-decoration: none; text-align: left; }
.share-ico { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; color: #fff; }
.share-ico svg { width: 22px; height: 22px; }
.share-ico.ig-stories { background: radial-gradient(circle at 30% 110%, #fdc468 0, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%); }
.share-ico.ig-feed { background: #f09819; }
.share-ico.bluesky { background: #1185fe; }
.share-ico.facebook { background: #3b5998; }
.share-ico.whatsapp { background: #25d366; }
.share-ico.linkedin { background: #0a66c2; }
.share-ico.copy { background: #6b7481; }
.share-ico.more { background: #e9edf1; color: #405167; }

/* Mapa de la ficha (Leaflet + OpenStreetMap). */
.event-map-canvas { position: relative; z-index: 0; height: 260px; border: 1px solid #dce2e8; border-radius: 14px; overflow: hidden; background: #e8edf0; }
.event-map-canvas .leaflet-control-attribution { font-size: 10px; line-height: 1.4; padding: 0 5px; background: rgba(255, 255, 255, .75); color: #6b7481; }
.event-map-canvas .leaflet-control-attribution a { color: inherit; }
.event-pin { background: none; border: 0; }
.event-pin svg { display: block; width: 36px; height: 44px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }

/* Color de todos los mapas (ficha de evento, mapa gastronómico…): filtro elegido en
   Herramientas → enAranda → Mapas. Sin el plugin, «suave». */
.leaflet-tile-pane { filter: var(--ea-map-filter, saturate(.45) brightness(1.06) contrast(.92)); }

/* «Ahora mismo»: eventos en curso (de su comienzo a su fin o, sin fin, durante una hora). */
.live-badge { display: none; position: absolute; top: 14px; right: 14px; z-index: 2; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.is-live .live-badge { display: inline-flex; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: ea-live 1.6s ease-in-out infinite; }
@keyframes ea-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.card.is-live { border: 2px solid var(--pink); box-shadow: 0 6px 18px rgba(231, 48, 89, .18); }
.event-hero { position: relative; }

/* «Terminado»: en la ficha de un evento que ya ha pasado (mismo sitio que «Ahora mismo»). */
.ended-badge { display: none; position: absolute; top: 14px; right: 14px; z-index: 2; padding: 7px 13px; border-radius: 99px; background: #34465a; color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.is-ended .ended-badge { display: inline-block; }
.is-ended .live-badge { display: none; }

/* Ficha de lugar y páginas de listado (tanda 2). */
.place-subtitle { margin: -14px 0 18px; color: #627186; font-size: 17px; }
.place-contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.place-contact a { flex: 1 1 auto; text-align: center; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #dce2e8; color: #087f93; font-weight: 700; text-decoration: none; }
.place-contact a:first-child { background: var(--pink); border-color: var(--pink); color: #fff; }
.place-agenda { margin-top: 30px; border-top: 1px solid #dce2e8; padding-top: 24px; }
.place-agenda > h2 { font-size: 23px; margin: 0 0 6px; }
.listing-parent { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -10px 0 18px; }
.listing-parent .icon { width: 20px; height: 20px; color: var(--pink); }
.listing-parent a { color: #087f93; font-weight: 700; text-decoration: none; }
.listing-text { max-width: 720px; margin: 0 auto 20px; }

/* Lugar en la tarjeta: enlace a su ficha. */
a.location-link { color: inherit; text-decoration: none; }
a.location-link:hover { color: #087f93; text-decoration: underline; }

/* ---- Comer (paso 5) ---- */
.food-state { margin: 4px 0 6px; font-size: 15px; font-weight: 700; color: #6b7481; }
.is-open > a .food-state, .venue-detail.is-open .food-state, .map-place-card .food-state.is-open { color: #00875a; }
.food-card[hidden] { display: none; }
.food-card > a { color: inherit; text-decoration: none; display: block; }
.food-list-heading h1 { margin: 0; line-height: 1; }
.food-search-field[hidden] { display: none !important; }
.food-search.active { background: #159fb6; color: #fff; }
.venue-state { font-size: 17px; margin: 0 0 14px; }
.venue-price { margin: 10px 0 0; color: #627186; }
.venue-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.venue-gallery a { flex: 0 0 78%; max-width: 380px; scroll-snap-align: start; }
.venue-gallery img { display: block; width: 100%; max-width: 380px; height: 220px; object-fit: cover; border-radius: 14px; scroll-snap-align: start; }
.venue-section.hours > div.today { font-weight: 900; color: var(--pink); }
.venue-menu { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid #dce2e8; border-radius: 14px; background: #fff; color: #405167; text-decoration: none; font-weight: 700; }
.venue-menu .icon { width: 24px; height: 24px; color: var(--pink); }
.venue-menu span:nth-child(2) { flex: 1; }
.venue-menu span:last-child { font-size: 26px; color: #9aa6b4; }
.food-pin.is-open { background: #00875a; }
.food-pin.is-open.selected { background: #159fb5; }
.food-tools .food-reset[hidden], [data-food-badge][hidden] { display: none !important; }
.venue-cuisine { margin: -4px 0 12px; color: #cf234c; font-weight: 700; font-size: 16px; line-height: 1.4; }

/* Listado de restaurantes: estado como marca (rosa = abierto, gris = cerrado, también «bajo reserva»). */
.food-photo { position: relative; }
.food-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 8px; background: #9aa3ad; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; line-height: 1.1; }
.food-badge.is-open { background: var(--pink); }
.food-badge svg { flex-shrink: 0; }
.is-premium .food-badge { position: absolute; top: 12px; left: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

/* Gratuitas: foto pequeña a la izquierda; estado, tipo y nombre a la derecha. */
.food-card.is-free > a { display: flex; align-items: stretch; }
.food-card.is-free .food-photo { flex: 0 0 34%; max-width: 150px; min-height: 118px; }
.food-card.is-free .food-cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.food-card.is-free .food-card-info { flex: 1; min-width: 0; padding: 12px 14px; }
.food-card.is-free .food-badge { margin-bottom: 7px; }
.food-card.is-free h3 { font-size: 22px; margin: 2px 0 6px; line-height: 1.15; }
.food-card.is-free .food-card-info > span:not(.food-badge) { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.food-card.is-free .service-icon { width: 26px; height: 26px; }
/* La regla de la demo «.food-card-info>span» (tipo de establecimiento, gris y 15 px) no debe afectar a la marca. */
.food-card-info > .food-badge { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.food-card-info > .food-badge, .food-card-info > .food-badge * { color: #fff; }

/* Ficha de restaurante: estado sobre la foto, como en el listado. */
.venue-photo { position: relative; }
.venue-photo > .food-badge { position: absolute; top: 14px; left: 14px; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

/* Fila de Me gusta / Compartir: las columnas se adaptan al número de botones (un solo botón ocupa todo el ancho, centrado). */
.social { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.social button { justify-content: center; }

/* Menús del día y cartas (paso 5, tanda 2). */
.menu-list-card { color: inherit; text-decoration: none; }
.menu-list-card[hidden] { display: none !important; }
.menu-list-card.is-not-today { opacity: .62; }
.menu-not-today { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 6px; background: #9aa3ad; color: #fff; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; }
.menu-detail-intro a { color: inherit; text-decoration: none; }
.menu-detail .event-social { margin: 0 0 18px; }
.menu-paper h3 { font-size: 19px; margin: 18px 0 8px; }
.menu-paper h3:first-child { margin-top: 0; }
.menu-actions { margin: 18px 0; }
.venue-menu small { display: block; font-weight: 400; font-size: 14px; color: #627186; margin-top: 2px; }
.venue-menu b { color: #087f93; white-space: nowrap; }
.carta-pages { display: flex; flex-direction: column; gap: 14px; }
.carta-pages img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #dce2e8; background: #fff; }
.carta-note { text-align: center; color: #627186; font-size: 14px; }
.menu-detail-hero.event-hero > img { height: 100%; }

/* Avance de menús del día en el listado de restaurantes. */
.food-menus[hidden] { display: none; }
.food-menus .also-heading h2 { font-size: 25px; margin: 0; font-weight: 900; }
.food-menu-photo img { display: block; }



/* Botones Llamar / Ver menús: más pequeños para que el teléfono quepa en una línea. */
.venue-actions a { font-size: 17px; line-height: 1.2; }


/* Menú «Más enAranda»: los enlaces sin icono (recursos y textos legales), más pequeños. */
.menu-links a:not(:has(.icon)) { font-size: 16px; }
.menu-page { margin: 8px 0 24px; background: #fff; border: 1px solid #dce2e8; border-radius: 16px; padding: 6px 10px; }

/* Páginas de contenido (page.php): texto de WordPress con el estilo de las páginas informativas. */
.page-copy { font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; }
.page-copy img { max-width: 100%; height: auto; }
.page-copy .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.page-copy a { color: #087f93; }
.page-copy h2 { font-size: 24px; line-height: 1.2; margin: 26px 0 10px; }
.page-copy .wp-block-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; margin: 22px -16px; padding: 30px 22px; background-size: cover; background-position: center; color: #fff; text-align: center; }
.page-copy .wp-block-cover::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.page-copy .wp-block-cover > * { position: relative; font-size: 24px; line-height: 1.3; margin: 0; }
.page-copy .cuadro_eco1, .page-copy .cuadro_eco2 { margin: 16px 0; padding: 16px 18px; border-radius: 14px; background: #eef7ef; color: #2f5d3a; font-size: 16px; }
.page-copy .cuadro_eco1 p, .page-copy .cuadro_eco2 p { margin: 0; }

/* Página /app/. */
.install-intro { font-size: 18px; line-height: 1.5; }
.install-browsers { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.install-browsers button { padding: 8px 12px; border: 1px solid #ced9e0; border-radius: 99px; background: #fff; color: #405167; font-size: 15px; }
.install-browsers button[aria-pressed=true] { background: #159fb6; border-color: #159fb6; color: #fff; }
.install-steps-shots { background: #fff; border: 1px solid #dce2e8; border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.install-steps-shots h2 { font-size: 22px; margin: 0 0 12px; line-height: 1.2; }
.install-steps-shots p { font-size: 17px; line-height: 1.5; }
.install-shot { text-align: center; margin: 14px 0; }
.install-shot img { width: 100%; max-width: 260px; height: auto; }
@media (min-width: 900px) {
	.page-copy .wp-block-cover { margin-left: 0; margin-right: 0; border-radius: 16px; }
}

/* Navegación sin recargar: barra de progreso si la página tarda y capa de la pantalla anterior. */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; height: 3px; background: linear-gradient(90deg, transparent, #fff 40%, #fff 60%, transparent); opacity: 0; pointer-events: none; transform: translateX(-100%); }
.nav-progress.active { opacity: .9; animation: nav-progress 1.1s ease-in-out infinite; }
@keyframes nav-progress { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.nav-slide-ghost > * { box-sizing: border-box; }

/* Agenda: los días fuera de la pantalla no se pintan hasta acercarse (portada más rápida en móviles).
   El alto de reserva se sustituye por el real («auto») en cuanto un día se ha pintado una vez. En la
   copia de la transición y al recuperar el scroll al volver se pinta todo: con altos estimados, la
   posición no caería en el mismo sitio. */
.agenda-day { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.nav-slide-ghost .agenda-day, .no-cv .agenda-day { content-visibility: visible; }

/* Guardar (marcador) y «Me gusta». */
.event-hero .event-save, .res-hero .event-save, .exp-hero .event-save { bottom: 14px; z-index: 2; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.save[aria-pressed=true] .icon, .event-save[aria-pressed=true] .icon { color: #fff; }
.like-count { margin-left: 2px; font-weight: 700; }
.like-count::before { content: "· "; font-weight: 400; }
.saved-item[hidden], .saved-other-tab { display: none; }
.saved-list .saved-item + .saved-item { margin-top: 18px; }
.saved-list .card { margin-bottom: 0; }
.food-card { position: relative; }
.food-card .food-save { top: 12px; right: 12px; bottom: auto; width: 40px; height: 40px; background: rgba(255, 255, 255, .92); }
.food-card .food-save .icon { width: 21px; height: 21px; }
/* «A 12 personas les gusta esto», bajo los botones de la tarjeta. */
.like-people { margin: 0;
    padding: 0 50% 5px 15px;
    font-size: 12px;
    color: #647286;
    text-align: center;
    background: #e9ecef;
    margin-top: -10px; }
.like-people[hidden] { display: none; }

/* Guardados: botón redondo entre la foto (175 px) y el texto, como en las tarjetas de evento. */
.saved-extra { position: relative; }
.saved-extra .saved-save { top: 147px; bottom: auto; }
.saved-extra.no-photo .saved-save { top: 14px; }
.saved-extra.no-photo a > div { padding-right: 84px; }

/* Restaurantes y recursos: al guardar, fondo rosa (como en los eventos). */
.food-card .food-save[aria-pressed=true], .res-card .res-save[aria-pressed=true] { background: var(--pink); color: #fff; }

/* Herramientas internas con tablas anchas («Lista de eventos para redes»): todo el ancho. */
.wide-page #content { max-width: none; width: calc(100% - 32px); }
.tool-page h1 { margin: 18px 0 12px; font-size: 26px; }

/* Publicidad (Advanced Ads, inc/ads.php): la caja de la demo (.ea-caja, de borde a borde en el móvil)
   con el marcado del plugin dentro; su rótulo «Publicidad» hace de etiqueta. */
.ea-caja [class$="-adlabel"] { display: block; font-size: 11px; letter-spacing: 1.5px; color: #6b7481; margin-bottom: 7px; text-transform: uppercase; }
.ea-caja a { display: block; }
.ea-caja img, .ea-caja video { display: block; width: 100%; height: auto; }
.ea-caja[hidden] { display: none; }
.card + .ea-caja.en-lista { margin-top: 6px; }
/* En la rejilla de recursos, a todo el ancho; los huecos que deja se rellenan con las tarjetas siguientes. */
.res-grid { grid-auto-flow: row dense; }
.res-grid .ea-caja { grid-column: 1 / -1; margin-top: 4px; margin-bottom: 4px; }
/* Los días llevan content-visibility (recorta lo que sobresale): en el móvil la sección llega al borde de
   la pantalla y recupera el margen con padding, para que la publicidad de borde a borde no salga cortada. */
@media (max-width: 899px) {
	.agenda-day { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 370px) {
	.agenda-day { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
}
/* Hueco de un anuncio que se carga al acercarse con el scroll (inc/ads.php): ya ocupa su sitio (rótulo y un
   cuadrado gris, el formato más habitual, 768×768) para que la página no salte; app.js corrige el scroll si al
   llegar el anuncio tiene otra altura. */
.ea-caja.ea-pendiente::before { content: "Publicidad"; display: block; font-size: 11px; letter-spacing: 1.5px; color: #6b7481; margin-bottom: 7px; text-transform: uppercase; }
.ea-caja.ea-pendiente::after { content: ""; display: block; aspect-ratio: 1 / 1; background: #e9ecef; }
/* Ficha de evento: «A 12 personas les gusta esto» dentro de la misma caja que los botones, como en las tarjetas. */
.event-intro .event-like-box { margin: 0; border-radius: 14px; overflow: hidden; background: #e9ecef; }
.event-intro .event-like-box .event-social { margin: 0; border-radius: 0; }
.event-like-box .like-people { padding-bottom: 8px; }
/* Caja de la publicidad: como .advertisement de la demo, con otro nombre (los bloqueadores de anuncios ocultan
   las clases «advertisement», «ad-slot», [data-ad-slot], [aria-label="Publicidad"]…). */
.ea-caja { margin: 24px -16px 26px; text-align: center; }
@media (max-width: 370px) { .ea-caja { margin-left: -10px; margin-right: -10px; } }

/* ---------- Paneles «Categorías» y «Más enAranda» (cabecera) ----------
   Tarjeta flotante con esquinas amplias y sombra suave; cabecera con antetítulo rosa y botón de cerrar redondo;
   categorías en baldosas con el icono en una pastilla blanca; el menú en filas con icono, título y una línea de ayuda. */
#panel .panel:has(.sheet-head) { border: 0; border-radius: 22px; padding: 18px 16px 14px; box-shadow: 0 22px 48px rgba(24, 36, 52, .28), 0 2px 6px rgba(24, 36, 52, .08); }
.sheet-head { align-items: flex-start; margin-bottom: 4px; }
.sheet-eyebrow { margin: 0 0 3px; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pink); }
.sheet-head h2 { font-size: 23px; font-weight: 900; line-height: 1.1; color: #2f3e52; }
.panel-head .sheet-close { width: 38px; height: 38px; min-width: 38px; min-height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: #f1f3f6; color: #5b6b80; font-size: 22px; line-height: 1; transition: background .15s, color .15s; }
.panel-head .sheet-close:hover { background: #fdeef2; color: var(--pink); }
.sheet-lead { margin: 2px 0 14px; font-size: 15px; color: #6b7a8d; }

.sheet-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sheet-cat { display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 5px 10px 5px 5px; border-radius: 16px; background: #f5f7f9; color: #33445a; font-size: 15px; font-weight: 700; line-height: 1.15; text-decoration: none; transition: background .15s, color .15s, transform .15s; }
.sheet-cat-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(32, 45, 62, .12); }
.sheet-cat-icon .category-icon { width: 34px; height: 34px; }
.sheet-cat:hover { background: #fdeef2; color: #c71746; }
.sheet-cat:active { transform: scale(.97); }
.sheet-cat[aria-current="page"] { background: var(--pink); color: #fff; }
.sheet-all { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; padding: 11px; border-radius: 14px; font-size: 16px; font-weight: 800; color: var(--pink); text-decoration: none; transition: background .15s; }
.sheet-all:hover { background: #fdeef2; }
.sheet-all span { transition: transform .15s; }
.sheet-all:hover span { transform: translateX(3px); }
@media (max-width: 350px) {
	.sheet-cats { gap: 8px; }
	.sheet-cat { gap: 8px; padding-right: 8px; font-size: 15px; }
	.sheet-cat-icon { flex-basis: 38px; width: 38px; height: 38px; }
}

.more-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.more-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 9px 8px; border-radius: 14px; color: #33445a; text-align: left; text-decoration: none; transition: background .15s; }
.more-item:hover { background: #f5f7f9; }
.more-item:active { background: #fdeef2; }
.more-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #fdeef2; color: var(--pink); }
.more-icon .icon { width: 22px; height: 22px; }
.more-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-text strong { font-size: 16.5px; font-weight: 800; line-height: 1.2; color: #2f3e52; }
.more-text small { font-size: 13.5px; line-height: 1.3; color: #7a8798; }
.more-arrow { font-size: 24px; line-height: 1; color: #b9c1cb; transition: color .15s, transform .15s; }
.more-item:hover .more-arrow { color: var(--pink); transform: translateX(2px); }
.more-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 12px -16px -14px; padding: 13px 16px 15px; border-top: 1px solid #edf0f3; background: #fafbfc; }
.more-legal a { font-size: 13.5px; color: #7a8798; text-decoration: none; }
.more-legal a:hover { color: var(--pink); }
/* Página /mas-enaranda/: el mismo menú en una tarjeta. */
.more-page { background: #fff; border-radius: 22px; padding: 8px 8px 0; overflow: hidden; box-shadow: 0 2px 10px rgba(32, 45, 62, .06); }
.more-page .more-menu { margin-top: 0; }
.more-page .more-legal { margin: 8px -8px 0; }
/* Con «Categorías» o «Más enAranda» abiertos, el fondo es rosa (continúa la cabecera); el calendario y los
   filtros siguen con el fondo oscuro semitransparente. */
#panel[data-panel="menu"], #panel[data-panel="categories"] { background: var(--pink); }
/* Si el primer bloque de la portada es un día siguiente (pueblo sin nada hoy), sin el margen que lo separa del anterior. */
#content > .upcoming-day:first-child { margin-top: 0; }

/* Ficha de evento: cabecera como en la web anterior. A la izquierda la fecha (día de la semana, día grande, mes y
   año); a la derecha el título y la hora. «Añadir a mi calendario» baja antes de «Cómo llegar». */
.event-head { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 16px; }
.event-dates { flex: 0 0 auto; padding: 2px 14px 2px 0; border-right: 1px solid #e3e7ec; }
.event-dates-in { display: flex; align-items: flex-start; gap: 4px; }
.event-datebox { min-width: 58px; display: flex; flex-direction: column; align-items: center; line-height: 1; text-align: center; }
/* Varios días: inicio - fin, con el guion a la altura del número. */
.ed-sep { align-self: flex-start; margin-top: 22px; font-size: 30px; font-weight: 900; line-height: 1; color: var(--pink); }
.event-dates.is-range .ed-day { font-size: 44px; }
.event-dates.is-range .ed-month { font-size: 23px; }
.ed-week { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #6b7a8d; white-space: nowrap; }
.ed-day { margin-top: 3px; font-size: 46px; font-weight: 900; line-height: .85; letter-spacing: -1px; color: var(--pink); }
.ed-month { margin-top: 2px; font-size: 26px; font-weight: 400; color: var(--pink); }
.ed-year { margin-top: 4px; font-size: 13px; font-weight: 700; color: #6b7a8d; }
.event-head-main { flex: 1; min-width: 0; padding-top: 2px; }
.event-page .event-head h1 { margin: 0 0 8px; }
.event-time, .event-until { display: flex; align-items: center; gap: 8px; margin: 0; }
.event-time { font-size: 22px; font-weight: 900; color: var(--pink); }
.event-time .icon { width: 24px; height: 24px; flex: 0 0 24px; color: #9aa6b4; }
.event-time a.anchor-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-size: 18px; }
.event-until { margin-top: 4px; font-size: 16px; font-weight: 700; color: #5b6b80; }
.event-until .icon { width: 20px; height: 20px; flex: 0 0 20px; color: #9aa6b4; }
.event-head-main .event-schedule { display: block; margin-top: 4px; font-size: 14.5px; color: #5b6b80; }
@media (max-width: 360px) {
	.event-head { gap: 12px; }
	.event-dates { padding-right: 11px; }
	.event-datebox { min-width: 52px; }
	.event-dates.is-range .ed-day { font-size: 38px; }
	.event-dates.is-range .ed-month { font-size: 20px; }
	.ed-sep { margin-top: 20px; font-size: 24px; }
	.ed-day { font-size: 44px; }
	.ed-month { font-size: 22px; }
}
/* «Añadir a mi calendario», suelto, como una fila con icono. */
.event-page a.calendar-link.is-alone { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 14px 16px; min-height: 0; background: #fff; border: 1px solid #dde2e8; border-radius: 14px; color: #087f93; font-size: 17px; font-weight: 700; text-decoration: none; }
.event-page a.calendar-link.is-alone .icon { width: 24px; height: 24px; flex: 0 0 24px; color: #087f93; }
.event-page a.calendar-link.is-alone .calendar-link-arrow { margin-left: auto; font-weight: 400; color: #9aa6b4; }
.event-page a.calendar-link.is-alone:hover { border-color: #087f93; }
/* Ficha de evento: la categoría flota sobre la foto, abajo a la izquierda, con el mismo aspecto que el botón de
   guardar de la derecha (fondo gris claro, borde blanco y sombra). */
.event-page .event-hero .event-category { position: absolute; left: 16px; top: auto; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; width: auto; max-width: calc(100% - 100px); height: 40px; margin: 0; padding: 0 18px 0 12px; border: 3px solid #fff; border-radius: 27px; background: rgb(255 255 255 / 77%); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); color: var(--pink); font-size: 16px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px);  }
.event-page .event-hero .event-category .category-icon { width: 26px; height: 26px; flex: 0 0 26px; }
.event-page .event-hero .event-category:hover { background: #fff; }
/* «Me gusta» marcado: además de rosa, el corazón relleno (mismo dibujo, con relleno). */
[data-action="like"][aria-pressed="true"] .icon { -webkit-mask-image: url("../icons/heart-fill.svg"); mask-image: url("../icons/heart-fill.svg"); }

/* Banner «Instala la app» (app.js): tarjeta blanca flotando sobre la barra de navegación de abajo. */
.install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(var(--ib-bottom, 76px) + env(safe-area-inset-bottom, 0px)); z-index: 900; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(20, 30, 45, .28), 0 2px 6px rgba(20, 30, 45, .1); font-family: Lato, Arial, sans-serif; opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.install-banner.is-in { opacity: 1; transform: none; }
.install-banner.is-leaving { opacity: 0; transform: translateY(16px); }
.install-banner img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; }
.install-banner .ib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-banner .ib-text strong { font-size: 16px; font-weight: 900; line-height: 1.2; color: #2f3e52; }
.install-banner .ib-text span { font-size: 13.5px; line-height: 1.3; color: #5b6b80; }
.install-banner .ib-go { flex: 0 0 auto; border: 0; border-radius: 12px; padding: 11px 15px; background: var(--pink); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.install-banner .ib-close { flex: 0 0 32px; width: 32px; height: 32px; margin-left: -2px; border: 0; border-radius: 50%; background: #f1f3f6; color: #5b6b80; font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 350px) { .install-banner .ib-text span { display: none; } }
@media (prefers-reduced-motion: reduce) { .install-banner { transition: none; } }