/* ============================================================
   SpineNet · vista calendario
   Clases prefijadas v-cal-…  ·  solo var(--token), nunca hex
   ============================================================ */

.v-cal { display: flex; flex-direction: column; gap: var(--s-4); }

/* ---------- Barra: mes, resumen y representante ---------- */
.v-cal__barra { display: flex; align-items: center; gap: var(--s-3) var(--s-5); flex-wrap: wrap; }
.v-cal__nav { display: flex; align-items: center; gap: var(--s-2); }
.v-cal__mes { margin: 0; min-width: 9.5em; text-align: center; font-size: var(--fs-18); font-weight: 600; text-transform: capitalize; color: var(--text-primary); }
.v-cal__resumen { margin: 0; font-size: var(--fs-13); color: var(--text-muted); }
.v-cal__filtro { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; font-size: var(--fs-12); color: var(--text-muted); }
.v-cal__filtro .select { min-width: 190px; }

/* ---------- Cuadrícula ---------- */
.v-cal__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.v-cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.v-cal__dow {
  padding: 8px 10px; font-size: var(--fs-11); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-muted); border-bottom: 1px solid var(--border);
}
.v-cal__dia {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-height: 104px; padding: 6px 6px 8px; min-width: 0;
  font: inherit; text-align: left; color: var(--text-primary);
  background: var(--bg-surface); border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--t-fast);
}
.v-cal__dia:nth-child(7n) { border-right: 0; }
.v-cal__dia:hover { background: var(--bg-muted); }
.v-cal__dia:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.v-cal__dia.is-otro { background: var(--bg-inset); color: var(--text-muted); }
.v-cal__dia.is-sel { background: var(--brand-soft); }
.v-cal__num {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--r-full);
  font-size: var(--fs-13); font-weight: 600; font-variant-numeric: tabular-nums;
}
.v-cal__dia.is-hoy .v-cal__num { background: var(--brand); color: var(--text-inverse); }

/* Cada cirugía, una pastilla del color de su tipo (css/tarjetas.css) */
.v-cal__eventos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v-cal__eventos .pastilla { cursor: inherit; font-variant-numeric: tabular-nums; }
.v-cal__dia.is-sel .pastilla { background: var(--bg-surface); }
.v-cal__mas { font-size: var(--fs-11); color: var(--text-muted); padding-left: 6px; }
.v-cal__puntos { display: none; gap: 3px; }
.v-cal__punto { width: 7px; height: 7px; border-radius: var(--r-full); display: block; background: var(--tipo-relleno, var(--brand)); }
.v-cal__punto.is-suspendida { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); }

/* La semana: siete días altos, con todas sus cirugías */
.v-cal__grid--semana .v-cal__dia { min-height: 200px; }
.v-cal__mes.is-semana { text-transform: none; min-width: 12em; }
.v-cal__izq { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.v-cal__izq .leyenda { padding: 0 var(--s-1); }

/* ---------- Agenda del día ---------- */
.v-cal__agenda {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4); min-width: 0;
}
.v-cal__agenda-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.v-cal__agenda-cab h3 { margin: 0; font-size: var(--fs-15); font-weight: 600; }
.v-cal__agenda-cab span { font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
.v-cal__vacio { margin: 0; font-size: var(--fs-13); color: var(--text-muted); }
.v-cal__tjs { display: grid; gap: var(--s-4); }
.v-cal__tj { display: grid; gap: var(--s-2); }
.v-cal__tj .tj { padding: var(--s-4); }
.v-cal__google { justify-self: start; }
.v-cal__nota { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-12); color: var(--text-muted); }

/* Pantalla ancha: la agenda al lado de la cuadrícula */
@media (min-width: 1100px) {
  .v-cal__cuerpo { grid-template-columns: minmax(0, 1fr) 330px; }
  .v-cal__agenda { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
}

/* Teléfono: en cada día, puntos en vez de texto */
@media (max-width: 760px) {
  .v-cal__dia, .v-cal__grid--semana .v-cal__dia { min-height: 58px; padding: 5px 4px 6px; align-items: center; gap: 5px; }
  .v-cal__mes.is-semana { min-width: 0; }
  .v-cal__num { align-self: center; }
  .v-cal__eventos { display: none; }
  .v-cal__puntos { display: flex; justify-content: center; flex-wrap: wrap; }
  .v-cal__dow { padding: 7px 0; text-align: center; letter-spacing: .02em; }
  .v-cal__mes { min-width: 0; flex: 1; font-size: var(--fs-16); }
  .v-cal__nav { width: 100%; }
  .v-cal__filtro { margin-left: 0; width: 100%; }
  .v-cal__filtro .select { flex: 1; min-width: 0; }
  .v-cal__agenda { padding: var(--s-3); }
}