/* ═══════════════════════════════════════════════════════════════════
   Estilos del módulo Calendario.
   Cubre dos planos:
     - Gestión interna: lista paginada, vista calendario, form.
       Prefijo `.cal-*`.
     - Portal público: bloque calendario_eventos en sus dos variantes
       (lista de cards y FullCalendar). Prefijo `.portal-calendario*`.
   Usa siempre variables --c-* para respetar el branding del tenant.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Gestión: header de página ──────────────────────────────────── */
.cal-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.cal-page-title {
    margin: 0;
    color: var(--c-text-strong);
    font-weight: 700;
}
.cal-page-subtitle {
    margin: .25rem 0 0;
    color: var(--c-muted);
    font-size: .9rem;
}

/* ── Gestión: filtros ───────────────────────────────────────────── */
.cal-filtros-card {
    margin-bottom: 1rem;
    border: 1px solid var(--c-border-light);
}

/* ── Gestión: form de evento ────────────────────────────────────── */
.cal-form-card {
    margin-bottom: 1rem;
    border: 1px solid var(--c-border-light);
}
.cal-form-card-header {
    padding: .75rem 1rem;
    background: var(--c-bg-subtle);
    border-bottom: 1px solid var(--c-border-light);
}
.cal-form-card-header h6 {
    margin: 0;
    color: var(--c-text-strong);
    font-weight: 700;
}
.cal-form-card-body {
    padding: 1rem;
}

/* ── Gestión: lista (items sueltos, no tabla) ───────────────────── */
.cal-lista {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
}
.cal-evento-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-left: 4px solid var(--c-primary);
    border-radius: 10px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.cal-evento-item:hover {
    box-shadow: 0 .35rem .9rem rgba(0,0,0,.06);
}
.cal-evento-fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-lighter);
    border-radius: 8px;
    padding: .5rem .25rem;
    text-align: center;
    line-height: 1;
}
.cal-evento-dia {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--c-primary);
}
.cal-evento-mes {
    font-size: .72rem;
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: .08em;
    margin-top: .15rem;
}
.cal-evento-anio {
    font-size: .68rem;
    color: var(--c-muted);
    margin-top: .15rem;
}
.cal-evento-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.cal-evento-titulo {
    margin: 0;
    color: var(--c-text-strong);
    font-weight: 700;
    font-size: 1.05rem;
}
.cal-evento-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    font-size: .82rem;
}
.cal-evento-meta-item {
    color: var(--c-muted);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.cal-evento-meta-item i {
    color: var(--c-primary);
}
.cal-evento-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-bg);
    font-size: .72rem;
    font-weight: 600;
}
/* Variante borrador: amarillo institucional para diferenciarlo del de
   "día completo" — el operador tiene que ver de un vistazo qué eventos
   todavía no salieron al público. */
.cal-evento-badge--borrador {
    background: var(--c-warning, #f0ad4e);
    color: var(--c-text, #212529);
}
.cal-evento-descripcion {
    color: var(--c-text-soft);
    font-size: .88rem;
    line-height: 1.45;
}
.cal-evento-acciones {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ── Gestión: paginación ────────────────────────────────────────── */
.cal-paginacion {
    margin-top: 1.25rem;
}

/* ── Gestión: estado vacío ──────────────────────────────────────── */
.cal-vacio {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--c-bg-subtle);
    border: 1px dashed var(--c-border-light);
    border-radius: 10px;
    margin-top: 1rem;
}
.cal-vacio i {
    font-size: 3rem;
    color: var(--c-muted);
    display: block;
    margin-bottom: .5rem;
}

/* ── Gestión: picker de mapa del form de evento ─────────────────── */
.cal-map-picker {
    height: 320px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    margin-top: .25rem;
}
.cal-map-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}
.cal-map-btn {
    border-radius: 6px;
    font-size: .82rem;
    padding: 4px 12px;
}
.cal-map-btn--primary-outline {
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    background: transparent;
}
.cal-map-btn--danger-outline {
    border: 1px solid var(--c-danger, #dc3545);
    color: var(--c-danger, #dc3545);
    background: transparent;
}
.cal-coord-display {
    font-size: .85rem;
    color: var(--c-muted);
    margin-bottom: .5rem;
}
.cal-geocode-status {
    font-size: .75rem;
    color: var(--c-muted);
    min-height: 1em;
    margin-top: .25rem;
}

/* ── Gestión: campo "imagen promocional" del form de evento ─────── */
.cal-banner-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.cal-banner-preview {
    flex: 0 0 auto;
    width: 140px;
    height: 90px;
    border: 1px solid var(--c-border-light);
    border-radius: 6px;
    background: var(--c-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--c-muted);
    font-size: 1.5rem;
}
.cal-banner-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cal-banner-preview[data-vacio="1"] {
    border-style: dashed;
}
.cal-banner-fields {
    flex: 1 1 280px;
    min-width: 0;
}


/* ── Gestión: wrapper de FullCalendar ───────────────────────────── */
.cal-fullcalendar-wrapper {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

/* Adaptaciones del look default de FullCalendar al theme del tenant.
   FullCalendar usa variables propias `--fc-*` que sobreescribimos. */
.cal-fullcalendar-wrapper {
    --fc-border-color: var(--c-border-light);
    --fc-button-bg-color: var(--c-primary);
    --fc-button-border-color: var(--c-primary);
    --fc-button-hover-bg-color: var(--c-primary-dark, var(--c-primary));
    --fc-button-hover-border-color: var(--c-primary-dark, var(--c-primary));
    --fc-button-active-bg-color: var(--c-primary-dark, var(--c-primary));
    --fc-button-active-border-color: var(--c-primary-dark, var(--c-primary));
    --fc-today-bg-color: var(--c-primary-lighter);
    --fc-event-bg-color: var(--c-primary);
    --fc-event-border-color: var(--c-primary);
    --fc-event-text-color: var(--c-bg);
}

@media (max-width: 720px) {
    .cal-evento-item {
        grid-template-columns: 70px 1fr;
        grid-template-rows: auto auto;
    }
    .cal-evento-acciones {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Portal público: bloque `calendario_eventos`
   ═══════════════════════════════════════════════════════════════════ */

.portal-calendario {
    margin: 1.5rem 0;
}
.portal-calendario-header {
    margin-bottom: 1rem;
}
.portal-calendario-titulo {
    color: var(--c-primary);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

/* ── Variante: lista de cards ───────────────────────────────────── */
.portal-calendario-lista {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.portal-calendario-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.25rem;
    align-items: stretch;
    padding: 1rem 1.25rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-left: 5px solid var(--c-primary);
    border-radius: 10px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.portal-calendario-card:hover {
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.07);
    transform: translateY(-1px);
}
.portal-calendario-card-fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-lighter);
    border-radius: 8px;
    padding: .65rem .25rem;
    text-align: center;
    line-height: 1;
}
.portal-calendario-card-dia {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-primary);
}
.portal-calendario-card-mes {
    font-size: .78rem;
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: .08em;
    margin-top: .25rem;
}
.portal-calendario-card-anio {
    font-size: .72rem;
    color: var(--c-muted);
    margin-top: .15rem;
}
.portal-calendario-card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.portal-calendario-card-titulo {
    margin: 0;
    color: var(--c-text-strong);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
.portal-calendario-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    font-size: .85rem;
}
.portal-calendario-card-meta-item {
    color: var(--c-muted);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.portal-calendario-card-meta-item i {
    color: var(--c-primary);
}
.portal-calendario-card-descripcion {
    color: var(--c-text-soft);
    font-size: .92rem;
    line-height: 1.5;
}
.portal-calendario-card-cta {
    margin-top: .35rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    background: var(--c-primary);
    color: var(--c-bg);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s ease, transform .15s ease;
}
.portal-calendario-card-cta:hover {
    opacity: .92;
    transform: translateY(-1px);
    color: var(--c-bg);
    text-decoration: none;
}

/* ── Variante: calendario FullCalendar embebido ──────────────────── */
.portal-calendario--calendario .portal-calendario-fc {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 10px;
    padding: 1rem;

    --fc-border-color: var(--c-border-light);
    --fc-button-bg-color: var(--c-primary);
    --fc-button-border-color: var(--c-primary);
    --fc-button-hover-bg-color: var(--c-primary-dark, var(--c-primary));
    --fc-button-hover-border-color: var(--c-primary-dark, var(--c-primary));
    --fc-button-active-bg-color: var(--c-primary-dark, var(--c-primary));
    --fc-button-active-border-color: var(--c-primary-dark, var(--c-primary));
    --fc-today-bg-color: var(--c-primary-lighter);
    --fc-event-bg-color: var(--c-primary);
    --fc-event-border-color: var(--c-primary);
    --fc-event-text-color: var(--c-bg);
}

/* ── Estado vacío en el portal ──────────────────────────────────── */
.portal-calendario-vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--c-bg-subtle);
    border: 1px dashed var(--c-border-light);
    border-radius: 10px;
    color: var(--c-muted);
}
.portal-calendario-vacio i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .5rem;
    color: var(--c-muted);
}
.portal-calendario-vacio p {
    margin: 0;
}

/* Estado vacío DENTRO del FullCalendar (cuando una vista de lista no
   tiene eventos en su rango). En vez del "no events" pelado, ofrecemos
   el próximo evento futuro como atajo para que el visitante no se vaya
   pensando que la agenda está vacía. */
.portal-calendario-empty {
    text-align: center;
    padding: 1.75rem 1rem;
    color: var(--c-text-soft);
}
.portal-calendario-empty-titulo {
    margin: 0 0 .35rem;
    font-size: .95rem;
    color: var(--c-muted);
}
.portal-calendario-empty-detalle {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--c-text-strong);
}
.portal-calendario-empty-detalle strong {
    color: var(--c-primary);
}
.portal-calendario-empty-btn {
    background: var(--c-primary);
    color: var(--c-bg);
    border: 0;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: opacity .15s ease, transform .15s ease;
}
.portal-calendario-empty-btn:hover,
.portal-calendario-empty-btn:focus-visible {
    opacity: .92;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 575.98px) {
    .portal-calendario-card {
        grid-template-columns: 72px 1fr;
        gap: .9rem;
        padding: .85rem 1rem;
    }
    .portal-calendario-card-dia { font-size: 1.6rem; }
    .portal-calendario-card-titulo { font-size: 1.05rem; }
}

/* Word-wrap defensivo para campos con input libre del operador (titulos
   largos, URLs pegadas, ubicaciones sin espacios). Sin esto, una palabra
   muy larga rompe el ancho de la card en mobile chico (~390px). */
.portal-calendario-card-titulo,
.portal-calendario-card-descripcion,
.portal-calendario-card-meta-item,
.portal-calendario-empty-detalle {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* FullCalendar puede rendear grillas (dayGridMonth, timeGridWeek) mas
   anchas que el viewport en mobile cuando el visitante fuerza esas
   vistas desde el toolbar. Permitimos scroll horizontal interno antes
   de que desborde toda la pagina. */
.portal-calendario--calendario .portal-calendario-fc {
    overflow-x: auto;
    min-width: 0;
}

/* ── Cards clickeables (toda la card abre el modal) ──────────────── */
.portal-calendario-card[data-cal-modal-trigger] {
    cursor: pointer;
}
.portal-calendario-card[data-cal-modal-trigger]:focus-visible {
    outline: 3px solid var(--portal-c-acento-solid, var(--c-primary));
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   Modal de detalle de evento — compartido entre la vista lista y la
   vista calendario del bloque público. Lo levanta el JS al hacer click
   sobre cualquier card o evento del FullCalendar.
   ═══════════════════════════════════════════════════════════════════ */
.portal-evento-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.portal-evento-modal[hidden] { display: none; }

.portal-evento-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}

.portal-evento-modal-dialog {
    position: relative;
    z-index: 1;
    background: var(--c-bg-card);
    color: var(--c-text-strong);
    border-radius: 14px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
}

.portal-evento-modal-close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 2;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--c-border-light);
    color: var(--c-text-strong);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background .12s ease, transform .12s ease;
}
.portal-evento-modal-close:hover,
.portal-evento-modal-close:focus-visible {
    background: var(--c-bg);
    transform: scale(1.06);
    outline: none;
}

.portal-evento-modal-imagen {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    display: block;
    background: var(--c-bg-subtle);
    border-radius: 14px 14px 0 0;
}
.portal-evento-modal-imagen[hidden] { display: none; }

.portal-evento-modal-cuerpo {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.portal-evento-modal-titulo {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-text-strong);
}

.portal-evento-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    font-size: .9rem;
    color: var(--c-muted);
}
.portal-evento-modal-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.portal-evento-modal-meta-item i {
    color: var(--c-primary);
}

.portal-evento-modal-descripcion {
    color: var(--c-text-soft);
    font-size: .95rem;
    line-height: 1.55;
}
.portal-evento-modal-descripcion[hidden] { display: none; }
.portal-evento-modal-descripcion p:last-child { margin-bottom: 0; }
.portal-evento-modal-descripcion img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Fila de acciones al pie del modal — agrupa "Más información" y
   "Ver en el mapa". Ambos se ocultan independientemente si el evento
   no tiene esos datos. Si los dos están vacíos, la fila no rinde
   nada visible (margin solo aplica si hay hijos visibles). */
.portal-evento-modal-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
}

.portal-evento-modal-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    background: var(--c-primary);
    color: var(--c-bg);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s ease, transform .15s ease;
}
.portal-evento-modal-cta:hover {
    opacity: .92;
    transform: translateY(-1px);
    color: var(--c-bg);
    text-decoration: none;
}
.portal-evento-modal-cta[hidden] { display: none; }

/* Botón "Ver en el mapa" — tono secundario para no competir
   visualmente con el CTA principal "Más información". Outline del
   color de acento del tenant. */
.portal-evento-modal-mapa {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    background: transparent;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.portal-evento-modal-mapa:hover,
.portal-evento-modal-mapa:focus-visible {
    background: var(--c-primary);
    color: var(--c-bg);
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}
.portal-evento-modal-mapa[hidden] { display: none; }

@media (max-width: 575.98px) {
    .portal-evento-modal-dialog { max-height: 95vh; }
    .portal-evento-modal-cuerpo { padding: 1.15rem 1.15rem 1.35rem; }
    .portal-evento-modal-titulo { font-size: 1.2rem; }
    .portal-evento-modal-imagen { max-height: 240px; }
}

/* Word-wrap defensivo en el modal: el titulo y la descripcion vienen
   del operador (innerHTML para descripcion); sin esto una URL larga o
   palabra sin espacios desborda el ancho del modal en mobile. */
.portal-evento-modal-titulo,
.portal-evento-modal-meta-item,
.portal-evento-modal-descripcion {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* La descripcion del evento puede contener tablas pegadas por el
   operador desde CKE5. Habilitamos scroll horizontal local en vez de
   romper el ancho del modal. */
.portal-evento-modal-descripcion {
    overflow-x: auto;
}