html, body {
    margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
    font-size: 10pt; overflow: auto; height: 100%;
}
div#map_container     { float: left; width: 100%; height: 100%; }
div#map_canvas        { height: 100%; margin-right: 420px; }

/* Rosa de los vientos — discreta, esquina inferior izquierda del mapa */
#compass_rose {
    position: absolute; left: 14px; bottom: 52px; width: 62px; height: 62px;
    z-index: 40; opacity: .55; pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.6));
    transition: opacity .2s ease;
}
#compass_rose:hover { opacity: .85; }
#compass_rose text {
    font: 700 11px Tahoma, Sans-Serif; fill: #cfe3ff;
    text-anchor: middle; dominant-baseline: middle;
    paint-order: stroke; stroke: #0a1119; stroke-width: 2.5px;
}
#compass_rose text.cr-n { fill: #38b6ff; }

div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }

div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
    background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;
    text-align: center; }

div#update_error { position: absolute; bottom: 25px; left: 25px; border: 2px solid red;
    background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;
    text-align: center; }

div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: 0.8; filter: alpha(opacity=80); }
#spinny { width: 128px; height: 128px; position: absolute; top: 50%; left: 50%; margin: -64px 0 0 -64px; }
#loader_progress { width: 250px; height: 20px; position: absolute; top: 50%; left: 50%; margin: 128px 0 0 -125px; }

#tableinfo, #sudo_buttons { font-size: x-small; font-family: monospace; }

.vPosition  { font-weight: bold; background-color: #d5ffd5; }
.mlat       { font-weight: bold; background-color: #d5d5ff; }
/* Emergencias en ROJO pulsante (Radar del Delta) */
@keyframes emergPulse { 0%,100%{ background-color:#ff2b2b; } 50%{ background-color:#8b0000; } }
.squawk7500 td, .squawk7600 td, .squawk7700 td { font-weight:bold; color:#fff !important; animation: emergPulse 1.1s ease-in-out infinite; }
/* referencia: 7500=secuestro, 7600=falla radio, 7700=emergencia general */
.selected   { background-color: #dddddd; }
.plane_table_row { cursor: pointer; }
.hidden { display: none; }

.infoblock_heading    { font-size: larger; }
.infoblock_heading a  { text-decoration: none; color: blue; font-size: x-small;}
.infoblock_body       { font-size: small; }

#selected_icao { font-size: x-small; }
#selected_registration { font-size: x-small; }
#selected_icaotype { font-size: x-small; }

.dim    { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }

.pointer { cursor: pointer; }



/* ===== Panel Copernicus — identidad de marca (solo el frame derecho; el mapa no se toca) ===== */
html, body { background-color: #0E1A2B !important; }
#sidebar_container, #sidebar_canvas { background-color: #0E1A2B !important; color: #C6D5E0; font-family: 'Inter', system-ui, sans-serif; }
/* línea divisoria como box-shadow inset: un border real suma 1px al ancho y rompe
   el layout de float con margin-left:-410px de dump1090 (el panel se va de pantalla) */
#sidebar_container { box-shadow: inset 1px 0 0 rgba(255,255,255,.10); }
#sidebar_container a, #sidebar_container a:link, #sidebar_container a:visited, .infoblock_heading a { color: #D9A441; text-decoration: none; }
#sidebar_container a:hover { text-decoration: underline; }
#infoblock_name { color: #F4EFE6; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .03em; }
.infoblock_heading b { color: #F4EFE6; }
#sidebar_container table, #sidebar_container tbody, #sidebar_container tr, #sidebar_container td { background: transparent !important; }
#tableinfo, #sudo_buttons { font-family: 'JetBrains Mono', ui-monospace, monospace; }
#tableinfo thead, #tableinfo thead td { background-color: rgba(217,164,65,.10) !important; color: #D9A441 !important; font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-size: 10px; }
#tableinfo td { border-color: rgba(255,255,255,.07) !important; }
.plane_table_row td { color: #C6D5E0; }
.plane_table_row.vPosition td { background-color: rgba(255,255,255,.030) !important; }
.plane_table_row.mlat td { background-color: rgba(74,157,240,.10) !important; }
.plane_table_row.selected td, .plane_table_row:hover td { background-color: rgba(217,164,65,.14) !important; }
.plane_table_row.selected td { color: #F4EFE6; }
#sidebar_container .squawk7500 td, #sidebar_container .squawk7600 td, #sidebar_container .squawk7700 td { color: #ffffff !important; }
#utcclock, #receiverclock { display: none !important; }
.digiclock { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 22px; font-weight: 500; color: #F4EFE6; letter-spacing: 2px; }
#timestamps td { color: #8FA3B4; font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
#enrich_box { background: rgba(217,164,65,.06) !important; border-top: 1px solid rgba(255,255,255,.12) !important; }

/* ===== Footer tecnico ===== */
#radar-footer { margin: 16px 10px 22px; padding: 12px 12px 4px; border-top: 1px solid rgba(255,255,255,.10); font-size: 11.5px; line-height: 1.55; color: #8FA3B4; }
#radar-footer .rf-title { font-family: 'Jost', sans-serif; font-weight: 600; color: #F4EFE6; margin-bottom: 6px; font-size: 13px; letter-spacing: .03em; }
#radar-footer p { margin: 7px 0; }
#radar-footer b { color: #DCE7F0; }
#radar-footer a { color: #D9A441; }