/* ==========================================================================
   The Events Calendar — vista de mes (/eventos/mes/)
   Armonizada con la vista de lista y con la ficha de evento.

   ========================================================================== */

/* Contenedores ------------------------------------------------------------ */

.tribe-events-view--month,
.tribe-events-view--month .tribe-events-l-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
    padding-inline: var(--wp--preset--spacing--40);
    padding-block: var(--wp--preset--spacing--50);
}

.tribe-events-view--month .tribe-common-l-container {
    padding: 0;
}

/* Barra superior y navegación de mes -------------------------------------- */

.tribe-events-view--month .tribe-events-c-events-bar {
    border: 0;
    margin-bottom: var(--wp--preset--spacing--40);
}

.tribe-events-view--month .tribe-events-c-top-bar {
    margin-bottom: var(--wp--preset--spacing--40);
}

.tribe-events-view--month .tribe-events-c-top-bar__datepicker-button,
.tribe-events-view--month .tribe-events-c-view-selector__list-item-text {
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--contrast);
}

.tribe-events-view--month .tribe-events-c-search__input {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    border: 1px solid var(--wp--preset--color--accent-6);
    border-radius: 0.25rem;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.tribe-events-view--month .tribe-events-c-search__button,
.tribe-events-view--month .tribe-common-c-btn {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    background-color: var(--wp--preset--color--accent-3);
    color: var(--wp--preset--color--base);
    border: 2px solid var(--wp--preset--color--accent-3);
    border-radius: 0.25rem;
}

/* Cabecera de días de la semana ------------------------------------------- */

.tribe-events-view--month .tribe-events-calendar-month__header-column-title {
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--contrast-2) !important;
}

/* Rejilla del mes ---------------------------------------------------------- */

.tribe-events-view--month .tribe-events-calendar-month__day {
    border-color: var(--wp--preset--color--accent-6) !important;
}

.tribe-events-view--month .tribe-events-calendar-month__day-date,
.tribe-events-view--month .tribe-events-calendar-month__day-date-daynum {
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 600 !important;
    color: var(--wp--preset--color--contrast) !important;
}

.tribe-events-view--month .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum {
    color: var(--wp--preset--color--contrast-3) !important;
}

/* Día actual: número en Teja */
.tribe-events-view--month .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
    color: var(--wp--preset--color--accent-3) !important;
    font-weight: 700 !important;
}

/* Día seleccionado en móvil: círculo relleno ------------------------------- */

.tribe-events-view--month .tribe-events-calendar-month__day-cell--selected {
    background-color: var(--wp--preset--color--accent-3) !important;
    border-radius: 999px;
}

.tribe-events-view--month .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
    color: var(--wp--preset--color--base) !important;
}

/* Punto indicador de que hay eventos ese día ------------------------------ */

.tribe-events-view--month .tribe-events-calendar-month__mobile-events-icon--event {
    background-color: var(--wp--preset--color--accent-3) !important;
}

.tribe-events-view--month .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--event {
    background-color: var(--wp--preset--color--base) !important;
}

/* Eventos dentro de la casilla (escritorio) ------------------------------- */

.tribe-events-view--month .tribe-events-calendar-month__calendar-event {
    margin-bottom: 0.35rem;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-datetime {
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--accent-3) !important;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title {
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: var(--wp--preset--font-size--small) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title-link {
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title-link:hover {
    color: var(--wp--preset--color--accent-1) !important;
    text-decoration: underline;
}

/* ==========================================================================
   Panel del día seleccionado (móvil)
   Es el recuadro que aparece al pulsar un día. Por defecto llega sin
   relleno lateral y con borde negro.
   ========================================================================== */

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-day {
    background: var(--wp--preset--color--accent-5);
    border: 1px solid var(--wp--preset--color--accent-6) !important;
    border-radius: 0.5rem;
    padding: var(--wp--preset--spacing--40) !important;
    margin-top: var(--wp--preset--spacing--40);
}

/* Fecha del día, como antetítulo ------------------------------------------ */

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__day-marker,
.tribe-events-view--month .tribe-events-c-day-marker {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 var(--wp--preset--spacing--30) !important;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
}

.tribe-events-view--month .tribe-events-c-day-marker::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--wp--preset--color--accent-6);
}

.tribe-events-view--month .tribe-events-c-day-marker__date {
    flex: 0 0 auto;
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: var(--wp--preset--font-size--small) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--accent-3) !important;
}

/* Cada evento del día ------------------------------------------------------ */

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event {
    padding: var(--wp--preset--spacing--30) 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--wp--preset--color--accent-6) !important;
}

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event-details {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hora, en estilo eyebrow -------------------------------------------------- */

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event-datetime,
.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event-datetime time,
.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event-datetime span {
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4 !important;
    color: var(--wp--preset--color--contrast-2) !important;
    margin: 0 0 0.2rem !important;
}

/* Título ------------------------------------------------------------------- */

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event-title {
    font-family: var(--wp--preset--font-family--display) !important;
    font-size: var(--wp--preset--font-size--large) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
    text-wrap: balance;
}

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event-title-link {
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none;
}

.tribe-events-view--month .tribe-events-calendar-month-mobile-events__mobile-event-title-link:hover {
    color: var(--wp--preset--color--accent-1) !important;
    text-decoration: underline;
}

/* Navegación entre meses --------------------------------------------------- */

.tribe-events-view--month .tribe-events-calendar-month-nav,
.tribe-events-view--month .tribe-events-c-nav {
    border-top: 1px solid var(--wp--preset--color--accent-6);
    padding-top: var(--wp--preset--spacing--40);
    margin-top: var(--wp--preset--spacing--40);
}

.tribe-events-view--month .tribe-events-c-nav__prev,
.tribe-events-view--month .tribe-events-c-nav__next,
.tribe-events-view--month .tribe-events-c-nav__today {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--accent-1);
    text-decoration: none;
    background: transparent;
    border: 0;
}

.tribe-events-view--month .tribe-events-c-nav__prev:hover,
.tribe-events-view--month .tribe-events-c-nav__next:hover,
.tribe-events-view--month .tribe-events-c-nav__today:hover {
    text-decoration: underline;
}

/* Botón "Suscribirse al calendario" ---------------------------------------- */

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__container {
    margin-block: var(--wp--preset--spacing--40);
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    padding: 0.7em 1.2em;
    border: 2px solid var(--wp--preset--color--accent-3);
    border-radius: 0.25rem;
    background: transparent;
    transition: background-color 160ms ease;
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button-text {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--accent-3);
    background: transparent;
    border: 0;
    white-space: nowrap;
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button-icon {
    flex: 0 0 auto;
    fill: var(--wp--preset--color--accent-3);
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button:hover {
    background: var(--wp--preset--color--accent-3);
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-text {
    color: var(--wp--preset--color--base);
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-icon {
    fill: var(--wp--preset--color--base);
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__content {
    max-width: min(20rem, 100%);
    border: 1px solid var(--wp--preset--color--accent-6);
    border-radius: 0.25rem;
    background: var(--wp--preset--color--base);
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__list-item-link {
    display: block;
    padding: 0.5rem 1rem;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
}

.tribe-events-view--month .tribe-events-c-subscribe-dropdown__list-item-link:hover {
    background: var(--wp--preset--color--base-2);
    color: var(--wp--preset--color--accent-1);
}

/* Selector de vista: desplegable con anchura propia ------------------------ */

@media (max-width: 782px) {
    .tribe-events-view--month .tribe-events-c-view-selector {
        position: relative;
    }

    .tribe-events-view--month .tribe-events-c-view-selector__content {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 20;
        width: max-content !important;
        max-width: none !important;
        min-width: 9rem;
        margin-top: 0.4rem;
        background: var(--wp--preset--color--base);
        border: 1px solid var(--wp--preset--color--accent-6);
        border-radius: 0.375rem;
        box-shadow: 0 8px 20px rgba(23, 26, 46, 0.18);
    }

    .tribe-events-view--month .tribe-events-c-view-selector__list {
        list-style: none;
        margin: 0;
        padding: 0.25rem 0;
    }

    .tribe-events-view--month .tribe-events-c-view-selector__list-item-link {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 1rem !important;
        white-space: nowrap !important;
        text-decoration: none;
        color: var(--wp--preset--color--contrast);
    }

    .tribe-events-view--month .tribe-events-c-view-selector__list-item-link:hover {
        background: var(--wp--preset--color--base-2);
    }

    .tribe-events-view--month .tribe-events-c-view-selector__list-item-icon svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }
}