/* ==========================================================================
   app.css — Validador de Informes de Gastos
   Estilos específicos de la aplicación.
   Complementa base.css y tokens.css.
   ========================================================================== */

/* Dropzone de carga de archivos */
.sip-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--sip-border-strong);
  border-radius: var(--sip-r-lg);
  padding: var(--sip-s-8) var(--sip-s-6);
  text-align: center;
  background-color: var(--sip-surface);
  transition: border-color var(--sip-t-base), background-color var(--sip-t-base);
  cursor: pointer;
}

.sip-dropzone:hover,
.sip-dropzone.dragover {
  border-color: var(--sip-celeste-oscuro);
  background-color: var(--sip-info-bg);
}

.sip-dropzone__icon {
  width: 48px;
  height: 48px;
  color: var(--sip-gray-400);
  margin-bottom: var(--sip-s-4);
  transition: color var(--sip-t-fast);
}

.sip-dropzone:hover .sip-dropzone__icon,
.sip-dropzone.dragover .sip-dropzone__icon {
  color: var(--sip-celeste-oscuro);
}

.sip-dropzone__title {
  font-size: var(--sip-fs-lg);
  font-weight: 600;
  color: var(--sip-text);
  margin-bottom: var(--sip-s-1);
}

.sip-dropzone__text {
  font-size: var(--sip-fs-sm);
  color: var(--sip-text-muted);
  margin-bottom: var(--sip-s-4);
}

.sip-file-input {
  display: none;
}

.sip-file-name {
  margin-top: var(--sip-s-4);
  font-size: var(--sip-fs-sm);
  font-weight: 600;
  color: var(--sip-accent);
  word-break: break-all;
}

/* Área de acciones de formulario */
.sip-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sip-s-3);
  margin-top: var(--sip-s-6);
  padding-top: var(--sip-s-4);
  border-top: 1px solid var(--sip-border);
}

/* Estado de procesamiento inline */
.sip-status-inline {
  display: flex;
  align-items: center;
  gap: var(--sip-s-3);
  padding: var(--sip-s-4);
  background: var(--sip-surface-alt);
  border-radius: var(--sip-r-md);
  margin-top: var(--sip-s-4);
}

.sip-spinner-sm {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sip-gray-300);
  border-top-color: var(--sip-azul);
  border-radius: 50%;
  animation: sip-spin 700ms linear infinite;
  flex: 0 0 auto;
}