.splashscreen {
  display: none !important;
}
		input[type="checkbox"]{
			position: relative;
			width: 40px;
			height: 20px;
top:8px;
			-webkit-appearance: none;
			background: #c6c6c6;
			outline: none;
			border-radius: 50px;
			box-shadow: inset 0 0 5px rgba(0,0,0,.2);
			transition: .5s;
		}
		input:checked[type="checkbox"]{
			background: #6699ff;
		}
		input[type="checkbox"]:before{
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 20px;
			top: 0;
			left: 0;
			background: #fff;
			transform: scale(1.1);
			box-shadow: 0 2px 5px rgba(0,0,0,.2);
			transition: .5s;
		}
		input:checked[type="checkbox"]:before{
			left: 20px;
		}


.contenedor-opcion {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  padding: 22px;
  width: 300px;
}

.contenedor-opcion h2 {
margin: 0px 10px 20px 0px;
    text-align: center;
}
.contenedor-opcion label {
margin-left: 50px;
}
.contenedor-opcion input[type="password"]{
    margin: 0px 10px 10px 20px;
    height: 20px;
    border: 1px solid;
    border-radius: 5px;
}

.contenedor-opcion button {
  padding: 8px 16px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

 body {
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }

#msg{
position: absolute;
    width: 70%;
    height: 3%;
    top: 60%;
    right: -100%;
    z-index: 113;
    background-color: #dae6f7;
    border-radius: 10px 0 0 10px;
    box-shadow: 5px 10px 17px -5px #000;
    text-align: center;
    padding: 20px 0px 30px 0px;
transition: all 0.5s ease-out 0.5s;
}

#msg2{
    font-weight: bold;
    font-size: 95%;
    font-style: oblique;
    font-family: serif;
    animation: fluido 10s ease-in-out infinite;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #125376, #6c1b71);
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.5s ease-out 0.5s;
}

.cloud-popup {
top:-57px;
  position: relative;
 background: white;
border-radius:8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 160px; /* Ajusta según la necesidad */
  text-align: center;
}
.cloud-content{
position:relative;
border-radius:8px;
z-index:11;
 background: white;
}

.cloud-arrow {
  position: absolute;
  bottom: -10px; /* Ajuste para alinear con el borde inferior del popup */
  left: 54.5%;
  margin-left: -10px; /* Mueve hacia atrás la mitad de su ancho para centrar */
  width: 20px;
  height: 20px;
  background: white;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.1);
z-index:10;
}



#replay-controls{
z-index: 52 !important;
    top: 82%;
    position: absolute;
    width: 97%;
}
.buttons2 {
  /*display: flex;
  gap: 20px;*/
z-index:112;
  height:20%;
  width:100%;
  padding:0 10px;
  text-align: center;
}

/* Estilos de Neumorfismo para Botones */
.neumorphism {
  border: none;
  outline: none;
  background-color: #dae6f7; /* Color de fondo ajustado */
  color: black; /* Color de ícono ajustado a negro */
  border-radius: 50%; /* Bordes completamente redondos */
  cursor: pointer;

box-shadow: 
    3px 3px 8px #b8c6d9, /* Sombra para efecto 3D */
    -3px -3px 8px #ffffff, /* Sombra clara para contraste */
    inset 1px 1px 2px #b8c6d9, /* Sombra interna para efecto bajo relieve */
    inset -1px -1px 2px #ffffff;
  transition: transform 0.2s, box-shadow 0.2s; /* Transición suave */
  margin:10px;
}

.neumorphism:hover {
  box-shadow: 
    2px 2px 8px #b8c6d9, 
    -2px -2px 8px #ffffff, 
    inset 1px 1px 2px #b8c6d9, 
    inset -1px -1px 2px #ffffff;
}

.neumorphism:active {
  box-shadow: 
    inset 6px 6px 10px #b8c6d9, 
    inset -6px -6px 10px #ffffff;
  transform: scale(0.95); /* Efecto de presión */
}

/* Botón de Play (Reproducción) */
.play2 {
    font-size: 18px;
    padding: 18px 0 15px 5px;
    width: 60px;
}

.pause2, .exit2{
  margin-top:20px;
  height:40px;
  padding:14px;
}















        /* List */
        ul {
            counter-reset: index;
            padding: 0;
            width: 90%;
            margin-left: 5%;
        }

        /* List element */
        li {
            counter-increment: index;
            display: flex;
            align-items: center;
            padding: 12px 0;
            font-family: sans-serif;
            box-sizing: border-box;
            font-weight: 800;
            align-self: flex-start;
            background-image: linear-gradient(to bottom, #ef2929, #2015d0);
            background-attachment: fixed;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        /* Element counter */
        #listad li::before {
            content: counters(index, ".", decimal-leading-zero);
            font-size: 1.5rem;
            margin-top: 4px;
            text-align: right;
            font-weight: bold;
            min-width: 50px;
            padding-right: 12px;
            font-variant-numeric: tabular-nums;
            align-self: flex-start;
            background-image: linear-gradient(to bottom, #7f4ef7, #ff0b0b);
            background-attachment: fixed;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        /* Element separation */
        li+li {
            border-top: 1px solid rgba(0, 0, 0, 0.2);
        }


        @use postcss-preset-env {
            stage: 0;

            autoprefixer: {
                grid: true;
            }

            browsers: last 2 versions
        }

        #listad {
            border-radius: 10px;
            border: 1px solid #cccccc;
            overflow: auto;
            position: absolute;
            min-width: 250px;
            width: 70%;
            z-index: 99;
            height: 350px;
            background-color: #ffffff;
            bottom: 110px;
            left: 15%;
            box-shadow: 2px 2px 5px #cccddd, -2px -2px 5px #fff;


        }

        #listad::-webkit-scrollbar {
            -webkit-appearance: none;
        }

        #listad::-webkit-scrollbar:vertical {
            width: 10px;
            height: 10px;
        }

        #listad::-webkit-scrollbar:horizontal {
            height: 10px;
        }

        #listad::-webkit-scrollbar-thumb {
            background-color: #797979aa;
            border-radius: 20px;
            border: 2px solid #f1f2f3;
        }

        #listad::-webkit-scrollbar-track {
            border-radius: 10px;
        }

        #listad::before {
            background-color: #000000aa
        }

        #disppt {
            width: 100%;
            text-align: center;
            padding-top: 6px;
            padding-bottom: 4px;
            color: #9227d1;
            font-weight: bold;
            font-family: sans-serif;
            position: absolute;
            background-color: #e7e9ef;
        }

#opccuenta {
    border-color: #202326;
    background-color: #dae6f7e8;
    border-radius: 10px;
    position: absolute;
    z-index: 99 !important;
    bottom: 12.2%;
    width: 38%;
    right: 2.2%;
}
#opccuenta li{
padding:10px;
padding-left:20px;
}

select#repdispositivos {
    position: relative;
    left: 12%;
    width: 77%;
    text-align: center;
    margin: 0 0 8px 0;
    height: 24px;
    border-radius: 4px;
    color: #2e5ad6;
    text-shadow: 0 1px #dfd9ff;
    font-weight: 600;
}

#fromto input[type="button"] {
    background-color: #8db9e1;
    border: 1px dotted #3b5baa;
    color: #ffffff;
    width: 92px;
    flex-shrink: 0;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
}
#fromto input[type="button"]:hover {

background-color:#002ead;
      
transition: 0.7s;
cursor:pointer
}
#fromto {
    width: 90%;
    position: absolute;
    bottom: 16px;
    left: 4%;
    z-index:12;
    box-sizing: border-box;
}

/* v46.63: fila [campos de fecha | Buscar] con Buscar llenando el alto, checkbox centrado debajo */
.fromto-main {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 95%;
}

#fromto form {
    font-weight: 600;
    flex: 1;
    margin: 0;
    min-width: 0;
}

#fromto form > div {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    white-space: nowrap;
}

#fromto form > div:last-child { margin-bottom: 0; }

input#ffrom, input#fto {
    flex: 1;
    width: auto;
    min-width: 0;
    margin: 0;
}

#repStopsLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0 0;
    font-weight: 600;
    font-size: 0.9em;
    color: #2e5ad6;
    cursor: pointer;
}

/* v46.65: usa el toggle global input[type=checkbox] (40x20, igual al de notificaciones).
   Solo corrijo alineacion (anulo el top:8px global) — NO seteo width/height para no romperlo. */
#repStopsLabel input[type="checkbox"] {
    top: 0;
    margin: 0;
    flex-shrink: 0;
}

/* v46.65: el marker del replay SIEMPRE por encima de los iconos de parada */
.replay-marker-top { z-index: 50 !important; }
.replay-stop-sign { z-index: 5 !important; }

#replay{
    display: none;
    position: absolute;
    z-index: 50;
    height: 75%;
    width: 92%;
    top: 11%;
    left: 3.6%;
    background-color: #dae6f7;
    border-radius: 10px;
    box-shadow: 0 0 800px 90px rgb(0 0 0);
}
.play{
    position:absolute;
    z-index:12;
    height:80%;
    width:94%;
    top:2%;
    left:3%;
    background-color: #dae6f7;
    border-radius: 8px;
}

.pulse{
    width: 10px;
    height: 10px;
    background: #FF6D4A;
    border-radius: 50%;
    color: #FFF;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
    font-family: sans-serif;
    text-transform: uppercase;
    animation: animate-pulse 3s linear infinite;
    cursor: pointer
}
@keyframes animate-pulse{
    0%{
        box-shadow: 0 0 0 0 rgba(255,109,74,0.7),  0 0 0 0 rgba(255,109,74,0.7);
    }
    40%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0.0),  0 0 0 0 rgba(255,109,74,0.7);
    }
    80%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0.0),  0 0 0 30px rgba(255,109,74,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(255,109,74,0.0),  0 0 0 30px rgba(255,109,74,0);
    }
    
}



.optmain{
	width:23%;
	height:80%;
	position:relative;
	font-size:2.4em;
	padding:0 1% 1% 1%;
	text-align: center;
	float:left;
        top:3px;
        font-weight: bolder;
	color: #6b72a0bf !important;
}
.btn-circle {
	margin: 2px !important;
	width: 43px !important;
	height: 43px;
	padding: 8px 0px;
	border-radius: 15px;
	text-align: center;
	font-size: 16px;
	line-height: 1.42857;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.btn-circle:hover {
	-webkit-box-shadow: 0px 0px 4px #3b5baa;
	-moz-box-shadow: 0px 0px 4px #3b5baa;
	box-shadow: 0px 0px 4px #3b5baa;
}
.maplibregl-popup-tip, .maplibregl-popup-close-button {
	display: none !important;
}
.maplibregl-popup-content {
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	max-width: 95vw !important;
}
.mapcenter {
	position: absolute;
	right: 22px;
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	top: calc(50% - 50px);
	border: 2px solid #cccccc99;
	padding: 6px 3px;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
}
.mapcenter:hover {
	background-color: #f6f7fb;
}
.ol-popup {
    position: absolute;
    background-color: white;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 32px;
    left: -50px;
    min-width: 240px;
    box-shadow: 0px 17px 27px -10px #000000;
}
.ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}
.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}
.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}
.ol-popup-closer:after {
	content: "x";
}
.markeron {
	width: 32px;
	height: 42px;
	background-image: url('https://www.migpseg.com/parkinm.png');
	background-size: cover;
	top: -18px;
	left: -2px;
}
.maplibregl-ctrl-top-right {
	top: 20% !important;
}
#map {
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	position: relative;
	top: 10px;
	left: 10px;
	background: #EEF0F4;
	border-radius: 8px;
	box-shadow: 4px 4px 5px #5f6163d9, -4px -4px 5px #ffffffde;
}
#uno {
	width: calc(100% - 4px);
	left: 1px;
	position: absolute;
	height: calc(100% - 3px);
	transition: all 0.3s ease-out 0s;
}
.active-uno {
	height: calc(100% - 83px) !important;
}
#up {
	background: linear-gradient(145deg, #FFFFFF, #B7B9BC);
	border-radius: 100%;
	box-shadow: 6px 4px 6px #a1a2a2, -4px -6px 6px #f7f7f7;
	border: 1px solid #e4e2e2;
	position: absolute;
	width: 100px;
	height: 100px;
	left: calc(50% - 50px);
	bottom: -45px;
	cursor: pointer;
	transition: all 0.3s ease-out 0s;
}
#up:hover {
	box-shadow: 5.11px 5.11px 10px #C9CBCE, -5.11px -5.11px 10px #FFFFFF;
}
#up:active, .active {
	box-shadow: inset 5px 5px 5px #CED0D3, inset -5px -5px 5px #FFFFFF, -3px -3px 5px #ffffff, 3px 3px 5px #000000aa !important;
}
#up:active p, .active p {
	color: #6b72a0 !important;
}
.active-up {
	bottom: 38px !important;
}
#up p {
	position: absolute;
	color: #333333;
	left: 33px;
	top: -10px;
	font-size: 2em;
}
#dos {
	width: calc(100% - 20px);
	box-shadow: 4px 4px 5px #5f6163d9, -4px -4px 5px #ffffffde;
	position: absolute;
	bottom: -100px;
	background: #dae6f7 !important;
	height: 70px;
	border-radius: 8px;
	transition: all 0.3s ease-out 0s;
        left: 10px;
}
.active-dos {
	bottom: 10px !important;
}
body {
	background: #dae6f7 !important;
	overflow: hidden;
  margin: 0px !important;
}
.markerlabel {
	border: 1px solid #3b7b57;
	border-radius: 9px !important;
	font-weight: bold;
	font-size: .8em;
	color: #fff;
	top: -51px;
	left: -1px;
	background-color: #000000cc;
	height: 20px;
	padding: 0 3px;
}
#present {
	width: 100%;
	height: 100%;
	background-color: #dae6f7 !important;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 99;
	transition: all 0.5s ease-out 0.5s;
}
.logo {
	height: 40px !important;
	top: 22px !important;
	-webkit-box-shadow: 0px 12px 10px -10px rgba(50, 50, 50, 1);
	-moz-box-shadow: 0px 12px 10px -10px rgba(50, 50, 50, 1);
	box-shadow: 0px 12px 10px -10px rgba(50, 50, 50, 1);
}
#present img {
	width: 50px;
	height: 45px;
	position: absolute;
	left: calc(50% - 28px);
	top: calc(50% - 45px);
	background-color: #134c3e;
	padding: 10px 5px 10px 10px;
	border-radius: 18px;
	box-shadow: 3px 2px 3px #19191b, -1.5px -2px 3px #66a785;
	transition: all 0.5s ease-out 0.5s;
}
.logo img {
	width: 50px;
	top: -17px !important;
}
.login {
	top: 0px !important;
background-color: #eceff7;
}
.login img {
	transition: all 1s ease-out 0.5s !important;
	top: 70px !important
}
#tres {
	height: 45px;
	position: relative;
	float: left;
	width: calc(50% - 50px) !important;
	text-align: right !important;
	top: calc(50% - 30px);
	text-align: center;
	padding: 3px 20px 0px 0px;
	font-size: 30px;
	font-weight: bold;
	font-family: sans-serif;
	color: #eceff7;
	text-shadow: 1px 2px 2px #00000063, -1px -1px 2px #ffffffc4;
	transition: all 0.5s ease-out 0.5s;
}
.tres-logo {
	top: 0px !important;
}
.tres-login {
	transition: all 1s ease-out 0.5s !important;
	top: 80px !important;
}
#cuatro {
	position: relative;
	padding: 3px 0px 0px 20px;
	top: calc(50% - 30px);
	text-align: left !important;
	float: right !important;
	width: calc(50% - 63px) !important;
	height: 45px;
	font-weight: bold;
	font-size: 30px;
	font-style: oblique;
	font-family: serif;
	animation: fluido 10s ease-in-out infinite;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #125376, #6c1b71);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.5s ease-out 0.5s;
}
.cuatro-logo {
	top: 0px !important;
}
.cuatro-login {
	transition: all 1s ease-out 0.5s !important;
	top: 80px !important;
}
@keyframes fluido {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}
#vercalle {
	box-shadow: 0px 0px 6px 2px rgba(179, 202, 238, 0.92), 0px 29px 18px -22px rgba(42, 77, 148, 1);
	-webkit-box-shadow: 0px 0px 6px 2px rgba(179, 202, 238, 0.92), 0px 29px 18px -22px rgba(42, 77, 148, 1);
	-moz-box-shadow: 0px 0px 6px 2px rgba(179, 202, 238, 0.92), 0px 29px 18px -22px rgba(42, 77, 148, 1);
	border: 1px solid #ccc;
	border-radius: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -175px;
	margin-left: -20%;
	background-color: #ffffff;
	display: none;
	max-width: 600px;
	width: 50%;
	height: 350px;
	padding-bottom: 30px;
	padding-top: 0px;
	overflow: hidden;
	z-index: 999;
}
.shadow1 {
	box-shadow: 2px 34px 26px -28px rgba(2, 50, 69, 0.94);
	-webkit-box-shadow: 2px 34px 26px -28px rgba(2, 50, 69, 0.94);
	-moz-box-shadow: 2px 34px 26px -28px rgba(2, 50, 69, 0.94);
}
.gm-fullscreen-control {
	top: 70px !important;
	right: -10px !important;
	padding: 23.5px !important;
}
.gmnoprint {
	display: none;
}
.gm-iv-address {
	border-radius: 5px !important;
	opacity: .5 !important;
}
@media screen and (max-width: 800px) {
	.gmnoprint {
		display: none !important;
	}
	#vercalle {
		left: 5%;
		margin-left: 0;
		width: 90%;
		/* The width is 100%, when the viewport is 800px or smaller */
	}
}
.card-content {
	padding: 20px;
	width: 260px;
}
.weak-text {
	color: gray;
}
.text-align-center {
	text-align: center;
}
.field {
	padding: 10px 0;
	width: 230px;
}
.text-field {
	width: 100%;
	background: #f8f9fa;
	padding: 8px 16px;
	border-radius: 8px;
	box-shadow: -3px -3px 5px -1px #ffffff inset, 3px 3px 5px -2px #ccc inset;
}
.text-field input {
	width: 100%;
	background: #f8f9fa;
	border: 0;
}
input:-internal-autofill-selected {
	background: #f8f9fa !important;
}
.text-field input:focus {
	outline: none;
}
#login .btn {
	cursor: pointer;
	padding: 16px 32px;
	display: inline-block;
	border-radius: 32px;
	box-shadow: 0px 0px 6px 3px lightgray;
}
#login .btn-primary {
	background: #469276;
	color: white;
	position: absolute;
	margin-top: 20px;
	left: calc(50% - 60px);
}
#login {
	font-family: Lato, sans-serif;
	font-size: 16px;
	position: absolute;
	z-index: 100;
	top: 175px;
	width: 300px;
	left: calc(50% - 150px);
	opacity: 0;
	transition: all 0.5s ease-out 0.3s !important;
}
.fadein {
	opacity: 1 !important;
}
.fadeout {
	opacity: 0 !important;
}



/* === Asistente FAB + Panel === */
#asistente-fab {
    position: fixed;
    right: 14px;
    bottom: 95px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f6bd6, #2e5ad6);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 100;
    transition: bottom 0.3s ease, transform 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#asistente-fab:active { transform: scale(0.95); }
#asistente-fab.shifted-up { bottom: 310px; }
#asistente-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    right: 14px;
    bottom: 95px;
    width: min(380px, calc(100vw - 28px));
    height: min(60vh, 520px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    z-index: 101;
    overflow: hidden;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.3s ease;
}
#asistente-panel.asistente-panel-visible {
    opacity: 1;
    transform: translateY(0);
}
#asistente-header {
    background: linear-gradient(135deg, #4f6bd6, #2e5ad6);
    color: #fff;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
}
#asistente-header-buttons { display: flex; gap: 4px; }
#asistente-header-buttons button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}
#asistente-header-buttons button:hover { background: rgba(255,255,255,0.18); }
#asistente-voice-toggle.asistente-voice-off { opacity: 0.45; }
#asistente-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.asistente-msg {
    padding: 8px 12px;
    border-radius: 12px;
    max-width: 82%;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.35;
    font-size: 0.9rem;
}
.asistente-msg-user {
    background: #2e5ad6;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.asistente-msg-bot {
    background: #fff;
    color: #2a2d32;
    align-self: flex-start;
    border: 1px solid #e1e3ea;
    border-bottom-left-radius: 4px;
}
.asistente-msg-typing {
    background: #e1e3ea;
    color: #6b6e76;
    font-style: italic;
    align-self: flex-start;
}
#asistente-input-row {
    display: flex;
    align-items: center;
    padding: 8px;
    border-top: 1px solid #e1e3ea;
    background: #fff;
    gap: 6px;
}
#asistente-input {
    flex: 1;
    border: 1px solid #d0d2da;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 0.95rem;
    outline: none;
}
#asistente-input:focus { border-color: #2e5ad6; }
#asistente-mic, #asistente-send {
    background: #2e5ad6;
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
#asistente-mic:hover, #asistente-send:hover { background: #4f6bd6; }
.asistente-mic-active {
    background: #d63852 !important;
    animation: asistente-pulse 1s infinite;
}
@keyframes asistente-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* === Asistente FAB + Panel === */
#asistente-fab {
    position: fixed;
    right: 14px;
    bottom: 95px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f6bd6, #2e5ad6);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 100;
    transition: bottom 0.3s ease, transform 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#asistente-fab:active { transform: scale(0.95); }
#asistente-fab.shifted-up { bottom: 310px; }
#asistente-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    right: 14px;
    bottom: 95px;
    width: min(380px, calc(100vw - 28px));
    height: min(60vh, 520px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    z-index: 101;
    overflow: hidden;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.3s ease;
}
#asistente-panel.asistente-panel-visible {
    opacity: 1;
    transform: translateY(0);
}
#asistente-header {
    background: linear-gradient(135deg, #4f6bd6, #2e5ad6);
    color: #fff;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
}
#asistente-header-buttons { display: flex; gap: 4px; }
#asistente-header-buttons button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}
#asistente-header-buttons button:hover { background: rgba(255,255,255,0.18); }
#asistente-voice-toggle.asistente-voice-off { opacity: 0.45; }
#asistente-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.asistente-msg {
    padding: 8px 12px;
    border-radius: 12px;
    max-width: 82%;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.35;
    font-size: 0.9rem;
}
.asistente-msg-user {
    background: #2e5ad6;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.asistente-msg-bot {
    background: #fff;
    color: #2a2d32;
    align-self: flex-start;
    border: 1px solid #e1e3ea;
    border-bottom-left-radius: 4px;
}
.asistente-msg-typing {
    background: #e1e3ea;
    color: #6b6e76;
    font-style: italic;
    align-self: flex-start;
}
#asistente-input-row {
    display: flex;
    align-items: center;
    padding: 8px;
    border-top: 1px solid #e1e3ea;
    background: #fff;
    gap: 6px;
}
#asistente-input {
    flex: 1;
    border: 1px solid #d0d2da;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 0.95rem;
    outline: none;
}
#asistente-input:focus { border-color: #2e5ad6; }
#asistente-mic, #asistente-send {
    background: #2e5ad6;
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
#asistente-mic:hover, #asistente-send:hover { background: #4f6bd6; }
.asistente-mic-active {
    background: #d63852 !important;
    animation: asistente-pulse 1s infinite;
}
@keyframes asistente-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* === Asistente Toast (chat minimizado) === */
#asistente-toast {
    position: fixed;
    bottom: 145px;
    left: 50%;
    width: min(340px, calc(100vw - 36px));
    transform: translateX(-50%) translateY(15px);
    background: #fff;
    color: #2a2d32;
    padding: 12px 16px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    border: 1px solid #e1e3ea;
    z-index: 102;
    font-size: 0.92rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.3s ease;
    cursor: pointer;
    max-height: 28vh;
    overflow-y: auto;
    user-select: none;
    text-align: left;
}
#asistente-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
#asistente-toast.shifted-up { bottom: 360px; }
#asistente-toast:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
#asistente-toast::before {
    content: "💬 ";
    opacity: 0.55;
    font-size: 0.85em;
    margin-right: 3px;
}

/* === Replay popup: ocultar tip nativo, usar flecha custom dentro del popup === */
.maplibregl-popup-tip {
    display: none !important;
}
.maplibregl-popup-content {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.replay-popup {
    pointer-events: auto;
}

/* === Replay popup positioning override === */

.maplibregl-popup-tip {
    display: none !important;
}
.maplibregl-popup-content {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.replay-popup {
    pointer-events: auto;
}

/* === Replay popup positioning override === */
.maplibregl-popup {
    display: flex !important;
    left: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -36px !important;
    will-change: transform !important;
}
.maplibregl-popup-tip {
    display: none !important;
}
.maplibregl-popup-content {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.replay-popup {
    pointer-events: auto;
}

/* NO transform aqui - Mapbox lo usa para posicionar */
}
.guard-dome-overlay {
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 25%,
        rgba(230, 200, 255, 0.65) 0%,
        rgba(190, 120, 235, 0.35) 30%,
        rgba(146, 39, 209, 0.18) 60%,
        rgba(146, 39, 209, 0.08) 85%,
        transparent 100%
    );
    box-shadow:
        inset 0 -5px 10px rgba(80, 0, 130, 0.35),
        inset 0 3px 8px rgba(255, 240, 255, 0.55),
        0 0 8px rgba(146, 39, 209, 0.4);
    transform: scaleY(0.8);
    animation: guard-dome-pulse 2.5s ease-in-out infinite;
    position: relative;
}
.guard-dome-overlay::after {
    content: "";
    position: absolute;
    top: 8%;
    left: 28%;
    width: 30%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
@keyframes guard-dome-pulse {
    0%, 100% { transform: scaleY(0.8) scale(1); opacity: 0.85; }
    50%      { transform: scaleY(0.8) scale(1.08); opacity: 1; }
}

/* === Guard dome overlay (hijo del marker, autoposicionado) === */
.guard-dome-overlay {
    position: absolute;
    width: 96px;
    height: 96px;
    top: 50%;
    left: 50%;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 25%,
        rgba(230, 200, 255, 0.65) 0%,
        rgba(190, 120, 235, 0.35) 30%,
        rgba(146, 39, 209, 0.18) 60%,
        rgba(146, 39, 209, 0.08) 85%,
        transparent 100%
    );
    box-shadow:
        inset 0 -8px 14px rgba(80, 0, 130, 0.4),
        inset 0 5px 12px rgba(255, 240, 255, 0.6),
        0 0 14px rgba(146, 39, 209, 0.45);
    transform: translate(-50%, -50%) scaleY(0.85);
    animation: guard-dome-pulse 2.5s ease-in-out infinite;
    z-index: -1;
}
.guard-dome-overlay::after {
    content: "";
    position: absolute;
    top: 8%;
    left: 28%;
    width: 30%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
@keyframes guard-dome-pulse {
    0%, 100% { transform: translate(-50%, -50%) scaleY(0.85) scale(1); opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scaleY(0.85) scale(1.08); opacity: 1; }
}

/* === Guard lock popup (in-app, debajo del marker) === */
.guard-lock-popup {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    padding: 16px 18px 14px 18px;
    text-align: center;
    min-width: 220px;
    max-width: 260px;
    font-family: system-ui, -apple-system, sans-serif;
    border: 1px solid #e0e0e0;
}
.guard-lock-icon {
    font-size: 2.8em;
    color: #d63852;
    margin-bottom: 10px;
    animation: guard-lock-pulse 1.5s ease-in-out infinite;
    line-height: 1;
}
@keyframes guard-lock-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
.guard-lock-text {
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 1.0em;
    color: #2a2d32;
    line-height: 1.35;
}
.guard-lock-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.guard-lock-yes, .guard-lock-no {
    padding: 9px 28px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95em;
    transition: transform 0.1s, box-shadow 0.1s;
}
.guard-lock-yes:active, .guard-lock-no:active { transform: scale(0.95); }
.guard-lock-yes {
    background: #d63852;
    color: white;
    box-shadow: 0 2px 6px rgba(214, 56, 82, 0.45);
}
.guard-lock-yes:hover { box-shadow: 0 3px 10px rgba(214, 56, 82, 0.6); }
.guard-lock-no {
    background: #e1e3ea;
    color: #2a2d32;
}
.guard-lock-no:hover { background: #d1d3da; }

/* === Guard lock popup FLOATING (centrado abajo del viewport) === */
.guard-lock-floating {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 20px 24px 18px 24px;
    text-align: center;
    min-width: 280px;
    max-width: 340px;
    font-family: system-ui, -apple-system, sans-serif;
    border: 1px solid #e0e0e0;
    animation: guard-lock-slidein 0.35s ease-out;
}
@keyframes guard-lock-slidein {
    from { transform: translateX(-50%) translateY(40px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.guard-lock-floating .guard-lock-icon {
    font-size: 3.2em;
    color: #d63852;
    margin-bottom: 12px;
    animation: guard-lock-pulse 1.5s ease-in-out infinite;
    line-height: 1;
}
.guard-lock-floating .guard-lock-text {
    font-weight: 600;
    margin-bottom: 18px;
    font-size: 1.05em;
    color: #2a2d32;
    line-height: 1.35;
}
.guard-lock-floating .guard-lock-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.guard-lock-floating .guard-lock-yes,
.guard-lock-floating .guard-lock-no {
    padding: 10px 32px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: transform 0.1s;
}
.guard-lock-floating .guard-lock-yes:active,
.guard-lock-floating .guard-lock-no:active { transform: scale(0.95); }
.guard-lock-floating .guard-lock-yes {
    background: #d63852;
    color: white;
    box-shadow: 0 3px 8px rgba(214, 56, 82, 0.5);
}
.guard-lock-floating .guard-lock-no {
    background: #e1e3ea;
    color: #2a2d32;
}

/* === AI CARS MODE === Fase 1 */
#ai-cars-container {
    position: fixed;
    top: 80px;
    right: 15px;
    width: 140px;
    height: 105px;
    z-index: 9000;
    display: none;
    cursor: pointer;
    pointer-events: auto;
}
#ai-cars-container.visible {
    display: block;
    animation: ai-cars-appear 0.4s ease-out;
}
@keyframes ai-cars-appear {
    from { opacity: 0; transform: translateY(-15px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#ai-cars-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
    user-select: none;
    -webkit-user-drag: none;
}
#ai-cars-img.bouncing {
    animation: ai-cars-bounce 0.32s ease-out;
}
@keyframes ai-cars-bounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
#ai-bubble {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 14px;
    background: #fff;
    color: #333;
    padding: 10px 14px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    max-width: 260px;
    min-width: 60px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    pointer-events: none;
    z-index: 9001;
    white-space: normal;
}
#ai-bubble.visible {
    opacity: 1;
    visibility: visible;
}
#ai-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -9px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    filter: drop-shadow(2px 0 2px rgba(0,0,0,0.06));
}
#ai-mic-big {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9227d1, #6a1b9a);
    color: #fff;
    border: none;
    font-size: 36px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(146,39,209,0.5);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    outline: none;
    padding: 0;
}
#ai-mic-big.visible {
    display: flex;
    animation: ai-mic-appear 0.35s ease-out;
}
@keyframes ai-mic-appear {
    from { opacity: 0; transform: translateX(-50%) translateY(15px) scale(0.7); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
#ai-mic-big.recording {
    background: linear-gradient(135deg, #ff3b30, #c62828);
    animation: ai-mic-pulse 1.2s infinite;
}
@keyframes ai-mic-pulse {
    0%   { box-shadow: 0 8px 24px rgba(255,59,48,0.55), 0 0 0 0  rgba(255,59,48,0.5); }
    70%  { box-shadow: 0 8px 24px rgba(255,59,48,0.55), 0 0 0 28px rgba(255,59,48,0); }
    100% { box-shadow: 0 8px 24px rgba(255,59,48,0.55), 0 0 0 0  rgba(255,59,48,0); }
}
#ai-mic-big:active { transform: translateX(-50%) scale(0.95); }

/* === AI CARS v2.1 bubble overrides === */
#ai-bubble {
    position: fixed !important;
    top: 200px !important;
    left: 15px !important;
    right: 15px !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    z-index: 9001 !important;
}
#ai-bubble::after {
    top: -10px !important;
    right: 60px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    border: 0 !important;
    border-bottom: 10px solid #fff !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.06)) !important;
}

/* === AI CARS v2.2: half size + gray circle + bubble left === */

/* Container: half size, up 10px */
#ai-cars-container {
    width: 75px !important;
    height: 75px !important;
    top: 70px !important;
}

/* Gray circle behind car (radial gradient + sombras para efecto 3D) */
#ai-cars-container::before {
    content: '';
    position: absolute;
    width: 55px;
    height: 55px;
    bottom: 0;
    left: 50%;
    margin-left: -27.5px;
    background: radial-gradient(circle at 35% 30%, #e0e0e0 0%, #999 55%, #555 100%);
    border-radius: 50%;
    box-shadow:
        0 6px 14px rgba(0,0,0,0.35),
        inset 0 -10px 14px rgba(0,0,0,0.45),
        inset 0 4px 6px rgba(255,255,255,0.2);
    z-index: 0;
}

/* Car image: 70px wide, sobre el circulo (lo cubre parcialmente -> efecto emergiendo) */
#ai-cars-img {
    width: 70px !important;
    height: auto !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    margin-left: -35px !important;
    z-index: 2 !important;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4)) !important;
}

/* Bubble a la IZQUIERDA del Cars */
#ai-bubble {
    position: fixed !important;
    top: 75px !important;
    right: 100px !important;
    left: auto !important;
    max-width: calc(100vw - 115px) !important;
    min-width: 60px !important;
    transform: none !important;
    margin-right: 0 !important;
    bottom: auto !important;
}

/* Tail del bubble en su derecha apuntando al Cars */
#ai-bubble::after {
    top: 30px !important;
    right: -10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    border: 0 !important;
    border-left: 10px solid #fff !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    filter: drop-shadow(2px 0 2px rgba(0,0,0,0.06)) !important;
}

/* === AI CARS v2.3: circle EN FRENTE del car (cuts trasera), bubble cap === */

#ai-cars-container {
    width: 80px !important;
    height: 75px !important;
    top: 70px !important;
}

/* Car: ATRAS del circulo (z-1). El circulo lo va a tapar abajo. */
#ai-cars-img {
    width: 75px !important;
    height: auto !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    margin-left: -37.5px !important;
    z-index: 1 !important;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3)) !important;
}

/* Circulo: ADELANTE del car (z-2). Cubre la trasera del car. */
#ai-cars-container::before {
    content: '' !important;
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    bottom: 0 !important;
    left: 50% !important;
    margin-left: -25px !important;
    background: radial-gradient(circle at 35% 30%, #e0e0e0 0%, #999 55%, #555 100%) !important;
    border-radius: 50% !important;
    box-shadow:
        0 6px 14px rgba(0,0,0,0.4),
        inset 0 -10px 14px rgba(0,0,0,0.45),
        inset 0 4px 6px rgba(255,255,255,0.25) !important;
    z-index: 2 !important;
}

/* Bubble: max-width capped para no tocar borde izquierdo */
#ai-bubble {
    max-width: calc(100vw - 145px) !important;
    min-width: 60px !important;
}

/* === AI CARS v3 === Neon portal Tron-style */

/* Container mas grande (100x100) para que se vea bien el portal alrededor del car */
#ai-cars-container {
    width: 100px !important;
    height: 100px !important;
    top: 60px !important;
    overflow: visible !important;
}

/* Portal: anillo cyan brillante con glows en capas */
#ai-cars-container::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    /* Radial gradient tipo tunel: centro transparente, anillo brillante */
    background:
        radial-gradient(circle at 50% 50%,
            transparent 0%,
            transparent 58%,
            rgba(60, 220, 255, 0.55) 70%,
            rgba(160, 245, 255, 0.95) 80%,
            rgba(255, 255, 255, 1) 86%,
            rgba(100, 230, 255, 0.65) 92%,
            transparent 100%) !important;
    /* Glows: cyan + magenta exteriores + inner glow */
    box-shadow:
        0 0 12px 2px rgba(0, 240, 255, 0.85),
        0 0 28px 6px rgba(0, 210, 255, 0.55),
        0 0 50px 14px rgba(60, 200, 255, 0.35),
        0 0 40px 12px rgba(220, 80, 220, 0.3),
        inset 0 0 26px rgba(120, 240, 255, 0.55),
        inset 0 0 12px rgba(255, 120, 220, 0.25) !important;
    z-index: 1 !important;
    animation: ai-portal-pulse 2.4s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes ai-portal-pulse {
    0%, 100% {
        opacity: 0.92;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* Sparkles: puntos blancos/cyan/pink esparcidos via multi box-shadow */
#ai-cars-container::after {
    content: '' !important;
    position: absolute !important;
    width: 2px !important;
    height: 2px !important;
    top: 8px !important;
    left: 18px !important;
    border-radius: 50% !important;
    background: white !important;
    box-shadow:
        10px 12px 2px 0 rgba(255, 255, 255, 0.95),
        65px 5px 1px 0 rgba(0, 240, 255, 0.9),
        82px 35px 2px 0 rgba(255, 130, 220, 0.85),
        -5px 40px 1px 0 rgba(0, 230, 255, 0.8),
        92px 65px 2px 0 rgba(255, 255, 255, 0.9),
        5px 75px 1px 0 rgba(255, 110, 220, 0.85),
        70px 90px 2px 0 rgba(0, 230, 255, 0.8),
        88px 18px 1px 0 rgba(255, 255, 255, 0.7),
        -8px 60px 2px 0 rgba(255, 130, 220, 0.7),
        50px -5px 1px 0 rgba(0, 240, 255, 0.85) !important;
    z-index: 3 !important;
    pointer-events: none !important;
    animation: ai-portal-twinkle 1.6s ease-in-out infinite alternate !important;
}

@keyframes ai-portal-twinkle {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}

/* Car: dentro del portal, z-index 2 (sobre el anillo brillante).
   Drop-shadow cyan/pink para integrarlo con el portal. */
#ai-cars-img {
    width: 75px !important;
    height: auto !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 22px !important;
    left: 50% !important;
    margin-left: -37.5px !important;
    z-index: 2 !important;
    filter:
        drop-shadow(0 4px 8px rgba(0, 200, 255, 0.5))
        drop-shadow(0 0 6px rgba(255, 100, 220, 0.35))
        drop-shadow(0 0 14px rgba(100, 230, 255, 0.3)) !important;
}

/* Bubble: ajustada al nuevo size (container 100, right 15) -> right:130 */
#ai-bubble {
    right: 130px !important;
    max-width: calc(100vw - 160px) !important;
    top: 80px !important;
}

#ai-bubble::after {
    top: 35px !important;
}

/* === AI CARS v3.1 === portal con closest-side gradient, car emergiendo */

#ai-cars-container {
    width: 100px !important;
    height: 100px !important;
    top: 60px !important;
    overflow: visible !important;
}

/* Portal: closest-side -> el gradient termina justo en el borde del element.
   Asi el anillo brillante (peak ~88%) queda en radio ~44 del centro,
   bien visible dentro del container 100x100. */
#ai-cars-container::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle closest-side at 50% 50%,
            rgba(0, 30, 70, 0)     0%,
            rgba(0, 80, 150, 0.15) 35%,
            rgba(0, 180, 240, 0.4) 55%,
            rgba(80, 230, 255, 0.8) 72%,
            rgba(200, 255, 255, 1)  86%,
            rgba(100, 230, 255, 0.6) 95%,
            transparent 100%) !important;
    box-shadow:
        0 0 14px 3px rgba(0, 240, 255, 0.85),
        0 0 30px 8px rgba(0, 200, 255, 0.55),
        0 0 50px 14px rgba(60, 180, 255, 0.35),
        0 0 45px 16px rgba(220, 80, 220, 0.3),
        inset 0 0 28px rgba(120, 240, 255, 0.6),
        inset 0 0 14px rgba(255, 120, 220, 0.25) !important;
    z-index: 1 !important;
    animation: ai-portal-pulse 2.4s ease-in-out infinite !important;
    pointer-events: none !important;
}

/* Sparkles re-posicionadas para container 100x100 */
#ai-cars-container::after {
    content: '' !important;
    position: absolute !important;
    width: 2px !important;
    height: 2px !important;
    top: 12px !important;
    left: 22px !important;
    border-radius: 50% !important;
    background: white !important;
    box-shadow:
        8px 6px 2px 0 rgba(255, 255, 255, 0.95),
        58px 4px 1px 0 rgba(0, 240, 255, 0.9),
        78px 28px 2px 0 rgba(255, 130, 220, 0.85),
        -8px 38px 1px 0 rgba(0, 230, 255, 0.8),
        82px 58px 2px 0 rgba(255, 255, 255, 0.9),
        4px 76px 1px 0 rgba(255, 110, 220, 0.85),
        62px 82px 2px 0 rgba(0, 230, 255, 0.8),
        76px 14px 1px 0 rgba(255, 255, 255, 0.7),
        -6px 58px 2px 0 rgba(255, 130, 220, 0.7),
        45px -2px 1px 0 rgba(0, 240, 255, 0.85) !important;
    z-index: 3 !important;
    pointer-events: none !important;
    animation: ai-portal-twinkle 1.6s ease-in-out infinite alternate !important;
}

/* Car: 80px wide, centrado en el portal (no a un lado).
   Top:20 lo coloca con su mitad inferior cruzando el anillo brillante. */
#ai-cars-img {
    width: 80px !important;
    height: auto !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    margin-left: -40px !important;
    z-index: 2 !important;
    filter:
        drop-shadow(0 4px 8px rgba(0, 200, 255, 0.5))
        drop-shadow(0 0 6px rgba(255, 100, 220, 0.35))
        drop-shadow(0 0 14px rgba(100, 230, 255, 0.3)) !important;
}

/* Bubble alineada al nuevo container size */
#ai-bubble {
    right: 130px !important;
    max-width: calc(100vw - 160px) !important;
    top: 80px !important;
}
#ai-bubble::after {
    top: 35px !important;
}

/* === USER override DevTools desde linea 1667 === */
#ai-cars-container::before {
    width: 70px !important;
    height: 70px !important;
    margin-left: 4px !important;
    margin-top: 16px !important;
    z-index: 2 !important;
    /* Reset inset/positioning para que margins controlen la posicion */
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    right: auto !important;
}

/* === fix: mic atras del chat + chat con z alto + bubble menos ancho === */
#ai-mic-big {
    z-index: 50 !important;
}
#asistente-panel {
    z-index: 5000 !important;
}
#ai-bubble {
    max-width: calc(100vw - 210px) !important;
}

/* === AI Cars: glow en vez de jump + dots bubble === */
@keyframes ai-cars-bounce {
    0%, 100% {
        filter:
            drop-shadow(0 4px 8px rgba(0, 200, 255, 0.5))
            drop-shadow(0 0 6px rgba(255, 100, 220, 0.35))
            drop-shadow(0 0 14px rgba(100, 230, 255, 0.3));
    }
    50% {
        filter:
            drop-shadow(0 0 18px rgba(0, 250, 255, 1))
            drop-shadow(0 0 36px rgba(0, 220, 255, 0.9))
            drop-shadow(0 0 50px rgba(255, 100, 220, 0.7))
            brightness(1.35);
    }
}
#ai-cars-dots {
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 18px;
    background: white;
    border-radius: 9px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 3px;
    z-index: 5;
    pointer-events: none;
}
#ai-cars-dots.visible {
    display: flex;
}
#ai-cars-dots::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -4px;
    width: 0;
    height: 0;
    border-top: 5px solid white;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.ai-cars-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #333;
    opacity: 0.18;
    transition: opacity 0.12s ease;
}
.ai-cars-dot.active {
    opacity: 1;
}

/* === Hide toast - bubble del Cars la reemplaza === */
#msg { display: none !important; }

/* === Force hidden (bypassa watchdog AI Cars) === */
#ai-cars-container.force-hidden,
#ai-mic-big.force-hidden,
#ai-bubble.force-hidden {
    display: none !important;
}

/* === TEST INTENT panel (DELETABLE) === */
.test-intent-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99996;
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    padding: 4px;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.1);
}
.test-intent-container button {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: white;
    border: none;
    border-radius: 18px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
#test-intent-mic.recording {
    background: linear-gradient(135deg, #dc3545, #b21f2d);
    animation: tmp-pulse 1.2s ease-in-out infinite;
}
#test-intent-close {
    background: transparent !important;
    color: #888 !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
}
@keyframes tmp-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(220,53,69,0.4); }
    50%       { box-shadow: 0 4px 24px rgba(220,53,69,0.9); }
}
.test-intent-container input {
    border: none;
    outline: none;
    padding: 6px 10px;
    font-size: 13px;
    width: 180px;
    background: #f5f5f5;
    border-radius: 14px;
}
#test-intent-panel {
    position: fixed;
    bottom: 65px;
    left: 20px;
    width: 300px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(255,255,255,0.98);
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    z-index: 99996;
    padding: 8px;
    font-family: -apple-system, sans-serif;
    font-size: 12px;
    color: #333;
}
.tmp-header { font-weight: 700; padding: 4px 6px 6px; border-bottom: 1px solid #eee; margin-bottom: 6px; color: #1e7e34; font-size: 11px; text-transform: uppercase; }
.tmp-status { padding: 12px; text-align: center; font-weight: 600; color: #555; }
.tmp-status.error { color: #dc3545; background: #fff5f5; border-radius: 6px; }
.tmp-item { padding: 6px 8px; margin-bottom: 5px; border-radius: 5px; border-left: 3px solid; font-size: 11px; }
.tmp-item.ok { background: #f0fff4; border-color: #28a745; }
.tmp-item.fail { background: #fff5f5; border-color: #dc3545; }
.tmp-meta { font-size: 10px; color: #888; margin-bottom: 2px; }
.tmp-text { font-style: italic; color: #444; line-height: 1.3; }
.tmp-result { font-weight: 700; font-size: 10px; margin-top: 2px; }
.tmp-item.ok .tmp-result { color: #28a745; }
.tmp-item.fail .tmp-result { color: #dc3545; }


/* === MANUAL GUARD v46.1 === Boton "Cuidar" matched a btn-circle nativo */

/* Inactivo: hereda style nativo de .btn-circle igual que los otros 4 botones del popup.
   Solo el icono toma color morado para identificar la funcion guard. */
#popup .btn-circle .fa-shield-alt {
    color: #9227d1;
    transition: color 0.2s, transform 0.2s;
}
#popup .btn-circle:hover .fa-shield-alt {
    color: #6a1b9a;
    transform: scale(1.1);
}

/* Activo (cuidando): morado solido gradient, mismo tono que el dome */
.btn-circle.guard-active {
    background: linear-gradient(135deg, #9227d1, #6a1b9a) !important;
    border: 1px solid #6a1b9a !important;
    box-shadow: 0 0 10px rgba(146, 39, 209, 0.65),
                inset 0 0 4px rgba(255,255,255,0.3) !important;
}
.btn-circle.guard-active .fa-shield-alt {
    color: #fff !important;
    text-shadow: 0 0 6px rgba(255,255,255,0.55);
}
.btn-circle.guard-active:hover {
    box-shadow: 0 0 14px rgba(146, 39, 209, 0.9) !important;
}
.btn-circle.guard-active:hover .fa-shield-alt {
    color: #fff !important;
    transform: scale(1.08);
}

/* X clickeable sobre el dome — estilo morado consistente con el boton active */
.guard-dome-x {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #9227d1, #6a1b9a);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4),
                0 0 0 1px rgba(146, 39, 209, 0.5);
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: system-ui, -apple-system, sans-serif;
}
.guard-dome-x:hover {
    transform: scale(1.18);
    box-shadow: 0 4px 12px rgba(0,0,0,0.55),
                0 0 0 2px rgba(146, 39, 209, 0.8);
}
.guard-dome-x:active {
    transform: scale(0.92);
}


/* === GUARD FIRST ALERT v46.13 === Popup in-app cuando llega push de alerta y app visible */
.guard-first-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background: #fff;
    border: 3px solid #d63852;
    border-radius: 18px;
    padding: 26px 24px 22px 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5),
                0 0 0 9999px rgba(0,0,0,0.55);
    min-width: 300px;
    max-width: 380px;
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
    animation: guard-alert-shake 0.4s ease-in-out infinite alternate;
}
.guard-first-alert .gfa-icon {
    font-size: 3.4em;
    margin-bottom: 10px;
    line-height: 1;
    animation: guard-alert-bounce 0.8s infinite;
}
.guard-first-alert .gfa-title {
    font-size: 1.3em;
    font-weight: 800;
    color: #d63852;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.guard-first-alert .gfa-body {
    font-size: 1.0em;
    color: #2a2d32;
    margin-bottom: 18px;
    line-height: 1.4;
}
.guard-first-alert .gfa-body strong { color: #9227d1; }
.guard-first-alert .gfa-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.guard-first-alert .gfa-btn {
    padding: 12px 22px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: transform 0.1s;
}
.guard-first-alert .gfa-btn:active { transform: scale(0.95); }
.guard-first-alert .gfa-yes {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: #fff;
    box-shadow: 0 3px 8px rgba(40,167,69,0.5);
}
.guard-first-alert .gfa-no {
    background: linear-gradient(135deg, #d63852, #a02038);
    color: #fff;
    box-shadow: 0 3px 10px rgba(214,56,82,0.7);
    animation: guard-alert-pulse-btn 1.2s infinite;
}
@keyframes guard-alert-shake {
    0%   { transform: translate(-50%, -50%) rotate(-0.8deg); }
    100% { transform: translate(-50%, -50%) rotate(0.8deg); }
}
@keyframes guard-alert-bounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
@keyframes guard-alert-pulse-btn {
    0%, 100% { box-shadow: 0 3px 10px rgba(214,56,82,0.7); }
    50%      { box-shadow: 0 3px 22px rgba(214,56,82,1); }
}

/* === popup de vehiculo (class-based, tematizable) === */
.ol-popup.veh-pop{ background:#e7eef9; border:none !important; border-radius:16px; box-shadow:7px 7px 18px #b6c2d6,-7px -7px 18px #ffffff; padding:12px 14px 14px; width:250px; min-width:0; }
.ol-popup.veh-pop:after{ border-top-color:#e7eef9 !important; }
.ol-popup.veh-pop:before{ display:none !important; }
.veh-pop-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.veh-pop-name{ display:flex; align-items:center; gap:7px; font-weight:700; color:#1e3a8a; font-size:15px; }
.veh-pop-name i{ color:#2e5ad6; }
.veh-pop-x{ position:static !important; color:#8aa0c8; font-size:17px; cursor:pointer; line-height:1; padding:2px 5px; }
.veh-pop-reg{ text-align:center; border-radius:12px; background:#dae6f7; box-shadow:inset 3px 3px 6px #b6c2d6,inset -3px -3px 6px #ffffff; padding:7px 0; margin-bottom:10px; }
.veh-pop-reg-lbl{ display:block; font-size:11px; color:#64748b; font-weight:600; }
.veh-pop-reg-val{ display:block; font-size:13px; color:#2e5ad6; font-weight:700; }
.veh-pop-row{ display:flex; gap:8px; margin-bottom:10px; }
.veh-pop-cell{ flex:1; text-align:center; border-radius:12px; background:#dae6f7; box-shadow:inset 3px 3px 6px #b6c2d6,inset -3px -3px 6px #ffffff; padding:9px 2px; }
.veh-pop-cell .veh-ico{ font-size:21px; color:#2e5ad6; }
.veh-pop-cell .veh-on{ color:#16a34a; }
.veh-pop-cell .veh-off{ color:#94a3b8; }
.veh-pop-cv{ display:block; margin-top:5px; font-size:12px; font-weight:700; color:#1e3a8a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.veh-pop-cv.veh-pop-phone{ font-size:11px; }
.veh-pop-cv small{ font-size:9px; color:#64748b; font-weight:600; }
.veh-pop-addr{ display:flex; gap:6px; align-items:flex-start; font-size:12px; margin-bottom:12px; line-height:1.32; }
.veh-pop-addr i{ color:#2e5ad6; margin-top:2px; flex-shrink:0; }
.veh-pop-addr span{ color:#1e3a8a; }
.veh-pop-actions{ display:flex; justify-content:space-between; gap:6px; }
.veh-pop .veh-act{ width:42px; height:42px; border-radius:50%; border:none; background:#dae6f7; color:#1e3a8a; box-shadow:4px 4px 9px #b6c2d6,-4px -4px 9px #ffffff; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; padding:0; transition:transform .14s cubic-bezier(0.23,1,0.32,1), box-shadow .14s ease; }
.veh-pop .veh-act:active{ transform:scale(.92); box-shadow:inset 3px 3px 6px #b6c2d6,inset -3px -3px 6px #ffffff; }
.veh-pop .veh-act.guard-active{ background:linear-gradient(145deg,#9227d1,#6a1b9a); color:#fff; box-shadow:3px 3px 9px rgba(106,27,154,.4); }

/* === DARK MODE GLOBAL UI (v19 Cabina Slate base #263952; popup +5% transp; mapa desaturado) -- togglea con body.theme-oscuro === */
body.theme-oscuro{
  --d-bg:#263952; --d-surf:#3a4b62; --d-surf2:#4d5d71;
  --d-shd:#15202e; --d-shl:#566578;
  --d-text:#dde7f5; --d-muted:#8f9db6; --d-accent:#5b9bf0; --d-border:#47576c;
  --d-glass:rgba(94,108,127,0.43); --d-glass2:rgba(112,124,141,0.40); --d-glass3:rgba(129,140,155,0.38);
  --d-glassedge:1px solid rgba(190,212,245,0.13);
  --d-blur:blur(16px) saturate(1.4); --d-blur-sm:blur(13px) saturate(1.4); --d-blur-lg:blur(18px) saturate(1.5);
  --d-raise:5px 5px 13px var(--d-shd),-4px -4px 10px var(--d-shl);
  --d-raise-sm:3px 3px 8px var(--d-shd),-2px -2px 6px var(--d-shl);
  --d-raise-lg:11px 11px 28px var(--d-shd),-7px -7px 18px var(--d-shl);
  --d-inset:inset 3px 3px 7px var(--d-shd),inset -2px -2px 5px var(--d-shl);
  --d-inset-sm:inset 2px 2px 5px var(--d-shd),inset -2px -2px 4px var(--d-shl);
  --d-press:inset 4px 4px 10px var(--d-shd),inset -3px -3px 7px var(--d-shl);
  --d-glow:0 0 0 1px rgba(91,155,240,0.18),0 7px 20px rgba(91,155,240,0.42),0 3px 9px rgba(8,14,28,0.55);
  --d-glow-sm:0 0 0 1px rgba(91,155,240,0.15),0 5px 14px rgba(91,155,240,0.32),0 2px 6px rgba(8,14,28,0.45);
  --d-amb:radial-gradient(150% 120% at 50% -20%, #566578 0%, #263952 46%, #1b2839 100%);
  background:var(--d-amb) !important; color:var(--d-text);
}
body.theme-oscuro #present{ background:var(--d-amb) !important; }
body.theme-oscuro .login{ background:#1b2839 !important; }
body.theme-oscuro #tres{ color:var(--d-text); text-shadow:0 1px 12px rgba(91,155,240,0.30),1px 2px 2px #15202e; }
body.theme-oscuro #uno{ background:transparent; }
body.theme-oscuro #map{ background:#263952 !important; box-shadow:8px 8px 20px #101822,-6px -6px 16px #677486 !important; }
body.theme-oscuro #dos{ background:rgba(31,52,90,0.95) !important; border:var(--d-glassedge) !important; box-shadow:var(--d-raise) !important; }
body.theme-oscuro .optmain{ color:var(--d-muted) !important; }
body.theme-oscuro #up{ background:var(--d-glass2); border:var(--d-glassedge); -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); box-shadow:var(--d-raise); transition:bottom .3s ease-out,box-shadow .25s cubic-bezier(.23,1,.32,1),color .25s ease; }
body.theme-oscuro #up p{ color:var(--d-text) !important; }
body.theme-oscuro #up:hover{ box-shadow:var(--d-raise-sm); }
body.theme-oscuro #up:active, body.theme-oscuro #up.active, body.theme-oscuro .active{ box-shadow:var(--d-press) !important; }
body.theme-oscuro #up.active p, body.theme-oscuro .active p, body.theme-oscuro #up:active p{ color:var(--d-accent) !important; text-shadow:0 0 12px rgba(91,155,240,0.55); }
body.theme-oscuro #listad{ background:var(--d-glass) !important; -webkit-backdrop-filter:var(--d-blur); backdrop-filter:var(--d-blur); border:var(--d-glassedge); box-shadow:var(--d-raise); }
body.theme-oscuro #disppt{ background:transparent !important; color:var(--d-accent); }
body.theme-oscuro #listad li+li{ border-top-color:rgba(221,231,245,0.08); }
body.theme-oscuro #listad::-webkit-scrollbar-thumb{ background-color:#4d5d71; border-color:transparent; }
body.theme-oscuro #opccuenta{ background:var(--d-glass) !important; -webkit-backdrop-filter:var(--d-blur); backdrop-filter:var(--d-blur); border:var(--d-glassedge); box-shadow:var(--d-raise); }
body.theme-oscuro #msg{ background:var(--d-glass3) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); }
body.theme-oscuro #replay, body.theme-oscuro .play{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); }
body.theme-oscuro select#repdispositivos{ background:var(--d-bg); color:var(--d-text); text-shadow:none; border:none; box-shadow:var(--d-inset); }
body.theme-oscuro #repStopsLabel{ color:var(--d-muted); }
body.theme-oscuro #fromto input[type="button"]{ background:linear-gradient(145deg,#6fb0ff,#4f86e6); border:none; color:#fff; box-shadow:var(--d-glow-sm); }
body.theme-oscuro .contenedor-opcion{ background:var(--d-glass) !important; -webkit-backdrop-filter:var(--d-blur-lg); backdrop-filter:var(--d-blur-lg); border:var(--d-glassedge); color:var(--d-text); box-shadow:var(--d-raise-lg); }
body.theme-oscuro .contenedor-opcion h2{ color:var(--d-text); }
body.theme-oscuro .contenedor-opcion p{ color:var(--d-muted) !important; }
body.theme-oscuro #push-toggle-hint{ color:var(--d-muted) !important; }
body.theme-oscuro .neumorphism{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); color:var(--d-text); box-shadow:var(--d-raise-sm); }
body.theme-oscuro .neumorphism:active{ box-shadow:var(--d-press); }
body.theme-oscuro .mapcenter{ background:var(--d-glass2); border:var(--d-glassedge); -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); color:var(--d-text); box-shadow:var(--d-raise-sm); }
body.theme-oscuro .mapcenter:hover{ background:var(--d-surf2); }
body.theme-oscuro .maptheme{ background:var(--d-glass2) !important; border:var(--d-glassedge) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); box-shadow:var(--d-raise-sm); }
body.theme-oscuro #vercalle{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); }
body.theme-oscuro .text-field, body.theme-oscuro .text-field input{ background:var(--d-bg) !important; color:var(--d-text); box-shadow:var(--d-inset); }
body.theme-oscuro .weak-text{ color:var(--d-muted); }
body.theme-oscuro input:not([type="checkbox"]):not([type="range"]), body.theme-oscuro select, body.theme-oscuro textarea{ background:var(--d-bg); color:var(--d-text); border:none; box-shadow:var(--d-inset); }
body.theme-oscuro input[type="datetime-local"]{ color-scheme:dark; }
body.theme-oscuro input::placeholder{ color:var(--d-muted); }
body.theme-oscuro #asistente-panel{ background:rgba(49,67,91,0.61) !important; -webkit-backdrop-filter:var(--d-blur-lg); backdrop-filter:var(--d-blur-lg); border-top:1px solid rgba(91,155,240,0.18) !important; box-shadow:0 -16px 42px rgba(7,12,26,0.62) !important; }
body.theme-oscuro #asistente-header{ background:transparent !important; color:var(--d-text) !important; }
body.theme-oscuro #asistente-header::before{ background:#4d5d71 !important; }
body.theme-oscuro #asistente-header-buttons button{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); color:var(--d-text) !important; box-shadow:var(--d-raise-sm) !important; }
body.theme-oscuro #asistente-msgs{ background:transparent !important; }
body.theme-oscuro .asistente-msg-bot{ background:var(--d-surf) !important; color:var(--d-text) !important; box-shadow:var(--d-raise-sm) !important; border-radius:20px 20px 20px 7px !important; }
body.theme-oscuro .asistente-msg-user{ background:linear-gradient(145deg,#6fb0ff,#4f86e6) !important; color:#fff !important; box-shadow:var(--d-glow-sm) !important; border-radius:20px 20px 7px 20px !important; }
body.theme-oscuro .asistente-msg-typing{ background:var(--d-surf) !important; color:var(--d-muted) !important; box-shadow:var(--d-raise-sm) !important; }
body.theme-oscuro #asistente-input-row{ background:transparent !important; border-top:none !important; box-shadow:none !important; }
body.theme-oscuro #asistente-input{ background:#1f2f43 !important; color:var(--d-text) !important; box-shadow:var(--d-inset) !important; }
body.theme-oscuro #asistente-input-row #asistente-mic{ background:linear-gradient(145deg,#6fb0ff,#4f86e6) !important; color:#fff !important; box-shadow:var(--d-glow) !important; }
body.theme-oscuro #asistente-toast{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); color:var(--d-text); box-shadow:var(--d-raise-sm); }
body.theme-oscuro #asst-open-chat{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); box-shadow:var(--d-raise-sm) !important; }
body.theme-oscuro #asst-open-chat svg{ fill:var(--d-text) !important; }
body.theme-oscuro #asst-mic-btn{ box-shadow:var(--d-glow) !important; }
body.theme-oscuro #asst-bubble{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); color:var(--d-text) !important; box-shadow:var(--d-raise-sm) !important; }
body.theme-oscuro #asst-bubble .tag{ color:var(--d-muted) !important; }
body.theme-oscuro .guard-lock-popup, body.theme-oscuro .guard-lock-floating{ background:var(--d-glass) !important; -webkit-backdrop-filter:var(--d-blur); backdrop-filter:var(--d-blur); border:var(--d-glassedge); color:var(--d-text); box-shadow:var(--d-raise-lg); }
body.theme-oscuro .guard-lock-text{ color:var(--d-text); }
body.theme-oscuro .guard-lock-no{ background:var(--d-surf2); color:var(--d-text); box-shadow:var(--d-raise-sm); }
body.theme-oscuro #ai-bubble{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge); color:var(--d-text) !important; }
body.theme-oscuro .maplibregl-ctrl-group{ background:var(--d-glass2) !important; -webkit-backdrop-filter:var(--d-blur-sm); backdrop-filter:var(--d-blur-sm); border:var(--d-glassedge) !important; box-shadow:var(--d-raise-sm) !important; }
body.theme-oscuro .maplibregl-ctrl-group button{ background:transparent !important; }
body.theme-oscuro .maplibregl-ctrl-group button+button{ border-top-color:var(--d-border) !important; }
body.theme-oscuro .maplibregl-ctrl-icon{ filter:invert(0.88) brightness(1.05); }
body.theme-oscuro .maplibregl-ctrl-attrib{ background:rgba(94,108,127,0.42) !important; -webkit-backdrop-filter:blur(8px) saturate(1.3); backdrop-filter:blur(8px) saturate(1.3); }
body.theme-oscuro .maplibregl-ctrl-attrib, body.theme-oscuro .maplibregl-ctrl-attrib a{ color:var(--d-muted) !important; }
body.theme-oscuro .maplibregl-ctrl-attrib-button{ background-color:rgba(150,170,210,0.55) !important; }
/* popup vehiculo en dark (vidrio, 5% mas transparente) */
body.theme-oscuro .ol-popup.veh-pop{ background-image:linear-gradient(115deg,transparent 35%,rgba(195,220,255,0.26) 50%,transparent 65%),linear-gradient(180deg,rgba(150,190,255,0.14),rgba(150,190,255,0) 45%); background-color:rgb(58 69 86 / 38%); background-repeat:no-repeat; background-size:250% 100%,100% 100%; background-position:-60% 0,0 0; -webkit-backdrop-filter:var(--d-blur-lg); backdrop-filter:var(--d-blur-lg); border:var(--d-glassedge); border-radius:16px; box-shadow:11px 11px 28px #0e1318,-2px -2px 0px #2b5181,inset 0 1px 0 rgba(205,225,255,0.25),inset 0 0 40px rgba(91,155,240,0.09); color:var(--d-text); animation:vehGlint 1.1s cubic-bezier(0.23,1,0.32,1) 1; }
@keyframes vehGlint{from{background-position:-60% 0,0 0}to{background-position:160% 0,0 0}}
body.theme-oscuro .ol-popup.veh-pop:after{ border-top-color:rgba(112,124,141,0.66) !important; }
body.theme-oscuro .ol-popup.veh-pop:before{ border-top-color:rgba(190,212,245,0.13) !important; }
body.theme-oscuro .veh-pop-name{ color:var(--d-text); }
body.theme-oscuro .veh-pop-name i{ color:var(--d-accent); }
body.theme-oscuro .veh-pop-x{ color:var(--d-muted); }
body.theme-oscuro .veh-pop-reg, body.theme-oscuro .veh-pop-cell{ background:rgba(27,40,57,0.42); border-radius:10px; box-shadow:var(--d-inset-sm); }
body.theme-oscuro .veh-pop-reg-lbl{ color:var(--d-muted); }
body.theme-oscuro .veh-pop-reg-val{ color:var(--d-accent); }
body.theme-oscuro .veh-pop-cell .veh-ico{ color:var(--d-accent); }
body.theme-oscuro .veh-pop-cell .veh-on{ color:#3ddc97; text-shadow:0 0 10px rgba(61,220,151,0.45); }
body.theme-oscuro .veh-pop-cv{ color:var(--d-text); }
body.theme-oscuro .veh-pop-cv small{ color:var(--d-muted); }
body.theme-oscuro .veh-pop-addr span{ color:var(--d-text); }
body.theme-oscuro .veh-pop-addr i{ color:var(--d-accent); }
body.theme-oscuro .veh-pop .veh-act{ background:#203856; color:var(--d-text); box-shadow:2px 2px 5px rgba(10,16,26,0.55),-1px -1px 2px rgba(82,110,152,0.22); border:none; }
body.theme-oscuro .veh-pop .veh-act:hover{ color:var(--d-accent); }
body.theme-oscuro .veh-pop .veh-act:active{ box-shadow:var(--d-press); }
body.theme-oscuro .veh-pop .veh-act.guard-active{ color:var(--d-accent); box-shadow:var(--d-glow-sm); }
html:has(body.theme-oscuro){ background:#1b2839 !important; }
/* === fin dark v19 === */

/* === DARK DUSK VARIANT (Anochecer) v2 -- rediseno sutil: base #28354a; sombras exteriores 3/3/6 . -1/-1/6; neumorfico solido sin glass/blur; mapa reusa oscuro === */
body.theme-oscuro.theme-dusk{
--d-bg:#28354a; --d-surf:#2f3e56; --d-surf2:#37475f;
--d-shd:#161e2b; --d-shl:#43567a;
--d-text:#dde7f5; --d-muted:#94a2bb; --d-accent:#6597eb; --d-border:#3f4d63;
--d-glass:#2c3a51; --d-glass2:#2a3850; --d-glass3:#2e3c54;
--d-glassedge:1px solid rgba(190,212,245,0.09);
--d-blur:none; --d-blur-sm:none; --d-blur-lg:none;
--d-raise:3px 3px 6px var(--d-shd),-1px -1px 6px var(--d-shl);
--d-raise-sm:2px 2px 4px var(--d-shd),-1px -1px 4px var(--d-shl);
--d-raise-lg:3px 3px 6px var(--d-shd),-1px -1px 6px var(--d-shl);
--d-inset:inset 3px 3px 5px var(--d-shd),inset -2px -2px 4px var(--d-shl);
--d-inset-sm:inset 2px 2px 4px var(--d-shd),inset -1px -1px 2px var(--d-shl);
--d-press:inset 4px 4px 7px var(--d-shd),inset -3px -3px 5px var(--d-shl);
--d-glow:0 0 0 1px rgba(101,151,235,0.16),0 6px 16px rgba(101,151,235,0.28);
--d-glow-sm:0 0 0 1px rgba(101,151,235,0.13),0 4px 11px rgba(101,151,235,0.20);
--d-amb:radial-gradient(150% 120% at 50% -20%,#3a4a64 0%,#28354a 52%,#1f2a3a 100%);
}
body.theme-oscuro.theme-dusk #map{ box-shadow:var(--d-raise-lg) !important; }
body.theme-oscuro.theme-dusk .login{ background:#28354a !important; }
html:has(body.theme-oscuro.theme-dusk){ background:#28354a !important; }
body.theme-oscuro.theme-dusk #dos{ background:#2f3e56 !important; }
body.theme-oscuro.theme-dusk #fromto input[type="button"]{ background:#6597eb !important; }
body.theme-oscuro.theme-dusk #listad::-webkit-scrollbar-thumb{ background-color:#3f4d63 !important; }
body.theme-oscuro.theme-dusk #asistente-panel{ background:#28354a !important; box-shadow:0 -12px 30px rgba(10,14,22,0.5) !important; }
body.theme-oscuro.theme-dusk #asistente-header::before{ background:#3f4d63 !important; }
body.theme-oscuro.theme-dusk #asistente-input{ background:#212d40 !important; }
body.theme-oscuro.theme-dusk #asistente-input-row #asistente-mic{ background:#6597eb !important; }
body.theme-oscuro.theme-dusk .asistente-msg-user{ background:#6597eb !important; }
body.theme-oscuro.theme-dusk .maplibregl-ctrl-attrib{ background:rgba(40,53,74,0.9) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
body.theme-oscuro.theme-dusk .ol-popup.veh-pop{ background-color:#2c3a51 !important; box-shadow:var(--d-raise),inset 0 1px 0 rgba(205,225,255,0.06) !important; }
body.theme-oscuro.theme-dusk .ol-popup.veh-pop:after{ border-top-color:#2c3a51 !important; }
body.theme-oscuro.theme-dusk .veh-pop-reg, body.theme-oscuro.theme-dusk .veh-pop-cell{ background:#212d40 !important; }
body.theme-oscuro.theme-dusk .veh-pop .veh-act{ background:#2f3e56 !important; box-shadow:var(--d-raise-sm) !important; }
/* === fin dusk variant === */
/* === MOTION LAYER clone3 (kowalski) === */
:root{ --mo-ease-out:cubic-bezier(.23,1,.32,1); --mo-ease-in-out:cubic-bezier(.77,0,.175,1); --mo-ease-drawer:cubic-bezier(.32,.72,0,1); }
.neumorphism, #up, #asistente-fab, #asistente-mic, #asistente-send, #asistente-voice-toggle, #asistente-close, .gfa-btn, .guard-lock-yes, .guard-lock-no, .guard-dome-x{ transition:transform .14s var(--mo-ease-out), box-shadow .14s var(--mo-ease-out); }
.neumorphism:active, #asistente-fab:active, #asistente-mic:active, #asistente-send:active, #asistente-voice-toggle:active, #asistente-close:active, .gfa-btn:active, .guard-lock-yes:active, .guard-lock-no:active, .guard-dome-x:active{ transform:scale(.97); }
#up:active{ transform:scale(.97); }
#up{ transition:box-shadow .2s var(--mo-ease-out), bottom .28s var(--mo-ease-drawer); }
#uno{ transition:height .28s var(--mo-ease-drawer); }
#dos{ transition:box-shadow .2s var(--mo-ease-out), bottom .28s var(--mo-ease-drawer); }
#vercalle, #opccuenta, #contenedor-cambio-contrasena, #notif-list, #listad, #replay-controls{ animation:moOverlayIn .2s var(--mo-ease-out); }
@keyframes moOverlayIn{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; } }
/* === fin motion layer clone3 === */
/* === MOTION LAYER clone3 Fase 2 (kowalski: origin-aware) === */
/* overlays entran desde su ancla fisica (origin-aware); override del enter generico de Fase 1 */
#replay-controls{ transform-origin:bottom center; animation:moRise .26s var(--mo-ease-out) backwards; }
#listad{ transform-origin:bottom center; animation:moRise .24s var(--mo-ease-out) backwards; }
#opccuenta{ transform-origin:bottom right; animation:moPop .2s var(--mo-ease-out) backwards; }
#vercalle{ transform-origin:center; animation:moModal .24s var(--mo-ease-out) backwards; }
#contenedor-cambio-contrasena{ transform-origin:center; animation:moModal .24s var(--mo-ease-out) backwards; }
@keyframes moRise{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes moPop{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes moModal{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
/* popup del vehiculo: escala desde el pin (popover origin-aware, Kowalski). Sutil/corto. */
.ol-popup{ transform-origin:bottom center; animation:moPopFromPin .2s var(--mo-ease-out) backwards; }
@keyframes moPopFromPin{ from{ opacity:0; transform:translateY(5px) scale(.93); } to{ opacity:1; transform:none; } }
/* desktop-only (hover real): leve elevacion al hover en botones neumorficos; tactil intacto */
@media (hover:hover){ .neumorphism:hover{ transform:translateY(-1px); } .neumorphism:active{ transform:scale(.97); } }
/* === fin motion layer clone3 Fase 2 === */


/* === GP-BANNER-UNI-F3: unifica #push-banner + #sw-update-banner al sistema neumorfico celeste (claro) y a tokens --d-* (oscuro/dusk). Acento semantico: cyan=activar, violeta=update. CSS-only; !important vence a los estilos inline de ambos banners. dusk hereda por tokens. === */
#push-banner, #sw-update-banner{
  background: linear-gradient(180deg,#eef3fc,#e1eaf8) !important;
  color: #2a3d63 !important;
  box-shadow: 0 6px 18px rgba(31,52,90,0.16), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
#push-banner{ border-bottom: 1px solid rgba(1,163,255,0.45) !important; }
#sw-update-banner{ border-bottom: 1px solid rgba(124,58,237,0.50) !important; }
#push-banner strong{ color:#1f2c46 !important; }
#push-banner-accept{ background:#01a3ff !important; color:#fff !important; box-shadow:0 2px 8px rgba(1,163,255,0.40) !important; }
#push-banner-dismiss{ background:transparent !important; color:#3f5170 !important; border:1px solid #b9c6dd !important; }
#sw-update-yes{ background:#7c3aed !important; color:#fff !important; box-shadow:0 2px 8px rgba(124,58,237,0.38) !important; }
#sw-update-no{ background:transparent !important; color:#3f5170 !important; border:1px solid #b9c6dd !important; }
@keyframes gpBannerDrop{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
#push-banner{ animation: gpBannerDrop .3s cubic-bezier(0.23,1,0.32,1); }
@media (prefers-reduced-motion: reduce){ #push-banner{ animation:none !important; } }
body.theme-oscuro #push-banner,
body.theme-oscuro #sw-update-banner{
  background: var(--d-surf2) !important;
  color: var(--d-text) !important;
  box-shadow: var(--d-raise) !important;
}
body.theme-oscuro #push-banner{ border-bottom: 1px solid var(--d-accent) !important; }
body.theme-oscuro #sw-update-banner{ border-bottom: 1px solid #a06cff !important; }
body.theme-oscuro #push-banner strong{ color: var(--d-text) !important; }
body.theme-oscuro #push-banner-accept{ background: var(--d-accent) !important; color:#0a1422 !important; box-shadow:none !important; }
body.theme-oscuro #push-banner-dismiss{ background:transparent !important; color: var(--d-text) !important; border:1px solid var(--d-border) !important; }
body.theme-oscuro #sw-update-yes{ background:#a06cff !important; color:#1a0f2e !important; box-shadow:none !important; }
body.theme-oscuro #sw-update-no{ background:transparent !important; color: var(--d-text) !important; border:1px solid var(--d-border) !important; }


/* === GP-BANNER-CARD-F3B: #push-banner + #sw-update-banner como TARJETA FLOTANTE inferior (zona del pulgar). Centrada con max-width, separada de bordes, env(safe-area-inset-bottom), esquinas redondeadas, sombra elevada, borde de acento, botones apilados 50/50, entrada gpCardRise (sube). CSS-only; !important vence inline. Aditivo tras GP-BANNER-UNI-F3. === */
@keyframes gpCardRise{
  from{ transform: translateX(-50%) translateY(120%); opacity:0; }
  to{ transform: translateX(-50%) translateY(0); opacity:1; }
}
#push-banner, #sw-update-banner{
  top:auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  left:50% !important; right:auto !important;
  width: calc(100% - 24px) !important;
  max-width: 440px !important;
  transform: translateX(-50%) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-shadow: 0 14px 34px rgba(31,52,90,0.22), 0 3px 10px rgba(31,52,90,0.12), inset 0 1px 0 rgba(255,255,255,0.55) !important;
  animation: gpCardRise .34s cubic-bezier(0.23,1,0.32,1) both !important;
}
#push-banner{ border:1px solid rgba(1,163,255,0.32) !important; }
#sw-update-banner{ border:1px solid rgba(124,58,237,0.34) !important; }
#push-banner > div{ flex-wrap:wrap !important; gap:10px !important; max-width:none !important; }
#push-banner > div > span{ flex:0 0 auto !important; }
#push-banner > div > div{ flex:1 1 60% !important; min-width:0 !important; }
#push-banner-accept, #push-banner-dismiss{ flex:1 1 calc(50% - 6px) !important; padding:12px 14px !important; }
#sw-update-banner{ flex-wrap:wrap !important; }
#sw-update-banner > span{ flex:1 1 100% !important; }
#sw-update-banner > div{ flex:1 1 100% !important; }
#sw-update-banner > div > button{ flex:1 1 0 !important; padding:12px 14px !important; }
body.theme-oscuro #push-banner{ border:1px solid var(--d-accent) !important; }
body.theme-oscuro #sw-update-banner{ border:1px solid #a06cff !important; }
body.theme-oscuro #push-banner,
body.theme-oscuro #sw-update-banner{
  box-shadow: 0 14px 34px rgba(0,0,0,0.45), var(--d-raise) !important;
}
@media (prefers-reduced-motion: reduce){
  #push-banner, #sw-update-banner{ animation:none !important; }
}


/* === GP-BANNER-CENTER-F3C: reposiciona #push-banner + #sw-update-banner al CENTRO de la pantalla (enfasis) en vez del borde inferior. Override vertical + animacion de GP-BANNER-CARD-F3B; mantiene tarjeta/centrado-horizontal/botones/colores. CSS-only; !important. === */
@keyframes gpCardPop{
  from{ transform: translate(-50%, -50%) scale(0.96); opacity:0; }
  to{ transform: translate(-50%, -50%) scale(1); opacity:1; }
}
#push-banner, #sw-update-banner{
  top:50% !important;
  bottom:auto !important;
  transform: translate(-50%, -50%) !important;
  animation: gpCardPop .28s cubic-bezier(0.23,1,0.32,1) both !important;
}
@media (prefers-reduced-motion: reduce){
  #push-banner, #sw-update-banner{ animation:none !important; }
}