/* ============================================================
   DANGOFE OS · SERVICIOS C1 · ETAPA 3 · ÁREA «RUTAS» (prefijo svr-) · 2026-10-21 · chat de Diseño
   Va con servicios-rutas.js dentro de la etapa del armazón (usa los tokens --sv-* y las clases .sv-g, .sv-btn, .sv-kpi, .sv-tec, .sv-ava,
   .sv-tag, .sv-vacio, .sv-enlace, .sv-sec de servicios-c1.css). Sin sombras; nada animado sin parar. Claro y «Noche azul» por los tokens.
   Versiones (data-v en .svr): A · Mapa arriba · B · Guaguas primero · C · Puente (el mapa es el escenario).
   ============================================================ */
.svr { display: flex; flex-direction: column; gap: 12px; color: var(--sv-tinta); font-size: 14px; line-height: 1.4; }
.svr *, .svr *::before, .svr *::after { box-sizing: border-box; }
.svr button { font: inherit; color: inherit; cursor: pointer; }
.svr a.sv-btn { text-decoration: none; }
/* cabecera: fecha, contadores, botones (y el hueco [data-sv-mapas] del programa) */
.svr-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; }
.svr-cab__acc { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svr-acc { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.svr-fecha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svr-fecha__b { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); display: grid; place-items: center; color: var(--sv-az); padding: 0; }
.svr-fecha__b svg { width: 16px; height: 16px; }
.svr-fecha__d { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; padding: 2px 6px; border-radius: 10px; }
.svr-fecha__d b { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; white-space: nowrap; }
.svr-fecha__d input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.svr-fecha__d:focus-within { outline: 3px solid rgba(var(--sv-celrgb), .3); }
.svr-carga { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sv-tenue); }
.svr-carga svg { width: 14px; height: 14px; animation: svr-gira .9s linear 5; }
.svr-kpis { gap: 6px; }
.svr-kpis .sv-kpi { white-space: nowrap; }
.svr-kpis .sv-kpi svg, .svr .sv-tag svg { width: 13px; height: 13px; flex: none; }
.svr .sv-tag svg { margin-right: 4px; }
.svr-kpi--ruta svg { width: 14px; height: 14px; color: var(--sv-az); }
/* cuerpo */
.svr-cuerpo { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "mapa mapa mapa" "gu eq pp"; align-items: start; }
.svr-mapa-caja { grid-area: mapa; height: 360px; min-height: 240px; }
.svr-col--gu { grid-area: gu; } .svr-col--eq { grid-area: eq; } .svr-col--pp { grid-area: pp; }
.svr-col { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--sv-r); border: 1px solid var(--sv-borde); background: var(--sv-vidrio); min-width: 0; }
.svr-col:empty { display: none; }
.svr-col .sv-sec { margin-bottom: 2px; }
.svr-mapa { position: relative; width: 100%; height: 100%; border-radius: var(--sv-r); overflow: hidden; background: var(--sv-mapa); border: 1px solid var(--sv-borde); }
.svr-mapa .leaflet-container { position: absolute; inset: 0; width: 100%; height: 100%; }
.svr-mapa:empty::after { content: 'El mapa de las rutas se monta aquí'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--sv-tenue); font-size: 13px; font-weight: 600; }
/* B · guaguas primero */
.svr[data-v='B'] .svr-cuerpo { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); grid-template-areas: "gu mapa" "gu eq" "pp pp"; }
.svr[data-v='B'] .svr-mapa-caja { height: 300px; }
.svr[data-v='B'] .svr-pp { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* C · puente: el mapa es el escenario */
.svr[data-v='C'] .svr-cuerpo { position: relative; display: block; min-height: 660px; }
.svr[data-v='C'] .svr-mapa-caja { position: absolute; inset: 0; height: auto; min-height: 0; }
.svr[data-v='C'] .svr-col { position: absolute; z-index: 6; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); overflow: auto; scrollbar-width: none; }
.svr[data-v='C'] .svr-col::-webkit-scrollbar { display: none; }
.svr[data-v='C'] .svr-col--gu { left: 14px; top: 14px; bottom: 14px; width: 420px; }
.svr[data-v='C'] .svr-col--eq { right: 14px; top: 14px; width: 330px; max-height: calc(55% - 20px); }
.svr[data-v='C'] .svr-col--pp { right: 14px; bottom: 14px; width: 330px; max-height: calc(45% - 20px); }
/* guaguas */
.svr-gus { display: flex; flex-direction: column; gap: 10px; }
.svr-gu { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--sv-r2); border: 1px solid var(--sv-linea); background: var(--sv-vidrio3); }
.svr-gu.is-foco { border-color: rgba(var(--sv-celrgb), .85); background: rgba(var(--sv-celrgb), .07); }
.svr-gu.is-apagada { opacity: .6; }
.svr-gu__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svr-gu__ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--sv-celrgb), .14); color: var(--sv-az); }
.svr-gu__ico svg { width: 16px; height: 16px; }
.svr-gu__t { min-width: 0; flex: 1; }
.svr-gu__t b { display: block; font-size: 14px; font-weight: 800; }
.svr-gu__t b small { font-size: 11.5px; font-weight: 700; color: var(--sv-tenue); letter-spacing: .04em; }
.svr-gu__t > small { display: block; font-size: 12px; color: var(--sv-tenue); }
.svr-avas { display: inline-flex; }
.svr-ava { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--sv-tec-color, var(--sv-az)); border: 2px solid var(--sv-vidrio3); margin-left: -6px; }
.svr-ava:first-child { margin-left: 0; }
.svr-gu__datos { font-size: 12.5px; color: var(--sv-tenue); font-weight: 600; }
.svr-gu__tags, .svr-gu__acc { display: flex; flex-wrap: wrap; gap: 6px; }
.svr-gu__acc { padding-top: 2px; }
/* paradas */
.svr-pars { display: flex; flex-direction: column; gap: 4px; }
.svr-par { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; padding: 6px 6px 6px 4px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.svr-par:hover { background: rgba(var(--sv-azrgb), .05); }
.svr-par__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--sv-suave); }
.svr-par__n svg { width: 14px; height: 14px; }
.svr-par--ok .svr-par__n { background: rgb(var(--sv-okrgb)); } .svr-par--curso .svr-par__n { background: var(--sv-cel); } .svr-par--camino .svr-par__n { background: rgb(var(--sv-ambrgb)); } .svr-par--prog .svr-par__n { background: rgb(var(--sv-morrgb)); }
.svr-par__t { min-width: 0; }
.svr-par__t b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svr-par__t small { display: block; font-size: 11.5px; color: var(--sv-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svr-par__h { font-size: 11.5px; font-weight: 800; color: var(--sv-tenue); white-space: nowrap; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.svr-par__h--ok { color: var(--sv-ok); } .svr-par__h--curso { color: var(--sv-az); } .svr-par__h--camino { color: var(--sv-amb); }
.svr-par__exc { font-style: normal; color: var(--sv-mal); }
.svr-par--ok .svr-par__t { opacity: .72; }
.svr-mas { align-self: flex-start; margin: 4px 0 0 4px; }
/* B: una guagua a la vez, con su ruta como línea */
.svr-gutabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.svr-gutab { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 14px; border: 1px solid var(--sv-linea); background: var(--sv-vidrio3); text-align: left; }
.svr-gutab b { display: block; font-size: 13px; font-weight: 800; } .svr-gutab small { display: block; font-size: 11.5px; color: var(--sv-tenue); }
.svr-gutab.is-on { border-color: rgba(var(--sv-celrgb), .85); background: rgba(var(--sv-celrgb), .1); }
.svr-gutab__p { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-suave); flex: none; }
.svr-gutab__p--ok { background: rgb(var(--sv-okrgb)); } .svr-gutab__p--amb { background: rgb(var(--sv-ambrgb)); }
.svr-gu--grande { padding: 12px 14px; }
.svr-pars--linea { gap: 0; }
.svr-pars--linea .svr-par { padding: 10px 8px 10px 4px; }
.svr-pars--linea .svr-par::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: -4px; width: 2px; background: var(--sv-linea2); }
.svr-pars--linea .svr-par:last-of-type::before { display: none; }
.svr-pars--linea .svr-par__t b, .svr-pars--linea .svr-par__t small { white-space: normal; }
.svr-par--grande { grid-template-columns: 32px minmax(0, 1fr) auto; }
.svr-par--grande .svr-par__n { width: 30px; height: 30px; font-size: 13px; }
/* equipo */
.svr-tecs { display: flex; flex-direction: column; }
.svr-est { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px; background: var(--sv-campo); color: var(--sv-tenue); }
.svr-est--ok { background: rgba(var(--sv-okrgb), .14); color: var(--sv-ok); } .svr-est--curso { background: rgba(var(--sv-celrgb), .16); color: var(--sv-az); } .svr-est--camino { background: rgba(var(--sv-ambrgb), .16); color: var(--sv-amb); }
.svr-est--mal { background: rgba(var(--sv-malrgb), .12); color: var(--sv-mal); } .svr-est--prog { background: rgba(var(--sv-morrgb), .14); color: var(--sv-mor); } .svr-est--aus { text-decoration: line-through; }
[data-theme='dark'] .svr-est--curso { color: #bfe0ff; }
.svr-tec__n { font-size: 12px; font-weight: 800; color: var(--sv-tenue); font-variant-numeric: tabular-nums; }
/* por programar */
.svr-pp { display: flex; flex-direction: column; gap: 6px; }
.svr-pp__it { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--sv-r2); border: 1px solid var(--sv-linea); background: var(--sv-vidrio3); min-width: 0; }
.svr-pp__abrir { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.svr-pp__abrir b { font-size: 12px; font-weight: 800; color: var(--sv-az); }
.svr-pp__abrir span { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.svr-pp__abrir small { font-size: 11.5px; color: var(--sv-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.svr-ubi { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--sv-ambrgb), .5); background: rgba(var(--sv-ambrgb), .12); color: var(--sv-amb); font-size: 12px; font-weight: 700; text-align: left; }
.svr-ubi svg { width: 14px; height: 14px; flex: none; }
/* aviso */
.svr-aviso { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; font-size: 13px; font-weight: 700; }
.svr-aviso svg { width: 16px; height: 16px; flex: none; } .svr-aviso span { flex: 1; min-width: 0; }
.svr-aviso--ok { background: rgba(var(--sv-okrgb), .14); color: var(--sv-ok); } .svr-aviso--mal { background: rgba(var(--sv-malrgb), .12); color: var(--sv-mal); }
.svr-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; color: inherit; padding: 0; }
.svr-x svg { width: 14px; height: 14px; }
.svr .sv-btn:focus-visible, .svr .svr-par:focus-visible, .svr .sv-tec:focus-visible, .svr .svr-gutab:focus-visible, .svr .svr-fecha__b:focus-visible, .svr .svr-pp__abrir:focus-visible, .svr .svr-ubi:focus-visible { outline: 3px solid rgba(var(--sv-celrgb), .35); outline-offset: 1px; }
@keyframes svr-gira { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .svr[data-v='C'] .svr-col--gu { width: 360px; } .svr[data-v='C'] .svr-col--eq, .svr[data-v='C'] .svr-col--pp { width: 300px; } }
@media (max-width: 900px) {
  .svr-cuerpo, .svr[data-v='B'] .svr-cuerpo, .svr[data-v='C'] .svr-cuerpo { display: flex; flex-direction: column; min-height: 0; }
  .svr-mapa-caja, .svr[data-v='B'] .svr-mapa-caja, .svr[data-v='C'] .svr-mapa-caja { position: static; height: 260px; min-height: 260px; order: -1; }
  .svr[data-v='C'] .svr-col { position: static; width: auto; max-height: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .svr-cab__acc { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .svr-carga svg { animation: none; } }
/* «Noche azul»: el azul de la marca (--sv-az) no cambia en oscuro en la C1; aclaramos lo que lo usa como texto */
[data-theme='dark'] .svr-fecha__b, [data-theme='dark'] .svr-kpi--ruta svg, [data-theme='dark'] .svr-gu__ico, [data-theme='dark'] .svr-par__h--curso, [data-theme='dark'] .svr-pp__abrir b { color: #9db9ff; }
/* ---------- A · uniforme con el Hoy B (21-oct noche): mapa libre, píldoras y dock con pestañas (usa .sv-pild, .sv-dock2 y .sv-tab2 de servicios-c1.css v2.0) ---------- */
.svr-escena { display: flex; flex-direction: column; gap: 12px; min-height: 0; height: var(--sv-escena-h, clamp(640px, calc(100vh - 140px), 1100px)); }
.svr-escena .sv-lienzo { position: relative; flex: 1 1 auto; min-height: 280px; }
.svr-escena .svr-mapa-caja { position: absolute; inset: 0; height: auto; min-height: 0; }
.svr-pild--fecha { left: 14px; top: 14px; padding: 4px 10px 4px 4px; }
.svr-pild--fecha .svr-fecha { flex-wrap: nowrap; gap: 6px; }
.svr-pild--fecha .svr-fecha__d b { font-size: 15px; }
.svr-pild--fecha .svr-fecha__b { background: transparent; border-color: transparent; }
.svr-dock { flex: 0 1 auto; }
.svr-dock .sv-dock2__cab { gap: 8px 14px; }
.svr-dock .svr-cab__acc { margin-left: auto; }
.svr-tabs { margin-bottom: 10px; }
.svr-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svr-panel .sv-sec { margin-bottom: 2px; }
.svr-panel--guaguas .svr-gus { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.svr-panel--equipo .svr-tecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 18px; }
.svr-panel--equipo .svr-tecs .sv-tec { border-top: 1px solid var(--sv-linea); }
.svr-panel--pp .svr-pp { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 920px) {
  .svr-escena { height: auto; }
  .svr-escena .sv-lienzo { flex: none; height: 320px; min-height: 320px; }
  .svr-escena .svr-mapa-caja { position: absolute; height: auto; min-height: 0; order: 0; }
  .svr-pild--fecha { left: 10px; top: 10px; max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
  .svr-pild--fecha::-webkit-scrollbar { display: none; }
  .svr-dock { max-height: none; }
  .svr-dock .sv-dock2__cuerpo { overflow: visible; }
  .svr-panel--guaguas .svr-gus { grid-template-columns: 1fr; }
}
@media (max-width: 920px) { .svr-dock .svr-cab__acc, .svr-dock .svr-acc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .svr-dock .svr-cab__acc::-webkit-scrollbar, .svr-dock .svr-acc::-webkit-scrollbar { display: none; } .svr-dock .svr-cab__acc .sv-btn { flex: none; } }