/* Variables CSS (opcional, pero ayuda a la consistencia) */ :root { /* Colores neutros */ --color-bg-primary: #ffffff; /* Equivalente a bg-white */ --color-bg-secondary: #f0f4f8; /* Un gris muy claro, similar a bg-gray-50/100 */ --color-bg-terciary: #e2e8f0; /* Un gris un poco más oscuro, similar a bg-gray-200 */ --color-border: #cbd5e1; /* Gris de borde, similar a border-gray-300 */ /* Colores de texto */ --color-txt-primary: #1a202c; /* Texto oscuro, similar a text-gray-900 */ --color-txt-secondary: #4a5568; /* Texto gris, similar a text-gray-700 */ --color-txt-placeholder: #a0aec0; /* Texto más claro, similar a text-gray-400 */ /* Colores de acento (ej. azul de Google) */ --color-accent-main: #4285F4; /* Azul Google */ --color-accent-light: #e8f0fe; /* Azul muy claro para fondos de selección */ /* Colores de eventos */ --color-event-green: #34c759; /* Un verde vibrante */ --color-event-blue: #007aff; /* Un azul más profundo */ --color-event-orange: #ff9500; /* Naranja típico */ --color-event-red: #ff3b30; /* Rojo */ --color-event-default: #6c757d; /* Gris para eventos por defecto */ /* Colores para días no laborales (Domingos) - Mejorados */ --color-non-working-bg-light: #fef0ee; /* Un rosa muy pálido, más suave que el rojo puro */ --color-non-working-text-light: #d64545; /* Un rojo oscuro para buen contraste en modo claro */ --color-non-working-label-light: #d64545; /* Color de la etiqueta "no laboral" */ } /* Modo oscuro (ejemplo, requeriría una clase global como .dark en o ) */ .dark { --color-bg-primary: #1a202c; --color-bg-secondary: #2d3748; --color-bg-terciary: #4a5568; --color-border: #4a5568; --color-txt-primary: #f7fafc; --color-txt-secondary: #e2e8f0; --color-txt-placeholder: #a0aec0; --color-accent-main: #6b99ff; /* Azul ligeramente más claro para el modo oscuro */ --color-accent-light: #1e3a8a; /* Azul oscuro para fondos de selección */ /* Colores para días no laborales (Domingos) en modo oscuro - Mejorados */ --color-non-working-bg-dark: #3a1c1c; /* Un rojo oscuro y sutil para el fondo */ --color-non-working-text-dark: #f87171; /* Un rojo más claro para el texto */ --color-non-working-label-dark: #f87171; /* Color de la etiqueta "no laboral" */ } /* Base del Calendario */ .calendar { display: flex; flex-direction: column; width: 100%; background-color: transparent; border-radius: 1rem; /* rounded-xl (16px) */ font-family: 'Roboto', sans-serif; /* Fuente de Google */ } /* Header del Calendario */ .calendar .header { display: flex; flex-direction: column; margin-bottom: 1rem; /* mb-4 */ } .calendar .header .nav-container { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 0.5rem; /* px-2 */ } .calendar .header .month-year { font-size: 1.5rem; /* text-2xl */ font-weight: 600; /* font-semibold */ color: var(--color-txt-primary); padding: 0.5rem 0; /* py-2 */ text-align: center; flex-grow: 1; /* Para que ocupe el espacio central */ } /* Botones de navegación (Asumiendo que primaryBtn existe y tiene estilos base) */ .primaryBtn { /* Ajusta esto si tu primaryBtn ya tiene un estilo diferente */ padding: 0.5rem 1rem; /* px-4 py-2 */ border-radius: 9999px; /* rounded-full */ color: var(--color-txt-secondary); background-color: transparent; border: none; cursor: pointer; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .primaryBtn:hover { background-color: var(--color-bg-secondary); /* hover:bg-gray-100 / hover:bg-gray-700 en dark */ } .primaryBtn:focus { outline: none; box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5); /* focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 */ } /* Cuadrícula de Días */ .calendar .days { display: grid; /* Cambiado a grid */ grid-template-columns: repeat(7, 1fr); /* grid-cols-7 */ gap: 1px; /* gap-px */ border: 1px solid var(--color-border); /* border border-gray-200 */ border-radius: 0.5rem; /* rounded-lg */ overflow: hidden; /* Para que los bordes redondeados se apliquen correctamente */ } /* Nombres de los Días de la Semana */ .calendar .days .day_name { text-align: center; padding: 0.5rem 0.25rem; /* py-2 px-1 */ background-color: var(--color-bg-secondary); /* bg-gray-100 */ font-size: 0.75rem; /* text-xs */ font-weight: 500; /* font-medium */ color: var(--color-txt-secondary); /* text-gray-600 */ text-transform: uppercase; letter-spacing: 0.05em; /* tracking-wider */ } /* Celdas de los Días */ .calendar .days .day_num { position: relative; /* Para la etiqueta "No laboral" */ display: flex; flex-direction: column; padding: 0.75rem; /* p-3 (ligeramente más que p-2) */ min-height: 100px; /* min-h-[100px] */ background-color: var(--color-bg-primary); /* bg-white */ border-bottom: 1px solid var(--color-border); /* border-b border-gray-200 */ border-right: 1px solid var(--color-border); /* border-r border-gray-200 */ font-weight: normal; /* Asegurarse de que no sea muy bold */ color: var(--color-txt-primary); cursor: pointer; transition: background-color 0.2s ease-in-out; } /* Eliminar borde derecho para la última columna */ .calendar .days .day_num:nth-child(7n) { border-right: none; } /* Eliminar borde inferior para la última fila de días */ .calendar .days .day_num:nth-last-child(-n + 7) { /* Selecciona las últimas 7 celdas */ border-bottom: none; } .calendar .days .day_num span { display: inline-flex; justify-content: center; /* Centrar el número */ align-items: center; width: 2rem; /* w-8, aprox 32px */ height: 2rem; /* h-8 */ font-size: 1.125rem; /* text-lg */ font-weight: 500; /* font-medium */ border-radius: 50%; /* round-full para el círculo del día actual */ transition: background-color 0.2s, color 0.2s; margin-bottom: 0.25rem; /* mb-1 para separar el número de los eventos */ } /* Días del mes anterior/siguiente (ignorados) */ .calendar .days .day_num.ignore { background-color: var(--color-bg-secondary); /* bg-gray-50 */ color: var(--color-txt-placeholder); /* text-gray-400 */ cursor: default; /* cursor-inherit */ } /* Efecto Hover para los días */ .calendar .days .day_num:not(.ignore):hover { background-color: var(--color-bg-secondary); /* hover:bg-gray-50 */ } /* Estilo para el día actual */ .calendar .days .day_num.selected { background-color: var(--color-accent-light); /* bg-blue-100 */ border: 1px solid var(--color-accent-main); /* border-blue-500 */ box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* shadow-inner */ cursor: default; } .calendar .days .day_num.selected span { background-color: var(--color-accent-main); /* fondo azul para el número del día seleccionado */ color: white; /* texto blanco */ } /* Días no laborales (domingos) - Modificados */ .calendar .days .day_num.noLaboral { background-color: var(--color-non-working-bg-light); /* Nuevo color de fondo sutil para domingos */ color: var(--color-non-working-text-light); /* Nuevo color de texto para domingos */ } /* Estilos para el modo oscuro */ .dark .calendar .days .day_num.noLaboral { background-color: var(--color-non-working-bg-dark); color: var(--color-non-working-text-dark); } .calendar .days .day_num.noLaboral .noLaboral-text { position: absolute; bottom: 0.25rem; /* bottom-1 */ right: 0.25rem; /* right-1 */ font-size: 0.75rem; /* text-xs */ font-weight: 600; /* font-semibold */ color: var(--color-non-working-label-light); /* Color de la etiqueta más contrastante */ opacity: 1; /* Asegurar que sea completamente visible */ } /* Estilos para el modo oscuro */ .dark .calendar .days .day_num.noLaboral .noLaboral-text { color: var(--color-non-working-label-dark); } /* Estilos para los eventos */ .calendar .days .day_num .event { margin-top: 0.25rem; /* mt-1 */ padding: 0.25rem 0.5rem; /* px-2 py-1 */ font-size: 0.75rem; /* text-xs */ border-radius: 0.375rem; /* rounded-md */ color: white; /* text-white */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* text-ellipsis */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */ cursor: grab; /* Para indicar que es arrastrable */ transition: transform 0.1s ease-in-out; } .calendar .days .day_num .event:active { cursor: grabbing; transform: scale(0.98); /* Pequeño efecto al arrastrar */ } /* Colores específicos de eventos (usando los mapeos en PHP) */ .calendar .days .day_num .event.green { /* mapped to bg-emerald-500 */ background-color: var(--color-event-green); } .calendar .days .day_num .event.blue { /* mapped to bg-blue-500 */ background-color: var(--color-event-blue); } .calendar .days .day_num .event.orange { /* mapped to bg-orange-500 */ background-color: var(--color-event-orange); } .calendar .days .day_num .event.red { /* mapped to bg-red-500 */ background-color: var(--color-event-red); } /* Consideraciones adicionales para renderWeek (vista semanal) */ /* Asegúrate de que las clases generadas en renderWeek se mapeen a estos estilos */ /* Por ejemplo, el .day_name dentro de renderWeek tiene un HTML diferente */ .calendar .days .day_num.week-view { /* Clase si quieres un estilo específico para la vista semanal */ min-height: 120px; /* min-h-[120px] */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0.5rem; } .calendar .days .day_num.week-view .day_name { /* El nombre del día y número dentro de la celda */ display: flex; flex-direction: column; align-items: center; margin-bottom: 0.5rem; /* mb-2 */ background-color: transparent; /* No background */ color: var(--color-txt-secondary); font-size: 0.75rem; /* text-xs */ text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .calendar .days .day_num.week-view .day_name div { /* El número del día en la vista semanal */ font-size: 1.25rem; /* text-xl */ font-weight: 700; /* font-bold */ color: var(--color-txt-primary); } .calendar .days .day_num.week-view ul { /* Lista de eventos en vista semanal */ width: 100%; list-style: none; /* Eliminar viñetas de lista */ padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; /* space-y-1 */ } /* Etiqueta "No Laboral" específica para la vista semanal si la usas con una clase */ .calendar .days .day_num.week-view .noLaboral-text { position: absolute; bottom: 0.25rem; right: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--color-non-working-label-light); /* Usar la nueva variable */ opacity: 1; /* Asegurar visibilidad total */ } .dark .calendar .days .day_num.week-view .noLaboral-text { color: var(--color-non-working-label-dark); }