/* =========================================
   css/pages/employees.css
   Estilos específicos de la sección
   de gestión de empleados.
========================================= */

.empleados-section {
  margin-top: 0;
}

/* Cabecera: título a la izquierda, botón a la derecha */
.empleados-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Campos que siempre se muestran en mayúsculas */
#empNom,
#empPuesto {
  text-transform: uppercase;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .empleados-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}