/* ============================================================================
   betowa-filtros.css · V53 (medidores V54) · desplegables y medidores de meta de la suite
   ----------------------------------------------------------------------------
   Hoja autónoma (no depende de betowa-glass.css): la cargan también el
   Programador Académico y el Gestor de Practicantes, que tienen tema propio.
   Toma el tema de la página:
     · suite ............ html[data-tema="oscuro" | "claro"]
     · Programador ...... html[data-theme="dark" | "light"]
     · sin atributo ..... oscuro (Gestor de Practicantes)
   Al imprimir, todo en claro.
   ========================================================================== */

/* ---------- 1 · Tokens ---------- */
:root{
  /* desplegable */
  --bwf-bg:#13213A; --bwf-borde:rgba(226,236,248,.22); --bwf-ink:#F2F7FD; --bwf-mut:#B7C6DB;
  --bwf-hover:rgba(127,220,231,.13); --bwf-sel:rgba(95,203,42,.20); --bwf-acento:#7FDCE7;
  --bwf-marca:rgba(255,214,102,.34); --bwf-sombra:0 18px 44px -12px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.35);
  --bwf-barra:rgba(226,236,248,.30); --bwf-barra-h:rgba(226,236,248,.55);
  /* medidor */
  --bwm-fondo:rgba(18,31,51,.94); --bwm-borde:rgba(226,236,248,.16); --bwm-ink:#F2F7FD; --bwm-mut:#B7C6DB;
  --bwm-pista:#24344F; --bwm-meta:#F2F7FD;
  --bwm-ok:#3DD68C; --bwm-camino:#38C6D6; --bwm-atencion:#F2B544; --bwm-rezago:#FF6B81; --bwm-sin:#6F7E96;
}
html[data-tema="claro"], html[data-theme="light"]{
  --bwf-bg:#FFFFFF; --bwf-borde:rgba(14,41,81,.18); --bwf-ink:#0B1B33; --bwf-mut:#4A5B75;
  --bwf-hover:rgba(0,145,160,.10); --bwf-sel:rgba(57,169,0,.13); --bwf-acento:#0091A0;
  --bwf-marca:rgba(250,178,25,.32); --bwf-sombra:0 18px 40px -14px rgba(14,41,81,.40),0 2px 6px rgba(14,41,81,.12);
  --bwf-barra:rgba(14,41,81,.28); --bwf-barra-h:rgba(14,41,81,.50);
  /* V54 · estados un punto más oscuros en claro: con la barra más fina, el relleno
     queda ≥ 3,5:1 sobre la pista y ≥ 4,4:1 sobre el blanco (antes, «En camino» 3:1) */
  --bwm-fondo:#FFFFFF; --bwm-borde:rgba(14,41,81,.14); --bwm-ink:#0B1B33; --bwm-mut:#4A5B75;
  --bwm-pista:#E1E8F1; --bwm-meta:#0B1B33;
  --bwm-ok:#0B8454; --bwm-camino:#00838F; --bwm-atencion:#A86A08; --bwm-rezago:#BE123C; --bwm-sin:#76839A;
}

/* ---------- 2 · Campo del desplegable ---------- */
select.bwFiltro-oculto{ display:none !important; }
.bwFiltro{ position:relative; display:inline-block; vertical-align:middle; max-width:100%; box-sizing:border-box; }
.bwFiltro--lleno{ display:block; width:100%; }
.bwFiltro[hidden]{ display:none !important; }
.bwFiltro .bwFiltro-campo{
  width:100% !important; max-width:100%; box-sizing:border-box;
  padding-right:32px !important; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  cursor:pointer; margin:0 !important;
}
.bwFiltro .bwFiltro-campo:focus{ cursor:text; }
.bwFiltro .bwFiltro-campo:disabled{ cursor:not-allowed; opacity:.6; }
.bwFiltro-flecha{
  position:absolute; right:6px; top:50%; width:24px; height:24px; margin-top:-12px;
  cursor:pointer; border-radius:6px;
}
.bwFiltro-flecha::before{
  content:""; position:absolute; left:8px; top:6px; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease, top .18s ease;
  color:var(--bwf-mut);
}
.bwFiltro-abierto .bwFiltro-flecha::before{ transform:rotate(225deg); top:10px; color:var(--bwf-acento); }
.bwFiltro:hover .bwFiltro-flecha::before{ color:var(--bwf-acento); }

/* ---------- 3 · Panel desplegable (cuelga del <body>) ---------- */
.bwFiltro-panel{
  position:fixed; z-index:2147482000; box-sizing:border-box;
  background:var(--bwf-bg); color:var(--bwf-ink);
  border:1px solid var(--bwf-borde); border-radius:12px;
  box-shadow:var(--bwf-sombra);
  font:13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden; animation:bwfAbre .14s ease-out;
  text-align:left;
}
.bwFiltro-panel[hidden]{ display:none !important; }
.bwFiltro-arriba{ animation-name:bwfAbreArriba; }
@keyframes bwfAbre{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@keyframes bwfAbreArriba{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.bwFiltro-cabeza{
  padding:7px 12px; font-size:11px; letter-spacing:.02em; color:var(--bwf-mut);
  border-bottom:1px solid var(--bwf-borde); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bwFiltro-lista{
  list-style:none; margin:0; padding:4px;
  max-height:calc(var(--bwf-alto, 340px) - 34px);
  overflow:auto; overscroll-behavior:contain;
  scrollbar-width:auto; scrollbar-color:var(--bwf-barra) transparent;
}
.bwFiltro-lista::-webkit-scrollbar{ width:10px; height:10px; }
.bwFiltro-lista::-webkit-scrollbar-track{ background:transparent; }
.bwFiltro-lista::-webkit-scrollbar-thumb{ background:var(--bwf-barra); border-radius:99px; border:2px solid var(--bwf-bg); }
.bwFiltro-lista::-webkit-scrollbar-thumb:hover{ background:var(--bwf-barra-h); }
.bwFiltro-lista::-webkit-scrollbar-corner{ background:transparent; }
/* cada opción en una línea: los nombres largos se leen completos con la barra horizontal */
.bwFiltro-lista li{
  display:block; width:max-content; min-width:100%; box-sizing:border-box;
  padding:7px 12px 7px 28px; border-radius:8px; white-space:nowrap;
  cursor:pointer; position:relative; color:var(--bwf-ink); margin:0;
  list-style:none; text-transform:none; letter-spacing:normal;
}
.bwFiltro-lista li.bwFiltro-act{ background:var(--bwf-hover); }
.bwFiltro-lista li.bwFiltro-sel{ font-weight:700; background:var(--bwf-sel); }
.bwFiltro-lista li.bwFiltro-sel.bwFiltro-act{ background:linear-gradient(var(--bwf-hover),var(--bwf-hover)),var(--bwf-sel); }
.bwFiltro-lista li.bwFiltro-sel::before{
  content:"✓"; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-weight:800; color:var(--bwf-acento);
}
.bwFiltro-lista li.bwFiltro-off{ opacity:.45; cursor:default; }
.bwFiltro-lista li mark{ background:var(--bwf-marca); color:inherit; border-radius:3px; padding:0 1px; }
.bwFiltro-lista li.bwFiltro-grupo{
  cursor:default; padding:9px 12px 4px; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bwf-mut);
}
.bwFiltro-lista li.bwFiltro-vacio{ cursor:default; color:var(--bwf-mut); padding:12px; white-space:normal; width:auto; }

/* ---------- 4 · Medidor de meta ---------- */
/* V54 · escala más sobria y compacta (mismo HTML y misma API):
     cifra ......... normal 26 px (antes 34) · grande 32 px (antes 44) · mini 20 px (antes 24)
     signo % ....... ~0,54 de la cifra y en tinta secundaria
     barra ......... normal 8 px (antes 12) · grande 10 px (antes 14) · mini 6 px (antes 9)
     sello ......... 10,5 px, borde y fondo tenues; siempre ícono + palabra
     relleno ....... 14×16 px → 12×14 (grande 16×18 → 14×16); filete superior de 2 px (antes 3)
   Jerarquía: rótulo → cifra → barra → pie. Cifras tabulares (no bailan al contar).
   Pesos: solo 400 · 600 · 700, que existen en SF (Mac/iPhone) y en Segoe UI (Windows:
   300/350/400/600/700/900); un 650 se redondea a 700 en Windows y no aligera nada. */
.bwMed{
  --c:var(--bwm-sin);
  position:relative; box-sizing:border-box; min-width:0;
  background:var(--bwm-fondo); color:var(--bwm-ink);
  border:1px solid var(--bwm-borde); border-radius:12px;
  padding:12px 14px 11px; text-align:left;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; gap:6px;
}
.bwMed--ok{ --c:var(--bwm-ok); }
.bwMed--camino{ --c:var(--bwm-camino); }
.bwMed--atencion{ --c:var(--bwm-atencion); }
.bwMed--rezago{ --c:var(--bwm-rezago); }
.bwMed::before{   /* filete superior del color del estado */
  content:""; position:absolute; left:12px; right:12px; top:0; height:2px;
  border-radius:0 0 2px 2px; background:var(--c);
}
/* el sello baja a su propio renglón cuando la palabra más larga del rótulo no
   cabe a su lado (antes partía «COMPLEMENTAR-IA» en columnas angostas) */
.bwMed-cab{ display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; justify-content:space-between; gap:4px 8px; }
.bwMed-tit{
  flex:1 1 0; max-width:100%;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bwm-mut); line-height:1.35;
  overflow-wrap:break-word;
}
.bwMed-estado{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:600; line-height:1.25; white-space:nowrap;
  padding:1px 7px 1px 6px; border-radius:999px; color:var(--bwm-ink);
  border:1px solid var(--bwm-borde);
  border-color:color-mix(in srgb, var(--c) 42%, transparent);
  background:rgba(127,127,127,.06);
  background:color-mix(in srgb, var(--c) 10%, transparent);
  text-transform:none; letter-spacing:.01em;
}
.bwMed-ico{ color:var(--c); font-size:9.5px; line-height:1; }
.bwMed-cifra{ display:flex; align-items:baseline; gap:2px; line-height:1; margin-top:1px; }
.bwMed-cifra b{ font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--bwm-ink); font-variant-numeric:tabular-nums; }
.bwMed-cifra i{ font-style:normal; font-size:14px; font-weight:600; color:var(--bwm-mut); }
.bwMed-de{ margin-left:6px; font-size:11.5px; color:var(--bwm-mut); }
.bwMed-pista{
  position:relative; display:block; height:8px; border-radius:999px;
  background:var(--bwm-pista); margin:5px 0 3px;
}
.bwMed-relleno{
  position:absolute; left:0; top:0; bottom:0; border-radius:999px;
  background:var(--c); transform-origin:left center;
  animation:bwMedCrece .8s cubic-bezier(.22,1,.36,1) both;
}
.bwMed-exceso{
  position:absolute; top:0; bottom:0; border-radius:0 999px 999px 0;
  background:repeating-linear-gradient(135deg, var(--c) 0 5px, transparent 5px 8px), var(--bwm-pista);
  opacity:.85;
}
/* raya de la META (100 %): sobresale 4 px de la barra, con halo del fondo */
.bwMed-marca{
  position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px;
  background:var(--bwm-meta); border-radius:1px;
  box-shadow:0 0 0 1.5px var(--bwm-fondo);
}
/* «esperado a hoy»: línea con punto; el halo la separa también del relleno */
.bwMed-hoy{
  position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px;
  background:var(--bwm-mut); border-radius:1px;
  box-shadow:0 0 0 1px var(--bwm-fondo);
}
.bwMed-hoy::before{
  content:""; position:absolute; left:50%; top:-4px; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:var(--bwm-mut); box-shadow:0 0 0 1.5px var(--bwm-fondo);
}
@keyframes bwMedCrece{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
/* align-content: en la rejilla (subgrid) el pie puede quedar más alto que su texto; sus renglones
   no se separan para llenar ese alto */
.bwMed-pie{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:2px 12px; font-size:12px; color:var(--bwm-mut); line-height:1.45; }
.bwMed-pie b{ color:var(--bwm-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.bwMed-tenue{ font-style:italic; }
.bwMed-nota{ font-size:11px; color:var(--bwm-mut); line-height:1.45; border-top:1px solid var(--bwm-borde); padding-top:6px; margin-top:1px; }
/* tamaños */
.bwMed--grande{ padding:14px 16px 13px; gap:7px; }
.bwMed--grande .bwMed-cifra b{ font-size:32px; }
.bwMed--grande .bwMed-cifra i{ font-size:17px; }
.bwMed--grande .bwMed-pista{ height:10px; }
.bwMed--grande .bwMed-tit{ font-size:11.5px; }
.bwMed--grande .bwMed-pie{ font-size:12.5px; }
.bwMed--mini{ padding:9px 11px; gap:4px; }
.bwMed--mini .bwMed-cifra b{ font-size:20px; }
.bwMed--mini .bwMed-cifra i{ font-size:11.5px; }
.bwMed--mini .bwMed-pista{ height:6px; margin:4px 0 2px; }
.bwMed--mini .bwMed-marca{ top:-3px; bottom:-3px; }
.bwMed--mini .bwMed-tit{ font-size:10.5px; }
.bwMed--mini .bwMed-pie{ font-size:11px; }
/* rejilla sugerida para varios medidores */
.bwMedRejilla{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:12px; }
.bwMedRejilla--grande{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
/* V54 · en la rejilla, las tarjetas de una misma fila comparten sus renglones (subgrid): la cifra,
   la barra, el pie y la nota quedan a la misma altura aunque un rótulo ocupe 1, 2 o 3 renglones.
   Cada tarjeta abarca 5 renglones (rótulo · cifra · barra · pie · nota), o 4 si ninguna tarjeta
   de la rejilla trae nota (para no dejar un hueco al pie). Sin subgrid o sin :has() la tarjeta
   sigue en su columna flexible de siempre. Otra rejilla puede sumarse con estas mismas reglas
   (PE-04 · .gRow, Viáticos · .gaugeGrid). */
@supports (grid-template-rows:subgrid) and selector(:has(*)){
  .bwMedRejilla > .bwMed{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 5; }
  .bwMedRejilla:not(:has(> .bwMed > .bwMed-nota)) > .bwMed{ grid-row:span 4; }
}

/* ---------- 5 · Filas compactas (listas largas) ---------- */
/* V54 · la lista mide su propio ancho (container query): en una columna angosta
   (Horas por mes junto al medidor, el inspector del Programador…) la fila pasa
   a dos renglones aunque la pantalla sea ancha. El % va en una columna fija
   pegada a la barra y el sello después: los números quedan alineados.
   --bwBarra-der: ancho de esa columna (% + sello). El sello más largo («Meta
   cumplida») ocupa ~152 px con el % en SF y ~146 px en Segoe UI: 164 px dejan
   holgura para fuentes más anchas; la barra cede esos 12 px. */
.bwBarras{
  display:flex; flex-direction:column; gap:2px;
  max-height:440px; overflow:auto; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:var(--bwf-barra) transparent;
  container-type:inline-size;
}
.bwBarras::-webkit-scrollbar{ width:9px; height:9px; }
.bwBarras::-webkit-scrollbar-thumb{ background:var(--bwf-barra); border-radius:99px; }
.bwBarra{
  --c:var(--bwm-sin);
  --bwBarra-der:164px;
  display:grid; grid-template-columns:minmax(120px,32%) minmax(80px,1fr) var(--bwBarra-der);
  align-items:center; gap:12px; padding:6px 10px; border-radius:8px;
  color:var(--bwm-ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
}
.bwBarra.bwMed--ok{ --c:var(--bwm-ok); }
.bwBarra.bwMed--camino{ --c:var(--bwm-camino); }
.bwBarra.bwMed--atencion{ --c:var(--bwm-atencion); }
.bwBarra.bwMed--rezago{ --c:var(--bwm-rezago); }
.bwBarra:hover{ background:var(--bwf-hover); }
.bwBarra[data-valor]{ cursor:pointer; }
.bwBarra .bwMed-pista{ height:7px; margin:0; }
.bwBarra .bwMed-marca{ top:-3px; bottom:-3px; }
.bwBarra-rot{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.bwBarra-rot b{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bwBarra-rot small{ font-size:11px; color:var(--bwm-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bwBarra-pct{ display:flex; align-items:center; justify-content:flex-start; gap:6px; min-width:0; }
.bwBarra-pct > b{ flex:0 0 auto; min-width:3.8em; text-align:right; white-space:nowrap; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.bwBarra .bwMed-estado{ font-size:10px; padding:1px 6px 1px 5px; gap:3px; }
.bwBarra .bwMed-ico{ font-size:9px; }
/* dos renglones: rótulo · sello · % arriba y la barra abajo, a todo el ancho. El % pasa al
   final de la fila en su columna de 3,8em (cifras tabulares, a la derecha): queda en columna
   entre filas justo sobre el final de la barra, y el sello, de largo variable, va a su
   izquierda sin empujarlo ni quitarle al rótulo más ancho del que necesita */
@media (max-width:640px){
  .bwBarra{ grid-template-columns:minmax(0,1fr) auto; row-gap:6px; }
  .bwBarra .bwMed-pista{ grid-column:1 / -1; grid-row:2; }
  .bwBarra-pct > b{ order:1; }
}
@container (max-width:440px){
  .bwBarra{ grid-template-columns:minmax(0,1fr) auto; row-gap:6px; }
  .bwBarra .bwMed-pista{ grid-column:1 / -1; grid-row:2; }
  .bwBarra-pct > b{ order:1; }
}

/* ---------- 6 · Movimiento y papel ---------- */
@media (prefers-reduced-motion: reduce){
  .bwFiltro-panel, .bwMed-relleno{ animation:none !important; }
}
@media print{
  .bwFiltro, .bwFiltro-panel{ display:none !important; }
  select.bwFiltro-oculto{ display:inline-block !important; }
  .bwMed, .bwBarra{
    --bwm-fondo:#fff; --bwm-borde:#C9D3E0; --bwm-ink:#0B1B33; --bwm-mut:#4A5B75; --bwm-pista:#E1E8F1; --bwm-meta:#0B1B33;
    --bwm-ok:#0B8454; --bwm-camino:#00838F; --bwm-atencion:#A86A08; --bwm-rezago:#BE123C; --bwm-sin:#76839A;
    break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .bwMed-relleno{ animation:none !important; }
  .bwBarras{ max-height:none; overflow:visible; }
}