/*
 * Calendario. Colores por tipo: tarea gris, cita azul, reunión violeta. Son
 * los únicos colores de la pantalla, para que se distingan de un vistazo.
 */
:root { --cal-tarea: #6b7280; --cal-cita: #2563eb; --cal-reunion: #7c3aed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cal-tarea: #9ca3af; --cal-cita: #60a5fa; --cal-reunion: #a78bfa; }
}
:root[data-theme="dark"] { --cal-tarea: #9ca3af; --cal-cita: #60a5fa; --cal-reunion: #a78bfa; }

.cal-cab { flex-wrap: wrap; gap: .5rem; }
.cal-nav { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.cal-mes { min-width: 9rem; text-align: center; }
.cal-leyenda { display: flex; gap: 1rem; margin: 0 0 .5rem; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }

.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-sem { background: var(--surface-2); text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); padding: .35rem 0; }
.cal-dia {
  all: unset; box-sizing: border-box; cursor: pointer; background: var(--surface);
  min-height: 6.2rem; padding: .3rem .35rem; display: flex; flex-direction: column; gap: .2rem; overflow: hidden;
}
.cal-dia:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-fuera { background: var(--surface-2); color: var(--muted); }
.cal-num { font-size: .82rem; font-weight: 600; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; }
.cal-hoy .cal-num { background: var(--accent); color: var(--accent-text); }
.cal-sel { box-shadow: inset 0 0 0 2px var(--accent); }

.cal-punto { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cal-tarea); }
.cal-punto.cal-cita { background: var(--cal-cita); }
.cal-punto.cal-reunion { background: var(--cal-reunion); }
.cal-puntos { display: none; gap: 3px; flex-wrap: wrap; }
.cal-hecha { opacity: .4; }

.cal-items { display: grid; gap: 2px; min-width: 0; }
.cal-item { font-size: .72rem; line-height: 1.3; padding: .05rem .3rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--cal-tarea); background: var(--surface-2); }
.cal-item.cal-cita { border-left-color: var(--cal-cita); }
.cal-item.cal-reunion { border-left-color: var(--cal-reunion); }
.cal-item.cal-hecha { text-decoration: line-through; }
.cal-mas { font-size: .7rem; color: var(--muted); padding-left: .3rem; }

.cal-detalle { margin-top: .8rem; padding: .9rem 1rem; }
.cal-clientes { display: grid; gap: .25rem; max-height: 12rem; overflow-y: auto; }
.cal-cliente { text-align: left; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); display: grid; }
.cal-tipos { display: flex; gap: .9rem; margin: .5rem 0; flex-wrap: wrap; }
.cal-tipos label { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }

/* Tipo y hora en las filas de tarea (ficha, Panel y Calendario) */
.tarea-tipo { font-size: .7rem; font-weight: 600; padding: 0 .35rem; border-radius: 4px; margin-right: .3rem; color: #fff; background: var(--cal-tarea); vertical-align: 1px; }
.tarea-tipo-cita { background: var(--cal-cita); }
.tarea-tipo-reunion { background: var(--cal-reunion); }
.tarea-hora { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: .3rem; }

/* Móvil: casillas bajas con puntos; el detalle de abajo dice qué hay */
@media (max-width: 700px) {
  .cal-dia { min-height: 3.2rem; align-items: center; padding: .25rem .1rem; }
  .cal-items { display: none; }
  .cal-puntos { display: flex; justify-content: center; }
  .cal-mes { min-width: 7.5rem; }
  .cal-cab h2 { width: 100%; }
  .cal-nav { margin-left: 0; }
}