:root {
--ventocalendar-bg: #fff;
--ventocalendar-button-bg: #fff;
--ventocalendar-button-bg-hover: #f9fafb;
--ventocalendar-button-border: #d1d5db;
--ventocalendar-button-border-hover: #9ca3af;
--ventocalendar-separator: #e5e7eb;
--ventocalendar-text: #1f2937;
--ventocalendar-text-secondary: #6b7280;
--ventocalendar-text-highlight: #2271b1;
--ventocalendar-day-bg-secondary: #f9fafb;
--ventocalendar-box-bg: #f8f9fa;
--ventocalendar-box-bg-hover: #f3f4f6;
--ventocalendar-font: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
--ventocalendar-font-size-l: 1.5rem;
--ventocalendar-font-size-m: 1rem;
--ventocalendar-font-size-s: 0.875rem;
--ventocalendar-font-size-xs: 0.75rem;
--ventocalendar-day-min-height: 56px;
}
.ventocalendar-calendar {
max-width: 1200px;
margin: 2rem auto;
padding: 1rem;
background: var(--ventocalendar-bg);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-family: var(--wp--preset--font-family--body, var(--ventocalendar-font));
} .ventocalendar-calendar * {
box-sizing: border-box;
}
.ventocalendar-calendar a {
text-decoration: none;
}
.ventocalendar-calendar button {
font-family: inherit;
}
.ventocalendar-calendar .calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
}
.ventocalendar-calendar .calendar-header .month-year {
margin: 0;
font-size: var(--ventocalendar-font-size-l);
font-weight: 600;
color: var(--ventocalendar-text);
flex: 1;
text-align: center;
}
.ventocalendar-calendar .calendar-header .nav-button,
.ventocalendar-calendar .calendar-header .today-button {
padding: 0.5rem 1rem;
border: 1px solid var(--ventocalendar-button-border);
background: var(--ventocalendar-button-bg);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
font-size: var(--ventocalendar-font-size-s);
font-weight: 500;
color: var(--ventocalendar-text);
}
.ventocalendar-calendar .calendar-header .nav-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
}
.ventocalendar-calendar .calendar-header .today-button {
margin: 0 1rem;
height: 40px;
}
.ventocalendar-calendar .calendar-header .nav-button:hover,
.ventocalendar-calendar .calendar-header .today-button:hover {
background: var(--ventocalendar-button-bg-hover);
border-color: var(--ventocalendar-button-border-hover);
color: var(--ventocalendar-text);
}
.ventocalendar-calendar .calendar-header .nav-button:active,
.ventocalendar-calendar .calendar-header .today-button:active {
transform: scale(0.95);
}
.ventocalendar-calendar .modal-close svg {
display: block;
width: 24px;
height: 24px;
}
.ventocalendar-calendar .calendar-header .nav-button svg {
display: block;
width: 20px;
height: 20px;
}
.ventocalendar-calendar .calendar-loading {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.ventocalendar-calendar .calendar-grid {
display: grid;
gap: 1px;
background: var(--ventocalendar-separator);
}
.ventocalendar-calendar .weekday-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--ventocalendar-separator);
overflow: hidden;
}
.ventocalendar-calendar .weekday {
background: var(--ventocalendar-day-bg-secondary);
padding: 0.75rem;
text-align: center;
font-weight: 600;
font-size: var(--ventocalendar-font-size-s);
color: var(--ventocalendar-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ventocalendar-calendar .calendar-week {
position: relative;
}
.ventocalendar-calendar .week-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--ventocalendar-separator);
}
.ventocalendar-calendar .calendar-day {
background: var(--ventocalendar-bg);
min-height: var(--ventocalendar-day-min-height);
padding: 0.5rem;
padding-bottom: 3rem;
cursor: pointer;
transition: background-color 0.2s ease;
position: relative;
}
.ventocalendar-calendar .calendar-day:hover {
background: var(--ventocalendar-day-bg-secondary);
}
.ventocalendar-calendar .calendar-day.other-month {
background: var(--ventocalendar-day-bg-secondary);
color: #9ca3af;
}
.ventocalendar-calendar .calendar-day.other-month:hover {
background: var(--ventocalendar-separator);
}
.ventocalendar-calendar .calendar-day.today {
background: #eff6ff;
}
.ventocalendar-calendar .day-number {
font-size: var(--ventocalendar-font-size-s);
font-weight: 600;
color: var(--ventocalendar-text);
margin-bottom: 0.25rem;
}
.ventocalendar-calendar .calendar-day.other-month .day-number {
color: var(--ventocalendar-text-secondary);
}
.ventocalendar-calendar .calendar-day.today .day-number {
color: var(--ventocalendar-text-highlight);
}
.ventocalendar-calendar .day-events {
display: flex;
flex-direction: column;
gap: 4px;
}
.ventocalendar-calendar .event-dot-with-time {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--ventocalendar-font-size-xs);
line-height: 1;
}
.ventocalendar-calendar .event-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.ventocalendar-calendar .event-time {
color: var(--ventocalendar-text-secondary);
font-weight: 500;
white-space: nowrap;
}
.ventocalendar-calendar .week-event-bars {
position: relative;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
height: 80px;
pointer-events: none;
margin-top: -80px;
z-index: 10;
}
.ventocalendar-calendar .event-bar {
position: absolute;
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
padding: 0 8px;
font-size: var(--ventocalendar-font-size-xs);
font-weight: 500;
color: var(--ventocalendar-bg);
cursor: default;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ventocalendar-calendar .event-bar-title {
overflow: hidden;
text-overflow: ellipsis;
}
.ventocalendar-calendar .calendar-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
padding: 1rem;
}
.ventocalendar-calendar .calendar-modal {
background: #fff;
border-radius: 8px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ventocalendar-calendar .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid var(--ventocalendar-separator);
}
.ventocalendar-calendar .modal-header h3 {
margin: 0;
font-size: var(--ventocalendar-font-size-l);
font-weight: 600;
color: var(--ventocalendar-text);
}
.ventocalendar-calendar .modal-close {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
color: var(--ventocalendar-text-secondary);
transition: color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.ventocalendar-calendar .modal-close:hover {
color: var(--ventocalendar-text);
}
.ventocalendar-calendar .modal-body {
padding: 1rem;
overflow-y: auto;
}
.ventocalendar-calendar .no-events {
text-align: center;
color: var(--ventocalendar-text-secondary);
padding: 2rem;
font-style: italic;
}
.ventocalendar-calendar .events-list {
list-style: none !important;
margin: 0;
padding: 0 !important;
}
.ventocalendar-calendar .event-item {
margin-bottom: 1rem;
background: var(--ventocalendar-box-bg);
transition: background-color 0.2s ease;
border-left: 8px solid;
}
.ventocalendar-calendar .event-item:last-child {
margin-bottom: 0;
}
.ventocalendar-calendar .event-block {
padding: 1rem;
}
.ventocalendar-calendar .event-color-indicator {
width: 4px;
min-width: 4px;
border-radius: 2px;
flex-shrink: 0;
}
.ventocalendar-calendar .event-details {
flex: 1;
min-width: 0;
}
.ventocalendar-calendar .event-title {
font-weight: 600;
font-size: var(--ventocalendar-font-size-m);
color: var(--ventocalendar-text);
margin-bottom: 0.5rem;
transition: color 0.2s ease;
}
.ventocalendar-calendar .event-actions {
display: flex;
align-items: center;
padding: 0.5rem 0 0 0;
}
.ventocalendar-calendar .event-actions .event-link {
display: flex;
}
.ventocalendar-calendar .event-actions .event-link a {
text-decoration: none;
font-size: var(--ventocalendar-font-size-s);
font-weight: 500;
color: var(--ventocalendar-text);
transition: all 0.2s ease;
}
.ventocalendar-calendar .event-actions .event-add-to-my-calendar-buttons a {
text-decoration: none;
font-size: var(--ventocalendar-font-size-xs);
font-weight: 500;
}
.ventocalendar-calendar .event-actions .event-link a:hover {
color: var(--ventocalendar-text-highlight);
}
.ventocalendar-calendar .event-actions .event-add-to-my-calendar-buttons {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.ventocalendar-calendar .event-actions .event-add-to-my-calendar-buttons span {
font-size: var(--ventocalendar-font-size-xs);
}
.ventocalendar-calendar .event-actions .event-add-to-my-calendar-buttons a:hover {
color: var(--ventocalendar-text-highlight);
}
.ventocalendar-calendar .event-meta {
margin-top: 0.5rem;
font-size: var(--ventocalendar-font-size-s);
color: var(--ventocalendar-text-secondary);
}
.ventocalendar-calendar .meta-item {
line-height: 1.5;
}
.ventocalendar-calendar.layout-compact {
box-shadow: none;
padding: 0;
}
.ventocalendar-calendar.layout-clean {
box-shadow: none;
padding: 0;
}
.ventocalendar-calendar.layout-clean .calendar-header .nav-button,
.ventocalendar-calendar.layout-clean .calendar-header .today-button {
border: 0 none;
}
.ventocalendar-calendar.layout-clean .weekday {
background: var(--ventocalendar-bg);
}
@media (max-width: 768px) {
:root {
--ventocalendar-font-size-l: 1.25rem;
--ventocalendar-font-size-s: 0.75rem;
--ventocalendar-font-size-xs: 0.6rem;
--ventocalendar-day-min-height: 48px;
}
.ventocalendar-calendar {
padding: 1rem;
margin: 1rem auto;
}
.ventocalendar-calendar .calendar-day {
padding: 0.25rem;
padding-bottom: 2rem;
}
.ventocalendar-calendar .event-dot {
width: 6px;
height: 6px;
}
.ventocalendar-calendar .event-time {
display: none;
}
.ventocalendar-calendar .day-events {
flex-direction: row;
flex-wrap: wrap;
}
.ventocalendar-calendar .week-event-bars {
height: 50px;
margin-top: -50px;
}
.ventocalendar-calendar .event-bar {
font-size: 0;
height: 12px;
padding: 0 2px;
min-height: 12px;
}
.ventocalendar-calendar .event-bar-title {
display: none;
}
.ventocalendar-calendar .weekday {
padding: 0.5rem 0.25rem;
}
.ventocalendar-calendar .calendar-modal {
max-height: 90vh;
}
.ventocalendar-calendar .modal-header,
.ventocalendar-calendar .modal-body {
padding: 1rem;
}
.ventocalendar-calendar .event-block {
padding: 0.75rem;
}
}
@media (max-width: 480px) {
:root {
--ventocalendar-font-size-l: 1rem;
--ventocalendar-font-size-s: 0.65rem;
--ventocalendar-font-size-xs: 0.55rem;
--ventocalendar-day-min-height: 40px;
}
.ventocalendar-calendar .calendar-header {
flex-wrap: wrap;
}
.ventocalendar-calendar .calendar-header .month-year {
order: -1;
width: 100%;
}
.ventocalendar-calendar .calendar-day {
padding-bottom: 1.5rem;
}
.ventocalendar-calendar .event-dot-with-time {
gap: 3px;
}
.ventocalendar-calendar .event-dot {
width: 5px;
height: 5px;
}
.ventocalendar-calendar .week-event-bars {
height: 25px;
margin-top: -25px;
}
.ventocalendar-calendar .event-bar {
height: 6px;
font-size: 0;
min-height: 6px;
padding: 0;
border-radius: 2px;
}
.ventocalendar-calendar .event-bar-title {
display: none;
}
.ventocalendar-calendar .weekday {
padding: 0.5rem 0.125rem;
}
}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(//www.copasanpedro.es/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.eot);src:url(//www.copasanpedro.es/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(//www.copasanpedro.es/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff2) format("woff2"),url(//www.copasanpedro.es/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff) format("woff"),url(//www.copasanpedro.es/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.ttf) format("truetype"),url(//www.copasanpedro.es/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}