/* =====================================================================================================
   Tema MedUX para las herramientas (design system "MedUX" de la organización).
   nginx lo inserta en cada página (sub_filter) cuando la cookie tema_ui no es "clasico".
   No cambia el código de ninguna herramienta: solo sobreescribe sus variables y algunos estilos.
   Marca: Montserrat, tinta petróleo #00506D sobre blanco, esquinas cuadradas, sin sombras, tablas con
   encabezado petróleo y la banda cian → amarillo.
   El Tablero QoS no lo carga: ya usa la marca.
   ===================================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

html:root, html:root[data-theme="light"]{
  color-scheme: light;
  --page:#f5f5f5; --surface:#ffffff; --surface-2:#eeeeee; --hover:rgba(0,80,109,.05);
  --ink:#00506d; --ink-2:#434343; --muted:#666666; --hair:#d8d8d8; --border:#d8d8d8;
  --brand:#00506d; --brand-ink:#ffffff; --accent:#00a7ce;
  --good:#01ac6f; --good-ink:#00734a; --crit:#d43c3b; --crit-bg:#fde4e3;
  --empty-fill:#eeeeee;
  --shadow:none; --pop:0 10px 30px rgba(0,80,109,.18);
  --r:0px;
  --mx-band:linear-gradient(90deg,#00a7ce 0%,#00b6e0 22%,#f0e204 67%,#f3eb72 85%,#57deee 100%);
  --mx-th:#00506d; --mx-th-ink:#ffffff;
}
@media (prefers-color-scheme: dark){
  html:root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#081a26; --surface:#0d2535; --surface-2:#123047; --hover:rgba(87,222,238,.06);
    --ink:#e6f3f7; --ink-2:#b9d1db; --muted:#8eaab6; --hair:#1d425a; --border:#1d425a;
    --brand:#00b6e0; --brand-ink:#0c2749; --accent:#57deee;
    --good-ink:#47d39c; --crit-bg:#3a1d1c; --empty-fill:#123047;
    --mx-th:#00506d; --mx-th-ink:#ffffff;
  }
}
html:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#081a26; --surface:#0d2535; --surface-2:#123047; --hover:rgba(87,222,238,.06);
  --ink:#e6f3f7; --ink-2:#b9d1db; --muted:#8eaab6; --hair:#1d425a; --border:#1d425a;
  --brand:#00b6e0; --brand-ink:#0c2749; --accent:#57deee;
  --good-ink:#47d39c; --crit-bg:#3a1d1c; --empty-fill:#123047;
  --mx-th:#00506d; --mx-th-ink:#ffffff;
}

/* ---- tipografía */
body, button, input, select, textarea, .leaflet-container{
  font-family: Montserrat, Arial, sans-serif !important;
}
body{letter-spacing:-.005em}
h1, h2, h3, .val{font-weight:700 !important}

/* ---- esquinas cuadradas y sin sombras (círculos y puntos se quedan redondos) */
.card, .btn, button, select, input, textarea, .chip, .seg, .seg button, .tab, .tabs, dialog, .modal,
.stat, .strip, .meter, .meter i, .bar, .bar i, .pill, .badge, .leg, .toast, .tt, .leaflet-tooltip,
.leaflet-popup-content-wrapper, .tbl-wrap, .notice, .err, .tool, .ic, .brand-mark, #map, #map2{
  border-radius:0 !important;
}
.card, .btn, .chip, dialog, .modal, .stat, .tool, .leaflet-bar, .leaflet-popup-content-wrapper{box-shadow:none !important}
.dot, .leaflet-marker-icon, input[type=checkbox], input[type=radio]{border-radius:50%}
input[type=checkbox]{border-radius:2px}

/* ---- cabecera: marca petróleo con píxeles y la banda cian → amarillo debajo */
header.top{border-bottom:0 !important; box-shadow:none !important}
header.top::after{content:""; display:block; height:5px; background:var(--mx-band)}
.brand-mark{background:#00506d !important; position:relative; overflow:visible; margin-right:9px}
.brand-mark::after{content:""; position:absolute; top:0; right:-9px; width:9px; height:9px; background:#f0e204;
  box-shadow:0 9px 0 #a2e6d8}
.brand h1{color:var(--ink)}
.brand small{text-transform:uppercase; letter-spacing:.06em; font-size:10.5px !important; font-weight:600 !important}

/* ---- botones, chips, pestañas */
.btn.primary{background:#00506d !important; color:#fff !important; border-color:#00506d !important}
.btn.primary:hover{filter:none; background:#0c2749 !important}
.chip[aria-pressed="true"]{background:#00506d !important; color:#fff !important; border-color:#00506d !important}
.seg button[aria-pressed="true"]{background:#a2e6d8 !important; color:#00506d !important}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:#00506d !important; color:#fff !important}
.tab[aria-selected="true"], .tab.on, .tabs .on{box-shadow:inset 0 -3px 0 #00b6e0 !important; border-color:transparent !important}
a.tool:hover{border-color:#00b6e0 !important; transform:none !important}
.tool .go{color:#00506d !important; font-weight:600}
:root[data-theme="dark"] .tool .go{color:#57deee !important}
.tool .ic{background:#a2e6d8 !important; color:#00506d !important}

/* ---- tablas: encabezado petróleo con texto blanco */
th{background:var(--mx-th) !important; color:var(--mx-th-ink) !important; border-bottom-color:var(--mx-th) !important}
th *{color:inherit}
th .dot{box-shadow:0 0 0 1.5px #fff}

/* ---- tarjetas de cifras y medidores */
.stat .val{color:var(--ink)}
.meter{background:var(--surface-2) !important}

/* ---- banda de marca al pie de la página */
body::after{content:""; position:fixed; left:0; right:0; bottom:0; height:4px; background:var(--mx-band); z-index:2000; pointer-events:none}