/* Movimiento y retroalimentación compartidos del panel Productividad. */

:root {
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* Entrada discreta de cada apartado. */
.content-wrapper > .content > .box,
.content-wrapper > .content > .row > [class*="col-"] > .box {
  animation: uiPageEnter 0.34s var(--motion-ease) both;
}

.ui-panel-enter {
  animation: uiPanelEnter var(--motion-normal) var(--motion-ease) both;
}

@keyframes uiPageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes uiPanelEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Validación de formularios. */
.form-control.ui-field-valid,
.bootstrap-select.ui-field-valid > .dropdown-toggle {
  border-color: rgba(22, 155, 98, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(22, 155, 98, 0.08) !important;
}

.form-control.ui-field-invalid,
.login-input.ui-field-invalid,
.assignment-input.ui-field-invalid,
.assignment-select.ui-field-invalid {
  border-color: rgba(217, 45, 32, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.1) !important;
  animation: uiFieldShake 0.28s ease;
}

@keyframes uiFieldShake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  65% { transform: translateX(4px); }
}

/* Botones mientras esperan respuesta. */
.btn.is-ui-busy,
.login-button.is-ui-busy {
  position: relative;
  cursor: wait;
  opacity: 0.84;
  pointer-events: none;
}

.btn.is-ui-busy .fa-spinner,
.login-button.is-ui-busy .fa-spinner {
  margin-right: 7px;
}

/* Notificaciones flotantes. */
.ui-toast-region {
  position: fixed;
  z-index: 12000;
  top: 76px;
  right: 18px;
  width: min(380px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.ui-toast {
  --toast-color: #2563eb;
  --toast-soft: #eff6ff;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  align-items: start;
  gap: 11px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-left: 4px solid var(--toast-color);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  color: #27364e;
  box-shadow: 0 18px 46px rgba(18, 33, 59, 0.18);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: uiToastEnter 0.28s var(--motion-ease) both;
}

.ui-toast.is-leaving {
  animation: uiToastLeave 0.18s ease both;
}

.ui-toast-success { --toast-color: #169b62; --toast-soft: #e8faf1; }
.ui-toast-danger { --toast-color: #d92d20; --toast-soft: #fff0ef; }
.ui-toast-warning { --toast-color: #d97706; --toast-soft: #fff8e8; }
.ui-toast-info { --toast-color: #2563eb; --toast-soft: #eff6ff; }

.ui-toast-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--toast-soft);
  color: var(--toast-color);
  font-size: 14px;
}

.ui-toast-copy {
  min-width: 0;
}

.ui-toast-copy strong {
  display: block;
  margin-bottom: 3px;
  color: #17223b;
  font-size: 12px;
  font-weight: 800;
}

.ui-toast-copy span {
  display: block;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ui-toast-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  line-height: 26px;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}

.ui-toast-close:hover,
.ui-toast-close:focus {
  background: #f1f5f9;
  color: #334155;
  outline: none;
}

@keyframes uiToastEnter {
  from { opacity: 0; transform: translateX(18px) scale(0.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes uiToastLeave {
  to { opacity: 0; transform: translateX(14px) scale(0.98); }
}

/* Modales Bootstrap / Bootbox. */
.modal.fade .modal-dialog {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity var(--motion-normal) ease, transform var(--motion-normal) var(--motion-ease);
}

.modal.in .modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-backdrop.fade {
  transition: opacity var(--motion-normal) ease;
}

.modal-content {
  border-radius: 17px !important;
  box-shadow: 0 26px 70px rgba(15, 29, 52, 0.24) !important;
}

.modal-header {
  padding: 17px 19px;
}

.modal-body {
  padding: 19px;
  color: #526178;
  font-size: 13px;
  line-height: 1.55;
}

.modal-footer {
  padding: 13px 19px;
}

.bootbox .modal-footer .btn {
  min-width: 92px;
}

/* Indicador deslizante y microinteracción del menú lateral. */
.skin-blue .sidebar-menu > li > a {
  position: relative;
}

.skin-blue .sidebar-menu > li > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: #2563eb;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.36);
  transform: translateY(-50%);
  transition: height var(--motion-normal) var(--motion-ease);
}

.skin-blue .sidebar-menu > li.active > a::before,
.skin-blue .sidebar-menu > li.menu-open > a::before {
  height: 28px;
}

.skin-blue .sidebar-menu > li > a > .fa {
  transition: transform var(--motion-fast) ease, color var(--motion-fast) ease;
}

.skin-blue .sidebar-menu > li > a:hover > .fa,
.skin-blue .sidebar-menu > li.active > a > .fa {
  transform: scale(1.08);
}

/* Tarjetas de resumen mientras se actualizan. */
.admin-summary-card {
  position: relative;
}

.admin-summary-card.ui-refreshing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(255,255,255,0.2) 20%, rgba(239,246,255,0.78) 48%, rgba(255,255,255,0.2) 76%);
  background-size: 220% 100%;
  animation: uiCardRefresh 1s linear infinite;
  pointer-events: none;
}

.ui-value-updating {
  animation: uiValueUpdate 0.3s var(--motion-ease) both;
}

@keyframes uiCardRefresh {
  from { background-position: 210% 0; }
  to { background-position: -210% 0; }
}

@keyframes uiValueUpdate {
  from { opacity: 0.2; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .ui-toast-region {
    top: 66px;
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-wrapper > .content > .box,
  .content-wrapper > .content > .row > [class*="col-"] > .box,
  .ui-panel-enter,
  .ui-toast,
  .ui-toast.is-leaving,
  .form-control.ui-field-invalid,
  .login-input.ui-field-invalid,
  .assignment-input.ui-field-invalid,
  .assignment-select.ui-field-invalid,
  .admin-summary-card.ui-refreshing::after,
  .ui-value-updating {
    animation: none !important;
  }

  .modal.fade .modal-dialog,
  .skin-blue .sidebar-menu > li > a::before,
  .skin-blue .sidebar-menu > li > a > .fa {
    transition: none !important;
  }
}