/* Calendario del kit (ui/Calendario.js): mes / semana / día y lista por día en el celular. Solo tokens. Prefijo `cal-`. */

.cal { overflow: hidden; }
.cal-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cal-nav { display: flex; gap: 6px; }
.cal-titulo { flex: 1; margin: 0; min-width: 0; font: 700 16px var(--font-brand); color: var(--ink-1); text-transform: capitalize; }
.cal-barra .seg-toggle { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); background: var(--sunken); }
.cal-dow > div { padding: 6px 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cal-celdas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dia .cal-dia-cabeza { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cal-dia-nombre { font-size: 12px; color: var(--ink-3); text-transform: capitalize; }
.cal-v-mes .cal-dia { min-height: 108px; }
.cal-v-semana .cal-dia { min-height: 320px; }
.cal-dia { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; min-width: 0; }
.cal-celdas > .cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia.clicable { cursor: pointer; }
.cal-dia.clicable:hover { background: var(--sunken); }
.cal-dia.fuera { background: var(--sunken); }
.cal-dia.fuera .cal-num { color: var(--ink-3); }
.cal-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; font: 600 12.5px var(--font-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-dia.hoy .cal-num, .cal-lista-dia.hoy .cal-num { background: var(--accent); color: var(--on-accent); }
.cal-dia .cal-eventos { display: grid; gap: 3px; }
.cal-dia .cal-dia-cabeza + .cal-eventos:empty { display: none; }
.cal-v-dia .cal-celdas { grid-template-columns: minmax(0, 1fr); }
.cal-v-dia .cal-dia { border-right: 0; min-height: 260px; padding: 12px; }
.cal-v-dia .cal-evento, .cal-v-semana .cal-evento { padding: 6px 8px; font-size: 13px; }
.cal-v-semana .cal-evento-texto { white-space: normal; overflow-wrap: anywhere; }

.cal-evento { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 3px 6px; border: 0; border-left: 3px solid var(--ink-3); border-radius: 6px; background: var(--sunken); color: var(--ink-1); font: 500 12px var(--font-ui); text-align: left; cursor: pointer; }
.cal-evento:hover { filter: brightness(.97); }
.cal-evento-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento-etiqueta { flex: none; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.cal-evento.ok { background: var(--success-soft); border-left-color: var(--success); }
.cal-evento.aviso { background: var(--warning-soft); border-left-color: var(--warning); }
.cal-evento.info { background: var(--info-soft); border-left-color: var(--info); }
.cal-evento.mal { background: var(--danger-soft); border-left-color: var(--danger); }
.cal-mas { border: 0; background: transparent; padding: 0 6px; color: var(--accent); font: 600 11.5px var(--font-ui); cursor: pointer; text-align: left; }
.cal-mas:hover { text-decoration: underline; }
.cal-muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sunken); border-left: 3px solid var(--ink-3); }
.cal-muestra.ok { background: var(--success-soft); border-left-color: var(--success); }
.cal-muestra.aviso { background: var(--warning-soft); border-left-color: var(--warning); }

/* Celular: lista por día */
.cal-lista { list-style: none; margin: 0; padding: 0; }
.cal-lista-vacia { padding: 20px 16px; text-align: center; }
.cal-lista-dia { display: grid; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.cal-lista-dia:last-child { border-bottom: 0; }
.cal-lista-fecha { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; color: var(--ink-2); font: 600 13px var(--font-ui); text-transform: capitalize; text-align: left; cursor: pointer; }
.cal-lista-fecha:disabled { cursor: default; }
.cal-lista-eventos { display: grid; gap: 4px; }
.cal-lista .cal-evento { padding: 8px 10px; font-size: 13.5px; }
.cal-lista .cal-evento-texto { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .cal-barra { padding: 10px 12px; }
  .cal-titulo { order: -1; flex: 1 1 100%; }
}