#calendar-section {
  position: relative;
}

#calendar-section .event-tooltip {
  position: absolute;
}
/* Capado global y variables de densidad */
:root {
  --cap-height: 800px;
  --gap: 15px;
  --day-height: 120px;
  --day-gap: 15px;
  --header-font: 18px;
  --event-font: 15px;
  --control-font: 14px;
  --control-pad-v: 8px;
  --control-pad-h: 12px;
}

body #calendar-section { font-family: 'BentonSansFB', sans-serif; }

#calendar-section { width: 100vw; max-width: 100%; margin: auto; font-family: 'BentonSansFB', sans-serif; max-height: var(--cap-height); overflow: hidden; display: flex; flex-direction: column; }
#calendar-section h2 { text-align: center; }
#calendar { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: var(--day-gap); padding: 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; flex: 1 1 auto; overflow-y: hidden; }
#weekday-headers { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 15px; padding: 0 15px; position: relative; overflow-x: auto; overflow-y: hidden; background: #fff; scrollbar-width: none; -ms-overflow-style: none; box-sizing: border-box; }
#weekday-headers::-webkit-scrollbar { display: none; }
#calendar > * { min-width: 0; }
.day-header { font-weight: bold; text-align: center; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day { border: 1px solid #f3f3f3; height: var(--day-height); position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; overflow: hidden; background: #f3f3f3; }
.day-number { position: absolute; top: 5px; right: 5px; font-size: 18px; font-weight: normal; color: black; }
.day.has-event .day-number { color: white; }
.day.current-day .day-number { font-weight: bold; font-size: 20px; color: #c670da; }
.event-container { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.event { flex-grow: 1; font-size: var(--event-font); color: #fff; box-sizing: border-box; display: flex; align-items: center; cursor: pointer; padding: 4px 5px; min-width: 0; width: 100%; }
.event-aggregator { font-size: calc(var(--event-font) - 1px); color: #702082; padding: 2px 4px; cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: none; }
.event-aggregator:hover { text-decoration: underline; }
.event span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; }
.event-tooltip { display: none; position: absolute; background: white; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; width: 300px; max-height: calc(var(--cap-height) - 150px); overflow-y: auto; }
.tooltip-header { display: flex; justify-content: right; align-items: right; }
.tooltip-header button { background: none; border: none; cursor: pointer; font-size: 16px; }
.tooltip-title { font-size: 18px; font-weight: bold; margin: 10px 0; }
.event-tooltip::-webkit-scrollbar { width: 6px; }
.event-tooltip::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); border-radius: 10px; }
.event-tooltip::-webkit-scrollbar-track { background-color: transparent; }
.event-tooltip { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.1) transparent; max-height: 250px; overflow-y: auto; }
#calendar-section button, #calendar-section select { font-size: var(--control-font); padding: var(--control-pad-v) var(--control-pad-h); background-color: transparent; border: 1px solid transparent; color: #333; cursor: pointer; border-radius: 0px; transition: all 0.3s ease; }
#btn-today { background-color: #702082; color: white; border: 2px solid #702082; font-weight: bold; }
#calendar-section button:not(#btn-today) { background-color: transparent; color: #702082; border: none; }
#calendar-section button:hover { background-color: #f8f9fa; border-color: #007bff; }
#calendar-section select { background-color: transparent; border: 1px solid #e4e4e4; }
#calendar-section select:focus { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); }
#social-share-icons a { margin: 5px; font-size: 24px; color: #555; text-decoration: none; transition: color 0.3s ease; }
#social-share-icons a:hover { color: #007bff; }
.mali-powered { font-size: 10px; color: #f0f0f0; }

@media (max-width: 640px) {
  #calendar-container { position: sticky; top: 0; z-index: 5; background: #fff; padding: 8px 12px; border-bottom: 1px solid #eee; }
  #calendar { display: flex !important; flex-direction: column; gap: 8px; padding: 8px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: none; flex: 1 1 auto; }
  .day-header { display: none !important; }
  #weekday-headers { display: none !important; }
  .day { min-width: 0; width: 100% !important; height: auto !important; margin-bottom: 8px; box-shadow: 0 1px 4px #0001; background: #fff; position: static !important; padding: 8px; display: grid; grid-template-columns: 3rem 1fr; column-gap: 8px; align-items: start; overflow: visible !important; }
  .day-number { position: static !important; grid-column: 1; grid-row: 1; align-self: start; text-align: center; font-size: 1.1rem; font-weight: normal; margin: 0; color: #000000; }
  .day.has-event .day-number { color: #000000; }
  .day.current-day .day-number { font-weight: bold; font-size: 20px; color: #c670da; }
  .event-container { min-height: 0; max-height: none; height: auto !important; overflow: visible; display: flex; flex-direction: column; gap: 6px; grid-column: 2; grid-row: 1; }
  .event { min-height: 40px; font-size: 0.95rem; margin: 0; padding: 8px 10px; flex: 0 0 auto; align-items: center; border-radius: 2px; }
  .event-tooltip { width: 300px; max-width: 300px; }
  .day:empty { display: none !important; }
}

@media (max-width: 640px) and (max-height: 968px) {
  html, body, #calendar-section { overflow-x: hidden !important; }
  #calendar-container { position: static !important; top: auto !important; }
  #weekday-headers { display: none !important; }
  #calendar { display: flex !important; flex-direction: column; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior-x: contain; }
}

#calendar-section.compact { --gap: 12px; --day-gap: 10px; --day-height: 110px; --header-font: 16px; --event-font: 14px; --control-font: 13px; --control-pad-v: 6px; --control-pad-h: 10px; }
#calendar-section.compact h2#month-year { font-size: 20px; margin: 4px 0; }
#calendar-section.compact #calendar { gap: var(--day-gap); }
#calendar-section.compact .day-header { padding: 4px 8px; font-size: 13px; }
#calendar-section.compact .day-number { font-size: 16px; }
#calendar-section.compact .event { padding: 3px 4px; }
#calendar-section.compact #weekday-headers { padding: 0 10px; }
#calendar-section.compact #calendar { padding: 10px; }

@media (max-width: 640px) {
  #calendar-section.compact .day { grid-template-columns: 2.6rem 1fr; }
  #calendar-section.compact .event span { display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}