/* Componentes de UI reusables entre páginas: tarjetas, countdown, galería, popup en vivo,
   panel admin con pestañas. Hoy los usa index; quedan aquí (no en css/pages/) porque son
   piezas de diseño genéricas que cualquier otra página podría reutilizar más adelante. */

/* Botón que activa/desactiva la interacción con el iframe del hero de Canva —
   ver js/canva-hero.js. */
.hero-canva-toggle {
    position: absolute; z-index: 20; bottom: 1rem; right: 1rem;
    background: rgba(0,0,0,0.6); color: white; font-size: 0.75rem; font-weight: 700;
    padding: 8px 14px; border-radius: 9999px; cursor: pointer; border: none;
    display: flex; align-items: center; gap: 6px; backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.hero-canva-toggle:hover { background: rgba(197,160,89,0.9); }

/* "Nuestras Sedes" (nosotros.php): cada sede se ve como un botón de reproducir —
   al hacer clic, un aro se expande y el botón pulsa (ver animarYNavegarSede en
   js/pages/nosotros.js) y, cuando termina esa animación, recién ahí navega a la
   página de la sede — no es un <a> normal con salto inmediato. */
.sede-play-card { display: flex; flex-direction: column; align-items: center; width: 8.5rem; text-decoration: none; cursor: pointer; }
.sede-play-btn {
    position: relative;
    width: 4.5rem; height: 4.5rem;
    border-radius: 9999px;
    background: #C5A059;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -6px rgba(197,160,89,0.55);
    transition: transform 0.25s ease, background 0.25s ease;
}
.sede-play-btn svg { margin-left: 3px; }
.sede-play-card:hover .sede-play-btn { transform: scale(1.08); background: #1a237e; }
.sede-play-btn.sede-play-pulsing { animation: sede-play-pulse 0.45s ease-out; }
.sede-play-btn.sede-play-pulsing::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 9999px;
    border: 3px solid #C5A059;
    animation: sede-play-ring 0.45s ease-out forwards;
}
@keyframes sede-play-pulse { 0% { transform: scale(1); } 45% { transform: scale(0.86); } 100% { transform: scale(1); } }
@keyframes sede-play-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }

.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.countdown-bg { background-color: #F5F2EB; }
.countdown-box { background: rgba(26, 35, 126, 0.05); border: 1px solid rgba(197, 160, 89, 0.4); backdrop-filter: blur(5px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

.gallery-container { display: flex; width: 300%; transition: transform 0.5s ease-in-out; }
.gallery-panel { width: 33.333%; padding: 10px; }
.gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background-color: #e5e7eb; position: relative; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.1); }

#lightbox-modal .lightbox-content { max-height: 90vh; max-width: 90vw; }

/* ===== AUTO-LIVE POPUP ===== */
#auto-live-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeInPopup 0.4s ease;
}
#auto-live-popup.show { display: flex; }
@keyframes fadeInPopup { from { opacity: 0; } to { opacity: 1; } }
#auto-live-popup-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(197,160,89,0.3), 0 0 0 1px rgba(197,160,89,0.2);
    transform: scale(0.95);
    animation: scaleInPopup 0.4s ease forwards;
}
@keyframes scaleInPopup { to { transform: scale(1); } }
#auto-live-popup-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
    z-index: 10;
}
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dc2626;
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}
.live-dot { width: 7px; height: 7px; background: white; border-radius: 50%; animation: blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
#auto-live-popup-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
#auto-live-popup-close:hover { background: #C5A059; }
#auto-live-popup-frame { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
#auto-live-popup-footer {
    padding: 0.75rem 1rem;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#auto-live-popup-title { color: #C5A059; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; }
#auto-live-popup-close-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
#auto-live-popup-close-btn:hover { border-color: #C5A059; color: #C5A059; }

/* Panel admin con pestañas (General / Eventos / EN VIVO) */
.admin-tab-btn { padding: 8px 16px; border-bottom: 2px solid transparent; color: #6b7280; transition: all 0.2s; white-space: nowrap; }
.admin-tab-btn.active { color: #1a237e; font-weight: 700; border-bottom-color: #1a237e; }
.admin-tab-btn:hover:not(.active) { color: #C5A059; }
.live-schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #bbf7d0;
}
.live-schedule-badge.inactive { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }

/* Calendario de eventos y editor de contenido enriquecido (contenteditable) —
   compartido por eventos, peticiones, popayan, cayambe, calima. */
.calendar-day { min-height: 120px; border: 1px solid #f3f4f6; background-color: white; padding: 0.5rem; transition: all 0.2s; position: relative; }
.calendar-day:hover { background-color: #fafafa; border-color: #C5A059; }
.calendar-day-header { font-weight: bold; color: #9ca3af; font-size: 0.8rem; margin-bottom: 0.5rem; }
.event-chip { background-color: #1a237e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; margin-top: 4px; display: block; border-left: 3px solid #C5A059; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; }
.event-chip:hover { transform: translateY(-2px); filter: brightness(1.1); }

.editor-toolbar button { padding: 4px 8px; margin-right: 2px; border-radius: 4px; border: 1px solid #ddd; background: #fff; cursor: pointer; }
.editor-toolbar button:hover { background: #f0f0f0; }
.editor-content { min-height: 200px; border: 1px solid #ccc; padding: 10px; border-radius: 4px; background: white; overflow-y: auto; }

#announcement-display ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
#announcement-display ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
#announcement-display p { margin-bottom: 0.5rem; }
#announcement-display strong { font-weight: bold; color: #1a237e; }

/* Enlaces Destacados: carrusel horizontal de tarjetas grandes (imagen + título
   superpuesto abajo), estilo tapekids.org/es. CSS propio en vez de utilidades de
   Tailwind porque varias (snap-x, flex-none, group-hover:scale-105, gradientes con
   opacidad) no están compiladas en tailwind-built.css (es un build estático, no
   JIT en vivo) — usarlas sin que existan en el CSS no tiene ningún efecto. */
/* justify-content: safe center -> centrado cuando las tarjetas no llenan el ancho
   (pocas tarjetas, como ahora), pero cae a alineación normal por la izquierda en vez
   de recortar nada si algún día hay suficientes para necesitar scroll. */
.ed-carousel { display: flex; justify-content: safe center; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.ed-carousel::-webkit-scrollbar { height: 8px; }
.ed-carousel::-webkit-scrollbar-thumb { background-color: #C5A059; border-radius: 4px; }
.ed-card {
    flex: 0 0 auto; width: 260px; height: 170px; border-radius: 14px; overflow: hidden;
    position: relative; scroll-snap-align: start; box-shadow: 0 8px 20px -6px rgba(26,35,126,0.25);
    text-decoration: none; display: block;
}
.ed-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.ed-card:hover img { transform: scale(1.06); }
.ed-card .ed-fallback-bg { width: 100%; height: 100%; background: linear-gradient(145deg, #1a237e, #C5A059); }
.ed-card .ed-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.05) 60%); }
.ed-card .ed-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; color: #fff; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.ed-card .ed-source { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); color: #e4cfa0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 99px; }
@media (max-width: 640px) { .ed-card { width: 220px; height: 150px; } }


/* Indicador "En vivo ahora" en el nav (desktop y móvil), enlaza a #bethlehem-radio
   en Inicio. Solo existía antes en la maqueta de vista previa — este es el real. */
.live-pill {
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    background: rgba(197, 160, 89, .14); border: 1px solid #C5A059;
    color: #1a237e; font-weight: 700; font-size: .82rem;
    padding: 6px 14px 6px 10px; border-radius: 99px; white-space: nowrap;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0786b; animation: live-pulse 1.6s infinite; flex: none; }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Reloj mundial (Colombia / Jeffersonville) — más espacio y tamaño que la versión
   inicial, que quedó muy apretada. CSS propio (no utilidades de Tailwind) porque
   necesita breakpoints concretos (p. ej. tamaño de letra en sm:) que no están
   compilados en tailwind-built.css. */
.reloj-section {
    padding: 44px 20px; display: flex; flex-wrap: wrap; justify-content: center;
    align-items: stretch; gap: 20px; max-width: 760px; margin: 0 auto;
}
/* flex: 0 1 auto (no max-width fijo) -> el cuadro se ajusta al ancho que pida el
   texto más el padding, en vez de un ancho fijo más angosto que la hora en letra
   grande — eso era lo que hacía que "08:30:28 P.M." se saliera del cuadro en
   pantallas de escritorio (se agrandaba la letra pero no el cuadro). */
.reloj-box { flex: 0 1 auto; padding: 22px 24px; border-radius: 18px; text-align: center; }
.reloj-time { font-size: 1.9rem; display: block; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reloj-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; display: block; margin-top: 8px; white-space: nowrap; }
@media (min-width: 640px) {
    .reloj-box { padding: 32px 40px; }
    .reloj-time { font-size: 2.5rem; }
    .reloj-label { font-size: .82rem; }
}

/* Enlaces Destacados + Compartir y Agendar lado a lado (una columna en móvil) —
   grid-cols-2 responsivo no está compilado en tailwind-built.css. */
.recomendado-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .recomendado-grid { grid-template-columns: 1fr 1fr; } }