/* ============================================
 * Estilos personalizados — HuelleroTI
 * ============================================ */

/* Animacion suave para transiciones de pantalla */
.pantalla {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pantalla.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* Mejorar accesibilidad de inputs */
input:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Estilo para tabla responsiva en movil */
@media (max-width: 640px) {
  table thead {
    display: none;
  }
  table tbody tr {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
  }
  table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
  }
}

/* Spinner de carga */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}