/* =====================================================
   RadioMap – Radio de ruta (tema claro)
   Archivo: base.css
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&display=swap');

:root {
    --papel: #f4f6f8;
    --nieve: #ffffff;
    --tinta: #1c1c1c;
    --suave: #6b7280;
    --linea: #e8ecf0;
    --ambar: #f5a623;
    --celeste: #2b6cb0;
    --azul: #2b6cb0;
    --verde: #22c55e;
    --rojo: #ef4444;
    --violeta: #7c5cbf;
    --navy: #1e4b7b;
    --sombra: 0 8px 24px rgba(28, 40, 60, 0.10);
    --radio: 20px;
    --dock-h: calc(16px + env(safe-area-inset-bottom, 0px));
    --panel-w: 380px;
    --icono-cols: 15;
    --icono-rows: 8;
    --icono-x: 0;
    --icono-y: 0;
    --icono-celda: 2cm;
    --icono-mosaico: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Archivo', sans-serif;
}

html, body {
    height: 100%;
}

body {
    background: var(--papel);
    color: var(--tinta);
    overflow: hidden;
}

.oculto {
    display: none !important;
}

/* ================= PORTADA ================= */

.portada {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(244, 240, 230, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}

.portada.pidiendo-permiso {
    align-items: flex-start;
    padding-top: 96px;
    background: rgba(244, 240, 230, 0.72);
}

.portada-card {
    width: min(520px, 100%);
    background: var(--nieve);
    border: 0;
    border-radius: var(--radio);
    padding: 18px 20px 16px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
}

.portada-stepper {
    min-height: 0;
}

.portada-stepper .stepper-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.marca,
.marca-mini strong {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ambar);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portada-stepper > .marca {
    position: relative;
    display: flex;
    width: 100%;
}

.btn-cerrar-intro {
    margin-left: auto;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f2f4;
    color: var(--navy);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.btn-cerrar-intro:hover,
.btn-cerrar-intro:focus {
    background: #e8eef5;
    outline: none;
}

.btn-cerrar-intro svg {
    width: 16px;
    height: 16px;
    display: block;
}

.stepper-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.stepper-foto {
    display: block;
    width: 100%;
    height: 188px;
    object-fit: cover;
    object-position: center 40%;
    border: 1px solid var(--linea);
    background: var(--papel);
    margin: 12px 0 0;
}

.stepper-foto-corta {
    height: 112px;
}

.intro-feats {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.intro-feats li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: var(--papel);
    border-radius: 12px;
}

.intro-feat-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    color: var(--ambar);
    display: grid;
    place-items: center;
}

.intro-feat-ico svg {
    width: 18px;
    height: 18px;
}

.intro-feat-sos {
    color: #c0392b;
}

.intro-feats strong {
    display: block;
    font-size: 13px;
    color: var(--tinta);
}

.intro-feats p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--suave);
}

.intro-kicker {
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ambar);
}

.intro-cierre {
    margin: 12px 0 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tinta);
}

.intro-magia {
    margin: 12px 0 4px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tinta);
    background: #fff8ee;
    border-radius: 12px;
}

.intro-feat-ico img {
    width: 18px;
    height: 18px;
    display: block;
}

.intro-feat-wa {
    color: #128c7e;
}

.intro-ico-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.intro-ico-grid li {
    min-width: 0;
}

.intro-mas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.intro-mas li {
    min-width: 0;
}

.intro-mas p {
    font-size: 11px;
}

.intro-home {
    display: flex;
    justify-content: center;
    margin: 16px 0 8px;
}

.intro-home-screen {
    width: 168px;
    height: 128px;
    border-radius: 22px;
    background: linear-gradient(180deg, #eceff3 0%, #dfe3e8 100%);
    border: 3px solid #cfd4da;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), var(--sombra);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px 12px 16px;
}

.intro-home-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.intro-home-app img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: block;
    background: #fff;
    box-shadow: 0 6px 14px rgba(28, 40, 60, 0.16);
}

.intro-home-app em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--tinta);
}

.intro-ios {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--tinta);
    font-size: 14px;
    line-height: 1.45;
}

.intro-ios li + li {
    margin-top: 6px;
}

.marca-ico {
    width: 22px;
    height: 22px;
    color: var(--ambar);
}

.marca-ico svg {
    display: block;
    width: 22px;
    height: 22px;
}

.portada-card h1 {
    margin: 10px 0 8px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
}

.mision {
    font-size: 15px;
    line-height: 1.45;
    color: var(--suave);
}

.stepper-estado {
    min-height: 1.3em;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tinta);
}

.stepper-pie {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
}

.stepper-puntos {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin: 0 0 10px;
    padding: 0;
}

.stepper-puntos li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--suave);
}

.stepper-puntos li span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--linea);
    background: var(--papel);
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--suave);
}

.stepper-puntos li.on {
    color: var(--tinta);
}

.stepper-puntos li.on span {
    background: var(--tinta);
    border-color: var(--tinta);
    color: #fff;
}

.stepper-puntos li.ok span {
    background: var(--ambar);
    border-color: var(--ambar);
    color: #fff;
}

.stepper-ayuda {
    font-size: 13px;
    line-height: 1.4;
    color: var(--suave);
    margin-bottom: 12px;
    min-height: 2.6em;
}

.btn-portada {
    width: 100%;
    padding: 12px;
    background: var(--ambar);
    color: #fff;
    border: 0;
    border-radius: 14px;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-portada svg {
    width: 18px;
    height: 18px;
}

.btn-portada:disabled {
    opacity: 0.65;
    cursor: wait;
}

.btn-portada-sec {
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    background: transparent;
    border: 0;
    color: var(--suave);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-salir-fondo {
    margin-top: 8px;
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--navy);
}

.btn-portada.alt {
    margin-top: 8px;
    background: #fff;
    color: var(--tinta);
    border: 1px solid var(--linea);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================= CORTINA CARGA MAPA ================= */

.cortina-mapa {
    position: fixed;
    inset: 0;
    z-index: 4800;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0b0b;
    opacity: 1;
    transition: opacity 0.28s ease-out;
    pointer-events: all;
}

.cortina-mapa.fade-out {
    opacity: 0;
    pointer-events: none;
}

.cortina-mapa-gif {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.cortina-mapa-titulo {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--ambar);
    font-size: clamp(2.8rem, 12vw, 5.2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
    pointer-events: none;
    user-select: none;
}

/* ================= MAPA ================= */

.map-container {
    position: fixed;
    inset: 0;
}

#map {
    width: 100%;
    height: 100%;
    background: #e7e2d6;
}

.tip-calle {
    position: fixed;
    z-index: 1750;
    pointer-events: none;
    max-width: min(240px, 70vw);
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--tinta);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15px;
    line-height: 1.25;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(28, 40, 60, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaflet-control-rotate {
    display: none !important;
}

body.modo-nav-gps .nombre-propio {
    display: none !important;
}

body.modo-nav-gps .marker-propio {
    z-index: 1200;
}

/* Nav GPS: nariz del auto siempre arriba; no rota el marker, rota el mapa. */
body.modo-nav-gps .marker-propio .auto-rot {
    transform: rotate(0deg) !important;
    transition: none !important;
}

/* ================= HUD ================= */

.hud-top {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1500;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}

.hud-top > * {
    pointer-events: auto;
}

.hud-card {
    width: min(300px, 72vw);
    background: #fff;
    border: 0;
    border-radius: 22px;
    box-shadow: var(--sombra);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hud-card.perfil-abierto {
    width: min(360px, calc(100vw - 16px));
}

@media (max-width: 1023px) {
    .hud-top {
        left: 8px;
        right: 8px;
        top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }

    .hud-card {
        width: auto;
        flex: 1 1 auto;
        max-width: calc(100% - 56px);
        border-radius: 18px;
    }

    .hud-acciones {
        position: static;
        top: auto;
        right: auto;
        flex: 0 0 auto;
        align-items: flex-end;
    }
}

.marca-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 2px;
}

.marca-mini strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.marca-mini strong svg {
    width: 16px;
    height: 16px;
    display: block;
}

.marca-mini span {
    display: none;
}

.punto-vivo {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--verde);
    flex: 0 0 7px;
    display: inline-block;
    margin-right: 6px;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.perfil-cabeza {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
}

.perfil-lado-avatar {
    display: none;
}

.perfil-movil-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #8b93a0;
    display: grid;
    place-items: center;
}

.perfil-movil-ico svg {
    width: 22px;
    height: 22px;
    display: block;
}

.perfil-handy {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    background: #fee2e2;
    color: var(--rojo);
    display: grid;
    place-items: center;
}

.perfil-handy svg {
    width: 22px;
    height: 22px;
    display: block;
}

.perfil-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 4px;
    border-radius: 14px;
    background: #fff8ee;
    border: 1.5px solid #e8c49a;
    cursor: pointer;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.perfil-avatar:hover,
.perfil-avatar:focus {
    border-color: var(--ambar);
    outline: none;
}

.icono-preview {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

.icono-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.perfil-resumen {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--tinta);
    padding: 0;
    cursor: pointer;
}

.perfil-senal-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px 2px 4px 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.perfil-datos {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.perfil-resumen span#perfilNombre,
.perfil-datos #perfilNombre {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.perfil-resumen small,
.perfil-datos small {
    display: block;
    min-width: 0;
    margin-top: 2px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(58vw, 240px);
}

.perfil-senal {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--verde);
    font-style: normal;
}

.perfil-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
    flex: 0 0 7px;
}

.perfil-senal svg {
    width: 16px;
    height: 12px;
    display: none;
}

.perfil-senal-btn .perfil-chevron,
.perfil-chevron {
    width: 18px;
    height: 18px;
    color: #c5cad3;
    display: block;
    transition: transform 0.18s ease;
}

.hud-card.perfil-abierto .perfil-chevron {
    transform: rotate(180deg);
}

.perfil-senal em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    color: #64748b;
}

.perfil-senal.estado-off {
    color: #94a3b8;
}

.perfil-senal.estado-off .perfil-punto {
    box-shadow: none;
}

.perfil-senal.estado-on {
    color: var(--verde);
}

.perfil-senal.estado-on em {
    color: #64748b;
}

.perfil-badge {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.perfil-icono-auto {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 12px 8px 10px 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

.perfil-icono-auto .icono-preview,
.perfil-fila-auto {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: #f4f7fb;
    overflow: hidden;
}

.perfil-centrar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    color: var(--navy);
    justify-content: center;
}

.perfil-centrar svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--navy);
}

.perfil-form {
    padding: 0 10px 8px 12px;
}

.perfil-fila {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 4px 12px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eef1f5;
    border-radius: 0;
    cursor: text;
}

.perfil-fila:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.perfil-fila-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #6b7380;
}

.perfil-fila-ico svg {
    display: block;
    width: 22px;
    height: 22px;
}

.perfil-fila-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.perfil-fila-lab {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: #1c232d;
    line-height: 1.2;
}

.perfil-fila-val {
    font-size: 13px;
    font-weight: 500;
    color: #6b7c93;
    line-height: 1.25;
}

.perfil-form .perfil-fila input {
    flex: none;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: #6b7c93;
    outline: none;
}

.perfil-fila-chev {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #d0d5dd;
}

.perfil-fila-chev svg {
    display: block;
    width: 16px;
    height: 16px;
}

.modal-accion {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-accion-fondo {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 28, 0.28);
}

.modal-accion-opciones {
    position: relative;
    z-index: 1;
    width: min(280px, 84vw);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.btn-accion {
    width: 100%;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
    background: rgba(245, 166, 35, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(28, 20, 8, 0.22);
}

.btn-accion.alt {
    background: rgba(255, 255, 255, 0.55);
    color: var(--tinta);
    box-shadow: 0 8px 22px rgba(28, 20, 8, 0.16);
}

.btn-accion:active {
    transform: scale(0.98);
}

.switch-ir-modo {
    width: 100%;
    padding: 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(28, 20, 8, 0.16);
    cursor: pointer;
    color: var(--navy);
}

.switch-ir-modo-pista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
}

.switch-ir-modo-op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #4b5563;
    background: transparent;
}

.switch-ir-modo-op svg,
.switch-ir-modo-op img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
    object-fit: contain;
}

.switch-ir-modo .switch-ir-auto {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(28, 40, 60, 0.12);
}

body.modo-a-pie .switch-ir-modo .switch-ir-auto {
    background: transparent;
    color: #4b5563;
    box-shadow: none;
}

body.modo-a-pie .switch-ir-modo .switch-ir-pie {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(28, 40, 60, 0.12);
}

.modal-salir {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-aviso {
    z-index: 6800;
}

.modal-aviso-card {
    width: min(400px, 100%);
}

.aviso-copia {
    display: block;
    margin: 0 0 14px;
}

.aviso-copia textarea {
    width: 100%;
    min-height: 88px;
    resize: none;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
    color: var(--navy);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}

.modal-salir-fondo {
    position: absolute;
    inset: 0;
    background: rgba(244, 240, 230, 0.92);
}

.modal-salir-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: min(88vh, 740px);
    overflow-y: auto;
    background: var(--nieve);
    border: 0;
    border-radius: var(--radio);
    padding: 22px 22px 18px;
    box-shadow: 0 16px 40px rgba(40, 30, 10, 0.12);
}

.modal-salir-card h2 {
    margin: 10px 0 8px;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
}

.modal-salir-card .mision {
    margin-bottom: 16px;
}

.modal-version-card {
    position: relative;
    z-index: 1;
    width: min(400px, 100%);
    max-height: min(88vh, 740px);
    overflow-y: auto;
    background: var(--nieve);
    border-radius: var(--radio);
    padding: 18px 20px 16px;
    box-shadow: 0 16px 40px rgba(40, 30, 10, 0.12);
}

.modal-version-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.modal-version-top .marca {
    margin: 0;
}

.modal-version-top .btn-cerrar-intro {
    margin-left: 0;
}

.modal-version-card h2 {
    margin: 10px 0 4px;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
}

.modal-version-build {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--suave);
}

.version-refrescar-nota {
    margin: 8px 0 16px;
}

#btnRefrescarCache {
    margin-bottom: 0;
}

.modal-version-box {
    background: #f7f8fa;
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 14px 14px 12px;
}

.modal-version-box-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 12px;
}

.modal-version-box-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--tinta);
}

.consumo-fila + .consumo-fila {
    margin-top: 10px;
}

.consumo-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.consumo-dir {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--navy);
}

.consumo-dir.subida {
    color: #b45309;
}

.consumo-meta strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.consumo-bar {
    display: block;
    height: 6px;
    margin-top: 6px;
    border-radius: 99px;
    background: #e8edf2;
    overflow: hidden;
}

.consumo-bar i {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--navy);
    transition: width 0.35s ease;
}

.consumo-bar.subida i {
    background: var(--ambar);
}

.consumo-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 14px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--linea);
    font-size: 13px;
    color: var(--suave);
}

.consumo-total strong {
    font-size: 16px;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.consumo-red {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--suave);
}

.btn-consumo-reset {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
    color: var(--tinta);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-consumo-reset:hover,
.btn-consumo-reset:focus {
    background: #f3f6fa;
    outline: none;
}

.consumo-nota {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--suave);
}

.modal-version-contacto {
    margin-top: 16px;
    text-align: center;
}

.modal-version-contacto span {
    display: block;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--suave);
}

.modal-version-contacto a {
    display: inline-block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
}

.modal-version-contacto a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.modal-version-contacto button {
    display: block;
    margin: 2px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--suave);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal-version-legal {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--suave);
    text-align: center;
}

.modal-version-legal a {
    color: var(--navy);
    font-weight: 700;
}

.modal-nonet-card .nonet-opcion {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 14px 14px 12px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: #f7f8fa;
    text-align: left;
    cursor: pointer;
}

.modal-nonet-card .nonet-opcion strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: var(--tinta);
}

.modal-nonet-card .nonet-opcion span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--suave);
}

.modal-nonet-card .nonet-opcion.on {
    border-color: var(--navy);
    background: #e8eef5;
}

.modal-nonet-card .nonet-opcion.on strong {
    color: var(--navy);
}

.lista-avisos-pend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    margin: 0 0 16px;
}

.aviso-pend-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
}

.aviso-pend-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.aviso-pend-item small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--suave);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.btn-oir-aviso,
.btn-play-msg {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
    background: var(--ambar, #f5a623);
}

.msg .btn-play-msg {
    display: inline-block;
    margin-top: 6px;
}

.modal-icono {
    position: fixed;
    inset: 0;
    z-index: 6500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-icono-fondo {
    position: absolute;
    inset: 0;
    background: rgba(31, 36, 48, 0.35);
}

.modal-icono-card {
    position: relative;
    z-index: 1;
    width: min(100%, 92vw);
    max-height: min(88vh, 640px);
    display: flex;
    flex-direction: column;
    background: var(--nieve);
    border: 0;
    border-radius: var(--radio);
    box-shadow: 0 16px 40px rgba(40, 30, 10, 0.18);
}

.modal-icono-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linea);
}

.modal-icono-card h3 {
    font-size: 16px;
}

.modal-icono-card header p {
    margin-top: 4px;
    font-size: 12px;
    color: var(--suave);
}

.modal-icono-card header button {
    background: var(--nieve);
    color: var(--tinta);
    border: 1px solid var(--linea);
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
}

.mosaico-scroll {
    overflow: auto;
    padding: 12px;
    max-height: min(70vh, 520px);
}

.mosaico-marco {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--mosaico-aspect, calc(var(--icono-cols) / var(--icono-rows)));
    line-height: 0;
    background: #111;
}

.mosaico-marco img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    vertical-align: top;
}

.mosaico-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--icono-cols), 1fr);
    grid-template-rows: repeat(var(--icono-rows), 1fr);
    width: auto;
    height: auto;
    background: none;
}

.mosaico-celda {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
}

.mosaico-celda:hover,
.mosaico-celda:focus {
    outline: 2px solid var(--celeste);
    outline-offset: -2px;
}

.mosaico-celda.elegida {
    outline: 2px solid var(--ambar);
    outline-offset: -2px;
    background: rgba(217, 119, 6, 0.12);
}

.perfil-form input,
.chat-input,
.select-radio {
    width: 100%;
    margin-bottom: 6px;
    padding: 8px;
    background: #fff;
    color: var(--tinta);
    border: 1px solid var(--linea);
    font-size: 13px;
}

.perfil-form .perfil-fila input {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #6b7c93;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.hud-acciones {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    overflow: visible;
    z-index: 1600;
}

.hud-iconos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    overflow: visible;
}

.radio-cerca {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-height: calc(100dvh - var(--dock-h) - 248px);
    overflow-x: visible;
    overflow-y: auto;
    padding-left: 4px;
    scrollbar-width: thin;
}

.radio-cerca-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.radio-cerca-item.ausente {
    opacity: 0.55;
}

.radio-cerca-item.silenciado .radio-cerca-mic {
    opacity: 0.32;
    pointer-events: none;
}

.radio-cerca-item.silenciado .radio-cerca-auto {
    filter: grayscale(0.65);
}

.radio-cerca-item.silenciado .radio-cerca-auto::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 50%;
    height: 2.5px;
    background: #b42318;
    border-radius: 2px;
    transform: rotate(-42deg);
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.radio-cerca-meta {
    text-align: right;
    background: rgba(255, 250, 244, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: var(--sombra);
    max-width: 108px;
    pointer-events: none;
}

.radio-cerca-meta strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-cerca-meta small {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    color: var(--suave);
    letter-spacing: 0;
    text-transform: none;
}

.radio-cerca-item.sos .radio-cerca-auto {
    box-shadow: 0 0 0 2px #c0392b, var(--sombra);
}

.radio-cerca-item.activo .radio-cerca-auto {
    background: #fff8ee;
    box-shadow: 0 0 0 2px var(--ambar), var(--sombra);
}

.radio-cerca-auto {
    overflow: hidden;
    padding: 4px;
}

.radio-cerca .hud-ico.radio-cerca-mic,
.radio-cerca .hud-ico.radio-cerca-auto {
    background: rgba(255, 255, 255, 0.9);
}

.radio-cerca-auto img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    position: relative;
}

.radio-cerca-mic.grabando {
    background: var(--ambar);
    color: #fff;
    box-shadow: 0 0 0 2px var(--ambar), var(--sombra);
}

.radio-cerca-mic.grabando svg {
    color: #fff;
}

.radio-cerca-mas strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--ambar);
    letter-spacing: 0;
    text-transform: none;
}

.radio-cerca-mas.on {
    background: #fff8ee;
    box-shadow: 0 0 0 2px var(--ambar), var(--sombra);
}

.hud-btn,
.estado,
.switch-popups,
#btnQueEs,
.btn-toggle-comms,
.btn-cerrar-comms {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.estado svg,
.btn-toggle-comms svg,
.btn-cerrar-comms svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
}

.switch-popups {
    position: relative;
}

.switch-popups input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.estado,
.btn-cerrar-comms,
.chat-composer button,
.aviso-gps button {
    background: #fff;
    color: var(--tinta);
    border: 0;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--sombra);
}

.estado-on {
    color: #2f6b22;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.estado-off {
    color: var(--suave);
}

.hud-ico {
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    box-shadow: var(--sombra);
    justify-content: center;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.hud-ico svg,
.hud-ico img {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--navy);
    object-fit: contain;
    display: block;
}

.hud-ico > span:not(.badge-hud):not(.ico):not(.ptt-leyenda):not(.ptt-mic):not(.ptt-txt) {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 6px 8px;
    margin: 0;
    overflow: visible;
    clip: unset;
    clip-path: none;
    white-space: nowrap;
    border: 0;
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.hud-ico:hover > span:not(.badge-hud):not(.ico):not(.ptt-leyenda):not(.ptt-mic):not(.ptt-txt),
.hud-ico:focus > span:not(.badge-hud):not(.ico):not(.ptt-leyenda):not(.ptt-mic):not(.ptt-txt),
.hud-ico:focus-visible > span:not(.badge-hud):not(.ico):not(.ptt-leyenda):not(.ptt-mic):not(.ptt-txt),
.hud-ico:active > span:not(.badge-hud):not(.ico):not(.ptt-leyenda):not(.ptt-mic):not(.ptt-txt) {
    opacity: 1;
}

.hud-mob {
    display: none;
}

#btnRadares {
    display: none !important;
}

.badge-hud {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--ambar);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
}

.tab-txt {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.15;
}

.tab-txt small {
    display: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.75;
}

.switch-popups:has(input:checked) {
    background: #eef4fb;
    box-shadow: 0 0 0 2px var(--navy), var(--sombra);
}

#btnTestFantasma {
    display: none !important;
}

#btnRadares.on,
#btnTestFantasma.on {
    background: #eef4fb;
    box-shadow: 0 0 0 2px var(--navy), var(--sombra);
}

.hud-ico.perfil-centrar {
    width: 34px;
    height: 34px;
    min-width: 34px;
}

.hud-ico.perfil-centrar:hover {
    background: #fff8ee;
}

.hud-ico.perfil-centrar > span {
    display: none;
}

.punto-rec {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d12525;
    box-shadow: 0 0 0 0 rgba(209, 37, 37, 0.55);
    animation: titilar-rec 1.1s ease-in-out infinite;
}

@keyframes titilar-rec {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(209, 37, 37, 0.45);
    }
    50% {
        opacity: 0.25;
        box-shadow: 0 0 0 4px rgba(209, 37, 37, 0);
    }
}

.switch-popups {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.switch-popups input {
    accent-color: var(--ambar);
}

#btnQueEs:hover,
.hud-ico:hover,
.chat-composer button:hover {
    background: #fff8ee;
}

.aviso-gps {
    position: fixed;
    left: 50%;
    bottom: calc(var(--dock-h) + 12px);
    transform: translateX(-50%);
    z-index: 1600;
    width: min(360px, calc(100% - 24px));
    padding: 12px;
    background: var(--nieve);
    border: 0;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    text-align: center;
}

.aviso-gps p {
    font-size: 13px;
    margin-bottom: 8px;
}

.aviso-offline {
    position: fixed;
    left: 50%;
    top: calc(10px + env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 2700;
    width: min(360px, calc(100% - 24px));
    padding: 8px 12px;
    background: #1f2430;
    color: #fffcf7;
    border-radius: 12px;
    box-shadow: var(--sombra);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.aviso-no-net {
    background: #3f3f46;
}

.aviso-no-net-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.aviso-no-net-act button {
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #3f3f46;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.aviso-wifi {
    background: #1e4b7b;
}

.aviso-wifi-warn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #7a3b11;
    pointer-events: auto;
}

.aviso-wifi-warn button {
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #7a3b11;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* ================= ASIDE ================= */

.comms-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--dock-h);
    width: 100%;
    height: min(54vh, 500px);
    max-height: calc(100% - var(--dock-h) - 64px);
    background: var(--nieve);
    border-left: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 32px rgba(28, 24, 16, 0.16);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translateY(110%);
    transition: transform 0.28s ease;
    padding-bottom: 0;
    overflow: hidden;
}

.comms-panel.open {
    transform: translateY(0);
}

body.comms-open .dock-mapa #btnPttDock,
body.comms-open #btnPttDock {
    display: none !important;
    pointer-events: none !important;
}

body.comms-open .vel-hud,
body.comms-open .barra-destino {
    visibility: hidden;
}

.comms-handle {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--linea);
    margin: 8px auto 0;
    flex: 0 0 auto;
}

.comms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px;
}

.comms-header h2 {
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.comms-header h2 svg {
    width: 16px;
    height: 16px;
    color: var(--ambar);
}

.comms-header p {
    margin-top: 3px;
    font-size: 12px;
    color: var(--suave);
}

.usos-linea {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--linea);
}

.usos-linea li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--papel);
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--tinta);
}

.usos-linea svg {
    width: 12px;
    height: 12px;
    color: var(--ambar);
}

.comms-contactos,
.comms-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.comms-contactos {
    flex: 1 1 52%;
    border-bottom: 1px solid var(--linea);
}

.usos-linea {
    display: none;
}

.comms-chat {
    flex: 1 1 auto;
}

.contactos-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px 6px;
}

.contactos-toolbar h3 {
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contactos-toolbar h3 svg {
    width: 13px;
    height: 13px;
    color: var(--ambar);
}

.leyenda-cerca {
    margin-top: 3px;
    font-size: 11px;
    color: var(--ambar);
    font-weight: 600;
}

.contactos-toolbar label {
    font-size: 11px;
    color: var(--suave);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contactos-toolbar label svg {
    width: 12px;
    height: 12px;
}

.select-radio {
    width: auto;
    margin: 0 0 0 4px;
    padding: 4px 6px;
}

.lista-contactos {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px 10px;
}

.contacto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 9px;
    margin-bottom: 6px;
    border: 1px solid var(--linea);
    background: #fff;
    cursor: pointer;
}

.contacto:hover,
.contacto.activo {
    border-color: var(--ambar);
    background: #fff8ee;
}

.contacto.contacto-ausente {
    opacity: 0.72;
}

.contacto strong {
    display: block;
    font-size: 13px;
}

.contacto small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--suave);
}

.contacto.mas-cerca {
    border-color: #e8c49a;
    background: #fffaf3;
}

.tag-cerca {
    display: block;
    margin: 2px 0 1px;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ambar);
}

.contacto .dist {
    font-size: 12px;
    color: var(--navy);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contacto .dist svg {
    width: 12px;
    height: 12px;
}

.vacio {
    font-size: 13px;
    color: var(--suave);
    padding: 12px 4px;
}

.chat-tabs {
    display: flex;
    border-bottom: 1px solid var(--linea);
}

.tab {
    flex: 1;
    background: transparent;
    color: var(--suave);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab svg {
    width: 14px;
    height: 14px;
}

.tab.activa {
    color: var(--tinta);
    border-bottom-color: var(--ambar);
    font-weight: 600;
}

.badge {
    display: inline-block;
    min-width: 16px;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--ambar);
    color: #fff;
    font-size: 10px;
}

.chat-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 10px;
}

.btn-enviar {
    background: var(--tinta) !important;
    color: #fff !important;
    border: 0 !important;
    min-width: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-enviar svg {
    width: 14px;
    height: 14px;
}

.destino-chat {
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fff8ee;
    border: 1px solid var(--linea);
}

.destino-chat span {
    display: block;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--suave);
}

.destino-chat strong {
    display: block;
    margin-top: 2px;
    font-size: 14px;
}

.destino-directo {
    background: #eef4fb;
}

.contacto-seleccionado {
    font-size: 12px;
    padding: 6px 2px 8px;
    color: var(--suave);
}

.chat-mensajes {
    flex: 1;
    min-height: 90px;
    overflow-y: auto;
    background: #fff;
    padding: 8px;
    border: 1px solid var(--linea);
    margin-bottom: 8px;
}

.msg {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.35;
}

.msg .meta {
    display: block;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--suave);
    margin-bottom: 2px;
}

.msg .cuerpo {
    display: block;
}

.msg .hora {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--suave);
}

.chat-composer {
    display: flex;
    gap: 6px;
}

.chat-input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.btn-voz,
.btn-ptt {
    min-width: 52px;
    padding: 6px 8px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 9px;
    letter-spacing: 0.3px;
}

.btn-voz svg,
.btn-ptt svg {
    width: 14px;
    height: 14px;
}

.btn-ptt.grabando,
.btn-ptt-mapa.grabando {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
    box-shadow: 0 8px 24px rgba(192, 57, 43, 0.4);
}

#btnPttDock {
    background: var(--ambar);
    box-shadow: 0 8px 24px rgba(245, 166, 35, 0.45);
}

#btnPttDock.ptt-canal-privado,
#btnPttMapa.ptt-canal-privado {
    background: var(--verde);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.45);
}

#btnPttDock.ptt-canal-grupo,
#btnPttMapa.ptt-canal-grupo,
#btnPttDock.ptt-canal-encuentro,
#btnPttMapa.ptt-canal-encuentro {
    background: var(--azul);
    box-shadow: 0 8px 24px rgba(43, 108, 176, 0.45);
}

#btnPttDock.ptt-canal-fantasma,
#btnPttMapa.ptt-canal-fantasma {
    background: #1a1a1a;
    color: #f5f5f5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    filter: grayscale(1);
}

#btnPttDock.ptt-canal-fantasma .ico,
#btnPttMapa.ptt-canal-fantasma .ico,
#btnPttDock.ptt-canal-fantasma .ptt-leyenda,
#btnPttMapa.ptt-canal-fantasma .ptt-leyenda {
    color: #f5f5f5;
}

#btnPttDock.grabando,
#btnPttMapa.grabando {
    background: var(--rojo);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45);
    filter: none;
}

.habla-mapa {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--dock-h) + 12px);
    z-index: 1200;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    max-width: none;
}

.destino-habla {
    background: #fff;
    border: 0;
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: var(--sombra);
    max-width: min(210px, 52%);
}

.destino-habla span {
    display: block;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--suave);
}

.destino-habla strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

.dock-mapa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2500;
    display: none;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    height: var(--dock-h);
    padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 28px rgba(28, 24, 16, 0.10);
}

.dock-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 56px;
    padding: 4px 8px 2px;
    background: transparent;
    border: 0;
    color: var(--ambar);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.dock-item svg,
.dock-item img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

.dock-item.on {
    color: var(--tinta);
    background: var(--papel);
    border-radius: 12px;
}

.btn-ptt-mapa {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin: -28px 0 4px;
    padding: 0;
    background: var(--ambar);
    color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(245, 166, 35, 0.45);
}

.btn-ptt-mapa .ico {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.btn-ptt-mapa .ico svg {
    width: 26px;
    height: 26px;
    display: block;
}

.btn-ptt-mapa .ptt-leyenda {
    display: none;
}

.ptt-leyenda {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.ptt-leyenda strong {
    font-size: 11px;
    letter-spacing: 0.4px;
}

.ptt-leyenda small {
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    opacity: 0.8;
}

.aviso-audio {
    position: absolute;
    left: 50%;
    bottom: calc(var(--dock-h) + 96px);
    transform: translateX(-50%);
    z-index: 1300;
    padding: 8px 12px;
    background: var(--nieve);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--sombra);
    font-size: 12px;
    white-space: normal;
    max-width: min(280px, calc(100vw - 24px));
    text-align: center;
}

.ack-walkie {
    position: absolute;
    left: 50%;
    bottom: calc(var(--dock-h) + 96px);
    transform: translateX(-50%);
    z-index: 1700;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: var(--sombra);
    pointer-events: none;
}

.ack-walkie.ok {
    background: #1f7a4d;
    color: #fff;
}

.ack-walkie.fail {
    background: #c0392b;
    color: #fff;
}

.destino-habla.transmitiendo {
    box-shadow: 0 0 0 3px var(--ambar), var(--sombra);
}

.destino-habla.ack-ok {
    box-shadow: 0 0 0 3px #1f7a4d, var(--sombra);
}

.destino-habla.ack-fail {
    box-shadow: 0 0 0 3px #c0392b, var(--sombra);
}

/* ================= MARKERS Y POPUPS ================= */

.marker-auto {
    background: transparent !important;
    border: 0 !important;
}

.leaflet-div-icon.marker-propio,
.marker-propio {
    overflow: visible !important;
}

.marker-propio::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 39px;
    height: 39px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.42) 0%, rgba(245, 166, 35, 0.14) 46%, transparent 72%);
    pointer-events: none;
    z-index: 0;
}

.marker-propio .auto-rot {
    position: relative;
    z-index: 1;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.55));
}

body.modo-nav-gps .marker-propio::before {
    width: 52px;
    height: 52px;
}

body.modo-nav-gps .marker-propio .auto-rot {
    filter: drop-shadow(0 0 8px rgba(245, 166, 35, 0.55));
}

.vel-hud {
    position: absolute;
    left: 12px;
    bottom: 24px;
    transform: none;
    z-index: 1180;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 72px;
    height: 72px;
    min-width: 72px;
    padding: 6px 4px 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(28, 40, 60, 0.12);
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    color: #111;
    line-height: 0.9;
    white-space: nowrap;
}

.vel-hud .vel-num {
    font-size: 26px;
    letter-spacing: -0.03em;
}

.vel-hud .vel-uni {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    opacity: 0.72;
    margin-top: 2px;
}

.barra-destino {
    position: absolute;
    left: 96px;
    right: 76px;
    bottom: 30px;
    z-index: 1180;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 16px;
    background: #fff;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(28, 40, 60, 0.14);
    color: #8b93a0;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.barra-destino svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #8b93a0;
}

.barra-destino span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#btnSonidoHandy .ico-sonido-off {
    display: none !important;
}

#btnSonidoHandy.off .ico-sonido {
    display: none !important;
}

#btnSonidoHandy.off .ico-sonido-off {
    display: block !important;
}

#btnSonidoHandy.off {
    background: #fff1f0;
    color: #c0392b;
    box-shadow: 0 0 0 2px #c0392b, var(--sombra);
}

.vel-hud.exceso,
.vel-hud.exceso .vel-num,
.vel-hud.exceso .vel-uni {
    color: #c0392b;
}

.vel-hud.oculto {
    display: none;
}

.marker-auto.ausente {
    opacity: 0.48;
    filter: grayscale(0.85);
}

.marker-auto.silenciado {
    filter: grayscale(0.7);
}

.marker-auto.silenciado .auto-rot::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    height: 2.5px;
    background: #b42318;
    border-radius: 2px;
    transform: rotate(-42deg);
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.auto-rot {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-origin: 50% 50%;
    will-change: transform;
}

.auto-cuerpo {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 17px solid var(--ambar);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.marker-otro .auto-cuerpo {
    border-bottom-color: var(--navy);
}

body.mosaico-listo img.auto-cuerpo {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: contain;
    background: none;
}

body.mosaico-listo .marker-otro .auto-cuerpo {
    border-bottom-color: transparent;
}

body.modo-nav-gps .auto-cuerpo {
    border-left-width: 9px;
    border-right-width: 9px;
    border-bottom-width: 22px;
}

.marker-auto.hablando .auto-cuerpo {
    filter: drop-shadow(0 0 6px var(--ambar));
}

.leaflet-tooltip.ficha {
    background: rgba(255, 250, 244, 0.88);
    color: var(--tinta);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(28, 24, 16, 0.16);
    padding: 0;
    white-space: normal;
    pointer-events: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.leaflet-tooltip.ficha::before {
    border-top-color: rgba(255, 250, 244, 0.88);
}

.leaflet-tooltip-bottom.ficha::before {
    border-bottom-color: rgba(255, 250, 244, 0.88);
    border-top-color: transparent;
}

.leaflet-tooltip.nombre-conductor {
    background: rgba(255, 250, 244, 0.94);
    color: var(--tinta);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(28, 24, 16, 0.16);
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.leaflet-tooltip.nombre-conductor::before {
    border-bottom-color: rgba(255, 250, 244, 0.94);
}

.leaflet-tooltip-bottom.nombre-conductor::before {
    border-bottom-color: rgba(255, 250, 244, 0.94);
    border-top-color: transparent;
}

.leaflet-tooltip.nombre-sos {
    background: #fff4f2;
    color: #c0392b;
}

.leaflet-tooltip.nombre-sos::before,
.leaflet-tooltip-bottom.nombre-sos::before {
    border-bottom-color: #fff4f2;
}

.leaflet-popup.ficha-popup .leaflet-popup-content-wrapper {
    background: rgba(255, 250, 244, 0.92);
    color: var(--tinta);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(28, 24, 16, 0.16);
    padding: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.leaflet-popup.ficha-popup .leaflet-popup-content {
    margin: 0;
    min-width: 228px;
    width: auto !important;
}

.leaflet-popup.ficha-popup .leaflet-popup-tip {
    background: rgba(255, 250, 244, 0.92);
}

.leaflet-popup.ficha-popup.ficha-propia .leaflet-popup-content-wrapper {
    background: #fff;
    box-shadow: 0 14px 36px rgba(28, 24, 16, 0.18), 0 0 0 1px rgba(28, 24, 16, 0.06);
}

.leaflet-popup.ficha-popup.ficha-propia .leaflet-popup-tip {
    background: #fff;
}

.leaflet-popup.ficha-popup.ficha-propia .leaflet-popup-content {
    min-width: 304px;
    max-width: 340px;
}

.leaflet-popup.ficha-popup.ficha-radio .leaflet-popup-content-wrapper {
    background: #fff;
    box-shadow: 0 14px 36px rgba(28, 24, 16, 0.16), 0 0 0 1px rgba(28, 24, 16, 0.06);
}

.leaflet-popup.ficha-popup.ficha-radio .leaflet-popup-tip {
    background: #fff;
}

.leaflet-popup.ficha-popup.ficha-radio .leaflet-popup-content {
    min-width: 280px;
    max-width: 320px;
}

.leaflet-popup.ficha-popup.ficha-sos .leaflet-popup-content-wrapper,
.leaflet-popup.ficha-popup.ficha-sos .leaflet-popup-tip {
    box-shadow: 0 10px 24px rgba(192, 57, 43, 0.2);
}

.leaflet-popup.ficha-popup a.leaflet-popup-close-button {
    display: none;
}

.ficha-propia {
    border-color: rgba(245, 166, 35, 0.35) !important;
}

.v2v-popup-propia {
    min-width: 304px;
    max-width: 340px;
    padding: 12px 12px 10px;
    gap: 10px;
    text-align: left;
}

.yo-cabeza {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.yo-walkie {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--ambar);
    color: #fff;
    display: grid;
    place-items: center;
}

.yo-walkie svg {
    width: 20px;
    height: 20px;
}

.yo-cabeza-txt {
    flex: 1;
    min-width: 0;
}

.v2v-popup-propia .yo-cabeza-txt h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 1px 0 2px;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.yo-radio {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--suave);
    display: flex;
    align-items: center;
    gap: 6px;
}

.yo-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.v2v-popup-propia .btn-cerrar-ficha {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    background: #f1f2f4;
    color: #8a8f96;
}

.yo-persona {
    display: flex;
    align-items: center;
    gap: 10px;
}

.yo-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f4f6f8;
    border: 1px solid #ececec;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.yo-avatar img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.yo-persona-txt {
    flex: 1;
    min-width: 0;
}

.yo-persona-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.yo-persona-fila strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.1;
}

.yo-mov {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ececec;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.yo-mov.en-mov {
    background: var(--ambar);
    color: #fff;
}

.yo-mov.en-mov::before {
    content: "↻";
    font-size: 11px;
}

.yo-meta {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 11px;
    color: var(--suave);
}

.yo-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.yo-meta svg {
    width: 13px;
    height: 13px;
}

.yo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.yo-celda {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.yo-ico {
    color: var(--ambar);
    display: grid;
}

.yo-ico svg {
    width: 16px;
    height: 16px;
}

.yo-celda small {
    font-size: 9px;
    color: var(--suave);
    letter-spacing: 0.2px;
}

.yo-celda strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.15;
    word-break: break-word;
}

.yo-celda .yo-vel {
    font-size: 13px;
    color: #111;
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}

.yo-celda .yo-vel.exceso {
    color: #c0392b;
}

.yo-hora {
    font-size: 10px;
    font-style: normal;
    color: var(--suave);
    font-weight: 600;
}

.yo-ubi {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: var(--tinta);
    cursor: pointer;
    text-align: left;
}

.yo-ubi-lab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--suave);
    font-weight: 600;
}

.yo-ubi-lab svg {
    width: 13px;
    height: 13px;
}

.yo-calle {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yo-chev {
    flex: 0 0 16px;
    color: #b0b4ba;
}

.yo-chev svg {
    width: 16px;
    height: 16px;
    display: block;
}

.yo-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid #eee;
    margin: 0 -12px -2px;
}

.yo-acc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-right: 1px solid #eee;
}

.yo-acc:last-child {
    border-right: 0;
}

.yo-acc svg {
    width: 18px;
    height: 18px;
}

.yo-acc.yo-hablar {
    color: var(--ambar);
}

.yo-acc.yo-hablar.grabando,
.yo-acciones.grabando .yo-hablar {
    color: #fff;
    background: var(--ambar);
}

.yo-sos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    color: #c0392b;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.yo-sos svg {
    width: 13px;
    height: 13px;
}

.habla-mapa-pie {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.brujula-mapa {
    position: absolute;
    right: 12px;
    left: auto;
    bottom: calc(var(--dock-h) + 14px);
    z-index: 1500;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2.5px solid var(--ambar);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--sombra);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.aviso-nav-gps {
    position: absolute;
    left: 50%;
    top: 78px;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 1600;
    max-width: min(240px, calc(100vw - 32px));
    padding: 8px 12px;
    background: rgba(28, 32, 40, 0.92);
    color: #fff;
    border-radius: 12px;
    box-shadow: var(--sombra);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
}

.brujula-mapa.on {
    background: var(--ambar);
    border-color: #fff;
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.45);
}

.brujula-mapa.on .brujula-flecha {
    border-bottom-color: #fff;
}

.brujula-mapa.on .brujula-n {
    color: #fff;
}

.brujula-rosa {
    position: relative;
    width: 36px;
    height: 36px;
    transform-origin: 50% 50%;
    will-change: transform;
}

.brujula-flecha {
    position: absolute;
    left: 50%;
    top: 1px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 14px solid var(--ambar);
    transform: translateX(-50%);
}

.brujula-n {
    position: absolute;
    left: 0;
    right: 0;
    top: 16px;
    bottom: auto;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--ambar);
    line-height: 1;
}

.v2v-popup {
    min-width: 228px;
    max-width: 268px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    text-align: center;
}

.v2v-popup-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

.v2v-popup-top .para {
    margin-bottom: 0;
}

.btn-cerrar-ficha {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3d3d3d;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.btn-cerrar-ficha svg {
    width: 14px;
    height: 14px;
    display: block;
}

.btn-cerrar-ficha:hover {
    color: var(--tinta);
}

.v2v-popup .para {
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--ambar);
    margin-bottom: 0;
    font-weight: 700;
}

.v2v-popup h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 2px 0 0;
    line-height: 1.1;
    color: var(--tinta);
}

.v2v-popup .ficha-vehiculo {
    font-size: 12px;
    color: var(--suave);
    letter-spacing: 0.2px;
}

.ficha-estado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--suave);
    margin: 2px 0 4px;
}

.ficha-senal {
    display: inline-flex;
    color: var(--suave);
}

.ficha-senal svg {
    width: 16px;
    height: 12px;
    display: block;
}

.ficha-estado.sos,
.ficha-estado.sos .ficha-senal {
    color: #c0392b;
}

.v2v-popup-radio {
    min-width: 280px;
    max-width: 320px;
    padding: 12px 14px 10px;
    gap: 8px;
    text-align: left;
}

.v2v-popup-radio .btn-cerrar-ficha {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    background: #f1f2f4;
    color: #8a8f96;
}

.v2v-popup-radio h4 {
    font-size: 22px;
    margin: 0;
    text-align: left;
}

.v2v-popup-radio .para.sos {
    color: #c0392b;
}

.v2v-popup-radio .yo-persona {
    align-items: flex-start;
}

.v2v-popup-radio .yo-persona-fila {
    align-items: flex-start;
}

.v2v-popup-radio .ficha-vehiculo {
    margin: 2px 0 0;
    text-align: left;
}

.v2v-popup-radio .ficha-estado {
    justify-content: flex-start;
    margin: 4px 0 0;
}

.radio-datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: #f3f4f6;
    border-radius: 10px;
}

.radio-datos p {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-size: 12px;
}

.radio-datos span {
    color: var(--suave);
}

.radio-datos strong {
    color: var(--tinta);
    text-align: right;
}

.v2v-popup-radio .walkie-mic-grande {
    background: #fff;
    color: var(--ambar);
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--ambar);
}

.v2v-popup-radio .btn-walkie-redondo.grabando .walkie-mic-grande {
    background: var(--ambar);
    color: #fff;
}

.walkie-radio.off {
    opacity: 0.45;
    filter: grayscale(0.4);
}

.walkie-radio.off .btn-walkie-redondo {
    pointer-events: none;
}

.radio-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-top: 1px solid #eee;
    margin: 2px -14px -2px;
}

.radio-acciones.con-seguir {
    grid-template-columns: repeat(5, 1fr);
}

.radio-acciones.con-seguir .radio-acc {
    font-size: 9px;
    padding: 8px 1px;
}

.radio-acc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 8px 2px;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border-right: 1px solid #eee;
}

.radio-acc:last-child {
    border-right: 0;
}

.radio-acc svg {
    width: 18px;
    height: 18px;
}

.radio-acc.on {
    color: var(--ambar);
    background: #fff8ee;
}

.radio-acc[data-accion="silenciar"].on {
    color: #c0392b;
    background: #fff4f2;
}

.v2v-popup-datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ficha-dato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--tinta);
}

.ficha-dato-lab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--suave);
}

.ficha-dato-lab svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--ambar);
}

.ficha-dato strong {
    font-weight: 700;
    text-align: right;
}

.v2v-popup p {
    font-size: 12px;
    margin-bottom: 2px;
    color: var(--suave);
}

.v2v-popup p b {
    color: var(--tinta);
}

.v2v-popup .acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.v2v-popup .acciones-sec {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.v2v-popup .acciones-sec button,
.v2v-popup .acciones-sec a {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.v2v-popup .acciones-sec svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.btn-ficha.btn-walkie,
.v2v-popup .btn-walkie {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    flex: none;
    min-width: 0;
    padding: 8px 10px;
    background: var(--ambar);
    color: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(245, 166, 35, 0.35);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    cursor: pointer;
    touch-action: none;
}

.walkie-mic {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--ambar);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(245, 166, 35, 0.35);
}

.walkie-mic svg {
    width: 18px;
    height: 18px;
    display: block;
}

.btn-walkie .walkie-idle,
.btn-walkie .walkie-on {
    min-width: 0;
}

.btn-walkie .walkie-on {
    display: none;
}

.btn-walkie strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.btn-walkie small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.btn-walkie.grabando {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
    box-shadow: 0 6px 16px rgba(192, 57, 43, 0.35);
}

.btn-walkie.grabando .walkie-idle {
    display: none;
}

.btn-walkie.grabando .walkie-on {
    display: block;
}

.btn-walkie.grabando .walkie-mic {
    background: #c0392b;
    border-color: #fff;
}

.btn-walkie.grabando small {
    color: rgba(255, 255, 255, 0.75);
}

.walkie-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2px 0 4px;
}

.btn-walkie-redondo {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 2px auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;
    display: grid;
    place-items: center;
}

.walkie-mic-grande {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ambar);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 3px rgba(255, 250, 244, 0.92), 0 0 0 6px var(--ambar);
    position: relative;
    z-index: 1;
}

.walkie-mic-grande svg {
    width: 28px;
    height: 28px;
    display: block;
}

.walkie-ondas {
    position: absolute;
    inset: 6px;
    pointer-events: none;
}

.walkie-ondas::before,
.walkie-ondas::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 42px;
    margin-top: -21px;
    border: 2px solid rgba(245, 166, 35, 0.4);
    border-radius: 50%;
}

.walkie-ondas::before {
    left: 2px;
    border-color: transparent transparent transparent rgba(245, 166, 35, 0.42);
}

.walkie-ondas::after {
    right: 2px;
    border-color: transparent rgba(245, 166, 35, 0.42) transparent transparent;
}

.walkie-radio .walkie-idle,
.walkie-radio .walkie-on {
    margin: 4px 0 0;
    text-align: center;
}

.walkie-radio .walkie-on {
    display: none;
}

.walkie-radio.grabando .walkie-idle {
    display: none;
}

.walkie-radio.grabando .walkie-on {
    display: block;
}

.walkie-radio strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: var(--tinta);
}

.walkie-radio small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--suave);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.btn-walkie-redondo.grabando .walkie-mic-grande {
    background: #e8940f;
    animation: pulso-mic 0.85s ease-in-out infinite;
}

@keyframes pulso-mic {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.btn-icon-lista.grabando {
    background: var(--tinta);
    color: #fff;
    border-color: var(--tinta);
}

.btn-icon-lista {
    border: 1px solid var(--linea);
    background: #fff;
    min-width: 54px;
    height: 42px;
    flex: 0 0 auto;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--tinta);
}

.btn-icon-lista svg {
    width: 14px;
    height: 14px;
}

.btn-icon-lista em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.contacto .acciones-mini {
    display: flex;
    gap: 4px;
}

.leaflet-control-zoom {
    display: none;
}

.leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255,255,255,0.85) !important;
}

.perfil-aviso {
    margin: 8px 2px 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--suave);
}

.caja-grupo {
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--linea);
}

.caja-grupo label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--suave);
}

.caja-grupo input {
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    letter-spacing: 0.3px;
    font-weight: 700;
}

#txtGrupo {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.caja-grupo input[readonly] {
    background: #f3f4f6;
    color: var(--tinta);
}

.grupo-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.grupo-acciones button {
    background: var(--nieve);
    color: var(--tinta);
    border: 1px solid var(--linea);
    padding: 7px 10px;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
}

.grupo-acciones button:hover {
    border-color: var(--ambar);
}

.estado-grupo {
    margin-top: 8px;
    font-size: 11px;
    color: var(--ambar);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.btn-sos-mapa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    color: #c0392b;
    border: 0;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--sombra);
}

.btn-sos-mapa svg {
    width: 16px;
    height: 16px;
    display: block;
}

.btn-sos-mapa.activo {
    background: #c0392b;
    color: #fff;
    animation: pulso-sos 1.2s ease-in-out infinite;
}

.marker-auto.sos {
    filter: drop-shadow(0 0 8px #c0392b);
    animation: titilar-sos 1.1s ease-in-out infinite;
}

.leaflet-tooltip.ficha-sos {
    border-color: #c0392b !important;
    box-shadow: 0 10px 24px rgba(192, 57, 43, 0.2);
}

.ficha-sos .para {
    color: #c0392b;
}

.contacto-sos {
    border-color: #c0392b !important;
    background: #fff4f2 !important;
}

.tag-sos {
    color: #c0392b !important;
}

.msg-sos {
    border-left: 3px solid #c0392b;
    background: #fff4f2;
}

.ficha-priv {
    font-size: 11px;
    color: var(--suave);
}

#btnRadares.on,
#btnTestFantasma.on {
    background: #fff8ee;
    box-shadow: 0 0 0 2px var(--ambar), var(--sombra);
}

body.modo-manejo .hud-card {
    width: min(220px, 70vw);
}

body.modo-manejo .habla-mapa {
    max-width: min(280px, calc(50% - 90px));
}

body.modo-manejo .perfil-form,
body.modo-manejo #btnQueEs,
body.modo-manejo .switch-popups,
body.modo-manejo .marca-mini span {
    display: none !important;
}

body.modo-manejo .perfil-cabeza {
    padding: 6px;
}

body.modo-manejo .btn-ptt-mapa {
    width: 72px;
    height: 72px;
    min-width: 72px;
    padding: 0;
    margin-top: -32px;
}

body.modo-manejo .btn-ptt-mapa .ico {
    width: 100%;
    height: 100%;
    flex-basis: auto;
}

body.modo-manejo .btn-ptt-mapa .ico svg {
    width: 28px;
    height: 28px;
}

body.modo-manejo .ptt-leyenda strong {
    font-size: 14px;
}

body.modo-manejo .btn-sos-mapa {
    padding: 12px 14px;
    font-size: 12px;
}

body.modo-manejo .destino-habla {
    max-width: min(340px, 78%);
    padding: 14px 16px;
}

body.modo-manejo .destino-habla span {
    font-size: 12px;
    letter-spacing: 0.5px;
}

body.modo-manejo .destino-habla strong {
    font-size: 20px;
    line-height: 1.2;
}

body.modo-manejo .aviso-audio {
    font-size: 16px;
    padding: 12px 16px;
}

body.modo-manejo .ack-walkie {
    font-size: 22px;
    padding: 14px 26px;
}

body.modo-manejo .hud-ruta-txt p {
    font-size: 18px;
}

@keyframes pulso-sos {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes titilar-sos {
    0%, 100% { filter: drop-shadow(0 0 4px #c0392b); opacity: 1; }
    50% { filter: drop-shadow(0 0 12px #e74c3c); opacity: 0.85; }
}

.hud-ruta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    width: 100%;
    background: #fff;
    border: 0;
    border-radius: 14px;
    padding: 10px 10px 10px 14px;
    box-shadow: var(--sombra);
    max-width: 100%;
}

.hud-ruta-txt {
    flex: 1;
    min-width: 0;
}

.hud-ruta-txt p {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

.hud-ruta-txt strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta);
}

.hud-ruta-txt span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--suave);
}

.hud-ruta-txt em {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    color: var(--navy);
}

.hud-ruta button {
    background: #fff4f2;
    color: #c0392b;
    border: 1px solid #f0c9c4;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    flex: 0 0 auto;
}

.form-encuentro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 16px;
}

.form-encuentro label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--suave);
}

.form-encuentro input,
.form-encuentro textarea {
    width: 100%;
    padding: 8px 10px;
    background: #fff;
    color: var(--tinta);
    border: 1px solid var(--linea);
    font-size: 14px;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.form-encuentro textarea {
    min-height: 72px;
    resize: vertical;
}

.enc-lugar {
    margin: -8px 0 12px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--navy);
    font-weight: 600;
}

.enc-sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: -4px;
}

.enc-sugerencias button {
    padding: 5px 10px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.enc-sugerencias button:hover,
.enc-sugerencias button:focus {
    border-color: var(--ambar);
    background: #fff8ee;
}

.enc-hora-check {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    color: var(--tinta) !important;
    cursor: pointer;
}

.enc-hora-check input {
    width: auto;
    margin: 0;
}

.enc-alcance {
    border: 0;
    padding: 0;
    margin: 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.enc-alcance legend {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--suave);
    margin-bottom: 4px;
}

.enc-alcance-opt {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.enc-alcance-opt.off {
    opacity: 0.45;
    pointer-events: none;
}

.enc-alcance-opt:has(input:checked) {
    border-color: var(--ambar);
    background: #fff8ee;
}

.form-encuentro .enc-alcance-opt input[type="radio"] {
    width: 18px;
    flex: 0 0 18px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    accent-color: var(--ambar);
}

.enc-alcance-opt span {
    min-width: 0;
}

.enc-alcance-opt strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--tinta);
}

.enc-alcance-opt small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--suave);
    text-transform: none;
    letter-spacing: 0;
}

.form-encuentro select {
    width: 100%;
    padding: 8px 10px;
    background: #fff;
    color: var(--tinta);
    border: 1px solid var(--linea);
    font-size: 14px;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.enc-aviso {
    margin: 0;
    font-size: 12px;
    color: var(--rojo);
    text-transform: none;
    letter-spacing: 0;
}

.enc-viva {
    border: 0;
    padding: 0;
    margin: 4px 0 0;
}

.enc-viva legend {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--suave);
    margin-bottom: 6px;
}

.enc-viva-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.enc-viva-opt {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: #fff;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    color: var(--tinta) !important;
    cursor: pointer;
}

.enc-viva-opt input {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.enc-viva-opt:has(input:checked) {
    border-color: var(--ambar);
    background: #fff8ee;
}

.enc-bandera-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.enc-bandera-btn strong {
    display: block;
    font-size: 14px;
    color: var(--tinta);
}

.enc-bandera-btn small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--suave);
}

.enc-bandera-preview {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f3f6fa;
    border: 1px solid var(--linea);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enc-bandera-preview img,
.enc-bandera-preview svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.marker-bandera.enc-mosaico .bandera {
    width: 100%;
    height: 100%;
}

.marker-bandera.enc-mosaico .bandera img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(31, 36, 48, 0.28));
}

.marker-bandera.enc-grupo .bandera path:last-child {
    fill: #2b6cb0;
}

.marker-bandera.enc-privado .bandera path:last-child {
    fill: #0f766e;
}

.label-buscar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 10px;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--suave);
    text-align: left;
}

.label-buscar input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tinta);
}

.buscar-estado {
    min-height: 1.2em;
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--suave);
    text-align: left;
}

.lista-buscar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 42vh;
    overflow-y: auto;
    margin-bottom: 12px;
    text-align: left;
}

.lista-buscar button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
    text-align: left;
    font-size: 14px;
    color: var(--tinta);
    cursor: pointer;
}

.lista-buscar button em {
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: var(--ambar);
}

.lista-buscar button span {
    font-size: 13px;
    line-height: 1.3;
}

.lista-buscar button:hover,
.lista-buscar button:focus {
    border-color: var(--ambar);
    background: #fff8ee;
}

.modal-destino {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.modal-destino .modal-salir-fondo {
    background: rgba(20, 24, 32, 0.28);
}

.modal-destino-card {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

.destino-buscar-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.destino-buscar-back {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1c1c1c;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.destino-buscar-back svg {
    width: 22px;
    height: 22px;
    display: block;
}

.destino-buscar-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 8px 6px 14px;
    background: #f1f3f4;
    border-radius: 999px;
}

.destino-buscar-pill svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #80868b;
}

.destino-buscar-pill input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: #1c1c1c;
}

.destino-buscar-pill input::placeholder {
    color: #80868b;
}

.destino-buscar-mic {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1c1c1c;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.destino-buscar-mic svg {
    width: 20px;
    height: 20px;
}

.destino-atajos {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.destino-atajo {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 22px;
    color: #202124;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.destino-atajo-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
}

.destino-atajo-ico svg {
    width: 18px;
    height: 18px;
    display: block;
}

.destino-atajo-ico.casa,
.destino-atajo-ico.trabajo {
    color: #8B5E3C;
}

.destino-atajo-ico.nuevo {
    color: #1a73e8;
}

.destino-atajo.listo {
    border-color: #e0b15a;
    background: #fff8ee;
}

.destino-atajo.guardando {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.18);
}

.destino-atajo.off {
    opacity: 0.45;
}

.destino-estrellas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 16px;
}

.destino-estrellas[hidden] {
    display: none;
}

.destino-atajo.estrella {
    flex: 1 1 calc(33.33% - 8px);
    min-width: 0;
    justify-content: flex-start;
    padding: 8px 12px;
}

.destino-atajo-ico.estrella {
    color: #d4a017;
}

.destino-atajo.estrella span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.destino-recientes h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 800;
    color: #202124;
}

.lista-recientes {
    display: flex;
    flex-direction: column;
}

.lista-recientes button {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e8eaed;
    text-align: left;
    cursor: pointer;
}

.lista-recientes button:last-child {
    border-bottom: 0;
}

.lista-recientes .reciente-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 2px;
    color: #5f6368;
}

.lista-recientes .reciente-ico svg {
    width: 22px;
    height: 22px;
    display: block;
}

.lista-recientes strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #202124;
    line-height: 1.25;
}

.lista-recientes small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #5f6368;
    line-height: 1.3;
}

.lista-recientes .vacio-recientes {
    margin: 8px 0 0;
    font-size: 13px;
    color: #80868b;
}

.modal-destino .buscar-estado {
    min-height: 0;
    margin: 0 0 8px;
}

.modal-destino .lista-buscar {
    gap: 0;
    max-height: none;
    margin-bottom: 0;
}

.modal-destino .lista-buscar button {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid #e8eaed;
    border-radius: 0;
    background: transparent;
}

.modal-destino .lista-buscar .reciente-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 2px;
    color: #5f6368;
}

.modal-destino .lista-buscar .reciente-ico svg {
    width: 22px;
    height: 22px;
    display: block;
}

.modal-destino .lista-buscar strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #202124;
    line-height: 1.25;
}

.modal-destino .lista-buscar small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #5f6368;
    line-height: 1.3;
}

.modal-destino .lista-buscar button em {
    display: none;
}

.marker-bandera,
.marker-destino {
    background: transparent !important;
    border: 0 !important;
}

.marker-bandera .bandera,
.marker-destino .pin-destino {
    width: 32px;
    height: 40px;
    filter: drop-shadow(0 2px 3px rgba(31, 36, 48, 0.35));
}

.marker-destino .pin-destino {
    width: 28px;
    height: 36px;
}

.marker-bandera svg,
.marker-destino svg {
    display: block;
    width: 100%;
    height: 100%;
}

.marker-radar {
    background: transparent !important;
    border: 0 !important;
}

.radar-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #b42318;
    box-shadow: 0 1px 4px rgba(28, 40, 60, 0.28);
    display: grid;
    place-items: center;
    transform-origin: 50% 50%;
}

.radar-num {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: #1c1c1c;
    letter-spacing: -0.3px;
}

.leaflet-tooltip.tip-radar {
    background: #1c1c1c;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.leaflet-tooltip.tip-radar::before {
    border-top-color: #1c1c1c;
}

.leaflet-popup.popup-encuentro {
    overflow: visible;
}

.leaflet-popup.popup-encuentro .leaflet-popup-content-wrapper {
    background: #fff;
    color: var(--tinta);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(28, 40, 60, 0.16);
    padding: 0;
    overflow: visible;
}

.leaflet-popup.popup-encuentro .leaflet-popup-content {
    margin: 16px 16px 14px;
    min-width: 228px;
    max-width: 280px;
    text-align: left;
    overflow: visible;
}

.leaflet-popup.popup-encuentro .leaflet-popup-tip {
    background: #fff;
}

.leaflet-popup.popup-encuentro .leaflet-popup-close-button,
.leaflet-container a.leaflet-popup-close-button {
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    padding: 0;
    color: #9aa3ad;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    text-indent: 0;
}

.popup-encuentro-cuerpo {
    padding-right: 12px;
}

.enc-fila {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
}

.enc-fila:last-of-type {
    margin-bottom: 2px;
}

.enc-fila-ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #3b4a5c;
    margin-top: 1px;
}

.enc-fila-ico svg {
    width: 22px;
    height: 22px;
    display: block;
}

.enc-fila-txt {
    min-width: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta);
}

.enc-fila.tit .enc-fila-txt {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.25px;
    color: var(--navy);
    padding-right: 18px;
}

.enc-fila.tit .enc-fila-ico {
    color: var(--navy);
}

.enc-fila.alcance .enc-fila-txt {
    font-weight: 700;
    color: var(--navy);
}

.enc-fila.vence .enc-fila-txt,
.enc-fila.nota .enc-fila-txt {
    font-weight: 500;
    color: var(--suave);
}

.enc-fila.horario .enc-fila-txt {
    color: var(--ambar);
    font-weight: 700;
}

.popup-encuentro-cuerpo h4,
.popup-encuentro-cuerpo p {
    margin: 0;
}

.enc-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 2px;
    border-top: 0;
}

.enc-toolbar .enc-ico {
    position: relative;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #e4e8ee;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
}

.enc-toolbar .enc-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}

.enc-toolbar .enc-ico:hover,
.enc-toolbar .enc-ico:focus {
    background: #f3f6fa;
    outline: none;
}

.enc-toolbar .enc-ico.btn-ir-punto {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.enc-toolbar .enc-ico.btn-ir-punto:hover,
.enc-toolbar .enc-ico.btn-ir-punto:focus {
    background: #163a61;
}

.enc-toolbar .enc-ico.btn-voy-enc.on {
    background: var(--ambar);
    border-color: var(--ambar);
    color: #fff;
}

.enc-toolbar .enc-ico.btn-voy-enc.on:hover,
.enc-toolbar .enc-ico.btn-voy-enc.on:focus {
    background: #e09514;
}

.enc-toolbar .enc-ico.btn-share-enc {
    color: #128c7e;
}

.enc-toolbar .enc-ico.btn-share-enc:hover,
.enc-toolbar .enc-ico.btn-share-enc:focus {
    background: #e8f6f3;
    border-color: #b7e0d8;
    color: #0e6e62;
}

.enc-toolbar .enc-ico.btn-quitar-enc {
    color: #5f6974;
}

.enc-toolbar .enc-ico.btn-quitar-enc:hover,
.enc-toolbar .enc-ico.btn-quitar-enc:focus {
    background: #f6ecec;
    border-color: #e8d4d4;
    color: #a33a32;
}

.enc-ico-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
}

.enc-toolbar .enc-ico.btn-voy-enc.on .enc-ico-badge {
    background: #1c1c1c;
}

.enc-toolbar .enc-ico[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    padding: 5px 8px;
    border-radius: 8px;
    background: #1c2430;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(28, 40, 60, 0.18);
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 2;
}

.enc-toolbar .enc-ico:hover::after,
.enc-toolbar .enc-ico:focus::after,
.enc-toolbar .enc-ico:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cartel-llegaste {
    position: fixed;
    inset: 0;
    z-index: 3500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 240, 230, 0.55);
    padding: 20px;
    cursor: pointer;
}

.cartel-llegaste .placa {
    background: #1e4b7b;
    color: #fffcf7;
    border: 5px solid #fffcf7;
    box-shadow: 0 16px 40px rgba(40, 30, 10, 0.28);
    padding: 28px 40px;
    min-width: min(260px, 84vw);
    text-align: center;
}

.cartel-llegaste strong {
    display: block;
    font-size: 34px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ================= RADIO UI (mockup) ================= */

.comms-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: min(78vh, 680px);
    max-height: calc(100% - 24px);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(28, 40, 60, 0.12);
    padding-bottom: 0;
}

.comms-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comms-torre {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #ece8e3;
    color: #8d5a32;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
}

.comms-torre svg {
    width: 22px;
    height: 22px;
}

.comms-header {
    align-items: center;
    padding: 10px 14px 8px;
    gap: 8px;
}

.comms-header h2 {
    font-size: 18px;
    letter-spacing: 1px;
}

.comms-header p {
    display: flex;
    align-items: center;
    margin-top: 2px;
    font-size: 12px;
    color: var(--suave);
}

.comms-alcance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 8px 4px 8px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--suave);
    font-size: 11px;
    font-weight: 700;
}

.comms-alcance svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--ambar);
}

.comms-alcance .select-radio {
    width: auto;
    margin: 0;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--tinta);
}

.btn-ico-grupo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e8f1fb;
    color: var(--azul);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
}

.btn-ico-grupo svg {
    width: 18px;
    height: 18px;
}

.btn-cerrar-comms {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #ececec;
    box-shadow: none;
    color: var(--suave);
    justify-content: center;
}

.btn-cerrar-comms span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.btn-cerrar-comms svg {
    width: 16px;
    height: 16px;
}

.chat-tabs {
    display: flex;
    gap: 8px;
    padding: 0 14px 10px;
    border-bottom: 0;
}

.tab {
    flex: 1;
    background: transparent;
    color: var(--suave);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 8px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.tab.activa {
    background: transparent;
    color: var(--tinta);
    border-bottom-color: #8d5a32;
    font-weight: 700;
}

.tab[data-tab="privado"].activa {
    background: transparent;
    color: var(--tinta);
}

.tab[data-tab="grupo"].activa {
    background: transparent;
    color: var(--tinta);
}

.comms-cuerpo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.comms-canal {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.comms-canal.oculto {
    display: none !important;
}

.btn-ir-grupos {
    margin: 8px 14px 4px;
    width: calc(100% - 28px);
}

.comms-contactos {
    flex: 1 1 auto;
    border-bottom: 0;
    overflow-y: auto;
}

.comms-chat {
    flex: 1 1 auto;
    min-height: 0;
}

.seccion-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 6px;
}

.seccion-cabeza h3 {
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--suave);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.seccion-cabeza h3 svg {
    width: 14px;
    height: 14px;
}

.btn-crear-grupo {
    background: transparent;
    color: var(--azul);
    border: 1px solid #c5d8ee;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
}

.caja-grupo {
    margin: 0 14px 8px;
    padding: 10px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    border-bottom: 1px solid var(--linea);
    background: #fafbfc;
}

.lista-grupos {
    padding: 0 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grupo-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 16px;
}

.grupo-item.activo {
    border-color: #b9d4f0;
    background: #f3f8fd;
}

.btn-en-ruta {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid #c5d8ee;
    border-radius: 999px;
    background: #fff;
    color: var(--suave);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.btn-en-ruta.on {
    background: #e9f8ef;
    border-color: #86efac;
    color: #15803d;
}

.btn-ficha.silenciado,
.contacto.silenciado {
    opacity: 0.55;
}

.grupo-ico {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.grupo-ico svg {
    width: 18px;
    height: 18px;
}

.ico-azul {
    background: #e8f1fb;
    color: var(--azul);
}

.ico-fantasma {
    background: #1a1a1a;
    color: #f5f5f5;
}

.ico-ambar {
    background: #fff4d6;
    color: var(--ambar);
}

.ico-verde {
    background: #e9f8ef;
    color: #15803d;
}

.grupo-meta {
    flex: 1;
    min-width: 0;
}

.grupo-meta strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.grupo-meta small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--suave);
}

.grupo-alcance .select-radio {
    width: auto;
    margin: 0;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 11px;
}

.btn-grupo-speaker {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 0;
    border-radius: 10px;
    background: var(--azul);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.btn-grupo-speaker svg {
    width: 16px;
    height: 16px;
}

.btn-grupo-speaker.grabando {
    background: var(--rojo);
}

.leyenda-cerca {
    padding: 0 14px;
    margin: 0 0 4px;
    font-size: 11px;
    color: var(--azul);
}

.lista-contactos {
    padding: 4px 12px 12px;
}

.contacto {
    border-radius: 16px;
    border: 1px solid var(--linea);
    padding: 10px 12px;
}

.contacto.activo {
    border-color: #b9d4f0;
    background: #f3f8fd;
}

.contacto .dist {
    display: none;
}

.btn-icon-lista {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 0;
    border-radius: 10px;
    background: #e8f1fb;
    color: var(--azul);
}

.btn-icon-lista em {
    display: none;
}

.destino-chat {
    border-radius: 12px;
    border: 0;
}

.chat-panel {
    padding: 8px 12px 10px;
}

.chat-composer {
    gap: 6px;
}

.btn-enviar {
    background: var(--azul) !important;
    min-width: 72px;
    border-radius: 12px;
}

.ptt-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 8px;
    padding: 8px 10px 8px 8px;
    background: #dcfce7;
    border-radius: 18px;
}

.btn-ptt-barra {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: #166534;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px !important;
    text-align: left;
}

.btn-ptt-barra.oculto {
    display: none !important;
}

.ptt-mic {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.ptt-mic svg {
    width: 22px;
    height: 22px;
}

.ptt-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.ptt-txt strong {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ptt-txt small {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
}

.ptt-vol {
    width: 28px;
    height: 28px;
    color: #166534;
    display: grid;
    place-items: center;
}

.ptt-vol svg {
    width: 18px;
    height: 18px;
}

.btn-ptt-barra.grabando,
.ptt-barra:has(.grabando) {
    background: #fee2e2;
}

.btn-ptt-barra.grabando {
    color: #991b1b;
}

.btn-ptt-barra.grabando .ptt-mic {
    background: var(--rojo);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.dock-radio {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 4px;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--linea);
    background: #fff;
}

.dock-radio .dock-item {
    position: relative;
    flex: 1;
    min-width: 0;
    color: var(--suave);
    border-radius: 14px;
    padding: 6px 4px;
}

.dock-radio .dock-item.on {
    color: var(--violeta);
    background: #f3eefc;
}

.dock-radio .dock-ayuda {
    color: var(--rojo);
}

.dock-radio .dock-ayuda.on,
.dock-radio .dock-ayuda.activo {
    background: #fee2e2;
    color: var(--rojo);
}

.dock-radio .dock-fantasma.activo {
    background: #e8eef5;
    color: #24384c;
}

.badge-dock {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--rojo);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
}

/* ================= RADIO ASIDE (minimal) ================= */

.comms-panel {
    --radio-naranja: #8d5a32;
    --radio-naranja-suave: #f3eee8;
    --radio-gris: #ececec;
    --radio-tinta: #2a2a2a;
    background: #f4f4f4;
}

.comms-panel .comms-torre {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #ece8e3;
    color: var(--radio-naranja);
    box-shadow: none;
}

.comms-panel .comms-header h2 {
    letter-spacing: 1.2px;
    color: var(--radio-tinta);
    font-size: 15px;
}

.comms-panel .chat-tabs {
    align-items: stretch;
    gap: 6px;
    padding: 4px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    flex: 0 0 auto;
}

.comms-panel .tab,
.comms-panel .tab-mapa {
    position: relative;
    flex: 1;
    min-width: 0;
    background: #f3f4f6;
    color: #4b5563;
    border: 0;
    border-bottom: 0;
    border-radius: 14px;
    padding: 8px 4px 7px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-transform: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.comms-panel .tab svg,
.comms-panel .tab-mapa svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.comms-panel .tab[data-tab="general"] {
    background: #fff6e8;
    color: #9a6700;
}

.comms-panel .tab[data-tab="privado"] {
    background: #ecfdf3;
    color: #15803d;
}

.comms-panel .tab[data-tab="grupo"] {
    background: #eaf3fb;
    color: #1e4b7b;
}

.comms-panel .tab[data-tab="fantasma"] {
    background: #eef0f2;
    color: #4b5563;
}

.comms-panel .tab.activa {
    box-shadow: inset 0 0 0 1.5px currentColor;
    font-weight: 800;
}

.comms-panel .tab[data-tab="general"].activa {
    background: #ffe8c4;
    color: #8a5a00;
}

.comms-panel .tab[data-tab="privado"].activa {
    background: #dcfce7;
    color: #166534;
}

.comms-panel .tab[data-tab="grupo"].activa {
    background: #d7e8f7;
    color: #1e4b7b;
}

.comms-panel .tab[data-tab="fantasma"].activa {
    background: #e5e7eb;
    color: #1f2937;
}

.comms-panel .tab .badge {
    position: absolute;
    top: 4px;
    right: 6px;
    margin-left: 0;
    background: #8d5a32;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    line-height: 16px;
    font-size: 9px;
    font-weight: 700;
}

.comms-panel .tab.activa .badge {
    background: #8d5a32;
}

.comms-panel .tab-txt strong {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.comms-panel .tab-txt small {
    display: none;
}

.comms-panel .tab-mapa.on {
    background: transparent;
    color: #5a5a5a;
}

.radio-ptt-bloque {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 14px 8px;
    flex: 0 0 auto;
    margin-top: auto;
}

.btn-ptt-panel {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border: 0;
    border-radius: 50%;
    background: var(--ambar);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(245, 166, 35, 0.32);
    z-index: 1;
}

.btn-ptt-panel .ptt-anillos {
    display: none;
}

.btn-ptt-panel .ico {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
}

.btn-ptt-panel .ico svg {
    width: 34px;
    height: 34px;
}

.btn-ptt-panel.ptt-canal-privado {
    background: var(--verde);
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.28);
}

.btn-ptt-panel.ptt-canal-grupo,
.btn-ptt-panel.ptt-canal-encuentro {
    background: var(--celeste);
    box-shadow: 0 10px 24px rgba(43, 108, 176, 0.28);
}

.btn-ptt-panel.ptt-canal-fantasma {
    background: #6b7280;
    color: #fff;
    box-shadow: 0 10px 24px rgba(107, 114, 128, 0.28);
    filter: none;
}

.btn-ptt-panel.grabando {
    background: #8a2e2e;
    border-color: #8a2e2e;
    box-shadow: none;
}

.ptt-instruccion {
    margin: 0;
    text-align: center;
    flex: 0 0 auto;
    min-width: 0;
}

.ptt-instruccion strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--tinta);
}

.ptt-instruccion small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--suave);
}

.radio-escucha {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: #efece8;
    border-radius: 4px;
    color: #6a5a4a;
    font-size: 11px;
    font-weight: 600;
}

.radio-escucha.hablando,
.radio-escucha.grabando {
    background: #ece6df;
}

.radio-escucha-izq,
.radio-escucha-der {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.radio-escucha-izq span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.punto-naranja {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8d5a32;
    flex: 0 0 6px;
    box-shadow: none;
}

.radio-escucha-der svg {
    width: 14px;
    height: 14px;
}

.radio-vu {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.radio-vu i {
    display: block;
    width: 2px;
    border-radius: 0;
    background: #8d5a32;
    opacity: 0.45;
}

.radio-vu i:nth-child(1) { height: 4px; }
.radio-vu i:nth-child(2) { height: 7px; opacity: 0.7; }
.radio-vu i:nth-child(3) { height: 11px; opacity: 1; }
.radio-vu i:nth-child(4) { height: 6px; opacity: 0.55; }

.radio-escucha.hablando .radio-vu i,
.btn-ptt-panel.grabando ~ .radio-escucha .radio-vu i,
.radio-ptt-bloque:has(.grabando) .radio-vu i {
    animation: radio-vu 0.7s ease-in-out infinite;
}

.radio-ptt-bloque:has(.grabando) .radio-vu i:nth-child(2) { animation-delay: 0.1s; }
.radio-ptt-bloque:has(.grabando) .radio-vu i:nth-child(3) { animation-delay: 0.2s; }
.radio-ptt-bloque:has(.grabando) .radio-vu i:nth-child(4) { animation-delay: 0.15s; }

@keyframes radio-vu {
    0%, 100% { transform: scaleY(0.55); }
    50% { transform: scaleY(1); }
}

.comms-panel .destino-chat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f7f5f2;
    border: 1px solid #e6e1db;
    border-radius: 4px;
}

.comms-panel .destino-ico {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 4px;
    background: #fff;
    color: var(--radio-naranja);
    display: grid;
    place-items: center;
}

.comms-panel .destino-ico svg {
    width: 16px;
    height: 16px;
}

.comms-panel .destino-txt {
    flex: 1;
    min-width: 0;
}

.comms-panel .destino-txt span,
.comms-panel .destino-chat > span:not(.destino-ico):not(.destino-txt):not(.destino-count) {
    display: block;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--suave);
}

.comms-panel .destino-txt strong,
.comms-panel .destino-txt small {
    display: block;
}

.comms-panel .destino-txt strong {
    margin-top: 0;
    font-size: 13px;
    color: var(--radio-tinta);
}

.comms-panel .destino-txt small {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--suave);
}

.comms-panel .destino-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--radio-naranja);
    flex: 0 0 auto;
}

.comms-panel .destino-count svg {
    width: 16px;
    height: 16px;
}

.comms-panel .destino-count em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

.comms-panel .destino-directo {
    background: #f4f6f8;
}

.comms-panel .destino-directo .destino-ico {
    color: var(--azul);
}

.comms-panel .destino-fantasma {
    background: #f0f0f0;
}

.comms-panel .destino-fantasma .destino-ico {
    background: #2a2a2a;
    color: #f5f5f5;
    border-radius: 4px;
}

.fg-sala {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.fg-cabeza {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e6e1db;
    border-radius: 4px;
}

.fg-ico {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    background: #2a2a2a;
    color: #f5f5f5;
    border-radius: 4px;
}

.fg-ico svg {
    width: 20px;
    height: 20px;
}

.fg-cabeza-txt {
    flex: 1;
    min-width: 0;
}

.fg-cabeza-txt strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--radio-tinta, var(--tinta));
}

.fg-cabeza-txt small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--suave);
}

.fg-estado {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ececec;
    color: #5b5b5b;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.fg-estado.on {
    background: #2a2a2a;
    color: #fff;
}

.fg-estado.ver {
    background: #1e4b7b;
    color: #fff;
}

.fg-hechos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fg-hechos.oculto,
.fg-pasos.oculto,
.fg-link.oculto {
    display: none !important;
}

.fg-hechos li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: #fff;
    border: 1px solid #e6e1db;
    border-radius: 4px;
    color: var(--tinta);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.fg-mini {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #1e4b7b;
}

.fg-mini svg {
    width: 18px;
    height: 18px;
}

.fg-pasos {
    padding: 10px;
    background: #fff;
    border: 1px solid #e6e1db;
    border-radius: 4px;
}

.fg-vacio .fg-pasos {
    display: block;
}

.fg-host .fg-pasos,
.fg-invitado .fg-pasos,
.fg-pasos.oculto {
    display: none;
}

.fg-pasos-tit {
    margin: 0 0 8px;
    color: var(--suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.fg-pasos ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.fg-pasos li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.fg-paso-ico {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: #f4f4f4;
    color: #1e4b7b;
    border-radius: 4px;
}

.fg-paso-ico svg {
    width: 18px;
    height: 18px;
}

.fg-pasos li strong {
    font-size: 11px;
    color: var(--tinta);
}

.fg-pasos li span:last-child {
    font-size: 10px;
    color: var(--suave);
    line-height: 1.2;
}

.fg-btn-pri {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 4px;
    background: #2a2a2a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.fg-btn-pri svg {
    width: 18px;
    height: 18px;
}

.fg-btn-pri:hover,
.fg-btn-pri:focus {
    background: #1a1a1a;
    outline: none;
}

.fg-link {
    padding: 10px;
    background: #fff;
    border: 1px solid #e6e1db;
    border-radius: 4px;
}

.fg-link.oculto {
    display: none;
}

.fg-link-lab {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    color: var(--suave);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.fg-link-lab svg {
    width: 14px;
    height: 14px;
    color: #1e4b7b;
}

.fg-link-url {
    margin: 0 0 8px;
    padding: 8px;
    background: #f6f6f6;
    border-radius: 4px;
    color: var(--tinta);
    font-size: 11px;
    line-height: 1.35;
    word-break: break-all;
}

.fg-link-acc {
    display: flex;
    gap: 6px;
}

.fg-btn-copiar,
.fg-btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.fg-btn-copiar {
    border: 1px solid #2a2a2a;
    background: #fff;
    color: #2a2a2a;
}

.fg-btn-copiar.ok {
    border-color: #1f7a4d;
    background: #e9f8ef;
    color: #1f7a4d;
}

.fg-btn-wa {
    border: 0;
    background: #1f7a4d;
    color: #fff;
}

.fg-btn-copiar svg,
.fg-btn-wa svg {
    width: 16px;
    height: 16px;
}

.fg-host .fg-hechos#fgHechosHost,
.fg-invitado .fg-hechos#fgHechosInvitado {
    display: grid;
}

.fg-vacio .fg-hechos,
.fg-host .fg-hechos#fgHechosInvitado,
.fg-invitado .fg-hechos#fgHechosHost {
    display: none;
}

.comms-panel .chat-mensajes {
    flex: 1;
    min-height: 88px;
    border-radius: 4px;
    border: 1px solid #e6e1db;
    background: #fff;
}

.comms-handle { order: 0; }
.comms-header { order: 1; }
.comms-cuerpo {
    order: 2;
    flex: 1;
    min-height: 0;
}
.radio-texto { order: 3; }
.radio-ptt-bloque { order: 4; }
.comms-panel .chat-tabs { order: 5; }
.comms-panel .dock-radio { order: 6; }

.comms-panel .chat-composer {
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: #fff;
    border: 1px solid #dcd7d1;
    border-radius: 14px;
}

.radio-texto {
    flex: 0 0 auto;
    padding: 4px 14px 8px;
}

.comms-panel .radio-texto .chat-composer {
    display: none;
}

.comms-panel[data-tab="general"] .radio-texto .composer-general,
.comms-panel[data-tab="privado"] .radio-texto .composer-privado,
.comms-panel[data-tab="grupo"] .radio-texto .composer-grupo {
    display: flex;
}

.comms-panel[data-tab="fantasma"] .radio-texto {
    display: none;
}

.comms-panel .radio-texto .btn-voz {
    display: none !important;
}

.comms-panel .chat-input {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 8px 0;
    margin: 0;
}

.comms-panel .btn-voz {
    display: none !important;
}

.comms-panel .btn-enviar {
    min-width: 40px !important;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50% !important;
    background: var(--azul) !important;
    box-shadow: none;
}

#vistaPublico .destino-chat {
    display: none;
}

.comms-panel .btn-enviar svg {
    width: 16px;
    height: 16px;
}

.comms-panel .grupo-item,
.comms-panel .contacto,
.comms-panel .caja-grupo {
    border-radius: 4px;
}

.comms-panel .grupo-ico,
.comms-panel .btn-grupo-speaker,
.comms-panel .btn-crear-grupo,
.comms-panel .btn-en-ruta {
    border-radius: 4px;
}

.comms-panel .dock-radio {
    display: none !important;
}

.comms-panel .dock-radio .dock-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
    justify-content: start;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: #3a3a3a;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}

.comms-panel .dock-radio .dock-item svg {
    width: 20px;
    height: 20px;
    grid-row: 1 / span 2;
    grid-column: 1;
}

.comms-panel .dock-radio .dock-item span {
    grid-column: 2;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
}

.comms-panel .dock-radio .dock-item small {
    grid-column: 2;
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #7a7a7a;
    line-height: 1.2;
    text-align: left;
}

.comms-panel .dock-radio .dock-item.on {
    background: #f7f5f2;
    color: var(--radio-tinta);
    border-color: #c9b8a6;
}

.comms-panel .dock-radio .dock-item.on small {
    color: #7a7a7a;
}

.comms-panel .dock-radio .dock-ayuda {
    color: #3a3a3a;
}

.comms-panel .dock-radio .dock-ayuda svg {
    color: #b42318;
}

.comms-panel .dock-radio .dock-ayuda.on,
.comms-panel .dock-radio .dock-ayuda.activo {
    background: #f8eeee;
    color: #7a1f1f;
}

.comms-panel .dock-radio .dock-fantasma.activo {
    background: #f0f0f0;
    color: #1a1a1a;
}

.comms-panel .dock-radio .dock-radio-aux {
    display: none !important;
}

.comms-panel .dock-radio > .badge-dock {
    display: none !important;
}

.comms-panel .dock-radio .badge-dock {
    top: 6px;
    right: 6px;
    border-radius: 2px;
    background: #b42318;
}

.habla-mapa {
    left: 12px;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: min(260px, calc(50% - 90px));
}

.destino-habla {
    display: none;
}

.destino-habla.transmitiendo,
.destino-habla.ack-ok,
.destino-habla.ack-fail {
    display: block;
    max-width: 100%;
}

.mapa-atajos {
    position: absolute;
    right: 10px;
    bottom: 24px;
    left: auto;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.atajo-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: var(--sombra);
    color: var(--navy);
    cursor: pointer;
    position: relative;
}

.atajo-ico {
    width: 22px;
    height: 22px;
    border-radius: 0;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    background: transparent;
    color: inherit;
}

.atajo-ico svg,
.atajo-ico img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.atajo-tip {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 6px 8px;
    margin: 0;
    overflow: visible;
    clip: unset;
    clip-path: none;
    white-space: nowrap;
    border: 0;
    border-radius: 4px;
    background: #1c1c1c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.atajo-pill:hover .atajo-tip,
.atajo-pill:focus .atajo-tip,
.atajo-pill:focus-visible .atajo-tip,
.atajo-pill:active .atajo-tip {
    opacity: 1;
    visibility: visible;
}

.atajo-ico-walkie,
.atajo-ico-carrera,
.atajo-ico-sos,
.atajo-ico-fantasma {
    background: transparent;
}

.atajo-ico-walkie {
    color: var(--azul);
}

.atajo-carrera {
    color: var(--navy);
}

.atajo-ico-sos {
    color: #a33a32;
}

.atajo-sos {
    color: #a33a32;
}

.atajo-fantasma {
    color: var(--navy);
}

.atajo-sos.activo {
    background: #a33a32;
    color: #fff;
    animation: pulso-sos 1.2s ease-in-out infinite;
}

.atajo-sos.activo .atajo-ico-sos {
    color: #fff;
}

.atajo-fantasma.activo {
    background: #24384c;
    color: #fff;
}

.atajo-fantasma.activo .atajo-ico-fantasma {
    color: #fff;
}

.atajo-mas {
    color: var(--navy);
}

.atajo-mas.on {
    background: #fff6e8;
    color: var(--ambar);
}

.atajo-estacionamiento {
    color: var(--navy);
}

.atajo-estacionamiento.activo {
    background: #e8eef5;
    color: var(--navy);
}

.atajo-ico-park svg {
    width: 20px;
    height: 20px;
    display: block;
}

.badge-pill {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #a33a32;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.btn-ptt-mapa {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin: 4px 0 0;
    padding: 0;
    background: var(--azul);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(43, 108, 176, 0.45);
}

.btn-ptt-mapa .ico {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.btn-ptt-mapa .ico svg {
    width: 26px;
    height: 26px;
}

.btn-ptt-mapa .ptt-leyenda {
    display: none;
}

.btn-ptt-mapa.grabando {
    background: var(--rojo);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45);
}

.aviso-audio {
    left: 12px;
    transform: none;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.ack-walkie {
    left: 12px;
    transform: none;
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
}

.aviso-gps {
    left: 12px;
    transform: none;
    top: 78px;
    bottom: auto;
    width: min(280px, calc(100% - 80px));
}

body.modo-manejo .btn-ptt-mapa {
    width: 72px;
    height: 72px;
    min-width: 72px;
    margin-top: 4px;
}

body.modo-manejo .atajo-pill {
    width: 52px;
    height: 52px;
    min-width: 52px;
}

@media (max-width: 1023px) {
    :root {
        --dock-h: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .leaflet-popup.ficha-popup.ficha-propia .leaflet-popup-content,
    .v2v-popup-propia,
    .leaflet-popup.ficha-popup.ficha-radio .leaflet-popup-content,
    .v2v-popup-radio {
        min-width: 0;
        max-width: min(340px, calc(100vw - 24px));
    }

    .yo-grid {
        gap: 4px;
    }

    .yo-celda strong {
        font-size: 11px;
    }

    .hud-mob {
        display: none !important;
    }

    .hud-iconos {
        max-height: calc(100dvh - var(--dock-h) - 200px);
        overflow: visible;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .hud-ico {
        color: var(--navy);
    }

    .hud-ico svg,
    .hud-ico img {
        color: var(--navy);
    }

    .perfil-centrar,
    .hud-ico.perfil-centrar {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .perfil-centrar svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

    .perfil-senal svg:not(.perfil-chevron) {
        display: none;
    }

    .mapa-atajos,
    body.comms-open .mapa-atajos {
        display: none !important;
    }

    .habla-mapa #btnPttMapa {
        display: none;
    }

    .habla-mapa-pie {
        display: none;
    }

    .habla-mapa {
        left: 12px;
        right: auto;
        bottom: calc(var(--dock-h) + 88px);
        max-width: min(240px, calc(50% - 16px));
    }

    .vel-hud {
        z-index: 1180;
        left: 10px;
        bottom: calc(var(--dock-h) + 12px);
        width: 64px;
        height: 64px;
        min-width: 64px;
        padding: 4px 2px 6px;
        border-radius: 50%;
        box-shadow: 0 8px 22px rgba(28, 40, 60, 0.14);
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .vel-hud::after {
        content: none;
    }

    .vel-hud .vel-num {
        font-size: 22px;
        line-height: 0.85;
        padding-top: 0;
        transform: none;
    }

    .vel-hud .vel-uni {
        font-size: 9px;
        padding-top: 0;
        padding-bottom: 0;
        transform: none;
    }

    .barra-destino {
        left: 82px;
        right: 72px;
        bottom: calc(var(--dock-h) + 18px);
        min-height: 48px;
        padding: 8px 14px;
        font-size: 15px;
    }

    .brujula-mapa {
        right: 12px;
        left: auto;
        bottom: calc(var(--dock-h) + 14px);
    }

    .radio-cerca {
        display: flex;
        position: fixed;
        right: 10px;
        bottom: calc(var(--dock-h) + 88px);
        max-height: min(36vh, 280px);
        z-index: 1501;
        padding-bottom: 2px;
    }

    body.comms-open .radio-cerca {
        display: none;
    }

    .dock-radio {
        display: grid;
    }

    .dock-mapa {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .dock-mapa .dock-item {
        color: #8b93a0;
        min-width: 0;
        flex: 1 1 0;
    }

    /* Radio · MIC · Más (Ayuda / Carrera / Fantasma) */
    .dock-mapa #btnMapaDock {
        display: none !important;
    }
    .dock-mapa #btnRadioDock { order: 1; }
    .dock-mapa #btnPttDock {
        flex: 0 0 auto;
        order: 2;
    }

    body.comms-open .dock-mapa #btnPttDock {
        display: none !important;
    }
    .dock-mapa .dock-mas { order: 3; }

    .dock-mapa .dock-item.on {
        color: var(--ambar);
        background: #fff6e8;
        border-radius: 14px;
    }

    .dock-mapa .dock-ayuda {
        color: var(--rojo);
    }

    .dock-mas-item.dock-ayuda svg {
        color: var(--rojo);
    }

    .dock-mapa .dock-ayuda.activo {
        background: #fee2e2;
        color: var(--rojo);
    }

    .dock-mapa .dock-carrera {
        color: var(--navy);
    }

    .dock-mapa .dock-fantasma.activo {
        background: #e8eef5;
        color: #24384c;
    }

    .dock-mas {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .dock-mas > .dock-item {
        width: 100%;
    }

    .dock-mapa #btnRadioDock {
        position: relative;
    }

    .dock-mapa .btn-ptt-mapa {
        width: 64px;
        height: 64px;
        min-width: 64px;
        margin: -28px 0 4px;
        background: var(--ambar);
        border: 4px solid #fff;
        box-shadow: 0 8px 24px rgba(245, 166, 35, 0.5);
    }

    .dock-mapa #btnPttDock.ptt-canal-privado,
    #btnPttMapa.ptt-canal-privado {
        background: var(--verde);
        box-shadow: 0 8px 24px rgba(34, 197, 94, 0.5);
    }

    .dock-mapa #btnPttDock.ptt-canal-grupo,
    #btnPttMapa.ptt-canal-grupo,
    .dock-mapa #btnPttDock.ptt-canal-encuentro,
    #btnPttMapa.ptt-canal-encuentro {
        background: var(--azul);
        box-shadow: 0 8px 24px rgba(43, 108, 176, 0.5);
    }

    .dock-mapa .btn-ptt-mapa.grabando,
    .dock-mapa #btnPttDock.grabando,
    #btnPttMapa.grabando {
        background: var(--rojo);
        box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45);
    }

    .comms-panel {
        left: 0;
        right: 0;
        bottom: var(--dock-h);
        width: 100%;
        height: min(78vh, 680px);
        max-height: calc(100% - var(--dock-h) - 56px);
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -16px 40px rgba(28, 40, 60, 0.16);
    }

    .comms-handle {
        display: block;
        width: 42px;
        height: 4px;
        margin: 10px auto 0;
    }

    .chat-tabs {
        gap: 6px;
        padding: 4px 14px 12px;
    }

    .comms-panel .tab,
    .comms-panel .tab-mapa {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px 7px;
        border-radius: 14px;
        text-transform: none;
        letter-spacing: 0;
    }

    .comms-panel .tab svg,
    .comms-panel .tab-mapa svg {
        width: 22px;
        height: 22px;
    }

    .tab-txt small {
        display: none;
    }

    .dock-mapa #btnPttDock.ptt-canal-fantasma,
    #btnPttMapa.ptt-canal-fantasma {
        background: #1a1a1a;
        color: #f5f5f5;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        filter: grayscale(1);
    }

    .btn-grupo-speaker {
        border-radius: 50%;
    }

    .ptt-barra {
        background: #f3f5f7;
        margin: 0 12px 10px;
    }

    .habla-mapa {
        left: 12px;
        right: auto;
        bottom: calc(var(--dock-h) + 88px);
        max-width: min(240px, calc(50% - 16px));
    }

    body.dest-brujula .habla-mapa,
    body.park-brujula .habla-mapa {
        bottom: calc(var(--dock-h) + 168px);
    }

    body.dest-brujula .radio-cerca,
    body.park-brujula .radio-cerca {
        bottom: calc(var(--dock-h) + 88px);
    }

    .aviso-audio {
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(var(--dock-h) + 108px);
    }

    .ack-walkie {
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(var(--dock-h) + 116px);
    }

    .aviso-gps {
        top: auto;
        bottom: calc(var(--dock-h) + 108px);
        left: 50%;
        transform: translateX(-50%);
        width: min(360px, calc(100% - 24px));
    }

    body.modo-manejo .dock-mapa .btn-ptt-mapa {
        width: 72px;
        height: 72px;
        min-width: 72px;
        margin-top: -32px;
    }
}

/* ================= CARRERA ================= */

.carrera-hud-sel {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 2600;
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px 14px 14px;
    background: #fff;
    border-radius: 22px;
    box-shadow: var(--sombra);
    max-width: 720px;
}

.carrera-hud-ico {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff6e8;
    color: var(--ambar);
    display: grid;
    place-items: center;
    align-self: flex-start;
    margin-top: 2px;
}

.carrera-hud-ico svg {
    display: none;
    width: 22px;
    height: 22px;
}

.carrera-hud-sel[data-fase="eligiendo_a"] .ico-salida,
.carrera-hud-sel[data-fase="eligiendo_b"] .ico-meta,
.carrera-hud-sel[data-fase="listo"] .ico-listo,
.carrera-hud-sel[data-fase="esperando"] .ico-listo {
    display: block;
}

.carrera-hud-sel[data-fase="armando"] .ico-armando {
    display: block;
    animation: carrera-giro 0.9s linear infinite;
}

@keyframes carrera-giro {
    to { transform: rotate(360deg); }
}

.carrera-hud-deco {
    flex: 0 0 88px;
    width: 88px;
    align-self: center;
    opacity: 0.92;
}

.carrera-hud-deco svg {
    width: 88px;
    height: 72px;
    display: block;
}

.carrera-hud-sel.oculto,
.carrera-vel.oculto,
.carrera-pedales.oculto,
.carrera-cortina.oculto,
.carrera-meta.oculto,
.carrera-salir.oculto,
.carrera-ptt.oculto,
.carrera-rivales.oculto {
    display: none !important;
}

.carrera-hud-sel-txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.carrera-hud-sel-txt strong {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--tinta);
}

.carrera-hud-sel-txt span {
    font-size: 13px;
    color: var(--suave);
    line-height: 1.35;
}

.carrera-hud-sel-txt em {
    font-size: 13px;
    font-style: normal;
    color: #b45309;
    font-weight: 700;
}

.carrera-hud-sel-acc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.carrera-btn-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--ambar);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(245, 166, 35, 0.32);
}

.carrera-btn-pri svg,
.carrera-btn-sec svg {
    width: 14px;
    height: 14px;
    display: block;
}

.carrera-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    background: #fff;
    color: var(--ambar);
    border: 1.5px solid var(--ambar);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
}

.carrera-btn-txt {
    padding: 8px 4px;
    background: transparent;
    border: 0;
    color: var(--suave);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 640px) {
    .carrera-hud-deco {
        display: none;
    }

    .carrera-hud-sel {
        max-width: none;
        padding: 12px;
        gap: 10px;
    }

    .carrera-hud-sel-txt strong {
        font-size: 16px;
    }
}

.carrera-rivales {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(32vh, 220px);
    overflow-y: auto;
}

.carrera-rival {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #f4f1ea;
    border: 0;
    border-radius: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--tinta);
}

.carrera-rival strong {
    display: block;
    font-size: 13px;
}

.carrera-rival small {
    display: block;
    font-size: 11px;
    color: var(--suave);
}

.carrera-rival em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: var(--ambar);
}

.carrera-rivales-vacio {
    margin: 0;
    font-size: 12px;
    color: var(--suave);
}

.carrera-btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 4px 0 2px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: #1fad5b;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(31, 173, 91, 0.28);
}

.carrera-btn-wa svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.carrera-btn-wa:active {
    transform: translateY(1px);
}

.carrera-btn-wa.oculto {
    display: none;
}

.carrera-pin span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ambar);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(40, 30, 10, 0.25);
}

.carrera-pin.meta {
    background: transparent;
}

.carrera-pin.meta .carrera-bandera {
    display: block;
    width: 34px;
    height: 42px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.carrera-pin.meta .carrera-bandera svg {
    width: 34px;
    height: 42px;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(20, 20, 20, 0.35));
}

.carrera-pin.leaflet-div-icon,
.carrera-choque.leaflet-div-icon {
    background: transparent;
    border: 0;
}

.carrera-choque img {
    display: block;
    pointer-events: none;
}

.carrera-explosion img {
    width: 72px;
    height: 72px;
    mix-blend-mode: screen;
}

.carrera-mecanico img {
    width: 80px;
    height: 80px;
    mix-blend-mode: normal;
}

.carrera-vel {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 18px 8px;
    background: rgba(18, 18, 18, 0.78);
    color: #fff;
    border-radius: 16px;
    pointer-events: none;
}

.carrera-vel-fila {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.carrera-vel-fila > strong {
    font-size: 56px;
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.carrera-vel-fila > span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.8;
}

.carrera-curva-aviso {
    margin: 2px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 120px;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: #fde68a;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.carrera-curva-txt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    opacity: 0.92;
}

.carrera-curva-num {
    display: block;
    margin: -2px 0 0;
    font-size: 52px;
    line-height: 0.88;
    font-weight: 900;
    letter-spacing: -1.5px;
    font-variant-numeric: tabular-nums;
    color: #ffe14a;
    text-shadow:
        0 0 2px #000,
        0 2px 0 #111,
        0 0 16px rgba(255, 210, 40, 0.9),
        0 4px 10px rgba(0, 0, 0, 0.65);
}

.carrera-curva-un {
    margin-top: -2px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffe14a;
    opacity: 0.95;
}

.carrera-curva-aviso.ahora .carrera-curva-num,
.carrera-curva-aviso.ahora .carrera-curva-un {
    color: #fecaca;
    text-shadow:
        0 0 2px #000,
        0 2px 0 #111,
        0 0 16px rgba(220, 38, 38, 0.95),
        0 4px 10px rgba(0, 0, 0, 0.65);
}

.carrera-vel.choque {
    background: rgba(127, 29, 29, 0.72);
}

.carrera-vel.choque .carrera-vel-fila > strong,
.carrera-vel.choque .carrera-vel-fila > span {
    color: #f5b4b4;
}

.carrera-curva-aviso.oculto {
    display: none;
}

.carrera-salir {
    position: absolute;
    top: 18px;
    left: 14px;
    z-index: 2610;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--sombra);
}

.carrera-ptt.btn-ptt-mapa {
    position: absolute;
    top: 18px;
    right: 14px;
    left: auto;
    z-index: 2610;
    width: 72px;
    height: 72px;
    min-width: 72px;
    margin: 0;
    padding: 0;
    background: var(--ambar);
    color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(245, 166, 35, 0.5);
    flex-direction: column;
    gap: 0;
}

.carrera-ptt.btn-ptt-mapa .ico {
    width: auto;
    height: auto;
}

.carrera-ptt.btn-ptt-mapa .ico svg {
    width: 26px;
    height: 26px;
}

.carrera-ptt.btn-ptt-mapa small {
    display: block;
    margin-top: -1px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.carrera-ptt.btn-ptt-mapa.grabando {
    background: var(--rojo);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45);
}

body.modo-manejo .carrera-ptt.btn-ptt-mapa,
body.modo-carrera .carrera-ptt.btn-ptt-mapa,
body.modo-carrera-setup .carrera-ptt.btn-ptt-mapa {
    width: 72px;
    height: 72px;
    min-width: 72px;
    margin: 0;
    top: 18px;
    right: 14px;
}

body.modo-carrera .aviso-audio,
body.modo-carrera-setup .aviso-audio {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    z-index: 2700;
    background: rgba(18, 18, 18, 0.86);
    color: #fff;
}

body.modo-carrera .ack-walkie,
body.modo-carrera-setup .ack-walkie {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(176px + env(safe-area-inset-bottom, 0px));
    z-index: 2700;
}

.carrera-pedales {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 2600;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 48px;
    pointer-events: none;
}

.carrera-pedal {
    pointer-events: auto;
    width: 92px;
    height: 92px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.carrera-pedal svg {
    width: 34px;
    height: 34px;
}

.carrera-pedal small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.carrera-pedal.freno {
    background: #7f1d1d;
    box-shadow: 0 10px 24px rgba(127, 29, 29, 0.4);
}

.carrera-pedal.acel {
    background: var(--ambar);
    box-shadow: 0 10px 24px rgba(245, 166, 35, 0.5);
}

.carrera-pedal.on {
    transform: scale(0.94);
    filter: brightness(1.08);
}

.carrera-cortina {
    position: absolute;
    inset: 0;
    z-index: 8000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(18, 16, 12, 0.88);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.carrera-cortina.on {
    opacity: 1;
    pointer-events: auto;
}

.carrera-cortina p {
    margin: 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--ambar);
    font-weight: 700;
}

.carrera-cortina h1 {
    margin: 8px 0 0;
    font-size: clamp(42px, 12vw, 84px);
    letter-spacing: 6px;
    font-weight: 800;
}

.carrera-cortina.cuenta h1 {
    font-size: clamp(72px, 22vw, 140px);
    letter-spacing: 2px;
    color: var(--ambar);
}

.carrera-meta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2700;
    width: min(340px, calc(100% - 32px));
    padding: 22px 20px 18px;
    background: #fff;
    border-radius: var(--radio);
    box-shadow: 0 16px 40px rgba(40, 30, 10, 0.18);
    text-align: center;
}

.carrera-meta.choque {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 16px 40px rgba(40, 30, 10, 0.12);
}

.carrera-meta.choque-fatal {
    background: rgba(255, 255, 255, 0.78);
}

.carrera-meta h2 {
    margin: 0;
    font-size: 32px;
}

.carrera-meta p {
    margin: 6px 0 4px;
    color: var(--suave);
}

.carrera-meta strong {
    display: block;
    margin: 8px 0 16px;
    font-size: 22px;
}

.carrera-meta.choque:not(.choque-fatal) .btn-portada {
    display: none;
}

body.modo-carrera-setup .habla-mapa,
body.modo-carrera-setup .hud-card,
body.modo-carrera-setup .hud-acciones,
body.modo-carrera-setup .mapa-atajos,
body.modo-carrera-setup .dock-mapa,
body.modo-carrera-setup .brujula-mapa,
body.modo-carrera-setup .vel-hud,
body.modo-carrera-setup .barra-destino,
body.modo-carrera .habla-mapa,
body.modo-carrera .hud-card,
body.modo-carrera .hud-acciones,
body.modo-carrera .mapa-atajos,
body.modo-carrera .dock-mapa,
body.modo-carrera .brujula-mapa,
body.modo-carrera .vel-hud,
body.modo-carrera .barra-destino,
body.modo-carrera .comms-panel,
body.modo-carrera .radio-cerca,
body.modo-carrera .aviso-gps,
body.modo-carrera .marker-otro:not(.marker-carrera-rival),
body.modo-carrera .marker-bandera,
body.modo-carrera .marker-radar,
body.modo-carrera .ficha,
body.modo-carrera .nombre-conductor,
body.modo-carrera .ficha-popup {
    display: none !important;
}

body.modo-carrera .leaflet-control-attribution {
    display: none;
}

/* ================= Compartir Fantasma ================= */

.fantasma-banner {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2800;
    width: min(440px, calc(100% - 20px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    background: rgba(36, 56, 76, 0.94);
    color: #f7fafc;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(28, 40, 55, 0.28);
    pointer-events: auto;
}

.fantasma-banner.oculto {
    display: none;
}

.fantasma-banner.error {
    background: rgba(54, 42, 42, 0.94);
}

.fantasma-banner.pausa {
    background: rgba(48, 52, 44, 0.94);
}

.fantasma-banner.pausa .fantasma-banner-ico {
    background: rgba(232, 196, 96, 0.2);
    color: #f0d27a;
}

body.fantasma-pausa .marker-fantasma-vivo,
body.fantasma-pausa .fantasma-halo,
body.fantasma-pausa .fantasma-cuerpo {
    opacity: 0.55;
}

.fantasma-banner-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #d7e6f4;
}

.fantasma-banner-ico svg {
    width: 22px;
    height: 22px;
}

.fantasma-banner-txt {
    flex: 1;
    min-width: 0;
}

.fantasma-banner-txt strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.fantasma-banner-txt em {
    font-style: normal;
    color: #c5d8ea;
}

.fantasma-banner-txt small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(247, 250, 252, 0.72);
}

#btnFantasmaSalir {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#btnFantasmaSalir:hover {
    background: rgba(255, 255, 255, 0.22);
}

.leaflet-div-icon.marker-fantasma-vivo,
.leaflet-div-icon.marker-fantasma-eco {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

.marker-fantasma-vivo {
    overflow: visible !important;
}

.fantasma-rot {
    position: relative;
    width: 44px;
    height: 52px;
    transform-origin: 50% 58%;
    will-change: transform;
}

.marker-fantasma-vivo .auto-rot {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    overflow: visible;
    filter: drop-shadow(0 2px 6px rgba(20, 32, 48, 0.45));
}

.fantasma-auto {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fantasma-auto-svg {
    position: absolute;
    inset: 2px;
    width: 40px;
    height: 40px;
    z-index: 0;
    filter: drop-shadow(0 2px 4px rgba(20, 32, 48, 0.4));
}

.marker-fantasma-vivo .fantasma-auto img.auto-cuerpo,
.marker-fantasma-vivo .fantasma-auto .auto-cuerpo {
    position: relative;
    z-index: 2;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    display: block;
    object-fit: contain;
    background: none;
}

.fantasma-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: 50%;
    border: 2px solid rgba(245, 166, 35, 0.95);
    background: radial-gradient(circle, rgba(245, 166, 35, 0.38) 0%, rgba(30, 75, 123, 0.08) 58%, transparent 72%);
    box-shadow: 0 0 18px rgba(245, 166, 35, 0.55);
    animation: fantasma-pulso 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.fantasma-etiqueta {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translate(-50%, -100%);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 999px;
    background: #1e4b7b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 4px 14px rgba(28, 40, 55, 0.32);
    pointer-events: none;
    z-index: 3;
}

.fantasma-cuerpo {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 22px;
    height: 34px;
    margin-left: -11px;
    background: linear-gradient(180deg, #5a8ab8 0%, #1e4b7b 100%);
    border: 2px solid #fff;
    box-shadow: 0 0 18px rgba(30, 75, 123, 0.45), inset 0 1px 8px rgba(255, 255, 255, 0.25);
    clip-path: polygon(14% 0, 86% 0, 100% 26%, 100% 76%, 84% 100%, 66% 86%, 50% 100%, 34% 86%, 16% 100%, 0 76%, 0 26%);
}

.fantasma-cuerpo::before,
.fantasma-cuerpo::after {
    content: "";
    position: absolute;
    top: 11px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
}

.fantasma-cuerpo::before {
    left: 5px;
}

.fantasma-cuerpo::after {
    right: 5px;
}

.fantasma-eco {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(143, 180, 212, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 8px rgba(30, 75, 123, 0.18);
}

.eco-0 .fantasma-eco {
    opacity: 0.5;
    transform: scale(0.92);
}

.eco-1 .fantasma-eco {
    opacity: 0.3;
    transform: scale(0.72);
}

.eco-2 .fantasma-eco {
    opacity: 0.16;
    transform: scale(0.52);
}

@keyframes fantasma-pulso {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.28); opacity: 0.35; }
}

body.modo-fantasma-invitado #portada {
    display: none !important;
}

body.modo-fantasma-invitado .hud-top {
    top: 72px;
    opacity: 0.42;
    filter: grayscale(0.55);
    pointer-events: none;
    user-select: none;
}

body.modo-fantasma-invitado .habla-mapa {
    pointer-events: auto;
    user-select: none;
}

body.modo-fantasma-invitado .mapa-atajos .atajo-pill {
    opacity: 0.42;
    filter: grayscale(0.55);
    pointer-events: none !important;
}

body.modo-fantasma-invitado .dock-mapa {
    pointer-events: auto;
    user-select: none;
}

body.modo-fantasma-invitado .dock-mapa .dock-item {
    opacity: 0.42;
    filter: grayscale(0.55);
    pointer-events: none !important;
}

body.modo-fantasma-invitado .barra-destino {
    display: none !important;
}

body.modo-fantasma-invitado .radio-cerca,
body.modo-fantasma-invitado .aviso-gps,
body.modo-fantasma-invitado .carrera-hud-sel,
body.modo-fantasma-invitado .carrera-ptt {
    opacity: 0.42;
    filter: grayscale(0.55);
    pointer-events: none !important;
    user-select: none;
}

body.modo-fantasma-invitado .comms-panel {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

body.modo-fantasma-invitado .comms-panel .chat-tabs .tab:not([data-tab="fantasma"]),
body.modo-fantasma-invitado .comms-panel .chat-tabs .tab-mapa,
body.modo-fantasma-invitado .comms-panel .dock-radio,
body.modo-fantasma-invitado #vistaPublico,
body.modo-fantasma-invitado #vistaPrivado,
body.modo-fantasma-invitado #vistaGrupo {
    display: none !important;
}

body.modo-fantasma-invitado .mapa-atajos #btnToggleComms,
body.modo-fantasma-invitado #btnToggleComms,
body.modo-fantasma-invitado .dock-mapa #btnRadioDock,
body.modo-fantasma-invitado #btnRadioDock {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

body.modo-fantasma-invitado #btnPttMapa,
body.modo-fantasma-invitado #btnPttDock,
body.modo-fantasma-invitado #btnPttPanel {
    opacity: 1 !important;
    filter: grayscale(1) !important;
    pointer-events: auto !important;
    user-select: auto;
    background: #1a1a1a !important;
    color: #f5f5f5 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
}

body.modo-fantasma-invitado #btnPttMapa.grabando,
body.modo-fantasma-invitado #btnPttDock.grabando,
body.modo-fantasma-invitado #btnPttPanel.grabando {
    background: var(--rojo) !important;
    filter: none !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45) !important;
}

body.modo-fantasma-invitado .leaflet-container {
    cursor: default;
}

body.modo-fantasma-invitado .leaflet-marker-pane,
body.modo-fantasma-invitado .leaflet-overlay-pane {
    overflow: visible;
}

body.modo-fantasma-invitado .marker-propio {
    display: none !important;
}

body.modo-fantasma-invitado .fantasma-banner,
body.modo-fantasma-invitado .fantasma-banner *,
body.modo-fantasma-invitado #avisoAudio,
body.modo-fantasma-invitado #ackWalkie {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

/* ================= ESTACIONAMIENTO ================= */

.dock-mas-menu {
    position: fixed;
    min-width: 188px;
    max-height: min(70vh, calc(100vh - 96px));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(28, 40, 60, 0.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2700;
}

.dock-mas-menu.oculto {
    display: none;
}

.dock-mas-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tinta);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.dock-mas-item svg,
.dock-mas-item img {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex: 0 0 22px;
    color: var(--navy);
    object-fit: contain;
    display: block;
    overflow: visible;
}

.dock-mas-item:hover,
.dock-mas-item:focus {
    background: #f3f6fa;
    outline: none;
}

.dock-mas-item.activo {
    background: #e8eef5;
}

.dock-mas-sep {
    height: 1px;
    margin: 4px 10px;
    border: 0;
    background: var(--linea);
}

.dock-mas-item.dock-version,
.dock-mas-item.dock-nonet,
.dock-mas-item.dock-estoyaca,
.dock-mas-item.dock-estacionamiento {
    color: var(--navy);
}

.dock-mas-item.dock-nonet.activo,
.dock-mas-item.dock-estacionamiento.activo {
    background: #e8eef5;
    color: var(--navy);
}

.pin-admin-version {
    display: block;
    width: 88px;
    margin: 8px 0 0;
    padding: 6px 8px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
    color: var(--tinta);
    font-size: 14px;
    letter-spacing: 0.12em;
}

.pin-admin-version.oculto {
    display: none;
}

.modal-uso-card {
    width: min(520px, 100%);
}

.uso-tabla-wrap {
    margin-top: 12px;
    max-height: min(52vh, 420px);
    overflow: auto;
    border: 1px solid var(--linea);
    border-radius: 12px;
}

.uso-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.uso-tabla th,
.uso-tabla td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--linea);
    vertical-align: top;
}

.uso-tabla th {
    position: sticky;
    top: 0;
    background: #f7f8fa;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--suave);
}

.uso-tabla td:last-child,
.uso-tabla th:last-child {
    text-align: right;
    white-space: nowrap;
}

.dock-mas-item.dock-estacionamiento.activo {
    background: #e8eef5;
    color: var(--navy);
}

.park-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--navy);
}

.park-check input {
    margin-top: 3px;
}

.park-leyenda {
    margin: 2px 0 0;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--suave);
}

.park-chip-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.park-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(28, 40, 60, 0.18);
    flex: 0 0 10px;
}

.park-chip.on,
.enc-sugerencias button.park-chip.on {
    border-color: var(--navy);
    background: #e8eef5;
    color: var(--navy);
}

.marker-estacionamiento {
    background: transparent !important;
    border: 0 !important;
}

.park-pin {
    width: 32px;
    height: 42px;
    filter: drop-shadow(0 2px 3px rgba(31, 36, 48, 0.35));
    transform-origin: 50% 100%;
    animation: park-pin-pulse 2.4s ease-in-out infinite;
}

.park-pin svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes park-pin-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.leaflet-popup.popup-park .leaflet-popup-content-wrapper {
    background: #fff;
}

.popup-park-cuerpo .park-calle {
    color: var(--navy);
    font-weight: 700;
}

.popup-park-cuerpo .park-hace,
.popup-park-cuerpo .park-dist {
    font-weight: 700;
    color: var(--navy);
}

.popup-park-cuerpo .park-solo {
    font-size: 11px;
    color: var(--suave);
}

.park-hud {
    position: absolute;
    top: auto;
    left: 12px;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1540;
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: min(248px, calc(100vw - 128px));
    max-width: min(248px, calc(100vw - 128px));
    padding: 4px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    box-shadow: var(--sombra);
}

.park-hud.oculto {
    display: none;
}

.park-hud-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 8px 10px 8px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.park-hud-brujula {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e8ecf0;
    display: grid;
    place-items: center;
}

.park-hud-brujula svg {
    display: none;
}

.park-hud-flecha {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    transform-origin: 50% 50%;
    transition: transform 0.18s linear;
    display: grid;
    place-items: center;
}

.park-hud-flecha img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.park-hud[data-modo="cerca"] .park-hud-flecha {
    display: none;
}

.park-hud[data-modo="cerca"] .park-hud-brujula {
    background: #e7f6ee;
    color: #157347;
}

.park-hud[data-modo="eligiendo"] .park-hud-flecha {
    display: none;
}

.park-hud-txt {
    min-width: 0;
    flex: 1;
}

.park-hud-txt strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

.park-hud-txt span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--suave);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.park-hud-cancel {
    flex: 0 0 auto;
    align-self: center;
    margin-right: 6px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: #f3f6fa;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

body.park-eligiendo .leaflet-container {
    cursor: crosshair;
}

body.modo-carrera-setup .park-hud,
body.modo-carrera .park-hud,
body.modo-fantasma-invitado .park-hud,
body.modo-carrera-setup .enc-hud,
body.modo-carrera .enc-hud,
body.modo-fantasma-invitado .enc-hud {
    display: none !important;
}

body.dest-brujula #parkHud {
    display: none !important;
}

@media (min-width: 1024px) {
    .park-hud {
        top: auto;
        left: 16px;
        bottom: 112px;
        width: min(260px, calc(100vw - 160px));
        max-width: 260px;
    }

    body.dest-brujula .habla-mapa,
    body.park-brujula .habla-mapa {
        bottom: 196px;
    }
}

@media (max-width: 1023px) {
    .park-hud {
        top: auto;
        left: 12px;
        right: auto;
        bottom: calc(var(--dock-h) + 88px);
        width: min(236px, calc(100vw - 128px));
        max-width: min(236px, calc(100vw - 128px));
    }
}