/* OfficeEventsCalendar.css — Oficinas comerciales y calendario de sus actividades.
   Nodos 4827:89960 (PC, mesa de 1280) y 4827:90522 (tablet, mesa de 768). Mobile sigue al de tablet
   con los rellenos de las demás secciones.
   ESCRITORIO: oficinas y calendario en dos columnas iguales. TABLET Y MOBILE: apilados, oficinas
   arriba. La tarjeta de oficinas crece con su contenido (el nodo de tablet la corta: es la mesa).
   Lo que el diseño no dibuja (foco, día de otro mes elegido, lista vacía) sigue la misma paleta. */

/* --- Sección. --- */
.OfficeEventsCalendar {
    --OfficeEventsCalendar-ink: #0f0f12; /* Casi negro del diseño. */
    --OfficeEventsCalendar-accent: #429cde; /* Celeste de la barra, el día elegido y las etiquetas. */
    --OfficeEventsCalendar-accent-dark: #2970a8; /* Celeste oscuro de la columna "Hrs". */
    --OfficeEventsCalendar-muted: #73737a; /* Gris de los textos secundarios. */
    --OfficeEventsCalendar-faint: #b8bac2; /* Gris de los días de otro mes y de la semana. */
    --OfficeEventsCalendar-line: #e0e3e8; /* Bordes y divisores. */
    --OfficeEventsCalendar-holiday: #f28c29; /* Punto naranja de los festivos. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    padding-inline: 64px; /* Relleno lateral del nodo de PC. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--OfficeEventsCalendar-ink); /* Color base del texto. */
}

    .OfficeEventsCalendar *,
    .OfficeEventsCalendar *::before,
    .OfficeEventsCalendar *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .OfficeEventsCalendar [hidden] {
        display: none !important; /* El atributo gana a cualquier display de la hoja. */
    }

    .OfficeEventsCalendar p,
    .OfficeEventsCalendar h2,
    .OfficeEventsCalendar h3,
    .OfficeEventsCalendar h4,
    .OfficeEventsCalendar ul {
        margin: 0; /* El espaciado lo ponen los contenedores. */
    }

    .OfficeEventsCalendar ul {
        padding: 0; /* Sin sangría de lista. */
        list-style: none; /* Sin viñetas. */
    }

/* Texto solo para lectores de pantalla. */
.OfficeEventsCalendar-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contenido centrado dentro del techo del sitio. */
.OfficeEventsCalendar-content {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    padding-block: 56px; /* Relleno vertical del nodo. */
    display: flex; /* Encabezado y columnas apilados. */
    flex-direction: column; /* En columna. */
    gap: 28px; /* Separación del nodo. */
}

/* --- Encabezado. --- */
.OfficeEventsCalendar-header {
    display: flex; /* Etiqueta y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Separación del nodo. */
}

.OfficeEventsCalendar-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Separación del nodo. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de etiqueta. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: #1b2d3a; /* Azul noche del nodo. */
}

.OfficeEventsCalendar-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 8px; /* Lado del nodo. */
    height: 8px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña a la etiqueta. */
}

.OfficeEventsCalendar-title {
    font-size: clamp(24px, 2.3438vw, 30px); /* 30 del nodo desde 1280 (30 / 1280 * 100). */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.2; /* Interlineado de titular. */
    color: var(--OfficeEventsCalendar-ink); /* Casi negro. */
}

/* --- Columnas: oficinas y calendario. --- */
.OfficeEventsCalendar-cols {
    display: grid; /* Dos columnas iguales. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 564 + 564 del nodo. */
    gap: 24px; /* Separación del nodo. */
    align-items: start; /* Cada tarjeta con su alto. */
}

/* --- Tarjeta de oficinas. --- */
.OfficeEventsCalendar-offices {
    border: 1.5px solid var(--OfficeEventsCalendar-line); /* Borde del nodo. */
    border-radius: 14px; /* Esquinas del nodo. */
    padding: 26px 24px 14px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
}

.OfficeEventsCalendar-offices-header {
    display: flex; /* Etiqueta y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 6px; /* Separación del nodo. */
    padding-bottom: 14px; /* Separación hasta la primera oficina. */
}

.OfficeEventsCalendar-offices-eyebrow {
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de etiqueta. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--OfficeEventsCalendar-accent); /* Celeste del nodo. */
}

.OfficeEventsCalendar-offices-title {
    font-size: 20px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de titular. */
}

/* Fila de oficina. El divisor va solo entre oficinas VISIBLES: con el paginado, la primera de cada
   página tiene hermanas ocultas antes y no debe llevar raya arriba. */
.OfficeEventsCalendar-office:not([hidden]) ~ .OfficeEventsCalendar-office:not([hidden]) {
    border-top: 1px solid var(--OfficeEventsCalendar-line); /* Divisor entre oficinas. */
}

/* Toda la fila es el botón que elige la oficina. Se corre 12px a cada lado para que el fondo del
   estado elegido respire sin mover el texto de la línea del encabezado. */
.OfficeEventsCalendar-office-button {
    width: calc(100% + 24px); /* Ancho de la fila más el corrimiento de los dos lados. */
    margin: 4px -12px; /* Corrimiento lateral; aire entre el fondo y los divisores. */
    display: flex; /* Punto y textos en línea. */
    align-items: flex-start; /* El punto acompaña al primer renglón. */
    gap: 12px; /* Separación del nodo. */
    padding: 12px; /* Relleno del nodo (16px de alto, menos el margen). */
    border: 0; /* Sin borde de botón. */
    border-radius: 10px; /* Esquinas del fondo de selección. */
    background: none; /* Sin fondo hasta elegirla. */
    font: inherit; /* Pila de marca. */
    color: inherit; /* Casi negro. */
    text-align: left; /* Texto alineado como el nodo. */
    cursor: pointer; /* Se puede elegir. */
    transition: background-color 0.2s ease; /* Cambio suave. */
}

    .OfficeEventsCalendar-office-button:hover {
        background-color: #f7f9fb; /* Gris muy claro al pasar. */
    }

    /* Oficina elegida: el mismo celeste muy claro del panel del día. */
    .OfficeEventsCalendar-office-button[aria-pressed="true"] {
        background-color: #f2f7fc; /* Celeste muy claro. */
    }

        .OfficeEventsCalendar-office-button[aria-pressed="true"] .OfficeEventsCalendar-office-name {
            color: var(--OfficeEventsCalendar-accent-dark); /* El nombre toma el celeste oscuro. */
        }

        .OfficeEventsCalendar-office-button[aria-pressed="true"] .OfficeEventsCalendar-office-dot {
            box-shadow: 0 0 0 3px rgba(66, 156, 222, 0.25); /* Halo celeste, para navegadores sin color-mix. */
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--OfficeEventsCalendar-office-color, #429cde) 28%, transparent); /* Halo del color de la oficina. */
        }

    .OfficeEventsCalendar-office-button:focus-visible {
        outline: 2px solid var(--OfficeEventsCalendar-accent-dark); /* Anillo de foco. */
        outline-offset: 2px; /* Separado de la fila. */
    }

/* Mientras llegan los eventos de otra oficina, la lista se atenúa. */
.OfficeEventsCalendar-events--loading {
    opacity: 0.45; /* Atenuada. */
    pointer-events: none; /* Sin clics mientras carga. */
    transition: opacity 0.2s ease; /* Cambio suave. */
}

.OfficeEventsCalendar-office-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 10px; /* Diámetro del nodo. */
    height: 10px; /* Círculo. */
    margin-top: 4px; /* Centrado con el primer renglón del nombre. */
    border-radius: 50%; /* Círculo. */
    background-color: var(--OfficeEventsCalendar-office-color, var(--OfficeEventsCalendar-accent)); /* Color de la oficina (lo pone la vista); celeste si falta. */
}

.OfficeEventsCalendar-office-name,
.OfficeEventsCalendar-office-address {
    display: block; /* Son span dentro del botón: cada uno en su renglón. */
}

.OfficeEventsCalendar-office-text {
    flex: 1 1 auto; /* Toma el resto del ancho. */
    min-width: 0; /* Deja envolver los textos largos. */
    display: flex; /* Nombre y dirección apilados. */
    flex-direction: column; /* En columna. */
    gap: 4px; /* Separación del nodo. */
}

.OfficeEventsCalendar-office-name {
    font-size: 14.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.3; /* Interlineado. */
}

.OfficeEventsCalendar-office-address {
    font-size: 13px; /* Tamaño del nodo. */
    line-height: 1.35; /* Interlineado. */
    color: #66666e; /* Gris del nodo. */
}

/* --- Paginación de oficinas y eventos: "1–5 de 25 · ‹ Anterior | Siguiente ›", el mismo patrón
   de SplitPreviewShowcase. --- */
.OfficeEventsCalendar-pager {
    display: flex; /* Conteo y leyendas en una sola fila. */
    flex-wrap: wrap; /* En un ancho muy chico las leyendas bajan en lugar de salirse. */
    align-items: center; /* Centrados verticalmente. */
    justify-content: space-between; /* Conteo a la izquierda, leyendas a la derecha. */
    gap: 4px 16px; /* Separación mínima al envolver. */
}

/* En la tarjeta de oficinas va debajo de la lista, separado por el divisor. */
.OfficeEventsCalendar-offices .OfficeEventsCalendar-pager {
    padding-top: 8px; /* Aire con el divisor. */
    border-top: 1px solid var(--OfficeEventsCalendar-line); /* Divisor, como entre oficinas. */
}

/* En el calendario va debajo de los eventos, con el relleno lateral de las filas. */
.OfficeEventsCalendar-calendar .OfficeEventsCalendar-pager {
    padding: 4px 18px; /* Relleno de las filas de eventos. */
    border-bottom: 1px solid var(--OfficeEventsCalendar-line); /* Divisor, como las filas. */
}

/* Posición dentro de la lista ("6–10 de 25"): discreta. */
.OfficeEventsCalendar-pager-status {
    font-size: 12px; /* Pequeño: no satura. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al cambiar de página. */
    letter-spacing: 0.2px; /* Apertura leve. */
    color: rgba(15, 15, 18, 0.5); /* Gris del diseño. */
}

.OfficeEventsCalendar-pager-actions {
    display: flex; /* Leyendas en línea. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha, también cuando se ve una sola. */
    gap: 12px; /* Separación entre leyendas. */
    margin-left: auto; /* Quedan a la derecha aunque la fila envuelva. */
}

/* Leyenda de texto, no botón: sin caja, sin contorno y sin fondo. */
.OfficeEventsCalendar-pager-button {
    display: inline-flex; /* Texto e ícono en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación entre texto e ícono. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 8px 2px; /* Zona de toque cómoda sin caja visible. */
    border: 0; /* Sin contorno. */
    background: transparent; /* Sin fondo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    font-size: 13px; /* Tamaño. */
    font-weight: 700; /* Bold. */
    color: var(--OfficeEventsCalendar-accent-dark); /* Celeste oscuro de la barra. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease-in-out; /* Respuesta suave. */
}

    /* Cuando se ven las dos, una raya fina las separa. */
    .OfficeEventsCalendar-pager-button:not([hidden]) ~ .OfficeEventsCalendar-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

    .OfficeEventsCalendar-pager-button:hover,
    .OfficeEventsCalendar-pager-button:active {
        opacity: 0.7; /* Respuesta al puntero y al toque. */
    }

    .OfficeEventsCalendar-pager-button:focus-visible {
        outline: 2px solid var(--OfficeEventsCalendar-accent-dark); /* Foco visible del teclado. */
        outline-offset: 2px;
    }

/* Cambio de página animado (lo maneja el script): los ítems de la página actual se desvanecen
   subiendo un poco y los de la nueva entran desde abajo, uno tras otro. La salida dura lo mismo que
   LEAVE_MS del script. */
.OfficeEventsCalendar-leave {
    opacity: 0; /* Se desvanece. */
    transform: translateY(-6px); /* Sube un poco al irse. */
    transition: opacity 0.16s ease-in, transform 0.16s ease-in; /* Salida corta. */
}

.OfficeEventsCalendar-enter {
    animation: OfficeEventsCalendar-enter 0.32s ease-out both; /* Entrada; "both" lo oculta durante el retraso. */
    animation-delay: var(--OfficeEventsCalendar-delay, 0ms); /* Escalonado que pone el script. */
}

@keyframes OfficeEventsCalendar-enter {
    from {
        opacity: 0; /* Aparece... */
        transform: translateY(10px); /* ...desde abajo. */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.OfficeEventsCalendar-pager-icon {
    width: 14px; /* Tamaño del glifo. */
    height: 14px; /* Cuadrado. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Tarjeta del calendario. --- */
.OfficeEventsCalendar-calendar {
    border: 1.5px solid var(--OfficeEventsCalendar-line); /* Borde del nodo. */
    border-radius: 14px; /* Esquinas del nodo. */
    overflow: hidden; /* La barra respeta las esquinas. */
    background-color: #ffffff; /* Fondo del nodo. */
}

/* Barra celeste: "Hrs" y el título. */
.OfficeEventsCalendar-bar {
    display: flex; /* Columna de horas y título en línea. */
    align-items: stretch; /* Ambos con el alto de la barra. */
    min-height: 44px; /* Alto del nodo. */
    background-color: var(--OfficeEventsCalendar-accent); /* Celeste del nodo. */
    color: #ffffff; /* Texto blanco. */
    font-size: 20px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado. */
}

.OfficeEventsCalendar-bar-hours {
    flex: 0 0 64px; /* Ancho del nodo: el de la columna de horas más su relleno. */
    display: flex; /* Centra el texto. */
    align-items: center; /* Vertical. */
    justify-content: center; /* Horizontal. */
    background-color: var(--OfficeEventsCalendar-accent-dark); /* Celeste oscuro del nodo. */
}

.OfficeEventsCalendar-bar-title {
    flex: 1 1 auto; /* Toma el resto. */
    display: flex; /* Centra el texto en vertical. */
    align-items: center; /* Vertical. */
    padding: 8px 16px; /* Relleno del nodo. */
    font-size: inherit; /* Hereda de la barra. */
    font-weight: inherit; /* Hereda de la barra. */
    color: inherit; /* Blanco. */
}

/* --- Eventos. --- */
.OfficeEventsCalendar-event {
    display: flex; /* Hora, fecha, punto y textos en línea. */
    align-items: flex-start; /* Todos arriba. */
    gap: 12px; /* Separación del nodo. */
    padding: 13px 18px; /* Relleno del nodo. */
    border-bottom: 1px solid var(--OfficeEventsCalendar-line); /* Divisor del nodo. */
}

.OfficeEventsCalendar-event-time {
    flex: 0 0 46px; /* Ancho del nodo. */
    display: flex; /* Hora y período apilados. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrados. */
    line-height: 1.2; /* Interlineado. */
}

.OfficeEventsCalendar-event-hour {
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
}

.OfficeEventsCalendar-event-period {
    font-size: 11px; /* Tamaño del nodo. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

.OfficeEventsCalendar-event-date {
    flex: 0 0 42px; /* Lado del nodo. */
    height: 42px; /* Cuadrado. */
    display: flex; /* Día y mes apilados. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrados. */
    justify-content: center; /* En el medio. */
    border-radius: 8px; /* Esquinas del nodo. */
    background-color: #f2f5f7; /* Gris claro del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.15; /* Interlineado. */
}

.OfficeEventsCalendar-event-day {
    font-size: 15px; /* Tamaño del nodo. */
}

.OfficeEventsCalendar-event-month {
    font-size: 8.5px; /* Tamaño del nodo. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

.OfficeEventsCalendar-event-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 9px; /* Diámetro del nodo. */
    height: 9px; /* Círculo. */
    border-radius: 50%; /* Círculo. */
    background-color: var(--OfficeEventsCalendar-accent); /* Celeste del diseño; la vista pone encima el de la oficina si tiene. */
}

.OfficeEventsCalendar-event-text {
    flex: 1 1 auto; /* Toma el resto del ancho. */
    min-width: 0; /* Deja envolver los textos largos. */
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    gap: 3px; /* Separación del nodo. */
    line-height: 1.2; /* Interlineado. */
}

.OfficeEventsCalendar-event-title {
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
}

.OfficeEventsCalendar-event-description {
    font-size: 12px; /* Tamaño del nodo. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

.OfficeEventsCalendar-event-address {
    font-size: 11px; /* Tamaño del nodo. */
    color: #8a8f99; /* Gris claro del nodo. */
}

/* Lista vacía desde el día elegido. */
.OfficeEventsCalendar-events-empty {
    padding: 20px 18px; /* Relleno de una fila. */
    border-bottom: 1px solid var(--OfficeEventsCalendar-line); /* Divisor, como las filas. */
    font-size: 13px; /* Texto secundario. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

/* --- Panel del día elegido. --- */
.OfficeEventsCalendar-day {
    display: flex; /* Insignia, textos y festivo en línea. */
    align-items: center; /* Centrados. */
    gap: 16px; /* Separación del nodo. */
    padding: 14px 18px; /* Relleno del nodo. */
    background-color: #f2f7fc; /* Celeste muy claro del nodo. */
    line-height: 1.2; /* Interlineado. */
}

/* Insignias del día: el inicio y, con un rango, la flecha y el fin. */
.OfficeEventsCalendar-day-badges {
    flex: 0 0 auto; /* No se comprime. */
    display: flex; /* Inicio, flecha y fin en línea. */
    align-items: flex-end; /* La flecha a la altura de los números. */
    gap: 8px; /* Separación entre insignias. */
}

.OfficeEventsCalendar-day-arrow {
    padding-bottom: 8px; /* Centrada con los números grandes. */
    font-size: 18px; /* Visible sin competir con los números. */
    font-weight: 700; /* Bold. */
    line-height: 1; /* Compacta. */
    color: var(--OfficeEventsCalendar-accent); /* Celeste de los números. */
}

.OfficeEventsCalendar-day-badge {
    flex: 0 0 auto; /* No se comprime. */
    min-width: 36px; /* Ancho del nodo. */
    display: flex; /* Día de la semana y número apilados. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrados. */
}

.OfficeEventsCalendar-day-weekday {
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

.OfficeEventsCalendar-day-number {
    font-size: 34px; /* Tamaño del nodo. */
    font-weight: 900; /* Black. */
    line-height: 1.1; /* Compacto. */
    color: var(--OfficeEventsCalendar-accent); /* Celeste del nodo. */
}

.OfficeEventsCalendar-day-text {
    flex: 1 1 auto; /* Toma el resto. */
    min-width: 0; /* Deja envolver. */
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    gap: 3px; /* Separación del nodo. */
}

.OfficeEventsCalendar-day-month {
    font-size: 15px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
}

.OfficeEventsCalendar-day-meta {
    font-size: 12px; /* Tamaño del nodo. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

.OfficeEventsCalendar-day-relative {
    font-size: 12px; /* Tamaño del nodo. */
    color: var(--OfficeEventsCalendar-accent); /* Celeste del nodo. */
}

.OfficeEventsCalendar-day-holiday {
    flex: 0 1 150px; /* Ancho del nodo. */
    font-size: 11px; /* Tamaño del nodo. */
    text-align: right; /* Alineado a la derecha, como el nodo. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

    .OfficeEventsCalendar-day-holiday:empty {
        display: none; /* Sin festivo no ocupa lugar. */
    }

/* --- Controles: mes, año, festivos y "Hoy". --- */
.OfficeEventsCalendar-toolbar {
    display: flex; /* Controles en línea. */
    flex-wrap: wrap; /* Envuelven en pantallas angostas. */
    align-items: center; /* Centrados. */
    gap: 8px; /* Separación del nodo. */
    padding: 14px 18px 8px; /* Compacto: el nodo dejaba 126px de alto con aire de sobra arriba y abajo. */
}

.OfficeEventsCalendar-stepper,
.OfficeEventsCalendar-holiday-select {
    min-height: 31px; /* Alto del nodo con el borde. */
    border: 1.25px solid var(--OfficeEventsCalendar-line); /* Borde del nodo. */
    border-radius: 8px; /* Esquinas del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: inherit; /* Pila de marca. */
    font-size: 12.5px; /* Tamaño del nodo. */
    line-height: 1.2; /* Interlineado. */
}

.OfficeEventsCalendar-stepper {
    display: inline-flex; /* Flechas y texto en línea. */
    align-items: center; /* Centrados. */
}

.OfficeEventsCalendar-step {
    display: inline-flex; /* Centra la flecha. */
    align-items: center; /* Vertical. */
    justify-content: center; /* Horizontal. */
    min-width: 28px; /* Área de clic cómoda alrededor de la flecha del nodo. */
    min-height: 29px; /* Alto interior del control. */
    padding: 0; /* La medida la da el mínimo. */
    border: 0; /* Sin borde propio. */
    border-radius: 8px; /* Foco redondeado. */
    background: none; /* Sin fondo. */
    font-family: inherit; /* Pila de marca. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
    cursor: pointer; /* Se puede hacer clic. */
}

    .OfficeEventsCalendar-step:hover {
        color: var(--OfficeEventsCalendar-ink); /* Se oscurece al pasar. */
    }

.OfficeEventsCalendar-step-label {
    font-weight: 600; /* Semibold del nodo. */
    white-space: nowrap; /* Un solo renglón. */
}

.OfficeEventsCalendar-holiday-select {
    /* ANCHO AJUSTADO A "Fiesta", en la misma fila que el mes, el año y "Hoy" (BTCN-363). Sin esto el
       select medía lo que su opción más larga (un feriado de nombre largo) y bajaba a una fila propia.
       El texto visible siempre es "Fiesta" (el script lo restablece); la lista desplegada muestra los
       nombres completos. */
    flex: 0 0 auto; /* No se estira ni se encoge en la fila. */
    width: 96px; /* "Fiesta" más el relleno y la flecha. */
    overflow: hidden; /* Si el texto no entra, se corta... */
    text-overflow: ellipsis; /* ...con puntos suspensivos. */
    white-space: nowrap; /* Un solo renglón. */
    max-width: 100%; /* No se sale del contenedor. */
    padding: 6px 28px 6px 12px; /* Relleno del nodo, con lugar para la flecha. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
    appearance: none; /* Sin la flecha del sistema. */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); /* Triángulo "▾" del nodo. */
    background-position: calc(100% - 14px) 50%, calc(100% - 11px) 50%; /* A la derecha, centrado. */
    background-size: 3px 3px, 3px 3px; /* Triángulo chico, como el del nodo. */
    background-repeat: no-repeat; /* Una sola vez. */
    cursor: pointer; /* Se puede hacer clic. */
}

/* Sin festivos configurados el selector se ve, pero deshabilitado (BTCN-363). */
.OfficeEventsCalendar-holiday-select:disabled {
    opacity: 0.55; /* Atenuado: no hay nada que elegir. */
    cursor: not-allowed; /* No se puede abrir. */
}

.OfficeEventsCalendar-today {
    margin-left: auto; /* Va al extremo derecho, como el nodo. */
    min-height: 31px; /* Alto del nodo. */
    padding: 8px 16px; /* Relleno del nodo. */
    border: 0; /* Sin borde. */
    border-radius: 8px; /* Esquinas del nodo. */
    background-color: var(--OfficeEventsCalendar-accent); /* Celeste del nodo. */
    font-family: inherit; /* Pila de marca. */
    font-size: 12.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado. */
    color: #ffffff; /* Texto blanco. */
    cursor: pointer; /* Se puede hacer clic. */
    transition: background-color 0.2s ease; /* Cambio suave. */
}

    .OfficeEventsCalendar-today:hover {
        background-color: var(--OfficeEventsCalendar-accent-dark); /* Se oscurece al pasar. */
    }

/* --- Días. Más compactos que el nodo: semanas de 36px en lugar de 47px. --- */
.OfficeEventsCalendar-grid {
    padding: 0 12px 6px; /* Relleno lateral del nodo; poco aire abajo, lo da la ayuda. */
}

.OfficeEventsCalendar-weekdays,
.OfficeEventsCalendar-days {
    display: grid; /* Siete columnas iguales. */
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* 77 cada una en el nodo. */
}

.OfficeEventsCalendar-weekdays {
    padding-bottom: 2px; /* Separación del nodo. */
}

    .OfficeEventsCalendar-weekdays span {
        padding-block: 6px; /* Compacto. */
        text-align: center; /* Centrado en su columna. */
        font-size: 11px; /* Tamaño del nodo. */
        font-weight: 700; /* Bold. */
        line-height: 1.2; /* Interlineado. */
        color: var(--OfficeEventsCalendar-faint); /* Gris claro del nodo. */
    }

.OfficeEventsCalendar-days {
    row-gap: 0; /* Sin hueco entre semanas: la banda del rango queda continua. */
}

.OfficeEventsCalendar-cell {
    position: relative; /* Ancla la banda del rango. */
    display: flex; /* Día y punto apilados. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrados. */
    gap: 1px; /* Compacto. */
    padding-block: 1px; /* Compacto. */
}

/* Banda del rango: va detrás del día, de borde a borde de la celda, para unir inicio y fin. En el
   inicio arranca en la mitad y en el fin termina en la mitad. */
.OfficeEventsCalendar-cell--in-range::before,
.OfficeEventsCalendar-cell--range-start::before,
.OfficeEventsCalendar-cell--range-end::before {
    content: "";
    position: absolute; /* Detrás del día. */
    top: 1px; /* Alineada con el día (relleno de la celda). */
    left: 0; /* De borde a borde... */
    right: 0;
    height: 30px; /* ...con el alto del día. */
    background-color: #e3f0fa; /* Celeste claro del rango. */
}

.OfficeEventsCalendar-cell--range-start::before {
    left: 50%; /* Arranca en el centro del inicio. */
}

.OfficeEventsCalendar-cell--range-end::before {
    right: 50%; /* Termina en el centro del fin. */
}

/* Inicio y fin en el mismo día no llevan banda. */
.OfficeEventsCalendar-cell--range-start.OfficeEventsCalendar-cell--range-end::before {
    content: none;
}

/* Vista previa (falta el fin): la misma banda, más tenue. */
.OfficeEventsCalendar-cell--preview::before {
    background-color: #f0f6fc; /* Celeste muy claro. */
}

.OfficeEventsCalendar-date {
    position: relative; /* Por encima de la banda del rango. */
    width: 34px; /* Ancho del nodo. */
    height: 30px; /* Alto del nodo. */
    display: flex; /* Centra el número. */
    align-items: center; /* Vertical. */
    justify-content: center; /* Horizontal. */
    padding: 0; /* La medida es fija. */
    border: 1.5px solid transparent; /* Reserva el borde del día con eventos. */
    border-radius: 8px; /* Esquinas del nodo. */
    background: none; /* Sin fondo. */
    font-family: inherit; /* Pila de marca. */
    font-size: 13.5px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium del nodo. */
    line-height: 1; /* Compacto. */
    color: var(--OfficeEventsCalendar-ink); /* Casi negro. */
    cursor: pointer; /* Se puede hacer clic. */
    transition: background-color 0.2s ease, color 0.2s ease; /* Cambio suave. */
}

    .OfficeEventsCalendar-date:hover {
        background-color: #f2f7fc; /* Celeste muy claro al pasar. */
    }

/* Día de otro mes. */
.OfficeEventsCalendar-date--outside {
    color: var(--OfficeEventsCalendar-faint); /* Gris claro del nodo. */
}

/* Día con eventos: borde celeste. */
.OfficeEventsCalendar-date--events {
    border-color: var(--OfficeEventsCalendar-accent); /* Borde del nodo. */
}

/* Día elegido: relleno celeste; gana al borde de eventos. */
.OfficeEventsCalendar-date[aria-pressed="true"],
.OfficeEventsCalendar-date[aria-pressed="true"]:hover {
    border-color: var(--OfficeEventsCalendar-accent); /* Mismo tono que el relleno. */
    background-color: var(--OfficeEventsCalendar-accent); /* Celeste del nodo. */
    font-weight: 700; /* Bold del nodo. */
    color: #ffffff; /* Texto blanco. */
}

/* Fin del rango en vista previa: borde punteado, todavía no elegido. */
.OfficeEventsCalendar-date--preview {
    border-style: dashed; /* Punteado. */
    border-color: var(--OfficeEventsCalendar-accent); /* Celeste del nodo. */
}

/* Punto bajo el día: transparente salvo en los festivos, para que todas las celdas midan igual. */
.OfficeEventsCalendar-mark {
    width: 4px; /* Compacto. */
    height: 4px; /* Círculo. */
    border-radius: 50%; /* Círculo. */
}

/* Ayuda bajo la cuadrícula: cómo elegir un rango. */
.OfficeEventsCalendar-hint {
    padding: 0 18px 14px; /* Relleno de las filas. */
    font-size: 11.5px; /* Texto secundario. */
    line-height: 1.35; /* Interlineado. */
    color: var(--OfficeEventsCalendar-muted); /* Gris del nodo. */
}

.OfficeEventsCalendar-mark--holiday {
    background-color: var(--OfficeEventsCalendar-holiday); /* Naranja del nodo. */
}

/* Foco visible para los controles del teclado. */
.OfficeEventsCalendar-step:focus-visible,
.OfficeEventsCalendar-holiday-select:focus-visible,
.OfficeEventsCalendar-today:focus-visible,
.OfficeEventsCalendar-date:focus-visible {
    outline: 2px solid var(--OfficeEventsCalendar-accent-dark); /* Anillo de foco. */
    outline-offset: 2px; /* Separado del control. */
}

/* --- Tablet (hasta 1024px): columnas apiladas. --- */
@media (max-width: 1024px) {
    .OfficeEventsCalendar {
        padding-inline: 32px; /* Relleno lateral del nodo de tablet. */
    }

    .OfficeEventsCalendar-cols {
        grid-template-columns: minmax(0, 1fr); /* Una columna: oficinas arriba. */
        gap: 20px; /* Separación del nodo. */
    }

    .OfficeEventsCalendar-offices {
        padding-inline: 28px; /* Relleno del nodo de tablet. */
    }
}

/* --- Mobile (hasta 500px). --- */
@media (max-width: 500px) {
    .OfficeEventsCalendar {
        padding-inline: 20px; /* Relleno lateral de las demás secciones en mobile. */
    }

    .OfficeEventsCalendar-content {
        padding-block: 40px; /* Menos aire vertical en pantalla chica. */
    }

    .OfficeEventsCalendar-offices {
        padding: 22px 18px 10px; /* Rellenos más ajustados. */
    }

    .OfficeEventsCalendar-event {
        gap: 10px; /* Menos separación para dejar ancho al texto. */
        padding-inline: 14px; /* Relleno más ajustado. */
    }

    .OfficeEventsCalendar-event-title {
        font-size: 15px; /* Un punto menos para envolver menos. */
    }

    .OfficeEventsCalendar-day {
        flex-wrap: wrap; /* El festivo pasa abajo si no entra. */
        padding-inline: 14px; /* Relleno más ajustado. */
    }

    .OfficeEventsCalendar-day-holiday {
        flex: 1 1 100%; /* Renglón propio. */
        text-align: left; /* Alineado con los textos. */
    }

    .OfficeEventsCalendar-toolbar {
        padding: 12px 14px 6px; /* Relleno más ajustado. */
    }

    .OfficeEventsCalendar-hint {
        padding-inline: 14px; /* Relleno más ajustado. */
    }

    .OfficeEventsCalendar-grid {
        padding-inline: 4px; /* Las siete columnas aprovechan el ancho. */
    }
}

/* Movimiento reducido: sin transiciones. */
@media (prefers-reduced-motion: reduce) {
    .OfficeEventsCalendar-today,
    .OfficeEventsCalendar-date,
    .OfficeEventsCalendar-pager-button,
    .OfficeEventsCalendar-office-button,
    .OfficeEventsCalendar-events--loading {
        transition: none; /* Cambio instantáneo. */
    }

    .OfficeEventsCalendar-leave,
    .OfficeEventsCalendar-enter {
        transition: none; /* El script ya no las usa con movimiento reducido; por si acaso. */
        animation: none;
    }
}

/* Aviso del editor con las líneas de Holidays inválidas (BTCN-368): una línea larga sin espacios
   (las de QA) envuelve en lugar de desbordar el aviso. */
.OfficeEventsCalendar-warning-text {
    overflow-wrap: anywhere;
}