/* ============================================================
   Calendario mensual de asistencias (componente compartido)
   Usado por: modal Cuadro de Asistencias (Admin) y Detalle de
   Ciclo (Ted.Student). Mantener ambos archivos sincronizados.
   Estados: is-present | is-late | is-absent | is-justified | is-none
   ============================================================ */

.attendance-calendar {
   width: 100%;
}

/* ── Resumen del mes (chips) ── */
.attendance-calendar .cal-summary {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 1rem;
}

.attendance-calendar .cal-chip {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   padding: 0.3rem 0.75rem;
   border-radius: 999px;
   font-size: 0.78rem;
   font-weight: 500;
   border: 1px solid transparent;
}

.attendance-calendar .cal-chip b {
   font-weight: 700;
}

/* ── Grilla del calendario ── */
.attendance-calendar .cal-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 6px;
}

.attendance-calendar .cal-weekday {
   text-align: center;
   font-size: 0.72rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: #6b7280;
   padding: 0.25rem 0;
}

.attendance-calendar .cal-day {
   position: relative;
   min-height: 76px;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   background: #fff;
   padding: 6px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
}

.attendance-calendar .cal-day.is-void {
   border: none;
   background: transparent;
   min-height: 0;
}

.attendance-calendar .cal-day-num {
   align-self: flex-end;
   font-size: 0.72rem;
   font-weight: 600;
   color: #6b7280;
   line-height: 1;
}

.attendance-calendar .cal-day-status {
   font-size: 0.95rem;
   line-height: 1;
}

.attendance-calendar .cal-day-times {
   display: flex;
   flex-direction: column;
   font-size: 0.62rem;
   color: #6b7280;
   text-align: center;
   line-height: 1.35;
}

/* ── Estados ── */
.attendance-calendar .cal-day.is-present,
.attendance-calendar .cal-chip.is-present {
   background: #ecfdf5;
   border-color: #a7f3d0;
   color: #047857;
}

.attendance-calendar .cal-day.is-late,
.attendance-calendar .cal-chip.is-late {
   background: #fffbeb;
   border-color: #fde68a;
   color: #b45309;
}

.attendance-calendar .cal-day.is-absent,
.attendance-calendar .cal-chip.is-absent {
   background: #fef2f2;
   border-color: #fecaca;
   color: #b91c1c;
}

.attendance-calendar .cal-day.is-justified,
.attendance-calendar .cal-chip.is-justified {
   background: #eff6ff;
   border-color: #bfdbfe;
   color: #1d4ed8;
}

.attendance-calendar .cal-day.is-present .cal-day-num,
.attendance-calendar .cal-day.is-late .cal-day-num,
.attendance-calendar .cal-day.is-absent .cal-day-num,
.attendance-calendar .cal-day.is-justified .cal-day-num {
   color: inherit;
}

.attendance-calendar .cal-day.is-none {
   background: #f9fafb;
}

.attendance-calendar .cal-day.is-future {
   opacity: 0.55;
}

.attendance-calendar .cal-day.is-today {
   outline: 2px solid #6366f1;
   outline-offset: 1px;
}

/* ── Leyenda ── */
.attendance-calendar .cal-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1.25rem;
   margin-top: 1rem;
   font-size: 0.75rem;
   color: #6b7280;
}

.attendance-calendar .cal-legend > span {
   display: inline-flex;
   align-items: center;
}

.attendance-calendar .cal-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
   margin-right: 6px;
   border: 1px solid transparent;
}

.attendance-calendar .cal-dot.is-present { background: #34d399; }
.attendance-calendar .cal-dot.is-late { background: #fbbf24; }
.attendance-calendar .cal-dot.is-absent { background: #f87171; }
.attendance-calendar .cal-dot.is-justified { background: #60a5fa; }
.attendance-calendar .cal-dot.is-none { background: #f3f4f6; border-color: #d1d5db; }

/* ── Responsive: en móvil solo número + ícono ── */
@media (max-width: 576px) {
   .attendance-calendar .cal-grid {
      gap: 3px;
   }

   .attendance-calendar .cal-day {
      min-height: 46px;
      padding: 4px;
      border-radius: 8px;
   }

   .attendance-calendar .cal-day-times {
      display: none;
   }

   .attendance-calendar .cal-weekday {
      font-size: 0.62rem;
   }

   .attendance-calendar .cal-day-status {
      font-size: 0.8rem;
   }

   .attendance-calendar .cal-chip {
      font-size: 0.7rem;
      padding: 0.25rem 0.6rem;
   }
}