/* === MODERN.CSS - Un diseño responsivo y relajante para playadetapia.com (Versión Mejorada) === */

/* --- Variables de Color y Fuentes (inspirado en tu logo) --- */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Sans Regular'),
         url('../fonts/nunito-sans-v19-latin-regular.woff2') format('woff2'); /* RUTA CORREGIDA */
    font-display: swap;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Nunito Sans Bold'),
         url('../fonts/nunito-sans-v19-latin-700.woff2') format('woff2'); /* RUTA CORREGIDA */
    font-display: swap;
}

/* --- Montserrat --- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'),
         url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* RUTA CORREGIDA */
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat Bold'),
         url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* RUTA CORREGIDA */
    font-display: swap;
}
:root {
    /* Colores extraídos del logo */
    --primary-blue: #015da6;     /* Azul principal del logo */
    --accent-yellow: #fdb813;    /* Amarillo/Sol del logo */
    --accent-green: #99c93d;     /* Verde/Naturaleza del logo */
    --secondary-blue: #66b5c6;   /* Azul claro secundario */
    
    /* Colores de soporte para un look relajante */
    --background-light: #f7f9fb; /* Un blanco roto muy suave y limpio */
    --text-dark: #3a4145;        /* Un gris oscuro, más suave que el negro puro */
    --text-light: #ffffff;
    --border-color: #e0e5e9;
    
    /* Tipografía */
    --font-primary: 'Nunito Sans', sans-serif; /* NUEVO: Fuente más moderna y redondeada */
}

/* --- Estilos Globales y Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 17px; /* Aumentamos ligeramente el tamaño base para mejor legibilidad */
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--background-light);
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* NUEVO: Suaviza las esquinas de todas las imágenes */
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-green); /* MODIFICACIÓN: Usamos el verde para el hover */
    text-decoration: none;
}

h1, h2, h3 {
    color: var(--primary-blue);
    margin-bottom: 1.5rem; /* Aumentamos margen para más espacio */
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: 2.8rem; }
h2 { 
    font-size: 2.2rem;
    color: var(--primary-blue); /* MODIFICACIÓN: Usamos el azul secundario para variar */
}
h3 { font-size: 1.6rem; }

p {
    margin-bottom: 1.2rem; /* Añadimos espacio entre párrafos */
}

/* --- Contenedor Principal --- */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0rem 0;
}

/* --- Cabecera y Navegación (MÁS GRANDE) --- */
.site-header {
    background-color: var(--text-light);
    padding: 2rem 0; /* MODIFICACIÓN: Más padding vertical para una cabecera más grande */
    border-bottom: 1px solid var(--border-color);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.logo-container img {
    max-height: 120px; /* MODIFICACIÓN: Logo más grande */
}

.tagline {
    display: flex;              /* 1. Activa el modo Flexbox */
    flex-direction: column;     /* 2. Apila los elementos uno encima de otro */
    align-items: center;        /* 3. Centra todo horizontalmente */
    justify-content: center;    /* 4. Centra el bloque verticalmente */
    padding: 0 1rem;
}
.tagline p {
    margin: 0.2rem 0;
}

.tagline p strong {
    font-size: 1.4em; /* Puedes cambiar este valor (ej: 1.6em o 22px) */
    line-height: 1.2;
    font-weight: 700; /* Asegura que se mantenga en negrita */
    color: var(--text-dark); /* Opcional: define un color si quieres que sea diferente */
}

.contact-info {
    text-align: right;
    font-size: 1rem; /* MODIFICACIÓN: Texto de contacto más grande */
    line-height: 1.6;
}

.main-nav {
    background-color: var(--primary-blue);
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.main-nav ul li a {
    color: var(--text-light);
    padding: 1rem 1.5rem;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.main-nav ul li a:hover {
    background-color: var(--secondary-blue);
    color: var(--text-light);
}

/* --- Contenido Principal --- */
main {
    text-align: left;
}

.content-section {
    padding: 1.0rem 1.0rem ; /* Aumentamos el padding para más aire */
    border-bottom: 1px solid var(--border-color);
}
.content-section:last-child {
    border-bottom: none;
}

.content-section h1, h2 {
    text-align: center; 
}

.content-section p {
    text-align: justify; 
}


.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem; /* Más espacio entre elementos del grid */
}

/* --- Formularios --- */
.form-container, .booking-module, .extra-links {
    background: #fff;
    padding: 2.0rem; /* Más padding para un look más limpio */
    border-radius: 12px; /* Bordes más redondeados */
    box-shadow: 0 5px 15px rgba(0, 93, 166, 0.07); /* Sombra más suave */
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--primary-blue);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Bordes más redondeados */
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(1, 93, 166, 0.15);
}

.btn {
	width: 100%;
    background-color: var(--accent-yellow); /* MODIFICACIÓN: Usamos el amarillo del logo */
    color: var(--text-dark); /* Texto oscuro para contraste sobre amarillo */
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    display: inline-block;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn:hover {
    transform: translateY(-2px); /* Efecto sutil al pasar el ratón */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    color: var(--text-dark);
}


.table-responsive-wrapper {
    width: 100%;
    /* ¡Esta es la magia! */
    overflow-x: auto;
    /* Scroll suave en iOS */
    -webkit-overflow-scrolling: touch; 
    
    /* Hacemos que el 'wrapper' tenga los bordes, no la tabla */
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 93, 166, 0.08);
}

/* * Quitamos los estilos de la tabla que ahora están en el 'wrapper' 
 * para que no haya bordes/sombras dobles.
*/
.table-responsive-wrapper .price-table {
    margin-top: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    /* Asegura que la tabla intente ocupar el espacio que necesita */
    width: auto; 
    min-width: 100%;
}

/* --- Tarifas y Servicios --- */
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    box-shadow: 0 5px 15px rgba(0, 93, 166, 0.07);
    border-radius: 12px;
    overflow: hidden; /* Para que el redondeo afecte a las celdas */
}
.price-table th, .price-table td {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    text-align: center;
}
.price-table th {
    background-color: var(--primary-blue);
    color: var(--text-light);
    font-size: 1.1rem;
}

.services-list {
    list-style: none;
    padding-left: 0;
}
.services-list li {
    /* 1. SOLUCIÓN CLAVE: Desactiva el marcador de lista predeterminado */
    list-style: none !important;
    
    /* Configuración de fondo para el icono SVG */
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2399c93d"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat left center;
    background-size: 24px;
    padding-left: 40px;
    
    /* Otros estilos */
    margin-bottom: 1rem;
    font-size: 1.1rem;
}


/* --- Footer --- */
.site-footer {
    background-color: #3a4145; /* MODIFICACIÓN: Un gris oscuro para un look más elegante */
    color: var(--background-light);
    padding: 3rem 0;
    margin-top: 3rem;
    font-size: 1rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-content a {
    color: var(--secondary-blue);
    font-weight: normal;
}

.footer-content a:hover {
    color: var(--text-light);
}


/* --- Media Queries para hacerlo responsivo --- */

/* Tablets (y móviles en horizontal) */
@media (min-width: 768px) {
    h1 { font-size: 3.5rem; }
    .content-grid {
        grid-template-columns: repeat(2, 1fr); /* Crea dos columnas */
    }
}

/* Ordenadores de escritorio */
@media (min-width: 1024px) {
    .contact-info {
        font-size: 1.1rem;
    }
    .header-content {
        flex-wrap: nowrap;
    }
}

/* === Adiciones para la nueva página de inicio === */

/* --- Slider de Imágenes Hero --- */
.hero-slider {
    position: relative;
    height: 60vh;
    overflow: hidden;
    margin-bottom: 3rem;
    border-radius: 12px;
    
    /* === AJUSTES PARA ALINEACIÓN === */
    padding: 0; /* Anula el padding vertical que hereda de la clase .container */
    margin-top: 2rem; /* Añade un margen superior para separarlo del menú */
    width: 100%; /* Asegura que llene el contenedor nuevo */
}

.hero-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slider-fade 20s infinite; /* 5 segundos por 4 imágenes */
}

/* Animación para cada una de las 4 imágenes */
.hero-slider .slide:nth-child(1) { animation-delay: 0s; }
.hero-slider .slide:nth-child(2) { animation-delay: 5s; }
.hero-slider .slide:nth-child(3) { animation-delay: 10s; }
.hero-slider .slide:nth-child(4) { animation-delay: 15s; }

@keyframes slider-fade {
    0% { opacity: 0; transform: scale(1.05); }
    5% { opacity: 1; transform: scale(1); } /* Entrada */
    25% { opacity: 1; transform: scale(1); } /* Imagen visible */
    30% { opacity: 0; transform: scale(1.05); } /* Salida */
    100% { opacity: 0; }
}

.hero-text {
    position: absolute;
    top: 0; /* Lo ancla a la parte superior */
    left: 0; /* Lo ancla a la izquierda */
    width: 100%; /* Ocupa todo el ancho del slider */
    color: var(--text-light);
    text-align: center;
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); /* Un degradado sutil para legibilidad */
    background-color: rgba(1, 93, 166, 0.75);
    padding: 1rem 1rem 1rem 1rem; /* Más padding arriba y abajo para que no se pegue */
    /* Eliminamos lo que ya no es necesario para centrar verticalmente */
    transform: none; 
    border-radius: 0; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* Sombra de texto más marcada */
}

.hero-text h1 {
    color: var(--text-light);
    font-size: 2.5rem; 
    margin: 0 0 0.5rem 0; 
}

.hero-text p {
    font-size: 1.2rem;
    margin: 0;
}

.home-grid {
    display: grid;
    grid-template-columns: 1fr; /* Por defecto, una sola columna en móviles */
    gap: 2.5rem; /* Espacio entre contenido principal y sidebar en móviles */
    margin-top: 2rem;
}

/* En pantallas de tablet y escritorio, creamos las 2 columnas */
@media (min-width: 992px) {
    .home-grid {
        /* Dos columnas: 2/3 para el contenido, 1/3 para la barra lateral */
        grid-template-columns: 2fr 1fr;
    }
}

/* --- Barra Lateral (Sidebar) --- */
.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Espacio entre el módulo de reservas y los enlaces de la webcam */
}

/* --- Ajuste a la sección de destacados --- */
.highlights-section {
    background-color: #ffffff;
    padding: 1.5rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 93, 166, 0.07);
    border: 1px solid var(--border-color);
    margin-top: 0; /* Eliminamos el margen superior que ya no es necesario */
}

.highlights-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.highlight-card {
    background-color: var(--background-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 93, 166, 0.1);
}

.highlight-card img {
    width: 100%;
    height: 160px; /* Un poco más pequeña para que quepa bien */
    object-fit: cover;
}

.highlight-card .card-content {
    padding: 1.2rem 1rem;
}

.highlight-card h3 {
    font-size: 1.1rem;
    color: var(--primary-blue);
    margin: 0;
}

/* --- Módulo de Reservas --- */
.booking-module h3 {
    display: flex;
    align-items: center; /* Mantiene el icono y el texto centrados verticalmente */
    gap: 10px;
}

/* --- Enlaces Extra (Webcam y Redes) --- */
.extra-links {
    text-align: center;
}

.webcam-link {
    display: flex;
    align-items: center; /* Mantiene el icono y el texto centrados verticalmente */
    gap: 10px;
    background-color: var(--secondary-blue);
    color: var(--text-light);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s;
}
.webcam-link:hover {
    background-color: var(--primary-blue);
    color: var(--text-light);
}

.social-icons a {
    margin: 0 10px;
}
.social-icons img {
    height: 32px;
    width: 32px;
    display: inline-block;
    opacity: 0.8;
    transition: opacity 0.3s, transform 0.3s;
}
.social-icons a:hover img {
    opacity: 1;
    transform: scale(1.1);
}


/* --- Media Queries para la nueva página de inicio --- */
@media (min-width: 992px) {
    .home-grid {
        /* Dos columnas: 2/3 para el contenido y 1/3 para la barra lateral */
        grid-template-columns: 2fr 1fr;
    }
    .hero-text h1 {
        font-size: 2.5rem;
    }
    .hero-text p {
        font-size: 1.3rem;
    }
}

.apartments-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2.5rem;
    box-shadow: 0 5px 15px rgba(0, 93, 166, 0.08);
    border-radius: 12px;
    overflow: hidden; /* Clave para que el redondeo funcione en las celdas */
    font-size: 0.95rem;
}

.apartments-table th, 
.apartments-table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.apartments-table th {
    background-color: var(--primary-blue);
    color: var(--text-light);
    font-size: 1rem;
    text-transform: uppercase;
}

/* Colores de filas alternos para mejor legibilidad */
.apartments-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}
.apartments-table tbody tr:nth-child(odd) {
    background-color: var(--background-light);
}

.apartments-table td:first-child {
    font-weight: bold;
}

.apartments-table .icon-yes,
.apartments-table .icon-no {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    display: block;
}

.gallery-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--secondary-blue);
    color: var(--text-light);
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.gallery-link:hover {
    background-color: var(--primary-blue);
    text-decoration: none;
}

/* Listas de Equipamiento */
.equipment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .equipment-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.equipment-list {
    list-style: none;
    padding-left: 0;
}

.equipment-list li {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23015da6"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat left center;
    background-size: 20px;
    padding-left: 35px;
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
}


/* === ESTILOS PARA EL GRID DE APARTAMENTOS === */

.apartments-grid {
    display: grid;
    /* Crea columnas que se ajustan solas: mínimo 300px, máximo 1fr */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem; /* Espacio entre las tarjetas */
    margin-top: 2.5rem;
}

.apartment-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
    box-shadow: 0 5px B-15px rgba(0, 93, 166, 0.08);
    border: 1px solid var(--border-color);
    text-align: left;
    display: flex;
    flex-direction: column; /* Apila la imagen y el contenido verticalmente */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Necesario para posicionar el badge "Adaptado" */
}

.apartment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 93, 166, 0.12);
}

/* La imagen dentro de la tarjeta */
.apartment-card img {
    width: 100%;
    height: 220px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Recorta la imagen para que llene el espacio sin deformarse */
}

/* El contenido de texto de la tarjeta */
.apartment-card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Hace que el contenido ocupe el espacio restante */
    display: flex;
    flex-direction: column;
}

.apartment-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* La lista de detalles */
.apartment-card .details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    color: var(--text-dark);
    flex-grow: 1; /* Empuja el botón "Ver Fotos" hacia abajo */
}

.apartment-card .details-list li {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* El badge para apartamentos adaptados */
.badge-adapted {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: var(--accent-green);
    color: var(--text-light);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
}

/* Asegura que el botón "Ver Fotos" se vea bien en la tarjeta */
.apartment-card .gallery-link {
    display: block; /* Ocupa todo el ancho */
    text-align: center;
    width: 100%;
}

.badge-adapted {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: var(--accent-green);
    color: var(--text-light);
    padding: 0.4rem 0.7rem; /* Un poco más de padding vertical */
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;

    /* -- LÍNEAS NUEVAS -- */
    display: inline-flex; /* Para alinear el contenido */
    align-items: center;  /* Centra verticalmente icono y texto */
    gap: 0.4rem;          /* Espacio entre el icono y el texto */
}

/* Contenedor principal de la sección */
.cta-gallery-section {
    position: relative;
    padding: 4rem 2rem;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Capa oscura semitransparente sobre la imagen de fondo */
.cta-gallery-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(1, 93, 166, 0.75); /* Azul corporativo con más opacidad */
    z-index: 1;
}

/* Contenido del título y botón (parte superior) */
.cta-gallery-section .cta-content {
    position: relative;
    z-index: 2;
    color: var(--text-light);
    margin-bottom: 2rem;
    margin-top: 3rem;
}

.cta-gallery-section .cta-content h2 {
    font-size: 2.2rem;
    color: var(--text-light);
	
}

.cta-gallery-section .cta-content p {
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
    margin-bottom: 2rem;
}

/* **BOTÓN MEJORADO: Más bonito y comedido** */
.cta-gallery-section .btn.btn-light {
    background-color: #ffffff;
    color: var(--primary-blue) !important; /* Texto azul, importante para sobreescribir */
    border: 2px solid #ffffff;
    font-weight: bold;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: auto; /* Evita que ocupe todo el ancho */
    display: inline-block;
}

.cta-gallery-section .btn.btn-light:hover {
    background-color: transparent;
    color: #ffffff !important;
    transform: translateY(-3px);
}

/* **CAJA DE SERVICIOS: Textos más grandes y alineados** */
.cta-services-box {
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco muy sutil */
    backdrop-filter: blur(5px); /* Efecto cristal esmerilado */
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 2rem;
    max-width: 650px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-services-box p {
    text-align: left; /* Alineado a la izquierda */
    font-size: 1.3rem; /* Texto más grande */
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.cta-services-box .services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Alineado a la izquierda */
    color: var(--text-light);
}

.cta-services-box .services-list li {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    padding-left: 28px;
    position: relative;
    list-style-type: none !important; /* Garantiza que no haya viñeta original */
}

/*
* 2. REGLA PARA EL ICONO (PSEUDO-ELEMENTO ::before)
* Le damos la instrucción más clara posible para renderizar el icono.
*/
.cta-services-box .services-list li::before {
    content: '\f00c'; /* El código para el icono 'check' */
    
    /* **LA CORRECCIÓN**: Usamos la familia de fuente genérica de la librería */
    font-family: 'Font Awesome 6 Free'; 
    
    /* Y usamos el 'peso' de la fuente para decirle que queremos el icono SÓLIDO */
    font-weight: 900; 
    
    color: var(--accent-green);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1rem;

    /* Propiedades extra para asegurar la máxima compatibilidad */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Forzamos la descripción a posicionarse SOBRE la imagen */
.gslide-description {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
	background: linear-gradient(to top, rgba(1, 93, 166, 0.95), rgba(1, 93, 166, 0.15)) !important;
    padding: 1rem 1.0rem 0.0rem 1.0rem !important;
    border-top: none !important;
}

/* Nos aseguramos de que el texto sea blanco y legible */
.gslide-description .gslide-title {
    color: white !important;
    font-size: 1.2rem !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para mejorar legibilidad */
}

/* Ocultamos la cajita blanca que GLightbox crea por defecto */
.gdesc-inner {
    background: none !important;
    padding: 0 !important;
}


/*
============================================================
=== ESTILOS PARA LA NUEVA PÁGINA DE TARIFAS ===
============================================================
*/

/* --- Tabla de Precios --- */
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 93, 166, 0.08);
    border-radius: 10px;
    overflow: hidden; /* Clave para que el border-radius afecte a la tabla */
    border: 1px solid var(--border-color);
}

.price-table thead tr {
    background-color: var(--primary-blue);
    color: var(--text-light);
    text-align: center;
    font-weight: bold;
}

.price-table th,
.price-table td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border-color);
}

.price-table tbody tr {
    background-color: #fff;
    transition: background-color 0.2s ease;
}

.price-table tbody tr:last-of-type td {
    border-bottom: none;
}

.price-table tbody tr:nth-of-type(even) {
    background-color: var(--background-light);
}

.price-table tbody tr:hover {
    background-color: #eef8ff;
}

.price-table td {
    text-align: center;
}

.price-table td:first-child {
    text-align: left;
    font-weight: bold;
    color: var(--primary-blue);
}

.table-notes {
    text-align: right;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
}

/* --- Grid de Información (Temporadas, Condiciones) --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.info-box {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.info-box h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.info-box h3 i {
    color: var(--secondary-blue);
}

.info-box .mt-4 {
    margin-top: 2.5rem;
}

.info-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.info-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 0.8rem;
}

.info-list li::before {
    content: '\f105'; /* Icono de flecha derecha de Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent-green);
    position: absolute;
    left: 0;
    top: 2px;
}

.small-note {
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
    margin-top: 1rem;
}

/* --- Sección de Ofertas --- */
.offers-container .offer-item {
    background-color: var(--background-light);
    border-left: 4px solid var(--accent-yellow);
    padding: 1.5rem 2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.offers-container h3 {
    margin-top: 0;
    color: var(--primary-blue);
}

.environment-section {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 0; /* Quitamos el padding para que la imagen ocupe todo */
    overflow: hidden; /* Muy importante para que la imagen no se salga */
    border: 1px solid var(--border-color);
}

.environment-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 768px) {
    .environment-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.environment-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Elimina espacio extra debajo de la imagen */
}

.environment-text-box {
    padding: 3rem 2.5rem;
}

.environment-text-box h2 {
    margin-top: 0;
    font-size: 2rem;
}

.environment-text-box .btn {
    margin-top: 1.5rem;
    display: inline-flex; /* Para alinear el icono y el texto */
    align-items: center;
    gap: 0.8rem;
}

/* --- Estilo para la maquetación alterna --- */
@media (min-width: 768px) {
    .environment-section.alt-layout .environment-grid {
        direction: rtl; /* Invierte el orden de las columnas */
    }
    
    .environment-section.alt-layout .environment-grid > * {
        direction: ltr; /* Restaura la dirección del texto dentro de las columnas */
    }
}

.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* Proporción 16:9 */
    margin: 2rem 0;
    border-radius: 10px;
}

.video-container iframe {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Estilos para Listas de Lugares de Interés --- */
.environment-text-box h4 {
    font-size: 1.3rem;
    color: var(--primary-blue);
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.interest-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 2rem 0;
}

.interest-list li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.interest-list li::before {
    content: '\f3c5'; /* Icono de "map-marker-alt" */
    font-family: 'Font Awesome 6 Solid';
    font-weight: 900;
    color: var(--accent-yellow);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.1rem;
}


/* --- Sección del Mapa --- */
.map-section {
    padding: 0;
    margin: 0;
    line-height: 0; /* Elimina espacios extra */
}

.map-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Mantiene la proporción del mapa, puedes ajustar el % si es necesario */
    padding-top: 50%; 
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Lista de Distancias --- */
.distances-list li {
    font-size: 1.1rem;
}

.distances-list a {
    color: var(--primary-blue); /* Color azul principal del enlace */
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s ease;
}

.distances-list a:hover {
    color: var(--secondary-blue); /* Un azul más claro al pasar el ratón */
    text-decoration: none;
}.

.contact-form-container {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.contact-form-container h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--primary-blue);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .contact-form .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="email"],
.contact-form .form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-primary);
}

.contact-form .form-group textarea {
    resize: vertical;
}

/* Estilos para checkboxes */
.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.form-group-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 1.2em;
    height: 1.2em;
}
.form-group-checkbox label {
    font-size: 0.9rem;
    line-height: 1.5;
}
.form-group-checkbox a {
    color: var(--primary-blue);
    text-decoration: underline;
}

.form-group-recaptcha {
    margin-bottom: 1.5rem;
    transform: scale(0.95);
    transform-origin: 0 0;
}
@media (min-width: 480px) {
    .form-group-recaptcha {
        transform: none;
    }
}


/* --- Mensajes de Éxito y Error --- */
.form-message {
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}
.form-message ul {
    margin-top: 0.5rem;
    padding-left: 20px;
}
.form-message.error {
    background-color: #ffebee;
    border: 1px solid #e57373;
    color: #c62828;
}
.form-message.success {
    background-color: #e8f5e9;
    border: 1px solid #81c784;
    color: #2e7d32;
}


.result-container {
    max-width: 700px;
    margin: 2rem auto; /* Centra el contenedor */
    text-align: center;
}

.result-box {
    border-radius: 12px;
    padding: 3rem 2.5rem;
    border-width: 1px;
    border-style: solid;
}

.result-box i {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.result-box h2 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.result-box p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.result-box .btn {
    width: auto;
    padding: 0.8rem 2.5rem;
}

/* Estilo para el caso de éxito */
.result-box.success {
    background-color: #e8f5e9;
    border-color: #81c784;
    color: #2e7d32;
}
.result-box.success i {
    color: #4caf50;
}

/* Estilo para el caso de error */
.result-box.error {
    background-color: #ffebee;
    border-color: #e57373;
    color: #c62828;
}
.result-box.error i {
    color: #f44336;
}

/* Hacemos el grid más ancho en la página de disponibilidad */
.availability-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.available-card .card-image-box {
    position: relative;
}

.available-card .card-image-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* --- Nueva caja de precios --- */
.price-box {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0.5rem 0;
    text-align: center;
}

.price-box .price-label {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.price-box .original-price {
    font-size: 1.2rem;
    text-decoration: line-through;
    color: #999;
    margin-right: 0.5rem;
}

.price-box .offer-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-green);
}

.price-box .final-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-blue);
}

.price-box .price-nights {
    display: block;
    font-size: 0.8rem;
    color: #777;
    margin-top: 0.25rem;
    text-transform: uppercase;
}

.available-card .btn {
    width: 100%;
    padding: 0.9rem;
    font-size: 1.1rem;
}

.modify-search-section {
    background-color: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.modify-search-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 93, 166, 0.08);
    border: 1px solid var(--border-color);
}

.modify-search-container h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--primary-blue);
}

/* Reutilizamos el estilo del booking-form que ya teníamos */
.modify-search-container .booking-form .form-row {
    margin-bottom: 1.5rem;
}

.modify-search-container .booking-form .btn {
    width: 100%;
    padding: 0.9rem;
}

@media (min-width: 768px) {
    .modify-search-container .booking-form .btn {
        width: auto;
        padding: 0.9rem 2.5rem;
    }
    .modify-search-container .booking-form {
        display: flex;
        align-items: flex-end;
        gap: 1.5rem;
    }
    .modify-search-container .booking-form .form-row {
        flex-grow: 1;
        margin-bottom: 0;
    }
}

.toggle-search-container {
    text-align: center;
    margin-top: 1.5rem;
    padding-bottom: 2rem; /* Espacio para que respire antes del grid */
}

.btn-secondary {
    background-color: #fff;
    color: var(--primary-blue);
    border: 1px solid var(--border-color);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    box-shadow: 0 2px 5px rgba(0, 93, 166, 0.05);
}

.btn-secondary:hover {
    background-color: var(--background-light);
    border-color: var(--secondary-blue);
    transform: translateY(-2px);
}

/* Botón Hamburguesa (oculto en escritorio) */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}
.hamburger, .hamburger::before, .hamburger::after {
    content: '';
    display: block;
    background-color: var(--primary-blue);
    width: 28px;
    height: 3px;
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
}
.hamburger::before {
    transform: translateY(-8px);
}
.hamburger::after {
    transform: translateY(5px);
}



.logo-desktop {
    display: block;
}
.logo-mobile {
    display: none;
}


/* --- Estilos para Escritorio --- */
/* Nos aseguramos que la cabecera se vea bien en escritorio con el nuevo orden */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-container {
    /* El botón hamburguesa está antes, lo movemos al final en escritorio */
    order: 2; 
}
.tagline { order: 3; }
.contact-info { order: 4; }
.nav-toggle { order: 5; } /* Botón hamburguesa */

.language-selector-container {
    display: flex;           /* Usamos flexbox */
    justify-content: flex-end;  /* <-- CLAVE: Alinea su contenido (el div de las banderas) a la derecha */
    background-color: var(--background-light); /* Mantenemos el fondo para el modo sticky */
}

/* 2. Bloque que envuelve las banderas */
.language-selector {
    display: flex;
    gap: 8px;     /* Espacio entre las banderas */
    max-width: 1100px;
	max-height: 35px;
    margin: 0 0;
    padding: 0.00rem 0rem;
    justify-content: flex-end;
}

/* 3. Estilo de las banderas (emojis) */
.language-selector a {
    font-size: 22px; /* Tamaño de las banderas */
    text-decoration: none;
    transition: transform 0.2s ease;
}

.language-selector a:hover {
    transform: scale(1.15); /* Efecto visual al pasar el ratón */
}


#cookie-consent-banner {
    display: none; /* Oculto por defecto, JS lo mostrará si es necesario */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--text-dark, #3a4145); /* Usa variable de CSS con fallback */
    color: var(--text-light, #ffffff);
    padding: 1.5rem 2rem;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    
    /* Layout con Flexbox */
    display: flex;
    flex-wrap: wrap; /* Para que sea responsivo en móviles */
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}
#cookie-consent-banner p {
    margin: 0;
    flex-grow: 1; /* El texto ocupa el espacio disponible */
}
#cookie-consent-banner a {
    color: var(--secondary-blue, #66b5c6);
    text-decoration: underline;
    font-weight: bold;
}
#cookie-accept-btn {
    background-color: var(--accent-yellow, #fdb813);
    color: var(--text-dark, #3a4145);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
    white-space: nowrap; /* Evita que el texto del botón se parta */
}
#cookie-accept-btn:hover {
    transform: scale(1.05);
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    #cookie-consent-banner {
        flex-direction: column;
        padding: 1.5rem;
        text-align: center;
    }
}

@media (max-width: 1024px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    /* --- 1. La Barra de Cabecera Fija --- */
    .site-header {
        height: 75px; 
        position: sticky;
        top: 0;
        z-index: 1001;
        background-color: #fff; 
        
        /* === CORRECCIÓN CLAVE === */
        /* Reseteamos el 'padding: 2rem 0;' que heredaba del estilo de escritorio */
        padding: 0; 
    }
    .site-header .header-content {
        height: 100%;
        justify-content: space-between; 
        
        /* === CORRECCIÓN === */
        width: 100%;      /* Asegura que ocupe todo el ancho */
        padding: 0 1rem;  /* Añade padding lateral para que no se pegue a los bordes */
        margin: 0;        /* Elimina cualquier margen automático */
    }

    /* --- 2. Ocultamos lo que no es necesario en móvil --- */
    .tagline, .contact-info, .logo-desktop {
        display: none;
    }

    /* --- 3. El Grupo Izquierdo (Botón + Logo) --- */
    .header-mobile-group {
        display: flex; /* <-- CLAVE: Pone los elementos del grupo en línea */
        align-items: center; /* <-- CLAVE: Los centra verticalmente */
        gap: 1rem; /* Espacio entre el botón y el logo */
    }

    .logo-mobile {
        display: block;
    }

    .hamburger, .hamburger::before, .hamburger::after { 
        content: ''; 
        display: block; 
        background-color: var(--primary-blue); 
        width: 30px; /* Un poco más ancho */
        height: 4px; /* MÁS GRUESO para mejor visibilidad */
        border-radius: 3px; 
        transition: all 0.3s ease; 
        position: relative; 
    }
    .hamburger::before { 
        transform: translateY(-9px); /* Ajustamos la separación para el nuevo grosor */
    }
    .hamburger::after { 
        transform: translateY(5px); /* Ajustado */
    }
    .nav-toggle.is-active .hamburger { 
        transform: rotate(45deg); 
    }
    .nav-toggle.is-active .hamburger::before { 
        opacity: 0; 
    }
    .nav-toggle.is-active .hamburger::after { 
        transform: translateY(-4px) rotate(-90deg); /* Ajuste fino de la 'X' */
    }

    .nav-toggle {
        display: block; /* Muestra el botón hamburguesa */
    }
    
    /* --- 4. El Menú Desplegable (sin cambios, pero lo incluimos para que esté todo junto) --- */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        transform: translateY(-100%);
        transition: transform 0.35s ease-out;
        z-index: 1000;
        padding-top: 55px; /* Coincide con la altura de la cabecera */
    }
    .main-nav.is-open {
        transform: translateY(0);
    }
    .main-nav ul {
        flex-direction: column;
    }
    .main-nav li a {
        border-bottom: 1px solid var(--border-color);
        text-align: center;
        color: var(--text-dark) !important;
        font-weight: bold;
    }
    
    .language-selector {
		display: flex;
		gap: 8px;     /* Espacio entre las banderas */
		max-width: 1100px;
		max-height: 5px;
		margin: 0 0;
		padding: 0.00rem 0rem;
		justify-content: flex-end;
	}
	
	.hero-slider {
        /* Hacemos el slider un poco más bajo en móvil para ver más contenido */
        height: 50vh; 
    }

    .hero-text {
        /* Reducimos el padding para que la caja de texto sea más pequeña */
        padding: 0.35rem 1rem;
    }

    .hero-text h1 {
        /* Reducimos drásticamente el H1 */
        font-size: 1.5rem; /* (El original era 2.5rem) */
        margin-bottom: 0.25rem; /* Menos espacio entre H1 y P */
    }

    .hero-text p {
        /* Reducimos el párrafo */
        font-size: 0.9rem; /* (El original era 1.2rem) */
    }
}

/* --- Tarifas y Servicios --- */
.min-stay-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    box-shadow: 0 5px 15px rgba(0, 93, 166, 0.07);
    border-radius: 12px;
    overflow: hidden; /* Para que el redondeo afecte a las celdas */
}
.min-stay-table th, .min-stay-table td {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    text-align: center;
}
.min-stay-table th {
    background-color: var(--primary-blue);
    color: var(--text-light);
    font-size: 1.1rem;
}

/* ================================================= */
/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE OFERTAS (ADMIN) --- */
/* (SCOPED bajo .page-ofertas-admin) */
/* ================================================= */

.page-ofertas-admin .section-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color, #e0e5e9);
    margin: 20px 0 30px 0;
}

/* ---------------------------------------------------- */
/* --- Botones (Cambiar y Subir) --- */
/* ---------------------------------------------------- */

.page-ofertas-admin .button, 
.page-ofertas-admin .btn-primary {
    /* Base style */
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    
    /* Primary Color (Azul corporativo) */
    background-color: var(--primary-blue, #015da6);
    color: var(--text-light, #ffffff);
    box-shadow: 0 4px 10px rgba(0, 93, 166, 0.2);
}

.page-ofertas-admin .button:hover,
.page-ofertas-admin .btn-primary:hover {
    background-color: #004a8c;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 93, 166, 0.3);
}

.page-ofertas-admin .form-inline .button {
    height: 40px; 
    margin-left: 10px;
    line-height: 18px; 
}


/* ---------------------------------------------------- */
/* --- Tablas (Ajuste Forzado al 100%, SIN SCROLL) --- */
/* ---------------------------------------------------- */

/* Eliminamos el overflow del contenedor para evitar el scroll horizontal */
.page-ofertas-admin .table-container {
    margin-bottom: 30px;
    background: var(--text-light, #ffffff); 
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0, 93, 166, 0.08); 
    border: 1px solid var(--border-color, #e0e5e9);
    padding: 0;
    /* QUITAMOS: overflow-x: auto; */
}

.page-ofertas-admin .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    /* QUITAMOS: min-width: 1200px; -> ESTO EVITA EL SCROLL */
    border: none;
    table-layout: fixed; /* Esto ayuda a que la tabla se ajuste al 100% de forma estricta */
    overflow: hidden; 
}

/* Celdas y encabezados */
.page-ofertas-admin .data-table th, 
.page-ofertas-admin .data-table td {
    padding: 10px 8px; /* Reducimos el padding para hacer las columnas más estrechas */
    text-align: left;
    border-right: 1px solid #eee;
    border-bottom: 1px solid var(--border-color, #e0e5e9);
    /* Fuerza que el texto se corte si no cabe, evitando desbordamientos */
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cabecera: Azul Marino (#13294B) - ALTA ESPECIFICIDAD para asegurar el color */
.page-ofertas-admin .data-table tr.table-header th {
    background-color: var(--primary-blue) !important; /* Usamos !important para asegurar que se aplique */
    color: white;
    font-weight: 700;
}

/* Rayado y hover */
.page-ofertas-admin .data-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.page-ofertas-admin .data-table tr:nth-child(odd) {
    background-color: var(--text-light, #ffffff);
}
.page-ofertas-admin .data-table tr:hover {
    background-color: #f0f8ff;
}

/* Columna de Borrar (Icono) - Se fija su ancho */
.page-ofertas-admin .data-table td:last-child {
    text-align: center; 
    width: 50px; 
    padding: 10px 5px;
}

.page-ofertas-admin .data-table td a i.fa-trash-alt {
    color: #dc3545; 
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

.page-ofertas-admin .data-table td a:hover i.fa-trash-alt {
    transform: scale(1.2);
    color: #c82333;
}

/* ---------------------------------------------------- */
/* --- Formulario de Cuadrícula (General) --- */
/* ---------------------------------------------------- */

.page-ofertas-admin .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 8px;
    margin-bottom: 40px;
}

.page-ofertas-admin .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.page-ofertas-admin .span-full {
    grid-column: 1 / -1; 
}

.page-ofertas-admin .form-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.page-ofertas-admin .input-field,
.page-ofertas-admin select,
.page-ofertas-admin textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    height: 40px; 
}

.page-ofertas-admin textarea.input-field {
    height: auto;
    min-height: 100px;
}

.page-ofertas-admin .input-field-small {
    width: 60px;
    text-align: center;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;
}

.page-ofertas-admin .checkbox-group label {
    font-weight: bold;
    margin-bottom: 10px;
}
.page-ofertas-admin .checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.page-ofertas-admin .form-submit {
    text-align: center;
}

/* ---------------------------------------------------- */
/* --- Media Query: Solo el Formulario es Responsivo --- */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    
    .page-ofertas-admin .form-grid {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
    }
    
    .page-ofertas-admin .span-full {
        grid-column: auto;
    }
}

.icon-cama-individual {
    /* Propiedades para el icono de 2 camas de 90 cm */
    display: inline-block;
    width: 32px; /* Ajusta según el tamaño de tu icono */
    height: 15px; /* Ajusta según el tamaño de tu icono */
    background-image: url('../img/2-single-beds.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    /* Si es una fuente de iconos: font-family: 'Mi-Fuente-Iconos'; content: '\e123'; */
}

.icon-cama-matrimonial {
    /* Propiedades para el icono de cama de 1.50 m */
    display: inline-block;
    width: 23px; 
    height: 15px; 
    background-image: url('../img/icono-matrimonial.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    /* Si es una fuente de iconos: font-family: 'Mi-Fuente-Iconos'; content: '\e456'; */
}