/* ====================================
   CALENDAR.CSS - Estilos del Calendario
   Solo para páginas que usen calendario
   ==================================== */

/* Variables específicas del calendario usando la paleta de online.html */
:root {
    --cal-primary: #b66d4c;           /* Color primario de online.html */
    --cal-primary-light: #ee9c77;    /* Color primario claro */
    --cal-secondary: #a3ac99;         /* Verde sage */
    --cal-beige: #f9f1e7;             /* Fondo principal */
    --cal-beige-dark: #e8d5c0;       /* Beige oscuro */
    --cal-text: #4a3c31;             /* Texto principal */
    --cal-text-light: #7c6d63;       /* Texto secundario */
    --cal-white: #ffffff;
    --cal-border-radius: 8px;
    --cal-spacing-sm: 1rem;
    --cal-spacing-md: 2rem;
    --cal-transition: all 0.3s ease;
}

/* ====================================
   CONTENEDOR DEL CALENDARIO
   ==================================== */
.calendar-container {
    background-color: var(--cal-white);
    border-radius: var(--cal-border-radius);
    padding: var(--cal-spacing-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: var(--cal-spacing-md);
}

/* ====================================
   SUBSECCIONES DE EVENTOS
   ==================================== */
.eventos-especiales-section {
    margin-bottom: var(--cal-spacing-lg);
}

.calendario-regular-section {
    margin-top: var(--cal-spacing-lg);
}

.subsection-title {
    font-family: 'Dream Avenue', var(--font-primary);
    color: var(--cal-primary);
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: var(--cal-spacing-sm);
    text-align: center;
    position: relative;
}

.subsection-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--cal-primary);
    border-radius: 2px;
}

.calendario-descripcion {
    text-align: center;
    color: var(--cal-text-light);
    margin-bottom: var(--cal-spacing-md);
    font-style: italic;
}

/* ====================================
   TABLA DE EVENTOS ESPECIALES
   ==================================== */
.eventos-especiales-container {
    background-color: var(--cal-white);
    border-radius: var(--cal-border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: var(--cal-spacing-sm);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.eventos-especiales-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Caviar Dreams', sans-serif;
    background-color: var(--cal-white);
}

.eventos-especiales-table thead {
    background-color: var(--cal-primary);
    color: var(--cal-white);
}

.eventos-especiales-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--cal-primary-light);
}

.eventos-especiales-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--cal-beige-dark);
    font-size: 0.9rem;
    vertical-align: top;
}

.eventos-especiales-table tbody tr:hover {
    background-color: var(--cal-beige);
    transition: background-color 0.2s ease;
}

/* Filas de encabezado de país */
.country-header {
    background-color: var(--cal-beige-dark) !important;
}

.country-header:hover {
    background-color: var(--cal-beige-dark) !important;
}

.country-name {
    font-weight: bold !important;
    color: var(--cal-primary) !important;
    font-size: 1rem !important;
    padding: 15px 8px !important;
    text-align: center !important;
    border-bottom: 2px solid var(--cal-primary) !important;
}

/* Estilos específicos para columnas */
.location {
    font-weight: 600;
    color: var(--cal-text);
}

.activity {
    color: var(--cal-text);
    font-weight: 500;
}

.date {
    color: var(--cal-primary);
    font-weight: 600;
    white-space: nowrap;
}

.venue {
    color: var(--cal-text-light);
    font-size: 0.85rem;
}

.language {
    color: var(--cal-secondary);
    font-weight: 500;
    text-align: center;
}

.contact {
    text-align: center;
}

.contact a {
    color: var(--cal-primary);
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: var(--cal-transition);
    display: inline-block;
}

.contact a:hover {
    background-color: var(--cal-primary);
    color: var(--cal-white);
    transform: translateY(-1px);
}

/* ====================================
   FULLCALENDAR - PERSONALIZACIÓN
   ==================================== */

/* Contenedor principal */
#calendar {
    font-family: 'Caviar Dreams', 'Arial', sans-serif;
    color: var(--cal-text);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#calendar.loaded {
    opacity: 1;
}

/* Header del calendario */
.fc-header-toolbar {
    margin-bottom: var(--cal-spacing-sm) !important;
    padding: var(--cal-spacing-sm);
    background-color: var(--cal-beige);
    border-radius: var(--cal-border-radius);
}

/* Título del calendario */
.fc-toolbar-title {
    color: var(--cal-primary) !important;
    font-family: 'Dream Avenue', var(--font-primary) !important;
    font-size: 1.8rem !important;
    font-weight: bold !important;
    letter-spacing: 1px;
}

/* Botones del calendario */
.fc-button {
    background-color: var(--cal-primary) !important;
    border-color: var(--cal-primary) !important;
    color: var(--cal-white) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-family: 'Caviar Dreams', sans-serif !important;
    font-weight: bold !important;
    transition: var(--cal-transition) !important;
}

.fc-button:hover {
    background-color: var(--cal-primary-light) !important;
    border-color: var(--cal-primary-light) !important;
    transform: translateY(-1px) !important;
}

.fc-button:focus {
    box-shadow: 0 0 0 2px rgba(182, 109, 76, 0.3) !important;
}

.fc-button-active,
.fc-button-active:focus {
    background-color: var(--cal-secondary) !important;
    border-color: var(--cal-secondary) !important;
}

/* ====================================
   EVENTOS EN EL CALENDARIO
   ==================================== */

/* Estilos base para eventos */
.fc-event {
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: 'Caviar Dreams', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 2px 4px !important;
    transition: var(--cal-transition) !important;
}

.fc-event:hover {
    opacity: 0.9 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Texto de eventos */
.fc-event-title {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
}

.fc-event-time {
    font-size: 0.75rem !important;
    opacity: 0.9;
}

/* Clases específicas para tipos de eventos */
.evento-meditacion {
    background-color: #8B4513 !important;
}

.evento-bhante {
    background-color: #9370DB !important;
}

.evento-retiro {
    background-color: #FF8C00 !important;
}

/* ====================================
   CELDAS DEL CALENDARIO
   ==================================== */

/* Días del mes */
.fc-daygrid-day {
    background-color: var(--cal-white);
    border-color: var(--cal-beige-dark) !important;
    cursor: default !important;
}

.fc-daygrid-day:hover {
    background-color: var(--cal-beige) !important;
}

/* Números de los días */
.fc-daygrid-day-number {
    color: var(--cal-text) !important;
    font-weight: 500 !important;
    padding: 4px !important;
}

/* Día actual */
.fc-day-today {
    background-color: rgba(182, 109, 76, 0.1) !important;
}

.fc-day-today .fc-daygrid-day-number {
    background-color: var(--cal-primary) !important;
    color: var(--cal-white) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Días de la semana (header) */
.fc-col-header-cell {
    background-color: var(--cal-beige-dark) !important;
    border-color: var(--cal-beige-dark) !important;
    padding: 8px 4px !important;
}

.fc-col-header-text {
    color: var(--cal-text) !important;
    font-weight: bold !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ====================================
   MODAL PARA EVENTOS DEL CALENDARIO (CORREGIDO)
   ==================================== */

/* Overlay del modal - máxima prioridad */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Modal visible */
.modal-overlay.show {
    display: flex !important;
    animation: modalFadeIn 0.3s ease !important;
}

@keyframes modalFadeIn {
    from { 
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1;
        backdrop-filter: blur(2px);
    }
}

/* Contenido del modal */
.modal-content {
    background: white !important;
    border-radius: var(--cal-border-radius) !important;
    max-width: 600px !important;
    width: 100% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    animation: modalSlideIn 0.3s ease !important;
    font-family: 'Caviar Dreams', sans-serif !important;
    position: relative !important;
}

@keyframes modalSlideIn {
    from { 
        transform: scale(0.9) translateY(-20px);
        opacity: 0;
    }
    to { 
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Header del modal */
.modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 25px !important;
    border-bottom: 2px solid var(--cal-beige-dark) !important;
    background: linear-gradient(135deg, var(--cal-beige), var(--cal-beige-dark)) !important;
    margin: 0 !important;
}

.modal-header h2 {
    margin: 0 !important;
    color: var(--cal-primary) !important;
    font-family: 'Dream Avenue', serif !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Botón cerrar */
.modal-close {
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    color: var(--cal-text-light) !important;
    cursor: pointer !important;
    padding: 5px !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.modal-close:hover {
    background: var(--cal-primary) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

/* Cuerpo del modal */
.modal-body {
    padding: 25px !important;
    margin: 0 !important;
}

/* Detalles del evento */
.event-details {
    margin-bottom: 20px !important;
}

.detail-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
    padding: 8px 0 !important;
}

.detail-item.description {
    align-items: flex-start !important;
}

.detail-icon {
    font-size: 18px !important;
    width: 24px !important;
    flex-shrink: 0 !important;
    color: var(--cal-primary) !important;
    text-align: center !important;
}

.detail-label {
    font-weight: 700 !important;
    color: var(--cal-text) !important;
    min-width: 90px !important;
    flex-shrink: 0 !important;
    font-size: 0.95rem !important;
}

.detail-item span:last-child,
.detail-item p {
    color: var(--cal-text) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    flex: 1 !important;
}

.detail-item a {
    color: var(--cal-primary) !important;
    text-decoration: none !important;
    word-break: break-all !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.detail-item a:hover {
    text-decoration: underline !important;
    color: var(--cal-primary-light) !important;
}

/* Contenedor de imagen */
.event-image-container {
    text-align: center !important;
    margin-top: 20px !important;
    padding: 10px !important;
    background: var(--cal-beige) !important;
    border-radius: var(--cal-border-radius) !important;
}

.event-image-container img {
    max-width: 100% !important;
    max-height: 300px !important;
    border-radius: var(--cal-border-radius) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
}

.event-image-container img:hover {
    transform: scale(1.02) !important;
}

/* Forzar que el body no tenga scroll cuando el modal esté abierto */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* ====================================
   UTILIDADES
   ==================================== */

/* Selección deshabilitada para mejorar UX */
.fc {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ====================================
   RESPONSIVE DESIGN - CON SCROLL LATERAL
   ==================================== */

@media (max-width: 768px) {
    .calendar-container {
        padding: var(--cal-spacing-sm);
        margin-top: var(--cal-spacing-sm);
    }

    /* Header más compacto en móvil */
    .fc-header-toolbar {
        flex-direction: column !important;
        gap: 10px;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    /* Botones más pequeños */
    .fc-button {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Título más pequeño */
    .fc-toolbar-title {
        font-size: 1.4rem !important;
    }

    /* Eventos más compactos */
    .fc-event {
        font-size: 0.75rem !important;
        padding: 1px 3px !important;
    }

    .fc-event-title {
        font-size: 0.7rem !important;
    }

    /* TABLA RESPONSIVE CON SCROLL LATERAL OPTIMIZADA */
    .subsection-title {
        font-size: 1.3rem;
    }

    /* Contenedor de tabla mejorado para scroll lateral */
    .table-responsive {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        position: relative;
        /* Sombras sutiles para indicar scroll */
        background: 
            linear-gradient(90deg, rgba(182, 109, 76, 0.1) 0%, transparent 10%),
            linear-gradient(270deg, rgba(182, 109, 76, 0.1) 0%, transparent 10%);
        background-attachment: local, local;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%;
        background-position: left, right;
        border-radius: var(--cal-border-radius);
    }

    /* Tabla con ancho mínimo para mantener todas las columnas */
    .eventos-especiales-table {
        min-width: 750px; /* Ancho mínimo para mostrar todas las columnas cómodamente */
        font-size: 0.75rem;
        white-space: normal  /* Permitir saltos de línea en celdas */
    }

    /* Ajustar padding de celdas para compactar */
    .eventos-especiales-table th,
    .eventos-especiales-table td {
        padding: 8px 6px;
        min-width: 60px;
    }

    /* Columnas específicas con anchos optimizados */
    .eventos-especiales-table th:nth-child(1),
    .eventos-especiales-table td:nth-child(1) {
        min-width: 85px; /* País/Ciudad */
        max-width: 110px;
    }

    .eventos-especiales-table th:nth-child(2),
    .eventos-especiales-table td:nth-child(2) {
        min-width: 130px; /* Actividad */
        max-width: 160px;
    }

    .eventos-especiales-table th:nth-child(3),
    .eventos-especiales-table td:nth-child(3) {
        min-width: 85px; /* Fecha */
        max-width: 100px;
    }

    .eventos-especiales-table th:nth-child(4),
    .eventos-especiales-table td:nth-child(4) {
        min-width: 100px; /* Lugar */
        max-width: 130px;
    }

    .eventos-especiales-table th:nth-child(5),
    .eventos-especiales-table td:nth-child(5) {
        min-width: 65px; /* Idioma */
        max-width: 80px;
    }

    .eventos-especiales-table th:nth-child(6),
    .eventos-especiales-table td:nth-child(6) {
        min-width: 75px; /* Contacto */
        max-width: 100px;
    }

    /* Headers de tabla más compactos */
    .eventos-especiales-table th {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        padding: 8px 6px;
    }

    /* Filas de países más compactas */
    .country-name {
        font-size: 0.8rem !important;
        padding: 10px 6px !important;
        font-weight: 700 !important;
    }

    /* Ajustar estilos de texto para mejor legibilidad en móvil */
    .location {
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .activity {
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .date {
        font-size: 0.75rem;
        font-weight: 600;
    }

    .venue {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .language {
        font-size: 0.75rem;
        font-weight: 500;
    }

    /* Enlaces de contacto más compactos pero legibles */
    .contact a {
        font-size: 0.7rem;
        padding: 3px 6px;
        border-radius: 3px;
    }

    /* Indicador visual de scroll */
    .table-responsive::after {
        content: '← Desliza para ver más →';
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        color: var(--cal-text-light);
        font-style: italic;
        opacity: 0.8;
        pointer-events: none;
        background: var(--cal-beige);
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* Modal responsive mejorado */
    .modal-overlay {
        padding: 10px !important;
    }
    
    .modal-content {
        max-height: 90vh !important;
        border-radius: 6px !important;
    }
    
    .modal-header {
        padding: 15px 20px !important;
    }
    
    .modal-header h2 {
        font-size: 1.3rem !important;
    }
    
    .modal-body {
        padding: 20px !important;
    }
    
    .detail-label {
        min-width: 70px !important;
        font-size: 0.9rem !important;
    }
    
    .detail-icon {
        font-size: 16px !important;
        width: 20px !important;
    }
    
    .event-image-container img {
        max-height: 200px !important;
    }
}

@media (max-width: 480px) {
    /* Para móviles muy pequeños, mantener todas las columnas pero más compactas */
    .eventos-especiales-table {
        min-width: 550px; /* Reducir ancho mínimo para pantallas muy pequeñas */
        font-size: 0.7rem;
    }

    .eventos-especiales-table th,
    .eventos-especiales-table td {
        padding: 6px 4px;
    }

    /* Ajustar anchos mínimos para pantallas muy pequeñas */
    .eventos-especiales-table th:nth-child(1),
    .eventos-especiales-table td:nth-child(1) {
        min-width: 75px;
        max-width: 90px;
    }

    .eventos-especiales-table th:nth-child(2),
    .eventos-especiales-table td:nth-child(2) {
        min-width: 120px;
        max-width: 140px;
    }

    .eventos-especiales-table th:nth-child(3),
    .eventos-especiales-table td:nth-child(3) {
        min-width: 75px;
        max-width: 90px;
    }

    .eventos-especiales-table th:nth-child(4),
    .eventos-especiales-table td:nth-child(4) {
        min-width: 90px;
        max-width: 110px;
    }

    .eventos-especiales-table th:nth-child(5),
    .eventos-especiales-table td:nth-child(5) {
        min-width: 55px;
        max-width: 70px;
    }

    .eventos-especiales-table th:nth-child(6),
    .eventos-especiales-table td:nth-child(6) {
        min-width: 65px;
        max-width: 80px;
    }

    /* Headers aún más compactos */
    .eventos-especiales-table th {
        font-size: 0.65rem;
        padding: 6px 4px;
    }

    /* Título de subsección más pequeño */
    .subsection-title {
        font-size: 1.2rem;
    }

    .subsection-title::after {
        width: 40px;
        height: 2px;
    }

    /* Filas de países muy compactas */
    .country-name {
        font-size: 0.75rem !important;
        padding: 8px 4px !important;
    }

    /* Ajustar el mensaje de scroll para pantallas pequeñas */
    .table-responsive::after {
        content: '← Desliza →';
        font-size: 0.7rem;
        bottom: -25px;
        padding: 3px 6px;
    }

    /* Modal muy compacto para móviles pequeños */
    .modal-overlay {
        padding: 5px !important;
    }
    
    .modal-content {
        border-radius: 4px !important;
    }
    
    .modal-header {
        padding: 12px 15px !important;
    }
    
    .modal-header h2 {
        font-size: 1.2rem !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    .detail-item {
        flex-direction: column !important;
        gap: 5px !important;
        margin-bottom: 12px !important;
    }
    
    .detail-icon {
        display: none !important;
    }
    
    .detail-label {
        min-width: auto !important;
        font-weight: 700 !important;
        margin-bottom: 3px !important;
    }

    /* Calendario muy compacto */
    .fc-daygrid-day-number {
        font-size: 0.8rem !important;
    }
    
    .fc-col-header-text {
        font-size: 0.75rem !important;
    }

    /* Header reorganizado para móviles pequeños */
    .fc-header-toolbar .fc-toolbar-chunk:last-child {
        order: -1;
    }
}
/* ──────────────────────────────────
   MOBILE: Tabla a cards stacked (>= 480px sigue tabla, <480 stack)
   En vez de scroll horizontal que el usuario no nota, cada fila se
   convierte en una "card" vertical con label/valor por celda.
   ──────────────────────────────────*/
@media (max-width: 500px) {
  /* Override del scroll para evitar confusion */
  .table-responsive {
    overflow: visible;
    background: none;
  }
  /* Tabla colapsada a cards */
  .eventos-especiales-table,
  .eventos-especiales-table thead,
  .eventos-especiales-table tbody,
  .eventos-especiales-table th,
  .eventos-especiales-table tr,
  .eventos-especiales-table td {
    display: block;
    min-width: 0 !important;
    max-width: none !important;
  }
  .eventos-especiales-table {
    min-width: 0 !important;
    border-collapse: separate;
  }
  /* Ocultar thead (los labels van inline via data-label) */
  .eventos-especiales-table thead {
    display: none;
  }
  /* Country headers siguen como banda full-width */
  .country-header td {
    text-align: center;
    font-weight: bold;
    padding: 10px !important;
    margin: 12px 0 0 !important;
    background-color: var(--cal-beige-dark) !important;
    border-radius: 6px;
  }
  /* Cada fila normal = card */
  .eventos-especiales-table tbody tr:not(.country-header) {
    background: var(--cal-white);
    border: 1px solid var(--cal-beige-dark);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  /* Celdas: label antes del valor */
  .eventos-especiales-table tbody tr:not(.country-header) td {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(74,60,49,0.08);
    font-size: 0.85rem;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .eventos-especiales-table tbody tr:not(.country-header) td:last-child {
    border-bottom: none;
  }
  /* Label injectado via attr */
  .eventos-especiales-table tbody tr:not(.country-header) td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--cal-text-light, #7c6d63);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 80px;
  }
}

/* ──────────────────────────────────
   Bhante card: ajustar focal point en TODOS los breakpoints.
   La cara del Ven. esta en ~70% horizontal y ~30% vertical de
   bhante-meditando.jpg (imagen landscape 2387x1559). Con background-size:
   cover + cualquier card aspect ratio, esta posicion deja la cara
   visible y centrada en el viewport visible del crop.
   ──────────────────────────────────*/
.bhante-bg {
  background-position: 70% 30% !important;
}
@media (max-width: 767px) {
  .bhante-card {
    min-height: 320px !important;
  }
}

/* ============================================================
   Meditaciones guiadas entre semana (activities.html#meditaciones-semana)
   Movido desde online.html el 2026-05-29
   ============================================================ */
.meditaciones-semana-section {
    background-color: var(--color-beige);
    scroll-margin-top: 90px;
}

.meditaciones-semana-section .section-title {
    text-align: center;
    color: var(--color-primary);
    font-family: 'Dream Avenue', var(--font-primary);
    font-weight: normal;
    letter-spacing: 1.5px;
    margin-bottom: 0.75rem;
}

.meditaciones-semana-sub {
    text-align: center;
    color: var(--color-text-light);
    max-width: 720px;
    margin: 0 auto 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.meditaciones-semana-zoom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-beige-dark);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    max-width: 640px;
    margin: 0 auto 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.meditaciones-semana-zoom-detail {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.meditaciones-semana-zoom-label {
    color: var(--color-text-light);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.meditaciones-semana-zoom-value {
    color: var(--color-text);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    user-select: all;
}

.meditaciones-semana-zoom-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.65rem 1.25rem;
    border-radius: 30px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.meditaciones-semana-zoom-btn:hover,
.meditaciones-semana-zoom-btn:focus-visible {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
    outline: none;
}

.meditaciones-semana-table-wrap {
    max-width: 820px;
    margin: 0 auto;
    overflow-x: auto;
}

.meditaciones-semana-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.meditaciones-semana-table thead {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.meditaciones-semana-table th,
.meditaciones-semana-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-beige);
    vertical-align: top;
}

.meditaciones-semana-table th {
    font-family: var(--font-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.meditaciones-semana-table tbody tr:last-child td {
    border-bottom: none;
}

.meditaciones-semana-table tbody tr:hover {
    background-color: var(--color-beige);
}

.meditaciones-semana-table td:first-child {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

.meditaciones-semana-table td:nth-child(3) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Fila completa clickeable (tap target grande, pensado para personas mayores) */
.meditaciones-semana-table tbody tr.is-clickable {
    cursor: pointer;
}

/* Botón "Unirse" por sesión → enlace directo a Zoom, sin ID ni contraseña */
.meditaciones-semana-join-cell {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

.meditaciones-semana-join {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.45rem 0.95rem;
    border-radius: 30px;
    font-family: var(--font-primary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.meditaciones-semana-join:hover,
.meditaciones-semana-join:focus-visible {
    background-color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    outline: none;
}

.meditaciones-semana-note {
    color: var(--color-text-light);
    font-size: 0.85rem;
    font-style: italic;
    display: block;
    margin-top: 0.15rem;
}

.meditaciones-semana-cta {
    text-align: center;
    margin: 1.5rem auto 0;
    color: var(--color-text-light);
    font-size: 0.95rem;
    max-width: 640px;
}

.meditaciones-semana-cta a {
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .meditaciones-semana-zoom {
        gap: 1rem;
        padding: 1rem;
    }

    /* Tabla → cards stacked en mobile (mismo patron que eventos-especiales) */
    .meditaciones-semana-table thead {
        display: none;
    }
    .meditaciones-semana-table,
    .meditaciones-semana-table tbody,
    .meditaciones-semana-table tr,
    .meditaciones-semana-table td {
        display: block;
        width: 100%;
    }
    .meditaciones-semana-table tr {
        background-color: var(--color-white);
        border-radius: 12px;
        border: 1px solid var(--color-beige-dark);
        margin-bottom: 0.75rem;
        padding: 0.75rem 1rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .meditaciones-semana-table {
        box-shadow: none;
        background: transparent;
    }
    .meditaciones-semana-table td {
        border: none;
        padding: 0.35rem 0;
        white-space: normal;
    }
    .meditaciones-semana-table td::before {
        content: attr(data-label) ": ";
        color: var(--color-text-light);
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 0.35rem;
    }
    .meditaciones-semana-table td:first-child {
        font-size: 1.1rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--color-beige);
        margin-bottom: 0.35rem;
        white-space: normal;
    }
    .meditaciones-semana-table td:first-child::before {
        display: none;
    }
    /* Botón "Unirse" centrado y a ancho completo en la card mobile */
    .meditaciones-semana-table td.meditaciones-semana-join-cell {
        text-align: center;
        padding-top: 0.65rem;
        margin-top: 0.35rem;
        border-top: 1px solid var(--color-beige);
    }
    .meditaciones-semana-table td.meditaciones-semana-join-cell::before {
        display: none;
    }
    .meditaciones-semana-join {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }
}

/* ============================================================
   Visitas presenciales al monasterio (activities.html#visitar)
   <details> colapsable, cerrado por default. Va despues del FAQ
   como nota discreta al pie (no promovida). Pedido Bhante 2-jun.
   ============================================================ */
.visita-presencial-section {
    background-color: var(--color-beige-dark);
    padding: var(--spacing-sm) 0;
    scroll-margin-top: 90px;
}

.visita-details {
    background-color: transparent;
    border-radius: 8px;
    border: 1px dashed rgba(74, 60, 49, 0.2);
    max-width: 560px;
    margin: 0 auto;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.visita-details[open] {
    background-color: var(--color-white);
    border-style: solid;
    border-color: var(--color-beige-dark);
}

.visita-summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

.visita-summary::-webkit-details-marker {
    display: none;
}

.visita-summary:hover,
.visita-summary:focus-visible {
    background-color: rgba(255, 255, 255, 0.4);
    outline: none;
}

.visita-summary-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.visita-summary-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}

.visita-summary-title {
    font-family: var(--font-secondary);
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
}

.visita-summary-hint {
    color: var(--color-text-light);
    font-size: 0.78rem;
    font-style: italic;
}

.visita-summary-chevron {
    color: var(--color-primary);
    font-size: 1rem;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.visita-details[open] .visita-summary-chevron {
    transform: rotate(180deg);
}

.visita-details-body {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--color-beige);
    padding-top: 1.25rem;
}

.visita-card-lead {
    font-family: var(--font-primary);
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.visita-card-text {
    color: var(--color-text);
    margin: 0 0 0.5rem;
    font-weight: 500;
}

.visita-card-list {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
    color: var(--color-text);
    line-height: 1.6;
}

.visita-card-list li {
    margin-bottom: 0.4rem;
}

.visita-card-nota {
    background-color: var(--color-beige);
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-light);
    font-size: 0.92rem;
    font-style: italic;
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    margin: 0 0 1.25rem;
}

.btn-visita {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-family: var(--font-primary);
    font-size: 0.98rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-visita:hover,
.btn-visita:focus-visible {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    outline: none;
    color: var(--color-white);
}

@media (max-width: 500px) {
    .visita-summary-title {
        font-size: 1.1rem;
    }
    .visita-summary {
        padding: 1rem 1rem;
        gap: 0.75rem;
    }
    .visita-summary-icon {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }
}

/* ============================================================
   activities.html — ritmo visual de secciones
   Diseño 2026-05-30: alternancia de fondos (white / beige / beige-dark)
   + divisor decorativo central con loto/circulo en cada section-title
   para separar visualmente sin saturar.
   ============================================================ */

/* Alternancia de fondos: el hero (Bhante) ya tiene su imagen; el resto
   alterna crema → blanco → crema → beige-cálido → blanco. */
.encuentro-bhante-destacado {
    background-color: var(--color-beige);
    padding-top: var(--spacing-md);
}

.meditaciones-semana-section {
    background-color: var(--color-white);
}

.eventos-especiales-section {
    background-color: var(--color-beige);
}

.calendario-section {
    background-color: var(--color-white);
}

.visita-presencial-section {
    background-color: var(--color-beige-dark);
}

.faq.faq--activities {
    background-color: var(--color-white);
    padding: var(--spacing-lg) 0;
}

/* Section titles sin decorador (pedido Grego: alcanza con el cambio de fondo).
   Solo aseguramos centrado y margen consistente. */
.meditaciones-semana-section .section-title,
.eventos-especiales-section .section-title,
.calendario-section .section-title,
.faq.faq--activities .section-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Spacing entre secciones: aire generoso para el ritmo visual */
.meditaciones-semana-section,
.eventos-especiales-section,
.calendario-section,
.visita-presencial-section,
.faq.faq--activities {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}


/* En mobile, reducir el espaciado vertical para no sobrecargar */
@media (max-width: 600px) {
    .meditaciones-semana-section,
    .eventos-especiales-section,
    .calendario-section,
    .visita-presencial-section,
    .faq.faq--activities {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
}

/* ============================================================
   LUNAR DHAMMA GATHERINGS — horarios por zona (solo /en/)
   La sesion es la misma para todos, pero el publico esta repartido
   entre Mexico, las dos costas de EEUU y Singapur. Mostrar solo una
   hora obligaba a cada quien a hacer la cuenta.
   ============================================================ */
.lunar-horarios {
  max-width: 900px;
  margin: 1.75rem auto 0;
  text-align: center;
}
.lunar-horarios-title {
  font-family: 'Dream Avenue', var(--font-primary, serif);
  color: var(--color-primary);
  font-size: 1.35rem;
  margin: 0 0 1rem;
}
.lunar-horarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.lunar-horario {
  background: var(--color-white);
  border: 1px solid var(--color-beige-dark);
  border-radius: 10px;
  padding: 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lunar-horario-zona {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.lunar-horario-hora {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
}
.lunar-horario-tz {
  font-size: 0.75rem;
  color: var(--color-text-light);
}
.lunar-horarios-nota {
  margin: 1rem auto 0;
  max-width: 720px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-light);
}

/* ============================================================
   PUENTE AL SITIO EN ESPANOL (solo /en/)
   ============================================================ */
.es-bridge-card {
  max-width: 900px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-beige-dark);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.es-bridge-text h2 {
  font-family: 'Dream Avenue', var(--font-primary, serif);
  color: var(--color-primary);
  font-size: 1.45rem;
  margin: 0 0 0.5rem;
}
.es-bridge-text p {
  margin: 0;
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 52ch;
}
.es-bridge-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.es-bridge-btn:hover {
  background: var(--color-primary-dark, #96573b);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .es-bridge-card { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
  .es-bridge-btn { width: 100%; justify-content: center; }
}

/* Aviso de zona horaria sobre el calendario. Solo aparece si el visitante
   NO esta en hora de Mexico (si esta, el aviso no aporta nada). */
.calendar-tz[hidden] { display: none; }
.calendar-tz {
  margin: 0 auto 1rem;
  max-width: 760px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-light);
  background: var(--color-white);
  border: 1px solid var(--color-beige-dark);
  border-radius: 10px;
  padding: 0.7rem 1rem;
}

/* Ribbon "Coming soon" sobre la tarjeta de las Lunar Gatherings.
   Las fechas todavia no las confirma Bhante, asi que la seccion se muestra
   pero avisando que aun no arranca. Se quita borrando el <span> del HTML.
   aria-hidden en el span: el texto ya se explica en la seccion, y leerlo
   sueltoy rotado no aporta a un lector de pantalla. */
.coming-soon-ribbon {
    position: absolute;
    top: 52px;
    right: -74px;
    z-index: 3;
    width: 290px;
    transform: rotate(45deg);
    /* Dorado, no terracota: en terracota se confundia con la marca y pasaba
       desapercibido justo sobre una foto calida. */
    background: linear-gradient(180deg, #e0ab2b 0%, #c8901a 100%);
    color: #3d2c07;
    font-weight: 700;
    text-align: center;
    padding: 12px 0;
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
    pointer-events: none;
}

@media (max-width: 600px) {
    .coming-soon-ribbon {
        top: 34px;
        right: -66px;
        width: 230px;
        font-size: 0.85rem;
        padding: 9px 0;
        letter-spacing: 0.12em;
    }
}

/* Fila de un evento que todavia no esta confirmado. Se muestra igual porque
   la gente planea con meses de anticipacion, pero se distingue del resto para
   que nadie compre un tiquete creyendo que ya esta cerrado. */
.eventos-especiales-table tr.evento-tentativo {
    background-color: rgba(224, 171, 43, 0.10);
}
.evento-estado {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #e0ab2b;
    color: #3d2c07;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}