body {
    padding: 2px;
    margin: 2px;
}
#mapa {
    position: absolute;
    height: 99%;
    width: 99%;
}

/*dataTable*/
#alertas {
	border-collapse: collapse;
    font-family: 'Montserrat';
}
#alertas thead th{
	border: none;
    height: 20px;
    background-color: #47494c;
    color: #ffffff;
    font-size: 14px;
    border-color: #efefef;
}
#alertas2 tbody td {
	color: #000000;
	border: none;
}
#alertas2 tbody tr {
    height: 60px;
	background-color: #f9fafb;
}
#alertas2 tbody tr:nth-child(odd) {
	background-color: #ffffff;
}
#alertas2 tbody tr:nth-child(even) {
	background-color: #efefef;
}

.row-selected td{
    background-color: transparent !important;
    color: #818181;
}

.row-selected2 td{
    background-color: #DB0632 !important;
    color: #ffffff;
}

.label-select{
    color: #ff0000;
}
.label-deselect{
    color: #000000;
}

#resize_wrapper {
    position: absolute;
    top: 5em;
    left: 1em;
    right: 1em;
    bottom: 1em;
    font-family: 'Montserrat'
}

#btnShow {
    background: url(../iconos/hamburguesa.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: calc(0%) center;
    height: 50px;
    width: 50px;
}

#btnAlert {
    background: url(../iconos/grupo2.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: calc(0%) center;
    height: 50px;
    width: 50px;
}

#suggestions {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
    width: 100%;
}

/*----------------- VENTANA SEGUIMIENTO INDIVIDUAL ----------------*/
#dheader {
    position: absolute;
    top: 20px;
    left: 60px;
    width: 160px;
    filter: alpha(opacity=75);
    opacity: 0.8;
    z-index: 11000;
    background-color: red;
    color: white;
    padding: 5px;
    border: 0px solid #999;
    font-family: 'Montserrat';
    font-size: x-small;
    font-weight: bold;
}

#dheaderstop {
    position: absolute;
    top: 50px;
    left: 60px;
    width: 160px;
    filter: alpha(opacity=75);
    opacity: 0.8;
    z-index: 11000;
    background-color: darkorange;
    color: white;
    padding: 5px;
    border: 0px solid #999;
    font-family: 'Montserrat';
    font-size: x-small;
    font-weight: bold;
}

#footer {
    position: fixed;
    left: 120;
    right: 15px;
    bottom: 0;
    width: 90%;
    height: 115px;
    margin: 5px;
    padding: 6px;
    z-index: 2;
    background: #414141;
    float: right;
    color: White;
    filter: alpha(opacity=80);
    opacity: 0.8;
    z-index: 10000;
    border-radius: 8px 8px 8px 8px;
    font-family: 'Montserrat';
    font-size: 13px;
    font-weight: bold;
}

#modal_recorrido{
    z-index: 20000;
}

.panel {
    position: absolute;
    /* top: 100%;
    left: 50%;
    margin-top: -100px;
    z-index: 5555;
    padding: 5px;
    background-color: #c6c6c6;*/
    background-color: transparent;
    bottom: 100%;
    border: none;
    border-radius: 25px;
}

#contextMenu {
    position: absolute;
    width: auto;
    /* top: 50%; */
    /* left: 120; */
    filter: alpha(opacity=50);
    opacity: 0.8;
    z-index: 11000;
    font-family: 'Montserrat';
    background-color: #eaeaea;
    border-radius: 10px;
}

#listAlertas {
    position: absolute;
    width: auto;
    /* top: 50%; */
    /* left: 120;
    filter: alpha(opacity=50);
    opacity: 0.8;*/
    z-index: 11000;
    font-family: 'Montserrat';
    background-color: #eaeaea;
    border-radius: 5px;
}

.glossyBtn {
    background: url(../iconos/search2.png) left no-repeat;
    font-size: 14px;
    font-family: 'Montserrat';
    padding: 0px 0px 0px 15px;
    height: 100%;
}

.form-control {
    background-color: #fafafa;
    border-radius: 5px;
    border: 1px solid;
    border-color: #272c3d;
}

.leaflet-popup-content {
    width:auto !important;
}

/*InfoWin*/
table {
    width: auto;
    border-spacing: 5px; /* Define el espacio entre las celdas */
    border-collapse: separate; /* Es importante que sea separate para que border-spacing funcione */
}
th, td {
    padding: 2px 5px;
    text-align: center;
    border: none;
    position: relative;
}
.titulo {
    right: -70px;
}
.secundario {
    text-align: left;
}
.secundarioicon {
    text-align: left;
}
.flex-container {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}
th {
    background-color: #f2f2f2;
    font-weight: bold;
}
div i {
    font-size: 15px;
}

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #e0e0e0;
}

tr.excepcion {
    background-color: #ffffff;
}
tr.excepcion2 {
    background-color: #e7e7e7;
}

.leaflet-control-container .leaflet-routing-container-hide{
    display: none;
}

/*Imagen y shadows alertas
.orbita {
	position: relative;
	width: 50px;
	height: 50px;
    border-radius: 50%;
    margin: 0 5em;
	background: #ffc0c0;
	background-image: radial-gradient(farthest-corner at 34px 14px, #e6a2a2 25%, #871d1d 35%,  #ffd3d3 100%);
	box-shadow: 0 0 20px 5px #C0FFE4;
	animation: glow 2s infinite;
}
.orbita:before,
.orbita:after {
	content: '';
	display: block;
	position: absolute;
}
.orbita:before {
	width: 22px;
	height: 22px;
	top: 11px;
	left: 11px;
	background: rgba(255,255,255,0.25);
	border: 2px solid rgba(255,255,255,0.5);
	box-shadow: 0 0 2px 3px #f6b3b3;
	box-shadow: 1px 1px 0 #e6a2a2, 0 0 20px 5px #ffc0c0, inset 2px 2px 0 #ffd3d3;
}
.orbita:after {
	left: 0;
	width: 4px;
	height: 48px;
	background: #fff;
	z-index: 5;
	animation: sheen 5s infinite;
}*/

/* animates box shadow glow effect
@keyframes orbita {
	0%,100% {
		box-shadow: 1px 1px #871d1d, 0 0 20px 5px #ff8f8f, inset 2px 2px #ffd3d3;
	}
	50% {
		box-shadow: 1px 1px #871d1d, 0 0 16px 8px #ff8f8f, inset 2px 2px #ffd3d3;
	}
}*/

/* ------------------- Resplandor Alertas -------------------------*/
.glow {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #ccc;
    animation: glow 1s infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 2px -2px #ff0c61;
      }
      to {
        box-shadow: 0 0 2px 2px #ff0c61;
      }
}

/*Loading*/
.container {
    height: 100vh;
    position: absolute;
    z-index: 11000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ring{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ring::before{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    animation: ring 2s linear infinite;
}
@keyframes ring {
    0%{
        transform: rotate(0deg);
        box-shadow: 0px 5px 5px #ff2121;
    }
    25%{
        transform: rotate(90deg);
        box-shadow: 0px 5px 5px #ff5050;
    }
    50%{
        transform: rotate(180deg);
        box-shadow: 0px 5px 5px #f17676;
    }
    75% {
        transform: rotate(270deg);
        box-shadow: 0px 5px 5px #ff5050;
    }
    100% {
        transform: rotate(360deg);
        box-shadow: 0px 5px 5px #ff2121;
    }
}
.ring2{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ring2::before{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    animation: ring2 2s linear infinite;
}
@keyframes ring2 {
    0%{
        transform: rotate(0deg);
        box-shadow: 0px 5px 5px #7011e3;
    }
    25%{
        transform: rotate(90deg);
        box-shadow: 0px 5px 5px #7c2cdf;
        /* box-shadow: 0px 5px 5px #33882a; */
    }
    50%{
        transform: rotate(180deg);
        box-shadow: 0px 5px 5px #9b5fe5;
    }
    75% {
        transform: rotate(270deg);
        box-shadow: 0px 5px 5px #7c2cdf;
        /* box-shadow: 0px 5px 5px #33882a; */
    }
    100% {
        transform: rotate(360deg);
        box-shadow: 0px 5px 5px #7011e3;
    }
}

.ring3{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ring3::before{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    animation: ring3 2s linear infinite;
}

@keyframes ring3 {
    0%{
        transform: rotate(0deg);
        box-shadow: 0px 5px 5px #003F4A;
    }
    25%{
        transform: rotate(90deg);
        box-shadow: 0px 5px 5px #00515F;
    }
    50%{
        transform: rotate(180deg);
        box-shadow: 0px 5px 5px #007C92;
    }
    75% {
        transform: rotate(270deg);
        box-shadow: 0px 5px 5px #00515F;
    }
    100% {
        transform: rotate(360deg);
        box-shadow: 0px 5px 5px #003F4A;
    }
}


/* ==========================================================================
   Seguimiento individual - panel de estado, botones y menu (prefijo .si-)
   Sobrescribe los estilos anteriores de #footer, #dheader, #btnShow/#btnAlert y #contextMenu
   ========================================================================== */

/* Avisos de estado sobre el mapa */
body #dheader, body #dheaderstop {
    left: 62px; width: auto; max-width: 280px; padding: 7px 14px; opacity: 1; filter: none;
    border-radius: 99px; box-shadow: 0 4px 12px rgba(16,24,40,.25);
    font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
}
body #dheader { top: 14px; background: #DB0632; }
body #dheaderstop { top: 52px; background: #d97706; }

/* Panel de estado de la unidad */
body #footer {
    position: fixed; left: 84px; right: auto; bottom: 14px; width: min(780px, calc(100vw - 100px)); height: auto; margin: 0; padding: 0;
    background: #fff; color: #1f2937; opacity: 1; filter: none; float: none; z-index: 10000;
    border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 10px 30px rgba(16,24,40,.22);
    font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; font-weight: 500;
}
#footer:empty { display: none; }
#footer .si-head { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
#footer .si-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
#footer .si-title strong { font-size: 14px; font-weight: 700; color: #111827; }
#footer .si-led { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 4px rgba(156,163,175,.25); }
#footer .si-led.si-ok { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.2); }
#footer .si-led.si-warn { background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.22); }
#footer .si-led.si-bad { background: #DB0632; box-shadow: 0 0 0 4px rgba(219,6,50,.2); }
#footer .si-chip { padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 99px; white-space: nowrap; }
#footer .si-chip.si-ok { color: #166534; background: #dcfce7; }
#footer .si-chip.si-warn { color: #92400e; background: #fef3c7; }
#footer .si-chip.si-bad { color: #991b1b; background: #fee2e2; }
#footer .si-collapse { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 16px; color: #6b7280; background: #f3f4f6; border: none; border-radius: 8px; cursor: pointer; transition: background .15s ease, transform .2s ease; }
#footer .si-collapse:hover { background: #fdecef; color: #DB0632; }
#footer.si-min .si-collapse i { transform: rotate(180deg); }
#footer .si-body { padding: 0 12px 7px; border-top: 1px solid #f1f2f4; }
#footer.si-min .si-body { display: none; }
#footer .si-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 7px 0 5px; }
#footer .si-kv small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
#footer .si-kv strong { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
#footer .si-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; color: #374151; }
#footer .si-row .fa { width: 16px; text-align: center; color: #DB0632; }
#footer .si-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#footer .si-copy { flex: 0 0 auto; padding: 3px 10px; font-size: 11px; font-weight: 700; font-family: inherit; color: #374151; background: #f3f4f6; border: none; border-radius: 99px; cursor: pointer; transition: background .15s ease; }
#footer .si-copy:hover { background: #fdecef; color: #DB0632; }
#footer .si-copy.si-copied { background: #dcfce7; color: #166534; }
#footer .si-row .si-coord { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 600; color: #6b7280; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { #footer .si-row .si-coord { display: none; } }

/* Botones del mapa (menu y alertas) */
.panel { display: flex !important; flex-direction: column; gap: 10px; background: transparent !important; box-shadow: none !important; }
.panel br { display: none; }
.panel a.leaflet-control-button, body #btnShow, body #btnAlert {
    display: flex !important; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0; padding: 0;
    background: #fff; background-image: none; border: 1px solid #e5e7eb; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(16,24,40,.25);
    color: #374151; font-family: FontAwesome; font-size: 20px; line-height: 1; text-decoration: none; cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
body #btnShow::before { content: "\f0c9"; }
body #btnAlert::before { content: "\f0f3"; }
.panel a.leaflet-control-button:hover, body #btnShow:hover, body #btnAlert:hover { background: #DB0632; color: #fff; transform: translateY(-2px); }

/* Menu de opciones */
body #contextMenu {
    width: 290px; opacity: 1; filter: none; padding: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    box-shadow: 0 14px 34px rgba(16,24,40,.28); font-family: 'Montserrat', Arial, sans-serif;
}
#contextMenu .si-menu-title { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; font-size: 13px; font-weight: 700; color: #111827; }
#contextMenu .si-menu-title .fa { color: #DB0632; }
#contextMenu ul.menu { list-style: none; margin: 0; padding: 0; border-radius: 0; }
#contextMenu li { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 10px; }
#contextMenu li:not(.si-menu-label):hover { background: #f6f7f9; }
#contextMenu li.si-menu-label { padding: 10px 10px 2px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; }
#contextMenu li label { flex: 1; margin: 0; font-size: 13px; font-weight: 500; color: #1f2937; cursor: pointer; line-height: 1.3; }
#contextMenu input[type=checkbox] { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 38px; height: 22px; margin: 0; border-radius: 99px; background: #d1d5db; cursor: pointer; transition: background .15s ease; }
#contextMenu input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
#contextMenu input[type=checkbox]:checked { background: #DB0632; }
#contextMenu input[type=checkbox]:checked::after { transform: translateX(16px); }
#contextMenu input[type=checkbox]:focus-visible { outline: 2px solid #DB0632; outline-offset: 2px; }

/* Ventana angosta: el panel sigue a la derecha de los botones (no los tapa) y usa 2 columnas */
@media (max-width: 760px) {
    body #footer { left: 70px; width: calc(100vw - 82px); bottom: 10px; }
    #footer .si-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #footer .si-head { padding: 8px 12px; }
    #footer .si-title strong { font-size: 14px; }
    body #dheader, body #dheaderstop { left: 56px; max-width: calc(100vw - 150px); font-size: 11px; padding: 6px 12px; }
    body #dheader { top: 10px; }
    body #dheaderstop { top: 44px; }
}
/* Ventana muy baja: botones mas pequenos para no chocar con el panel */
@media (max-height: 560px) {
    .panel a.leaflet-control-button, body #btnShow, body #btnAlert { width: 40px; height: 40px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { #footer .si-collapse, .panel a.leaflet-control-button { transition: none; } }

/* ==========================================================================
   Seguimiento individual - ronda 2: etiqueta de la unidad, lista de alertas y modal de recorrido
   ========================================================================== */

/* Etiqueta de la unidad sobre el mapa */
.leaflet-tooltip.si-tooltip { padding: 0; border: none; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(16,24,40,.28); }
.leaflet-tooltip-right.si-tooltip::before { border-right-color: #fff; }
.leaflet-tooltip-left.si-tooltip::before { border-left-color: #fff; }
.si-tag { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; font-family: 'Montserrat', Arial, sans-serif; }
.si-tag-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #f3f4f6; }
.si-tag-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.si-tag-txt strong { font-size: 12px; font-weight: 700; color: #111827; white-space: nowrap; }
.si-tag-txt small { font-size: 11px; font-weight: 600; color: #6b7280; white-space: nowrap; }
.si-tag-speed { flex: 0 0 auto; padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.si-sp0 { color: #fff; background: #111827; }
.si-sp1 { color: #fff; background: #16a34a; }
.si-sp2 { color: #422006; background: #facc15; }
.si-sp3 { color: #431407; background: #fb923c; }
.si-sp4 { color: #fff; background: #DB0632; }

/* Panel de alertas */
body #listAlertas { width: 340px; max-width: calc(100vw - 24px); padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 14px 34px rgba(16,24,40,.28); font-family: 'Montserrat', Arial, sans-serif; }
.si-panel-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; font-size: 14px; color: #111827; }
.si-panel-head strong { flex: 1; font-weight: 700; }
.si-panel-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; font-size: 15px; color: #DB0632; background: #fdecef; }
.si-count { min-width: 28px; padding: 2px 10px; font-size: 12px; font-weight: 800; text-align: center; color: #DB0632; background: #fdecef; border-radius: 99px; }
.si-searchbox { position: relative; margin-bottom: 8px; }
.si-searchbox .fa { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 13px; pointer-events: none; }
body #listAlertas input.si-search { display: block; width: 100%; height: 38px; margin: 0; padding: 0 12px 0 38px; font-size: 13px; font-family: inherit; color: #111827; background: #f6f7f9; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: none; outline: none; }
body #listAlertas input.si-search:focus { background: #fff; border-color: #DB0632; box-shadow: 0 0 0 3px rgba(219,6,50,.12); }
body #listAlertas input.si-search::placeholder { color: #9ca3af; opacity: 1; }
#listAlertas .dataTables_scrollBody { max-height: min(46vh, 400px) !important; border: none !important; }
#listAlertas table#alertas { width: 100% !important; margin: 0; border-spacing: 0; border-collapse: collapse; }
#listAlertas table#alertas tbody tr { height: auto; background: transparent; }
#listAlertas table#alertas tbody tr:nth-child(even) { background: #fafbfc; }
#listAlertas table#alertas tbody tr:hover { background: #fff1f3; cursor: pointer; }
#listAlertas table#alertas td { padding: 8px 6px; text-align: left; border: none; border-bottom: 1px solid #f1f2f4; }
#listAlertas table#alertas td.dataTables_empty { padding: 26px 8px; text-align: center; font-size: 13px; color: #9ca3af; }
.si-alert { display: flex; align-items: center; gap: 10px; }
.si-alert-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #fdecef; }
.si-alert-txt { display: flex; flex-direction: column; min-width: 0; }
.si-alert-txt strong { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.25; }
.si-alert-txt small { font-size: 11px; color: #6b7280; }
.si-alert-txt .fa { font-size: 11px; margin-right: 3px; }

/* Modal de recorrido */
#modal_recorrido .modal-content { border: none; border-radius: 18px; box-shadow: 0 24px 60px rgba(16,24,40,.35); overflow: hidden; font-family: 'Montserrat', Arial, sans-serif; }
#modal_recorrido .modal-header { align-items: center; padding: 14px 20px; border-bottom: 1px solid #f1f2f4; background: #fff; }
.si-modal-title { display: flex; align-items: center; gap: 12px; }
.si-modal-title strong { display: block; font-size: 16px; font-weight: 700; color: #111827; }
.si-modal-title small { display: block; font-size: 12px; color: #6b7280; }
#modal_recorrido .modal-body { padding: 14px 20px 20px; background: #f9fafb; }
#modal_recorrido table#alertas2 { width: 100% !important; margin: 0; border-spacing: 0; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
#modal_recorrido table#alertas2 thead th { padding: 10px 12px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; color: #6b7280; background: #f6f7f9; border-bottom: 1px solid #e5e7eb; }
#modal_recorrido table#alertas2 tbody tr { height: auto; }
#modal_recorrido table#alertas2 tbody tr:nth-child(odd) { background: #fff; }
#modal_recorrido table#alertas2 tbody tr:nth-child(even) { background: #fafbfc; }
#modal_recorrido table#alertas2 tbody tr:hover { background: #fff1f3; cursor: pointer; }
#modal_recorrido table#alertas2 td { padding: 10px 12px; font-size: 13px; text-align: left; color: #1f2937; border: none; border-bottom: 1px solid #f1f2f4; font-variant-numeric: tabular-nums; }
#modal_recorrido table#alertas2 td.dataTables_empty { padding: 28px 12px; text-align: center; color: #9ca3af; }
#modal_recorrido table#alertas2 tbody tr.row-selected2 td { color: #fff; }
#modal_recorrido table#alertas2 tbody tr.row-selected2 .si-chip { color: #DB0632; background: #fff; }
#modal_recorrido #mapa2 { margin-top: 14px; overflow: hidden; border-radius: 12px; border: 1px solid #e5e7eb; }

.si-chip { display: inline-block; max-width: 260px; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 99px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.si-chip-info { color: #1e40af; background: #dbeafe; }

/* ==========================================================================
   Menu contextual del mapa (clic sobre el mapa) - prefijo .si-ctx
   ========================================================================== */
.leaflet-popup.si-ctx .leaflet-popup-content-wrapper { padding: 6px; border-radius: 16px; box-shadow: 0 14px 34px rgba(16,24,40,.30); font-family: 'Montserrat', Arial, sans-serif; }
.leaflet-popup.si-ctx .leaflet-popup-content { width: 250px !important; margin: 0; }
.leaflet-popup.si-ctx .leaflet-popup-tip { box-shadow: 0 6px 14px rgba(16,24,40,.2); }
.si-ctx-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid #f1f2f4; }
.si-ctx-head > div { flex: 1; min-width: 0; }
.si-ctx-head small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.si-ctx-head strong { display: block; margin-top: 1px; font-size: 12px; font-weight: 700; color: #111827; white-space: nowrap; font-variant-numeric: tabular-nums; }
.si-ctx-copy { flex: 0 0 auto; padding: 5px 11px; font-family: inherit; font-size: 11px; font-weight: 700; color: #374151; background: #f3f4f6; border: none; border-radius: 99px; cursor: pointer; transition: background .15s ease; }
.si-ctx-copy:hover { color: #DB0632; background: #fdecef; }
.si-ctx-copy.si-copied { color: #166534; background: #dcfce7; }
.si-ctx-group { padding: 4px 0; border-bottom: 1px solid #f1f2f4; }
.si-ctx-group:last-child { border-bottom: none; padding-bottom: 0; }
.si-ctx-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; margin: 0; font-family: inherit; font-size: 13px; font-weight: 500; text-align: left; color: #1f2937; background: transparent; border: none; border-radius: 10px; cursor: pointer; transition: background .12s ease; }
.si-ctx-item .fa { flex: 0 0 auto; width: 18px; text-align: center; font-size: 15px; color: #6b7280; }
.si-ctx-item:hover, .si-ctx-item:focus-visible { background: #fdecef; color: #DB0632; outline: none; }
.si-ctx-item:hover .fa, .si-ctx-item:focus-visible .fa { color: #DB0632; }
@media (max-width: 420px) {
    .leaflet-popup.si-ctx .leaflet-popup-content { width: 220px !important; }
    .si-ctx-item { padding: 10px; }
}

/* ==========================================================================
   Alertas sobre el mapa: tarjeta al pasar el mouse (.si-alerttip) y popup de gestion (.si-gest)
   ========================================================================== */
.leaflet-tooltip.si-alerttip { padding: 0; border: none; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(16,24,40,.28); }
.leaflet-tooltip-right.si-alerttip::before { border-right-color: #fff; }
.leaflet-tooltip-left.si-alerttip::before { border-left-color: #fff; }
.leaflet-tooltip-top.si-alerttip::before { border-top-color: #fff; }
.leaflet-tooltip-bottom.si-alerttip::before { border-bottom-color: #fff; }
.si-al { min-width: 190px; padding: 10px 14px 10px 12px; border-left: 5px solid var(--ac, #DB0632); border-radius: 12px; font-family: 'Montserrat', Arial, sans-serif; white-space: normal; }
.si-al-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-bottom: 7px; border-bottom: 1px solid #f1f2f4; }
.si-al-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--ac, #DB0632); box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
.si-al-head strong { font-size: 12px; font-weight: 700; line-height: 1.25; color: #111827; text-transform: uppercase; letter-spacing: .01em; }
.si-al-row { display: flex; align-items: center; gap: 9px; padding: 2px 0; font-size: 12px; font-weight: 500; color: #374151; white-space: nowrap; font-variant-numeric: tabular-nums; }
.si-al-row .fa { flex: 0 0 auto; width: 14px; text-align: center; font-size: 13px; color: #9ca3af; }

.leaflet-popup.si-gest .leaflet-popup-content-wrapper { padding: 6px; border-radius: 16px; box-shadow: 0 14px 34px rgba(16,24,40,.30); font-family: 'Montserrat', Arial, sans-serif; }
.leaflet-popup.si-gest .leaflet-popup-content { width: 290px !important; margin: 0; }
.si-gest-box { padding: 6px; }
.si-gest-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; border-bottom: 1px solid #f1f2f4; }
.si-gest-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #f3f4f6; }
.si-gest-head strong { display: block; font-size: 14px; font-weight: 700; color: #111827; line-height: 1.25; }
.si-gest-head small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #6b7280; line-height: 1.3; }
.si-gest-label { display: block; margin: 12px 4px 6px; font-size: 12px; font-weight: 700; color: #374151; }
body .si-gest-txt { display: block; width: 100%; min-height: 84px; margin: 0; padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.4; color: #111827; background: #f6f7f9; border: 1px solid #e5e7eb; border-radius: 12px; resize: vertical; outline: none; box-shadow: none; }
body .si-gest-txt::placeholder { color: #9ca3af; opacity: 1; }
body .si-gest-txt:focus { background: #fff; border-color: #DB0632; box-shadow: 0 0 0 3px rgba(219,6,50,.12); }
.si-gest-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 2px; padding: 10px 14px; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; background: #DB0632; border: none; border-radius: 12px; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.si-gest-btn:hover { background: #b8052a; }
.si-gest-btn:active { transform: translateY(1px); }
.si-gest-btn:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
@media (max-width: 420px) { .leaflet-popup.si-gest .leaflet-popup-content { width: 250px !important; } }