/* ACF Calendar for Elementor 1.2.20
 *
 * IMPORTANTE: los controles de Elementor escriben las variables CSS en
 * {{WRAPPER}}, que es el CONTENEDOR que Elementor pone alrededor del
 * widget (un ancestro de .acfce-widget, no el propio .acfce-widget).
 * Por eso aquí NUNCA se vuelven a declarar valores por defecto sobre
 * .acfce-widget: un valor declarado en el propio elemento siempre gana
 * sobre uno heredado del contenedor, sin importar la especificidad, y
 * eso bloqueaba todos los cambios de color/alto hechos desde Elementor.
 * En su lugar, cada propiedad usa var(--variable, valor-por-defecto)
 * en el punto de uso, para que el valor de Elementor pueda heredarse.
 */

.acfce-widget {
    width: 100%;
    box-sizing: border-box;
}

/* ---------------- Layout (calendario + loop) ----------------
 * Antes esto era CSS Grid: el orden visual dependía de en qué orden
 * PHP imprimía los dos bloques en el HTML (render()), así que solo
 * podía elegirse UNA posición fija para todos los tamaños de pantalla.
 * Ahora es Flexbox y el orden lo decide "order", que es una variable
 * CSS por-breakpoint (--acfce-order-calendar) escrita por un control
 * responsive de Elementor (móvil / tablet / escritorio). El ancho de
 * cada bloque (flex-basis/flex-grow) va pegado al propio bloque, no a
 * una "columna", así que cambiar el orden nunca cambia el ancho. */
.acfce-layout {
    display: flex;
    /* --acfce-force-direction la escribe el control responsive
       "Disposición" (Contenido → Calendario) sobre {{WRAPPER}}, con un
       valor distinto posible por breakpoint (escritorio/tablet/móvil).
       Cuando ese breakpoint está en "Automático" la variable no se
       escribe (selectors_dictionary la deja vacía a propósito), así que
       aquí se usa el valor por defecto "row" (fila). !important a
       propósito: cuando SÍ se fuerza una disposición, tiene que ganar
       siempre, incluso si el tema u otro plugin trae su propio CSS con
       más especificidad para .acfce-layout o similares. */
    flex-direction: var(--acfce-force-direction, row) !important;
    flex-wrap: nowrap;
    gap: var(--acfce-layout-gap, 20px);
    align-items: var(--acfce-align-items, flex-start);
}

.acfce-results {
    /* --acfce-force-basis solo se escribe cuando se fuerza "Vertical
       siempre" (ver comentario de flex-basis más abajo); en Automático y
       en "Horizontal siempre" no se escribe, así que aquí se usa el
       valor por defecto de 340px sin cambios. */
    flex: 1 1 var(--acfce-force-basis, 340px);
    min-width: 0;
    /* Complementario a --acfce-order-calendar (1 o 2): si el calendario
       es 1, el loop es 2, y viceversa. Así una sola variable por
       breakpoint basta para decidir el orden de los dos bloques. */
    order: calc(3 - var(--acfce-order-calendar, 2));
}

.acfce-calendar-panel {
    flex: 1.4 1 var(--acfce-force-basis, 440px);
    order: var(--acfce-order-calendar, 2);
}

.acfce-cards {
    display: grid;
    grid-template-columns: repeat(var(--acfce-cards-columns, 1), minmax(0, 1fr));
    gap: var(--acfce-cards-gap, 22px);
    align-items: start;
}

/* ---------------- Límite de tarjetas + scroll ----------------
 * --acfce-cards-visible (nº de tarjetas que se ven antes de necesitar
 * scroll) y --acfce-cards-scroll-direction ("vertical"/"horizontal")
 * son variables responsive: Elementor las reescribe en cada breakpoint.
 * El alto real en modo vertical no se puede calcular solo con CSS
 * (depende del contenido de la plantilla Loop), así que lo mide JS y lo
 * deja en --acfce-cards-scroll-size; el ancho en modo horizontal sí sale
 * completo con CSS puro a partir del nº de tarjetas visibles y el gap.
 * JS también decide, leyendo --acfce-cards-scroll-direction ya resuelta
 * por el breakpoint activo, qué clase de las dos de abajo aplicar. */
.acfce-cards.acfce-cards-scroll-vertical {
    grid-auto-rows: min-content;
    max-height: var(--acfce-cards-scroll-size, none);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-right: 10px;
}

.acfce-cards.acfce-cards-scroll-horizontal {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc(
        (100% - (var(--acfce-cards-visible, 2) - 1) * var(--acfce-cards-gap, 22px))
        / var(--acfce-cards-visible, 2)
    );
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
}

.acfce-cards.acfce-cards-scroll-horizontal .acfce-event-card {
    scroll-snap-align: start;
    min-width: 0;
}

/* Barra de scroll siempre visible (no solo al pasar el mouse), a
   propósito: funciona como indicador de que hay más eventos. */
.acfce-cards.acfce-cards-scroll-vertical,
.acfce-cards.acfce-cards-scroll-horizontal {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--acfce-cards-scrollbar-thumb, #6A1D08) var(--acfce-cards-scrollbar-track, #E4DFD0);
}

.acfce-cards.acfce-cards-scroll-vertical::-webkit-scrollbar,
.acfce-cards.acfce-cards-scroll-horizontal::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.acfce-cards.acfce-cards-scroll-vertical::-webkit-scrollbar-track,
.acfce-cards.acfce-cards-scroll-horizontal::-webkit-scrollbar-track {
    background-color: var(--acfce-cards-scrollbar-track, #E4DFD0);
    border-radius: 8px;
}

.acfce-cards.acfce-cards-scroll-vertical::-webkit-scrollbar-thumb,
.acfce-cards.acfce-cards-scroll-horizontal::-webkit-scrollbar-thumb {
    background-color: var(--acfce-cards-scrollbar-thumb, #6A1D08);
    border-radius: 8px;
}

/* Ocultar sin sacar del DOM y sin dejar hueco en el flex */
.acfce-event-card.is-hidden {
    display: none;
}

.acfce-loop-item {
    width: 100%;
}

.acfce-empty {
    display: none;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
    color: var(--acfce-empty-color, #6F675F);
}

.acfce-empty.is-visible {
    display: flex;
}

/* ---------------- Panel ---------------- */

.acfce-calendar-panel {
    background-color: var(--acfce-panel-bg, #E4DFD0);
    border-radius: var(--acfce-panel-radius, 24px);
    color: var(--acfce-text, #3E2B25);
    min-height: var(--acfce-panel-min-height, 520px);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* La columna del título es "minmax(0, 1fr)": crece con todo el espacio
   libre que dejan las dos flechas (que ahora miden lo que necesitan,
   "auto", en vez de un ancho fijo de 42px). Antes el título estaba
   metido en la columna estrecha de 42px y las flechas en la 1fr, al
   revés de lo que hacía falta, por eso el mes/año se partía en 2 líneas. */
.acfce-calendar-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.acfce-month-title {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--acfce-text, #3E2B25);
    min-width: 0;
}

.acfce-calendar-head .acfce-prev { grid-column: 2; grid-row: 1; justify-self: end; }
.acfce-calendar-head .acfce-next { grid-column: 3; grid-row: 1; justify-self: end; }

/* Estados del ícono de flecha: inactivo, hover y activo (clic/foco).
 * Los "!important" y la clase duplicada (.acfce-nav.acfce-nav, más
 * específica que un simple selector de etiqueta <button>) son a propósito:
 * varios temas traen su propio CSS para <button> (a veces con foco/active
 * en azul, el color de acento del tema) y sin esto ese azul se colaba por
 * encima de los colores elegidos aquí en Estilo → Flechas de mes. Se
 * cubren explícitamente :link/:visited (por si el tema estiliza también
 * elementos con rol de enlace) y :active/:focus/:focus-visible (el clic
 * y la navegación por teclado), no solo :hover. */
.acfce-nav.acfce-nav,
.acfce-nav.acfce-nav:link,
.acfce-nav.acfce-nav:visited {
    border: 0;
    background-color: var(--acfce-nav-bg, transparent) !important;
    color: var(--acfce-nav-color, #3E2B25) !important;
    padding: 0;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    font-size: 25px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s ease, color .18s ease;
}

.acfce-nav.acfce-nav:hover {
    background-color: var(--acfce-nav-hover-bg, rgba(0, 0, 0, .06)) !important;
    color: var(--acfce-nav-hover-color, #3E2B25) !important;
}

.acfce-nav.acfce-nav:active,
.acfce-nav.acfce-nav:focus,
.acfce-nav.acfce-nav:focus-visible {
    background-color: var(--acfce-nav-active-bg, var(--acfce-nav-hover-bg, rgba(0, 0, 0, .06))) !important;
    color: var(--acfce-nav-active-color, var(--acfce-nav-hover-color, #3E2B25)) !important;
    outline: none;
}

.acfce-weekdays,
.acfce-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: center;
}

.acfce-weekdays {
    margin-bottom: 8px;
}

.acfce-weekdays span {
    text-align: center;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 2px;
    color: var(--acfce-text, #3E2B25);
}

.acfce-grid {
    row-gap: var(--acfce-day-gap-y, 6px);
    column-gap: var(--acfce-day-gap-x, 0px);
}

/* ---------------- Días ---------------- */

.acfce-day {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background-color: transparent;
    color: var(--acfce-muted, #8A8A84);
    font: inherit;
    width: var(--acfce-day-size, 54px);
    height: var(--acfce-day-size, 54px);
    aspect-ratio: 1 / 1;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: default;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.acfce-day.is-other-month {
    visibility: hidden;
    pointer-events: none;
}

.acfce-day.is-muted {
    cursor: default;
}

/* Neutraliza el hover azul que algunos temas aplican por defecto a <button>.
   Un día sin eventos nunca debe reaccionar al pasar el mouse. */
.acfce-day.is-muted:hover,
.acfce-day.is-muted:focus,
.acfce-day.is-muted:active {
    background-color: transparent !important;
    color: var(--acfce-muted, #8A8A84) !important;
    transform: none !important;
    outline: none;
    cursor: default;
}

/* Día con evento NO seleccionado */
.acfce-day.has-event {
    background-color: var(--acfce-event-bg, #F4F1E8);
    color: var(--acfce-event-text, #3E2B25);
    cursor: pointer;
}

.acfce-day.has-event:hover {
    background-color: var(--acfce-event-hover-bg, #6A1D08);
    color: var(--acfce-event-hover-text, #FFFFFF);
    transform: scale(1.06);
}

/* El día seleccionado no cambia al pasar el mouse por encima */
.acfce-day.acfce-day.is-selected:hover {
    background-color: var(--acfce-selected-bg, #6A1D08);
    color: var(--acfce-selected-text, #FFFFFF);
    transform: none;
}

/* Día seleccionado: gana sobre .has-event por especificidad */
.acfce-day.acfce-day.is-selected {
    background-color: var(--acfce-selected-bg, #6A1D08);
    color: var(--acfce-selected-text, #FFFFFF);
}

.acfce-day:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
    /* Apilado automático bajo 900px de ancho REAL de pantalla (viewport),
       que es un umbral fijo en px y por tanto independiente de los
       breakpoints de Elementor (escritorio/tablet/móvil), que se definen
       en anchos de EDITOR, no de viewport real, y son configurables por
       el usuario. Esta regla solo tiene efecto visible cuando ese
       breakpoint está en "Automático", porque --acfce-force-direction
       no se escribe en ese caso y por tanto var(...) usa aquí el
       "column" de respaldo. Si para ese breakpoint se forzó "Horizontal
       siempre" o "Vertical siempre", la variable SÍ está escrita (por
       Elementor, en su propio <style> aparte) y gana siempre, sin
       importar el ancho real de pantalla: var() nunca usa el valor de
       respaldo cuando la variable ya tiene un valor. */
    .acfce-layout {
        flex-direction: var(--acfce-force-direction, column) !important;
    }
    /* El orden (arriba/abajo) lo sigue decidiendo "order" con la variable
       --acfce-order-calendar del breakpoint correspondiente (ver control
       responsive "Posición del calendario"); aquí no se fuerza nada más.
       El flex-basis (340px/440px) sí hay que resetearlo: igual que con
       "Vertical siempre" (ver comentario más arriba), al apilarse en
       columna ese ancho mínimo pasaría a leerse como alto mínimo y
       dejaría un hueco vacío debajo del contenido. Si el breakpoint
       activo forzó "Horizontal siempre", --acfce-force-basis tampoco se
       escribe, así que aquí se mantiene igual en "auto" bajo 900px: en
       ese caso puntual (forzar horizontal pero con el navegador angosto)
       se pierde el ancho mínimo de 340/440px, un efecto secundario menor
       y poco frecuente. */
    .acfce-results,
    .acfce-calendar-panel {
        flex-basis: var(--acfce-force-basis, auto);
    }
}

@media (max-width: 600px) {
    .acfce-day {
        width: var(--acfce-day-size, 42px);
        height: var(--acfce-day-size, 42px);
    }
    .acfce-grid {
        row-gap: var(--acfce-day-gap-y, 2px);
        column-gap: var(--acfce-day-gap-x, 0px);
    }
    .acfce-layout {
        gap: var(--acfce-layout-gap, 14px);
    }
    .acfce-calendar-panel {
        min-height: var(--acfce-panel-min-height, 360px);
        padding: 14px;
    }
}