/* Variables de colores basados en tu logo */
    :root {
        --brand-green: #00bfa5;   /* Color esmeralda del logo */
        --brand-dark: #0b1d35;    /* Color oscuro del fondo del logo */
    }

/*#0b1d35, #132d4f, #1a4a7a*/

.offcanvas {
  transition: transform 0.4s ease-in-out; /* Cambia la duración o el efecto */
}


.suggestions-container {
  max-height: 200px;
  overflow-y: auto;
}

.input-container-relative {
  position: relative;
}

/* Estilo para los elementos flotantes (Píldoras) */
.floating-money {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
  animation: floatUp 15s linear infinite;
}

/* Fondo traslúcido inteligente para Dark y Light Mode */
.floating-pill {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  color: var(--bs-body-color);
  backdrop-filter: blur(8px);
}
.w38h38{
    width: 38px; height: 38px;
}

.mh60{
   max-height: 60px; 
}

/* Animación vertical limpia */
@keyframes floatUp {
  0% {
    transform: translateY(110vh);
  }
  100% {
    transform: translateY(-15vh);
  }
}
.mh240{
    min-height: 240px;
}
.opa{
    opacity: 0.6;
}
.fontsiz{
    font-size: 0.55rem;
}

    .cursor-pointer { cursor: pointer; }
    .btn-check:checked + .option-card {
        border-color: var(--bs-primary) !important;
        background-color: rgba(var(--bs-primary-rgb), 0.03);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075) !important;
    }
    .h20{
        height: 20px;
    }
.h18wa{
height: 1.8rem; width: auto;
.zindex9{
    z-index: 10000 !important;
}

.progress .progress-bar.js-progress {
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transition: width 2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#obsercierre.textjust {
    display: block;
    text-align: justify;
}
}
.h320w100zi1{
    height: 320px; width: 100%; z-index: 1;
}
.fs08{
    font-size: 0.8rem;
}
.h45wa{
    height: 4.5rem; width: auto;
}
.w24h24{
    width: 24px; height: 24px;
}
.w45h45{
    "width: 45px; height: 45px;
}
.visible { display: block !important; }
.wfc { width: fit-content; }
.wfcfs075 { width: fit-content; font-size: 0.75rem; }
.mw400 { max-width: 400px; }
.mh70 { min-height: 70vh; }
.mw500 { max-width: 500px; }
.w60h60{
    width: 60px; height: 60px;
}

.w40h40{
    "width: 40px; height: 40px;
}
    .hero-bg-animated {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    .w100h100{
        width: 100%; height: 350px;
    }
.zi1100mt60{
    z-index: 1100; margin-top: 60px;
}
.fs{
    font-size: 0.55rem;
}
.fs75{
    font-size: 0.75rem;
}
.ls1{
    letter-spacing: 1px;
}
.wh16{
    width: 16px; height: 16px;
}
.zi10{
    z-index: 10 !important;
}
.zi9000{
    z-index: 9000 !important;
}
.mwhfz{
    min-width: 1.8rem; height: 1.8rem; font-size: 0.85rem;
}




.login-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /*background-color: #f8fafc;*/
  /*background-image: radial-gradient(#cbd5e1 1px, transparent 1px);*/
  /*background-size: 32px 32px;*/
}

.zi10{
    z-index: 10 !important;
}

 


    .floating-icon {
        position: absolute;
        /* Colores alternados entre tus tonos de marca */
        color: var(--brand-green);
        opacity: 0.15;
        animation: floatAndFade 25s infinite ease-in-out;
    }

    /* Variación para usar el tono oscuro del logo en algunos elementos */
    .icon-dark { color: var(--brand-dark); opacity: 0.05;}
    /*.navbar-autolote {background-color: var(--brand-dark); }*/
    .navbar-autolote {background: linear-gradient(to right, #0b1d35, #132d4f, #1a4a7a); }

    @keyframes floatAndFade {
        0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.15; }
        50% { transform: translate(60px, 100px) rotate(20deg); opacity: 0.25; }
    }

/* Iconos con diferentes posiciones y velocidades distribuidas */
    .icon-1 { 
        animation-duration: 35s; 
        font-size: 7rem; 
        left: 5%; 
        top: 15%; 
    }
    
    .icon-2 { 
        animation-delay: 3s; 
        animation-duration: 45s; 
        font-size: 9rem; 
        left: 85%; 
        top: 40%; 
    }
    
    .icon-3 { 
        animation-delay: 5s; 
        animation-duration: 38s; 
        font-size: 6rem; 
        left: 45%; 
        top: 25%; 
    }
    
    .icon-4 { 
        animation-delay: 2s; 
        animation-duration: 50s; 
        font-size: 8rem; 
        left: 25%; 
        top: 75%; 
    }
    
    .icon-5 { 
        animation-delay: 7s; 
        animation-duration: 42s; 
        font-size: 6.5rem; 
        left: 75%; 
        top: 80%; 
    }

.con-navbar {
  padding-top: 70px;
}

.btn-close-sm {
  transform: scale(.7);
}
.mh80{
    max-height: 650px;
}
.h550{
     height: 550px;
}
.mw-400{
    max-width: 400px;
}

.fs075{
    font-size: 0.75rem;
}
.mw85{
    max-width: 85%;
}
.h650{
    height: 650px;
    z-index: 1;
}
.mw150{
    min-width: 150px;
}
.fs085{
    font-size: 0.85rem;
}
 .zindex1{
    z-index: 1;
 
 }

/* Modo Claro (Colores más claros y luminosos de la misma gama) */
.hero-gradient {
    background: linear-gradient(135deg, #16365f 0%, #204b7c 50%, #2d68a6 100%);
    font-family: 'JetBrains Mono', monospace;
    color: #ffffff;
}

.hero-gradient-lg {
    letter-spacing: 0.05em;
}

/* Estilos específicos cuando el tema es OSCURO */
[data-bs-theme="dark"] .hero-gradient {
    background: linear-gradient(135deg, #050d17 0%, #0a1626 50%, #0e243d 100%);
}

.fz115rem{
    font-size: 1.15rem !important;
}
.h1wa { height: 2rem; width: auto; padding: 0,0,0,0;}
.h5wa { height: 5rem; width: auto; }
.custom-card-action {
  transition: all 0.2s ease-in-out;
  border-radius: 15px;
  /* Usamos las variables de Bootstrap para el fondo y el borde */
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}

.custom-card-action:hover {
  transform: translateY(-5px);
  /* Ajustamos la sombra para que sea visible pero sutil en modo oscuro */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-primary-border-subtle);
}

/* Ajuste opcional para que el texto siempre sea legible */
.custom-card-action .fw-bold {
  color: var(--bs-heading-color);
}

[data-bs-theme="dark"] .custom-card-action:hover {
  border-color: var(--bs-warning); /* Brilla el borde con el color primario en Dark Mode */
}

@keyframes snakeShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}

/* Esta clase ejecutará la sacudida en cualquier contenedor */
.modal-shake {
  animation: snakeShake 0.5s ease-in-out;
}
  .icon-wrapper i {
    transition: transform 0.3s ease;
    display: inline-block;
  }

  .custom-card-action:hover .icon-wrapper i {
    transform: scale(1.15) rotate(5deg);
  }

/* 1. RESET: Mantenemos la opacidad base */
.toast.fade {
    transition: none !important;
    opacity: 1 !important;
}

/* 2. ENTRADA */
.toast.show {
    display: block !important;
    animation: toast-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 3. SALIDA: El truco está en forzar la visibilidad aunque pierda .show */
.toast.hiding {
    display: block !important;
    opacity: 1 !important; 
    /* Aseguramos que el navegador no lo oculte por su cuenta */
    visibility: visible !important;
    animation: toast-out 0.3s ease-in forwards !important;
}

/* --- ANIMACIONES --- */
@keyframes toast-in {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
    from { 
        transform: translateX(0); 
        opacity: 1; 
    }
    to { 
        transform: translateX(120%); 
        opacity: 0; 
        visibility: hidden;
    }
}

/* Bloqueo visual del formulario */
.form-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Spinner dentro del botón */
.spinner-border-sm {
    margin-right: 8px;
    vertical-align: middle;
}

/* Opcional: El cursor de espera en toda la página */
body.waiting {
    cursor: wait !important;
}

/* Altura del mapa */
.dashboard-map-container {
    height: 550px;
    width: 100%;
}

/* Efecto Hover para las tarjetas */
.card-hover-transition {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover-transition:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* Ajuste de colores para modo oscuro/claro automático */
.bg-primary-subtle {
    /* Bootstrap ya maneja esto, pero aseguramos contraste */
    opacity: 0.9;
}

/* Adaptación de Popups de Leaflet a Bootstrap 5 Dark/Light */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow);
}

.custom-popup .leaflet-popup-content {
    margin: 12px; /* Espaciado más limpio */
}

/* Ajuste del botón de cerrar */
.leaflet-container a.leaflet-popup-close-button {
    color: var(--bs-secondary) !important;
    padding: 8px 8px 0 0;
}



/* =================================================================atal
   Iconos Flotantes para el Login (Basado en el estilo Hero)
   =================================================================== */

.login-wrapper {
    position: relative;
    overflow: hidden;
}

.floating-login-icon {
    /* Usamos el verde esmeralda corporativo con una opacidad muy elegante y sutil */
    color: var(--brand-green, #00bfa5);
    opacity: 0.12;
    transition: transform 0.2s ease-out;
}

/* Adaptación automática para el modo oscuro si deseas que brillen un poquito más o cambien de tono */
[data-bs-theme="dark"] .floating-login-icon {
    opacity: 0.18;
}

/* Animación idéntica a la de tu Header Hero */
@keyframes floatAndFade {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    50% { 
        transform: translate(40px, 70px) rotate(15deg); 
    }
}

        .boton-git { background: #24292e; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; }
        .consola { background: #f6f8fa; border: 1px solid #ddd; padding: 10px; margin-top: 10px; }


/* Adaptación de la regla a temas Dark/Light */
.leaflet-ruler {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4) !important;
}

.leaflet-ruler i {
    color: var(--bs-primary) !important; /* El icono de la regla */
}

/* El texto flotante que aparece mientras mides */
.result-tooltip {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
}


#nombre-comuna-display {
    transition: all 0.3s ease;
}