@CHARSET "UTF-8";


/* Estilos base extraídos de la plantilla en la arquitectura v28. */
body {
            font-family: 'Hanken Grotesk', sans-serif;
            overflow: hidden;
        }

        .radar-circle {
            /* box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); */
            /* Ancho y alto explícitos e idénticos (no dependemos de aspect-ratio "auto"
               dentro de un contenedor flex, que es frágil): esto garantiza el círculo
               perfecto en cualquier tamaño de pantalla. */
            width: min(85vw, 420px);
            height: min(85vw, 420px);
        }

        @media (min-width: 768px) {
            .radar-circle {
                width: min(72vh, 870px);
                height: min(72vh, 870px);
            }
        }

        .dbz-gradient {
            background: linear-gradient(
            to top,

            /* 0 - 10 dBZ : Cyan / Azul claro */
            #b9f4f6 0%,      /* 0 dBZ  */
            #78e6ed 6.67%,   /* 5 dBZ  */
            #55d6e5 13.33%,  /* 10 dBZ */

            /* 15 dBZ : Azul / Violeta */
            #72a7e8 20%,     /* 15 dBZ */

            /* 20 - 30 dBZ : Verdes */
            #a6f58c 26.67%,  /* 20 dBZ */
            #62e67d 33.33%,  /* 25 dBZ */
            #49bd6a 40%,     /* 30 dBZ */

            /* 35 - 45 dBZ : Amarillos */
            #ffffa1 46.67%,  /* 35 dBZ */
            #ffe978 53.33%,  /* 40 dBZ */
            #ffd46a 60%,     /* 45 dBZ */

            /* 50 - 55 dBZ : Rojos */
            #ff7777 66.67%,  /* 50 dBZ */
            #ed6565 73.33%,  /* 55 dBZ */

            /* 60 - 70 dBZ : Magenta / Rosa */
            #d88bce 80%,     /* 60 dBZ */
            #ef74df 86.67%,  /* 65 dBZ */
            #d95ad5 93.33%,  /* 70 dBZ */

            /* 75 dBZ : extremo */
            #ffffff 100%     /* 75 dBZ */
            );
        }

        /*.dbz-gradient {
            background: linear-gradient(to top,
                    #1e3a8a 0%,
                    #3b82f6 15%,
                    #22c55e 30%,
                    #eab308 50%,
                    #f97316 70%,
                    #dc2626 85%,
                    #d946ef 100%);
        }*/

        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #721c33;
            border-radius: 10px;
        }

        /* ---- Capas de imagen para transición cruzada (crossfade) ---- */
        .radar-layer {
            transition: opacity var(--radar-frame-transition, 160ms) cubic-bezier(.2,.8,.2,1);
            will-change: opacity;
        }

        /* ---- Barrido de radar: rotación sutil tipo "spin" ---- */
        .radar-sweep {
            position: absolute;
            inset: -2%;
            /* border-radius: 9999px; */
            pointer-events: none;
            mix-blend-mode: screen;
            background: conic-gradient(from 0deg,
                    rgba(255, 255, 255, 0.55) 0deg,
                    rgba(255, 255, 255, 0.12) 18deg,
                    rgba(255, 255, 255, 0) 55deg,
                    rgba(255, 255, 255, 0) 360deg);
            animation: radar-spin 6s linear infinite;
            opacity: 0.65;
            will-change: transform;
        }

        .dark .radar-sweep {
            mix-blend-mode: overlay;
            background: conic-gradient(from 0deg,
                    rgba(255, 255, 255, 0.4) 0deg,
                    rgba(255, 255, 255, 0.1) 18deg,
                    rgba(255, 255, 255, 0) 55deg,
                    rgba(255, 255, 255, 0) 360deg);
        }

        @keyframes radar-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* ---- Indicador LIVE ---- */
        .live-dot {
            animation: live-blink 1.6s ease-in-out infinite;
        }

        @keyframes live-blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.25;
            }
        }

        /* ---- Modal ---- */
        #detail-modal {
            transition: opacity 0.2s ease-in-out;
        }

        #detail-modal.modal-hidden {
            opacity: 0;
            pointer-events: none;
        }

        #detail-modal .modal-panel {
            transition: transform 0.2s ease-in-out;
        }

        #detail-modal.modal-hidden .modal-panel {
            transform: scale(0.96);
        }

        .expand-btn {
            transition: background-color 0.2s ease, transform 0.15s ease;
        }

        .expand-btn:hover {
            transform: scale(1.06);
        }

.hidden{display:none!important;}
.contGen{border:none!important;border-radius:4px;padding:0px;width:60%;min-width:260px;padding-bottom:25px;} --width:900px
main{width:900px;padding:0px;/*background:#fff;*/margin:auto;/*border:1px solid #ccc;*/margin-bottom:25px;}
#msjValida{width:100%;font-size:18px;color:#e26d7d;height:25px;margin-top:15px;text-align:center;text-decoration:underline;}
.contenido{width:100%;margin:auto;text-align:center;}
.txtInput{font-size:15px;color:#666;margin-top:15px;}
.txtBottom{padding:25px 0px;font-size:16px!important;}
a{text-decoration:none;color:#808080;}
a:hover{text-decoration:underline;}
.titulo1{width:855px;border-bottom:solid 1px #ddd;padding:3px 0 3px 0;margin:auto;}
::-webkit-input-placeholder{color:#aaa;}
::-moz-placeholder{color:#aaa;}
:-ms-input-placeholder{color:#aaa;}
:-moz-placeholder{color:#aaa;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
.txtSeccion {
    width: 90%;
    float: none;
    margin: 15px auto;
}

@media (max-width:660px){
	.contGen{width:100%!important;}
}

.txt-titulo {
    color: #333;
    font-size: 29px;
    font-weight: bold;
    line-height: 35px;
    font-family: "Roboto";
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 20px;}

/*****GENERALES*****/
.tablaResultado{margin-top:25px;}
.disabled{background:#ebebe4!important;}
.divBtnPop{width:100%;margin-top:25px;}
.btnCancel{float:left;width:230px;}
.btnAcepta{float:right;width:230px;}
h5{font-size:22px;padding:15px 0px;border-bottom:1px solid #ccc}
.btnRegistro{background:none;border:none;cursor:pointer;}
.textMnsj{font-size:18px;}

/*****FILTROS Y BUSQUEDA*****/
.divFiltro{width:95%;margin:auto;background:#f1f1f1;margin-top:15px;text-align:center;padding-bottom:10px;}
.inputFiltroDel{float:left;width:230px;height:40px;padding-top:13px;margin:0px 5px;}
.inputFiltroDel select{width:100%;height:45px;}
.inputFiltroRev{float:left;width:335px;height:40px;padding-top:13px;}
.inputFiltroRev select{width:100%;height:45px;}
.inputFiltroAnio{float:left;width:80px;height:40px;padding-top:13px;margin:0px 5px;}
.inputFiltroAnio input{width:100%;height:39px;text-align:center;padding:0px;}
.inputFiltroPalabra{float:left;width:190px;height:40px;padding-top:13px;}
.inputFiltroPalabra input{width:100%;height:45px;padding:0px;text-align:center;}

/*****LISTA DE REGISTROS*****/
.divnuevoRegistro{width:855px;margin:auto;margin-top:25px;margin-bottom:20px;text-align:right;margin-top:-40px;}
.divRegistros{width:855px;margin:auto;background:#f1f1f1;text-align:center;}
.venTab{font-size:16px;color:#000;background:#fff;}
.venTab td{border-bottom:#ccc solid 1px;border-right:#ccc solid 1px;padding: 2px 0px;}

/*****NUEVO REGISTROS*****/
.txtAviso{width:855px;text-align:justify;font-size:16px;line-height:15px;margin:35px auto;}
.divlineCont{width:100%;}
.contL{float:left;width:48%;padding:8.5px 0px;margin-bottom:6px;text-align:right;}
.contR{float:right;width:50%;margin-bottom:6px;}
.expeConfirm{font-weight:bolder;font-size:24px;color:#0082be;color:#808080;line-height:46px;}
.btnGuarda{width:100%; text-align:center;margin-top:25px;}

/*****INPUTS*****/
input{height:40px;width:345px;padding:0px 10px;margin-top:0px;}
select{width:347px;height:39px;margin:0px;}
.txtObservacion{height:170px;max-height:170px;min-height:170px;width:345px;max-width:345px;min-width:345px;border:1px solid #e6e6e6;padding:15px;background:#fcfcfc;font-family:"Roboto";font-size:18px;}
.txtObservacionObs{height:170px;max-height:170px;min-height:170px;width:345px;max-width:345px;min-width:345px;border:1px solid #e6e6e6;padding:15px;background:#fcfcfc;font-family:"Roboto";font-size:18px;}

/*****SWITCH*****/
	.switchCenter{margin-left:40px!important;}
    .switch {
      position: relative;
      display: block;
      vertical-align: top;
      width: 100px;
      height: 32px;
      padding: 3.5px;
      margin: 0;
      background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
      background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
      border-radius: 18px;
      box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
      cursor: pointer;
    }
    .switch-input {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    .switch-label {
      position: relative;
      display: block;
      height: inherit;
      font-size: 16px;
      text-transform: uppercase;
      background: #eceeef;
      border-radius: inherit;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    }
    .switch-label:before, .switch-label:after {
      position: absolute;
      top: 50%;
      margin-top: -.5em;
      line-height: 1;
      -webkit-transition: inherit;
      -moz-transition: inherit;
      -o-transition: inherit;
      transition: inherit;
    }
    .switch-label:before {
      content: attr(data-off);
      right: 11px;
      color: #aaaaaa;
      text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }
    .switch-label:after {
      content: attr(data-on);
      left: 11px;
      color: #FFFFFF;
      text-shadow: 0 1px rgba(0, 0, 0, 0.2);
      opacity: 0;
    }
    .switch-input:checked ~ .switch-label {
   	  background: #669647;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    }
    .switch-input:checked ~ .switch-label:before {
      opacity: 0;
    }
    .switch-input:checked ~ .switch-label:after {
      opacity: 1;
    }
    .switch-handle {
      position: absolute;
      top: 5px;
      left: 4px;
      width: 30px;
      height: 30px;
      background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
      background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
      border-radius: 100%;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .switch-handle:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -6px 0 0 -6px;
      width: 12px;
      height: 12px;
      background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
      background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
      border-radius: 6px;
      box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }
    .switch-input:checked ~ .switch-handle {
      left:72px;
      box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    /* Transition
        ========================== */
    .switch-label, .switch-handle {
      transition: All 0.3s ease;
      -webkit-transition: All 0.3s ease;
      -moz-transition: All 0.3s ease;
      -o-transition: All 0.3s ease;
    }

.txt-titulo {
    color: #9F2241;
    font-weight: bold;
    font-family: "Roboto";
}
.txtSeccion {
    width: 100%;
}

/* === RADAR THEME 2026: guinda CDMX + dorado, sin cambios de layout === */
body.radar-app {
    --cdmx-guinda: #9F2241;
    --cdmx-guinda-strong: #7B1932;
    --cdmx-guinda-soft: rgba(159, 34, 65, 0.10);
    --gold: #B38A3D;
    --gold-strong: #94702E;
    --gold-soft: rgba(179, 138, 61, 0.14);

    --bg: #E5E5E7;
    --bg-deep: #D7D8DB;
    --surface: rgba(247, 246, 244, 0.94);
    --surface-solid: #F4F2EE;
    --surface-muted: #E8E4DE;
    --border: #C9C2B7;
    --border-soft: rgba(75, 66, 60, 0.14);
    --text: #242328;
    --muted: #68636A;
    --shadow: 0 14px 36px rgba(31, 29, 31, 0.12);
    --shadow-soft: 0 6px 18px rgba(31, 29, 31, 0.08);

    background: var(--bg) !important;
    color: var(--text);
    color-scheme: light;
}

.dark body.radar-app {
    --cdmx-guinda: #B83257;
    --cdmx-guinda-strong: #D15075;
    --cdmx-guinda-soft: rgba(184, 50, 87, 0.16);
    --gold: #C5A467;
    --gold-strong: #D4B77E;
    --gold-soft: rgba(197, 164, 103, 0.11);

    --bg: #0D0F11;
    --bg-deep: #090B0D;
    --surface: rgba(23, 26, 29, 0.94);
    --surface-solid: #171A1D;
    --surface-muted: #202428;
    --border: #373C41;
    --border-soft: rgba(255, 255, 255, 0.075);
    --text: #EEF0F2;
    --muted: #A1A6AC;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.24);

    background: var(--bg) !important;
    color: var(--text);
    color-scheme: dark;
}

/* Encabezado institucional: conserva posición y dimensiones originales. */
.radar-app > header {
    background: linear-gradient(112deg, var(--cdmx-guinda-strong), var(--cdmx-guinda)) !important;
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 8px 26px rgba(72, 15, 34, 0.22);
}

.dark .radar-app > header {
    background: linear-gradient(112deg, #181A1D 0%, #111315 58%, #211016 100%) !important;
    border-bottom-color: var(--gold);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
}

/* Lienzo: grises profundos, sin tocar flex, offsets, gaps ni tamaños. */
.radar-app > main {
    background:
        radial-gradient(circle at 50% 42%, var(--gold-soft), transparent 31%),
        linear-gradient(180deg, var(--bg), var(--bg-deep)) !important;
}

/* Paneles principales del canvas. */
.radar-app .radar-title-panel,
.radar-app .radar-side-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.radar-app .radar-title-panel {
    border-left: 3px solid var(--cdmx-guinda) !important;
    border-bottom-color: rgba(179, 138, 61, 0.45) !important;
}

.radar-app .radar-detail-panel {
    border-top: 1px solid var(--gold) !important;
}

.radar-app .radar-metrics-panel,
.radar-app .reflectivity-panel {
    border-bottom: 1px solid var(--gold) !important;
}


.radar-app .radar-left-aux,
.radar-app .radar-right-rail {
    align-self: stretch;
}

@media (min-width: 768px) {
    .radar-app .radar-left-aux,
    .radar-app .radar-right-rail {
        width: 18rem;
    }

    .radar-app .radar-left-aux {
        top: 12.25rem;
    }
}

/* Tipografía/acentos: guinda como insignia; dorado sólo como detalle visual. */
.radar-app .text-primary {
    color: var(--cdmx-guinda) !important;
}

.dark .radar-app .text-primary {
    color: var(--cdmx-guinda-strong) !important;
}

.radar-app h1 {
    color: var(--text) !important;
}

.radar-app h1 + p {
    color: var(--gold-strong) !important;
}

.dark .radar-app h1 + p {
    color: var(--gold) !important;
}

.radar-app > main > div:last-child h3 {
    color: var(--muted) !important;
}

.radar-app > main > div:last-child h3::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 7px;
    background: linear-gradient(90deg, var(--cdmx-guinda), var(--gold));
    opacity: 0.9;
}

.radar-app > main > div:last-child > div:last-child h3::after {
    margin-left: auto;
    margin-right: auto;
}

/* Radar: sólo apariencia exterior; no se modifica forma, tamaño ni object-fit. */
.radar-app .radar-circle {
    /* background: #111315 !important; */
    border-color: var(--border) !important;
    box-shadow:
        0 0 0 1px var(--gold-soft),
        0 20px 46px rgba(29, 27, 29, 0.20) !important;
}

.dark .radar-app .radar-circle {
    background: #090B0D !important;
    border-color: #383D42 !important;
    box-shadow:
        0 0 0 1px rgba(197, 164, 103, 0.14),
        0 22px 52px rgba(0, 0, 0, 0.48) !important;
}

.radar-app .expand-btn {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--cdmx-guinda) !important;
    box-shadow: var(--shadow-soft) !important;
}

.radar-app .expand-btn:hover {
    background: var(--surface-muted) !important;
}

/* Footer y controles conservan exactamente el layout existente. */
.radar-app > .timeline-dock {
    background: var(--surface-solid) !important;
    border-color: var(--border) !important;
    box-shadow: 0 -7px 24px rgba(31, 29, 31, 0.06);
}

.dark .radar-app > .timeline-dock {
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.20);
}

.radar-app #speed-controls {
    background: var(--surface-muted) !important;
    border: 1px solid var(--border-soft);
}

.radar-app #speed-controls .speed-btn:hover,
.radar-app #speed-controls .speed-btn.bg-white {
    background: var(--surface) !important;
}

.radar-app #progress-bar,
.radar-app .bg-primary {
    background-color: var(--cdmx-guinda) !important;
}

.radar-app #progress-thumb,
.radar-app .border-primary {
    border-color: var(--cdmx-guinda) !important;
}

.radar-app #progress-thumb {
    background: var(--surface-solid) !important;
    box-shadow: 0 0 0 3px var(--cdmx-guinda-soft), var(--shadow-soft);
}

/* Botón de modo: legible en ambos temas. */
.radar-app > button[onclick*="classList.toggle('dark')"] {
    background: var(--surface-solid) !important;
    border-color: var(--border) !important;
    color: var(--cdmx-guinda) !important;
    box-shadow: var(--shadow-soft) !important;
}

.dark .radar-app > button[onclick*="classList.toggle('dark')"] {
    color: var(--gold) !important;
}

/* Modal coherente con la misma paleta, sin alterar sus dimensiones. */
.radar-app #detail-modal .modal-panel {
    background: var(--surface-solid) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.radar-app #detail-modal .modal-panel > div:first-child {
    background: var(--surface-muted) !important;
}

.radar-app #detail-modal .border-slate-100,
.radar-app #detail-modal .dark\:border-slate-800 {
    border-color: var(--border-soft) !important;
}

/* Scrollbar y selección integrados a la identidad. */
.radar-app .custom-scrollbar {
    scrollbar-color: var(--cdmx-guinda) transparent;
}

.radar-app .custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--cdmx-guinda), var(--gold));
}

.radar-app ::selection {
    background: var(--cdmx-guinda);
    color: #fff;
}

.radar-app button:focus-visible {
    outline: 3px solid var(--gold-soft);
    outline-offset: 2px;
}


/* === Correcciones visuales Time Machine ===
   No altera la posición general del footer ni la forma/tamaño del radar. */
.radar-app > .timeline-dock h2 {
    color: var(--muted) !important;
    letter-spacing: .14em;
}

.radar-app > .timeline-dock #date-text {
    color: var(--muted) !important;
}

.radar-app > .timeline-dock #current-time {
    color: var(--text) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

.radar-app > .timeline-dock #speed-controls .speed-btn {
    min-width: 2.25rem;
    color: var(--muted);
}

.radar-app > .timeline-dock #speed-controls .speed-btn.active-speed {
    background: var(--cdmx-guinda) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px var(--cdmx-guinda-soft) !important;
}

.radar-app > .timeline-dock #timeline-labels {
    color: var(--muted);
}

.radar-app > .timeline-dock #timeline-labels > div {
    min-width: 0;
}

.radar-app > .timeline-dock #timeline-labels span:last-child {
    font-size: 9px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.radar-app > .timeline-dock #frame-counter,
.radar-app > .timeline-dock #frame-total {
    color: var(--text) !important;
    font-variant-numeric: tabular-nums;
}

.radar-app > .timeline-dock #progress-bar {
    box-shadow: 0 0 8px var(--cdmx-guinda-soft);
}

.radar-app > .timeline-dock #progress-thumb {
    width: 14px !important;
    height: 14px !important;
}

.dark .radar-app > .timeline-dock #progress-thumb {
    background: #171A1D !important;
}

@media (max-width: 767px) {
    .radar-app > .timeline-dock #timeline-labels span:last-child {
        font-size: 8px;
    }
}

/* === Timeline footer v2: marcas sincronizadas + microinteracciones === */
.radar-app > .timeline-dock {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.radar-app > .timeline-dock::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--cdmx-guinda), transparent);
    opacity: .55;
    pointer-events: none;
}

.radar-app > .timeline-dock .timeline-shell {
    min-width: 0;
}

.radar-app > .timeline-dock .timeline-track {
    height: 18px;
    display: flex;
    align-items: center;
}

.radar-app > .timeline-dock .timeline-rail,
.radar-app > .timeline-dock #progress-bar {
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.radar-app > .timeline-dock .timeline-rail {
    width: 100%;
    background: color-mix(in srgb, var(--border) 64%, transparent);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

.radar-app > .timeline-dock #progress-bar {
    width: 0;
    background: linear-gradient(90deg, var(--cdmx-guinda), var(--cdmx-guinda-strong));
    box-shadow: 0 0 10px var(--cdmx-guinda-soft);
    transition: width .48s cubic-bezier(.22,1,.36,1);
    z-index: 2;
}

.radar-app > .timeline-dock #progress-thumb {
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid var(--cdmx-guinda) !important;
    border-radius: 50%;
    background: var(--surface-solid) !important;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px var(--cdmx-guinda-soft), 0 4px 12px rgba(0,0,0,.16);
    transition: left .48s cubic-bezier(.22,1,.36,1), transform .18s ease, box-shadow .18s ease;
    z-index: 5;
}

.radar-app > .timeline-dock #progress-thumb::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--cdmx-guinda);
}

.radar-app > .timeline-dock .timeline-track:hover #progress-thumb {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 0 5px var(--cdmx-guinda-soft), 0 5px 16px rgba(0,0,0,.18);
}

.radar-app > .timeline-dock #timeline-marks {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.radar-app > .timeline-dock .timeline-mark {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 9px;
    background: var(--border);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    transition: height .24s ease, background-color .24s ease, box-shadow .24s ease;
}

.radar-app > .timeline-dock .timeline-mark.is-active {
    height: 14px;
    width: 2px;
    background: var(--cdmx-guinda);
    box-shadow: 0 0 8px var(--cdmx-guinda-soft);
}

.radar-app > .timeline-dock .timeline-labels {
    position: relative;
    height: 17px;
    margin-top: 3px;
}

.radar-app > .timeline-dock .timeline-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    line-height: 1;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color .24s ease, transform .24s ease, font-weight .24s ease;
}

.radar-app > .timeline-dock .timeline-label:first-child {
    transform: translateX(0);
}

.radar-app > .timeline-dock .timeline-label:last-child {
    transform: translateX(-100%);
}

.radar-app > .timeline-dock .timeline-label.is-active {
    color: var(--cdmx-guinda);
    font-weight: 800;
    transform: translateX(-50%) translateY(-1px) scale(1.06);
}

.radar-app > .timeline-dock .timeline-label:first-child.is-active {
    transform: translateX(0) translateY(-1px) scale(1.06);
    transform-origin: left center;
}

.radar-app > .timeline-dock .timeline-label:last-child.is-active {
    transform: translateX(-100%) translateY(-1px) scale(1.06);
    transform-origin: right center;
}

/* Controles con respuesta visual más limpia. */
.radar-app > .timeline-dock button {
    transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}

.radar-app > .timeline-dock button:hover {
    transform: translateY(-1px);
}

.radar-app > .timeline-dock button:active {
    transform: translateY(0) scale(.96);
}

.radar-app > .timeline-dock #btn-play {
    box-shadow: 0 6px 16px var(--cdmx-guinda-soft);
}

.radar-app > .timeline-dock #btn-play:hover {
    box-shadow: 0 8px 20px var(--cdmx-guinda-soft);
}

.radar-app > .timeline-dock #speed-controls {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.radar-app > .timeline-dock #speed-controls .speed-btn.active-speed {
    position: relative;
    overflow: hidden;
}

.radar-app > .timeline-dock #speed-controls .speed-btn.active-speed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.20) 50%, transparent 75%);
    transform: translateX(-120%);
    animation: footer-speed-shine 2.8s ease-in-out infinite;
}

.radar-app > .timeline-dock #current-time {
    transition: color .25s ease, text-shadow .25s ease;
}

.radar-app > .timeline-dock:hover #current-time {
    color: var(--cdmx-guinda) !important;
    text-shadow: 0 0 12px var(--cdmx-guinda-soft);
}

@keyframes footer-speed-shine {
    0%, 62% { transform: translateX(-120%); }
    86%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app > .timeline-dock #progress-bar,
    .radar-app > .timeline-dock #progress-thumb,
    .radar-app > .timeline-dock .timeline-mark,
    .radar-app > .timeline-dock .timeline-label,
    .radar-app > .timeline-dock button {
        transition: none !important;
    }
    .radar-app > .timeline-dock #speed-controls .speed-btn.active-speed::after {
        animation: none !important;
        display: none;
    }
}


/* === Cambio de cortes de radar: rápido, limpio y estable incluso en 2x === */
.radar-app .radar-layer {
    transition: opacity var(--radar-frame-transition, 160ms) cubic-bezier(.2,.8,.2,1) !important;
    will-change: opacity;
}

.radar-app .radar-circle.frame-refresh {
    animation: radar-frame-refresh 220ms cubic-bezier(.2,.8,.2,1);
}

@keyframes radar-frame-refresh {
    0% {
        box-shadow: var(--shadow-lg);
    }
    45% {
        box-shadow: var(--shadow-lg), 0 0 0 2px var(--cdmx-guinda-soft), 0 0 18px var(--gold-soft);
    }
    100% {
        box-shadow: var(--shadow-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .radar-layer {
        transition-duration: 0ms !important;
    }
    .radar-app .radar-circle.frame-refresh {
        animation: none !important;
    }
}

/* === Métricas interpretativas del corte === */
.radar-app .radar-metrics-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 94%, var(--gold) 6%), var(--surface-glass)) !important;
    border-color: color-mix(in srgb, var(--gold) 42%, var(--border)) !important;
}

.radar-app .radar-metrics-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cdmx-guinda), var(--gold));
}

.radar-app .metrics-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.radar-app .metrics-heading h3 { color: var(--cdmx-guinda); }
.radar-app .metrics-heading p {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.3;
    color: var(--muted);
}
.radar-app .metrics-heading > .material-icons {
    font-size: 18px;
    color: var(--gold-strong);
}

.radar-app .metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.radar-app .metric-card {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.radar-app .metric-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
}

.radar-app .metric-card-accent {
    background: linear-gradient(135deg, var(--cdmx-guinda-soft), var(--gold-soft));
}

.radar-app .metric-label {
    display: block;
    margin-bottom: 3px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--muted);
}

.radar-app .metric-card strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radar-app .metric-card small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radar-app .metrics-footnote {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: 8px;
    line-height: 1.35;
}
.radar-app .metrics-footnote .material-icons {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--gold-strong);
}


.radar-app .reflectivity-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface-solid) 96%, var(--gold) 4%), var(--surface)) !important;
}

.radar-app .reflectivity-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), var(--cdmx-guinda));
}

.radar-app .reflectivity-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.radar-app .reflectivity-heading h3 {
    color: var(--gold-strong) !important;
    margin-bottom: 2px;
}

.radar-app .reflectivity-heading h3::after {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.radar-app .reflectivity-heading p {
    margin: 2px 0 0;
    font-size: 9px;
    line-height: 1.3;
    color: var(--muted);
}

.radar-app .reflectivity-heading .material-icons {
    color: var(--cdmx-guinda);
    font-size: 18px;
}

.radar-app .reflectivity-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: 8px;
    line-height: 1.4;
}

.radar-app .reflectivity-note .material-icons {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--gold-strong);
}

.dark .radar-app .reflectivity-panel {
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface-solid) 95%, var(--cdmx-guinda) 5%), var(--surface)) !important;
}

.radar-app .reflectivity-panel .dbz-scale {
    flex: 1;
    min-width: 0;
}
.radar-app .reflectivity-panel .dbz-scale span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 14px;
}
.radar-app .reflectivity-panel .dbz-scale b {
    width: 20px;
    color: var(--text);
    font-weight: 700;
}
.radar-app .reflectivity-panel .dbz-scale em {
    color: var(--muted);
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 8px;
    font-style: normal;
    white-space: nowrap;
}


@media (max-width: 767px) {
    .radar-app .radar-left-aux,
    .radar-app .radar-right-rail {
        width: 100%;
    }
}

.dark .radar-app .radar-metrics-panel {
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 95%, var(--cdmx-guinda) 5%), var(--surface-glass)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .metric-card { transition: none; }
}

/* === Modal detalle v5 · ficha meteorológica interpretativa === */
.radar-app #detail-modal {
    background: rgba(12, 14, 17, .66) !important;
    backdrop-filter: blur(10px) saturate(92%);
}

.radar-app .radar-detail-modal {
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--gold) 24%) !important;
    border-radius: 18px !important;
    background: var(--surface-solid) !important;
    box-shadow: 0 28px 80px rgba(10, 12, 15, .34), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}

.radar-app .modal-visual {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, var(--gold-soft), transparent 46%),
        linear-gradient(145deg, var(--surface-muted), var(--app-bg-deep)) !important;
    border-right: 1px solid var(--border-soft);
}

.radar-app .modal-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, var(--cdmx-guinda-soft));
}

.radar-app .modal-visual #modal-image {
    position: relative;
    z-index: 1;
    filter: saturate(.96) contrast(1.015);
}

.radar-app .modal-image-badge {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--gold) 30%);
    background: color-mix(in srgb, var(--surface-solid) 84%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
}
.radar-app .modal-image-badge-top {
    top: 16px;
    left: 16px;
    padding: 8px 11px;
    border-radius: 11px;
}
.radar-app .modal-image-badge-top .material-icons { color: var(--cdmx-guinda); font-size: 19px; }
.radar-app .modal-image-badge-top small { display:block; font-size:7px; font-weight:800; letter-spacing:.14em; color:var(--muted); }
.radar-app .modal-image-badge-top strong { display:block; margin-top:1px; font:700 11px/1.2 "JetBrains Mono",monospace; }
.radar-app .modal-image-badge-bottom {
    left: 16px;
    bottom: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    font: 700 9px/1 "JetBrains Mono",monospace;
    color: var(--cdmx-guinda);
}

.radar-app .modal-data {
    padding: 26px 26px 20px;
    background:
        radial-gradient(circle at 92% 3%, var(--gold-soft), transparent 18%),
        var(--surface-solid);
}

.radar-app .modal-close {
    z-index: 10;
    border: 1px solid var(--border) !important;
    background: color-mix(in srgb, var(--surface-solid) 90%, transparent) !important;
    color: var(--muted) !important;
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, color .18s ease, border-color .18s ease, background-color .18s ease;
}
.radar-app .modal-close:hover {
    transform: rotate(6deg) scale(1.04);
    color: var(--cdmx-guinda) !important;
    border-color: color-mix(in srgb, var(--cdmx-guinda) 35%, var(--border)) !important;
}

.radar-app .modal-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: var(--cdmx-guinda);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.radar-app .modal-kicker span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cdmx-guinda), var(--gold));
}
.radar-app .modal-title {
    max-width: calc(100% - 42px);
    margin: 0;
    color: var(--text);
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.025em;
}
.radar-app .modal-subline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--muted);
    font: 500 10px/1.3 "JetBrains Mono",monospace;
}
.radar-app .modal-layer-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--border));
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold-strong);
    font-family: "Hanken Grotesk",sans-serif;
}
.radar-app .modal-layer-pill .material-icons { font-size: 11px; }
.radar-app .modal-layer-pill b { font-size: 8px; letter-spacing:.04em; }

.radar-app .modal-summary-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin: 18px 0 20px;
}
.radar-app .modal-summary-card {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-muted) 68%, var(--surface-solid));
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.radar-app .modal-summary-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
    box-shadow: var(--shadow-soft);
}
.radar-app .modal-summary-card.featured {
    background: linear-gradient(135deg, var(--cdmx-guinda-soft), var(--gold-soft));
    border-color: color-mix(in srgb, var(--cdmx-guinda) 28%, var(--border));
}
.radar-app .modal-summary-card > .material-icons {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--surface-solid);
    color: var(--cdmx-guinda);
    font-size: 15px;
    box-shadow: inset 0 0 0 1px var(--border-soft);
}
.radar-app .modal-summary-card small,
.radar-app .modal-summary-card strong,
.radar-app .modal-summary-card em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radar-app .modal-summary-card small { color:var(--muted); font-size:7px; font-weight:800; letter-spacing:.1em; }
.radar-app .modal-summary-card strong { margin-top:2px; color:var(--text); font:700 11px/1.2 "JetBrains Mono",monospace; }
.radar-app .modal-summary-card em { margin-top:2px; color:var(--muted); font-size:8px; font-style:normal; }

.radar-app .modal-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.radar-app .modal-section-title .material-icons { color:var(--gold-strong); font-size:13px; }

.radar-app .modal-meta-section,
.radar-app .modal-reflectivity-section {
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.radar-app .modal-meta-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 14px;
}
.radar-app .modal-meta-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border-soft);
}
.radar-app .modal-meta-grid > div.wide { grid-column: 1 / -1; }
.radar-app .modal-meta-grid span { flex:0 0 auto; color:var(--muted); font-size:8px; letter-spacing:.04em; }
.radar-app .modal-meta-grid strong { min-width:0; overflow:hidden; color:var(--cdmx-guinda); font-size:9px; text-align:right; text-overflow:ellipsis; white-space:nowrap; }

.radar-app .modal-reflectivity-section { margin-top:14px; }
.radar-app .modal-dbz-layout {
    display: grid;
    grid-template-columns: 10px 88px 1fr;
    gap: 10px;
    align-items: stretch;
}
.radar-app .modal-dbz-bar { width:10px; min-height:112px; border-radius:999px; }
.radar-app .modal-dbz-scale { display:flex; flex-direction:column; justify-content:space-between; }
.radar-app .modal-dbz-scale span { display:flex; align-items:center; gap:6px; min-height:16px; }
.radar-app .modal-dbz-scale b { width:18px; color:var(--text); font:700 8px "JetBrains Mono",monospace; }
.radar-app .modal-dbz-scale em { color:var(--muted); font-size:8px; font-style:normal; }
.radar-app .modal-dbz-help {
    align-self: center;
    display: flex;
    gap: 7px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border-soft));
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--muted);
}
.radar-app .modal-dbz-help .material-icons { flex:0 0 auto; color:var(--gold-strong); font-size:13px; }
.radar-app .modal-dbz-help p { margin:0; font-size:8px; line-height:1.45; }
.radar-app .modal-dbz-help strong { color:var(--text); }

.radar-app .modal-footer-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 11px;
    border-top: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: 8px;
    line-height: 1.4;
}
.radar-app .modal-footer-note .status-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cdmx-guinda);
    box-shadow: 0 0 0 4px var(--cdmx-guinda-soft);
}
.radar-app .modal-footer-note b { color:var(--text); font-family:"JetBrains Mono",monospace; }

.dark .radar-app .modal-image-badge-top .material-icons,
.dark .radar-app .modal-summary-card > .material-icons { color: var(--gold); }
.dark .radar-app .modal-meta-grid strong { color: color-mix(in srgb, var(--cdmx-guinda) 62%, white 38%); }

@media (max-width: 767px) {
    .radar-app .radar-detail-modal { max-height: 94vh; }
    .radar-app .modal-visual { border-right:0; border-bottom:1px solid var(--border-soft); }
    .radar-app .modal-data { padding:20px 18px 18px; }
    .radar-app .modal-title { max-width:100%; font-size:17px; }
    .radar-app .modal-image-badge-top { top:10px; left:10px; }
    .radar-app .modal-image-badge-bottom { left:10px; bottom:10px; }
}

@media (max-width: 460px) {
    .radar-app .modal-summary-grid { grid-template-columns:1fr; }
    .radar-app .modal-meta-grid { grid-template-columns:1fr; }
    .radar-app .modal-meta-grid > div.wide { grid-column:auto; }
    .radar-app .modal-dbz-layout { grid-template-columns:10px 82px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .modal-close,
    .radar-app .modal-summary-card { transition:none; }
}


/* === Ajuste tipográfico v7 · mayor legibilidad sin mover layout === */
.radar-app .radar-title-panel h1 {
    font-size: clamp(2rem, 2.25vw, 2.65rem) !important;
    line-height: 1.05 !important;
}
.radar-app .radar-title-panel p {
    font-size: 0.72rem !important;
    letter-spacing: .13em !important;
}

.radar-app .radar-side-panel h3,
.radar-app .metrics-heading h3,
.radar-app .reflectivity-heading h3 {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}

.radar-app .radar-detail-panel .font-mono.text-sm {
    font-size: 0.94rem !important;
    line-height: 1.35 !important;
}
.radar-app .radar-detail-panel .text-slate-400 {
    font-size: 0.78rem !important;
    letter-spacing: .035em;
}
.radar-app .radar-detail-panel .text-primary {
    font-size: 0.92rem !important;
}

.radar-app .metrics-heading p,
.radar-app .reflectivity-heading p {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
}
.radar-app .metric-label {
    font-size: 0.61rem !important;
}
.radar-app .metric-card strong {
    font-size: 0.83rem !important;
}
.radar-app .metric-card small {
    font-size: 0.65rem !important;
}
.radar-app .metrics-footnote,
.radar-app .reflectivity-note {
    font-size: 0.66rem !important;
    line-height: 1.45 !important;
}

.radar-app .reflectivity-panel .dbz-scale span {
    min-height: 17px;
    gap: 9px;
}
.radar-app .reflectivity-panel .dbz-scale b {
    width: 26px;
    font-size: 0.74rem !important;
}
.radar-app .reflectivity-panel .dbz-scale em {
    font-size: 0.7rem !important;
    font-weight: 600;
}

.radar-app > .timeline-dock h2 {
    font-size: 0.78rem !important;
}
.radar-app > .timeline-dock #date-text {
    font-size: 0.72rem !important;
}
.radar-app > .timeline-dock #current-time {
    font-size: 1.35rem !important;
}
.radar-app > .timeline-dock #frame-counter,
.radar-app > .timeline-dock .timeline-label,
.radar-app > .timeline-dock .timeline-mark-label {
    font-size: 0.66rem !important;
}

/* Modal: subir tamaño de lectura técnica sin desbordar. */
.radar-app #detail-modal .modal-data-label,
.radar-app #detail-modal .modal-stat-label {
    font-size: 0.67rem !important;
}
.radar-app #detail-modal .modal-data-value,
.radar-app #detail-modal .modal-stat-value {
    font-size: 0.82rem !important;
}
.radar-app #detail-modal .modal-section-title {
    font-size: 0.72rem !important;
}

@media (max-width: 767px) {
    .radar-app .radar-detail-panel .font-mono.text-sm { font-size: 0.88rem !important; }
    .radar-app .metric-card strong { font-size: 0.78rem !important; }
    .radar-app .reflectivity-panel .dbz-scale em { font-size: 0.66rem !important; }
}


/* === Footer redesign v8: más moderno, redondo y dinámico === */
.radar-app > .timeline-dock {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 92%, white 8%), var(--surface-solid)) !important;
}

.dark .radar-app > .timeline-dock {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 96%, white 4%), var(--surface-solid)) !important;
}

.radar-app > .timeline-dock .footer-shell {
    position: relative;
    padding: 14px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--gold) 18%);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--gold-soft) 100%, transparent), transparent 28%),
        radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--cdmx-guinda-soft) 100%, transparent), transparent 26%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 93%, white 7%), color-mix(in srgb, var(--surface) 97%, transparent));
    box-shadow:
        0 18px 40px rgba(32, 28, 31, 0.10),
        inset 0 1px 0 rgba(255,255,255,.52);
    overflow: hidden;
}

.dark .radar-app > .timeline-dock .footer-shell {
    border-color: color-mix(in srgb, var(--border) 84%, var(--gold) 16%);
    background:
        radial-gradient(circle at 10% 0%, rgba(197,164,103,.10), transparent 26%),
        radial-gradient(circle at 90% 100%, rgba(184,50,87,.10), transparent 24%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 96%, white 4%), color-mix(in srgb, var(--surface) 96%, black 4%));
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.radar-app > .timeline-dock .footer-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cdmx-guinda), var(--gold), var(--cdmx-guinda-strong));
    opacity: .95;
}

.radar-app > .timeline-dock .footer-top {
    align-items: center;
    gap: 14px;
}

.radar-app > .timeline-dock .footer-title-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.radar-app > .timeline-dock h2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    letter-spacing: .18em;
}

.radar-app > .timeline-dock h2::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cdmx-guinda), var(--gold));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cdmx-guinda-soft) 65%, transparent);
}

.radar-app > .timeline-dock #date-text {
    margin: 0;
}

.radar-app > .timeline-dock .footer-clock-badge {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--gold) 24%);
    background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.28);
}

.radar-app > .timeline-dock .footer-bottom {
    align-items: stretch;
}

.radar-app > .timeline-dock .footer-media-controls,
.radar-app > .timeline-dock .footer-speed-group,
.radar-app > .timeline-dock .footer-frame-pill {
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

.radar-app > .timeline-dock .footer-media-controls {
    gap: 8px;
}

.radar-app > .timeline-dock .footer-media-controls button,
.radar-app > .timeline-dock .footer-speed-group .speed-btn {
    border-radius: 14px !important;
}

.radar-app > .timeline-dock #btn-prev,
.radar-app > .timeline-dock #btn-next {
    width: 2.5rem !important;
    height: 2.5rem !important;
    background: color-mix(in srgb, var(--surface-solid) 95%, transparent);
}

.radar-app > .timeline-dock #btn-play {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--cdmx-guinda), var(--cdmx-guinda-strong)) !important;
    box-shadow: 0 10px 24px var(--cdmx-guinda-soft), inset 0 1px 0 rgba(255,255,255,.16);
}

.radar-app > .timeline-dock #btn-play:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 28px var(--cdmx-guinda-soft), inset 0 1px 0 rgba(255,255,255,.18);
}

.radar-app > .timeline-dock .footer-speed-group {
    gap: 4px;
    border-radius: 18px !important;
    padding: 5px !important;
}

.radar-app > .timeline-dock .footer-speed-group .speed-btn {
    min-width: 3.1rem;
    padding: .45rem .8rem !important;
    font-size: .74rem !important;
    font-weight: 800;
}

.radar-app > .timeline-dock .footer-frame-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    min-width: 5rem;
    padding: 0 14px;
    border-radius: 16px;
    font-size: .74rem !important;
}

.radar-app > .timeline-dock .footer-timeline-card {
    position: relative;
    min-height: 78px;
    padding: 12px 16px 10px !important;
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--gold) 18%);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-solid) 80%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.radar-app > .timeline-dock .footer-timeline-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 20px 0 0 20px;
    background: linear-gradient(180deg, var(--cdmx-guinda), var(--gold));
    opacity: .9;
}

.radar-app > .timeline-dock .timeline-track {
    height: 24px;
}

.radar-app > .timeline-dock .timeline-rail,
.radar-app > .timeline-dock #progress-bar {
    height: 6px;
}

.radar-app > .timeline-dock .timeline-rail {
    background: linear-gradient(90deg, color-mix(in srgb, var(--border) 60%, transparent), color-mix(in srgb, var(--border) 80%, transparent));
}

.radar-app > .timeline-dock #progress-bar {
    background: linear-gradient(90deg, var(--cdmx-guinda), color-mix(in srgb, var(--gold) 38%, var(--cdmx-guinda-strong) 62%));
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 16px var(--cdmx-guinda-soft);
}

.radar-app > .timeline-dock #progress-thumb {
    width: 18px !important;
    height: 18px !important;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cdmx-guinda-soft) 82%, transparent), 0 8px 18px rgba(0,0,0,.14);
}

.radar-app > .timeline-dock #progress-thumb::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--gold) 44%, transparent);
    opacity: .75;
}

.radar-app > .timeline-dock .timeline-track:hover #progress-thumb {
    transform: translate(-50%, -50%) scale(1.16);
}

.radar-app > .timeline-dock .timeline-mark {
    width: 2px;
    height: 10px;
    opacity: .72;
}

.radar-app > .timeline-dock .timeline-mark.is-active {
    height: 18px;
    background: linear-gradient(180deg, var(--gold), var(--cdmx-guinda));
}

.radar-app > .timeline-dock .timeline-labels {
    margin-top: 7px;
    height: 18px;
}

.radar-app > .timeline-dock .timeline-label {
    font-size: .67rem !important;
}

.radar-app > .timeline-dock .timeline-label.is-active {
    color: var(--cdmx-guinda-strong);
    text-shadow: 0 0 10px color-mix(in srgb, var(--cdmx-guinda-soft) 90%, transparent);
}

.dark .radar-app > .timeline-dock .timeline-label.is-active {
    color: var(--gold);
}

.radar-app > .timeline-dock .footer-clock-badge:hover,
.radar-app > .timeline-dock .footer-timeline-card:hover,
.radar-app > .timeline-dock .footer-media-controls:hover,
.radar-app > .timeline-dock .footer-speed-group:hover,
.radar-app > .timeline-dock .footer-frame-pill:hover {
    box-shadow: 0 10px 22px rgba(28,22,25,.10), inset 0 1px 0 rgba(255,255,255,.26);
}

@media (max-width: 767px) {
    .radar-app > .timeline-dock .footer-shell {
        border-radius: 20px;
        padding: 12px 12px 14px;
    }

    .radar-app > .timeline-dock .footer-clock-badge,
    .radar-app > .timeline-dock .footer-media-controls,
    .radar-app > .timeline-dock .footer-speed-group,
    .radar-app > .timeline-dock .footer-frame-pill,
    .radar-app > .timeline-dock .footer-timeline-card {
        border-radius: 16px;
    }

    .radar-app > .timeline-dock .footer-actions {
        gap: 10px;
    }

    .radar-app > .timeline-dock .footer-timeline-card {
        padding: 12px 12px 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app > .timeline-dock .footer-clock-badge,
    .radar-app > .timeline-dock .footer-timeline-card,
    .radar-app > .timeline-dock .footer-media-controls,
    .radar-app > .timeline-dock .footer-speed-group,
    .radar-app > .timeline-dock .footer-frame-pill,
    .radar-app > .timeline-dock #btn-play {
        transition: none !important;
    }
}


/* === Fix v9: transiciones estables + responsive móvil desplegable === */
.radar-app .radar-layer {
    transition: none !important;
    will-change: auto !important;
}

.radar-app .radar-circle.frame-refresh {
    animation: radar-frame-refresh-v9 160ms ease-out;
}

@keyframes radar-frame-refresh-v9 {
    0% {
        filter: brightness(1);
        box-shadow: 0 0 0 1px var(--gold-soft), 0 20px 46px rgba(29, 27, 29, 0.20);
    }
    50% {
        filter: brightness(1.02);
        box-shadow: 0 0 0 2px var(--cdmx-guinda-soft), 0 0 0 6px rgba(197, 164, 103, 0.08), 0 20px 46px rgba(29, 27, 29, 0.20);
    }
    100% {
        filter: brightness(1);
        box-shadow: 0 0 0 1px var(--gold-soft), 0 20px 46px rgba(29, 27, 29, 0.20);
    }
}

.radar-app .mobile-panel-summary {
    display: none;
}

@media (max-width: 767px) {
    .radar-app > main {
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: .9rem !important;
        padding: 1rem .75rem 1rem !important;
    }

    .radar-app .radar-title-panel,
    .radar-app .radar-left-aux,
    .radar-app .radar-right-rail {
        width: 100% !important;
        max-width: none !important;
    }

    .radar-app .radar-left-aux,
    .radar-app .radar-right-rail {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .radar-app .radar-right-rail {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        padding-bottom: 0;
    }

    .radar-app .radar-mobile-panel {
        width: 100%;
        max-width: none;
    }

    .radar-app .mobile-panel-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        list-style: none;
        cursor: pointer;
        user-select: none;
        padding: .92rem 1rem;
        margin: 0;
        border-radius: 18px;
        border: 1px solid color-mix(in srgb, var(--border) 78%, var(--gold) 22%);
        background: linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 94%, white 6%), color-mix(in srgb, var(--surface) 96%, transparent));
        box-shadow: var(--shadow-soft);
        color: var(--text);
        font-size: .9rem;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .radar-app .mobile-panel-summary::-webkit-details-marker {
        display: none;
    }

    .radar-app .mobile-panel-summary::after {
        content: "expand_more";
        font-family: 'Material Icons';
        font-size: 1.15rem;
        color: var(--cdmx-guinda);
        transition: transform .22s ease;
    }

    .radar-app .radar-mobile-panel[open] > .mobile-panel-summary::after {
        transform: rotate(180deg);
    }

    .radar-app .radar-mobile-panel > .radar-side-panel {
        margin-top: .6rem;
    }

    .radar-app .radar-title-panel h1 {
        font-size: 2rem !important;
        line-height: 1.05 !important;
    }

    .radar-app .radar-title-panel p {
        font-size: .74rem !important;
    }

    .radar-app .radar-circle {
        width: min(92vw, 420px) !important;
        height: min(92vw, 420px) !important;
    }

    .radar-app .radar-detail-panel .font-mono.text-sm,
    .radar-app .radar-metrics-panel,
    .radar-app .reflectivity-panel {
        font-size: .9rem !important;
    }

    .radar-app .metrics-grid {
        grid-template-columns: 1fr !important;
    }

    .radar-app .footer-top,
    .radar-app .footer-bottom {
        gap: .85rem !important;
    }

    .radar-app .footer-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .radar-app .footer-media-controls,
    .radar-app .footer-speed-group,
    .radar-app .footer-frame-pill {
        width: 100%;
        justify-content: center;
    }

    .radar-app .footer-frame-pill {
        min-width: 0;
    }

    .radar-app .footer-timeline-card {
        width: 100%;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .radar-app #timeline-labels {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .radar-app #timeline-labels::-webkit-scrollbar {
        display: none;
    }

    .radar-app > button[onclick*="classList.toggle('dark')"] {
        bottom: 1rem !important;
        right: 1rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .mobile-panel-summary::after,
    .radar-app .radar-circle.frame-refresh {
        transition: none !important;
        animation: none !important;
    }
}


/* === v10: cambio de imagen estable + responsive sin amontonamiento === */
/* No se anima opacity/filter de la imagen: evita que el último corte quede oscuro en 2x. */
.radar-app .radar-layer {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

.radar-app .radar-circle.frame-refresh {
    animation: none !important;
    filter: none !important;
}

/* La imagen siempre debe quedar por encima del fondo del contenedor. */
.radar-app #radar-image-a {
    visibility: visible !important;
    opacity: 1 !important;
}

/* En teléfonos y tablets compactas los paneles dejan de competir por el canvas.
   Se convierten en tarjetas desplegables, dejando el radar como protagonista. */
@media (max-width: 1023px) {
    body.radar-app {
        height: auto !important;
        min-height: 100vh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .radar-app > main {
        min-height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
        padding: 1rem .85rem 1.25rem !important;
    }

    .radar-app .radar-title-panel,
    .radar-app .radar-left-aux,
    .radar-app .radar-right-rail {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .radar-app .radar-title-panel {
        order: 1 !important;
    }

    .radar-app > main > .order-2,
    .radar-app > main > div:nth-of-type(2) {
        order: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: .25rem 0 !important;
    }

    .radar-app .radar-right-rail {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: .85rem !important;
        padding-bottom: 0 !important;
    }

    .radar-app .radar-left-aux {
        order: 4 !important;
        padding-bottom: 0 !important;
    }

    .radar-app .radar-circle {
        width: min(86vw, 560px) !important;
        height: min(86vw, 560px) !important;
        margin: .25rem auto .5rem !important;
    }

    .radar-app .radar-mobile-panel {
        width: 100% !important;
        max-width: none !important;
    }

    .radar-app .mobile-panel-summary,
    .radar-app .md\\:hidden.mobile-panel-summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }

    .radar-app .radar-mobile-panel:not([open]) > .radar-side-panel {
        display: none !important;
    }

    .radar-app .radar-mobile-panel[open] > .radar-side-panel {
        display: block !important;
        animation: panel-open-v10 170ms ease-out;
        transform-origin: top center;
    }

    .radar-app .mobile-panel-summary {
        min-height: 52px;
        padding: .9rem 1rem !important;
        border-radius: 18px !important;
    }

    .radar-app .radar-side-panel {
        border-radius: 18px !important;
    }

    /* Footer: en ancho intermedio evita intentar meter todo en una sola fila. */
    .radar-app > .timeline-dock .footer-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .85rem !important;
    }

    .radar-app > .timeline-dock .footer-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .7rem !important;
    }

    .radar-app > .timeline-dock .footer-media-controls,
    .radar-app > .timeline-dock .footer-speed-group,
    .radar-app > .timeline-dock .footer-frame-pill {
        width: 100% !important;
        justify-content: center !important;
    }

    .radar-app > .timeline-dock .footer-timeline-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 520px) {
    .radar-app > header {
        padding-left: .9rem !important;
        padding-right: .9rem !important;
    }

    .radar-app > header img {
        max-width: min(280px, 78vw) !important;
        height: auto !important;
    }

    .radar-app .radar-title-panel {
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    .radar-app .radar-title-panel h1 {
        font-size: clamp(1.65rem, 8vw, 2rem) !important;
    }

    .radar-app .radar-circle {
        width: min(92vw, 430px) !important;
        height: min(92vw, 430px) !important;
    }

    .radar-app .radar-detail-panel {
        padding: 1rem !important;
    }

    .radar-app .radar-detail-panel .flex.justify-between {
        gap: 1rem;
        align-items: flex-start !important;
    }

    .radar-app .radar-detail-panel .flex.justify-between > span:last-child {
        max-width: 62%;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .radar-app .metrics-grid {
        grid-template-columns: 1fr !important;
    }

    .radar-app > .timeline-dock {
        padding: .65rem !important;
    }

    .radar-app > .timeline-dock .footer-shell {
        padding: 1rem .8rem !important;
        border-radius: 20px !important;
    }

    .radar-app > .timeline-dock .footer-top {
        align-items: stretch !important;
    }

    .radar-app > .timeline-dock .footer-clock-badge {
        width: 100%;
        justify-content: center;
    }

    .radar-app > .timeline-dock .footer-media-controls {
        display: grid !important;
        grid-template-columns: 1fr 1.25fr 1fr;
    }

    .radar-app > .timeline-dock #btn-prev,
    .radar-app > .timeline-dock #btn-next,
    .radar-app > .timeline-dock #btn-play {
        width: 100% !important;
    }

    .radar-app > .timeline-dock .footer-speed-group {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
    }

    .radar-app > .timeline-dock .footer-speed-group .speed-btn {
        min-width: 0 !important;
    }

    .radar-app > .timeline-dock .timeline-label {
        font-size: .58rem !important;
    }
}

@keyframes panel-open-v10 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .radar-mobile-panel[open] > .radar-side-panel {
        animation: none !important;
    }
}


/* === Footer cleanup v11: sin bloque blanco plano + mayor legibilidad === */
.radar-app > .timeline-dock {
    background: transparent !important;
    border-top-color: transparent !important;
    box-shadow: none !important;
    padding-top: 10px !important;
}

.dark .radar-app > .timeline-dock {
    background: transparent !important;
    border-top-color: transparent !important;
    box-shadow: none !important;
}

.radar-app > .timeline-dock::before {
    display: none !important;
}

.radar-app > .timeline-dock .footer-shell {
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--border) 74%, var(--gold) 26%);
    background:
        radial-gradient(circle at 14% 2%, color-mix(in srgb, var(--gold-soft) 100%, transparent), transparent 29%),
        radial-gradient(circle at 88% 98%, color-mix(in srgb, var(--cdmx-guinda-soft) 100%, transparent), transparent 24%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 94%, white 6%), color-mix(in srgb, var(--surface) 98%, transparent));
    box-shadow:
        0 22px 48px rgba(26, 23, 26, 0.12),
        0 8px 18px rgba(26, 23, 26, 0.06),
        inset 0 1px 0 rgba(255,255,255,.55);
}

.dark .radar-app > .timeline-dock .footer-shell {
    background:
        radial-gradient(circle at 12% 0%, rgba(197,164,103,.12), transparent 28%),
        radial-gradient(circle at 90% 100%, rgba(184,50,87,.12), transparent 24%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 97%, white 3%), color-mix(in srgb, var(--surface) 97%, black 3%));
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.28),
        0 10px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.radar-app > .timeline-dock h2 {
    color: var(--text) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.dark .radar-app > .timeline-dock h2 {
    text-shadow: none;
}

.radar-app > .timeline-dock #date-text {
    color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%) !important;
    font-weight: 600;
}

.radar-app > .timeline-dock #current-time {
    color: var(--text) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.24);
}

.dark .radar-app > .timeline-dock #current-time {
    text-shadow: 0 0 14px rgba(0,0,0,.18);
}

.radar-app > .timeline-dock .footer-clock-badge {
    border-color: color-mix(in srgb, var(--border) 68%, var(--gold) 32%);
    background: color-mix(in srgb, var(--surface-solid) 92%, white 8%);
}

.dark .radar-app > .timeline-dock .footer-clock-badge {
    background: color-mix(in srgb, var(--surface-solid) 92%, white 8%);
}

.radar-app > .timeline-dock .footer-media-controls,
.radar-app > .timeline-dock .footer-speed-group,
.radar-app > .timeline-dock .footer-frame-pill,
.radar-app > .timeline-dock .footer-timeline-card {
    border-color: color-mix(in srgb, var(--border) 78%, var(--gold) 22%);
    background: color-mix(in srgb, var(--surface-solid) 90%, white 10%);
}

.dark .radar-app > .timeline-dock .footer-media-controls,
.dark .radar-app > .timeline-dock .footer-speed-group,
.dark .radar-app > .timeline-dock .footer-frame-pill,
.dark .radar-app > .timeline-dock .footer-timeline-card {
    background: color-mix(in srgb, var(--surface-solid) 93%, white 7%);
}

.radar-app > .timeline-dock .footer-media-controls button,
.radar-app > .timeline-dock .footer-speed-group .speed-btn,
.radar-app > .timeline-dock .footer-frame-pill,
.radar-app > .timeline-dock .timeline-label,
.radar-app > .timeline-dock #frame-counter,
.radar-app > .timeline-dock #frame-total {
    color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%) !important;
}

.radar-app > .timeline-dock #speed-controls .speed-btn {
    font-weight: 800;
}

.radar-app > .timeline-dock #speed-controls .speed-btn.active-speed,
.radar-app > .timeline-dock #speed-controls .speed-btn.bg-white {
    color: #fff !important;
}

.radar-app > .timeline-dock .timeline-label {
    opacity: .9;
}

.radar-app > .timeline-dock .timeline-label.is-active {
    color: var(--cdmx-guinda) !important;
    opacity: 1;
}

.dark .radar-app > .timeline-dock .timeline-label.is-active {
    color: var(--gold) !important;
}

.radar-app > .timeline-dock .timeline-mark {
    background: color-mix(in srgb, var(--text) 28%, var(--border) 72%);
    opacity: .8;
}

.radar-app > .timeline-dock .timeline-rail {
    background: linear-gradient(90deg, color-mix(in srgb, var(--border) 74%, transparent), color-mix(in srgb, var(--text) 18%, var(--border) 82%));
}

.radar-app > .timeline-dock .footer-frame-pill {
    font-weight: 700;
}

@media (max-width: 767px) {
    .radar-app > .timeline-dock {
        padding-top: 8px !important;
        padding-bottom: 10px !important;
    }

    .radar-app > .timeline-dock .footer-shell {
        border-radius: 22px;
    }
}


/* === Footer v12: fondo exterior 100% transparente === */
.radar-app > .timeline-dock {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.radar-app > .timeline-dock::before,
.radar-app > .timeline-dock::after {
    display: none !important;
    content: none !important;
}

/* El único fondo visible es la tarjeta flotante interna. */
.radar-app > .timeline-dock .footer-shell {
    background:
        radial-gradient(circle at 14% 2%, var(--gold-soft), transparent 29%),
        radial-gradient(circle at 88% 98%, var(--cdmx-guinda-soft), transparent 24%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--surface-solid) 92%, transparent),
            color-mix(in srgb, var(--surface) 88%, transparent)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
}

.dark .radar-app > .timeline-dock .footer-shell {
    background:
        radial-gradient(circle at 12% 0%, rgba(197,164,103,.12), transparent 28%),
        radial-gradient(circle at 90% 100%, rgba(184,50,87,.12), transparent 24%),
        linear-gradient(145deg,
            rgba(23,26,29,.88),
            rgba(18,21,24,.80)) !important;
}

/* Evita que utilidades Tailwind bg-white / dark:bg-slate-900 vuelvan a pintar el footer. */
.radar-app > .timeline-dock.bg-white,
.dark .radar-app > .timeline-dock.dark\:bg-slate-900 {
    background: transparent !important;
}


/* === v13 · Retiro de lectura rápida + tipografía general más legible === */
.radar-app {
    font-size: 16px;
}

.radar-app .radar-detail-panel {
    padding: 1.35rem !important;
}

.radar-app .radar-detail-panel h3 {
    font-size: 0.84rem !important;
    letter-spacing: .15em !important;
    margin-bottom: 1.1rem !important;
}

.radar-app .radar-detail-panel .font-mono.text-sm {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.radar-app .radar-detail-panel .font-mono.text-sm > div {
    min-height: 1.8rem;
    gap: .9rem;
}

.radar-app .radar-detail-panel .text-slate-400 {
    font-size: 0.86rem !important;
    font-weight: 650 !important;
    letter-spacing: .045em;
    color: color-mix(in srgb, var(--text) 58%, var(--muted) 42%) !important;
}

.radar-app .radar-detail-panel .text-primary {
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
}

.radar-app .reflectivity-heading h3 {
    font-size: .82rem !important;
}

.radar-app .reflectivity-heading p {
    font-size: .74rem !important;
}

.radar-app .reflectivity-panel .dbz-scale b {
    font-size: .82rem !important;
}

.radar-app .reflectivity-panel .dbz-scale em {
    font-size: .76rem !important;
}

.radar-app .reflectivity-note {
    font-size: .72rem !important;
}

.radar-app > .timeline-dock h2 {
    font-size: .86rem !important;
}

.radar-app > .timeline-dock #date-text {
    font-size: .78rem !important;
}

.radar-app > .timeline-dock #current-time {
    font-size: 1.45rem !important;
}

.radar-app > .timeline-dock .timeline-label,
.radar-app > .timeline-dock #frame-counter,
.radar-app > .timeline-dock #frame-total,
.radar-app > .timeline-dock .footer-frame-pill {
    font-size: .72rem !important;
}

.radar-app #detail-modal .modal-data-label,
.radar-app #detail-modal .modal-stat-label {
    font-size: .72rem !important;
}

.radar-app #detail-modal .modal-data-value,
.radar-app #detail-modal .modal-stat-value {
    font-size: .9rem !important;
}

.radar-app #detail-modal .modal-section-title {
    font-size: .78rem !important;
}

@media (max-width: 767px) {
    .radar-app .radar-detail-panel .font-mono.text-sm {
        font-size: .96rem !important;
    }

    .radar-app .radar-detail-panel .text-slate-400 {
        font-size: .82rem !important;
    }

    .radar-app .radar-detail-panel .text-primary {
        font-size: .94rem !important;
    }
}


/* === v14 · Footer más delgado sin perder legibilidad === */
.radar-app > .timeline-dock {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.radar-app > .timeline-dock .footer-shell {
    gap: 10px !important;
    padding: 10px 14px 11px !important;
    border-radius: 22px !important;
}

.radar-app > .timeline-dock .footer-top {
    gap: 8px !important;
}

.radar-app > .timeline-dock .footer-title-block {
    gap: 1px !important;
}

.radar-app > .timeline-dock h2 {
    margin: 0 !important;
    line-height: 1.05 !important;
}

.radar-app > .timeline-dock #date-text {
    margin-top: 1px !important;
    line-height: 1.1 !important;
}

.radar-app > .timeline-dock .footer-clock-badge {
    padding: 7px 11px !important;
    min-height: 38px;
}

.radar-app > .timeline-dock #current-time {
    line-height: 1 !important;
}

.radar-app > .timeline-dock .footer-bottom {
    gap: 10px !important;
}

.radar-app > .timeline-dock .footer-media-controls,
.radar-app > .timeline-dock .footer-speed-group,
.radar-app > .timeline-dock .footer-frame-pill {
    padding: 4px !important;
    border-radius: 14px !important;
}

.radar-app > .timeline-dock .footer-media-controls {
    gap: 5px !important;
}

.radar-app > .timeline-dock #btn-prev,
.radar-app > .timeline-dock #btn-next {
    width: 2.15rem !important;
    height: 2.15rem !important;
}

.radar-app > .timeline-dock #btn-play {
    width: 2.55rem !important;
    height: 2.55rem !important;
    border-radius: 13px !important;
}

.radar-app > .timeline-dock .footer-speed-group .speed-btn {
    min-width: 2.65rem !important;
    padding: .32rem .62rem !important;
}

.radar-app > .timeline-dock .footer-frame-pill {
    min-height: 2.45rem !important;
    min-width: 4.35rem !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.radar-app > .timeline-dock .footer-timeline-card {
    min-height: 58px !important;
    padding: 8px 12px 6px !important;
    border-radius: 16px !important;
}

.radar-app > .timeline-dock .timeline-track {
    height: 18px !important;
}

.radar-app > .timeline-dock .timeline-rail,
.radar-app > .timeline-dock #progress-bar {
    height: 5px !important;
}

.radar-app > .timeline-dock #progress-thumb {
    width: 16px !important;
    height: 16px !important;
}

.radar-app > .timeline-dock .timeline-labels {
    height: 14px !important;
    margin-top: 2px !important;
}

.radar-app > .timeline-dock .timeline-label {
    line-height: 1 !important;
}

@media (min-width: 768px) {
    .radar-app > .timeline-dock .footer-shell {
        gap: 8px !important;
    }

    .radar-app > .timeline-dock .footer-bottom {
        align-items: center !important;
    }
}

@media (max-width: 767px) {
    .radar-app > .timeline-dock {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .radar-app > .timeline-dock .footer-shell {
        padding: 9px 10px 10px !important;
        gap: 8px !important;
        border-radius: 18px !important;
    }

    .radar-app > .timeline-dock .footer-top {
        align-items: center !important;
    }

    .radar-app > .timeline-dock .footer-clock-badge {
        padding: 6px 9px !important;
    }

    .radar-app > .timeline-dock .footer-timeline-card {
        min-height: 54px !important;
        padding: 7px 10px 5px !important;
    }
}


/* === v16 · Timeline como tarjeta en flujo + footer real al final === */
body.radar-app {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.radar-app > main {
    flex: 1 0 auto;
}

.radar-app > .timeline-dock {
    position: relative !important;
    flex: 0 0 auto;
    width: 100%;
    padding: 6px 14px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.radar-app > .timeline-dock::before {
    display: none !important;
}

.radar-app > .timeline-dock .footer-shell {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 9px 13px 10px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 10% 0%, var(--gold-soft), transparent 28%),
        radial-gradient(circle at 92% 100%, var(--cdmx-guinda-soft), transparent 24%),
        color-mix(in srgb, var(--surface-solid) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(118%);
    backdrop-filter: blur(14px) saturate(118%);
}

.dark .radar-app > .timeline-dock .footer-shell {
    background:
        radial-gradient(circle at 10% 0%, rgba(197,164,103,.09), transparent 28%),
        radial-gradient(circle at 92% 100%, rgba(184,50,87,.11), transparent 24%),
        rgba(20,23,26,.90) !important;
}

.radar-app > .timeline-dock .footer-timeline-card {
    background: color-mix(in srgb, var(--surface-solid) 84%, transparent) !important;
}

.radar-app > .copyright-footer {
    position: relative !important;
    flex: 0 0 auto;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 7px 12px 8px;
    border: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--text) 68%, var(--muted) 32%) !important;
    box-shadow: none !important;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
}

/* El botón de tema ya no necesita reservar la altura del footer antiguo. */
.radar-app > .theme-toggle {
    bottom: 1.1rem !important;
}

@media (max-width: 1023px) {
    .radar-app > .timeline-dock {
        padding: 6px 10px 8px !important;
    }

    .radar-app > .timeline-dock .footer-shell {
        border-radius: 17px !important;
    }
}

@media (max-width: 767px) {
    .radar-app > .timeline-dock {
        padding: 5px 7px 7px !important;
    }

    .radar-app > .timeline-dock .footer-shell {
        padding: 8px 9px 9px !important;
        border-radius: 15px !important;
    }

    .radar-app > .copyright-footer {
        padding: 7px 8px 9px;
        font-size: .61rem;
    }
}


/* ==========================================================================\n   v17 · Time Machine fuera del footer, aislado de estilos históricos\n   ========================================================================== */

/* La tarjeta de tiempo es una sección normal del documento, no un footer. */
.radar-app > .timeline-dock {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 14px 9px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.radar-app > .timeline-dock::before,
.radar-app > .timeline-dock::after {
    display: none !important;
}

.radar-app > .timeline-dock .timeline-card {
    width: min(100%, 1280px);
    padding: 9px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--gold) 24%);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 0%, var(--gold-soft), transparent 27%),
        radial-gradient(circle at 94% 100%, var(--cdmx-guinda-soft), transparent 23%),
        color-mix(in srgb, var(--surface-solid) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
    backdrop-filter: blur(14px) saturate(118%);
    box-shadow: 0 12px 30px rgba(31, 27, 30, .10), inset 0 1px 0 rgba(255,255,255,.34);
}

.dark .radar-app > .timeline-dock .timeline-card {
    background:
        radial-gradient(circle at 8% 0%, rgba(197,164,103,.09), transparent 27%),
        radial-gradient(circle at 94% 100%, rgba(184,50,87,.11), transparent 23%),
        rgba(20,23,26,.90);
    box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}

.radar-app .timeline-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.radar-app .timeline-card-title h2 {
    margin: 0;
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.radar-app .timeline-card-title h2::before {
    content: "➜";
    display: inline-block;
    margin-right: 7px;
    color: var(--gold-strong);
    font-size: .92rem;
    line-height: 1;
    transform: translateY(1px);
}

.radar-app .timeline-card-title p {
    margin: 2px 0 0;
    color: color-mix(in srgb, var(--text) 70%, var(--muted) 30%);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.15;
}

.radar-app .timeline-card-clock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 78%, var(--gold) 22%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-solid) 80%, transparent);
}

.radar-app .timeline-card-clock #current-time {
    color: var(--text) !important;
    font: 800 1rem/1 "JetBrains Mono", monospace !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.radar-app .timeline-card-clock .text-primary {
    font-size: .72rem !important;
    font-weight: 800;
}

.radar-app .timeline-card-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.radar-app .timeline-card-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.radar-app .timeline-media-controls,
.radar-app .timeline-speed-controls,
.radar-app .timeline-frame-counter,
.radar-app .timeline-track-card {
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--gold) 18%);
    background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.radar-app .timeline-media-controls {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 13px;
}

.radar-app .timeline-media-controls button {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: transform .15s ease, background-color .18s ease, box-shadow .18s ease;
}

.radar-app .timeline-media-controls button:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
}

.radar-app .timeline-media-controls #btn-play {
    width: 35px;
    height: 35px;
    color: #fff;
    background: linear-gradient(135deg, var(--cdmx-guinda), var(--cdmx-guinda-strong));
    box-shadow: 0 5px 14px var(--cdmx-guinda-soft);
}

.radar-app .timeline-speed-controls {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
}

.radar-app .timeline-speed-controls .speed-btn {
    min-width: 39px;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%);
    font-size: .69rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
}

.radar-app .timeline-speed-controls .speed-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
}

.radar-app .timeline-speed-controls .speed-btn.active-speed {
    color: #fff !important;
    background: var(--cdmx-guinda) !important;
    box-shadow: 0 3px 10px var(--cdmx-guinda-soft);
}

.radar-app .timeline-frame-counter {
    min-width: 54px;
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 11px;
    color: var(--text) !important;
    font: 800 .70rem/1 "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
}

.radar-app .timeline-frame-counter #frame-counter,
.radar-app .timeline-frame-counter #frame-total {
    color: var(--text) !important;
}

.radar-app .timeline-track-card {
    min-width: 0;
    padding: 6px 10px 5px;
    border-radius: 13px;
}

.radar-app .timeline-track-card .timeline-track {
    position: relative;
    height: 15px;
    display: flex;
    align-items: center;
}

.radar-app .timeline-track-card .timeline-rail,
.radar-app .timeline-track-card #progress-bar {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.radar-app .timeline-track-card .timeline-rail {
    width: 100%;
    background: color-mix(in srgb, var(--border) 72%, transparent);
}

.radar-app .timeline-track-card #progress-bar {
    width: 0;
    z-index: 2;
    background: linear-gradient(90deg, var(--cdmx-guinda), var(--gold));
    box-shadow: 0 0 8px var(--cdmx-guinda-soft);
    transition: width .24s ease-out;
}

.radar-app .timeline-track-card #progress-thumb {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 5;
    width: 13px !important;
    height: 13px !important;
    border: 2px solid var(--cdmx-guinda) !important;
    border-radius: 50%;
    background: var(--surface-solid) !important;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px var(--cdmx-guinda-soft);
    transition: left .24s ease-out;
}

.radar-app .timeline-track-card #progress-thumb::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--cdmx-guinda);
}

.radar-app .timeline-track-card #timeline-marks {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.radar-app .timeline-track-card .timeline-mark {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 28%, var(--border) 72%);
    transform: translate(-50%, -50%);
}

.radar-app .timeline-track-card .timeline-mark.is-active {
    width: 2px;
    height: 12px;
    background: var(--cdmx-guinda);
    box-shadow: 0 0 6px var(--cdmx-guinda-soft);
}

.radar-app .timeline-track-card .timeline-labels {
    position: relative;
    height: 14px;
    margin-top: 1px;
}

.radar-app .timeline-track-card .timeline-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    color: color-mix(in srgb, var(--text) 64%, var(--muted) 36%) !important;
    font: 650 .63rem/1 "JetBrains Mono", monospace !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.radar-app .timeline-track-card .timeline-label:first-child { transform: translateX(0); }
.radar-app .timeline-track-card .timeline-label:last-child { transform: translateX(-100%); }
.radar-app .timeline-track-card .timeline-label.is-active {
    color: var(--cdmx-guinda) !important;
    font-weight: 800 !important;
}
.dark .radar-app .timeline-track-card .timeline-label.is-active { color: var(--gold) !important; }

/* Footer verdadero: únicamente copyright al final del flujo. */
.radar-app > .copyright-footer {
    position: relative !important;
    flex: 0 0 auto;
    width: 100%;
    min-height: 24px;
    margin: 0;
    padding: 5px 10px 6px;
    border: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--text) 68%, var(--muted) 32%) !important;
    box-shadow: none !important;
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

/* Error de v16: el CSS apuntaba a .theme-toggle, pero el botón no tenía esa clase. */
.radar-app > .theme-toggle {
    bottom: 2.35rem !important;
}

@media (max-width: 900px) {
    .radar-app .timeline-card-body {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .radar-app .timeline-card-actions {
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .radar-app > .timeline-dock {
        padding: 5px 7px 7px !important;
    }
    .radar-app > .timeline-dock .timeline-card {
        padding: 8px 9px 9px;
        border-radius: 15px;
    }
    .radar-app .timeline-card-header {
        gap: 8px;
        margin-bottom: 6px;
    }
    .radar-app .timeline-card-title p {
        max-width: 52vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .radar-app .timeline-card-clock {
        padding: 5px 8px;
    }
    .radar-app .timeline-card-clock #current-time {
        font-size: .91rem !important;
    }
    .radar-app .timeline-card-actions {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 6px;
        align-items: center;
    }
    .radar-app .timeline-speed-controls {
        justify-self: center;
    }
    .radar-app .timeline-track-card {
        padding: 6px 8px 5px;
    }
}

@media (max-width: 430px) {
    .radar-app .timeline-card-title h2 { font-size: .70rem; }
    .radar-app .timeline-card-title p { font-size: .64rem; }
    .radar-app .timeline-speed-controls .speed-btn {
        min-width: 35px;
        padding: 5px 6px;
    }
    .radar-app .timeline-media-controls button { width: 29px; height: 29px; }
    .radar-app .timeline-media-controls #btn-play { width: 33px; height: 33px; }
    .radar-app .timeline-frame-counter { min-width: 48px; padding-inline: 6px; }
    .radar-app .timeline-track-card .timeline-label { font-size: .58rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .timeline-track-card #progress-bar,
    .radar-app .timeline-track-card #progress-thumb,
    .radar-app .timeline-media-controls button {
        transition: none !important;
    }
}


/* ======================================================================
   v19 · Paleta simplificada basada en los logotipos CDMX / SEGIAGUA
   Base: timeline-clean-v17. No modifica layout, tamaños ni funcionalidad.
   Guinda CDMX: #9F2149 · Turquesa SEGIAGUA: #038A82 · Oro: #A99969
   ====================================================================== */
body.radar-app {
    --cdmx-guinda: #9F2149;
    --cdmx-guinda-strong: #7E193A;
    --cdmx-guinda-soft: rgba(159, 33, 73, .12);
    --segiagua: #038A82;
    --segiagua-strong: #006F69;
    --segiagua-soft: rgba(3, 138, 130, .10);
    --gold: #A99969;
    --gold-strong: #887948;
    --gold-soft: rgba(169, 153, 105, .10);

    --bg: #E7E8E8;
    --bg-deep: #DADCDC;
    --surface: rgba(250, 250, 249, .96);
    --surface-solid: #F8F8F7;
    --surface-muted: #ECEDED;
    --border: #CACDCD;
    --border-soft: rgba(70, 75, 75, .13);
    --text: #292C2C;
    --muted: #676D6D;
    --shadow: 0 12px 30px rgba(35, 39, 39, .10);
    --shadow-soft: 0 5px 14px rgba(35, 39, 39, .07);
}

.dark body.radar-app {
    --cdmx-guinda: #B63B62;
    --cdmx-guinda-strong: #D25B7E;
    --cdmx-guinda-soft: rgba(182, 59, 98, .15);
    --segiagua: #22A69E;
    --segiagua-strong: #47BDB6;
    --segiagua-soft: rgba(34, 166, 158, .12);
    --gold: #B6A779;
    --gold-strong: #C8BA8C;
    --gold-soft: rgba(182, 167, 121, .08);

    --bg: #0F1213;
    --bg-deep: #0B0E0F;
    --surface: rgba(24, 28, 29, .96);
    --surface-solid: #181C1D;
    --surface-muted: #212627;
    --border: #353B3C;
    --border-soft: rgba(255,255,255,.075);
    --text: #F1F3F3;
    --muted: #A3AAAA;
    --shadow: 0 15px 36px rgba(0,0,0,.30);
    --shadow-soft: 0 7px 18px rgba(0,0,0,.20);
}

/* Encabezado: guinda sólido, sin gradientes decorativos. */
.radar-app > header,
.dark .radar-app > header {
    background: var(--cdmx-guinda) !important;
    border-bottom: 2px solid var(--gold) !important;
    box-shadow: 0 6px 18px rgba(79, 16, 38, .18) !important;
}

/* Fondo simple: la imagen de radar debe ser el elemento visual dominante. */
.radar-app > main {
    background: linear-gradient(180deg, var(--bg), var(--bg-deep)) !important;
}

/* Tarjetas neutrales con una sola firma guinda. */
.radar-app .radar-title-panel,
.radar-app .radar-side-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.radar-app .radar-title-panel,
.radar-app .radar-detail-panel,
.radar-app .reflectivity-panel {
    border-left: 3px solid var(--cdmx-guinda) !important;
    border-top-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
}

/* Identidad: guinda principal, turquesa secundario, dorado mínimo. */
.radar-app .text-primary,
.radar-app .radar-detail-panel .text-primary {
    color: var(--cdmx-guinda) !important;
}

.dark .radar-app .text-primary,
.dark .radar-app .radar-detail-panel .text-primary {
    color: var(--cdmx-guinda-strong) !important;
}

.radar-app h1 + p {
    color: var(--cdmx-guinda) !important;
}

.dark .radar-app h1 + p {
    color: var(--cdmx-guinda-strong) !important;
}

.radar-app .reflectivity-heading h3,
.radar-app .reflectivity-heading .material-icons,
.radar-app .reflectivity-note .material-icons {
    color: var(--segiagua) !important;
}

.dark .radar-app .reflectivity-heading h3,
.dark .radar-app .reflectivity-heading .material-icons,
.dark .radar-app .reflectivity-note .material-icons {
    color: var(--segiagua-strong) !important;
}

/* Quita barras/gradientes decorativos dorado-guinda de paneles. */
.radar-app > main h3::after {
    background: var(--cdmx-guinda) !important;
    opacity: .65 !important;
}

.radar-app .reflectivity-panel::before,
.radar-app .radar-metrics-panel::before {
    background: var(--cdmx-guinda) !important;
}

.radar-app .reflectivity-panel,
.dark .radar-app .reflectivity-panel,
.radar-app .radar-metrics-panel,
.dark .radar-app .radar-metrics-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Marco del radar neutro; no se altera forma ni tamaño. */
.radar-app .radar-circle,
.dark .radar-app .radar-circle {
    border-color: var(--border) !important;
    box-shadow: 0 18px 42px rgba(26, 30, 30, .16) !important;
}

.dark .radar-app .radar-circle {
    box-shadow: 0 20px 48px rgba(0,0,0,.42) !important;
}

.radar-app .expand-btn {
    color: var(--cdmx-guinda) !important;
    background: var(--surface-solid) !important;
    border-color: var(--border) !important;
}

/* Time Machine: casi monocromático; guinda sólo para estado/avance. */
.radar-app > .timeline-dock,
.dark .radar-app > .timeline-dock {
    background: transparent !important;
}

.radar-app > .timeline-dock .footer-shell {
    background: var(--surface-solid) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.radar-app > .timeline-dock .footer-shell::before {
    background: var(--cdmx-guinda) !important;
    opacity: .9 !important;
}

.radar-app > .timeline-dock #progress-bar {
    background: var(--cdmx-guinda) !important;
    box-shadow: none !important;
}

.radar-app > .timeline-dock #progress-thumb,
.radar-app > .timeline-dock .timeline-mark.is-active {
    border-color: var(--cdmx-guinda) !important;
    background: var(--cdmx-guinda) !important;
    box-shadow: 0 0 0 3px var(--cdmx-guinda-soft) !important;
}

.radar-app > .timeline-dock #progress-thumb::after {
    background: #fff !important;
}

.dark .radar-app > .timeline-dock #progress-thumb::after {
    background: #F0F2F2 !important;
}

.radar-app > .timeline-dock .timeline-label.is-active {
    color: var(--cdmx-guinda) !important;
}

.dark .radar-app > .timeline-dock .timeline-label.is-active {
    color: var(--cdmx-guinda-strong) !important;
}

.radar-app > .timeline-dock #speed-controls .speed-btn.active-speed,
.radar-app > .timeline-dock #btn-play,
.radar-app .bg-primary {
    background: var(--cdmx-guinda) !important;
    color: #fff !important;
}

/* Turquesa sólo como microacento funcional. */
.radar-app .mobile-panel-summary::after,
.radar-app .modal-section-title .material-icons {
    color: var(--segiagua) !important;
}

/* Modal más sobrio, sin fondos de varios colores. */
.radar-app .radar-detail-modal,
.radar-app .modal-data,
.radar-app .modal-visual {
    background: var(--surface-solid) !important;
    border-color: var(--border) !important;
}

.radar-app .modal-visual::after {
    background: transparent !important;
}

.radar-app .modal-data-value,
.radar-app .modal-meta-grid strong {
    color: var(--cdmx-guinda) !important;
}

.dark .radar-app .modal-data-value,
.dark .radar-app .modal-meta-grid strong {
    color: var(--cdmx-guinda-strong) !important;
}

/* Dorado reservado para líneas institucionales pequeñas, no superficies. */
.radar-app .modal-product-badge,
.radar-app .modal-dbz-help {
    background: var(--surface-muted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Botón de tema. */
.radar-app .theme-toggle {
    color: var(--cdmx-guinda) !important;
    background: var(--surface-solid) !important;
    border-color: var(--border) !important;
}

.dark .radar-app .theme-toggle {
    color: var(--segiagua-strong) !important;
}


/* === v21 · Transición de difuminado sutil entre cortes ===
   El cambio no oscurece ni reduce opacidad: la nueva imagen entra apenas
   desenfocada y recupera nitidez casi de inmediato. Funciona bien incluso en 2x. */
.radar-app .radar-circle.radar-frame-swap #radar-image-a {
    animation: radar-frame-soft-blur 155ms cubic-bezier(.22,.72,.24,1) !important;
    transform-origin: 50% 50%;
    will-change: filter, transform;
}

/* Desactiva el velo luminoso de v20: el efecto ahora ocurre sólo en la imagen. */
.radar-app .radar-circle.radar-frame-swap::after {
    content: none !important;
    display: none !important;
}

@keyframes radar-frame-soft-blur {
    0% {
        filter: blur(2.2px) saturate(.985);
        transform: scale(1.0025);
    }
    45% {
        filter: blur(.8px) saturate(.995);
        transform: scale(1.001);
    }
    100% {
        filter: blur(0) saturate(1);
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .radar-circle.radar-frame-swap #radar-image-a {
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }
}


/* === v22 · Fundido por opacidad entre imágenes ===
   La capa anterior permanece visible al 100% hasta que la nueva imagen ya cargó.
   Después, la nueva aparece encima con una transición corta. Nunca se funde a negro. */
.radar-app .radar-circle {
    --radar-fade-duration: 135ms;
}

.radar-app .radar-circle .radar-layer {
    opacity: 0;
    filter: none !important;
    transform: none !important;
    transition: opacity var(--radar-fade-duration) cubic-bezier(.22,.72,.24,1) !important;
    will-change: opacity;
}

.radar-app .radar-circle #radar-image-a {
    opacity: 1;
}

/* Anula por completo el difuminado de v21 y cualquier velo de versiones anteriores. */
.radar-app .radar-circle.radar-frame-swap #radar-image-a,
.radar-app .radar-circle.radar-frame-swap #radar-image-b {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

.radar-app .radar-circle.radar-frame-swap::after {
    content: none !important;
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .radar-circle .radar-layer {
        transition: none !important;
    }
}


/* === v23 · Crossfade visible y limpio ===
   Corrige el override heredado de v10 que forzaba opacity:1 !important y hacía
   invisible la transición de v22. La capa activa permanece visible mientras
   la entrante sube de 0 a 1, así nunca aparece un fondo negro. */
.radar-app .radar-circle {
    --radar-fade-duration: 215ms;
}

.radar-app .radar-circle #radar-image-a,
.radar-app .radar-circle #radar-image-b {
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: opacity var(--radar-fade-duration) cubic-bezier(.22,.68,.25,1) !important;
    will-change: opacity !important;
}

/* Estado inicial real. Durante la reproducción JS lo cambia con inline !important. */
.radar-app .radar-circle #radar-image-a { opacity: 1 !important; }
.radar-app .radar-circle #radar-image-b { opacity: 0 !important; }

/* Nada de velos, brillo, blur ni oscurecimiento durante el cambio. */
.radar-app .radar-circle.radar-frame-swap::before,
.radar-app .radar-circle.radar-frame-swap::after {
    content: none !important;
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .radar-app .radar-circle #radar-image-a,
    .radar-app .radar-circle #radar-image-b {
        transition-duration: 0ms !important;
    }
}


/* === v24 · Timeline fuera del footer + pie institucional mínimo ===
   La línea de tiempo permanece como sección independiente, justo antes del footer.
   El footer contiene únicamente el copyright y ocupa la menor altura legible. */
.radar-app > .timeline-dock {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding-bottom: 3px !important;
}

.radar-app > .copyright-footer {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 14px !important;
    margin: 0 !important;
    padding: 2px 8px 3px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .56rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

.radar-app > .theme-toggle {
    bottom: 1.15rem !important;
}

@media (max-width: 767px) {
    .radar-app > .timeline-dock {
        padding-bottom: 2px !important;
    }

    .radar-app > .copyright-footer {
        min-height: 13px !important;
        padding: 2px 6px !important;
        font-size: .52rem !important;
    }

    .radar-app > .theme-toggle {
        bottom: 1rem !important;
    }
}


/* === v25 · Eliminar la franja exterior detrás de Time Machine ===
   timeline-dock no dibuja ninguna superficie. El body continúa el color final
   del área principal para que la transparencia no revele una banda blanquecina. */
body.radar-app {
    background: var(--bg-deep) !important;
}

.radar-app > section.timeline-dock {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.radar-app > section.timeline-dock::before,
.radar-app > section.timeline-dock::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* === v26 · Selector de tema integrado al encabezado === */
.radar-app > header .header-brand {
    min-width: 0;
}

.radar-app > header .header-theme-toggle {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    color: var(--cdmx-guinda) !important;
    background: #fff !important;
    border-color: rgba(255, 255, 255, .45) !important;
    box-shadow: 0 4px 12px rgba(58, 10, 29, .22) !important;
}

.radar-app > header .header-theme-toggle:hover {
    color: var(--cdmx-guinda-strong) !important;
    transform: translateY(-1px);
}

.radar-app > header .header-theme-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .radar-app > header .header-brand img {
        max-width: min(280px, calc(100vw - 96px)) !important;
    }
}

/* === v27 · Selector de tema al extremo derecho del encabezado === */
.radar-app > header .header-theme-toggle {
    margin-left: auto !important;
}