@import url("./root.css");
@import url("./calendar.css");
@import url("./descriptionModal.css");
@import url("./filters.css");
@import url("./header.css");
@import url("./impartationModal.css");
@import url("./impartations.css");
@import url("./inputs.css");
@import url("./pageLoader.css");
@import url("./utils.css");





* {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    fill 200ms ease,
    stroke 200ms ease;
}



html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  background-color: var(--bg);
  color: var(--text);
}


html[data-theme="darkCustom"] .logo-Capacitacion-y-entrenamiento {
  content: url("/static/images/Capacitacion y entrenamiento Logo.png");

}



.logo-Capacitacion-y-entrenamiento {
  content: url("/static/images/Capacitacion y entrenamiento Logo light.png");

}




.fc-listIcon-button {
  font-size: 0;
  /* hide text */
  padding: 1px 8px !important;
}

.fc-listIcon-button::before {
  font-family: "Material Symbols Outlined";
  content: "list";
  font-size: 20px;

}

.fc-manualRefreshCalendar-button {
  font-size: 0;
  /* hide text */
  padding: 1px 8px !important;
}

.fc-manualRefreshCalendar-button::before {
  font-family: "Material Symbols Outlined";
  content: "refresh";
  font-size: 20px;

  display: inline-block;      /* 🔴 REQUIRED */
  transform-origin: 50% 50%;  /* safe default */
}


.fc-manualRefreshCalendar-button.fc-rotating::before {
  animation: fc-spin 1s linear infinite;
}

@keyframes fc-spin {
  to {
    transform: rotate(360deg);
  }
}
hr {
  border: none;
  border-top: 1px solid var(--gray-light);
  margin: 20px 0;
}


.fc-refresh-toast {
  position: absolute;
  top: 100%;
  right: 0;

  margin-top: 6px;
  padding: 4px 8px;

  font-size: 12px;
  white-space: nowrap;

  background: #333;
  color: #fff;
  border-radius: 6px;

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;

  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 1000;
}

.fc-refresh-toast.visible {
  opacity: 1;
  transform: translateY(0);
}



#hover-toast {
  position: absolute;
  z-index: 9999;

  padding: 6px 10px;
  border-radius: 6px;

  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 12px;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;

  transition: opacity 120ms ease, transform 120ms ease;
}

#hover-toast.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
  /* Header */
  #header {
    padding: 0 16px;
    height: 3.5rem;
  }

  .header-center h1 {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  #night-day-toggler-container {
    padding-right: 16px;
    height: 3.5rem;
  }

  /* Filters section */
  #first-row-container {
    margin: 16px;
    flex-direction: column;
    gap: 1rem;
  }

  #filters-container {
    width: 100%;
  }

  #filters {
    width: 100%;
  }

  #filters select {
    width: 100%;
  }

  .sub-filter {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .search-box {
    width: 100%;
  }

  .search-box input {
    flex: 1;
    min-width: 0;
  }

  #f-reset {
    width: 100%;
    margin-left: 0;
  }

  /* Color reference - stack below filters */
  #color-reference-container {
    width: 100%;
    justify-content: flex-start;
  }

  #color-reference {
    flex-flow: row wrap;
    gap: 0.75rem 1.5rem;
    margin-right: 0;
    font-size: 0.8rem;
  }

  /* Calendar */
  #calendar {
    margin: 0 16px 16px;
  }

  hr {
    margin: 16px;
  }

  /* Modals */
  #modal-contents {
    width: 95vw;
    padding: 1rem;
  }

  .field {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #impartationForm {
    width: 90%;
    padding: 1.5rem;
  }

  /* FullCalendar toolbar */
  .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1.2rem;
  }
}

/* Small phones */
@media (max-width: 480px) {
  #header {
    padding: 0 12px;
  }

  .header-center h1 {
    font-size: 0.9rem;
  }

  #night-day-toggler-container {
    padding-right: 12px;
  }

  #first-row-container {
    margin: 12px;
  }

  #calendar {
    margin: 0 8px 12px;
  }

  hr {
    margin: 12px;
  }

  #color-reference {
    gap: 0.5rem 1rem;
    font-size: 0.75rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1rem;
  }

  #impartationForm {
    width: 95%;
    padding: 1rem;
  }
}