/* ===== SISTEMA DE TEMAS ===== */

/* Variables para tema oscuro (por defecto) */
:root {
  --primary-color: #52200c;
  --secondary-color: #f7a54a;
  --dark-bg: #121212;
  --darker-bg: #0a0a0a;
  --light-text: #f5f5f5;
  --light-accent: #f8d7a4;
  --dark-text: #333;
  --card-bg: rgba(30, 30, 30, 0.9);
  --card-border: rgba(247, 165, 74, 0.15);
  --input-bg: rgba(255, 255, 255, 0.1);
  --modal-bg: linear-gradient(145deg, #1a1a1a, #252525);
}

/* Variables para tema claro (beige) */
body.theme-light {
  --primary-color: #8b6f47;
  --secondary-color: #c9a961;
  --dark-bg: #f5f0e8;
  --darker-bg: #e8ddd0;
  --light-text: #3a3a3a;
  --light-accent: #6b5b3d;
  --dark-text: #2a2a2a;
  --card-bg: rgba(255, 250, 240, 0.95);
  --card-border: rgba(201, 169, 97, 0.3);
  --input-bg: rgba(255, 255, 255, 0.8);
  --modal-bg: linear-gradient(145deg, #faf8f3, #f5f0e8);
}

/* Botón de cambio de tema */
.theme-toggle-btn {
  background: rgba(247, 165, 74, 0.2);
  border: 2px solid rgba(247, 165, 74, 0.3);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  backdrop-filter: blur(10px);
}

.theme-toggle-btn:hover {
  background: rgba(247, 165, 74, 0.4);
  border-color: var(--secondary-color);
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 5px 15px rgba(247, 165, 74, 0.3);
}

body.theme-light .theme-toggle-btn {
  background: rgba(201, 169, 97, 0.3);
  border-color: rgba(201, 169, 97, 0.4);
}

body.theme-light .theme-toggle-btn:hover {
  background: rgba(201, 169, 97, 0.5);
  border-color: var(--secondary-color);
}

/* Ajustes específicos para tema claro */
body.theme-light {
  background-color: var(--dark-bg);
  color: var(--light-text);
}

body.theme-light header {
  background: rgba(245, 240, 232, 0.95) !important;
  border-bottom: 1px solid rgba(201, 169, 97, 0.3) !important;
}

body.theme-light nav ul li a {
  color: var(--light-text) !important;
}

body.theme-light .habitacion-pag {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

body.theme-light .habitacion-descripcion {
  background: rgba(255, 250, 240, 0.8);
}

body.theme-light .habitacion-descripcion h2 {
  color: var(--secondary-color);
}

body.theme-light .habitacion-descripcion p {
  color: var(--light-text);
}

body.theme-light .modal {
  background: rgba(0, 0, 0, 0.7);
}

body.theme-light .modal-contenido {
  background: var(--modal-bg);
  border-color: rgba(201, 169, 97, 0.4);
}

body.theme-light .modal-info {
  background: rgba(250, 248, 243, 0.9);
  color: var(--light-text);
}

body.theme-light .modal-info h2 {
  color: var(--secondary-color);
}

body.theme-light .modal-info > p {
  background: rgba(201, 169, 97, 0.1);
  border-left-color: var(--secondary-color);
  color: var(--light-text);
}

body.theme-light .modal-info > p strong {
  color: var(--light-accent);
}

body.theme-light .form-group input[type="date"],
body.theme-light .form-group input[type="number"] {
  background: var(--input-bg);
  color: var(--dark-text);
  border-color: rgba(201, 169, 97, 0.4);
}

body.theme-light .info-item {
  background: rgba(255, 250, 240, 0.8);
  border-color: rgba(201, 169, 97, 0.3);
}

body.theme-light .info-item:hover {
  background: rgba(255, 250, 240, 0.95);
  border-color: rgba(201, 169, 97, 0.5);
}

body.theme-light footer {
  background: linear-gradient(to right, #e8ddd0, #f5f0e8);
  color: var(--light-text);
}

body.theme-light footer a {
  color: var(--secondary-color);
}

body.theme-light footer a:hover {
  color: var(--light-accent);
}

body.theme-light .precio {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.25), rgba(201, 169, 97, 0.08));
  border-color: rgba(201, 169, 97, 0.4);
  color: var(--light-text);
  box-shadow: 0 6px 20px rgba(201, 169, 97, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.theme-light .precio strong {
  background: linear-gradient(135deg, var(--secondary-color), var(--light-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.theme-light .precio span {
  color: var(--light-accent);
}

body.theme-light .btn-mas-info {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 8px 25px rgba(201, 169, 97, 0.3),
              0 0 0 1px rgba(201, 169, 97, 0.2);
  border: 2px solid rgba(201, 169, 97, 0.2);
}

body.theme-light .btn-mas-info:hover {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  box-shadow: 0 12px 40px rgba(201, 169, 97, 0.4),
              0 0 0 1px rgba(201, 169, 97, 0.3);
  transform: translateY(-4px);
}

/* ===== ESTILOS ADICIONALES PARA TEMA CLARO ===== */

/* Header y navegación */
body.theme-light header {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.theme-light nav ul li a::after {
  background: var(--secondary-color);
}

/* Secciones */
body.theme-light section {
  background: var(--dark-bg);
}

body.theme-light .instalaciones,
body.theme-light .servicios {
  background: var(--darker-bg);
}

/* Estilos unificados para listas - usando variables CSS */
body.theme-light .servicios ul li,
body.theme-light .habitaciones ul li {
  background: rgba(201, 169, 97, 0.1);
  border-left-color: var(--secondary-color);
}

body.theme-light .servicios ul li:hover,
body.theme-light .habitaciones ul li:hover {
  background: rgba(201, 169, 97, 0.15);
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.2);
}

body.theme-light .descripcion {
  background: linear-gradient(rgba(245, 240, 232, 0.1), rgba(245, 240, 232, 0.1)), 
              url('https://www.lostiempos.com/sites/default/files/especial_multimedia/111111111111111111.jpg');
  background-attachment: scroll;
  background-position: center 50%;
  background-size: cover;
}

body.theme-light .descripcion .contenido {
  background: rgba(255, 250, 240, 0.95);
  border-color: rgba(201, 169, 97, 0.4);
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

body.theme-light .descripcion .texto h2 {
  color: var(--secondary-color);
}

body.theme-light .descripcion .texto h2::after {
  background: var(--secondary-color);
}

/* Slideshow */
body.theme-light .slideshow-text h1 {
  color: var(--light-text);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* Botones generales */
body.theme-light .btn {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

body.theme-light .btn:hover {
  box-shadow: 0 15px 30px rgba(201, 169, 97, 0.3);
}

body.theme-light .btn-secondary {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

body.theme-light .btn-secondary:hover {
  background: var(--secondary-color);
  color: var(--dark-text);
}

/* Formularios */
body.theme-light .form-group label {
  color: var(--secondary-color);
}

body.theme-light .number-input-container {
  background: var(--input-bg);
  border-color: rgba(201, 169, 97, 0.4);
}

body.theme-light .number-input input {
  color: var(--dark-text);
}

body.theme-light .modal-info form {
  background: rgba(255, 250, 240, 0.6);
  border-color: rgba(201, 169, 97, 0.3);
}

body.theme-light .modal-info button[type="button"] {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}

/* Carrusel */
body.theme-light .carrusel-prev,
body.theme-light .carrusel-next {
  background: rgba(201, 169, 97, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}

body.theme-light .carrusel-prev:hover,
body.theme-light .carrusel-next:hover {
  background: rgba(201, 169, 97, 1);
  box-shadow: 0 8px 30px rgba(201, 169, 97, 0.4);
}

/* Mapa */
body.theme-light .mapa {
  border-color: var(--secondary-color);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

body.theme-light .mapa:hover {
  box-shadow: 0 20px 50px rgba(201, 169, 97, 0.2);
  border-color: var(--light-accent);
}

body.theme-light .mapa-container h2 {
  color: var(--secondary-color);
}

/* Redes sociales */
body.theme-light .social-icons a {
  background: rgba(201, 169, 97, 0.2);
  border-color: rgba(201, 169, 97, 0.4);
  color: var(--secondary-color);
}

body.theme-light .social-icons a:hover {
  background: var(--secondary-color);
  color: var(--dark-text);
  border-color: var(--secondary-color);
}

/* QR Code */
body.theme-light .qr-code {
  border-color: var(--secondary-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Títulos */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3 {
  color: var(--light-accent);
}

body.theme-light .contactoh1 {
  color: var(--secondary-color);
}

body.theme-light .contactoh1::after {
  background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
}

/* Listas */
body.theme-light ul li {
  color: var(--light-text);
}

/* Enlaces */
body.theme-light a {
  color: var(--secondary-color);
}

body.theme-light a:hover {
  color: var(--light-accent);
}

/* Selector de idioma */
body.theme-light #language-selector {
  background-color: rgba(255, 250, 240, 0.9);
  color: var(--light-text);
  border-color: rgba(201, 169, 97, 0.4);
}

body.theme-light #language-selector:hover {
  background-color: rgba(255, 250, 240, 1);
  border-color: var(--secondary-color);
}

/* Logo */
body.theme-light .logo img {
  filter: brightness(0.9);
}

/* Sección de reserva - estilos base en styles.css, solo ajustes de color aquí */
body.theme-light .reserva::before {
  background: rgba(247, 165, 74, 0.05);
}

body.theme-light .reserva h2 {
  text-shadow: 0 2px 10px rgba(201, 169, 97, 0.3);
}

body.theme-light .reserva p {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

/* ===== MÁS ESTILOS PARA TEMA CLARO ===== */

/* Body y fondo general */
body.theme-light {
  background-color: var(--dark-bg);
}

/* Header completo - estilos movidos a styles.css para consistencia */

body.theme-light .logo img {
  filter: brightness(0.85) contrast(1.1);
}

/* Navegación */
body.theme-light nav ul li a {
  color: var(--light-text) !important;
}

body.theme-light nav ul li a:hover {
  color: var(--secondary-color) !important;
}

/* Selector de idioma */
body.theme-light #language-selector {
  background-color: rgba(255, 250, 240, 0.95);
  color: var(--light-text);
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow: 0 4px 10px rgba(201, 169, 97, 0.15);
}

body.theme-light #language-selector:hover {
  background-color: rgba(255, 250, 240, 1);
  border-color: var(--secondary-color);
  box-shadow: 0 6px 12px rgba(201, 169, 97, 0.25);
}

/* Slideshow - estilos mejorados para tema claro */
body.theme-light .slide img {
  filter: brightness(0.8) contrast(1.15) saturate(1.1);
}

body.theme-light .slideshow-text {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(201, 169, 97, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.theme-light .slideshow-text h1 {
  background: linear-gradient(135deg, #ffffff 0%, #f5f0e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    2px 2px 10px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(201, 169, 97, 0.2);
}

body.theme-light .prev,
body.theme-light .next {
  background: rgba(201, 169, 97, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}

body.theme-light .prev:hover,
body.theme-light .next:hover {
  background: rgba(201, 169, 97, 1);
  box-shadow: 0 12px 35px rgba(201, 169, 97, 0.4);
}

body.theme-light .slideshow-indicator.active {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  box-shadow: 0 0 15px rgba(201, 169, 97, 0.5);
}

/* Secciones - estilos base en styles.css, solo colores aquí */

/* Descripción */
body.theme-light .descripcion {
  background: linear-gradient(rgba(245, 240, 232, 0.1), rgba(245, 240, 232, 0.1)), 
              url('https://www.lostiempos.com/sites/default/files/especial_multimedia/111111111111111111.jpg');
  background-attachment: scroll;
  background-position: center 50%;
  background-size: cover;
}

body.theme-light .descripcion .contenido {
  background: rgba(255, 250, 240, 0.95);
  border-color: rgba(201, 169, 97, 0.4);
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

body.theme-light .descripcion .imagen img {
  border-color: rgba(201, 169, 97, 0.2);
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.2);
}

/* Habitaciones */
body.theme-light .habitaciones {
  background: linear-gradient(180deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
}

body.theme-light .habitaciones::before {
  background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
}

body.theme-light .habitacion-pag {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(201, 169, 97, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.theme-light .habitacion-pag:hover {
  box-shadow: 0 30px 80px rgba(201, 169, 97, 0.2),
              0 0 0 1px rgba(201, 169, 97, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(201, 169, 97, 0.5);
}

body.theme-light .habitacion-pag::before {
  background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
}

body.theme-light .habitacion-pag::after {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.05) 0%, transparent 50%);
}

body.theme-light .habitacion-imagen {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
}

body.theme-light .habitacion-imagen img {
  filter: brightness(0.95) contrast(1.05);
}

body.theme-light .habitacion-pag:hover .habitacion-imagen img {
  filter: brightness(1) contrast(1.1);
}

body.theme-light .habitacion-imagen::after {
  background: linear-gradient(180deg, 
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0.15) 100%);
}

body.theme-light .habitacion-imagen::before {
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.2) 0%, transparent 60%);
}

body.theme-light .habitacion-descripcion {
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.98) 0%, rgba(250, 245, 235, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.theme-light .habitacion-descripcion::before {
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.4), transparent);
}

body.theme-light .habitacion-descripcion h2 {
  color: var(--secondary-color);
  text-shadow: 0 1px 3px rgba(201, 169, 97, 0.2);
}

body.theme-light .habitacion-descripcion p {
  color: var(--light-text);
}

body.theme-light .habitacion-descripcion p strong {
  color: var(--light-accent);
}

/* Reserva */
body.theme-light .reserva {
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.35)), 
              url('../assets/imagenes/Fondo oscuro.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

body.theme-light .reserva::before {
  background: rgba(247, 165, 74, 0.05);
}

body.theme-light .reserva .container {
  position: relative;
  z-index: 1;
}

body.theme-light .reserva h2 {
  color: var(--secondary-color);
  text-shadow: 0 2px 10px rgba(201, 169, 97, 0.3);
}

body.theme-light .reserva p {
  color: var(--light-text);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

body.theme-light .btn-reserva {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  box-shadow: 0 10px 30px rgba(201, 169, 97, 0.3),
              0 0 0 1px rgba(201, 169, 97, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(201, 169, 97, 0.4);
}

body.theme-light .btn-reserva:hover {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: white;
  box-shadow: 0 15px 40px rgba(201, 169, 97, 0.4),
              0 0 0 1px rgba(201, 169, 97, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-5px) scale(1.05);
  border-color: rgba(201, 169, 97, 0.6);
}

body.theme-light .btn-reserva:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(201, 169, 97, 0.3);
}

body.theme-light .qr-code {
  border-color: var(--secondary-color);
  box-shadow: 0 10px 30px rgba(201, 169, 97, 0.25),
              0 0 0 2px rgba(201, 169, 97, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

/* Modal mejorado para tema claro */
body.theme-light .modal {
  background: rgba(0, 0, 0, 0.75);
}

body.theme-light .modal-contenido {
  background: var(--modal-bg);
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4),
              0 0 0 2px rgba(201, 169, 97, 0.4),
              inset 0 0 50px rgba(201, 169, 97, 0.05);
}

body.theme-light .cerrar {
  background: rgba(201, 169, 97, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--light-text);
}

body.theme-light .cerrar:hover {
  background: rgba(201, 169, 97, 0.5);
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

body.theme-light .modal-carrusel {
  background: rgba(0, 0, 0, 0.2);
}

/* Formularios en tema claro */
body.theme-light .form-group input[type="date"]:focus,
body.theme-light .form-group input[type="number"]:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.2), 0 0 20px rgba(201, 169, 97, 0.15);
  background: rgba(255, 255, 255, 0.9);
}

body.theme-light .number-input-container {
  background: var(--input-bg);
  border-color: rgba(201, 169, 97, 0.5);
}

body.theme-light .number-input button {
  background: linear-gradient(135deg, var(--primary-color), #6b5b3d);
  color: white;
}

body.theme-light .number-input button:hover {
  background: linear-gradient(135deg, var(--secondary-color), #b8955a);
  box-shadow: 0 4px 15px rgba(201, 169, 97, 0.3);
}

body.theme-light .number-input input {
  color: var(--dark-text);
}

/* Botón reservar en modal */
body.theme-light .modal-info button[type="button"] {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}

body.theme-light .modal-info button[type="button"]:hover {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  box-shadow: 0 12px 35px rgba(46, 204, 113, 0.4);
}

/* Listas de servicios - estilos base en styles.css, solo colores aquí */

/* Contacto */
body.theme-light .contacto {
  background: var(--dark-bg);
}

body.theme-light .contacto::before {
  background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
}

/* Mejoras adicionales */
body.theme-light * {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 97, 0.5) rgba(245, 240, 232, 0.3);
}

body.theme-light ::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, 0.5);
}

body.theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 169, 97, 0.7);
}

body.theme-light ::-webkit-scrollbar-track {
  background: rgba(245, 240, 232, 0.3);
}