/* Calendario: barra compacta, rejilla a toda la altura, minicalendario y formularios.
   Colores, radios y tipografía salen de tokens.css; el color de cada elemento
   llega por [data-tint] (system.css), el mismo sistema de tintes de los espacios.
   La página cabe en la ventana (mountCalendarView fija su altura): no se desplaza. */

body[data-route="calendar"] .main-content { min-height: 0; }
.calendar-page { display: flex; flex-direction: column; gap: var(--ap-space-3); min-width: 0; padding-top: var(--ap-space-3); padding-bottom: var(--ap-space-3); }
.calendar-page.cal-fit { overflow: hidden; }
.calendar-page .icon { width: 18px; height: 18px; }

/* ---- Barra superior (como la de Google Calendar) ---- */
.cal-bar { position: relative; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ap-space-2) var(--ap-space-3); }
.cal-bar-nav, .cal-bar-actions { display: flex; align-items: center; gap: var(--ap-space-2); min-width: 0; }
.cal-title { margin: 0 var(--ap-space-2) 0 0; font-family: var(--ap-font-display); font-size: var(--ap-text-section); letter-spacing: var(--ap-tracking-title); }
.cal-range { margin: 0 0 0 var(--ap-space-1); overflow: hidden; font-size: var(--ap-text-subtitle); font-weight: var(--ap-weight-strong); text-overflow: ellipsis; white-space: nowrap; }
.cal-bar .secondary-button, .cal-bar .primary-button { gap: 6px; min-height: 40px; white-space: nowrap; }
.cal-views { display: inline-flex; padding: 3px; border-radius: var(--ap-radius-pill); background: var(--ap-glass-1); box-shadow: inset 0 0 0 1px var(--ap-line); }
.cal-views button { min-height: 34px; padding: 0 var(--ap-space-3); border: 0; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-ink-2); font: inherit; font-size: var(--ap-text-ui); cursor: pointer; }
.cal-views button.active { background: var(--ap-glass-3); color: var(--ap-ink); font-weight: var(--ap-weight-strong); box-shadow: var(--ap-shadow-1); }
.cal-views button:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 1px; }

.cal-more-menu { position: relative; }
.cal-more-menu > summary { list-style: none; cursor: pointer; }
.cal-more-menu > summary::-webkit-details-marker { display: none; }
.cal-menu-panel { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; gap: 2px; width: min(340px, calc(100vw - 32px)); padding: var(--ap-space-2); border-radius: var(--ap-radius-md); background: linear-gradient(var(--ap-glass-3), var(--ap-glass-3)), var(--ap-bg); box-shadow: var(--ap-shadow-3), inset 0 0 0 1px var(--ap-line); }
.cal-menu-panel > button, .cal-menu-panel > label { display: flex; align-items: center; gap: var(--ap-space-2); min-height: 40px; padding: 0 var(--ap-space-3); border: 0; border-radius: var(--ap-radius-xs); background: transparent; color: var(--ap-ink); font: inherit; font-size: var(--ap-text-ui); text-align: left; cursor: pointer; }
.cal-menu-panel > button:hover, .cal-menu-panel > label:hover { background: var(--ap-accent-tint); }
.cal-menu-panel > p { margin: var(--ap-space-1) var(--ap-space-3) var(--ap-space-1); color: var(--ap-muted); font-size: var(--ap-text-meta); line-height: var(--ap-leading-ui); }
/* Importar/Exportar en planes sin ellos: etiqueta del plan que los incluye. */
.cal-plan-badge { flex: none; margin-left: auto; padding: 2px 8px; border-radius: var(--ap-radius-pill); background: var(--ap-accent-soft); color: var(--ap-ink-2); font-size: var(--ap-text-meta); white-space: nowrap; }

/* ---- Distribución ---- */
.cal-layout { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--ap-space-3); min-height: 0; }
.cal-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--ap-radius-lg); background: var(--ap-glass-2); box-shadow: inset 0 0 0 1px var(--ap-glass-edge), var(--ap-shadow-1); }
.cal-main.cal-view-agenda { overflow-y: auto; overscroll-behavior: contain; }
.cal-side { display: flex; flex-direction: column; gap: var(--ap-space-4); min-height: 0; overflow-y: auto; padding: var(--ap-space-1) 2px; }
.cal-side-section { display: grid; gap: var(--ap-space-2); }
.cal-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-2); }
.cal-side-head h2 { margin: 0; font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); }
.cal-side-head h2 small { color: var(--ap-muted); font-weight: var(--ap-weight-body); }
.cal-side-head .icon-button { width: 32px; height: 32px; }
.cal-panel-note { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); line-height: var(--ap-leading-ui); }
.cal-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tint-mono, var(--ap-muted)); }

/* ---- Minicalendario ---- */
.cal-mini-head { display: flex; align-items: center; justify-content: space-between; }
.cal-mini-head strong { font-size: var(--ap-text-ui); }
.cal-mini-head span { display: flex; }
.cal-mini-head .icon-button { width: 30px; height: 30px; }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.cal-mini-grid > span { padding-bottom: 2px; color: var(--ap-muted); font-size: 11px; }
.cal-mini-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ap-ink); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-mini-day:hover { background: var(--ap-accent-tint); }
.cal-mini-day.outside { color: var(--ap-muted); opacity: 0.6; }
.cal-mini-day.in-view { background: var(--ap-accent-tint); border-radius: 6px; }
.cal-mini-day.today { background: var(--ap-brand); color: var(--ap-on-brand); font-weight: var(--ap-weight-strong); border-radius: 50%; }
.cal-mini-day.busy::after { content: ""; position: absolute; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.cal-mini-day:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 1px; }

/* ---- Elemento (bloque o tarea) ---- */
.cal-event {
  position: relative; display: flex; align-items: flex-start; gap: 4px; width: 100%; height: 100%; min-height: 22px; box-sizing: border-box;
  border-left: 3px solid var(--tint-mono, var(--ap-accent)); border-radius: var(--ap-radius-xs);
  background: var(--tint-bg, var(--ap-accent-soft)); color: var(--ap-ink); overflow: hidden;
  transition: box-shadow var(--ap-dur-fast) var(--ap-ease), opacity var(--ap-dur-fast) var(--ap-ease);
}
.cal-event:hover { box-shadow: var(--ap-shadow-1); }
.cal-event-open { display: flex; flex: 1; align-items: flex-start; gap: 4px; min-width: 0; height: 100%; padding: 3px 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--ap-text-meta); line-height: 1.25; text-align: left; cursor: pointer; }
.cal-event-open:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: -2px; border-radius: var(--ap-radius-xs); }
.cal-event-text { display: grid; flex: 1; min-width: 0; }
.cal-event-text strong { overflow: hidden; font-weight: var(--ap-weight-strong); text-overflow: ellipsis; white-space: nowrap; }
.cal-event:not(.compact) .cal-event-text strong { white-space: normal; }
.cal-event-text small { overflow: hidden; color: var(--ap-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.cal-event.is-done .cal-event-text strong { text-decoration: line-through; opacity: 0.65; }
.cal-task { border-left-style: dashed; }
.cal-link-mark .icon { width: 13px; height: 13px; color: var(--tint-mono, var(--ap-muted)); }
.cal-event-check { display: grid; flex: none; place-items: center; width: 16px; height: 16px; margin: 4px 0 0 4px; padding: 0; border: 1.5px solid var(--tint-mono, var(--ap-muted)); border-radius: 5px; background: var(--ap-glass-3); color: var(--ap-glass-3); cursor: pointer; }
.cal-event-check.done { background: var(--tint-mono, var(--ap-accent)); }
.cal-event-check .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.cal-event-check:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 1px; }
.cal-event[data-calendar-draggable] .cal-event-open { cursor: grab; }
.cal-resize { position: absolute; right: 0; bottom: 0; left: 0; height: 7px; cursor: ns-resize; }
.cal-resize::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--tint-mono); opacity: 0; transition: opacity var(--ap-dur-fast); }
.cal-event:hover .cal-resize::after { opacity: 0.6; }
.cal-event.is-dragging { opacity: 0.35; }
body.cal-dragging, body.cal-dragging * { cursor: grabbing !important; user-select: none; }

/* ---- Semana y día ---- */
.cal-grid-wrap { --cal-hour: 44px; --cal-head: 52px; --cal-sticky-bg: linear-gradient(var(--ap-glass-3), var(--ap-glass-3)), var(--ap-bg); flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cal-grid { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-width: calc(52px + var(--cal-days) * 72px); }
.cal-grid-corner, .cal-grid-heads { position: sticky; top: 0; z-index: 5; height: var(--cal-head); background: var(--cal-sticky-bg); }
.cal-allday-label, .cal-allday-row { position: sticky; top: var(--cal-head); z-index: 5; background: var(--cal-sticky-bg); }
.cal-grid-heads, .cal-allday-row, .cal-day-cols { display: grid; grid-template-columns: repeat(var(--cal-days), minmax(0, 1fr)); }
.cal-day-head { display: grid; justify-items: center; align-content: center; gap: 1px; height: var(--cal-head); padding: 0; border: 0; background: transparent; color: var(--ap-muted); font: inherit; font-size: 11px; letter-spacing: 0.04em; cursor: pointer; }
.cal-day-head strong { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ap-ink); font-size: var(--ap-text-body); letter-spacing: 0; }
.cal-day-head.today strong { background: var(--ap-brand); color: var(--ap-on-brand); }
.cal-day-head:hover strong { box-shadow: inset 0 0 0 1px var(--ap-line-strong); }
.cal-day-head:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: -3px; }
.cal-allday-label { display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--ap-space-2) 0 2px; border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line-strong); color: var(--ap-muted); font-size: 10px; line-height: 1.15; text-align: right; }
.cal-allday-row { border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line-strong); }
.cal-allday-cell { display: grid; align-content: start; gap: 2px; min-height: 30px; max-height: 76px; overflow-y: auto; padding: 3px; border-left: 1px solid var(--ap-line); }
.cal-allday-cell .cal-event { height: auto; }
.cal-hour-labels { display: grid; grid-auto-rows: var(--cal-hour); }
.cal-hour-labels span { padding: 2px var(--ap-space-2) 0 0; color: var(--ap-muted); font-size: 11px; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.cal-day-col { position: relative; height: calc(var(--cal-hours) * var(--cal-hour)); border-left: 1px solid var(--ap-line); background-image: linear-gradient(to top, var(--ap-line) 1px, transparent 1px); background-size: 100% var(--cal-hour); cursor: cell; touch-action: pan-y; }
.cal-day-col.today { background-color: color-mix(in srgb, var(--ap-accent) 4%, transparent); }
.cal-placed {
  position: absolute; z-index: 2; box-sizing: border-box; padding: 1px 2px;
  top: calc(var(--cal-start) * var(--cal-hour) / 60);
  height: calc(var(--cal-length) * var(--cal-hour) / 60);
  left: calc(var(--cal-lane) * 100% / var(--cal-lanes));
  width: calc(100% / var(--cal-lanes));
  cursor: default;
}
.cal-ghost {
  position: absolute; z-index: 4; right: 3px; left: 3px; box-sizing: border-box; padding: 3px 6px;
  top: calc(var(--cal-start) * var(--cal-hour) / 60);
  height: calc(var(--cal-length) * var(--cal-hour) / 60);
  border-radius: var(--ap-radius-xs); background: color-mix(in srgb, var(--ap-accent) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--ap-accent);
  color: var(--ap-ink); font-size: var(--ap-text-meta); font-weight: var(--ap-weight-strong); pointer-events: none;
}
.cal-now { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--cal-start) * var(--cal-hour) / 60); height: 2px; background: var(--ap-brand); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ap-brand); }

/* ---- Mes ---- */
.cal-month { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: var(--ap-space-2); }
.cal-month-heads, .cal-month-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-month-cells { flex: 1; grid-auto-rows: minmax(64px, 1fr); }
.cal-month-heads span { padding: var(--ap-space-1); color: var(--ap-muted); font-size: var(--ap-text-meta); text-align: center; }
.cal-month-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden; padding: 3px; border-top: 1px solid var(--ap-line); border-left: 1px solid var(--ap-line); }
.cal-month-cell:nth-child(7n + 1) { border-left: 0; }
.cal-month-cell .cal-event { flex: none; height: auto; }
.cal-month-cell.outside { opacity: 0.55; }
.cal-month-day { align-self: flex-start; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-ink); font: inherit; font-size: var(--ap-text-meta); font-weight: var(--ap-weight-strong); cursor: copy; }
.cal-month-day:hover { background: var(--ap-accent-tint); }
.cal-month-cell.today .cal-month-day { background: var(--ap-brand); color: var(--ap-on-brand); }
.cal-more { align-self: flex-start; padding: 0 4px; border: 0; background: transparent; color: var(--ap-accent); font: inherit; font-size: var(--ap-text-meta); font-weight: var(--ap-weight-strong); cursor: pointer; }

/* ---- Agenda ---- */
.cal-agenda { display: grid; gap: var(--ap-space-4); padding: var(--ap-space-4); }
.cal-agenda-day h3 { margin: 0 0 var(--ap-space-2); font-size: var(--ap-text-body); }
.cal-agenda-day.today h3 { color: var(--ap-accent); }
.cal-agenda-items { display: grid; gap: var(--ap-space-2); }
.cal-agenda-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: var(--ap-space-3); padding: var(--ap-space-2) 0; border-top: 1px solid var(--ap-line); }
.cal-agenda-time { padding-top: 4px; color: var(--ap-ink-2); font-size: var(--ap-text-meta); font-variant-numeric: tabular-nums; }
.cal-agenda-main { display: grid; gap: var(--ap-space-1); min-width: 0; }
.cal-agenda-main .cal-event { height: auto; }
.cal-agenda-meta { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.cal-main .empty-state { margin: auto; }

/* ---- Enlaces ---- */
.cal-links { display: flex; flex-wrap: wrap; gap: var(--ap-space-2); margin: 0; padding: 0; list-style: none; }
.cal-links a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 10px; border-radius: var(--ap-radius-pill); background: var(--ap-glass-2); color: var(--ap-accent); font-size: var(--ap-text-meta); font-weight: var(--ap-weight-ui); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ap-line); }
.cal-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-links a .icon { flex: none; width: 15px; height: 15px; }
.cal-links a:hover { text-decoration: underline; }
.cal-links a:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 2px; }

/* ---- Panel lateral: Para hoy y actividades ---- */
.cal-task-list, .cal-activity-list, .cal-activity-manage { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cal-task-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; }
.cal-check { display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--tint-mono, var(--ap-muted)); border-radius: 5px; background: var(--ap-glass-3); }
.cal-check-button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.cal-check-button:hover .cal-check { background: var(--tint-bg); }
.cal-check-button:focus-visible, .cal-task-open:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 2px; }
.cal-task-open { display: grid; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: var(--ap-ink); font: inherit; text-align: left; cursor: pointer; }
.cal-task-open strong { overflow: hidden; font-size: var(--ap-text-meta); text-overflow: ellipsis; white-space: nowrap; }
.cal-task-open small { color: var(--ap-muted); font-size: 12px; }
.cal-task-row.overdue small { color: var(--ap-danger); font-weight: var(--ap-weight-ui); }
.cal-activity-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ap-space-2); min-height: 26px; font-size: var(--ap-text-meta); }
.cal-activity-list small { color: var(--ap-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---- Inicio: hoy en la agenda ---- */
.home-calendar { margin-bottom: var(--ap-space-6); }
.home-calendar .cal-today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ap-space-2); }
.home-calendar .cal-event { min-height: 52px; height: auto; }
.home-calendar .cal-event-open { padding: var(--ap-space-2) var(--ap-space-3); }
.home-calendar .icon { width: 18px; height: 18px; }

/* ---- Formulario ---- */
/* El ancho va en el propio diálogo: si solo se ensancha el contenido, el diálogo (620 px) lo recorta.
   En móvil (≤ 760 px) el modal es una hoja inferior a todo el ancho (styles.css): no se toca. */
@media (min-width: 761px) { .modal.cal-modal { width: min(640px, calc(100vw - 32px)); } }
.modal.cal-modal { overflow-x: hidden; }
.cal-form { gap: var(--ap-space-4); }
.cal-form > *, .cal-form-row > *, .cal-when > * { min-width: 0; }
.cal-form input, .cal-form select, .cal-form textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cal-form .icon { width: 16px; height: 16px; }
.cal-form .hidden { display: none !important; }

/* Tipo: dos pestañas, sin fieldset (el fieldset heredado pinta su fondo detrás del título). */
.cal-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--ap-radius-md); background: var(--ap-glass-1); box-shadow: inset 0 0 0 1px var(--ap-line); }
.cal-kind label { position: relative; display: block; cursor: pointer; }
.cal-kind input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cal-kind span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--ap-space-2); border-radius: var(--ap-radius-sm); color: var(--ap-ink-2); font-size: var(--ap-text-ui); font-weight: var(--ap-weight-ui); transition: background var(--ap-dur-fast) var(--ap-ease); }
.cal-kind label:hover span { color: var(--ap-ink); }
.cal-kind input:checked + span { background: var(--ap-glass-3); color: var(--ap-accent); font-weight: var(--ap-weight-strong); box-shadow: var(--ap-shadow-1); }
.cal-kind input:focus-visible + span { outline: 2.5px solid var(--ap-accent); outline-offset: 1px; }

/* Día y horario en una línea: [día] [09:00 – 10:00]. */
.cal-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--ap-space-3); }
.cal-form[data-all-day="1"] .cal-when { grid-template-columns: minmax(0, 1fr); }
.cal-form[data-all-day="1"] .cal-when-times, .cal-form[data-all-day="1"] [data-action="calendar-fill-free-slot"] { display: none; }
.cal-when-times > span { color: var(--ap-ink-2); font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); }
.cal-time-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--ap-space-2); }
.cal-time-sep { color: var(--ap-muted); }
.cal-time { position: relative; }
.cal-time input { width: 100%; min-height: 44px; padding: 0 var(--ap-space-3); border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-sm); background: var(--ap-glass-2); color: var(--ap-ink); font: inherit; font-size: var(--ap-text-body); font-variant-numeric: tabular-nums; text-align: center; cursor: pointer; }
.cal-time input:focus { outline: 2.5px solid var(--ap-accent); outline-offset: 1px; cursor: text; }
.cal-time-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-height: 232px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border-radius: var(--ap-radius-sm); background: linear-gradient(var(--ap-glass-3), var(--ap-glass-3)), var(--ap-bg); box-shadow: var(--ap-shadow-3), inset 0 0 0 1px var(--ap-line); overscroll-behavior: contain; }
.cal-time-list li { padding: 7px var(--ap-space-3); border-radius: var(--ap-radius-xs); color: var(--ap-ink); font-size: var(--ap-text-ui); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.cal-time-list li small { color: var(--ap-muted); }
.cal-time-list li:hover, .cal-time-list li.active { background: var(--ap-accent-tint); }
.cal-time-list li[aria-selected="true"] { color: var(--ap-accent); font-weight: var(--ap-weight-strong); }
.cal-when-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ap-space-2); margin-top: calc(var(--ap-space-2) * -1); }
.cal-inline-check { display: inline-flex; align-items: center; gap: var(--ap-space-2); min-height: 40px; font-size: var(--ap-text-ui); cursor: pointer; }
.cal-inline-check input { width: 18px; height: 18px; accent-color: var(--ap-accent); }
.cal-link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--ap-space-2); border: 0; border-radius: var(--ap-radius-xs); background: transparent; color: var(--ap-accent); font: inherit; font-size: var(--ap-text-ui); font-weight: var(--ap-weight-ui); cursor: pointer; }
.cal-link-button:hover { background: var(--ap-accent-tint); }
.cal-link-button:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 1px; }
.cal-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ap-space-3); }
.cal-new-activity { display: grid; gap: var(--ap-space-3); padding: var(--ap-space-3); border-radius: var(--ap-radius-sm); background: var(--ap-glass-1); }
.cal-days, .cal-links-field { display: grid; gap: var(--ap-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cal-days legend, .cal-links-field legend { margin-bottom: var(--ap-space-2); padding: 0; color: var(--ap-ink-2); font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); }
.cal-days > div { display: flex; flex-wrap: wrap; gap: var(--ap-space-2); }
.cal-day-check { position: relative; cursor: pointer; }
.cal-day-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cal-day-check span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ap-glass-1); box-shadow: inset 0 0 0 1px var(--ap-line-strong); color: var(--ap-ink-2); font-weight: var(--ap-weight-strong); }
.cal-day-check input:checked + span { background: var(--ap-accent); box-shadow: none; color: var(--ap-on-accent); }
.cal-day-check input:focus-visible + span { outline: 2.5px solid var(--ap-accent); outline-offset: 2px; }
.cal-links-field .cal-link-button { justify-self: start; }
.cal-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: var(--ap-space-2); align-items: center; margin-bottom: var(--ap-space-2); }
.cal-link-row input { min-width: 0; min-height: var(--ap-control); padding: 0 var(--ap-space-3); border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-sm); background: var(--ap-glass-2); color: var(--ap-ink); font: inherit; font-size: var(--ap-text-ui); }
.cal-link-row input:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 1px; }
.cal-conflict:empty { display: none; }
.cal-conflict { padding: var(--ap-space-2) var(--ap-space-3); border-radius: var(--ap-radius-sm); background: color-mix(in srgb, var(--ap-warning) 14%, transparent); color: var(--ap-ink); }

/* ---- Detalle y actividades ---- */
.cal-detail { display: grid; gap: var(--ap-space-3); }
.cal-detail-kicker { display: flex; align-items: center; gap: var(--ap-space-2); margin: 0; color: var(--ap-ink-2); font-size: var(--ap-text-meta); font-weight: var(--ap-weight-ui); letter-spacing: 0.02em; }
.cal-detail-when { margin: 0; font-size: var(--ap-text-subtitle); font-weight: var(--ap-weight-strong); }
.cal-detail-meta { display: flex; align-items: center; gap: var(--ap-space-2); margin: 0; color: var(--ap-ink-2); }
.cal-detail-meta .icon { width: 18px; height: 18px; color: var(--tint-mono, var(--ap-muted)); }
.cal-detail-space { padding: 0; border: 0; background: transparent; color: var(--ap-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.cal-detail-notes { margin: 0; padding: var(--ap-space-3); border-radius: var(--ap-radius-sm); background: var(--ap-glass-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.cal-activities { display: grid; gap: var(--ap-space-4); }
.cal-activities h3 { margin: 0; font-size: var(--ap-text-subtitle); }
.cal-activity-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ap-space-2); padding: var(--ap-space-2) var(--ap-space-3); border-radius: var(--ap-radius-sm); background: var(--tint-bg); }
.cal-activity-row span:nth-child(2) { display: grid; min-width: 0; }
.cal-activity-row small { color: var(--ap-ink-2); font-size: var(--ap-text-meta); }

/* ---- Pantallas medianas: sin panel lateral (como Google en tableta) ---- */
@media (max-width: 1180px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-side { display: none; }
}

@media (max-width: 900px) {
  .cal-title { display: none; }
  .cal-bar { gap: var(--ap-space-2); }
  .cal-bar-nav { flex: 1 1 100%; }
  .cal-bar-actions { flex: 1 1 100%; justify-content: space-between; }
}

@media (max-width: 640px) {
  .calendar-page { padding-top: var(--ap-space-2); gap: var(--ap-space-2); }
  .cal-bar-actions { flex-wrap: wrap; justify-content: flex-start; }
  .cal-views { flex: 1 1 100%; }
  .cal-views button { flex: 1; }
  .cal-bar-actions > .secondary-button, .cal-bar-actions > .primary-button { flex: 1; justify-content: center; }
  .cal-range { font-size: var(--ap-text-body); }
  .cal-views button { padding: 0 10px; font-size: var(--ap-text-meta); }
  .cal-bar-actions .secondary-button, .cal-bar-actions .primary-button { padding: 0 10px; }
  .cal-bar-actions .secondary-button .icon { display: none; }
  /* Semana en el móvil: los siete días caben, sin desplazamiento lateral. */
  .cal-grid { grid-template-columns: 38px minmax(0, 1fr); min-width: 0; }
  .cal-grid-wrap { --cal-head: 40px; }
  .cal-allday-cell { min-height: 26px; }
  .cal-day-head strong { width: 26px; height: 26px; font-size: var(--ap-text-ui); }
  .cal-allday-label { justify-content: center; padding: 2px; font-size: 9px; text-align: center; }
  .cal-hour-labels span { padding-right: 4px; font-size: 10px; }
  .cal-placed { padding: 1px; }
  .cal-event-open { padding: 2px 3px; font-size: 11px; }
  .cal-event-text small, .cal-link-mark { display: none; }
  .cal-event-check { width: 14px; height: 14px; margin: 3px 0 0 3px; }
  .cal-month-cells { grid-auto-rows: minmax(52px, 1fr); }
  .cal-month-cell .cal-event-text strong { font-size: 10px; }
  .cal-agenda { padding: var(--ap-space-3); }
  .cal-agenda-row { grid-template-columns: minmax(0, 1fr); gap: var(--ap-space-1); }
  .cal-link-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cal-link-row input[name="linkLabel"] { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .cal-when { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cal-event, .cal-kind span, .cal-resize::after { transition: none; }
}