/* -- Tooltip genérico para celdas de calendario -- */ .tooltip-scope .tooltip-cell { position: relative; cursor: help; } .tooltip-scope .tooltip-cell .tooltip-bubble { position: absolute; top: 100%; left: 50%; transform: translateX(calc(-50% + var(--tx, 0px))); min-width: 220px; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px 8px; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.15); z-index: 50; font-size: 12px; line-height: 1.35; display: none; white-space: pre-line; } .tooltip-scope .tooltip-cell.is-open .tooltip-bubble { display: block; } .tooltip-scope .tooltip-bubble .tooltip-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; } .tooltip-scope .tooltip-bubble .tooltip-close { border: 0; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; } .tooltip-scope .tooltip-bubble .tooltip-content { font-weight: 400; } .tooltip-scope .tooltip-cell .day-num { display: inline-block; } /* modo arriba cuando no hay espacio inferior */ .tooltip-scope .tooltip-cell.is-above .tooltip-bubble { top: auto; bottom: 100%; } .tooltip-scope .tooltip-cell.is-above .tooltip-bubble::after { top: auto; bottom: -6px; border-width: 6px 6px 0 6px; border-color: #cfcfcf transparent transparent transparent; } .tooltip-scope .tooltip-cell.is-above .tooltip-bubble::before { top: auto; bottom: -5px; border-width: 5px 5px 0 5px; border-color: #fff transparent transparent transparent; } .tooltip-scope .tooltip-content div { border: 1px solid; margin: 2px; } /* Modo fijo: el tooltip se ancla al viewport para no salirse en móvil */ .tooltip-scope .tooltip-cell.is-fixed .tooltip-bubble { position: fixed; left: 8px; right: 8px; max-width: none; width: auto; transform: none; top: var(--fixed-top, auto); bottom: var(--fixed-bottom, auto); } /* En modo fijo ocultamos la flecha (ya no tiene sentido visual) */ .tooltip-scope .tooltip-cell.is-fixed .tooltip-bubble::before, .tooltip-scope .tooltip-cell.is-fixed .tooltip-bubble::after { display: none; } /* Cuando el tooltip está en portal (fixed en ), ocultamos flechas */ .tooltip-portal::before, .tooltip-portal::after { display: none !important; }