/* ============================================================
   MonTech · 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); }

.v-cal__eventos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v-cal__ev {
  display: block; padding: 2px 6px; border-radius: var(--r-xs);
  font-size: var(--fs-11); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.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; }

/* Colores por estado (los mismos tonos que las insignias) */
.v-cal__ev--brand   { background: var(--brand-soft);   color: var(--text-brand); }
.v-cal__ev--info    { background: var(--info-soft);    color: var(--info-ink); }
.v-cal__ev--ok      { background: var(--ok-soft);      color: var(--ok-ink); }
.v-cal__ev--gold    { background: var(--neutral-soft); color: var(--neutral-ink); }
.v-cal__ev--danger  { background: var(--danger-soft);  color: var(--danger-ink); text-decoration: line-through; }
.v-cal__ev--outline { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.v-cal__dia.is-sel .v-cal__ev--brand { background: var(--bg-surface); }
.v-cal__punto--brand   { background: var(--brand); }
.v-cal__punto--info    { background: var(--info); }
.v-cal__punto--ok      { background: var(--ok); }
.v-cal__punto--gold    { background: var(--gold); }
.v-cal__punto--danger  { background: var(--danger); }
.v-cal__punto--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }

/* ---------- 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__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v-cal__item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid var(--border);
}
.v-cal__item:first-child { border-top: 0; padding-top: 0; }
.v-cal__hora { font-size: var(--fs-15); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.v-cal__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-13); color: var(--text-secondary); }
.v-cal__info b { color: var(--text-primary); font-size: var(--fs-14); }
.v-cal__estado { margin-top: 4px; }
.v-cal__acc { grid-column: 2; display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 6px; }
.v-cal__item.is-suspendida .v-cal__hora,
.v-cal__item.is-suspendida .v-cal__info b { text-decoration: line-through; color: var(--text-muted); }
.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 { min-height: 58px; padding: 5px 4px 6px; align-items: center; gap: 5px; }
  .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); }
}