/* * Calendario (2026-09-09). * * Casi todo lo pone FullCalendar y el tema; acá va solo el color de los eventos. * * ⚠ Los eventos se pintan con CLASES del tema (`cal-primary`, `cal-danger`…) y no con un * `backgroundColor` fijo por evento, que es como lo hace el ejemplo de la plantilla. Con un color * quemado, al pasar a modo oscuro los eventos se quedaban con el mismo relleno claro y el texto * dejaba de leerse. Con variables del tema, siguen al skin solos. */ /* ⚠ Acá había siete reglas de color propias —fondo sólido, texto blanco— y se quitaron: el evento se pinta con las utilidades del TEMA (`bg-X-subtle text-X`), que es como lo hace el ejemplo de Ubold. Se veía bien, pero desentonaba con el resto del sistema y eran siete reglas que mantener a mano por algo que el tema ya resuelve. Ver `clasesColor()` en `calendario.js`. */ /* La barra de botones del calendario, en móvil: los cuatro cambios de vista más el título no caben en una fila de 390 px y salían apretados contra los bordes. */ /* ⚠ Acá había un `flex-direction: column` que apilaba las TRES secciones de la barra —flechas, título y vistas— en tres filas: 178 px de barra sobre un calendario de 199. Con `wrap` y el título ocupando su propia línea quedan dos filas. */ @media (max-width: 767.98px) { /* ⚠ Hay que reponer `flex-direction: row` explícitamente: el TEMA pone `column` en `.fc-toolbar` bajo 576 px, y mi regla —más específica— solo tocaba el `wrap`, así que la dirección seguía siendo la suya y las tres secciones seguían apiladas. */ .fc .fc-toolbar { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } /* ⚠ Y hay que reponer también el ANCHO de cada sección. El tema, para su modo columna, les da ancho completo; al volver a fila, cada una seguía ocupando un renglón entero —tres filas de nuevo, aunque las tres juntas midieran 171 px de 358—. */ .fc .fc-toolbar > .fc-toolbar-chunk { width: auto; flex: 0 1 auto; } /* El título primero y a todo el ancho; debajo, las flechas a un lado y las vistas al otro. */ .fc .fc-toolbar-title { font-size: 1rem; } .fc .fc-toolbar > .fc-toolbar-chunk:nth-child(2) { order: -1; flex: 0 0 100%; text-align: center; } } /* ── Panel de tipos ─────────────────────────────────────────────────────────────────────────── Las etiquetas que se arrastran al calendario. */ .cal-tipos { display: flex; flex-direction: column; gap: .35rem; } /* ⚠ El panel NO usa las clases del tema, a diferencia de los eventos del calendario. Se probó —fondo tenue con el texto en color y en negrita, como el ejemplo de Ubold— y Mario prefirió esta versión: punto de color y el nombre en el color de texto normal. El nombre se lee mejor y el panel deja de competir con el calendario, que es lo que hay que mirar. Los eventos del calendario sí siguen al tema; son dos cosas distintas y esto es deliberado. */ .cal-tipo { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: .375rem; font-size: .85rem; /* `grab` y no `pointer`: dice que se arrastra, que es lo que hay que hacer con esto. */ cursor: grab; /* Sin esto, arrastrar sobre el texto lo selecciona en vez de mover la etiqueta. */ user-select: none; text-align: left; } .cal-tipo:active { cursor: grabbing; } /* El punto toma el color del tipo por `currentColor`; el fondo y ese color los pone el JS en un `style`, porque desde que el color es LIBRE ya no hay una clase por cada uno. */ .cal-tipo-punto { width: 10px; height: 10px; min-width: 10px; border-radius: 50%; background: currentColor; } .cal-tipo-nombre { flex: 1; min-width: 0; color: var(--ins-body-color); font-weight: 400; } /* La equis aparece al pasar por encima: siempre visible, el panel se llena de botones de borrar cuando lo que uno viene a hacer es arrastrar. */ .cal-tipo-accion { border: 0; background: none; padding: 0 .15rem; line-height: 1; font-size: 1.05rem; color: var(--ins-secondary-color); opacity: 0; cursor: pointer; } .cal-tipo:hover .cal-tipo-accion { opacity: .7; } .cal-tipo-accion:hover { opacity: 1 !important; } /* En pantalla táctil no hay «pasar por encima»: ahí se dejan visibles o no habría forma de tocarlas. */ @media (hover: none) { .cal-tipo-accion { opacity: .6; } } /* ── Alto de la pantalla ────────────────────────────────────────────────────────────────────── El calendario aprovecha lo que queda de ventana en vez de crecer solo con su contenido: con `height:'auto'` un mes tranquilo dejaba media pantalla vacía y las celdas apretadas. Los 190 px que se restan son la barra superior, el margen de la tarjeta y el pie. Es un número medido, no estimado: si el layout cambia de alto habrá que volver a medirlo. ⚠ El `min-height` es la red: en una pantalla baja —o con la ventana a media altura—, `100vh` menos el layout deja un calendario de dos centímetros. */ @media (min-width: 1200px) { /* ⚠ Estas tarjetas NO llevan `h-100`. Esa clase de Bootstrap es `height:100% !important` y le gana a cualquier regla propia: con las dos puestas, la tarjeta medía 534 px en una ventana de 900 y quedaban 342 px vacíos abajo. Medido. ⚠ Lo que se resta NO es un número fijo: `--cal-resta` lo calcula el JS midiendo dónde empieza la tarjeta de verdad. Estaba en 190 px —barra superior, márgenes y pie, medidos a ojo— y eso es una constante que envejece: basta que la barra crezca una línea para que el calendario se salga o sobre espacio, sin que nadie relacione una cosa con la otra. El valor de reserva es para el instante anterior a que el JS mida. */ .cal-alto { height: calc(100vh - var(--cal-resta, 190px)); min-height: 520px; } } /* Que las filas del mes repartan el alto sobrante entre ellas, en vez de dejar el hueco abajo. */ .fc .fc-daygrid-body, .fc .fc-scrollgrid-sync-table { height: 100%; } /* ── En el teléfono ─────────────────────────────────────────────────────────────────────────── La barra de FullCalendar se parte en tres filas y ocupaba 178 px, más que el propio calendario. Con los botones apretados y el título en su renglón, baja a la mitad. */ @media (max-width: 767.98px) { .fc .fc-toolbar { gap: .35rem; margin-bottom: .6rem; } .fc .fc-button { padding: .28rem .5rem; font-size: .78rem; } /* Menos aire alrededor de la rejilla: cada píxel cuenta cuando el día mide 51. */ .fc .fc-daygrid-day-frame { min-height: 62px; } .fc .fc-daygrid-day-number { font-size: .78rem; padding: 2px 4px; } .fc-event { margin: 2px 3px; padding: 2px 4px; font-size: .72rem; } /* ⚠ El calendario se sale de la tarjeta si algo dentro no encoge —los nombres de los días, un evento largo—. Con scroll propio, el desborde se queda acá y no arrastra la página entera, que era lo que hacía aparecer la barra horizontal del documento. */ #calendario { overflow-x: auto; } } /* ── Elegir el tipo, en la modal del evento ─────────────────────────────────────────────────── Filas con el círculo del color al lado del nombre. No es un `