/* --- Definición de colores Neón --- */
:root {
    --neon-primary: #7df5ff;
    --neon-secondary: #fb9aff;
    --neon-glow-primary: 0 0 5px var(--neon-primary), 
                         0 0 10px var(--neon-primary), 
                         0 0 15px var(--neon-primary);
    --neon-glow-secondary: 0 0 5px var(--neon-secondary), 
                           0 0 10px var(--neon-secondary), 
                           0 0 15px var(--neon-secondary);
    --aside-width: 220px;
}

/* --- Fondo de "Calle" --- */
body {
    /* !! Reemplaza esta URL por una imagen tuya de calle oscura !! */
    background-image: linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.85)), url('https://placehold.co/1920x1080/000000/333333?text=REEMPLAZAR+CON+FOTO+DE+CALLE+OSCURA');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-color: #121212;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Splash Screen (NUEVO) --- */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que esté por encima de todo */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#splash-screen.fade-out {
    opacity: 0;
}

.splash-logo-container {
    position: relative;
    width: 300px; /* Ajusta el tamaño del logo */
    height: auto;
    overflow: hidden; /* Importante para el efecto glitch */
}

.splash-logo {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(1.5); /* Para que el neon resalte más */
}

/* Efecto Glitch para el logo (NUEVO) */
.glitch {
    animation: glitch-animation 2s linear infinite; /* Animación continua */
}

@keyframes glitch-animation {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}
/* Pseudo-elementos para el efecto visual de "glitch" */
.glitch::before,
.glitch::after {
    content: attr(alt); /* Usa el texto alternativo como contenido */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: brightness(1.5);
    background-image: url('../images/logo-lg.png'); /* Carga la imagen de nuevo */
    background-size: cover;
    background-position: center;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-primary);
    animation: glitch-left 1.5s linear infinite alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neon-secondary);
    animation: glitch-right 2s linear infinite alternate-reverse;
}

@keyframes glitch-left {
    0% { transform: translate(0); }
    30% { transform: translate(-5px, 0); }
    60% { transform: translate(0, 5px); }
    100% { transform: translate(-5px, 0); }
}

@keyframes glitch-right {
    0% { transform: translate(0); }
    30% { transform: translate(5px, 0); }
    60% { transform: translate(0, -5px); }
    100% { transform: translate(5px, 0); }
}

/* --- Estructura Menú Lateral y Contenido --- */
.aside-menu {
    --bs-offcanvas-width: var(--aside-width);
    --bs-offcanvas-bg: #000;
    --bs-offcanvas-border-color: var(--neon-primary);
    
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--aside-width);
    border-right: 2px solid var(--neon-primary);
    box-shadow: 0 0 15px var(--neon-primary);
    z-index: 1100;
}

.aside-menu-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    overflow-y: auto;
}

#main-content {
    margin-left: var(--aside-width);
    flex: 1 0 auto; /* Esto hace que el contenido principal crezca para ocupar el espacio disponible */
}

/* Botón Toggle (Hamburguesa) */
#mobile-menu-toggle {
    position: fixed;
    top: 15px; 
    left: 15px;
    z-index: 1200;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

/* Botón Transparente Animado */
.neon-toggle-btn {
    background: transparent !important;
    border: 2px solid var(--neon-primary);
    color: var(--neon-primary) !important;
    font-size: 1.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0;
    animation: border-flicker-primary 2s infinite linear;
}
.neon-toggle-btn:hover,
.neon-toggle-btn:focus {
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: #fff !important;
    box-shadow: var(--neon-glow-primary);
}


/* Estilos del Menú (Links) */
.aside-logo {
    width: 80%;
    height: auto;
}
.aside-menu .nav-link {
    font-size: 1.1rem;
    font-weight: bold;
    color: #aaa;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0;
    border: 1px solid transparent;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
}
.aside-menu .nav-link i {
    margin-right: 15px;
    width: 25px;
    text-align: center;
    font-size: 1.25rem;
}
.aside-menu .nav-link:hover {
    color: var(--neon-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border: 1px solid var(--neon-primary);
    text-shadow: 0 0 8px var(--neon-primary);
}
.aside-menu .nav-link.active {
    color: #000;
    background-color: var(--neon-primary);
    border: 1px solid var(--neon-primary);
    text-shadow: none;
    box-shadow: var(--neon-glow-primary);
}
.aside-menu .nav-link.active i {
    color: #000;
}

.aside-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #333;
    color: #777;
    font-size: 0.8rem;
    text-align: center;
}

/* --- Ajuste Responsivo --- */
@media (max-width: 991.98px) {
    /* Oculta menú fijo, muestra offcanvas */
    .aside-menu {
        transform: translateX(-100%);
    }
    .aside-menu.offcanvas.show {
        transform: translateX(0);
    }
    #main-content {
        margin-left: 0;
    }
   #heroCarousel .carousel-item { /* <--- AÑADIDO */
        height: 60vh;
        min-height: 400px;
    }
    /* Mueve texto de dirección en móvil */
    .address-bar .address-bar-text:first-child {
        padding-left: 70px; 
    }
    .address-bar .address-bar-text {
        font-size: 0.8rem; 
    }
}


/* --- Variables de Bootstrap Dark Mode --- */
[data-bs-theme="dark"] {
    --bs-body-bg: transparent; 
    --bs-body-color: #f0f0f0;
    --bs-border-color: #444;
    --bs-tertiary-bg: #212529;
    --bs-dark-subtle: #1a1a1a; 
    --bs-primary: var(--neon-primary);
    --bs-primary-rgb: 125, 245, 255;
    --bs-secondary: var(--neon-secondary);
    --bs-secondary-rgb: 251, 154, 255;
    --bs-link-color: var(--neon-primary);
    --bs-link-hover-color: #fff;
    --bs-card-bg: rgba(31, 31, 31, 0.8); 
    --bs-card-border-color: #333;
    --bs-card-cap-bg: rgba(42, 42, 42, 0.8);
    --bs-card-border-radius: 0; 
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: #444;
    --bs-form-control-bg: rgba(42, 42, 42, 0.8);
    --bs-form-control-color: #f0f0f0;
    --bs-form-control-border-color: #444;
}

/* --- Animación de Borde para Inputs --- */
@keyframes border-flicker-input {
  0%, 100% { border-color: var(--neon-primary); }
  50% { border-color: #444; }
}

[data-bs-theme="dark"] .form-control {
    transition: box-shadow 0.3s ease;
    animation: border-flicker-input 3s infinite linear;
}
[data-bs-theme="dark"] .form-control:focus {
    animation: none;
    border-color: var(--neon-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.3), 
                0 0 15px rgba(var(--bs-primary-rgb), 0.7);
}

/* Modal Backdrop */
.modal-backdrop {
    background-color: #000;
}
.modal-backdrop.show {
    opacity: 0.7;
}
[data-bs-theme="dark"] {
    --bs-modal-bg: #1a1a1a;
    --bs-modal-bg-rgb: 26, 26, 26; 
    --bs-modal-header-border-color: var(--neon-primary);
    --bs-modal-footer-border-color: #333;
}

/* --- Fondo de Vidrio (Glassmorphism) --- */
.section-bg-glass {
    background-color: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(10px);
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}


/* --- Clases de Texto Neón --- */
.neon-text-primary {
    color: var(--neon-primary);
    text-shadow: var(--neon-glow-primary);
}
.neon-text-secondary {
    color: var(--neon-secondary);
    text-shadow: var(--neon-glow-secondary);
}

/* --- Animaciones de Flicker (Texto) --- */
@keyframes flicker-primary {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: var(--neon-glow-primary);
    color: var(--neon-primary);
  }
  20%, 24%, 55% { text-shadow: none; color: #eee; }
}
@keyframes flicker-secondary {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: var(--neon-glow-secondary);
    color: var(--neon-secondary);
  }
  20%, 24%, 55% { text-shadow: none; color: #eee; }
}
.flicker-text-primary { animation: flicker-primary 1.5s infinite alternate; }
.flicker-text-secondary { animation: flicker-secondary 3s infinite alternate; }

/* --- Animaciones de Borde (Elementos) --- */
@keyframes border-flicker-primary {
  0%, 100% { border-color: var(--neon-primary); box-shadow: 0 0 15px var(--neon-primary); }
  50% { border-color: #888; box-shadow: none; }
}
@keyframes border-flicker-secondary {
  0%, 100% { border-color: var(--neon-secondary); box-shadow: 0 0 15px var(--neon-secondary); }
  50% { border-color: #888; box-shadow: none; }
}
.neon-border-primary-animated {
    border: 2px solid var(--neon-primary);
    animation: border-flicker-primary 2s infinite linear;
}
.neon-border-secondary-animated {
    border: 2px solid var(--neon-secondary);
    animation: border-flicker-secondary 2.5s infinite linear;
}

/* --- Animación de Borde para Cards --- */
@keyframes border-flicker-card {
    0%, 100% { border-color: var(--neon-primary); }
    50% { border-color: #333; }
}
.card-animated {
    border: 1px solid var(--neon-primary);
    animation: border-flicker-card 4s infinite linear;
}


/* --- (NUEVO) Animaciones de Sombra (Botones) --- */
@keyframes shadow-flicker-primary {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.5), 
                var(--neon-glow-primary); 
  }
  50% { 
    box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.5); 
  }
}
@keyframes shadow-flicker-secondary {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(var(--bs-secondary-rgb), 0.5),
                var(--neon-glow-secondary); 
  }
  50% { 
    box-shadow: 0 0 5px rgba(var(--bs-secondary-rgb), 0.5); 
  }
}


/* --- Botones Neón --- */
.btn { border-radius: 0; }
.btn-primary {
    background-color: var(--neon-primary); border-color: var(--neon-primary);
    color: #000; font-weight: bold; text-shadow: none;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    
    /* (CORRECCIÓN 2) Aplicar animación de sombra neon */
    animation: shadow-flicker-primary 2s infinite linear;
}
.btn-primary:hover {
    background-color: #fff; border-color: #fff;
    color: #000; 
    box-shadow: var(--neon-glow-primary);
    animation: none; /* Detener flicker en hover */
}
.btn-outline-primary {
    border-color: var(--neon-primary); color: var(--neon-primary);
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.3);
}
.btn-outline-primary:hover {
    background-color: var(--neon-primary); border-color: var(--neon-primary);
    color: #000; font-weight: bold; 
    box-shadow: var(--neon-glow-primary);
}
.btn-secondary {
    background-color: var(--neon-secondary); border-color: var(--neon-secondary);
    color: #000; font-weight: bold; text-shadow: none;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;

    /* (CORRECCIÓN 2) Aplicar animación de sombra neon */
    animation: shadow-flicker-secondary 2.5s infinite linear;
}
.btn-secondary:hover {
    background-color: #fff; border-color: #fff;
    color: #000; 
    box-shadow: var(--neon-glow-secondary);
    animation: none; /* Detener flicker en hover */
}

/* --- Hero Carousel --- */
.carousel-item {
    height: 100vh; min-height: 600px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero-video {
    position: absolute; top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover; z-index: 0;
}
.carousel-caption {
    bottom: 20%; background: rgba(0, 0, 0, 0.6);
    padding: 2rem; backdrop-filter: blur(5px);
    z-index: 10; color: #fff !important; 
}
.carousel-caption h1, .carousel-caption p { color: #fff !important; }
.address-bar {
    position: absolute; top: 0; left: 0;
    width: 100%; background: rgba(0, 0, 0, 0.6);
    z-index: 10; backdrop-filter: blur(5px);
}
.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    width: 5%; 
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
}

/* --- Card de Vehículo --- */
.vehicle-card {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(10px); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vehicle-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.6); 
}
.vehicle-card .card-img-top { 
    border-radius: 0; 
    height: 250px; 
    object-fit: cover; 
}
.vehicle-card .card-footer {
    background-color: rgba(0,0,0,0.2);
    border-top: 1px solid #333;
}

/* --- Banners Neón --- */
.neon-banner {
    background-color: rgba(10, 10, 10, 0.7);
    padding: 2rem; backdrop-filter: blur(10px);
}
.neon-banner-narrow {
    background-color: rgba(10, 10, 10, 0.7);
    padding: 1.5rem 2rem; backdrop-filter: blur(10px);
}


/* --- Botón WhatsApp --- */
.whatsapp-float {
    position: fixed; width: 60px; height: 60px;
    bottom: 25px; right: 25px;
    background-color: #25D366; color: #FFF;
    border-radius: 50px; text-align: center;
    font-size: 30px; box-shadow: 0 0 15px rgba(37, 211, 102, 0.7);
    z-index: 100; display: flex;
    align-items: center; justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(37, 211, 102, 1);
}

/* --- Fade-in on Scroll --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Carrusel de inventario: Muestra solo un item por slide en móvil */
/* Y usa d-none/d-md-flex/d-lg-flex para ocultar/mostrar los otros */
#vehicleCarousel .carousel-inner .carousel-item .col-lg-4:first-child {
    display: flex !important; /* Asegura que el primero siempre se vea */
}

/* --- Corrección Modal de Bienvenida (Request 1) --- */
#welcomeModal .modal-body-overlay {
    position: relative;
    padding: 0; /* Sin padding para que la imagen ocupe todo */
}

#welcomeModal .modal-body-overlay .lead {
    /* Posiciona el texto "Check out..." encima */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.5rem 1rem;
    margin-bottom: 0;
    background: linear-gradient(to bottom, rgba(var(--bs-modal-bg-rgb), 0.7), rgba(var(--bs-modal-bg-rgb), 0));
    color: var(--bs-body-color);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

#welcomeModal .modal-footer-overlay {
    /* Posiciona el footer encima */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    
    /* Estilos para que sea transparente y centrado */
    background: linear-gradient(to top, rgba(var(--bs-modal-bg-rgb), 0.7), rgba(var(--bs-modal-bg-rgb), 0));
    border-top: none; /* Quita el borde superior original */
    justify-content: center; /* Centra los botones */
    padding-top: 2.5rem; /* Espacio para que el gradiente se vea */
    padding-bottom: 1rem;
}

@media (max-width: 767.98px) {
    #heroCarousel .carousel-caption {
        /* Reduce el espacio inferior para que no quede tan abajo */
        bottom: 10%; 
    }
    
    #heroCarousel .carousel-caption h1 {
        /* Achica el título principal */
        font-size: 2.5rem; 
        /* Apaga el flicker en móvil si es que molesta */
        animation: none; 
    }

    #heroCarousel .carousel-caption p {
        /* Achica el párrafo */
        font-size: 1rem;
        line-height: 1.4;
    }

    #heroCarousel .carousel-caption .btn {
        /* Achica el botón */
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
}

/* --- Neon SweetAlert2 Theme --- */
/* Fondo oscuro y borde neón principal */
.swal2-popup.neon-swal {
    background-color: #121212 !important; /* Fondo muy oscuro */
    border: 2px solid var(--neon-primary) !important;
    box-shadow: var(--neon-glow-primary) !important;
    color: #e0e0e0 !important; /* Texto claro base */
}

/* Título con neón secundario */
.neon-swal .swal2-title {
    color: var(--neon-secondary) !important;
    text-shadow: 0 0 10px var(--neon-secondary), 0 0 20px var(--neon-secondary);
}

/* Contenido del mensaje */
.neon-swal .swal2-html-container {
    color: #ccc !important;
}

/* Botón de confirmación neón */
.neon-swal .swal2-confirm {
    background-color: transparent !important;
    border: 2px solid var(--neon-primary) !important;
    color: var(--neon-primary) !important;
    box-shadow: 0 0 5px var(--neon-primary) inset, 0 0 10px var(--neon-primary);
    transition: all 0.3s ease;
}

    .neon-swal .swal2-confirm:hover {
        background-color: var(--neon-primary) !important;
        color: #000 !important; /* Texto negro al hacer hover para contraste */
        box-shadow: 0 0 20px var(--neon-primary) !important;
    }

/* Iconos personalizados (opcional, para que cuadren mejor) */
.neon-swal .swal2-success-circular-line-left,
.neon-swal .swal2-success-circular-line-right,
.neon-swal .swal2-success-fix {
    background-color: transparent !important;
}

.neon-swal .swal2-success-ring {
    border-color: var(--neon-primary) !important; /* Anillo de éxito neón */
}
/* Estilos para el selector de vehículos en contacto (Carrusel horizontal) */
.vehicle-selector-container {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 15px;
    /* Ocultar barra de scroll nativa para un look más limpio */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .vehicle-selector-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.vehicle-option {
    display: inline-block;
    width: 110px; /* Un poco más ancho para acomodar nombres/millas */
    text-align: center;
    margin-right: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
    vertical-align: top; /* Alineación superior para que queden parejos */
}

    .vehicle-option:hover {
        opacity: 1;
        transform: translateY(-5px); /* Pequeño efecto de elevación al pasar el mouse */
    }

    .vehicle-option img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border: 3px solid #444;
        transition: all 0.3s ease;
    }

    /* Estado Seleccionado */
    .vehicle-option.selected {
        opacity: 1;
    }
        /* Efecto Neón Verde al seleccionar */
        .vehicle-option.selected img {
            border-color: #39ff14;
            box-shadow: 0 0 15px #39ff14, inset 0 0 10px #39ff14;
        }

    /* Textos debajo de la miniatura */
    .vehicle-option .vehicle-name-small {
        font-size: 0.8rem;
        margin-top: 8px;
        margin-bottom: 2px;
        color: white;
        line-height: 1.2;
        font-weight: bold;
        white-space: normal; /* Permitir que el texto baje de línea si es muy largo */
    }

    .vehicle-option .vehicle-miles-small {
        font-size: 0.75rem;
        color: #bbb; /* Gris claro para diferenciar */
        margin: 0;
        line-height: 1.2;
    }

footer {
    flex-shrink: 0; /* Evita que el footer se encoja si falta espacio */
    margin-top: auto; /* Empuja el footer hacia abajo si hay poco contenido */
}