.hidden { display: none !important; }

/* Overlay + tarjeta modal */
.wx-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999;
  display:none; align-items:center; justify-content:center; padding:12px; }
.wx-overlay:not(.hidden){ display:flex; }
.wx-card { width:min(96vw, 520px); background:#fff; border:1px solid #e5e7eb;
  border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.wx-close { position:absolute; margin-left:calc(min(96vw, 520px) - 36px - 14px);
  margin-top:-8px; width:36px; height:36px; border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; cursor:pointer; font-size:18px; line-height:34px; }
.wx-title { font-weight:700; margin-bottom:8px; }
.wx-body { font-size:.95rem; }
.wx-row { display:flex; gap:10px; flex-wrap:wrap; }
.wx-chip { border:1px solid #e5e7eb; background:#f9fafb; border-radius:10px; padding:6px 10px; }
.wx-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem;}
.wx-table th, .wx-table td { border-top:1px solid #e5e7eb; padding:8px 6px; text-align:left; }
.wx-note { color:#64748b; font-size:.85rem; margin-top:6px; }

.btn-wx {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  padding: .25rem .45rem;
  border-radius: .6rem;
  font-size: .8rem;
  margin-right: .35rem;
  margin-bottom: .35rem;
  background: #fff;
  cursor:pointer;
}


.action-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--border, #e5e7eb);
  border-radius:999px; background:var(--card,#fff); color:inherit;
  text-decoration:none; font-size:.9rem; line-height:1;
}
.action-chip:hover { background:#f9fafb; }
.action-bar { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }


.hidden { display: none !important; }

.top-actions {
  display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px;
}
.topbtn {
  border:1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}







/* --- YouTube results --- */
.yt-wrapper { margin-top: 12px; }
.yt-title { margin: 0 0 8px; font-size: 1rem; }
.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.yt-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex; flex-direction: column;
}
.yt-thumb {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.yt-meta {
  padding: 8px 10px;
  font-size: .9rem;
}
.yt-meta .t { font-weight: 600; margin-bottom: 2px; }
.yt-meta .c { color: #4b5563; font-size: .85rem; }

.yt-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.yt-page-btn {
  border: 1px solid #d1d5db; background: #f9fafb; padding: 6px 10px;
  border-radius: 8px; font-size: .9rem; cursor: pointer;
}
.yt-page-btn:disabled { opacity: .5; cursor: default; }

/* --- Lightbox fullscreen --- */
.yt-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center;
  padding: 12px;
}
.yt-lightbox:not(.hidden){ display:flex; }
.yt-lightbox-inner {
  position: relative;
  width: min(96vw, 980px);
}
.yt-close {
  position: absolute; top: -8px; right: -8px;
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 999px; width: 36px; height: 36px;
  font-size: 18px; cursor: pointer; line-height: 34px; text-align: center;
}
.yt-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px; overflow: hidden;
}
.hidden { display: none !important; }




.btn-share, .enlace {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  padding: .25rem .45rem;
  border-radius: .6rem;
  font-size: .8rem;
  margin-right: .35rem;
  margin-bottom: .35rem;
  background: #fff;
  cursor:pointer;
}
.btn-share:hover { background:#f8fafc; }


.btn-copy {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  padding: .25rem .45rem;
  border-radius: .6rem;
  font-size: .8rem;
  margin-right: .35rem;
  margin-bottom: .35rem;
  background: #fff;
}
.btn-copy:hover { background:#f3f4f6; }



.enlace, .btn-direcciones {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  padding: .25rem .45rem;
  border-radius: .6rem;
  font-size: .8rem;
  margin-right: .35rem;
  margin-bottom: .35rem;
  background: #fff;
}
.btn-direcciones { border-color: #93c5fd; background: #eff6ff; }

/* Tabs */
.vc-tabs{
  display:flex; gap:8px; margin:10px 0 12px;
}
.vc-tab{
  appearance:none; border:1px solid #e5e7eb; background:#fff;
  padding:.15rem .35rem; border-radius:10px; cursor:pointer;
  font-weight:600; font-size:.95rem;
}
.vc-tab.is-active{ background:#fde047; border-color:#f59e0b; }

/* Panels */


/* Barra de acciones */
.vc-actions { display:flex; gap:8px; margin:10px 0 12px; flex-wrap:wrap; }
.vc-btn {
  appearance:none; border:1px solid #e5e7eb; background:#fff;
  padding:.55rem .75rem; border-radius:10px; cursor:pointer;
  font-weight:600; font-size:.95rem;
}
.vc-btn[aria-expanded="true"]{ background:#fde047; border-color:#f59e0b; }

/* Panels plegables */
.vc-panel { width:100%; margin-bottom:10px; }
.hidden { display:none !important; }



/* Tabla */
.tabla-wrap { overflow:auto; border:1px solid #e5e7eb; border-radius:10px; }
#tabla-eventos { width:100%; border-collapse:collapse; font-size:.8rem; }
#tabla-eventos th, #tabla-eventos td { padding:.35rem .7rem; border-bottom:1px solid #f1f5f9; white-space:nowrap; }
#tabla-eventos tbody tr:hover { background:#f9fafb; cursor:pointer; }



/* 
    Limita el ancho del popup en móvil y deja que el contenido fluya 
    90vw, 390px
*/
.vc-popup .leaflet-popup-content-wrapper {
  width: auto;
  max-width: min(96dvw, 460px);
}

/* 88vw, 360px */
.vc-popup .leaflet-popup-content {
  margin: 10px 12px;             /* evita que el texto pegue con el borde */
  width: auto;
  max-width: min(94dvw, 440px);   /* el contenido no puede ser más ancho que el wrapper */
  box-sizing: border-box;
  overflow: hidden;              /* oculta cualquier desborde raro */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Imágenes del popup: siempre responsive */
.vc-popup img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Si muestras miniaturas en fila, permite que rompan y no fuerce ancho */
.vc-popup .thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vc-popup .thumbs img { width: 88px; height: auto; }

/* Cierre más cómodo en táctil */
.leaflet-container a.leaflet-popup-close-button {
  width: 28px; height: 28px; line-height: 28px;
}
/* ************************************** */

.acciones .enlace {
  font-size: 0.875rem;   /* = text-sm en Tailwind (~14px) */
  color: #2563eb;        /* azul */
  text-decoration: none; /* quitar subrayado */
  margin-right: 0.5rem;  /* separación */
  display: inline-flex;
  align-items: center;
}

.acciones .enlace:hover {
  text-decoration: underline;
}



/* Mapa wrapper como ya tenías */
#mapa-eventos{ width:100%; height:60dvh; min-height:300px; background:#f1f5f9; border-radius:8px; }

@media (min-width:768px){ #mapa-eventos{ height:420px; } }




/* Altura y animación del wrapper */
.vc-map-wrapper{
  overflow: hidden;
  transition: height .28s ease;
  height: 420px; /* altura visible por defecto - was 460*/
}
.vc-map-wrapper.collapsed{
  height: 0;
}

/* Altura real del mapa en móvil */
#mapa-eventos, .vc-map{
  height: 60vh;          /* ocupa 60% de la pantalla */
  min-height: 300px;     /* nunca menos de 300px */
}




/* Alto del lienzo del mapa */
.vc-map{
  height: 420px; /* ajusta si quieres más/menos mapa visible */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

/* Botón toggle (opcional, porque ya lleva clases utilitarias) */
#toggle-mapa { user-select: none; }


/* Misma alineación en tarjetas y popups Leaflet */
.vc-kw .vc-row { display:flex; align-items:flex-start; gap:.35rem; margin:.15rem 0; }
.vc-kw .vc-ico { padding-top:.15rem; flex:0 0 auto; }
.vc-kw .vc-col { line-height:1.25; }

/* Leaflet popup contenido: asegura que nuestras filas se ven bien */
.leaflet-popup-content .vc-kw .vc-row { display:flex; }
.leaflet-popup-content .vc-kw .vc-ico { padding-top:.15rem; }



/* Popups Leaflet por defecto 
.leaflet-popup-content {
  max-width: 400px !important; /* cambia a lo que quieras */
}


/* Por defecto, todas visibles */
#tabla-eventos th, 
#tabla-eventos td {
  display: table-cell;
}

/* En pantallas pequeñas (<640px), ocultamos columnas 2 y 4 (ejemplo) */
/* dia - titulo - localidad - local */
@media (max-width: 640px) {
  #tabla-eventos th:nth-child(3), /* Localidad */
  #tabla-eventos td:nth-child(3),
  
  #tabla-eventos th:nth-child(4), /* Local */
  #tabla-eventos td:nth-child(4) {
    display: none;
  }
}

/* En pantallas muy pequeñas (<480px), dejamos solo título */
/* dia - titulo - localidad - local */
/*
@media (max-width: 480px) {
  #tabla-eventos th:nth-child(1), 
  #tabla-eventos td:nth-child(1),
  
  #tabla-eventos th:nth-child(2), 
  #tabla-eventos td:nth-child(2) {
    display: none;
  }
}
*/


/* En pantallas pequeñas */
@media (max-width: 600px) {
  .leaflet-popup-content-wrapper {
    max-width: 390px !important;
  }
}

.vc-modal {
  max-width: min(92vw, 860px);
  max-height: 90vh;
  overflow: auto;
}
.vc-modal .modal-content img.extra-thumb{
  max-height: 90px; width: auto; border-radius: 6px; margin-right:6px; display:inline-block;
}

.vc-no-scroll { overflow: hidden; }

.vc-lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 2147483647;   /* por encima de Leaflet y todo */
  padding: 1rem;
}

.vc-lightbox-inner{
  position: relative;
  max-width: 95vw; max-height: 90vh;
}

.vc-lightbox-img{
  max-width: 95vw; max-height: 90vh;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: block;
}

.vc-lightbox-close{
  position: absolute; top: -10px; right: -10px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.9);
  cursor: pointer; font-size: 20px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

  .vc-loader{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:160px; gap:.5rem; padding:1rem; margin:0 auto 1rem; max-width:920px;
  }
  
  
/* Loader simple (si lo usas) */
.vc-loader{ display:flex; align-items:center; gap:10px; padding:8px 0; }
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid #fde68a; border-top-color:#f59e0b; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
  
  
  
  .vc-text{ font-size:.95rem; color:#334155; }
  .vc-dancer{ position:relative; display:flex; align-items:flex-end; gap:.3rem; height:64px; }
  .vc-hat{ font-size:42px; display:inline-block; animation:vc-bob 1s ease-in-out infinite; transform-origin:50% 80%; }
  .vc-boot-left, .vc-boot-right{
    font-size:34px; line-height:1; display:inline-block; transform-origin:50% 100%;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
  }
  .vc-boot-left{ animation:vc-tap-left .5s ease-in-out infinite alternate; }
  .vc-boot-right{ animation:vc-tap-right .5s ease-in-out .25s infinite alternate; }

  @keyframes vc-bob{
    0%,100%{ transform: translateY(0) rotate(0deg); }
    50%{ transform: translateY(-6px) rotate(-6deg); }
  }
  @keyframes vc-tap-left{
    0%{ transform: translateY(0) rotate(0deg); }
    100%{ transform: translateY(-6px) rotate(-8deg); }
  }
  @keyframes vc-tap-right{
    0%{ transform: translateY(0) rotate(0deg) scaleX(-1); }
    100%{ transform: translateY(-6px) rotate(8deg) scaleX(-1); }
  }

  /* Accesibilidad: reduce animaciones si el usuario lo prefiere */
  @media (prefers-reduced-motion: reduce){
    .vc-hat, .vc-boot-left, .vc-boot-right { animation: none; }
  }


/* Filtros */

@media (min-width: 768px){ .filtros-grid{ grid-template-columns: repeat(4,1fr); } }
.filtros-grid select {
  width:100%; 
  padding:.55rem .9rem; 
  border:1px solid #e5e7eb; 
  border-radius:10px; 
  background:#fff; 
  font-size:.95rem;
}



/* Filtros grid */
.filtros-grid{
  display:grid; gap:8px; grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px){
  .filtros-grid{ grid-template-columns: repeat(4,1fr); }
}



body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f8f8f8;
  color: #333;
}

header {
  background: #111;
  color: white;
  padding: 1em;
  text-align: center;
}

#filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 1em;
  background: #fff;
  justify-content: center;
}

#filtros select {
  padding: 5px;
  font-size: 1em;
}

#eventos {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.evento {
  background: white;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.vista-previa {
  display: flex;
  align-items: center;
  gap: 1em;
  cursor: pointer;
}

.vista-previa img.logo-evento {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.contenido-evento {
  display: none;
  margin-top: 1em;
}

.contenido-evento img {
  max-width: 100%;
  height: auto;
}

.contenido-evento.mostrar {
  display: block;
}

#calendar-view {
  margin: 1em;
}

tr:nth-child(even) {
    background-color: #F3E5F5;
}