/* DriveIQ — formato común de las apps (7-oct-2026). Mismas medidas que ColdChain/AssetTrack:
   fondo gris, tarjeta izquierda (marca, empresa, menú) y tarjeta derecha (cabecera + una vista),
   esquinas de 18, menú de 250 con el activo marcado a la izquierda. En el celular (≤700 px) el menú
   es un cajón y abajo hay una barra fija. Solo cambia el color propio de DriveIQ (naranja).
   El naranja de la marca (#F97316) con letra blanca no llega a 4,5 de contraste: el acento para
   TEXTO y BOTONES es uno más oscuro de la misma familia (#C2410C = 5,2 sobre blanco). */
:root {
  --diq-shell: #eef2f7;
  --diq-surf: var(--bg-panel, #fff);
  --diq-borde: #e2e8f0;
  --diq-texto: #1e293b;
  --diq-tenue: #475569;
  --diq-acc: #c2410c;
  --diq-accbg: #fff1e8;
  --diq-ok: #15803d; --diq-ok-bg: #e7f6ec;
  --diq-media: #a15c00; --diq-media-bg: #fff4e0;
  --diq-baja: #b42318; --diq-baja-bg: #fdecea;
  --diq-sk: #e6e9ef;
  --diq-foco: #c2410c;
}
[data-theme="dark"] {
  --diq-shell: #0a0e14;
  --diq-surf: #0f1a2e;
  --diq-borde: #1c2a44;
  --diq-texto: #e6edf3;
  --diq-tenue: #a7b1bf;
  --diq-acc: #fb923c;
  --diq-accbg: #2a1c12;
  --diq-ok: #4ade80; --diq-ok-bg: #12261a;
  --diq-media: #fbbf24; --diq-media-bg: #2a2312;
  --diq-baja: #f87171; --diq-baja-bg: #2d1717;
  --diq-sk: #1f2a3d;
  --diq-foco: #fb923c;
}

body { background: var(--diq-shell); }
.diq-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Las dos tarjetas ──────────────────────────────────────────────────────── */
.diq-shell { display: flex; gap: 14px; padding: 14px; min-height: 100vh; align-items: flex-start; }
.diq-side {
  width: 250px; flex: none; position: sticky; top: 14px; height: calc(100vh - 28px); overflow-y: auto;
  background: var(--diq-surf); border: 1px solid var(--diq-borde); border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 14px; display: flex; flex-direction: column; gap: 4px; z-index: 40;
}
.diq-shell.sin-menu .diq-side { display: none; }
.diq-main {
  flex: 1; min-width: 0; background: var(--diq-surf); border: 1px solid var(--diq-borde); border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); min-height: calc(100vh - 28px); outline: none;
}
.diq-marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid var(--diq-borde);
  font-size: 1.1rem; font-weight: 700; color: var(--diq-texto); }
.diq-empresa { display: flex; flex-direction: column; gap: 4px; margin: 8px 4px 6px; font-size: .75rem; color: var(--diq-tenue); font-weight: 600; }

/* ── Menú ── */
.diq-nav { display: flex; flex-direction: column; gap: 2px; }
.diq-nav-it {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; cursor: pointer;
  color: var(--diq-tenue); border: 0; border-left: 3px solid transparent; border-radius: 11px;
  padding: 9px 11px; font-size: .86rem; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s;
}
.diq-nav-it .diq-ico { flex: none; opacity: .8; }
.diq-nav-it:hover { color: var(--diq-texto); background: var(--diq-accbg); }
.diq-nav-it[aria-current="page"] { color: var(--diq-acc); background: var(--diq-accbg); border-left-color: var(--diq-acc); }
.diq-nav-it[aria-current="page"] .diq-ico { opacity: 1; }
.diq-nav-sep { margin: 12px 11px 4px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--diq-tenue); font-weight: 600; }
.diq-sys { margin-top: auto; padding: 12px 6px 0; border-top: 1px solid var(--diq-borde); font-size: .78rem; color: var(--diq-tenue);
  display: flex; flex-direction: column; gap: 6px; }
.diq-sys > div { display: flex; justify-content: space-between; gap: 8px; }
.diq-sys b { color: var(--diq-texto); font-weight: 600; text-align: right; }
.diq-sys-t { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* ── Cabecera de la tarjeta derecha ── */
.diq-mhead { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--diq-surf); border-bottom: 1px solid var(--diq-borde); border-radius: 18px 18px 0 0; }
.diq-periodo { display: flex; align-items: center; gap: 8px; }
.diq-mhead-acc { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diq-contenido { padding: 22px; }

/* ── Controles ── */
.diq-campo { height: 36px; padding: 0 10px; border: 1px solid var(--diq-borde); border-radius: 8px; background: var(--diq-surf);
  color: var(--diq-texto); font-size: .86rem; min-width: 0; }
.diq-campo-sm { height: 34px; }
.diq-btn { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--diq-borde);
  border-radius: 8px; background: var(--diq-surf); color: var(--diq-texto); font-size: .86rem; font-weight: 500; cursor: pointer; }
.diq-btn-sm { height: 34px; padding: 0 12px; }
.diq-btn:hover { background: var(--diq-accbg); }
.diq-btn-pri { background: var(--diq-acc); border-color: var(--diq-acc); color: #fff; }
.diq-btn-pri:hover { background: var(--diq-acc); filter: brightness(.92); }
[data-theme="dark"] .diq-btn-pri { color: #1a0f05; }
.diq-icono-btn { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--diq-borde); border-radius: 8px; background: var(--diq-surf); color: var(--diq-texto); cursor: pointer; padding: 0; }
.diq-icono-btn:hover { background: var(--diq-accbg); }
.diq-insignia { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--diq-baja); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
.diq-enlace { background: none; border: 0; padding: 4px 0; color: var(--diq-acc); font-size: .82rem; font-weight: 600; cursor: pointer; }
.diq-enlace:hover { text-decoration: underline; }
:where(.diq-shell, .diq-filtros, .diq-barra-cel) :is(button, select, input, a):focus-visible { outline: 2px solid var(--diq-foco); outline-offset: 2px; }

/* ── Vistas ── */
.diq-vista-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.diq-vista-cab h2 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--diq-texto); }
.diq-vista-cab p, .diq-sub { margin: 4px 0 0; color: var(--diq-tenue); font-size: .86rem; }
.diq-tarjeta { background: var(--diq-surf); border: 1px solid var(--diq-borde); border-radius: 14px; padding: 16px; }
.diq-tarjeta h3 { font-size: .95rem; font-weight: 700; margin: 0; color: var(--diq-texto); }
.diq-tarjeta p { color: var(--diq-tenue); font-size: .86rem; margin: 6px 0 12px; }
.diq-tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.diq-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 4px; }
.diq-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.diq-lista { display: flex; flex-direction: column; margin-top: 8px; }
.diq-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  padding: 10px 2px; min-height: 44px; border: 0; border-top: 1px solid var(--diq-borde); background: none; color: var(--diq-texto); font-size: .88rem; }
.diq-fila:first-child { border-top: 0; }
button.diq-fila { cursor: pointer; border-radius: 6px; }
button.diq-fila:hover { background: var(--diq-accbg); }
.diq-fila-t { display: flex; flex-direction: column; min-width: 0; }
.diq-fila-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.diq-fila-s { color: var(--diq-tenue); font-size: .8rem; white-space: nowrap; }
.diq-nota, .diq-grav { display: inline-block; min-width: 40px; text-align: center; padding: 2px 9px; border-radius: 999px; font-weight: 700;
  font-size: .82rem; font-variant-numeric: tabular-nums; }
.diq-nota-ok, .diq-grav-bajo { color: var(--diq-ok); background: var(--diq-ok-bg); }
.diq-nota-media, .diq-grav-medio { color: var(--diq-media); background: var(--diq-media-bg); }
.diq-nota-baja, .diq-grav-alto { color: var(--diq-baja); background: var(--diq-baja-bg); }
.diq-grav { min-width: 0; font-weight: 600; }
.diq-vacio { color: var(--diq-tenue); font-size: .88rem; padding: 14px 2px; margin: 0; text-align: left; }
td.diq-vacio { text-align: center; padding: 22px; }

/* «cargando»: un bloque gris quieto (con movimiento solo si la persona no lo ha desactivado) */
.diq-sk { display: inline-block; width: 64px; height: 1em; border-radius: 6px; background: var(--diq-sk); vertical-align: middle; }
.diq-sk-fila { display: block; width: 100%; height: 38px; margin: 6px 0; }
@media (prefers-reduced-motion: no-preference) { .diq-sk { animation: diq-sk 1.4s ease-in-out infinite; } }
@keyframes diq-sk { 50% { opacity: .55; } }

/* ── Buscadores ── */
.diq-busca { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.diq-busca input[type="search"] { flex: 1 1 240px; }
.diq-busca-n { color: var(--diq-tenue); font-size: .82rem; }

/* Las secciones de antes dentro de su vista: sin márgenes de página larga */
.diq-vista > .card, .diq-vista > div > .card { border-radius: 14px; }
.diq-vista #coachingSection, .diq-vista #rankingSection, .diq-vista #indicadoresSection, .diq-vista #analisisSection { margin-top: 0 !important; }

/* ── Filtros: panel a la derecha, en todas las pantallas ── */
.diq-filtros {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); z-index: 1060; overflow-y: auto;
  background: var(--diq-surf); border-left: 1px solid var(--diq-borde); box-shadow: -12px 0 40px rgba(0,0,0,.18);
  padding: 16px; transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility .22s;
}
.diq-filtros.abierto { transform: none; visibility: visible; }
.diq-filtros > .card { border: 0; padding: 0 !important; background: transparent; }
#sidebarBackdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1055; display: none; }
#sidebarBackdrop.activo { display: block; }
.diq-velo { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 45; }

/* ── Celular ── */
.diq-barra-cel { display: none; }
@media (max-width: 700px) {
  .diq-shell { padding: 0; gap: 0; display: block; }
  .diq-side { position: fixed; left: 10px; top: 10px; height: calc(100vh - 20px); transform: translateX(-115%); transition: transform .25s ease;
    z-index: 50; box-shadow: 0 12px 44px rgba(0,0,0,.3); }
  .diq-side.abierto { transform: none; }
  .diq-shell.sin-menu .diq-side { display: flex; }
  .diq-main { border: 0; border-radius: 0; min-height: 100vh; }
  .diq-mhead { border-radius: 0; padding: 10px 12px; }
  .diq-mhead-acc { gap: 6px; }
  .diq-solo-escritorio, #diqMenuBtn { display: none; }
  .diq-contenido { padding: 14px 12px 88px; }
  .diq-barra-cel { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--diq-surf); border-top: 1px solid var(--diq-borde); padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
  .diq-cel-it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px;
    background: none; border: 0; color: var(--diq-tenue); font-size: .7rem; font-weight: 600; cursor: pointer; }
  .diq-cel-it[aria-current="page"], .diq-cel-it.activo { color: var(--diq-acc); }
  .diq-campo, .diq-btn, .diq-icono-btn { height: 40px; }
  .diq-icono-btn { width: 40px; }
  .diq-vista .table-responsive { overflow-x: auto; }
}

/* Barras de las tarjetas de arriba: la pista medía 4 px con 12 px de relleno dentro (con border-box el
   relleno se come el alto) y la parte de color quedaba en 0 px: nunca se veía. */
.kpi-bar-track { box-sizing: content-box; padding-top: 0; height: 6px; border-radius: 3px; }
.kpi-label { margin-bottom: 12px; }

/* Impacto: tarjetas sobrias como el resto (antes, ocho degradados saturados con letra blanca de 10 px).
   El color queda en el icono; el número, en el color del texto. */
.diq-vista .diq-imp-card, .diq-vista .diq-imp-dynamic.risk-yellow, .diq-vista .diq-imp-dynamic.risk-red {
  background: var(--diq-surf) !important; border: 1px solid var(--diq-borde) !important; color: var(--diq-texto) !important;
  min-height: 0; border-radius: 14px; }
.diq-vista .diq-imp-card:hover { transform: none; box-shadow: none; }
.diq-vista .diq-imp-val { font-size: 1.6rem; font-weight: 700; letter-spacing: 0; color: var(--diq-texto); }
.diq-vista .diq-imp-lbl { font-size: .82rem; opacity: 1; color: var(--diq-texto); }
.diq-vista .diq-imp-sub { font-size: .76rem; opacity: 1; color: var(--diq-tenue); }
.diq-vista .diq-imp-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--diq-accbg) !important; color: var(--diq-acc) !important; }
.diq-vista .diq-imp-red .diq-imp-icon, .diq-vista .diq-imp-dynamic.risk-red .diq-imp-icon { background: var(--diq-baja-bg) !important; color: var(--diq-baja) !important; }
.diq-vista .diq-imp-green .diq-imp-icon, .diq-vista .diq-imp-emerald .diq-imp-icon { background: var(--diq-ok-bg) !important; color: var(--diq-ok) !important; }
.diq-vista .diq-imp-dynamic.risk-red .diq-imp-val { color: var(--diq-baja); }
.diq-vista .diq-imp-dynamic.risk-yellow .diq-imp-val { color: var(--diq-media); }
.diq-vista .diq-imp-bar { background: var(--diq-sk) !important; }
.diq-vista .diq-imp-bar-fill { background: var(--diq-acc) !important; }

/* Logros: el nombre del vehículo se leía cortado («Transpaica mack...»); ahora tiene el ancho que pide. */
.diq-vista .diq-badge-driver-name { width: auto; min-width: 180px; max-width: 46%; flex: 0 1 auto; white-space: normal; overflow: visible; text-overflow: clip; }

/* MODO OSCURO: styles.css trae «[data-theme="dark"] * { background-color: inherit !important }», que borra
   el fondo de todo. Las piezas nuevas que SÍ tienen fondo propio lo vuelven a declarar aquí (con más
   especificidad que esa regla). Medido el 7-oct: el botón «Generar informe» quedaba con la letra invisible. */
[data-theme="dark"] .diq-side, [data-theme="dark"] .diq-main, [data-theme="dark"] .diq-mhead,
[data-theme="dark"] .diq-filtros, [data-theme="dark"] .diq-barra-cel, [data-theme="dark"] .diq-tarjeta { background-color: var(--diq-surf) !important; }
[data-theme="dark"] .diq-shell { background-color: var(--diq-shell) !important; }
[data-theme="dark"] .diq-btn-pri { background-color: var(--diq-acc) !important; }
[data-theme="dark"] .diq-nav-it[aria-current="page"], [data-theme="dark"] .diq-nav-it:hover,
[data-theme="dark"] .diq-btn:not(.diq-btn-pri):hover, [data-theme="dark"] .diq-icono-btn:hover,
[data-theme="dark"] button.diq-fila:hover { background-color: var(--diq-accbg) !important; }
[data-theme="dark"] .diq-nota-ok, [data-theme="dark"] .diq-grav-bajo { background-color: var(--diq-ok-bg) !important; }
[data-theme="dark"] .diq-nota-media, [data-theme="dark"] .diq-grav-medio { background-color: var(--diq-media-bg) !important; }
[data-theme="dark"] .diq-nota-baja, [data-theme="dark"] .diq-grav-alto { background-color: var(--diq-baja-bg) !important; }
[data-theme="dark"] .diq-insignia { background-color: var(--diq-baja) !important; }
[data-theme="dark"] .diq-sk { background-color: var(--diq-sk) !important; }
[data-theme="dark"] .diq-velo, [data-theme="dark"] #sidebarBackdrop { background-color: rgba(0,0,0,.55) !important; }
[data-theme="dark"] .kpi-bar-track { background-color: var(--diq-sk) !important; }

/* Celular: idioma, tema y manual van en el menú lateral; en escritorio, en la cabecera. */
.diq-side-cel { display: none; }
@media (max-width: 700px) {
  .diq-side-cel { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--diq-borde); }
  .diq-periodo { flex: 1; min-width: 0; }
  .diq-periodo .diq-campo { flex: 1; min-width: 0; }
}

/* Eventos: columnas sin ningún dato en la lista, fuera (app.js pone las clases). */
#eventsTable.sin-velocidad .ev-col-vel, #eventsTable.sin-lugar .ev-col-lugar { display: none; }
/* Ranking en el celular: la tabla se desplaza dentro de su tarjeta, nunca la página. */
.diq-vista #rankingSection .card-body, .diq-vista #driversSection .card-body { overflow-x: auto; }

/* CONTRASTE (verificador, 7-oct): todas las insignias y pastillas con los colores medidos de este sistema
   (≥ 4,5 en claro y en oscuro). */
:root:not([data-theme="dark"]) { --diq-ok: #166534; }
.kpi-badge.diq-nota-ok, .kpi-badge.diq-nota-media, .kpi-badge.diq-nota-baja { font-size: 11px; }
.kpi-badge-blue { color: #1d4ed8 !important; background-color: #e0ecff !important; }
[data-theme="dark"] .kpi-badge-blue { color: #93c5fd !important; background-color: #13233f !important; }
.diq-vista .score-badge.score-good { color: var(--diq-ok) !important; background-color: var(--diq-ok-bg) !important; border-color: transparent !important; }
.diq-vista .score-badge.score-mid  { color: var(--diq-media) !important; background-color: var(--diq-media-bg) !important; border-color: transparent !important; }
.diq-vista .score-badge.score-bad  { color: var(--diq-baja) !important; background-color: var(--diq-baja-bg) !important; border-color: transparent !important; }
.diq-vista .score-badge.score-badge-texto { color: var(--diq-tenue) !important; background-color: var(--diq-sk) !important; font-weight: 500; }
.diq-coaching-legend.urgent { color: var(--diq-baja); }
.diq-coaching-legend.moderate { color: var(--diq-media); }
.diq-coaching-legend.good { color: var(--diq-ok); }
.diq-coaching-legend.sin { color: var(--diq-tenue); }
.diq-vista .diq-rank-avatar { color: var(--diq-acc) !important; background-color: var(--diq-accbg) !important; }
.diq-vista #retosSection .card-body, .diq-vista #retosBody { overflow-x: auto; }

/* Contraste en claro (verificador, 2.ª vuelta): podio, avatares, pastillas de meses, textos tenues. */
.diq-vista .diq-pod-rank, .diq-vista .diq-pod-avatar, .diq-vista .diq-coach-avatar { color: var(--diq-acc) !important; background-color: var(--diq-accbg) !important; }
.diq-vista .diq-month-pill-score { color: var(--diq-acc) !important; }
.diq-vista .diq-month-pill-label, .diq-vista .text-muted, .diq-vista small.text-muted { color: var(--diq-tenue) !important; }
.diq-vista .diq-analisis-kpi-label { color: var(--diq-tenue) !important; }
.diq-fila-pendiente td:first-child { box-shadow: inset 3px 0 0 var(--diq-media); }   /* marca lateral, sin oscurecer el texto */


/* CONTRASTE EN UN SOLO SITIO (3.ª vuelta del verificador): el gris de los textos secundarios de toda la
   pantalla (--text-muted / --text-secondary de styles.css y el de Bootstrap) era #6c757d = 4,41 sobre
   blanco. En claro pasa a #4b5563 (7,6). Así se corrigen de una vez los ~50 sitios que lo usan. */
:root:not([data-theme="dark"]), body:not([data-theme="dark"]) { --text-secondary: #4b5563; --text-muted: #4b5563; --bs-secondary-color: #4b5563; --bs-gray-600: #4b5563; }
:root:not([data-theme="dark"]) .text-muted, :root:not([data-theme="dark"]) th { color: #374151; }
.diq-rank-score-badge.diq-score-good { color: var(--diq-ok) !important; background-color: var(--diq-ok-bg) !important; }
.diq-rank-score-badge.diq-score-mid  { color: var(--diq-media) !important; background-color: var(--diq-media-bg) !important; }
.diq-rank-score-badge.diq-score-bad  { color: var(--diq-baja) !important; background-color: var(--diq-baja-bg) !important; }
/* Pastillas y distintivos verdes/ámbar de Análisis y el período de Impacto: tonos del sistema. */
.diq-vista .diq-badge-chip-green, .diq-vista .diq-trend-up { color: var(--diq-ok) !important; background-color: var(--diq-ok-bg) !important; }
.diq-vista .diq-badge-chip-gold { color: var(--diq-media) !important; background-color: var(--diq-media-bg) !important; }
.diq-vista .diq-trend-down { color: var(--diq-baja) !important; background-color: var(--diq-baja-bg) !important; }
.diq-vista #impPeriodBadge { color: var(--diq-acc) !important; background-color: var(--diq-accbg) !important; }
/* Todas las pastillas de Logros con pares de color medidos (≥ 4,5) en claro y oscuro. */
.diq-vista .diq-badge-chip-blue   { color: #1d4ed8 !important; background-color: #e0ecff !important; }
.diq-vista .diq-badge-chip-purple { color: #6d28d9 !important; background-color: #efe9ff !important; }
[data-theme="dark"] .diq-vista .diq-badge-chip-blue   { color: #93c5fd !important; background-color: #13233f !important; }
[data-theme="dark"] .diq-vista .diq-badge-chip-purple { color: #c4b5fd !important; background-color: #221a3d !important; }

/* OPACIDAD (4.ª vuelta del verificador): «apagar» un texto con opacity le baja el contraste (2,7–3,7) aunque
   su color sea bueno. Se quita y el texto lleva directamente el gris del sistema, que ya cumple. */
.score-header-arrow, .score-header-subtitle, .drv-no-driver, .ev-chart-empty, .diq-report-hint,
.rpt-generate-hint, .diq-night-sub { opacity: 1 !important; color: var(--diq-tenue) !important; }
.drv-no-driver a { color: var(--diq-acc) !important; }
.diq-tenue, .diq-rank-sinmedir td, .diq-rank-sinmedir .diq-rank-name, .diq-rank-sinmedir .diq-rank-unit { color: var(--diq-tenue) !important; }
.diq-rank-sinmedir .diq-rank-avatar { color: var(--diq-tenue) !important; background-color: var(--diq-sk) !important; }

/* Ficha: aviso de servicios vencidos legible en claro y oscuro. */
.diq-aviso-vencido { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .86rem; font-weight: 600;
  color: var(--diq-baja); background-color: var(--diq-baja-bg); }
[data-theme="dark"] .diq-aviso-vencido { background-color: var(--diq-baja-bg) !important; }

/* FILTROS (fallo visto por manual-conduccion, 7-oct noche): styles.css trae dos reglas viejas con el id
   (#sidebarPanel: relative !important en escritorio; hoja desde abajo en celular) que ganaban a .diq-filtros:
   el velo aparecía y el panel quedaba fuera de la pantalla. Id + clase, para los dos tamaños. */
#sidebarPanel.diq-filtros {
  position: fixed !important; top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important;
  width: min(360px, 92vw) !important; max-width: 92vw !important; height: 100% !important; max-height: none !important;
  overflow-y: auto !important; border-radius: 0 !important; border: 0 !important; border-left: 1px solid var(--diq-borde) !important;
  padding: 16px !important; z-index: 1060 !important; transform: translateX(105%) !important; visibility: hidden;
  transition: transform .22s ease, visibility .22s; display: block !important;
}
#sidebarPanel.diq-filtros.abierto { transform: none !important; visibility: visible; }
#sidebarPanel.diq-filtros::before { content: none !important; }
[data-theme="dark"] #sidebarPanel.diq-filtros { background-color: var(--diq-surf) !important; }

.diq-filtros-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.diq-filtros-cab h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--diq-texto); }