/* =============================================================================
   ESD LAB - página calendar (templates/calendar.html): FullCalendar,
   panel de recursos, leyenda, modal de crear reserva. Movido tal cual
   desde static/styles.css (A7.4), sin cambiar ningún valor ni selector
   — incluye 2 reglas que vivían sueltas en el grab-bag "FASE 0" del
   archivo viejo (confirmado con el comentario que las acompañaba:
   "calendar.html: sección de administración de recursos").
   ============================================================================= */

/* ===== Calendario ===== */
.calendar-wrapper {
  position: relative;
  background: var(--esd-surface-dark-2);
  border: 2px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Tematización de FullCalendar con los tokens del sitio --- */
.calendar-wrapper .fc {
  --fc-border-color: rgba(61, 107, 150, 0.14);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--esd-beige-light);
  --fc-today-bg-color: rgba(61, 107, 150, 0.06);
  --fc-now-indicator-color: var(--esd-orange);
  --fc-highlight-color: rgba(61, 107, 150, 0.14);
  --fc-non-business-color: rgba(30, 42, 56, 0.035);
  --fc-event-bg-color: transparent;
  --fc-event-border-color: transparent;
  /* FullCalendar trae texto blanco por defecto (pensado para chips de
     color sólido); acá los chips llevan un fondo de tinte medio con texto
     oscuro (ver .esd-event-time/-name/-user más abajo), así que el texto
     nativo de FullCalendar (usado en la vista Agenda/lista y como
     fallback) también debe quedar oscuro para no repetir el bug de
     "letras blancas ilegibles". */
  --fc-event-text-color: var(--esd-text-dark);
  --fc-list-event-hover-bg-color: var(--esd-beige-light);
  font-size: 0.9rem;
}
.calendar-wrapper .fc .fc-scrollgrid {
  border-radius: 12px;
  overflow: hidden;
}

/* Toolbar: título con jerarquía de sección */
.calendar-wrapper .fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 1.25rem;
  row-gap: 0.75rem;
  flex-wrap: wrap;
}
.calendar-wrapper .fc .fc-toolbar-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--esd-text-dark);
}
.calendar-wrapper .fc .fc-toolbar-title::first-letter {
  text-transform: uppercase;
}

/* Botones: el patrón segmentado del sitio (records-mode-btn) */
.calendar-wrapper .fc .fc-button {
  background: var(--esd-surface-dark-2);
  border: 2px solid var(--esd-border-dark);
  color: var(--esd-text-medium);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: capitalize;
  border-radius: 12px;
  padding: 0.45rem 1rem;
  box-shadow: none;
  transition: all var(--transition-fast);
}
.calendar-wrapper .fc .fc-button:hover {
  background: var(--esd-beige-light);
  border-color: var(--esd-orange);
  color: var(--esd-orange-dark);
}
.calendar-wrapper .fc .fc-button:focus-visible,
.calendar-wrapper .fc .fc-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 107, 150, 0.25);
}
.calendar-wrapper .fc .fc-button:disabled {
  background: var(--esd-surface-dark-2);
  border-color: var(--esd-border-dark);
  color: var(--esd-text-light);
  opacity: 0.55;
}
.calendar-wrapper .fc .fc-button-primary:not(:disabled).fc-button-active,
.calendar-wrapper .fc .fc-button-primary:not(:disabled):active {
  background: linear-gradient(135deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
  border-color: var(--esd-orange);
  color: #fff;
  box-shadow: 0 4px 12px rgba(61, 107, 150, 0.25);
}
.calendar-wrapper .fc .fc-button-group {
  gap: 0.4rem;
}
.calendar-wrapper .fc .fc-button-group > .fc-button {
  border-radius: 12px !important;
}
.calendar-wrapper .fc .fc-prev-button,
.calendar-wrapper .fc .fc-next-button {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cabeceras de día y etiquetas de hora */
.calendar-wrapper .fc .fc-col-header-cell {
  background: var(--esd-beige-light);
}
.calendar-wrapper .fc .fc-col-header-cell-cushion {
  color: var(--esd-text-medium);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: capitalize;
  text-decoration: none;
  padding: 0.5rem 0.25rem;
}
.calendar-wrapper .fc .fc-day-today .fc-col-header-cell-cushion {
  color: var(--esd-orange-dark);
  font-weight: 700;
}
.calendar-wrapper .fc .fc-timegrid-slot-label-cushion,
.calendar-wrapper .fc .fc-timegrid-axis-cushion {
  color: var(--esd-text-light);
  font-size: 0.74rem;
}
.calendar-wrapper .fc .fc-day-sat:not(.fc-col-header-cell),
.calendar-wrapper .fc .fc-day-sun:not(.fc-col-header-cell) {
  background: rgba(30, 42, 56, 0.018);
}
.calendar-wrapper .fc .fc-daygrid-day-number {
  color: var(--esd-text-medium);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Chips de evento: mismo lenguaje que 'Esta semana' del dashboard */
.esd-event {
  border: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.10);
  padding: 2px 6px;
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}
.esd-event:hover {
  box-shadow: var(--shadow-sm);
}
/* Los 3 colores por "kind" se movieron a components/index.css (A7.4): los
   usa también templates/account.html (agenda-card esd-event-{kind}), no
   son exclusivos de esta página — ver el comentario original de arriba,
   "mismo lenguaje que 'Esta semana' del dashboard".
   En el styles.css viejo ganaban por orden de aparición dentro del mismo
   archivo (venían después de ".esd-event"); al separarlos en archivos con
   su propio nivel de cascada (components/ carga antes que la CSS de esta
   página), ese orden ya no alcanza porque FullCalendar le pone las dos
   clases al mismo chip ("esd-event esd-event-<kind>"). Se sube la
   especificidad acá, solo para ese caso, para restaurar el resultado
   visual original sin duplicar la regla en components/index.css (que
   sigue sirviendo tal cual a la tarjeta de account.html, que no lleva la
   clase ".esd-event"). */
.esd-event.esd-event-equipo { background: var(--kind-equipo-tint); }
.esd-event.esd-event-sala { background: var(--kind-sala-tint); }
.esd-event.esd-event-toma_datos { background: var(--kind-toma-tint); }
.esd-event-time {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--esd-text-medium);
  white-space: nowrap;
  overflow: hidden;
}
.esd-event-time .material-symbols-rounded {
  font-size: 0.85rem;
  line-height: 1;
}
.esd-event-name {
  font-weight: 600;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--esd-text-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.esd-event-user {
  font-size: 0.68rem;
  color: var(--esd-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estas reglas vivían fuera de la sección "Calendario" del styles.css
   viejo — pegadas sin divisor propio al final de la sección "Mi cuenta",
   igual que otros grab-bags ya encontrados en A7.1-A7.4 (RESPONSIVE,
   Selectores, FASE 0). Encontradas al investigar una regresión visual
   real del calendario en /calendar (el nombre del recurso se mostraba
   siempre, sin el recorte por ancho de chip que dependía de
   .esd-event-inner/@container). */

/* Solapes: chips contenidos, adyacentes y adaptativos */
.calendar-wrapper .fc .fc-timegrid-event {
  overflow: hidden;
}
.calendar-wrapper .fc .fc-timegrid-event-harness + .fc-timegrid-event-harness .fc-timegrid-event {
  border-left: 2px solid rgba(255, 255, 255, 0.9);
}
.esd-event-inner {
  container-type: inline-size;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
/* Chip angosto (reservas lado a lado): los recursos ceden, hora y nombre se quedan */
@container (max-width: 130px) {
  .esd-event-name { display: none; }
  .esd-event-user {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--esd-text-medium);
  }
}
/* Muy angosto (3+ reservas): hora y nombre en tipografía mínima */
@container (max-width: 78px) {
  .esd-event-time { font-size: 0.6rem; }
  .esd-event-time .material-symbols-rounded { display: none; }
  .esd-event-user { font-size: 0.6rem; }
}
/* Reservas cortas (≤30 min): una sola fila hora + nombre */
.calendar-wrapper .fc .fc-timegrid-event-short .esd-event-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.calendar-wrapper .fc .fc-timegrid-event-short .esd-event-name { display: none; }
.calendar-wrapper .fc .fc-timegrid-event-short .esd-event-user {
  flex: 1;
  font-weight: 600;
  color: var(--esd-text-medium);
}
/* Mes: una línea con hora · nombre · recursos (recursos ceden primero) */
.esd-event-month {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  overflow: hidden;
  padding: 1px 2px;
  font-size: 0.72rem;
}
.esd-event-month-time {
  font-weight: 700;
  color: var(--esd-text-medium);
  white-space: nowrap;
}
.esd-event-month-user {
  font-weight: 600;
  color: var(--esd-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 9em;
}
.esd-event-month-res {
  color: var(--esd-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Mes: eventos como barras compactas */
.calendar-wrapper .fc .fc-daygrid-event.esd-event {
  padding: 1px 6px;
}
/* Vista Agenda (lista) */
.calendar-wrapper .fc .fc-list {
  border-radius: 12px;
  overflow: hidden;
}
.calendar-wrapper .fc .fc-list-day-cushion {
  background: var(--esd-beige-light);
}
.calendar-wrapper .fc .fc-list-day-text,
.calendar-wrapper .fc .fc-list-day-side-text {
  color: var(--esd-text-medium);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: capitalize;
  text-decoration: none;
}
.calendar-wrapper .fc .fc-list-event-title,
.calendar-wrapper .fc .fc-list-event-time {
  color: var(--esd-text-dark);
  font-size: 0.85rem;
}
.esd-event-equipo .fc-list-event-dot { border-color: var(--kind-equipo); }
.esd-event-sala .fc-list-event-dot { border-color: var(--kind-sala); }
.esd-event-toma_datos .fc-list-event-dot { border-color: var(--kind-toma); }

/* Indicador de carga */
.calendar-loading {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid var(--esd-border-dark);
  border-top-color: var(--esd-orange);
  border-radius: 50%;
  animation: esd-spin 0.8s linear infinite;
  z-index: 5;
}
@keyframes esd-spin {
  to { transform: rotate(360deg); }
}

/* Leyenda: mismos chips que los eventos */
.calendar-legend {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 1200px;
  margin: 0 auto 0.75rem;
}
.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 8px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--esd-text-dark);
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.08);
}
.calendar-legend-item .material-symbols-rounded {
  font-size: 1rem;
}

/* Modal del calendario */
.calendar-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .calendar-form-grid { grid-template-columns: 1fr; }
}

/* Panel de recursos (solo PI) */
.calendar-resources-panel {
  background: var(--esd-surface-dark-2);
  border: 2px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  max-width: 1200px;
  margin: 0 auto;
}
.calendar-resources-summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--esd-text-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}
.calendar-resources-summary::-webkit-details-marker { display: none; }
.calendar-resources-summary .calendar-resources-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}
.calendar-resources-panel[open] .calendar-resources-chevron {
  transform: rotate(180deg);
}
.calendar-resources-body { margin-top: 1rem; }
.calendar-resources-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.calendar-resources-form .records-form-control { max-width: 320px; }
.calendar-resources-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .calendar-resources-lists { grid-template-columns: 1fr; }
}
.calendar-resources-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--esd-text-medium);
}
.calendar-resources-list { list-style: none; padding: 0; margin: 0; }
.calendar-resources-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--esd-border-dark);
  color: var(--esd-text-dark);
}
.calendar-resource-inactive { opacity: 0.55; }

/* Móvil: toolbar apilada */
@media (max-width: 767.98px) {
  .calendar-wrapper { padding: 0.85rem; }
  .calendar-wrapper .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .calendar-wrapper .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }
  .calendar-legend { justify-content: center; }
}




/* --- Panel de recursos: ancho del selector de tipo + separación de la
   sección (extraídas de estilos inline, vivían en FASE 0) --- */
.calendar-resources-form .calendar-resource-type-select {
  max-width: 140px;
}

/* calendar.html: sección de administración de recursos */
.calendar-resources-section {
  margin-top: 1.5rem;
}

/* =============================================================================
   FASE 6 - Calendario en móvil
   ============================================================================= */
@media (max-width: 767.98px) {
  /* "Nueva reserva" como botón flotante sobre la tab bar */
  #newBookingBtn {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--esd-tabbar-h) + env(safe-area-inset-bottom) + 1rem);
    z-index: 1025;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
  }

  /* Toolbar de FullCalendar: botones cómodos */
  .calendar-wrapper .fc .fc-button {
    min-height: 40px;
    padding: 0.4rem 0.65rem;
  }

  .calendar-wrapper .fc .fc-toolbar-chunk {
    gap: 0.4rem;
  }

  /* Vista agenda: filas táctiles (>=44px) */
  .calendar-wrapper .fc .fc-list-event > td {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* Panel de recursos (PI): formulario apilado, controles full-width */
  .calendar-resources-form {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-resources-form .records-form-control,
  .calendar-resources-form .calendar-resource-type-select,
  .calendar-resources-form .btn {
    max-width: none;
    width: 100%;
  }
}