/* Calendario del nodo (ADR-0022): panel encima del correo y ventana del calendario. Solo variables de la paleta. */
/* Panel: texto y fechas a la izquierda y «Seleccionar fechas» a la derecha. Sin fechas: en rojo si son obligatorias y en
   ámbar si no; con fechas, en verde. Los mismos colores que el panel del correo (correo.css). */
.node-calendar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--warn-line); background: var(--warn-bg); color: var(--ink); }
.node-calendar[data-obligatorio="true"][data-estado="sin-fechas"] { border-color: var(--danger); background: var(--danger-bg); }
.node-calendar[data-estado="con-fechas"] { border-color: var(--ok); background: var(--ok-bg); }
.node-calendar-texts { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.node-calendar-info { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.node-calendar-required { font-weight: 400; }
.node-calendar[data-obligatorio="true"][data-estado="sin-fechas"] .node-calendar-required { color: var(--danger); }
.node-calendar-dates { margin: 0; font-size: 0.9375rem; color: var(--ink-2); overflow-wrap: anywhere; }
.node-calendar-open { margin-left: auto; }
.node-calendar-aviso { flex: 1 1 100%; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--surface); color: var(--danger); font-weight: 700; font-size: 0.9375rem; }
.node-calendar-aviso[hidden] { display: none; }
/* Ventana: centrada sobre un fondo semitransparente, como el envío del correo. */
.calendar-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); }
.calendar-dialog { width: 100%; max-width: 980px; max-height: calc(100vh - 40px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.calendar-title { margin: 0; font-size: 1.1875rem; }
/* Cabecera: título a la izquierda e indicación del rango a la derecha, con su hueco siempre reservado (ancho y alto fijos;
   vacía, invisible), así aparecer o desaparecer no mueve nada. En pantallas estrechas ocupa siempre su propia línea. */
.calendar-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.calendar-hint { flex: 0 0 16em; max-width: 100%; height: 1.5em; line-height: 1.5em; overflow: hidden; margin: 0 0 0 auto; text-align: right; font-weight: 700; color: var(--warn-fg); }
.calendar-hint:empty { visibility: hidden; }
.calendar-info { margin: 0; color: var(--ink-2); }
.calendar-kind { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.calendar-label { margin: 0; font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.calendar-select { border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.calendar-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.calendar-nav { display: flex; justify-content: space-between; gap: 10px; }
/* Tres meses en escritorio; uno por debajo de 760 px (lo decide calendar-dialog.js). */
.calendar-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.calendar-month-title { margin: 0 0 6px; font-size: 1rem; text-align: center; text-transform: capitalize; }
.calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar-grid th { padding: 4px 0; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.calendar-grid td { padding: 2px; text-align: center; }
/* Días: botones de 40 px como mínimo (objetivo táctil); hoy con borde, seleccionados en naranja y el interior del rango suave. */
.calendar-day { width: 100%; min-height: 40px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.calendar-day:hover { background: var(--tint); border-color: var(--deep); }
.calendar-day:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.calendar-day.hoy { border-color: var(--line-strong); font-weight: 700; }
.calendar-day.en-rango { background: var(--surface-2); }
.calendar-day.seleccionado { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 750; }
.calendar-summary { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); color: var(--ink); overflow-wrap: anywhere; }
.calendar-actions { display: flex; justify-content: flex-end; gap: 10px; }
.calendar-save { border: 0; border-radius: 9px; padding: 11px 18px; font-weight: 750; color: var(--on-brand); background: var(--brand); }
.calendar-save:hover:not(:disabled) { background: var(--brand-hover); }
.calendar-save:disabled { opacity: .55; cursor: not-allowed; }
.calendar-save:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 540px) { .calendar-dialog { padding: 14px; } .calendar-overlay { padding: 8px; } }