/*
===============================================
CALENDAR CSS - LIGHT MODE PURPLE + TOOLTIPS
===============================================
Tema claro armonizado con halving32.com (#8d54ff)
- Headers: #7B3FF2 (Morado Deep) sobre blanco
- Sub-headers: #9D5FFF (Morado Vibrant) sobre blanco
- Eventos: #F0E6FF (Morado muy claro) con border #D4B5FF
- Texto: #333333 (Gris oscuro) para máximo contraste
- Incluye: Display Event Using Tooltip con transiciones suaves
*/
/* ========== RESET Y VARIABLES ========== */
:root {
--purple-primary: #5012ca; /* Morado Deep - Headers principales */
--purple-secondary: #751fff; /* Morado Vibrant - Sub-elementos */
--purple-light: #E8D5FF; /* Morado claro - Bordes */
--purple-ultra-light: #F0E6FF; /* Morado ultra claro - Fondos eventos */
--background-light: #F7F3FF; /* Blanco con toque morado */
--text-dark: #333333; /* Gris oscuro - Texto principal */
--text-light: #666666; /* Gris medio - Texto secundario */
--white: #FFFFFF; /* Blanco puro - Fondos claros */
--border-light: #D4B5FF; /* Morado para bordes */
--shadow-color: rgba(123, 63, 242, 0.1); /* Sombra morada sutil */
}
/* ========== Calendar Month Header ========== */
.regpro-calendarMonthHeader {
background-color: var(--purple-primary); /* #7B3FF2 */
color: var(--white);
padding: 20px;
font-weight: 600;
box-shadow: 0 2px 8px var(--shadow-color);
border-bottom: 3px solid var(--purple-secondary);
}
/* ========== Calendar Week Day Header ========== */
.regpro-calendarWeekDayHeader {
background-color: var(--purple-secondary); /* #9D5FFF */
color: var(--white);
border-left: 1px solid var(--border-light);
border-bottom: 2px solid var(--border-light);
padding: 15px 10px;
font-weight: 600;
text-align: center;
font-size: 0.95em;
}
/* ========== Calendar Days Container ========== */
.regpro-calendarDay {
background-color: var(--white);
color: var(--text-dark);
border: 1px solid var(--border-light);
padding: 10px;
min-height: 100px;
position: relative;
transition: all 0.3s ease;
}
.regpro-calendarDay:hover {
background-color: var(--background-light);
border-color: var(--purple-light);
box-shadow: 0 4px 12px var(--shadow-color);
}
/* ========== Event Links / Botones de Eventos ========== */
.regpro-calendarDay .eb_event_link {
background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple-ultra-light) 100%);
color: var(--purple-primary);
border: 1.5px solid var(--border-light);
border-radius: 6px;
padding: 8px 12px;
font-weight: 600;
font-size: 0.9em;
cursor: pointer;
display: inline-block;
margin: 4px 0;
transition: all 0.3s ease;
position: relative;
text-decoration: none;
box-shadow: 0 2px 6px rgba(123, 63, 242, 0.15);
}
.regpro-calendarDay .eb_event_link:hover {
background: linear-gradient(135deg, var(--purple-secondary) 0%, var(--purple-primary) 100%);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(123, 63, 242, 0.3);
border-color: var(--purple-primary);
}
.regpro-calendarDay .eb_event_link:active {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(123, 63, 242, 0.2);
}
/*
============================================================
TOOLTIP CUSTOM CSS - DISPLAY EVENT USING TOOLTIP
============================================================
Archivo SEPARADO para customizar SOLO los tooltips
- Letras: Morado Claro (#D4B5FF)
- Fondo: Morado Deep (#7B3FF2)
- Borde: Morado Vibrant (#9D5FFF) - 4px
VENTAJAS:
✅ No interfiere con CSS de Joomla
✅ Especificidad alta para forzar estilos
✅ Scoped a elementos específicos
✅ Fácil de activar/desactivar
✅ Cargar DESPUÉS del CSS principal
IMPLEMENTACIÓN:
O al final del DESPUÉS de todos los otros CSS
*/
/* ============================================================
ESTILOS ESPECÍFICOS PARA TOOLTIPS CON LETRAS MORADAS
============================================================ */
/* Tooltip principal - LETRAS MORADAS CLARAS */
.eb_event_link[data-tooltip]:hover::after,
.regpro-calendarDay a[data-tooltip]:hover::after,
a[data-tooltip]:hover::after,
[data-tooltip]:hover::after {
content: attr(data-tooltip) !important;
position: absolute !important;
bottom: 125% !important;
left: 50% !important;
transform: translateX(-50%) !important;
/* COLORES ESPECÍFICOS - LETRAS MORADAS CLARAS */
background-color: #7B3FF2 !important; /* Fondo morado deep */
color: #D4B5FF !important; /* ✅ LETRAS MORADO CLARO */
padding: 10px 14px !important;
border-radius: 6px !important;
font-size: 0.85em !important;
font-weight: 500 !important;
white-space: nowrap !important;
z-index: 1000 !important;
/* Sombra y borde */
box-shadow: 0 6px 16px rgba(123, 63, 242, 0.4) !important;
border: 4px solid #9D5FFF !important; /* Borde morado vibrant pronunciado */
/* Animación */
opacity: 1 !important;
animation: tooltipFadeInCustom 0.3s ease !important;
pointer-events: none !important;
}
/* Flecha del tooltip - CON SOMBRA MORADA */
.eb_event_link[data-tooltip]:hover::before,
.regpro-calendarDay a[data-tooltip]:hover::before,
a[data-tooltip]:hover::before,
[data-tooltip]:hover::before {
content: '' !important;
position: absolute !important;
bottom: 120% !important;
left: 50% !important;
transform: translateX(-50%) !important;
/* Triángulo morado */
border: 6px solid transparent !important;
border-top-color: #7B3FF2 !important;
border-top-width: 8px !important;
z-index: 1001 !important;
pointer-events: none !important;
filter: drop-shadow(0 -1px 1px #9D5FFF) !important;
}
/* Animación para tooltip (fade-in suave) */
@keyframes tooltipFadeInCustom {
from {
opacity: 0 !important;
transform: translateX(-50%) translateY(4px) !important;
}
to {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
}
}
/* Tooltip multilínea - LETRAS MORADAS CLARAS */
.eb_event_link.tooltip-multiline[data-tooltip]:hover::after,
.regpro-calendarDay a.tooltip-multiline[data-tooltip]:hover::after,
a.tooltip-multiline[data-tooltip]:hover::after {
white-space: normal !important;
width: 250px !important;
padding: 12px 14px !important;
left: 50% !important;
transform: translateX(-50%) !important;
color: #D4B5FF !important; /* LETRAS MORADO CLARO */
background-color: #7B3FF2 !important; /* Fondo morado */
border: 4px solid #9D5FFF !important; /* Borde morado pronunciado */
}
/* ============================================================
SOBREESCRITURAS ADICIONALES PARA MÁXIMA COMPATIBILIDAD
============================================================ */
/* Para tooltips en calendarios específicos */
.regpro-calendarDay .eb_event_link[data-tooltip]:hover::after {
color: #D4B5FF !important;
background-color: #7B3FF2 !important;
border: 4px solid #9D5FFF !important;
}
/* Para tooltips en eventos genéricos */
.event-link[data-tooltip]:hover::after {
color: #D4B5FF !important;
background-color: #7B3FF2 !important;
border: 4px solid #9D5FFF !important;
}
/* Para cualquier elemento con data-tooltip */
[class*="tooltip"] [data-tooltip]:hover::after,
.tooltip[data-tooltip]:hover::after {
color: #D4B5FF !important;
background-color: #7B3FF2 !important;
border: 4px solid #9D5FFF !important;
}
/* ============================================================
VARIABLES DE REFERENCIA (Para futuras ediciones)
============================================================ */
:root {
/* Colores Tooltip */
--tooltip-bg-color: #7B3FF2; /* Fondo morado deep */
--tooltip-text-color: #D4B5FF; /* Letras morado claro */
--tooltip-border-color: #9D5FFF; /* Borde morado vibrant */
--tooltip-border-width: 4px; /* Grosor borde */
--tooltip-font-size: 0.85em; /* Tamaño texto */
--tooltip-animation: tooltipFadeInCustom 0.3s ease; /* Animación */
}
/* ============================================================
NOTAS DE IMPLEMENTACIÓN
============================================================ */
/*
1. CARGAR ESTE ARCHIVO:
Agregar en el de tu página HTML DESPUÉS de todos los otros CSS:
O en Joomla:
- Ir a: Extensiones → Plantillas → Tu plantilla
- Editar: index.php
- Agregar antes del cierre :
2. ESPECIFICIDAD:
Todos los estilos tienen !important para garantizar que se apliquen
incluso si hay CSS conflictivo de Joomla u otros plugins
3. CAMBIAR COLORES:
Si quieres cambiar los colores, SOLO edita estos valores:
- #D4B5FF → Letras (morado claro)
- #7B3FF2 → Fondo (morado deep)
- #9D5FFF → Borde (morado vibrant)
4. COMPATIBILIDAD:
✅ Joomla 3.x, 4.x
✅ WordPress
✅ Drupal
✅ Cualquier CMS que use CSS estándar
✅ Navegadores modernos (Chrome, Firefox, Safari, Edge)
5. DIAGNOSTICAR PROBLEMAS:
Si los tooltips no se ven correctamente:
- Abre DevTools (F12)
- Busca el elemento con data-tooltip
- Verifica que tengan clase .eb_event_link o similar
- Comprueba que este CSS cargue DESPUÉS del CSS principal
*/
/* ========== Week View ========== */
.eb-calendar ul.eb-weekdays {
background: linear-gradient(to right, var(--purple-primary), var(--purple-secondary));
color: var(--white);
padding: 0;
}
.eb-calendar ul.eb-weekdays li {
color: var(--white);
font-weight: 600;
padding: 12px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
}
.eb-calendar ul.eb-weekdays li:last-child {
border-right: none;
}
/* ========== Top Menu Calendar ========== */
.eb-topmenu-calendar ul li a {
color: var(--purple-primary);
border: 1px solid var(--border-light);
background-color: var(--white);
padding: 10px 15px;
border-radius: 5px;
transition: all 0.3s ease;
font-weight: 500;
margin: 5px;
display: inline-block;
cursor: pointer;
}
.eb-topmenu-calendar ul li a:hover {
background: linear-gradient(135deg, var(--purple-light), var(--purple-ultra-light));
color: var(--purple-primary);
border-color: var(--purple-secondary);
transform: translateY(-2px);
box-shadow: 0 4px 8px var(--shadow-color);
}
.eb-topmenu-calendar ul li a.active {
background-color: var(--purple-primary);
color: var(--white);
border-color: var(--purple-primary);
font-weight: 600;
}
/* ========== Extended Calendar Views ========== */
#extcalendar .currentmonth,
#extcalendar .currentday,
#extcalendar .currentweek,
#extcalendar .previousday,
#extcalendar .previousweek,
#extcalendar .nextday,
#extcalendar .nextweek {
background: linear-gradient(135deg, var(--purple-light), var(--purple-ultra-light));
color: var(--purple-primary);
border: 1px solid var(--border-light);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
#extcalendar .currentmonth:hover,
#extcalendar .currentday:hover,
#extcalendar .currentweek:hover {
background: linear-gradient(135deg, var(--purple-secondary), var(--purple-primary));
color: var(--white);
transform: translateY(-2px);
}
#extcalendar .tableh2 {
background: var(--purple-secondary);
color: var(--white);
font-weight: 600;
padding: 12px;
border-bottom: 2px solid var(--border-light);
}
/* ========== Mini Calendar (Sidebar) ========== */
.extcal_minical .extcal_navbar {
background: var(--purple-primary);
color: var(--white);
padding: 10px;
border-radius: 6px 6px 0 0;
font-weight: 600;
}
.mod_eb_mincalendar_td_dayname {
background: var(--purple-secondary);
color: var(--white);
font-weight: 600;
padding: 8px;
text-align: center;
}
td.mod_eb_mincalendar_event {
background: linear-gradient(135deg, var(--purple-light), var(--purple-ultra-light));
color: var(--purple-primary);
border: 1px solid var(--border-light);
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
td.mod_eb_mincalendar_event:hover {
background: linear-gradient(135deg, var(--purple-secondary), var(--purple-primary));
color: var(--white);
transform: scale(1.05);
box-shadow: 0 3px 8px var(--shadow-color);
}
/* ========== Event Cards / Popups ========== */
.eb-event,
.event-card,
.event-popup {
background: var(--white);
color: var(--text-dark);
border: 2px solid var(--border-light);
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 12px var(--shadow-color);
transition: all 0.3s ease;
position: relative;
}
.eb-event:hover,
.event-card:hover {
border-color: var(--purple-primary);
box-shadow: 0 6px 16px rgba(123, 63, 242, 0.25);
transform: translateY(-3px);
}
.eb-event h3,
.event-card h3 {
color: var(--purple-primary);
margin-bottom: 8px;
font-size: 1.1em;
font-weight: 600;
}
.eb-event p,
.event-card p {
color: var(--text-light);
font-size: 0.95em;
margin: 5px 0;
}
/* ========== Event Details Table ========== */
.event-details table,
.event-info table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.event-details th,
.event-info th {
background: var(--purple-ultra-light);
color: var(--purple-primary);
padding: 10px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid var(--border-light);
}
.event-details td,
.event-info td {
padding: 8px 10px;
border-bottom: 1px solid var(--purple-light);
color: var(--text-dark);
}
.event-details tr:last-child td,
.event-info tr:last-child td {
border-bottom: none;
}
/* ========== Accesibilidad - Focus States ========== */
.regpro-calendarDay a:focus,
.eb-topmenu-calendar ul li a:focus,
.eb_event_link:focus,
[data-tooltip]:focus {
outline: 3px solid var(--purple-primary);
outline-offset: 2px;
border-radius: 3px;
}
/* ========== Loading States ========== */
.event-loading {
background: linear-gradient(90deg, var(--background-light) 25%, var(--purple-light) 50%, var(--background-light) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ========== Responsive Design ========== */
@media (max-width: 768px) {
.regpro-calendarMonthHeader {
padding: 15px;
font-size: 1.1em;
}
.regpro-calendarWeekDayHeader {
padding: 10px 5px;
font-size: 0.85em;
}
.regpro-calendarDay {
min-height: 80px;
padding: 8px;
}
.eb_event_link {
font-size: 0.85em;
padding: 6px 10px;
}
.eb_event_link[data-tooltip]:hover::after {
white-space: normal;
width: 150px;
font-size: 0.75em;
padding: 8px 10px;
}
.eb-topmenu-calendar ul li a {
padding: 8px 12px;
font-size: 0.9em;
margin: 3px;
}
.event-popup {
max-width: 90vw;
padding: 12px;
}
}
/* ========== Tablet ========== */
@media (max-width: 1024px) and (min-width: 769px) {
.regpro-calendarDay {
min-height: 90px;
}
.eb_event_link[data-tooltip]:hover::after {
width: 200px;
}
}
/* ========== Print Styles ========== */
@media print {
.eb_event_link[data-tooltip]:hover::after,
.eb_event_link[data-tooltip]:hover::before {
display: none;
}
.regpro-calendarDay {
background: var(--white) !important;
border: 1px solid #ccc !important;
}
.regpro-calendarMonthHeader,
.regpro-calendarWeekDayHeader {
color: var(--text-dark);
background: var(--background-light) !important;
}
}
/* ========== Light Theme Overrides ========== */
body {
background-color: var(--white);
color: var(--text-dark);
}
/* Para asegurar que el fondo del calendario sea claro
.eb-calendar,
.calendar-container,
[class*="calendar"] {
background-color: var(--white);
}
*/
/* ========== Smooth Transitions Global ========== */
* {
--transition-speed: 0.3s;
--transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}
a, button, input, select, [role="button"] {
transition: all var(--transition-speed) var(--transition-timing);
}
/* ========== Bonus: Badge para eventos destacados ========== */
.event-badge {
display: inline-block;
background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
color: var(--white);
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75em;
font-weight: 600;
margin-left: 5px;
}
.event-badge.highlight {
background: linear-gradient(135deg, #FF6B6B, #FF8E72);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}