:root {
    --color-background: #121212; /* negro elegante */
    --color-text: #ffffff; /* blanco puro */
    --color-primary: #91a336;
    --color-header-footer: #000000; /* negro total para header/footer */
    --color-border: #333333; /* gris oscuro para bordes */
    --color-primary-hover: #9ca2a1fa;
    --color-white: #ffffff;
}

/* ================================
   ESTILOS GENERALES
================================= */

body {
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: 'Roboto', sans-serif;

    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

/* Links */
a {
    color: var(--color-text);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    text-decoration: none;
}

/* Contenedores principales */
/* .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
} */

/* ================================
   HEADER
================================= */

header {
    color: var(--color-white);
    height: 150px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* para que esté encima de todo */
    transition: all 0.8s ease; /* ← añade esto */
}

header .logo {
    width: 150px;
}
.arriba-derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  margin-left: auto;
  padding: 10px 20px;
  max-width: 250px;
}

header nav {
    margin-top: 0; /* cambiado de 10px a 0 */
    position: absolute; /* añadido */
    bottom: 0px;
    left: 160px; /* añadido para separarlo del logo */
}
.derecha {
    text-align: right;
    color: white;
    font-size: 16px;
}
.div-logout a {
    font-size: 1.0rem;
    color: red;
}
  
.nav-bar {
    display: flex;
    background-color: black;
    margin-top: auto;
    margin-bottom: 10px;
    border-radius: 1rem;
}

  .nav-bar a {
    color: #FFFAF0;
    text-decoration: none;
  }

  .nav-bar ul li {
    border-radius: 8px;
    padding: 10px;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    margin: 0; /* cambiado de 10px 0 0 0 a 0 */
    list-style: none;
}

  .nav-bar ul li a {
    display: flex;
    color: white;
    text-decoration: none;
    font-weight: normal;
  }

  .nav-bar ul{
    display: flex;
    flex-direction: row; /* ← añade esto para desktop */
    /* justify-content: center; */
    /* align-items: center; */
    /* margin: 0; */
    /* list-style: none; */
  }

  .nav-bar li:hover {
    background-color: #444;
  }

.header-container {
    display: flex;
    justify-content: space-between; /* logo a la izq - usuario a la der */
    align-items: flex-start; /* cambiado de center a flex-start */
    position: relative; /* añadido */
    display: flex;
    background-image: url("../img/elbosque_ojas01.jpeg");
    background-color: rgba(0, 0, 0, 0.80  ); /* velo oscuro encima */
    background-blend-mode: multiply; /* o overlay, darken... */
    background-size: cover;
    background-position: center;
    height: 100%;
}
    
    .logo-grande {
        display: inline;
    }
    .logo-chico {
    display: none;
    }
    header.pequeno .logo-chico {
    display: inline;
    /* height: 20px; */
    } 
    header.pequeno .logo-grande {
    display: none;
    }
    header.pequeno .img-logo {
        transition: all 0.8s ease;
    }
    header.pequeno {  
        height: 60px;
    }
    body.header-pequeno main {
      margin-top: 60px;        /* altura de header.pequeno */
    }

    header.pequeno .logo-chico {
      display: inline;
      /* width: 50px; ← Muy importante */
    }
    header.pequeno .arriba-derecha {
        display: none; /* ocultar idiomas si quieres */
    }
    header.pequeno .nav-bar {
      margin: 7px;
      margin-left: 40px;
    }
    .img-logo{
    padding: 10px;
    height: 130px;
    border-radius: 1rem;
    }
    img.img-logo.logo-chico {
      padding: 10px;
      height: 40px;
    }

.nav-links {
    display: flex;
    justify-content: center;
}
.nav-links a {
    color: var(--color-white);
    font-weight: normal;
}

/* Para ocultar el checkbox y el menú hamburguesa */
.menu-toggle {
    display: none;
}

.hamburger {
    display: none;
    font-size: 40px;
    cursor: pointer;
    padding: 10px;
}
    
/* ================================
   MAIN
================================= */


    main {
        margin: 0;
        position: relative;
        min-height: 100vh;
        z-index: 0;
        overflow: visible;
        background-image: url("../img/elbosque_front1.jpeg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 20px;
        padding-top: 150px;

        
    
    }


    main::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }
    
    main > * {
        position: relative;
        z-index: 2;
    }
    

/* ================================
   FOOTER
================================= */

footer {
    background-color: var(--color-header-footer);
    color: var(--color-white);
    text-align: center;
    padding: 20px;
    /* font-size: 14px; */
}

/* ================================
   COMPONENTES EXTRA
================================= */
.habitacion {
    margin: 20px auto;
    margin-top: 0;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    max-height: 600px;
    background-color: rgba(0, 0, 0, 0.5); /* fondo tipo velo */
    border-radius: 1rem;
    padding: 20px;
  
  }
  h2 {
    color: #FFFFF0;
    font-weight: bold;
  }
  .habitacion .desc_cuarto {
    flex: 1;
    color: #FFFFF0;
  }
  
  .foto_cuarto {
    flex: 1;
    min-width: 300px;
  }
  
  .carrusel-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  
  .carrusel-habitacion {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 0.5rem;
  
  }
  
  .carrusel-fondo img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
  }
  
  .carrusel-fondo img.activo {
    opacity: 1;
    z-index: 1;
  }
  
  
  .carrusel-habitacion img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .carrusel-habitacion img.activo {
    display: block;
  }
  
  .velo-fondo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* velo elegante */
    z-index: 1;
  }
  
  .contenido-main {
    position: relative;
    z-index: 2;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.5); /* fondo más oscuro que el velo */
    color: #FAFAFA;
    font-size: 18px;
    border-radius: 1rem;
    max-width: 800px;
    margin: auto;
    margin-top: 40px;
  }
  
  .texto-carrusel {
    position: absolute;
    z-index: 2;
    bottom: 50px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    width: 100%;
    animation: textoFade 6s ease-in-out infinite;
    /* max-width: 90%; */
  }
  
  .mensaje-carrusel {
    display: block;
    transition: opacity 0.8s ease-in-out;
    animation: caeSuave 6s ease-in-out infinite;
  }
  
  @keyframes caeSuave {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    40% {
      opacity: 1;
      transform: translateY(0);
    }
    60% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(10px);
    }
  }
  @keyframes textoFade {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  
  /* Estilo para botones del carrusel de habitaciones */
  .controles-habitacion {
    margin-top: 10px;
    text-align: center;
  }
  
  .controles-habitacion .prev,
  .controles-habitacion .next {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .controles-habitacion .prev:hover,
  .controles-habitacion .next:hover {
    background-color: #555;
  }
  
  /* Estilo para los puntos del carrusel de habitaciones */
  .controles-habitacion .puntos {
    margin-top: 10px;
  }
  
  .controles-habitacion .punto {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .controles-habitacion .punto.activo {
    background-color: #fff;
  }
  
  /* New style block for .fondo-fijo images */
  .fondo-fijo {
    width: 100%;
    object-fit: cover;
    display: block;
  }
  
  .formulario-general h3{
  color: #FFFAF0;
  }
.formulario-general {
    background-color: rgba(0, 0, 0, 0.5); /* fondo tipo habitaciones */
    padding: 30px;
    border-radius: 1rem;
    max-width: 600px;
    margin: 40px auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: center;
  }
  
  .formulario-general label {
    color: #FAFAFA;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
  }
  
  .formulario-general input[type="text"],
  .formulario-general input[type="email"],
  .formulario-general input[type="date"],
  .formulario-general input[type="number"],
  .formulario-general input[type="password"],
  .formulario-general select {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 0.5rem;
    font-size: 16px;
    background-color: #fff;
    color: #333;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  }
  
  .formulario-general input[type="submit"] {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    text-align: right;
  }
  
  .formulario-general input[type="submit"]:hover {
    background-color: #e0e0e0;
  }
  .formulario-general textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 0.5rem;
    font-size: 16px;
    background-color: #fff;
    color: #333;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
    resize: vertical; /* permite redimensionar solo verticalmente si querés */
  }
  .tarjeta-mensajes{
    background-color: rgba(0, 0, 0, 0.5); /* fondo tipo habitaciones */
    padding: 30px;
    border-radius: 1rem;
    max-width: 600px;
    margin: 40px auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
  /* Added new style for boton-derecha */
  .boton-derecha {
    text-align: right;
  }

/* ===== Estilo para tablas del admin ===== */
.tabla-general table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  
  .tabla-general th,
  .tabla-general td {
    color: #FFFFF0;
    padding: 10px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .tabla-general th {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
  }
  
  .tabla-general td {
    background-color: rgba(255, 255, 255, 0.05);
  }
  
  /* Estilo para área de administración tipo panel */
  .tabla-general {
    padding: 20px;
    margin: 40px auto;
    max-width: 1500px;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
  
  
  
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0,0.9); /* Velo oscuro */
    opacity: 0;
    pointer-events: none; /* No bloquea interacción con el fondo */
    transition: opacity 0.3s ease;
    z-index: 90; /* Justo detrás del menú */
  }
  
  .div-general{
    background-color: rgba(0, 0, 0,0.7);
    text-align: center;
    padding: 20px;
  }
  .div-general h3{
  color:#FFFAF0
  }
  
  /* === Estilo para panel del huésped === */
  .div-bienvenida {
    padding: 20px ;
    background-color: rgba(0, 0, 0, 0.5);
    max-width: 600px;
    margin: 30px auto;
    padding: 25px;
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    list-style: none;
    backdrop-filter: blur(5px);
    text-align: center;
  }
  
  .div-bienvenida ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .div-bienvenida li {
    margin: 15px 0;
  }
  
  .div-bienvenida a {
    display: block;
    padding: 15px 20px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #FFFAF0;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .div-bienvenida a:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .grande{ 
    font-size: 20px;
    color:green;
  }
  
  .star-rating {
    direction: rtl;
    font-size: 2em;
    unicode-bidi: bidi-override;
    display: inline-block;
  }
  .star-rating input {
    display: none;
  }
  .star-rating label {
    color: #ccc;
    cursor: pointer;
  }
  .star-rating input:checked ~ label,
  .star-rating label:hover,
  .star-rating label:hover ~ label {
    color: gold;
  }
  .boton-link {
    background-color: #4CAF50; /* Verde */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  .boton-link:hover {
    background-color: #45a049; /* Verde más oscuro */
  }
  
  .star-rating {
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: 2rem;
  }
  
  .star-rating input {
      display: none;
  }
  
  .star-rating label {
      color: #ccc;
      cursor: pointer;
      padding: 0 5px;
      transition: color 0.2s;
  }
  
  .star-rating input:checked ~ label,
  .star-rating label:hover,
  .star-rating label:hover ~ label {
      color: gold;
  }
  .rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 5px;
  }
  
  .rating input {
    display: none;
  }
  
  .rating label {
    font-size: 2rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
  }
  
  .rating input:checked ~ label,
  .rating label:hover,
  .rating label:hover ~ label {
    color: gold;
  }
  
  /* Espera  */
  #esperaOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 38, 38, 0.926);
    z-index: 9999;
    text-align: center;
    padding-top: 20%;
    font-size: 24px;
    color: #1917175d;
  }
  .spinner {
    margin: 50px auto;
    margin-top: 150px;
    width: 50px;
    height: 50px;
    border: 5px solid #aba4a4c4;
    border-top: 5px solid #2a2b2aed;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  .esperaLetra{
    color: #e5dada;
  }
  
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
 
  /* MODO DESKTOP: Agrupar como Dropdown */
@media (min-width: 769px) {
  .dropdown {
    position: relative;
  }
  .dropdown .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(10, 10, 10);
    
    z-index: 1000;
    min-width: 150px;
    width: 220px;
  }
  .dropdown:hover .submenu {
    display: block;
  }
 
}

/* MODO MOBILE: Mostrar normal hacia abajo */
@media (max-width: 768px) {
  .submenu {
    display: block;
    position: static;
    background: none;
    border: none;
    padding-left: 20px; /* Opcional, para dar sangría */
  }
  .solo-desktop{
    display: none !important;
  }
}

.flatpickr-day.rango-seleccionado {
  background-color: #525651 !important; 
  color: white !important; 
  /* color: rgb(41, 47, 23); */
  /* border-radius: 50%; */
}

.flatpickr-day.flatpickr-disabled.checkin-dia {
  background-color: #525651 !important; 
  color: white !important;  
  /* color: white !important */
}
.flatpickr-day.flatpickr-disabled {
  color:rgb(238, 235, 235) !important;

}
.flatpickr-day.today{
  /* color:rgb(238, 235, 235) !important; */
  color:#393939 !important; 
  border: none !important;
}
.flatpickr-day.flatpickr-disabled {
  color:rgb(238, 235, 235) !important;
}
.flatpickr-day.nextMonthDay.flatpickr-disabled {
  color:rgb(238, 235, 235) !important;
}
.flatpickr-day.prevMonthDay.flatpickr-disabled {
  color:rgb(238, 235, 235) !important;
}
.flatpickr-day.prevMonthDay {
  opacity: 1 !important;
  color:#393939 !important; 
  pointer-events: auto !important;
}
.flatpickr-day.nextMonthDay {
  opacity: 1 !important;
  color:#393939 !important; 
  pointer-events: auto !important;
}

.calendario {
  /* border-radius: 15rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.flatpickr-input {
  display: none !important;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;
}
#calendarioFlatpickr {
  display: block;
  margin: 0 auto;
  text-align: left;
}

#calendarioFlatpickr .flatpickr-calendar {
  margin: 0 auto;
}


.flatpickr-calendar.inline {
  margin: 0 auto !important;
}

.nombre{
  padding-top: 20px;
  display: block;      /* Hace que cada label ocupe toda la línea */
  text-align: left;    /* Alinea el texto a la izquierda */
  margin-left: 0;      /* Asegura que no haya margen indeseado */
}

.fechas > input {
  max-width: 307.875px;
}

.fechas > label {
  max-width: 307.875px;
  margin: auto;
  text-align: left; 
           /* Elimina márgenes por defecto si los hay */
}

.precio-noche,
.total-reserva {
  font-size: 1rem;
  margin: 0.5em 0;
}

.centrado {
  margin-left: auto;
  margin-right: auto;
  display: block;
}


/* Para los reportes */
.filtros-container {
  /* display: flex; */
  /* flex-wrap: wrap; */
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  margin: auto;
}

.filtros-container select,
.filtros-container button,
.filtros-container input[type="number"] {
  font-size: 1rem;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  color: #333;
  appearance: none;
  transition: all 0.2s ease;
}

.filtros-container select:focus,
.filtros-container button:focus {
  outline: none;
  border-color: #666;
  box-shadow: 0 0 4px rgba(100, 100, 100, 0.3);
}

.filtros-container button {
  background-color: #4c6339;
  color: white;
  cursor: pointer;
}

.filtros-container button:hover {
  background-color: #626569;
}

.input-formulario,
.input-formulario select {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 10px;
  background-color: #fff;
   height: 44px;
}

.input-formulario:focus {
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(127, 120, 120, 0.5);
  outline: none;
}

.div-chico {
  margin: 10px auto; /* centrado horizontal */
  padding: 20px;
  max-width: 700px; /* ajustable según tu preferencia */
  background-color: #1b1a19dc; /* más claro que div-general */
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}