/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Color Variables */
:root {
    --primary-green: #0b5fa5; /* tema azul (antes verde #7ba668) */
    --dark-green: #09528e;    /* tema azul (antes verde #658c53) */
    --accent-blue: #3a75c4;
    --accent-blue-hover: #295ca3;
    --light-bg: #f8f9fa;
    --input-bg: #eef2f6;
    --card-bg: #ffffff;
    --text-dark: #2d3748;
    --text-muted: #718096;
    --text-light: #ffffff;
    --border-radius-card: 16px;
    --border-radius-input: 8px;
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
    --shadow-notice: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Login Split Screen Layout
   ========================================================================== */

.login-split-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    box-sizing: border-box;
}

.login-image-panel {
    display: none !important;
}

.login-form-panel {
    width: 100%;
    max-width: 600px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    overflow-y: visible;
    box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .login-form-panel {
        width: 100%;
        padding: 0;
    }
}

.login-logo-header {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    margin-top: 10px;
}

.login-logo-header img {
    max-height: 85px;
    object-fit: contain;
}

/* Main Login Card */
.login-card {
    width: 100%;
    max-width: 600px;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-card);
    padding: 35px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 25px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
}

.login-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.login-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

/* Custom Dropdown Buttons */
.dropdown-lang-btn {
    background-color: var(--primary-green) !important;
    color: var(--text-light) !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.dropdown-lang-btn:hover {
    background-color: var(--dark-green) !important;
}

/* Form Styles */
.login-card label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: block;
}

.login-card .form-control {
    background-color: var(--input-bg) !important;
    border: 1px solid transparent !important;
    border-radius: var(--border-radius-input) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    height: auto !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.login-card .form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 3px rgba(123, 166, 104, 0.15) !important;
}

/* Input Group for Password eye */
.login-card .input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.login-card .input-group .form-control {
    flex: 1;
}

.login-card .input-group-prepend {
    margin-left: -1px;
    display: flex;
}

.login-card .input-group-text {
    background-color: var(--input-bg) !important;
    border: none !important;
    border-top-right-radius: var(--border-radius-input) !important;
    border-bottom-right-radius: var(--border-radius-input) !important;
    color: var(--text-muted) !important;
    display: flex;
    align-items: center;
    padding: 0 16px !important;
    cursor: pointer;
}

/* Buttons */
.btn-green-submit {
    background-color: var(--primary-green) !important;
    color: var(--text-light) !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--border-radius-input) !important;
    padding: 12px 28px !important;
    width: auto !important;
    min-width: 180px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(123, 166, 104, 0.15);
}

.btn-green-submit:hover {
    background-color: var(--dark-green) !important;
}

.btn-blue-submit {
    background-color: var(--accent-blue) !important;
    color: var(--text-light) !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--border-radius-input) !important;
    padding: 12px 24px !important;
    width: 100%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(58, 117, 196, 0.15);
}

.btn-blue-submit:hover {
    background-color: var(--accent-blue-hover) !important;
}

.forgot-password-link {
    display: block;
    text-align: center;
    color: var(--accent-blue) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    margin-top: 15px;
    transition: color 0.2s;
}

.forgot-password-link:hover {
    color: var(--accent-blue-hover) !important;
}

/* Availability panel styling */
.availability-title-container {
    width: 100%;
    max-width: 600px;
    text-align: left;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.availability-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.availability-card-green-box {
    width: 100%;
    max-width: 600px;
    background-color: var(--primary-green) !important;
    border-radius: var(--border-radius-card);
    padding: 25px;
    margin-bottom: 30px;
    box-sizing: border-box;
    box-shadow: var(--shadow-soft);
}

.availability-card-green-box .form-group {
    margin-bottom: 16px;
}

.availability-card-green-box .input-group {
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: var(--border-radius-input);
    display: flex;
    align-items: center;
    padding: 4px 14px;
    height: 48px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

.availability-card-green-box .input-group-prepend {
    margin-right: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.availability-card-green-box .input-group-prepend span {
    font-size: 16px;
}

.availability-card-green-box select.form-control,
.availability-card-green-box input.form-control {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    height: 100% !important;
    color: var(--text-dark) !important;
    width: 100%;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.availability-card-green-box .input-group-append {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    margin-left: auto;
}

.recaptcha-availability-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

#html_element {
    transform: scale(0.9);
    transform-origin: 0 0;
}

.btn-availability-view {
    background-color: var(--accent-blue) !important;
    color: var(--text-light) !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--border-radius-input) !important;
    padding: 12px 22px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(58, 117, 196, 0.15);
    transition: background-color 0.2s ease !important;
}

.btn-availability-view:hover {
    background-color: var(--accent-blue-hover) !important;
}

/* Footer Links styling */
.login-footer-links {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.login-footer-links a {
    color: var(--accent-blue) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: underline;
    transition: color 0.2s;
}

.login-footer-links a:hover {
    color: var(--accent-blue-hover) !important;
}

.login-footer-separator {
    color: #cbd5e0;
}

.login-disclaimer-text {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    max-width: 600px;
    margin-top: 15px;
    line-height: 1.4;
}

.login-sicore-version {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    align-self: flex-end;
    margin-top: 10px;
}


/* ==========================================================================
   Welcome Dashboard Styles (Post-Login)
   ========================================================================== */

/* Main layout wrapper */
body {
    font-family: 'Inter', sans-serif !important;
    background-color: #f3f4f6 !important;
    color: var(--text-dark);
}

/* 1. Sidebar menu */
.navbar-default.navbar-static-side {
    background-color: var(--primary-green) !important;
    border: none !important;
    overflow-y: auto !important;
}

/* Custom Scrollbar for Premium Sidebar */
.navbar-default.navbar-static-side::-webkit-scrollbar {
    width: 6px;
}
.navbar-default.navbar-static-side::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}
.navbar-default.navbar-static-side::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.navbar-default.navbar-static-side::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.nav-header {
    background: transparent !important;
    padding: 25px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 10px 0 !important;
}

.nav-header .profile-element span {
    font-size: 12px;
    opacity: 0.8;
}

.nav-header .profile-element .font-bold {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.metismenu li a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 14px 20px !important;
    border-left: 4px solid transparent;
    transition: all 0.15s ease-in-out;
}

.metismenu li a i {
    margin-right: 10px;
    font-size: 15px;
    width: 20px;
    text-align: center;
}

.metismenu li a:hover,
.metismenu li.active > a {
    background-color: var(--dark-green) !important;
    color: #ffffff !important;
    border-left-color: #ffffff;
}

.metismenu li.nav-header a {
    border-left: none !important;
    padding: 0 !important;
}

.metismenu li.nav-header a:hover {
    background-color: transparent !important;
}

/* 2. Unified Top Navbar */
.navbar.navbar-static-top {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 30px !important;
    box-sizing: border-box;
}

.navbar-header-info {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
}

.navbar-header-info-item {
    font-size: 13.5px;
    color: var(--text-dark);
}

.navbar-header-info-item strong {
    color: #000;
    font-weight: 700;
}

.navbar-top-links li {
    display: inline-block;
}

/* Premium language dropdown button in Topbar */
.topbar-lang-btn {
    background-color: #eef2f6 !important;
    color: #4a5568 !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: var(--border-radius-input) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.topbar-lang-btn:hover {
    background-color: #e2e8f0 !important;
}

/* 3. Main content welcome elements */
.welcome-hero-banner {
    width: 100%;
    height: 320px;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 30px;
}

.welcome-hero-banner .carousel-inner {
    border-radius: var(--border-radius-card);
    overflow: hidden;
}

/* fallback por si queda algún <img> suelto dentro */
.welcome-hero-banner > img,
.welcome-hero-banner img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Wrapper externo del hero carousel — no tiene overflow:hidden para que el caption sea visible */
.hero-carousel-wrapper {
    width: 100%;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden; /* recorta solo las esquinas del wrapper completo */
}

#heroCarousel {
    width: 100%;
}

/* Contenedor de imagen con altura fija — estandariza cualquier formato de foto */
.carousel-img-wrapper {
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    cursor: pointer;
}

.carousel-img-wrapper:hover {
    opacity: 0.95;
}

.carousel-img-wrapper img {
    display: none;
}

/* Caption debajo de la foto — nombre del parque en negro */
.carousel-park-caption {
    background-color: #ffffff;
    padding: 14px 24px 16px 24px;
}

.carousel-park-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px;
    font-weight: 700;
    color: #1a202c !important;
    margin: 0;
    text-shadow: none;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* Clickable slide wrapper — mantener por compatibilidad */
.carousel-slide-clickable {
    position: relative;
    display: block;
    cursor: pointer;
}

.carousel-slide-clickable:hover .carousel-park-caption,
.hero-carousel-wrapper:hover .carousel-park-caption {
    background-color: #f7f9f7;
}

/* Flechas limitadas al área de la foto */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    z-index: 10 !important;
    top: 0;
    height: 320px;
    bottom: auto;
}

@media (max-width: 575px) {
    .carousel-img-wrapper {
        height: 200px;
    }
    .carousel-park-caption {
        padding: 10px 16px 12px 16px;
    }
    .carousel-park-name {
        font-size: 17px;
    }
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        height: 200px;
    }
}

.welcome-notices-section {
    width: 100%;
    margin-top: 10px;
}

.welcome-notices-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.welcome-notices-title i {
    color: var(--primary-green);
}

/* Notice Cards Grid */
.welcome-notices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.welcome-notice-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-card);
    padding: 20px;
    box-shadow: var(--shadow-notice);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.welcome-notice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.welcome-notice-header {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-green);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.welcome-notice-content {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 500;
    margin: 0;
}

.welcome-notice-card-link {
    text-decoration: none !important;
    display: block;
}

/* Adjust Powervirtual/Facebook widget */
.powervirtual-widget {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-card);
    padding: 15px;
    box-shadow: var(--shadow-notice);
    border: 1px solid rgba(0,0,0,0.03);
    margin-top: 25px;
}

/* Force premium green sidebar visibility and margin on desktop resolutions */
@media (min-width: 768px) {
    body.body-small .navbar-static-side {
        display: block !important;
        position: fixed !important;
        width: 220px !important;
        z-index: 2000 !important;
        height: 100% !important;
        background-color: var(--primary-green) !important;
    }
    body.body-small #page-wrapper {
        margin: 0 0 0 220px !important;
    }
    
    .navbar-static-side {
        display: block !important;
        position: fixed !important;
        width: 220px !important;
        z-index: 2000 !important;
        height: 100% !important;
        background-color: var(--primary-green) !important;
    }
    #page-wrapper {
        margin: 0 0 0 220px !important;
    }
}

/* ==========================================================================
   National Parks Booking System (Redesign)
   ========================================================================== */

/* Search Container Styling */
.search-container {
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#busquedaTituloDiv {
    width: 280px;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid #cbd5e0;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease-in-out;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

#busquedaTituloDiv:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(123, 166, 104, 0.15);
}

/* Parks Grid Layout */
.parks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 40px;
}

/* Park Card Design */
.park-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.park-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

.park-card-img-container {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

.park-card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.park-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.park-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 6px 0;
}

.park-card-info {
    font-size: 13px;
    color: var(--text-muted) !important;
    text-decoration: underline;
    margin-bottom: 10px;
    font-weight: 500;
    transition: color 0.15s;
}

.park-card-info:hover {
    color: var(--primary-green) !important;
}

.park-card-price {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

.park-card-price i {
    color: var(--text-muted);
}

.park-card-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.park-card-btn:hover {
    background-color: #2d3748 !important;
}

/* ==========================================================================
   Reservation Form Styles (Paso #1 de 4)
   ========================================================================== */

.reservation-hero-banner {
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 25px;
}

.reservation-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reservation-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.reservation-title {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

/* Availability Button Link styling */
.btn-availability-link {
    background-color: #eef2f6 !important;
    color: #4a5568 !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s;
}

.btn-availability-link:hover {
    background-color: #e2e8f0 !important;
    color: var(--primary-green) !important;
}

.btn-availability-link i {
    color: var(--primary-green);
    font-size: 15px;
}

/* Three Column Form Row Layout */
.reservation-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .reservation-form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

.reservation-form-col {
    display: flex;
    flex-direction: column;
}

.reservation-form-col label {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

/* Custom Input Groups */
.custom-input-group,
.custom-select-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-input-group:focus-within,
.custom-select-group:focus-within {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(123, 166, 104, 0.15);
}

.custom-input-group input.form-control,
.custom-select-group select.form-control {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    height: auto !important;
    color: var(--text-dark) !important;
    flex: 1;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Custom Icon Addon for Calendar */
.custom-input-addon {
    background-color: #f7fafc;
    border-left: 1px solid #cbd5e0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-input-addon:hover {
    background-color: #edf2f7;
    color: var(--primary-green);
}

/* Custom Select Dropdown Chevron */
.custom-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 14px;
    display: flex;
    align-items: center;
}

/* Bottom Actions styling */
.reservation-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.btn-reservation-back {
    background-color: #ffffff !important;
    color: var(--primary-green) !important;
    border: 1.5px solid var(--primary-green) !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s;
}

.btn-reservation-back:hover {
    background-color: rgba(123, 166, 104, 0.05) !important;
    transform: translateX(-2px);
}

.btn-reservation-next {
    background-color: var(--primary-green) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 28px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 6px rgba(123, 166, 104, 0.15);
    transition: all 0.2s;
}

.btn-reservation-next:hover {
    background-color: var(--dark-green) !important;
    transform: translateX(2px);
    box-shadow: 0 6px 12px rgba(123, 166, 104, 0.25);
}

/* Adjustments for Title Layout in SolicitudReservacion */
.white-bg.page-heading {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 15px 30px !important;
}

.white-bg.page-heading h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 5px 0 0 0;
}

/* ==========================================================================
   Responsive & Sidebar Adjustments
   ========================================================================== */

/* Toggle Button & Sidebar Behavior */
.navbar-minimalize {
    display: none !important; /* Hidden on desktop by default */
}

@media (max-width: 767px) {
    /* Show menu button on mobile/tablets */
    .navbar-minimalize {
        display: inline-block !important;
        background-color: var(--primary-green) !important;
        border-color: var(--primary-green) !important;
        color: white !important;
        margin: 14px 10px 5px 15px !important;
    }

    /* Force page-wrapper margin to 0 when sidebar is hidden on small screens */
    #page-wrapper {
        margin: 0 !important;
        width: 100% !important;
    }

    /* Adjust fixed sidebar on mobile when open/toggled */
    body.body-small .navbar-static-side {
        width: 220px !important;
        display: block !important;
        position: fixed !important;
        z-index: 2050 !important;
        height: 100% !important;
        background-color: var(--primary-green) !important;
        left: -220px;
        transition: left 0.3s ease;
    }

    body.body-small.mini-navbar .navbar-static-side {
        left: 0 !important;
        width: 220px !important;
        display: block !important;
        overflow-y: auto !important;
    }

    /* Sidebar toggle smooth transition */
    .navbar-static-side {
        left: -220px;
        transition: left 0.3s ease;
    }

    body.mini-navbar .navbar-static-side {
        left: 0 !important;
        display: block !important;
        width: 220px !important;
    }
}

/* 1. Login Page Mobile Improvements */
@media (max-width: 575px) {
    .login-card {
        padding: 24px 16px !important;
    }
    .login-card-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .login-form-panel {
        padding: 30px 16px !important;
    }
    .availability-card {
        padding: 24px 16px !important;
    }
    .recaptcha-availability-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .btn-availability-view {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* 2. Main/Home Page Mobile Spacing */
.home-wrapper {
    padding: 20px 30px;
}
@media (max-width: 767px) {
    .home-wrapper {
        padding: 15px 12px !important;
    }
}
@media (max-width: 1199px) {
    .facebook-widget-col {
        margin-top: 20px;
    }
}

/* 3. Online Reservations Step 1 Mobile Spacing */
@media (max-width: 575px) {
    .search-container {
        justify-content: center !important;
    }
    #busquedaTituloDiv {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 4. Online Reservations Step 2-4 Mobile Header and Actions spacing */
.reservation-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
}
@media (max-width: 767px) {
    .reservation-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 15px !important;
    }
    .reservation-header-row div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
@media (max-width: 575px) {
    .reservation-actions-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .btn-reservation-back,
    .btn-reservation-next {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* Hide top navbar user profile info on mobile screens and adjust header padding */
@media (max-width: 991px) {
    .navbar-header-info {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .navbar.navbar-static-top {
        padding: 8px 15px !important;
    }

    /* Force submenus inside mobile drawer menu to behave as normal static vertical menus */
    body.body-small .nav .nav-second-level,
    body.body-small.mini-navbar .nav .nav-second-level {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.12) !important;
        padding: 0 !important;
        font-size: 13.5px !important;
        display: none;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.body-small .nav .nav-second-level.in,
    body.body-small.mini-navbar .nav .nav-second-level.in,
    body.body-small .nav li.active > .nav-second-level,
    body.body-small.mini-navbar .nav li.active > .nav-second-level {
        display: block !important;
    }

    /* Ensure the child links are visible when expanded on mobile */
    body.body-small.mini-navbar .metismenu .collapse,
    body.body-small .metismenu .collapse {
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.body-small.mini-navbar .metismenu .collapse a,
    body.body-small .metismenu .collapse a {
        display: block !important;
        padding: 12px 20px 12px 40px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.body-small.mini-navbar .metismenu .collapse a:hover,
    body.body-small .metismenu .collapse a:hover {
        background-color: var(--dark-green) !important;
        color: #ffffff !important;
    }
}

/* ==========================================================================
   Mockup Split Screen Booking Layout
   ========================================================================== */

.booking-split-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px;
    align-items: flex-start;
    width: 100% !important;
    margin-top: 20px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.booking-image-col {
    flex: 1.1 !important;
    max-width: 50% !important;
    min-width: 0;
    flex-shrink: 0;
}

.booking-image-col img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    border-radius: 28px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
}

.booking-form-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
}

.booking-header-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.booking-park-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}

/* Form fields layout */
.booking-fields-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.booking-field-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.booking-field-row label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    width: 140px;
    margin: 0;
    flex-shrink: 0;
}

.booking-field-input-wrapper {
    flex: 1;
    max-width: 400px;
    border-radius: 12px !important;
}

.booking-field-input-wrapper input.form-control,
.booking-field-input-wrapper select.form-control {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
}

.btn-availability-link {
    background-color: #cbd5e0 !important;
    color: #2d3748 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.2s;
}

.btn-availability-link:hover {
    background-color: #a0aec0 !important;
    color: #1a202c !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .booking-split-container {
        flex-direction: column;
        gap: 25px;
    }
    .booking-image-col {
        max-width: 100%;
        width: 100%;
    }
    .booking-form-col {
        width: 100%;
    }
    .booking-field-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .booking-field-row label {
        width: 100%;
    }
    .booking-field-input-wrapper {
        max-width: 100%;
    }
}

/* ==========================================================================
   Override Inspinia wrapper conflicts for booking split layout
   ========================================================================== */

/* Ensure #form-container allows full flex width */
#form-container {
    width: 100%;
    box-sizing: border-box;
}

/* Override any Inspinia float clearing that breaks flexbox on the form */
#ventaCabeceraForm .booking-split-container,
#form-container .booking-split-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* Ensure the wrapper-content padding doesn't break our layout */
.wrapper-content {
    overflow: visible !important;
}

/* ==========================================================================
   TEMA AZUL - Login y Home (base #0B5FA5)
   Verde reservado para "Avisos importantes" y el boton "English" del Home.
   Override al final: NO altera las reglas verdes existentes; Buscar/Formulario
   conservan su verde (salvo el sidebar, que es compartido).
   ========================================================================== */
:root {
    --blue-900: #06345b;
    --blue-800: #084477;
    --blue-700: #09528e;
    --blue-600: #0b5fa5;
    --blue-500: #2872b0;
    --blue-300: #91b7d7;
    --blue-100: #d8e5f1;
    --blue-050: #eef4f9;
}

/* Sidebar (azul en todas las pantallas internas) */
.navbar-default.navbar-static-side { background-color: var(--blue-800) !important; }
body.body-small .navbar-static-side { background-color: var(--blue-800) !important; }
.navbar-static-side { background-color: var(--blue-800) !important; }
.metismenu li a:hover,
.metismenu li.active > a { background-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border-left-color: #ffffff; }

/* Barra superior */
.navbar-header-info-item strong { color: var(--blue-900); }
/* Boton "English" del Home: azul */
.topbar-lang-btn { background-color: var(--blue-600) !important; color: #ffffff !important; border: 1px solid transparent !important; }
.topbar-lang-btn:hover { background-color: var(--blue-700) !important; }

/* Login: titulo, idioma, botones */
.login-card { border-top: 3px solid var(--blue-600); }
.login-card-title { color: var(--blue-900) !important; }
.availability-card-title { color: var(--blue-900) !important; }
.dropdown-lang-btn { background-color: var(--blue-600) !important; }
.dropdown-lang-btn:hover { background-color: var(--blue-700) !important; }
.login-card .form-control:focus { border-color: var(--blue-600) !important; box-shadow: 0 0 0 3px rgba(11, 95, 165, 0.15) !important; }
.btn-green-submit { background-color: var(--blue-600) !important; box-shadow: 0 4px 6px rgba(11, 95, 165, 0.18); }
.btn-green-submit:hover { background-color: var(--blue-700) !important; }
/* "Crear una cuenta": contorno azul (como la imagen) */
.btn-blue-submit { background-color: transparent !important; color: var(--blue-700) !important; border: 1.5px solid var(--blue-300) !important; box-shadow: none; }
.btn-blue-submit:hover { background-color: var(--blue-050) !important; color: var(--blue-800) !important; }
.forgot-password-link { color: var(--blue-700) !important; }
.forgot-password-link:hover { color: var(--blue-800) !important; }
.login-footer-links a { color: var(--blue-700) !important; }
.login-footer-links a:hover { color: var(--blue-800) !important; }

/* Panel de disponibilidad: caja clara + boton navy */
.availability-card-green-box { background-color: var(--blue-050) !important; border: 1px solid var(--blue-100); box-shadow: var(--shadow-notice); }
.btn-availability-view { background-color: var(--blue-900) !important; box-shadow: 0 4px 6px rgba(6, 52, 91, 0.18); }
.btn-availability-view:hover { background-color: var(--blue-800) !important; }

/* Version en azul (Home footer + login) */
.footer #version, .footer #version b { color: var(--blue-700) !important; }
.login-sicore-version { color: var(--blue-700) !important; }

/* Submenu del sidebar (nav-second-level): navy recesado, armonizado con el sidebar */
.navbar-static-side .nav-second-level {
    background-color: var(--blue-900) !important;
    padding: 4px 0 !important;
    box-shadow: inset 0 6px 8px -8px rgba(0, 0, 0, 0.45) !important;
}
.navbar-static-side .nav-second-level li a {
    color: rgba(255, 255, 255, 0.80) !important;
    padding: 11px 20px 11px 52px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-left: 4px solid transparent !important;
}
.navbar-static-side .nav-second-level li a:hover,
.navbar-static-side .nav-second-level li.active > a {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-left-color: #ffffff !important;
}
/* Sin recuadro de foco del navegador en los items del menu lateral */
.navbar-static-side .metismenu a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Limpiar verdes/teal heredados del INSPINIA base en el sidebar
   (item activo con fondo verde #789f61 + borde teal #19aa8d, y borde verde del nav) */
.navbar-default.navbar-static-side {
    border-color: transparent !important;
    border-right: 0 !important;
}
.navbar-static-side .nav > li.active {
    background: transparent !important;
    border-left-color: transparent !important;
}

/* Titulo "Avisos importantes" completo en azul (texto + megafono) */
.welcome-notices-title { color: var(--blue-900) !important; }
.welcome-notices-title i { color: var(--blue-600) !important; }

/* Encabezados (titulos) de cada aviso en azul */
.welcome-notice-header { color: var(--blue-700) !important; }

/* ===== Menu lateral: matar TODO verde/teal del base en cualquier estado ===== */
.navbar-static-side .nav > li,
.navbar-static-side .nav > li.active,
.navbar-static-side .nav-second-level > li,
.navbar-static-side .nav-second-level > li.active {
    background: transparent !important;
    border-left-color: transparent !important;
}
.navbar-static-side .metismenu a:hover,
.navbar-static-side .metismenu a:focus,
.navbar-static-side .metismenu a:active,
.navbar-static-side .metismenu li.active > a,
.navbar-static-side .nav-second-level li a:hover,
.navbar-static-side .nav-second-level li a:focus,
.navbar-static-side .nav-second-level li a:active,
.navbar-static-side .nav-second-level li.active > a {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-left-color: #ffffff !important;
}

/* ===== Botones btn-success / btn-mike -> azul del tema (login/home) ===== */
.btn-success, .btn-success:focus,
.btn-mike, .btn-mike:focus {
    background-color: var(--blue-600) !important;
    background-image: none !important;
    border-color: var(--blue-600) !important;
    color: #ffffff !important;
}
.btn-success:hover, .btn-success:active,
.btn-mike:hover, .btn-mike:active {
    background-color: var(--blue-700) !important;
    background-image: none !important;
    border-color: var(--blue-700) !important;
    color: #ffffff !important;
}

/* Avisos: evitar que URLs / textos largos se salgan de la tarjeta */
.welcome-notice-card { min-width: 0; overflow: hidden; }
.welcome-notice-header,
.welcome-notice-content,
.welcome-notice-content a {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Enlaces dentro de los avisos: azul clickeable */
.welcome-notice-content a {
    color: var(--blue-700) !important;
    text-decoration: underline;
    font-weight: 600;
}
.welcome-notice-content a:hover {
    color: var(--blue-900) !important;
}