/* «My calendar» y el botón «Save» del calendario (t170, P9).
 *
 * Lo cargan `calendar.html` y `my_calendar*.html`.
 * Reutiliza la agenda y la rejilla de mes del calendario (`.cal-agenda`,
 * `.cal-grid`, `.cal-cell` en `blockboard.css`); aquí sólo lo nuevo. Sólo
 * tokens de color, comprobado en los dos temas.
 */

/* Las pestañas «BlockBoard calendar» · «My calendar». */
.mc-tabs { margin: 0 0 var(--s4); }
.mc-tabs .chip { min-height: 32px; padding: 0 var(--s3); }

/* El botón «Save» de cada evento. Pequeño, a la derecha de la fila, con su
   objetivo táctil de 28 px. */
.cal-size .cal-save-f, .cal-size > .cal-save { margin-left: var(--s2); }
.cal-save-f { display: inline-flex; margin: 0; }
.cal-save {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-height: 28px; padding: 0 var(--s2); border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: transparent; box-shadow: none;
  font-size: var(--size-2xs); font-weight: 500; color: var(--text-muted);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.cal-save:hover { border-color: var(--accent); color: var(--accent); background: transparent; text-decoration: none; }
.cal-save.on { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.cal-save[aria-busy="true"] { opacity: .6; }
.cal-item .cal-size { display: inline-flex; align-items: center; justify-content: flex-end; }

/* La barra de «My calendar»: lista o mes, y «Add date». */
.mc-bar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.mc-add { min-height: 36px; }
.mc-tz { font-size: var(--size-2xs); margin: 0 0 var(--s3); }
.mc-room { font-size: var(--size-2xs); margin-top: var(--s4); }
.mc-empty p { margin: var(--s2) 0 0; color: var(--text-muted); font-size: var(--size-sm); }
.mc-empty .btn { margin-right: var(--s3); }

/* La lista: la agenda del calendario, con las fechas propias en acento. */
.mc-item.k-mine { --k: var(--accent); }
.mc-item .cal-title a { color: var(--text); }
.mc-edit { font-size: var(--size-2xs); color: var(--text-muted); min-height: 28px;
  display: inline-flex; align-items: center; padding: 0 var(--s1); }
.mc-detail { display: flex; flex-wrap: wrap; gap: 4px var(--s2); align-items: baseline; }
.mc-rem { color: var(--text-muted); white-space: nowrap; }
.mc-rem::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 5px; vertical-align: 1px; }
.mc-note { color: var(--text-faint); flex-basis: 100%; }
.mc-flag { color: var(--text-muted); font-size: var(--size-2xs); }
.mc-flag.warn { color: var(--warn); }
.mc-past { margin-top: var(--s5); }
.mc-past summary { cursor: pointer; font-size: var(--size-sm); color: var(--text-muted); min-height: 28px; }
.mc-past .cal-items { margin-top: var(--s2); opacity: .8; }

/* El mes. */
.mc-monthbar { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.mc-month { font-size: var(--size-lg); margin: 0 var(--s2); min-width: 0; }
.mc-monthbar .btn.sm { min-width: 32px; min-height: 32px; justify-content: center; }
.mc-today { font-size: var(--size-sm); margin-left: auto; }
.mc-monthcard { overflow: hidden; }
.mc-cell { min-height: 96px; min-width: 0; }
.mc-cell.has .cal-cell-date { color: var(--text); font-weight: 600; }
.mc-chip { display: block; font-size: var(--size-2xs); line-height: 1.35; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid var(--accent); padding: 1px 0 1px 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mc-chip.bb { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 8%, transparent); }
.mc-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-chip:hover { text-decoration: none; background: var(--surface-hover); }
.mc-more { font-size: var(--size-2xs); }
.mc-monthlist { display: none; }

/* Los formularios. */
.mc-form { max-width: 640px; margin-bottom: var(--s4); }
.mc-title { font-size: var(--size-lg); margin: var(--s1) 0; }
.mc-whenline { margin: 0 0 var(--s3); font-variant-numeric: tabular-nums; }
.mc-when { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.mc-form textarea { width: 100%; font: inherit; }
.mc-form select { max-width: 100%; }
.mc-hint { font-size: var(--size-2xs); margin: 0; }
.mc-js .mc-at[data-mc-at]:not(.on) { display: none; }
.mc-channels { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0;
  padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.mc-channels legend { padding: 0 4px; font-size: var(--size-sm); color: var(--text); }
.stack .mc-channels label.mc-ch { flex-direction: row; align-items: flex-start; gap: var(--s2);
  font-size: var(--size-sm); min-height: 28px; cursor: pointer; color: var(--text); }
.stack .mc-channels input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; padding: 0;
  margin: 0; flex: 0 0 18px; accent-color: var(--accent); }
.mc-channels .muted { font-size: var(--size-xs); }
.mc-rems { list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.mc-rems li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s1) 0; border-bottom: 1px solid var(--line); font-size: var(--size-sm); }
.mc-rems form { margin: 0; }
.mc-rems .btn.xs { min-height: 28px; }
.mc-remove { margin: var(--s4) 0; }
.mc-remove button { color: var(--danger); }

@media (max-width: 720px) {
  .mc-when { grid-template-columns: minmax(0, 1fr); }
  /* En el móvil la rejilla marca los días con un punto por fecha y la lista
     del mes va debajo: siete columnas de 50 px no dejan leer un título. */
  .mc-cell { min-height: 48px; padding: 3px 2px; flex-direction: row; flex-wrap: wrap;
    align-content: flex-start; gap: 3px; }
  .mc-cell .cal-cell-date { flex-basis: 100%; }
  .mc-chip { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: var(--accent); font-size: 0; pointer-events: none; }
  .mc-chip.bb { background: var(--info); }
  .mc-more { display: none; }
  .mc-monthlist { display: flex; margin-top: var(--s3); }
  .mc-grid .cal-head { padding: 4px 2px; text-align: center; }
  /* A 375 px la cifra y el botón no caben en una línea (medido: 52 px de
     scroll de la página). El botón se queda en su signo, «＋» o «✓», con su
     objetivo de 28 px, y la cifra puede partirse. */
  .cal-item .cal-size { grid-column: 4; flex-wrap: wrap; white-space: normal; gap: 2px;
    min-width: 0; text-align: right; }
  .cal-size .cal-save-f, .cal-size > .cal-save { margin-left: 0; }
  .cal-save { min-width: 28px; padding: 0 6px; }
  .cal-save-w { display: none; }
}