/* =========================================================
   Animaciones UI — Base color
   ========================================================= */
:root {
  --amd-primary: #e77918; /* color base solicitado */
  --amd-primary-ink: #ffffff;
  --amd-primary-20: rgba(231, 121, 24, 0.2);
  --amd-primary-30: rgba(231, 121, 24, 0.3);
  --amd-primary-40: rgba(231, 121, 24, 0.4);
  --amd-ring: 0 0 0 3px var(--amd-primary-30);
}

/* Respeta accesibilidad: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes amdOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes amdPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes amdToastIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes amdPulseBorder {
  0% {
    box-shadow: 0 0 0 0 var(--amd-primary-30);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(231, 121, 24, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(231, 121, 24, 0);
  }
}

/* =========================================================
   Modales — Upload (#amd-upload-modal) y Status (#amd-status-modal)
   (No necesitas cambiar tu JS: al quitar .hidden se anima solo)
   ========================================================= */

/* Overlay */
#amd-upload-modal:not(.hidden) > #amd-upload-overlay,
#amd-status-modal:not(.hidden) > div:first-child {
  animation: amdOverlayIn 0.18s ease-out both;
}

/* Panel (el <section> interno) */
#amd-upload-modal:not(.hidden) > section,
#amd-status-modal:not(.hidden) > section {
  animation: amdPanelIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  will-change: transform, opacity;
}

/* Botón cerrar dentro de modales: micro interacción */
#amd-upload-modal #amd-upload-close,
#amd-status-modal #amd-status-close {
  transition: transform 0.12s ease, background-color 0.12s ease;
}
#amd-upload-modal #amd-upload-close:hover,
#amd-status-modal #amd-status-close:hover {
  transform: scale(1.04);
}

/* Inputs dentro de modales: foco con color institucional */
#amd-upload-modal input[type="text"],
#amd-upload-modal input[type="number"],
#amd-upload-modal input[type="url"],
#amd-upload-modal input[type="date"],
#amd-upload-modal input[type="file"],
#amd-upload-modal select,
#amd-upload-modal textarea {
  transition: border-color 0.12s ease, box-shadow 0.12s ease,
    background-color 0.12s ease;
}
#amd-upload-modal input:focus,
#amd-upload-modal select:focus,
#amd-upload-modal textarea:focus {
  outline: none;
  border-color: var(--amd-primary);
  box-shadow: var(--amd-ring);
}

/* =========================================================
   Botón “Cargar documento” (clase ya existente en tu JS)
   ========================================================= */
.amd-upload-open-btn {
  transition: background-color 0.14s ease, border-color 0.14s ease,
    color 0.14s ease, transform 0.08s ease;
}
.amd-upload-open-btn:hover {
  background-color: rgba(231, 121, 24, 0.06); /* tinte muy sutil */
  border-color: var(--amd-primary);
  color: #1f2937; /* slate-800 */
}
.amd-upload-open-btn:focus-visible {
  outline: none;
  box-shadow: var(--amd-ring);
  border-color: var(--amd-primary);
}
.amd-upload-open-btn:active {
  transform: translateY(1px);
}
/* círculo del icono (primer span dentro del botón) */
.amd-upload-open-btn > span:first-child {
  transition: border-color 0.14s ease, background-color 0.14s ease,
    transform 0.08s ease;
  border-color: var(--amd-primary) !important;
}
.amd-upload-open-btn:hover > span:first-child {
  background-color: rgba(231, 121, 24, 0.08);
}
.amd-upload-open-btn:active > span:first-child {
  transform: scale(0.96);
}

/* =========================================================
   Dropzone (#amd-dropzone)
   (tu JS ya agrega/quita clases; aquí damos feedback visual)
   ========================================================= */
#amd-dropzone {
  transition: border-color 0.14s ease, box-shadow 0.14s ease,
    background-color 0.14s ease, transform 0.14s ease;
}
#amd-dropzone:hover {
  background-color: rgba(231, 121, 24, 0.03);
}
/* Cuando tu JS sube el borde (por ejemplo border-blue-400), reforzamos con el color institucional */
#amd-dropzone.border-blue-400,
#amd-dropzone.dragover,
#amd-dropzone.is-active {
  border-color: var(--amd-primary) !important;
  animation: amdPulseBorder 1.4s ease-out 1;
}

/* =========================================================
   Previsualización (píldora del archivo)
   ========================================================= */
#amd-file-preview > div {
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    background-color 0.12s ease;
}
#amd-file-preview > div:hover {
  transform: translateY(-1px);
}
/* Botón eliminar dentro de la píldora */
#amd-file-preview #amd-file-delete {
  transition: background-color 0.12s ease, transform 0.08s ease;
}
#amd-file-preview #amd-file-delete:hover {
  background-color: var(--amd-primary-40) !important;
}
#amd-file-preview #amd-file-delete:active {
  transform: scale(0.96);
}

/* =========================================================
   Toasts (entradas suaves sin tocar tu JS)
   ========================================================= */
#amd-toast-root > div {
  animation: amdToastIn 0.18s ease-out both;
}

/* =========================================================
   Toolbar contenedor (si usas el toolbar simple con bordes)
   ========================================================= */
.amd-toolbar {
  /* añade esta clase opcional al div del toolbar si quieres una sutil elevación al pasar el mouse */
  transition: box-shadow 0.15s ease, transform 0.15s ease,
    border-color 0.15s ease;
}
.amd-toolbar:hover {
  border-color: var(--amd-primary);
}

/* Si quieres una línea/acento bajo el header del modal con tu color */
#amd-upload-modal header,
#amd-status-modal header {
  border-bottom-color: rgba(231, 121, 24, 0.25) !important;
}
#amd-upload-modal footer,
#amd-status-modal footer {
  border-top-color: rgba(231, 121, 24, 0.25) !important;
}