body {
  margin: 0;
  font-family: Arial, sans-serif;
  padding-top: 60px; /* espacio para que el contenido no quede debajo del menú */
}

/* Barra superior fija */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2fd320; /* verde */
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Menú principal en horizontal */
.menu {
  display: flex;
  flex: 1;
  justify-content: flex-start;
}

.menu-item {
  position: relative;
}

.menu-link {
  display: block;
  padding: 0.8rem 1rem;
  color: white;
  text-decoration: none;
}

.menu-link:hover {
  background-color: #444;
}

/* Submenús ocultos por defecto */
.submenu {
  display: none;
  position: absolute;
  top: 100%;   /* aparece debajo del item padre */
  left: 0;
  background-color: #444;
  min-width: 200px;
  flex-direction: column;
  z-index: 1000;
}

/* Mostrar submenú al pasar el ratón */
.menu-item:hover .submenu {
  display: flex;
}

.submenu a {
  display: block;
  padding: 0.6rem 1rem;
  color: white;
  text-decoration: none;
}

.submenu a:hover {
  background-color: #555;
}

/* Botón hamburguesa (solo móvil) */
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  margin-right: 10px;
}

/* Tabla empleados */
.tabla-empleados {
  width: 80%;
  border-collapse: collapse;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.empleado-inactivo {
  background-color: #ffe4e4 !important; /* rojo claro */
  color: #a94442 !important;            /* texto rojizo */
  font-weight: bold;                    /* más contraste */
}

.tabla-empleados thead {
  background-color: #7da57d; /* verde grisáceo */
  color: white;
}

.tabla-empleados th,
.tabla-empleados td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.tabla-empleados tr:nth-child(even) {
  background-color: #f9f9f9;
}

.tabla-empleados tr:hover {
  background-color: #dce9dc; /* verde claro */
}

.fila-inactiva {
  background-color: #fef0f0 !important; /* fondo rosa claro */
  color: #a94442; /* texto rojizo */
}

/* Tabla movimientos */
.tabla-movimientos {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.tabla-movimientos thead {
  background-color: #2fd320; /* verde principal */
  color: white;
}

.tabla-movimientos th,
.tabla-movimientos td {
  border: 1px solid #ddd;
  padding: 8px;
}

.tabla-movimientos tr:nth-child(even) {
  background-color: #f2f2f2;
}

.tabla-movimientos tr:hover {
  background-color: #dce9dc; /* verde claro */
}

/* Fondo oscuro detrás del modal */
.modal-backdrop {
  display: none;
  position: fixed;
  z-index: 1040;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* oscuro semitransparente */
}

/* Contenedor del modal */
.modal {
  display: none;              /* oculto por defecto */
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Flexbox para centrar */
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;              /* se muestra centrado */
}

.modal-content {
  background-color: #fff;     /* cuadro blanco */
  color: #333;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

  /* Animación */
  transform: translateY(-20px);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

.modal.show .modal-content {
  opacity: 1;
  transform: translateY(0);
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-row label {
  flex: 1;
  font-weight: bold;
  margin-right: 10px;
  text-align: right;
}

.form-row input,
.form-row select {
  flex: 2;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.contenedor-subtablas {
  display: flex;
  justify-content: space-between; /* distribuye las tres tablas */
  align-items: flex-start;        /* 🔧 las alinea arriba */
  gap: 20px;                      /* espacio entre tablas */
}

.subtabla {
  flex: 1;                        /* cada tabla ocupa mismo ancho */
  min-width: 250px;               /* ancho mínimo */
}

.tabla-submovimientos {
  width: 100%;
  border: 1px solid #ccc;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto; /* 🔧 permite que las columnas se ajusten al contenido */
}



.tabla-submovimientos th,
.tabla-submovimientos td {
  border: 1px solid #ddd;
  padding: 4px 6px;
}

.tabla-submovimientos .hab-col {
  text-align: center;   /* habitaciones centradas */
  width: 70px;          /* ancho fijo y compacto */
  white-space: nowrap;  /* evita que se rompa en varias líneas */
}


.tabla-submovimientos select {
  width: 100%;
  font-size: 12px;
  padding: 2px;
}

.total-row {
  text-align: right;
  font-weight: bold;
  background-color: #f9f9f9;
}
/* Contenedor principal */
.tabla-rooms {
  width: 80%;              /* ocupa el 80% de la pantalla */
  margin: 20px auto;       /* centrada horizontalmente */
  border-collapse: collapse;
  font-size: 14px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Encabezados */
.tabla-rooms th {
  background-color: #f2f2f2;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  border: 1px solid #ddd;
}

/* Celdas */
.tabla-rooms td {
  text-align: center;      /* datos centrados */
  padding: 8px;
  border: 1px solid #ddd;
}

/* Filas alternas */
.tabla-rooms tr:nth-child(even) {
  background-color: #fafafa;
}

/* Botones */
.tabla-rooms .btn-editar,
.tabla-rooms .btn-eliminar {
  padding: 5px 10px;
  margin: 2px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tabla-rooms .btn-editar {
  background-color: #2196f3;
  color: #fff;
}

.tabla-rooms .btn-eliminar {
  background-color: #f44336;
  color: #fff;
}

/* Select de status */
.status-select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
/* Fondo oscuro detrás del modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* semitransparente */
  display: none;
  z-index: 1040;
}

/* Contenedor del modal */
.modal {
  display: none;              /* oculto por defecto */
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;        /* centra verticalmente */
  justify-content: center;    /* centra horizontalmente */
}

/* Cuando se activa */
.modal.show {
  display: flex;
}

/* Caja del contenido */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;                 /* ocupa 80% del ancho */
  max-width: 600px;           /* límite máximo */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: aparecer 0.3s ease-out;
}

/* Animación de entrada */
@keyframes aparecer {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Botón de cierre */
.modal-content .close {
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #aaa;
}

.modal-content .close:hover {
  color: #000;
}

/* Acciones del formulario */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.form-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button[type="submit"] {
  background-color: #2196f3;
  color: #fff;
}

.form-actions button[type="button"] {
  background-color: #f44336;
  color: #fff;
}
/* Responsivo */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #2fd320;
  }

  .menu.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .menu-item {
    width: 100%;
  }

  .submenu {
    position: static; /* submenús se muestran debajo en móvil */
  }
}