:root {
    /* Definimos la paleta de ProParking */
    --brand-blue: #0091d9;
    --brand-lightblue: #9dbbd8;
    --text-secondary: #6c757d;
    --white: #ffffff;
    --azul: #124e99;
    --azul-celeste:#38b6ff;
    --celeste-vivido:#0f92de;
    --azul-cobalto:#004aad;
    --azul-textos-chicos:#7ba7d4;
    
    --celeste-logo: #7db2e1;
    --celeste-fondo-secciones: #f1f6f9;
    --azul-claro-subtitulos: #38b6ff;
    --celeste-intenso-botones-bordes: #0f92de;
    --turquesa-fondo-algunos-iconos: #5ce1e6;
    --azul-marino-letras-oscuras: #082344;

}
.pac-container {
  z-index: 20000 !important; /* Autocompletes como Google Places */
}
.fondo-container-hero {
    /* 1. Ruta de la Imagen (Ajusta la ruta si es necesario) */
    background-image: url('../images/valpo1.jpg'); 

    /* 2. Propiedades Esenciales para la Visualización */
    background-size: cover;          /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat;    /* Evita la repetición */
    background-position: center center; /* Centra la imagen */

    /* 3. Altura Mínima (CRÍTICO) */
    /* Si el contenedor está vacío, no tendrá altura. Necesitas darle una altura mínima. */
    min-height: 400px; /* Ajusta según el diseño que necesites */
}
header { 
}
.style1 {
  opacity: 1
}
.style3 { 
}

/* Clase para destacar la fila seleccionada */
.fila-seleccionada {
    background-color: #d1e7ff !important; /* Un azul suave */
    transition: background-color 0.3s ease; /* Para que el cambio sea suave */
}

/* Opcional: añade un borde lateral para que resalte más */
.fila-seleccionada td:first-child {
    border-left: 5px solid #0d6efd !important;
}
/* Aplicar a los títulos de ProParking */
h1, .heading-proparking {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px; /* Un ligero ajuste para que se vea más profesional */
    color: var(--azul-celeste) !important;
}

/* El subtítulo también se beneficia de Montserrat en un peso menor */
.subtitulo-proparking {
    font-family: 'Montserrat', sans-serif;
    /* font-weight: 400;  */
    color: var(--azul) !important;
}

/* Fuente para títulos impactantes */
h1, h2, .logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* Fuente para lectura y formularios */
body, p, label, .form-control, .btn {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

/* Para resaltar elementos del formulario o el botón 'Buscar' */
.btn-primary, .fw-medium-opensans {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* Un poco más de peso para el botón */
}

/* Ajuste de fuentes */
h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

body, p, input, button {
    font-family: 'Open Sans', sans-serif;
}
/* Bordes tipo píldora para los grupos de input */
.rounded-pill-start {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}

.rounded-pill-end {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}
/* Esto cambia el color del texto "Fecha y hora de salida" */
.input-proparking::-moz-placeholder {
    color: var(--azul-textos-chicos) !important; 
    opacity: 0.8; /* Opcional: para darle un toque más suave */
}
.input-proparking::placeholder {
    color: var(--azul-textos-chicos) !important; 
    opacity: 0.8; /* Opcional: para darle un toque más suave */
}
.input-proparking {
    color: var(--azul-textos-chicos) !important; 
    opacity: 0.8; /* Opcional: para darle un toque más suave */
}
/* --- Estilos Personalizados para segundo container --- */
  
  /* El título principal superior */
  .features-header {
    font-family: 'Montserrat', sans-serif;
    color: var(--azul-cobalto) !important; 
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 3rem;
  }

  /* El contenedor de cada tarjeta de característica */
  .feature-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef; /* Un borde muy sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 2.5rem 1.5rem; /* Espaciado interno generoso */
    height: 100%; /* Para que todas las tarjetas tengan la misma altura */
    text-align: center;
    /* La sombra suave de la imagen */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out; /* Pequeño efecto al pasar el ratón */
  }
  
  .feature-card:hover {
    transform: translateY(-5px); /* Efecto de elevación sutil */
  }

  /* Los iconos circulares */
  .feature-icon-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem; /* Centrado y con margen inferior */
  }

  /* El título azul claro dentro de cada tarjeta */
  .feature-card-title {
    color: var(--azul-celeste); /* El color azul claro de los subtítulos */
    font-family: 'Open Sans', sans-serif;
    font-size: 1.75rem;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }

  /* La lista de puntos clave */
  .feature-list {
    list-style: none; /* Quitar los puntos por defecto */
    padding: 0;
    margin: 0;
  }

  /* Cada punto de la lista */
  .feature-list-item {
    color: #333333; /* Color del texto del cuerpo */
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    position: relative; /* Para el icono de la hoja */
  }

  /* Estilo especial para la última lista que tiene una hoja */
  .feature-list-leaf .feature-list-item:last-child::before {
    content: "🌱"; /* O un icono de FontAwesome si lo prefieres */
    position: absolute;
    left: -25px; /* Ajustar posición de la hoja */
    top: 0;
  }

  /* Responsividad: Centrar el texto en pantallas pequeñas */
  @media (max-width: 767.98px) {
    .features-header {
      font-size: 1.75rem;
    }
  }
  .bg-custom-parking {
    background-color: var(--celeste-fondo-secciones)!important;
}
/* Contenedor principal de la sección */
  .how-to-section {
    background-color: #f8f9fa; /* Fondo gris muy claro como en la imagen */
    padding: 60px 0;
    font-family: sans-serif;
  }

  /* Título celeste */
  .text-cyan {
    color: #4dc2f0;
    font-weight: 400;
    margin-bottom: 2rem;
  }

  /* Título inferior azul oscuro */
  .text-dark-blue {
    color: #1a4f8b;
    font-weight: 500;
    margin-top: 2rem;
  }

  /* Estilo para los números de los pasos */
  .step-number {
    background-color: #1d94d8;
    color: white;
    width: 45px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Bordes redondeados sutiles */
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0; /* Evita que el número se deforme */
  }

  /* Texto del paso */
  .step-text {
    font-size: 1.25rem;
    color: #333;
    margin-left: 1.5rem;
    line-height: 1.4;
  }

  /* Contenedor de la lista para alinear elementos */
  .step-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  /* Imagen del mapa con bordes redondeados */
  .map-preview {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* Botón personalizado azul oscuro */
  .btn-booking {
    background-color: #1a4f8b;
    color: white;
    padding: 12px 35px;
    border-radius: 6px;
    font-size: 1.2rem;
    border: none;
    transition: background 0.3s;
  }

  .btn-booking:hover {
    background-color: #143d6b;
    color: #fff;
  }
  /* Fondo general de la sección FAQ */
  .faq-section {
    background-color: #f1f6f9; /* El tono azulado muy claro del fondo */
    padding: 80px 0;
    position: relative;
    overflow: hidden;
  }

  .faq-title {
    color: #4dc2f0;
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }

  /* Estilo del Acordeón */
  .accordion-item {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 15px !important; /* Bordes muy redondeados como la imagen */
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
  }

  .accordion-button {
    color: #1a4f8b !important; /* Azul oscuro para las preguntas */
    font-weight: 600;
    padding: 1.2rem 1.5rem;
    background-color: #ffffff !important;
    box-shadow: none !important;
  }

  /* El icono de la flecha (Chevron) personalizado */
  .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234dc2f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-size: 1.5rem;
  }

  .accordion-button:not(.collapsed) {
    border-bottom: 1px solid #f1f6f9;
  }

  /* Imagen del auto a la derecha */
  .car-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .car-image {
    max-width: 120%; /* Para que sobresalga un poco como en el diseño */
    z-index: 2;
  }

  /* Estilos específicos para el Footer */
  .main-footer {
    background-color: var(--azul) !important; /* El azul oscuro exacto de tu imagen */
    color: #ffffff;
    padding: 60px 0 20px;
    font-family: sans-serif;
  }

  /* Títulos de las columnas */
  .footer-heading {
    color: var(--azul-claro-subtitulos) !important; /* El azul claro para los encabezados */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
  }

  /* Estilo de los enlaces */
  .footer-link {
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    transition: color 0.2s;
  }

  .footer-link:hover {
    color: #4dc2f0;
  }

  /* Logo y Redes Sociales */
  .footer-logo {
    max-width: 220px;
    max-width: 320px;
    margin-bottom: 2rem;
  }

  .social-icons a {
    color: #ffffff;
    font-size: 1.8rem;
    margin-right: 1.5rem;
    transition: opacity 0.2s;
  }

  .social-icons a:hover {
    opacity: 0.8;
  }

  /* Copyright inferior */
  .footer-copyright {
    margin-top: 40px;
    font-size: 0.9rem;
    opacity: 0.9;
  }

  /*  PROPIETARIOS */
  .owners-hero {
    background-color: #fcfcfc;
    background-color: #f1f6f9; 
    
    overflow: hidden;
    padding: 0; /* Para que la imagen pegue al borde si es necesario */
  }

  /* Títulos */
  .owners-title {
    color: #4dc2f0;
    font-weight: 700;
    line-height: 1.2;
    font-size: 2.5rem;
    font-size: 1.8rem;
  }

  .owners-subtitle {
    color: #1a4f8b;
    font-size: 1.8rem;
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  /* Items de la lista con bordes azules */
  .benefit-box {
    border: 1.5px solid #1a4f8b;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    max-width: 75%;
  }

  .benefit-text {
    color: #333333;
    font-size: 1.25rem;
    font-size: 1rem;
    margin: 0;
  }

  /* Iconos circulares a la izquierda */
  .benefit-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    flex-shrink: 0;
  }

  /* Botón Publicar */
  .btn-publish {
    background-color: #1d94d8;
    color: white;
    font-size: 1.5rem;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 15px 60px;
    border-radius: 10px;
    border: none;
    margin-top: 20px;
    transition: background 0.3s;
  }

  .btn-publish:hover {
    background-color: #1472a8;
    color: white;
  }

  /* Ajuste de la imagen lateral */
  .hero-side-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    min-height: 500px;
  }

  /* Contenedor de fondo suave para la sección de pasos */
  .how-to-publish {
    /* background-color: #f1f6f9; */
    padding: 80px 0;
    font-family: sans-serif;
  }

  /* Título de la sección */
  .publish-title {
    color: #2c5697;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    font-weight: 400;
  }

  /* Números de pasos estilizados */
  .publish-step-num {
    background-color: #1d94d8;
    color: white;
    width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
  }

  /* Texto al lado del número */
  .publish-step-content {
    font-size: 1.3rem;
    color: #333;
    margin-left: 20px;
    line-height: 1.3;
  }

  /* Fila contenedora de cada paso */
  .publish-step-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.8rem;
  }

  /* Ajuste de la imagen del estacionamiento */
  .parking-img-frame {
    border-radius: 0; /* La imagen parece no tener bordes redondeados en la captura */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  }
  

.fc-bg-event.disponible {
    background: #28a745 !important;
    opacity: 1 !important;
}

.fc-bg-event.bloqueado {
    background: #dc3545 !important;
    opacity: 1 !important;
}
.fc-bg-event.reserva {
    background: #000080 !important;
    opacity: 1 !important;
}
.modal-borde-color .modal-content {
    border: 3px solid #ff5733 !important; 
}

/* Color base para los enlaces del menú que no están activos */
.proparking-item {
    transition: background-color 0.2s ease, color 0.2s ease; /* Transición suave */
    border-radius: 6px; /* Bordes redondeados sutiles al activarse */
}

/* Efecto al pasar el mouse por encima (Hover) */
.proparking-item:hover {
    background-color: #f0f4f8 !important; /* Un gris/azul muy suave de fondo */
    color: #0d6efd !important; /* El azul clásico de tu marca para el texto */
}

/* Asegurar que las descripciones secundarias también cambien de color en hover */
.proparking-item:hover .text-muted {
    color: #0d6efd !important;
    opacity: 0.8;
}

/* Hace que el fondo translúcido que pone Bootstrap sea completamente sólido */
.offcanvas-backdrop.show {
    opacity: 1 !important;
    background-color: #f8f9fa !important; /* Puedes usar #000000 para negro o #f8f9fa para el gris/blanco de ProParking */
}

/* Color en estado normal (Azul Bootstrap) */
.btn-hover-eliminar {
    color: #0d6efd !important; 
    transition: color 0.2s ease-in-out; /* Suaviza el cambio de color */
}

/* Color al pasar el mouse (Rojo Bootstrap) */
.btn-hover-eliminar:hover {
    color: #dc3545 !important;
}

/* Estilo personalizado para el ítem seleccionado del sidebar */
.proparking-sidebar-menu .proparking-item.active {
    background-color: #0f92de !important;
    border-radius: 8px;
}

/* Vista Desktop (Computadoras) */
@media (min-width: 992px) {
    .proparking-sidebar {
        width: 260px !important;
        max-width: 260px !important;
    }
    
    .proparking-main-content {
        margin-left: 260px;
    }
}

/* Vista Móvil (Pantallas menores a 992px) */
@media (max-width: 991.98px) {
    .proparking-sidebar {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        
        /* El ancho será 280px, pero si la pantalla del cel es muy angosta, nunca superará el ancho disponible menos los 20px de margen */
        width: 280px !important;
        max-width: calc(100vw - 20px) !important;
        
        height: calc(100vh - 20px) !important;
        max-height: 80vh !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
        
        /* Evita desbordamiento horizontal interno del contenido */
        overflow-x: hidden !important;
    }

    /* Fondo oscuro ligeramente más transparente */
    .offcanvas-backdrop.show {
        opacity: 0.3 !important;
    }
}

/* Forzar que el backdrop desaparezca si el offcanvas no está abierto */
body:not(.offcanvas-open) .offcanvas-backdrop,
.offcanvas:not(.show) + .offcanvas-backdrop,
.offcanvas-backdrop:not(.show) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}