/* ===========================================
   ESTILOS PERSONALIZADOS - Los Lagos Adventures
   Solo lo que Bootstrap no resuelve directo.
   =========================================== */

/* Reset universal (retroalimentacion del docente):
   normaliza margenes, rellenos y el modelo de caja
   para que el sitio se comporte igual en todos los navegadores. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Colores de la marca, los guardo como variables
   para no repetirlos en cada regla. */
:root {
  --verde-bosque:   #0F3D2E;
  --verde-profundo: #0A2A20;
  --azul-glaciar:   #E8E6F2;
  --piedra:         #1A1A1A;
  --superficie:     #F5F5F7;
}

/* Tipografías base segun la guia de estilos:
   Montserrat para titulos, Inter para texto. */
body {
  font-family: 'Inter', sans-serif;
  color: var(--piedra);
}

h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* ===== NAVBAR =====
   Subrayado del link activo (como en el mockup). */
.navbar .nav-link {
  color: var(--piedra);
  font-weight: 500;
  margin: 0 .5rem;
}
.navbar .nav-link.active {
  font-weight: 700;
  border-bottom: 2px solid var(--piedra);
}

/* Sombra que aparece al hacer scroll (la agrega JavaScript). */
.navbar.con-sombra {
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: box-shadow .3s ease;
}

/* ===== BOTONES VERDES =====
   Sobrescribo el verde de Bootstrap por el de la marca. */
.btn-verde {
  background-color: var(--verde-bosque);
  color: #fff;
  border: none;
}
.btn-verde:hover {
  background-color: var(--verde-profundo);
  color: #fff;
}

/* ===== HERO INICIO =====
   Imagen de fondo con un velo oscuro encima para que se lea el texto. */
.hero-inicio {
  background-image:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=1600');
  /* Foto montañas Patagonia - Unsplash.
     Cuando tengamos la imagen propia la guardamos en assets/img y cambiamos la URL. */
  background-size: cover;
  background-position: center;
  min-height: 520px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== HERO TOURS =====
   Mismo estilo pero mas bajito y otra foto. */
.hero-tours {
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=1600');
  /* Foto pueblo colorido Patagonia - Unsplash. */
  background-size: cover;
  background-position: center;
  min-height: 260px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Caja blanca del buscador del hero (esquinas redondeadas grandes). */
.hero-busqueda {
  border-radius: 50px;
  overflow: hidden;
  background: #fff;
}

/* ===== TARJETAS DE TOUR =====
   Sombra suave y borde redondeado. */
.tarjeta-tour {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
/* La imagen ocupa todo el ancho de la card y tiene altura fija
   para que aunque una foto no cargue las cards mantengan la misma forma. */
.tarjeta-tour .img-tour {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background-color: var(--azul-glaciar); /* color de respaldo si la foto falla */
}

/* Badge de precio (arriba a la derecha de la imagen). */
.badge-precio {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--azul-glaciar);
  color: var(--verde-bosque);
  font-weight: 600;
  padding: .4rem .7rem;
  border-radius: 20px;
  font-size: .8rem;
}

/* Badge categoria (abajo a la izquierda de la imagen). */
.badge-categoria {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--verde-bosque);
  color: #fff;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 6px;
  font-size: .7rem;
  letter-spacing: 1px;
}

/* ===== FOOTER ===== */
.footer-oscuro {
  background-color: var(--verde-profundo);
  color: #cfd4d2;
}
/* Logo del footer: chico en movil, mas grande en escritorio. */
.logo-footer { height: 30px; }
@media (min-width: 992px) {
  .logo-footer { height: 40px; }
}
.footer-oscuro a {
  color: #cfd4d2;
  text-decoration: none;
}
.footer-oscuro a:hover {
  color: #fff;
}
.footer-oscuro h6 {
  color: #fff;
  letter-spacing: 1px;
  font-size: .85rem;
}

/* ===== PAGINA CONTACTO =====
   Tarjeta verde de "Datos de contacto" (solo escritorio). */
.tarjeta-contacto {
  background-color: var(--verde-bosque);
  color: #fff;
  border-radius: 14px;
  padding: 1.5rem;
}

/* Boton "Abrir en mapas" flotando sobre la imagen. */
.boton-mapa {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #fff;
  color: var(--piedra);
  border-radius: 30px;
  padding: .4rem 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ===== AJUSTES MOVIL =====
   En pantallas chicas el hero se hace mas chico. */
@media (max-width: 768px) {
  .hero-inicio { min-height: 320px; }
  .hero-tours  { min-height: 180px; }
}

/* ===========================================
   NUEVO - Semana 8: interacciones con JavaScript
   =========================================== */

/* Boton flotante "volver arriba" (lo muestra/oculta JavaScript
   segun el scroll de la pagina). */
.boton-arriba {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1030;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: var(--verde-bosque);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  display: none; /* parte oculto, JS lo muestra */
}
.boton-arriba.visible { display: block; }

/* ===== MODO OSCURO =====
   Reglas que se activan cuando JavaScript agrega la clase
   .modo-oscuro al body (boton de luna en la navbar). */
body.modo-oscuro {
  background-color: #101613;
  color: #E4E7E5;
}
body.modo-oscuro .navbar.bg-white {
  background-color: #16201B !important;
  border-color: #24312B !important;
}
body.modo-oscuro .navbar .nav-link { color: #E4E7E5; }
body.modo-oscuro .navbar .nav-link.active { border-bottom-color: #E4E7E5; }
body.modo-oscuro .card,
body.modo-oscuro .tarjeta-tour {
  background-color: #16201B;
  color: #E4E7E5;
}
body.modo-oscuro .card .text-muted,
body.modo-oscuro .text-muted { color: #9BA8A1 !important; }
body.modo-oscuro h1, body.modo-oscuro h2, body.modo-oscuro h3,
body.modo-oscuro h4, body.modo-oscuro h5 { color: #F2F4F3; }
body.modo-oscuro section[style] { background-color: #101613 !important; }
body.modo-oscuro .form-control,
body.modo-oscuro .form-select {
  background-color: #101613;
  border-color: #2C3A33;
  color: #E4E7E5;
}
/* Logo del modo oscuro: un poco mas grande que el claro. */
body.modo-oscuro #logo-navbar { height: 34px; width: auto; }

/* Buscador del inicio en modo oscuro: lo dejo oscuro y sin el
   borde azul al hacer clic. */
body.modo-oscuro .hero-busqueda {
  background: #16201B;
  border: 1px solid #2C3A33;
}
body.modo-oscuro .hero-busqueda .input-group-text {
  background: transparent !important;
}
body.modo-oscuro .hero-busqueda .form-control {
  background: transparent;
  border-color: transparent;
  color: #E4E7E5;
}
body.modo-oscuro .hero-busqueda .form-control::placeholder { color: #9BA8A1; }
body.modo-oscuro .hero-busqueda .form-control:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #E4E7E5;
}

/* Numeros grandes de "Nosotros". En oscuro uso un verde claro
   para que se lean. */
.cifra { color: var(--verde-bosque); }
body.modo-oscuro .cifra { color: #5FBF95; }

/* ===========================================
   NUEVO - Semana 7: panel de administracion
   =========================================== */

/* Fondo gris claro para todas las paginas del administrador. */
.cuerpo-admin { background-color: var(--superficie); min-height: 100vh; }

/* Barra superior del administrador en verde de la marca. */
.navbar-admin { background-color: var(--verde-profundo); }
.navbar-admin .nav-link,
.navbar-admin .navbar-brand { color: #fff; }
.navbar-admin .nav-link.active {
  font-weight: 700;
  border-bottom: 2px solid #fff;
  color: #fff;
}

/* Tarjetas de resumen del dashboard. */
.tarjeta-resumen {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.tarjeta-resumen .icono {
  font-size: 2rem;
  color: var(--verde-bosque);
}

/* Caja centrada del login. */
.caja-login {
  max-width: 420px;
  margin: 8vh auto;
}

/* Fila de mensaje no leido (negrita para destacarlo). */
.mensaje-no-leido td { font-weight: 600; }