/* ============================================================
   DANGOFE OS LIQUID V2 — servicios.css
   MÓDULO SERVICIOS (DANGOFE-servicios-140 · v1.0.140)
   Diseño «Despacho del día» aprobado en el boceto: escenario con
   brillos de color, paneles de vidrio, filas por técnico, mapa,
   sugerencia y actividad. Dos temas: noche (vidrio oscuro) y día
   (vidrio blanco perla, tipo iPhone). Prefijo svx-.
   ============================================================ */

/* ---------- variables del tema (escenario y ventanas) ---------- */
/* DANGOFE-servicios-151: noche en azul marino con acento azul eléctrico (el diseño del Centro de rutas). */
.svx-tema {
  --svx-txt: #f1f5ff;
  --svx-txt2: #c5cfe8;
  --svx-txt3: #a3afcc;
  --svx-g: rgba(18, 33, 70, 0.6);
  --svx-g2: rgba(29, 48, 96, 0.68);
  --svx-gb: rgba(125, 152, 232, 0.17);
  --svx-gb2: rgba(135, 162, 242, 0.3);
  --svx-hi: rgba(255, 255, 255, 0.07);
  --svx-sh: rgba(0, 0, 0, 0.35);
  --svx-pri: #3b5bfd;
  --svx-pri-txt: #ffffff;
  --svx-pri-sh: rgba(59, 91, 253, 0.38);
  --svx-sel: rgba(59, 91, 253, 0.18);
  --svx-sel-b: rgba(118, 146, 255, 0.6);
  --svx-punto: #0d1a3a;
  --svx-pop: rgba(10, 20, 46, 0.97);
  --svx-campo: rgba(9, 19, 44, 0.72);
  --svx-linea: rgba(255, 255, 255, 0.06);
  --svx-pista: rgba(255, 255, 255, 0.035);
  --svx-ahora: #ff5c7a;
  --svx-ok: #86efac;
  --svx-curso: #7dd3fc;
  --svx-camino: #fde68a;
  --svx-fija: #e9d5ff;
  --svx-mal: #fca5a5;
  --svx-amarillo: 250, 204, 21;
  --svx-naranja: 251, 146, 60;
  --svx-rojo: 248, 113, 113;
  --svx-lila: 165, 180, 252;
  color: var(--svx-txt);
}
[data-theme='light'] .svx-tema {
  --svx-txt: #172033;
  --svx-txt2: #3d4a63;
  --svx-txt3: #5b6780;
  --svx-g: rgba(255, 255, 255, 0.62);
  --svx-g2: rgba(255, 255, 255, 0.78);
  --svx-gb: rgba(148, 170, 205, 0.38);
  --svx-gb2: rgba(120, 145, 190, 0.5);
  --svx-hi: rgba(255, 255, 255, 0.9);
  --svx-sh: rgba(30, 50, 90, 0.10);
  --svx-pri: #2f54eb;
  --svx-pri-txt: #ffffff;
  --svx-pri-sh: rgba(47, 84, 235, 0.25);
  --svx-sel: rgba(47, 84, 235, 0.08);
  --svx-sel-b: rgba(47, 84, 235, 0.45);
  --svx-punto: #ffffff;
  --svx-pop: rgba(255, 255, 255, 0.98);
  --svx-campo: rgba(255, 255, 255, 0.85);
  --svx-linea: rgba(30, 41, 59, 0.07);
  --svx-pista: rgba(255, 255, 255, 0.5);
  --svx-ahora: #e11d48;
  --svx-ok: #15803d;
  --svx-curso: #0369a1;
  --svx-camino: #a16207;
  --svx-fija: #7e22ce;
  --svx-mal: #b91c1c;
}

/* ---------- escenario ---------- */
.svx-stage {
  position: relative; border-radius: 26px; padding: 18px 20px 24px; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  background:
    radial-gradient(720px 560px at -6% -14%, rgba(38, 72, 190, 0.5), transparent 62%),
    radial-gradient(600px 540px at 104% 8%, rgba(20, 96, 180, 0.38), transparent 62%),
    radial-gradient(720px 520px at 42% 114%, rgba(58, 52, 170, 0.34), transparent 62%),
    #070f24;
  border: 1px solid rgba(125, 152, 232, 0.14);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
[data-theme='light'] .svx-stage {
  background:
    radial-gradient(620px 560px at -6% -14%, rgba(165, 180, 252, 0.55), transparent 62%),
    radial-gradient(540px 540px at 104% 26%, rgba(103, 232, 249, 0.42), transparent 62%),
    radial-gradient(680px 520px at 42% 112%, rgba(216, 180, 254, 0.45), transparent 62%),
    #f3f6fb;
  box-shadow: 0 14px 40px rgba(30, 50, 90, 0.10);
}
.svx-stage h1, .svx-stage h2, .svx-stage h3, .svx-num, .svx-ed h3 { font-family: 'Sora', var(--font-family-ui); }

/* ---------- vidrio ---------- */
.svx-panel {
  background: var(--svx-g); border: 1px solid var(--svx-gb); border-radius: 20px;
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--svx-hi), 0 12px 34px var(--svx-sh);
}
.svx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--svx-gb2); background: var(--svx-g2); color: var(--svx-txt);
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.svx-btn:hover { filter: brightness(1.08); }
.svx-btn:active { transform: scale(.97); }
.svx-btn:disabled { opacity: .55; cursor: wait; }
.svx-btn--pri { background: var(--svx-pri); color: var(--svx-pri-txt); border-color: transparent; font-weight: 700; box-shadow: 0 8px 22px var(--svx-pri-sh); }
.svx-btn--fan { background: transparent; }
.svx-btn svg { flex: none; }

/* ---------- barra superior ---------- */
.svx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; }
.svx-marca { display: flex; align-items: center; gap: 10px; padding-right: 12px; border-right: 1px solid var(--svx-gb); }
.svx-marca__ico {
  width: 36px; height: 36px; border-radius: 11px; background: var(--svx-pri); color: var(--svx-pri-txt);
  display: flex; align-items: center; justify-content: center;
}
.svx-marca strong { display: block; font-family: 'Sora', var(--font-family-ui); font-size: .98rem; letter-spacing: .01em; }
.svx-marca small { display: block; font-size: .74rem; color: var(--svx-txt3); }
.svx-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 420px; }
.svx-tab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 12px;
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--svx-txt2); background: transparent; border: 0; cursor: pointer;
}
.svx-tab:hover { color: var(--svx-txt); background: var(--svx-g); }
.svx-tab.is-on { color: var(--svx-txt); font-weight: 700; background: var(--svx-sel); box-shadow: inset 0 1px 0 var(--svx-hi), 0 0 0 1px var(--svx-sel-b); }
.svx-tab__n:empty { display: none; }
.svx-tab__n {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800;
  background: rgb(var(--svx-amarillo)); color: #3a2e00;
}
.svx-bar__der { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svx-buscar {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px;
  background: var(--svx-campo); border: 1px solid var(--svx-gb); color: var(--svx-txt3);
}
.svx-buscar input { width: 210px; max-width: 46vw; background: transparent; border: 0; outline: none; color: var(--svx-txt); font: inherit; font-size: .88rem; }
.svx-buscar input::placeholder { color: var(--svx-txt3); }

/* ---------- encabezado del día y números ---------- */
.svx-cab { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.svx-cab__t { flex: 1 1 280px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 2px 4px; }
.svx-kicker { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--svx-txt3); }
.svx-cab h1 { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.svx-fecha { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.svx-fecha .svx-btn { min-height: 34px; padding: 0 10px; }
.svx-fecha input {
  height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--svx-gb); background: var(--svx-campo);
  color: var(--svx-txt); font: inherit; font-size: .84rem; color-scheme: dark;
}
[data-theme='light'] .svx-fecha input { color-scheme: light; }
.svx-kpi { flex: 1 1 170px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; border-radius: 18px; }
.svx-kpi span { font-size: .8rem; color: var(--svx-txt3); }
.svx-kpi .svx-num { font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.svx-kpi small { font-size: .76rem; color: var(--svx-txt3); }
.svx-kpi small.is-aviso { color: var(--svx-camino); }

/* ---------- alertas ---------- */
.svx-alertas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; }
.svx-alertas__t { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--svx-txt3); margin-right: 4px; }
.svx-alertas__ok { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--svx-txt2); }
.svx-alerta {
  --a: var(--svx-amarillo);
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 11px;
  background: rgba(var(--a), .12); border: 1px solid rgba(var(--a), .42); color: var(--svx-txt);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.svx-alerta strong { font-family: 'Sora', var(--font-family-ui); }
.svx-alerta span { font-weight: 500; color: var(--svx-txt2); }
.svx-alerta.is-on { background: rgba(var(--a), .26); box-shadow: 0 0 0 2px rgba(var(--a), .35); }
.svx-alerta i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--a)); }
.svx-alerta--naranja { --a: var(--svx-naranja); }
.svx-alerta--rojo { --a: var(--svx-rojo); }
.svx-alerta--lila { --a: var(--svx-lila); }

/* ---------- filas de contenido ---------- */
.svx-fila { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.svx-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.svx-h2 h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.svx-h2 small { font-size: .78rem; color: var(--svx-txt3); }
.svx-h2__esp { flex: 1; }

/* ---------- colores por categoría ---------- */
.svx-cat--inv  { --c: 245, 181, 68;  --ci: #fde1a6; }
.svx-cat--aire { --c: 76, 201, 240;  --ci: #a5f3fc; }
.svx-cat--cam  { --c: 192, 132, 252; --ci: #e9d5ff; }
.svx-cat--var  { --c: 148, 163, 184; --ci: #dbe3ef; }
.svx-cat--sin  { --c: 148, 163, 184; --ci: var(--svx-txt2); }
[data-theme='light'] .svx-cat--inv  { --ci: #8a5300; }
[data-theme='light'] .svx-cat--aire { --ci: #006383; }
[data-theme='light'] .svx-cat--cam  { --ci: #6b21a8; }
[data-theme='light'] .svx-cat--var  { --ci: #3c4a5e; }
.svx-leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--svx-txt2); }
.svx-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: rgb(var(--c)); }

/* ---------- por programar (columna) ---------- */
.svx-pp { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.svx-pp__lista { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; padding: 2px; }
.svx-pend {
  display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; border-radius: 14px; cursor: grab;
  background: var(--svx-g); border: 1px solid var(--svx-gb); text-align: left; color: var(--svx-txt); font: inherit;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.svx-pend:hover { background: var(--svx-g2); }
.svx-pend.is-arrastre { opacity: .55; transform: rotate(-1.5deg); }
.svx-pend__top { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--svx-txt2); }
.svx-pend__top i { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--c)); flex: none; }
.svx-pend__top b { font-weight: 600; color: var(--ci); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.svx-pend__top em { margin-left: auto; font-style: normal; color: var(--svx-txt3); white-space: nowrap; }
.svx-pend strong { font-size: .92rem; }
.svx-pend > span { font-size: .8rem; color: var(--svx-txt2); }
.svx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.svx-tag { font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--svx-g2); color: var(--svx-txt2); }
.svx-tag--fecha { background: rgba(var(--svx-amarillo), .16); color: var(--svx-camino); }
.svx-tag--ubic { background: rgba(var(--svx-rojo), .16); color: var(--svx-mal); }
.svx-tag--tec { background: rgba(var(--svx-naranja), .16); color: #fed7aa; }
[data-theme='light'] .svx-tag--tec { color: #9a3412; }
.svx-vacio { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 26px 14px; border-radius: 14px; color: var(--svx-txt2); font-size: .86rem; border: 1px dashed var(--svx-gb); text-align: center; }

/* ---------- agenda por técnico ---------- */
.svx-agenda { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.svx-scroll { overflow-x: auto; padding-bottom: 4px; }
.svx-tl { min-width: 720px; display: flex; flex-direction: column; gap: 6px; }
.svx-horas { display: flex; height: 22px; }
.svx-horas__q { width: 168px; flex: none; }
.svx-horas__pista { position: relative; flex: 1; }
.svx-horas__pista span { position: absolute; transform: translateX(-50%); font-size: .74rem; color: var(--svx-txt3); white-space: nowrap; }
.svx-lane { display: flex; align-items: stretch; min-height: 80px; }
.svx-lane__q { width: 168px; flex: none; display: flex; align-items: center; gap: 10px; padding-right: 10px; box-sizing: border-box; }
.svx-av {
  width: 38px; height: 38px; flex: none; border-radius: 13px; background: var(--svx-g2); border: 1px solid var(--svx-gb2);
  display: flex; align-items: center; justify-content: center; font-family: 'Sora', var(--font-family-ui); font-weight: 600; font-size: .8rem;
}
.svx-lane__q div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svx-lane__q strong { font-size: .88rem; }
.svx-lane__q span { font-size: .74rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-lane__q span.is-mal { color: var(--svx-mal); font-weight: 600; }
.svx-pista {
  position: relative; flex: 1; border-radius: 14px; background: var(--svx-pista); border: 1px solid var(--svx-linea); overflow: hidden;
  transition: background .15s ease, box-shadow .15s ease;
}
.svx-pista.is-sobre { background: rgba(var(--svx-lila), .12); box-shadow: inset 0 0 0 1.5px rgba(var(--svx-lila), .55); }
.svx-pista__h { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--svx-linea); }
.svx-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--svx-ahora); z-index: 3; pointer-events: none; }
.svx-blq {
  position: absolute; top: 9px; bottom: 9px; box-sizing: border-box; padding: 6px 9px; border-radius: 12px; z-index: 2;
  background: rgba(var(--c), .2); border: 1px solid rgba(var(--c), .6); color: var(--svx-txt);
  display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden; cursor: pointer; text-align: left; font: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.svx-blq:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--svx-sh); }
.svx-blq b, .svx-blq span, .svx-blq em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-blq b { font-size: .76rem; font-weight: 700; }
.svx-blq span { font-size: .7rem; color: var(--svx-txt2); }
.svx-blq em { font-size: .7rem; font-weight: 700; font-style: normal; color: var(--svx-txt2); }
.svx-blq--hecho { background: rgba(var(--c), .1); opacity: .72; }
.svx-blq--hecho em { color: var(--svx-ok); }
.svx-blq--curso em { color: var(--svx-curso); }
.svx-blq--camino em { color: var(--svx-camino); }
.svx-blq--fija em { color: var(--svx-fija); }
.svx-blq--atrasado { border: 1.5px solid rgb(var(--svx-rojo)); }
.svx-blq--atrasado em { color: var(--svx-mal); }
.svx-blq--cancelada { opacity: .45; text-decoration: line-through; }
.svx-fantasma {
  position: absolute; top: 7px; bottom: 7px; box-sizing: border-box; padding: 6px 9px; border-radius: 12px; z-index: 4; pointer-events: none;
  border: 1.5px dashed var(--svx-txt2); background: rgba(var(--svx-lila), .14); color: var(--svx-txt);
  display: flex; flex-direction: column; justify-content: center; font-size: .72rem; font-weight: 700;
}
.svx-sinhora { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px 168px; }
.svx-sinhora button {
  font: inherit; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 8px; cursor: pointer;
  background: rgba(var(--c), .16); border: 1px solid rgba(var(--c), .45); color: var(--svx-txt);
}

/* ---------- mapa, sugerencia y actividad ---------- */
.svx-mapa { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.svx-mapa__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svx-chipg {
  font: inherit; font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 10px; cursor: pointer;
  background: var(--svx-g); border: 1px solid var(--svx-gb); color: var(--svx-txt2);
}
.svx-chipg.is-on { background: var(--svx-pri); color: var(--svx-pri-txt); border-color: transparent; }
.svx-mapa__lienzo { position: relative; height: 300px; border-radius: 16px; overflow: hidden; background: rgba(14, 21, 43, .85); border: 1px solid var(--svx-linea); }
[data-theme='light'] .svx-mapa__lienzo { background: rgba(255, 255, 255, .7); }
.svx-mapa__lienzo .svx-vacio { position: absolute; inset: 0; border: 0; border-radius: 0; }
.svx-mapa__pie { font-size: .74rem; color: var(--svx-txt3); }
.svx-lado { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.svx-sug { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: rgba(232, 238, 255, .1); border-color: rgba(232, 238, 255, .28); }
[data-theme='light'] .svx-sug { background: rgba(255, 255, 255, .8); border-color: rgba(99, 102, 241, .28); }
.svx-sug__t { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c7d2fe; }
[data-theme='light'] .svx-sug__t { color: #4338ca; }
.svx-sug p { margin: 0; font-size: .9rem; line-height: 1.5; }
.svx-sug__acc { display: flex; flex-wrap: wrap; gap: 8px; }
.svx-act { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.svx-act__f { display: flex; gap: 10px; align-items: baseline; font-size: .82rem; }
.svx-act__f span { width: 52px; flex: none; color: var(--svx-txt3); }

/* ---------- tarjetas grandes (Por programar / Todos) ---------- */
.svx-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.svx-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--svx-g); border: 1px solid var(--svx-gb); }
.svx-seg button { font: inherit; font-size: .82rem; padding: 6px 12px; border-radius: 9px; border: 0; background: transparent; color: var(--svx-txt2); cursor: pointer; }
.svx-seg button.is-on { background: var(--svx-g2); color: var(--svx-txt); font-weight: 700; box-shadow: inset 0 1px 0 var(--svx-hi); }
.svx-sel {
  height: 40px; min-width: 180px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--svx-gb);
  background: var(--svx-campo); color: var(--svx-txt); font: inherit; font-size: .86rem;
}
.svx-sel option { color: #111827; }
.svx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; transition: opacity .2s ease; }
.svx-grid.is-cargando { opacity: .55; }
.svx-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; overflow: hidden; }
.svx-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(var(--c), .9); }
.svx-card--cerrada { opacity: .75; }
.svx-card__top { display: flex; align-items: center; gap: 8px; font-size: .76rem; }
.svx-card__top i { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--c)); flex: none; }
.svx-card__top b { color: var(--ci); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.svx-card__top em { margin-left: auto; font-style: normal; color: var(--svx-txt3); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.svx-origen { font-size: .64rem; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 7px; background: var(--svx-g2); color: var(--svx-txt2); }
.svx-origen--dangofe { background: var(--svx-pri); color: var(--svx-pri-txt); }
.svx-card h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.svx-card p { margin: 0; font-size: .82rem; color: var(--svx-txt2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svx-linea2 { display: flex; align-items: flex-start; gap: 7px; font-size: .83rem; line-height: 1.4; color: var(--svx-txt); }
.svx-linea2 svg { flex: none; margin-top: 2px; opacity: .75; }
.svx-linea2.is-sec { color: var(--svx-txt2); }
.svx-linea2 a { color: inherit; text-underline-offset: 2px; }
.svx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.svx-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: 9px;
  font-size: .76rem; font-weight: 600; background: var(--svx-g2); border: 1px solid var(--svx-gb); color: var(--svx-txt);
}
.svx-chip small { font-weight: 500; color: var(--svx-txt3); }
.svx-chip--falta { background: rgba(var(--svx-amarillo), .12); border-color: rgba(var(--svx-amarillo), .45); }
.svx-chip--naranja { background: rgba(var(--svx-naranja), .12); border-color: rgba(var(--svx-naranja), .45); }
.svx-chip--rojo { background: rgba(var(--svx-rojo), .12); border-color: rgba(var(--svx-rojo), .45); }
.svx-card__acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.svx-card__acc .svx-btn { min-height: 34px; padding: 0 12px; font-size: .8rem; }
.svx-rutas:empty { display: none; }

/* ---------- ventana del editor ---------- */
.svx-ed-back {
  position: fixed; inset: 0; z-index: var(--z-modal, 1000); display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 8, 18, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
[data-theme='light'] .svx-ed-back { background: rgba(30, 41, 59, .25); }
.svx-ed {
  width: min(880px, 100%); max-height: 90vh; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;
  border-radius: 24px; background: rgba(13, 18, 36, .92); border: 1px solid var(--svx-gb2);
  backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--svx-hi), 0 30px 80px rgba(0, 0, 0, .5);
}
[data-theme='light'] .svx-ed { background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(30, 50, 90, .18); }
.svx-ed__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.svx-ed__head h3 { margin: 0; font-size: 1.2rem; }
.svx-ed__x { width: 40px; height: 40px; padding: 0; }
.svx-ed__nota {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .82rem;
  color: var(--svx-txt2); background: rgba(var(--svx-lila), .1); border: 1px solid rgba(var(--svx-lila), .3);
}
.svx-ed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svx-ed__sec { margin: 0; min-width: 0; padding: 12px 14px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--svx-g); border: 1px solid var(--svx-gb); }
.svx-ed__sec--ancho { grid-column: 1 / -1; }
.svx-ed__sec legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: .84rem; font-weight: 700; color: var(--svx-txt); }
.svx-ed__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.svx-ed__fila--4 { grid-template-columns: 1.4fr 1fr .8fr .8fr; }
.svx-ed__fila--link { grid-template-columns: 1fr auto; align-items: end; }
.svx-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .76rem; color: var(--svx-txt3); }
.svx-campo input, .svx-campo select, .svx-campo textarea {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--svx-gb); background: var(--svx-campo); color: var(--svx-txt); font: inherit; font-size: .88rem;
  color-scheme: dark;
}
[data-theme='light'] .svx-campo input, [data-theme='light'] .svx-campo select, [data-theme='light'] .svx-campo textarea { color-scheme: light; }
.svx-campo select option { color: #111827; }
.svx-campo textarea { min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.svx-campo input:focus, .svx-campo select:focus, .svx-campo textarea:focus { outline: none; border-color: rgba(var(--svx-lila), .8); box-shadow: 0 0 0 3px rgba(var(--svx-lila), .2); }
.svx-campo input::placeholder, .svx-campo textarea::placeholder { color: var(--svx-txt3); opacity: .8; }
.svx-ed__ayuda { margin: 0; font-size: .76rem; color: var(--svx-txt3); }
/* DANGOFE-servicios-403: los clientes que ya existen, sugeridos debajo del nombre (sin sombras). */
.svx-ed__sug { display: flex; flex-direction: column; gap: 4px; margin-top: -2px; padding: 6px; border-radius: 12px; border: 1px solid var(--svx-gb2); background: var(--svx-g2); max-height: 260px; overflow-y: auto; }
.svx-ed__sug[hidden] { display: none; }
.svx-ed__sug-t { margin: 2px 4px 2px; font-size: .72rem; color: var(--svx-txt3); }
.svx-ed__sug-i { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--svx-txt); font: inherit; text-align: left; cursor: pointer; }
.svx-ed__sug-i b { font-size: .88rem; font-weight: 700; }
.svx-ed__sug-i span { font-size: .76rem; color: var(--svx-txt2); overflow-wrap: anywhere; }
.svx-ed__sug-i:hover, .svx-ed__sug-i:focus-visible { background: var(--svx-sel); outline: none; }
.svx-ed__ubic { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--svx-txt2); }
.svx-ed__ubic.is-ok { color: var(--svx-ok); }
.svx-ed__error { margin: 0; min-height: 1em; font-size: .84rem; color: var(--svx-mal); }
.svx-ed__pie { display: flex; justify-content: flex-end; gap: 8px; }
/* DANGOFE-servicios-141: invitaciones de calendario y enlaces. */
.svx-ed--cal { width: min(720px, 100%); }
.svx-cal { display: flex; flex-direction: column; gap: 8px; }
.svx-cal__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.svx-cal__lista li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; font-size: .82rem; background: var(--svx-g); border: 1px solid var(--svx-gb); }
.svx-cal__lista li svg { flex: none; margin-top: 2px; }
.svx-cal__lista li.is-ok svg { color: var(--svx-ok); }
.svx-cal__lista li.is-mal { border-color: rgba(var(--svx-rojo), .45); background: rgba(var(--svx-rojo), .08); }
.svx-cal__lista li.is-mal svg { color: var(--svx-mal); }
.svx-cal__lista small { display: block; margin-top: 2px; color: var(--svx-mal); }
.svx-cal__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svx-ed--cal .svx-ed__sec { margin-bottom: 10px; }

/* ---------- teléfono ---------- */
@media (max-width: 760px) {
  .svx-stage { padding: 12px; border-radius: 20px; gap: 12px; }
  .svx-marca { border-right: 0; padding-right: 0; }
  .svx-bar__der, .svx-buscar { width: 100%; }
  .svx-buscar input { width: 100%; max-width: none; }
  .svx-cab h1 { font-size: 1.5rem; }
  .svx-kpi { flex: 1 1 140px; }
  .svx-kpi .svx-num { font-size: 1.3rem; }
  .svx-pp { max-width: none; }
  .svx-pp__lista { max-height: none; }
  .svx-mapa__lienzo { height: 240px; }
  .svx-grid { grid-template-columns: 1fr; }
  .svx-sel { flex: 1 1 150px; min-width: 0; }
  .svx-ed { padding: 16px; max-height: 94vh; }
  .svx-ed__grid, .svx-ed__fila, .svx-ed__fila--4, .svx-ed__fila--link { grid-template-columns: 1fr; }
}

/* ---------- DANGOFE-servicios-142: llegada del técnico en su fila ---------- */
.svx-lane__q span.svx-jor { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: normal; line-height: 1.25; }
.svx-lane__q span.svx-jor.is-ok { color: var(--svx-ok); }
.svx-lane__q span.svx-jor.is-lejos { color: var(--svx-camino); }
.svx-lane__q span.svx-jor.is-mal { color: var(--svx-mal); }
.svx-jor svg { flex: none; }
.svx-lane__q span.svx-jor.is-aus { color: var(--svx-fija); } /* DANGOFE-asistencia-150 */

/* ============================================================
   DANGOFE-servicios-151 — CENTRO DE RUTAS (pestaña Rutas)
   El diseño que mandó Karla: números del día, mapa con la ruta de
   cada técnico (su color), «Equipo de hoy», la ruta del técnico
   elegido y los pendientes, lo más próximo primero. Prefijo svx-cr-.
   ============================================================ */
[data-theme='light'] .svx-stage { border: 1px solid rgba(148, 170, 205, 0.4); }
.svx-ed { background: rgba(10, 20, 46, .95); }
[data-theme='light'] .svx-ed { background: rgba(255, 255, 255, .94); }

/* tonos (fondo con --t, texto con --tt) */
.svx-cr-tono--verde { --t: 52, 211, 153;  --tt: #6ee7b7; }
.svx-cr-tono--azul  { --t: 96, 165, 250;  --tt: #93c5fd; }
.svx-cr-tono--ambar { --t: 251, 191, 36;  --tt: #fcd34d; }
.svx-cr-tono--lila  { --t: 167, 139, 250; --tt: #c4b5fd; }
.svx-cr-tono--rojo  { --t: 248, 113, 113; --tt: #fca5a5; }
[data-theme='light'] .svx-cr-tono--verde { --t: 5, 150, 105;  --tt: #047857; }
[data-theme='light'] .svx-cr-tono--azul  { --t: 37, 99, 235;  --tt: #1d4ed8; }
[data-theme='light'] .svx-cr-tono--ambar { --t: 217, 119, 6;  --tt: #92400e; }
[data-theme='light'] .svx-cr-tono--lila  { --t: 124, 58, 237; --tt: #6d28d9; }
[data-theme='light'] .svx-cr-tono--rojo  { --t: 220, 38, 38;  --tt: #b91c1c; }

.svx-cr { display: flex; flex-direction: column; gap: 16px; }
.svx-cr-volver { margin-bottom: 12px; }

/* encabezado */
.svx-cr-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 4px 0; }
.svx-cr-cab h1 { margin: 0; font-size: 2.15rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.svx-cr-cab p { margin: 6px 0 0; font-size: .96rem; color: var(--svx-txt2); }

/* números del día y fecha */
.svx-cr-kpis { display: flex; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 18px; }
.svx-cr-k {
  position: relative; flex: 1 1 190px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 16px;
  border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left;
}
button.svx-cr-k { cursor: pointer; }
button.svx-cr-k:hover { background: var(--svx-g); }
.svx-cr-k + .svx-cr-k::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--svx-gb); }
.svx-cr-k__ico {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--t), .15); color: var(--tt); box-shadow: inset 0 0 0 1px rgba(var(--t), .3);
}
.svx-cr-k__t { min-width: 0; }
.svx-cr-k__t strong { display: block; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-k__t .svx-num { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.svx-cr-k__t small { display: block; margin-top: 1px; font-size: .8rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-fecha { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 10px; }
.svx-cr-fecha .svx-btn { min-height: 42px; }
.svx-cr-fecha__d { position: relative; gap: 8px; min-width: 146px; }
.svx-cr-fecha__d input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.svx-cr-fecha__d input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; cursor: pointer; }

/* mapa + equipo */
.svx-cr-main { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 16px; align-items: stretch; }
.svx-cr-mapa { position: relative; min-height: 600px; padding: 0; overflow: hidden; border-radius: 20px; }
.svx-cr-lienzo { position: absolute; inset: 0; background: #0a1834; }
[data-theme='light'] .svx-cr-lienzo { background: #eef2f8; }
.svx-cr-lienzo .svx-vacio { position: absolute; inset: 16px; }
.svx-cr-mapa__pie {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; pointer-events: none; padding: 6px 10px; border-radius: 10px;
  font-size: .74rem; color: var(--svx-txt2); background: rgba(8, 16, 38, .8); border: 1px solid var(--svx-gb);
}
[data-theme='light'] .svx-cr-mapa__pie { background: rgba(255, 255, 255, .88); }
.svx-cr-centrar {
  position: absolute; right: 56px; bottom: 66px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--svx-txt);
  background: rgba(10, 20, 44, .88); border: 1px solid var(--svx-gb2); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
[data-theme='light'] .svx-cr-centrar { background: rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(30, 50, 90, .15); }
.svx-cr-mapa .maplibregl-ctrl-bottom-right { bottom: 30px; }
.svx-cr-mapa .maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; background: rgba(10, 20, 44, .88); border: 1px solid var(--svx-gb2); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.svx-cr-mapa .maplibregl-ctrl-group button { width: 38px; height: 38px; }
.svx-cr-mapa .maplibregl-ctrl-group button + button { border-top: 1px solid var(--svx-gb); }
.svx-cr-mapa .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) brightness(1.4); }
[data-theme='light'] .svx-cr-mapa .maplibregl-ctrl-group { background: rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(30, 50, 90, .15); }
[data-theme='light'] .svx-cr-mapa .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: none; }
.svx-cr-mapa .maplibregl-ctrl-attrib { background: rgba(8, 16, 38, .7); color: var(--svx-txt3); }
.svx-cr-mapa .maplibregl-ctrl-attrib a { color: var(--svx-txt2); }
[data-theme='light'] .svx-cr-mapa .maplibregl-ctrl-attrib { background: rgba(255, 255, 255, .8); }

/* paradas, etiquetas y ventanita del mapa */
.svx-pin {
  --c: #22d3ee; box-sizing: border-box; width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: #0b1630; border: 2.5px solid var(--c); color: #fff;
  font: 700 12px/1 'Sora', var(--font-family-ui); transition: opacity .2s ease;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 24%, transparent), 0 4px 12px rgba(0, 0, 0, .45);
}
.svx-pin.is-hecho { background: var(--c); color: #0b1630; opacity: .78; }
.svx-pin.is-prox { width: 34px; height: 34px; font-size: 13px; animation: svx-pulso 1.8s ease-out infinite; }
.svx-pin--base { background: #e8eeff; color: #0b1630; border-color: #fff; cursor: default; }
.svx-pin.is-tenue, .svx-rtag.is-tenue { opacity: .28; }
[data-theme='light'] .svx-pin { background: #fff; color: #0f172a; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent), 0 4px 10px rgba(30, 50, 90, .25); }
[data-theme='light'] .svx-pin.is-hecho { background: var(--c); color: #fff; }
[data-theme='light'] .svx-pin--base { background: #0f172a; color: #fff; border-color: #0f172a; }
@keyframes svx-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent), 0 4px 12px rgba(0, 0, 0, .45); }
  100% { box-shadow: 0 0 0 15px transparent, 0 4px 12px rgba(0, 0, 0, .45); }
}
@media (prefers-reduced-motion: reduce) { .svx-pin.is-prox { animation: none; } }
.svx-rtag {
  --c: #22d3ee; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  font: 600 12px/1.2 'Sora', var(--font-family-ui); color: #fff; background: rgba(8, 16, 38, .9); border: 1.5px solid var(--c);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent);
}
[data-theme='light'] .svx-rtag { color: #0f172a; background: rgba(255, 255, 255, .96); box-shadow: 0 4px 12px rgba(30, 50, 90, .18); }
.svx-pop .maplibregl-popup-content {
  padding: 0; border-radius: 16px; background: var(--svx-pop); border: 1px solid var(--svx-gb2); color: var(--svx-txt);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5); font-family: var(--font-family-ui);
}
[data-theme='light'] .svx-pop .maplibregl-popup-content { box-shadow: 0 18px 40px rgba(30, 50, 90, .22); }
.svx-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .svx-pop.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .svx-pop.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--svx-pop); }
.svx-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip, .svx-pop.maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .svx-pop.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--svx-pop); }
.svx-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--svx-pop); }
.svx-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--svx-pop); }
.svx-pop__c { min-width: 250px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.svx-pop__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--svx-gb); }
.svx-pop__h b { font-family: 'Sora', var(--font-family-ui); font-size: .95rem; }
.svx-pop__x { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--svx-txt2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.svx-pop__x:hover { background: var(--svx-g2); }
.svx-pop__f { display: flex; align-items: center; gap: 9px; font-size: .86rem; line-height: 1.35; }
.svx-pop__f svg { flex: none; color: var(--svx-txt3); }
.svx-pop__f .svx-cr-est { margin-left: auto; }
.svx-pop__ir { width: 100%; margin-top: 4px; min-height: 42px; }

/* estados (siempre con texto, nunca solo el color) */
.svx-cr-est {
  --t: 148, 163, 184; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .74rem; font-weight: 600; color: var(--svx-txt); background: rgba(var(--t), .14); border: 1px solid rgba(var(--t), .38);
}
.svx-cr-est i { width: 7px; height: 7px; border-radius: 2px; background: rgb(var(--t)); flex: none; }
.svx-cr-est--camino, .svx-cr-est--b-camino { --t: 96, 165, 250; }
.svx-cr-est--curso, .svx-cr-est--b-curso, .svx-cr-est--b-hecho { --t: 52, 211, 153; }
.svx-cr-est--espera, .svx-cr-est--entre, .svx-cr-est--prog, .svx-cr-est--b-normal, .svx-cr-est--b-fija { --t: 167, 139, 250; }
.svx-cr-est--aus { --t: 244, 114, 182; }
.svx-cr-est--sinllegada { --t: 251, 191, 36; }
.svx-cr-est--b-atrasado { --t: 248, 113, 113; }

/* columna derecha: equipo y ruta del técnico */
.svx-cr-lado { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.svx-cr-equipo, .svx-cr-det { min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 20px; }
.svx-cr-det { flex: 1; }
.svx-cr-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svx-cr-h h2 { margin: 0; font-size: 1.12rem; font-weight: 600; }
.svx-cr-h__nota { font-size: .78rem; color: var(--svx-txt3); }
.svx-cr-pill { padding: 3px 10px; border-radius: 999px; font-size: .78rem; color: var(--svx-txt2); background: var(--svx-g2); border: 1px solid var(--svx-gb); }
.svx-cr-equipo .svx-cr-pill { margin-left: auto; }
.svx-cr-pill--ambar { background: rgb(251, 191, 36); color: #3a2a00; border-color: transparent; font-weight: 800; }
.svx-cr-tecs { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.svx-cr-tec {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 14px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.svx-cr-tec:hover { background: var(--svx-g); }
.svx-cr-tec.is-on { background: var(--svx-sel); border-color: var(--svx-sel-b); box-shadow: inset 0 1px 0 var(--svx-hi); }
.svx-cr-tec > svg { color: var(--svx-txt3); }
.svx-cr-av {
  --c: #22d3ee; width: 42px; height: 42px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 .8rem 'Sora', var(--font-family-ui); color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 72%, #0b1630), color-mix(in srgb, var(--c) 34%, #0b1630));
  box-shadow: 0 0 0 2px var(--c), 0 0 0 4px rgba(0, 0, 0, .22);
}
[data-theme='light'] .svx-cr-av { background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.svx-cr-tec__t { min-width: 0; }
.svx-cr-tec__t strong { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-tec__t small { display: block; margin-top: 2px; font-size: .78rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-tec__d { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.svx-cr-tec__d small { font-size: .74rem; color: var(--svx-txt3); white-space: nowrap; }
.svx-cr-det__cab { display: flex; align-items: center; gap: 10px; }
.svx-cr-det__cab > div { flex: 1; min-width: 0; }
.svx-cr-det__cab strong { display: block; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-det__cab small { display: block; margin-top: 2px; font-size: .78rem; color: var(--svx-txt3); }
.svx-cr-det__cab small.is-mal { color: var(--svx-mal); }
.svx-cr-det__cab .svx-btn { min-height: 36px; padding: 0 12px; font-size: .8rem; flex: none; }
.svx-cr-det__t { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--svx-txt2); }
.svx-cr-det__t b { color: var(--svx-txt); font-weight: 600; }
.svx-cr-det__t span { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--svx-ok); }
.svx-cr-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 330px; overflow-y: auto; }
.svx-cr-tl li { position: relative; display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 6px 9px 0; }
.svx-cr-tl li + li { border-top: 1px solid var(--svx-linea); }
.svx-cr-tl li::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--svx-gb2); }
.svx-cr-tl li:first-child::before { top: 50%; }
.svx-cr-tl li:last-child::before { bottom: 50%; }
.svx-cr-tl li > svg { color: var(--svx-txt3); }
.svx-cr-tl__p {
  position: relative; z-index: 1; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--svx-punto); border: 2px solid var(--svx-txt3); color: #fff;
}
.svx-cr-tl li.is-hecho .svx-cr-tl__p { background: #10b981; border-color: #10b981; }
.svx-cr-tl li.is-curso .svx-cr-tl__p, .svx-cr-tl li.is-camino .svx-cr-tl__p, .svx-cr-tl li.is-prox .svx-cr-tl__p {
  border-color: #3b82f6; background: #3b82f6; box-shadow: inset 0 0 0 4px var(--svx-punto), 0 0 0 4px rgba(59, 130, 246, .25);
}
.svx-cr-tl li.is-atrasado .svx-cr-tl__p { border-color: rgb(var(--svx-rojo)); }
.svx-cr-tl li.is-prox { background: var(--svx-sel); border-radius: 12px; border-top-color: transparent; }
.svx-cr-tl li.is-prox + li { border-top-color: transparent; }
.svx-cr-tl__h { font-size: .82rem; color: var(--svx-txt2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svx-cr-tl__h small { display: block; font-size: .74rem; color: var(--svx-txt3); }
.svx-cr-tl__s { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.svx-cr-tl__s b { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-tl__s small { font-size: .76rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-tl__s em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--svx-txt2); }
.svx-cr-tl li.is-prox em, .svx-cr-tl li.is-camino em, .svx-cr-tl li.is-curso em { color: #93c5fd; }
[data-theme='light'] .svx-cr-tl li.is-prox em, [data-theme='light'] .svx-cr-tl li.is-camino em, [data-theme='light'] .svx-cr-tl li.is-curso em { color: #1d4ed8; }
.svx-cr-tl li.is-hecho b { color: var(--svx-txt2); }
.svx-cr-tl li.is-hecho em { color: var(--svx-ok); }
.svx-cr-tl li.is-atrasado em { color: var(--svx-mal); }
.svx-cr-det__acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.svx-cr-det__acc:empty { display: none; }
.svx-cr-det__acc > :only-child { grid-column: 1 / -1; }
.svx-cr-det__acc .svx-btn { min-height: 44px; }

/* pendientes de asignación */
.svx-cr-pend { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 20px; }
.svx-cr-alerta {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--svx-mal); background: rgba(var(--svx-rojo), .1); border: 1px solid rgba(var(--svx-rojo), .55);
}
.svx-cr-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; color: #93b4ff; }
[data-theme='light'] .svx-cr-link { color: #1d4ed8; }
.svx-cr-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.svx-cr-pc { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--svx-g); border: 1px solid var(--svx-gb); }
.svx-cr-pc__top { display: flex; align-items: center; gap: 8px; font-size: .74rem; min-width: 0; }
.svx-cr-cat { min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; font-weight: 600; color: var(--ci); background: rgba(var(--c), .14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-cat i { width: 8px; height: 8px; border-radius: 2px; background: rgb(var(--c)); flex: none; }
.svx-cr-pc__top em { margin-left: auto; font-style: normal; color: var(--svx-txt3); white-space: nowrap; }
.svx-cr-pc strong { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svx-cr-pc small { font-size: .8rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-cr-pc__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.svx-cr-pc__pie .svx-btn { min-height: 38px; padding: 0 12px; font-size: .82rem; flex: none; }
.svx-cr-cuando {
  --t: 148, 163, 184; --tt: var(--svx-txt2); min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px;
  font-size: .76rem; font-weight: 600; color: var(--tt); background: rgba(var(--t), .14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svx-cr-cuando svg { flex: none; }

/* elegir pendiente para un técnico */
.svx-cr-elegir { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; padding: 2px; }
.svx-cr-elegir__f {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--svx-gb); background: var(--svx-g); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.svx-cr-elegir__f:hover { background: var(--svx-g2); }
.svx-cr-elegir__f > i { width: 10px; height: 10px; border-radius: 3px; background: rgb(var(--c)); }
.svx-cr-elegir__f b { display: block; font-size: .88rem; }
.svx-cr-elegir__f small { display: block; font-size: .78rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* pantallas medianas y teléfono */
@media (max-width: 1260px) { .svx-cr-main { grid-template-columns: minmax(0, 1fr) 370px; } }
@media (max-width: 1060px) {
  .svx-cr-main { grid-template-columns: 1fr; }
  .svx-cr-mapa { min-height: 440px; }
  .svx-cr-lado { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .svx-cr-cab h1 { font-size: 1.65rem; }
  .svx-cr-cab .svx-btn { width: 100%; }
  .svx-cr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; }
  .svx-cr-k { padding: 6px; gap: 9px; }
  .svx-cr-k + .svx-cr-k::before { display: none; }
  .svx-cr-k__ico { width: 36px; height: 36px; border-radius: 11px; }
  .svx-cr-k__t .svx-num { font-size: 1.2rem; }
  .svx-cr-k__t strong { font-size: .9rem; }
  .svx-cr-k { align-items: flex-start; }
  .svx-cr-k__t strong, .svx-cr-k__t small { white-space: normal; line-height: 1.25; } /* DANGOFE-servicios-156: sin cortar en el teléfono */
  .svx-cr-k__ico { display: none; }
  .svx-cr-mapa__pie { display: none; } /* el mapa ya lleva su © OpenStreetMap */
  .svx-cr-tec { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; } /* el estado baja debajo del nombre */
  .svx-cr-tec > .svx-cr-av { grid-row: span 2; }
  .svx-cr-tec > svg { display: none; }
  .svx-cr-tec__d { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .svx-cr-fecha { grid-column: 1 / -1; margin-left: 0; padding: 4px 0 0; }
  .svx-cr-fecha__d { flex: 1; min-width: 0; }
  .svx-cr-mapa { min-height: 360px; }
  .svx-cr-centrar { right: 52px; }
  .svx-cr-lado { display: flex; }
  .svx-cr-tl li { grid-template-columns: 22px 48px minmax(0, 1fr) auto; }
  .svx-cr-pgrid { grid-template-columns: 1fr; }
  .svx-cr-pend .svx-h2__esp { display: none; }
  .svx-cr-alerta { width: 100%; justify-content: center; }
}
/* ---------- DANGOFE-servicios-155: ya se hizo, cancelar, reactivar y marcar varios ---------- */
.svx-btn--peligro { background: #dc2626; color: #fff; border-color: transparent; font-weight: 700; }
.svx-btn--quitar { color: var(--svx-mal); }
.svx-ed--mini { width: min(520px, 100%); }
.svx-ed--varios { width: min(640px, 100%); }
.svx-ed__pie { flex-wrap: wrap; }
.svx-ed__cierre { display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
/* DANGOFE-servicios-470: ver el checklist (con sus archivos) y quitárselo al servicio, debajo del selector de la ficha */
.svx-chk-acc { margin-top: 8px; }
.svx-chk-acc__bts { display: flex; flex-wrap: wrap; gap: 8px; }
/* DANGOFE-servicios-473: la lista «Por facturar y cotizaciones en el sitio» dentro de la bandeja «Por hacer» */
.svx-c1-sub { margin: 10px 0 6px; font-size: 14px; font-weight: 700; }
.svx-c1-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.svx-c1-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.svx-motivos { margin: 0; padding: 10px 12px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--svx-g); border: 1px solid var(--svx-gb); }
.svx-motivos legend { padding: 0 6px; font-size: .84rem; font-weight: 700; color: var(--svx-txt); }
.svx-motivos label { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--svx-txt); cursor: pointer; }
.svx-motivos input[type='radio'], .svx-mv input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: #6366f1; }
.svx-motivos--fila { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.svx-motivos__otro {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--svx-gb); background: var(--svx-campo); color: var(--svx-txt); font: inherit; font-size: .88rem;
}
.svx-motivos__otro[hidden] { display: none; }
.svx-mv { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; padding: 2px; }
.svx-mv__fila {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: 12px; background: var(--svx-g); border: 1px solid var(--svx-gb); cursor: pointer;
}
.svx-mv__fila:has(input:checked) { border-color: rgba(var(--svx-lila), .7); background: rgba(var(--svx-lila), .1); }
.svx-mv__fila strong { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-mv__fila small { display: block; font-size: .76rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-mv__fila em { font-style: normal; font-size: .74rem; color: var(--svx-txt3); white-space: nowrap; }
.svx-mv__todos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.svx-mv__todos .svx-btn { min-height: 32px; padding: 0 10px; font-size: .8rem; }
.svx-mv__todos span { margin-left: auto; font-size: .78rem; color: var(--svx-txt3); }
.svx-viejos {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: .8rem; line-height: 1.35;
  background: rgba(var(--svx-amarillo), .12); border: 1px solid rgba(var(--svx-amarillo), .42); color: var(--svx-txt);
}
.svx-viejos svg { flex: none; color: var(--svx-camino); }
.svx-viejos .svx-btn { margin-left: auto; min-height: 32px; padding: 0 12px; font-size: .8rem; flex: none; }
.svx-varios { align-self: flex-start; min-height: 32px; padding: 0 8px; font-size: .78rem; color: var(--svx-txt2); }
.svx-tag--viejo { background: rgba(var(--svx-lila), .16); color: var(--svx-txt2); }

/* ============================================================
   DANGOFE-servicios-157 — DESPACHO EN TABLERO (el diseño de Karla)
   Números con icono, Día / Semana / Mes, filtro por técnico, cuatro
   columnas (Por programar · Programados · En curso · Completados),
   sugerencia + ruta del día y avisos. Día (perla) y noche (azul marino).
   ============================================================ */
.svx-tema {
  --dk-card: rgba(22, 38, 80, 0.78);
  --dk-card-b: rgba(125, 152, 232, 0.18);
  --dk-sombra: 0 10px 26px rgba(0, 0, 0, 0.28);
  --dk-azul: 59, 130, 246; --dk-verde: 16, 185, 129; --dk-naranja: 249, 115, 22; --dk-ambar: 245, 158, 11;
  --dk-lila: 139, 92, 246; --dk-cian: 6, 182, 212; --dk-rojo: 239, 68, 68;
}
[data-theme='light'] .svx-tema {
  --dk-card: #ffffff;
  --dk-card-b: rgba(148, 163, 184, 0.28);
  --dk-sombra: 0 6px 18px rgba(30, 50, 90, 0.07);
}
.svx-marca--texto { gap: 0; }
.svx-marca--texto strong { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; }
.svx-marca--texto small { font-size: .78rem; }
.svx-tab svg { opacity: .8; }
.svx-btn--azul { background: #2563eb; color: #fff; border-color: transparent; font-weight: 700; box-shadow: 0 8px 20px rgba(37, 99, 235, .3); }
.svx-dk-borde { background: transparent; border-color: rgba(var(--dk-azul), .45); color: #93c5fd; }
[data-theme='light'] .svx-dk-borde { color: #1d4ed8; }
.svx-dk { display: flex; flex-direction: column; gap: 16px; }

/* cabecera y números */
.svx-dk-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.svx-dk-tit { flex: 1 1 300px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svx-dk-tit h1 { margin: 0; font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.svx-dk-tit p { margin: 0; font-size: .95rem; color: var(--svx-txt2); }
.svx-dk-kpis { flex: 3 1 640px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.svx-dk-kpi { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; min-width: 0; text-align: left; font: inherit; color: inherit; }
button.svx-dk-kpi { cursor: pointer; }
button.svx-dk-kpi:hover { filter: brightness(1.04); }
.svx-dk-kpi__ico { width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.svx-dk-kpi__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.svx-dk-kpi__t b { font-size: 1.5rem; font-weight: 700; }
.svx-dk-kpi__t span { font-size: .86rem; color: var(--svx-txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-dk-kpi__t small { font-size: .72rem; color: var(--svx-txt3); }
.svx-dk-tono--azul { background: rgba(var(--dk-azul), .14); color: #3b82f6; }
.svx-dk-tono--azul2 { background: rgba(var(--dk-azul), .14); color: #2563eb; }
.svx-dk-tono--verde { background: rgba(var(--dk-verde), .15); color: #10b981; }
.svx-dk-tono--cian { background: rgba(var(--dk-cian), .14); color: #06b6d4; }
.svx-dk-tono--naranja { background: rgba(var(--dk-naranja), .14); color: #f97316; }
.svx-dk-tono--rojo { background: rgba(var(--dk-rojo), .13); color: #ef4444; }

/* controles */
.svx-dk-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svx-dk-nav { display: flex; align-items: center; gap: 8px; }
.svx-dk-nav .svx-btn { min-height: 42px; min-width: 42px; padding: 0 12px; background: var(--dk-card); border-color: var(--dk-card-b); }
.svx-dk-hoy { min-width: 70px !important; }
.svx-dk-hoy.is-on { background: rgba(var(--dk-azul), .14) !important; border-color: rgba(var(--dk-azul), .35) !important; color: #2563eb; }
.svx-tema .svx-dk-hoy.is-on { color: #93c5fd; }
[data-theme='light'] .svx-dk-hoy.is-on { color: #1d4ed8; }
.svx-dk-fecha {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--svx-txt2);
  background: var(--dk-card); border: 1px solid var(--dk-card-b);
}
.svx-dk-fecha input { border: 0; background: transparent; color: var(--svx-txt); font: inherit; font-size: .92rem; color-scheme: dark; outline: none; }
[data-theme='light'] .svx-dk-fecha input { color-scheme: light; }
.svx-dk-seg { background: var(--dk-card); border-color: var(--dk-card-b); }
.svx-dk-seg button { min-width: 84px; padding: 7px 14px; font-size: .88rem; }
.svx-dk-seg button.is-on { background: #2563eb; color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.svx-dk-modo { margin-left: auto; }
.svx-dk-modo button { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.svx-dk-tec {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--svx-txt2);
  background: var(--dk-card); border: 1px solid var(--dk-card-b); min-width: 240px;
}
.svx-dk-tec select { flex: 1; border: 0; background: transparent; color: var(--svx-txt); font: inherit; font-size: .9rem; outline: none; cursor: pointer; }
.svx-dk-tec select option { color: #111827; }

/* columnas */
.svx-dk-tab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.svx-dk-col {
  --t: var(--dk-ambar);
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; min-width: 0;
  background: rgba(var(--t), .07); border: 1px solid rgba(var(--t), .16);
}
.svx-dk-col--prog { --t: var(--dk-lila); }
.svx-dk-col--curso { --t: var(--dk-azul); }
.svx-dk-col--hecho { --t: var(--dk-verde); }
.svx-dk-col.is-sobre { box-shadow: 0 0 0 2px rgba(var(--t), .7); background: rgba(var(--t), .14); }
.svx-dk-col__h { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.svx-dk-col__h h2 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.svx-dk-col__h small { display: block; font-size: .78rem; color: var(--svx-txt3); }
.svx-dk-col__h > div { flex: 1; min-width: 0; }
.svx-dk-col__ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--t), .16); color: rgb(var(--t)); }
.svx-dk-col--pp .svx-dk-col__ico { color: #f59e0b; }
.svx-dk-n { min-width: 30px; height: 26px; padding: 0 8px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; background: rgba(var(--t), .18); color: rgb(var(--t)); }
.svx-dk-col--pp .svx-dk-n { color: #d97706; }
.svx-dk-lista { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow-y: auto; padding: 2px; }

/* tarjetas */
.svx-dk-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  background: var(--dk-card); border: 1px solid var(--dk-card-b); box-shadow: var(--dk-sombra);
}
.svx-dk-card:hover { border-color: rgba(var(--dk-azul), .35); }
.svx-dk-card.is-arrastre { opacity: .55; transform: rotate(-1.5deg); }
.svx-dk-card__top { display: flex; align-items: center; gap: 8px; }
.svx-dk-card h3 { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.3; min-width: 0; }
.svx-dk-card__top h3 { flex: 1; }
.svx-dk-os { font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: var(--svx-g2); color: var(--svx-txt2); border: 1px solid var(--dk-card-b); }
.svx-dk-cat { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--c, 148, 163, 184)); flex: none; }
.svx-dk-mas { margin-left: auto; width: 30px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--svx-txt3); font-size: 1.2rem; line-height: 1; cursor: pointer; flex: none; }
.svx-dk-mas:hover { background: var(--svx-g2); color: var(--svx-txt); }
.svx-dk-l { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: var(--svx-txt2); line-height: 1.35; min-width: 0; }
.svx-dk-l svg { flex: none; margin-top: 1px; opacity: .7; }
.svx-dk-l span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.svx-dk-l.is-tenue { color: var(--svx-txt3); }
.svx-dk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.svx-dk-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--svx-g2); color: var(--svx-txt2); }
.svx-dk-tag.is-ambar { background: rgba(var(--dk-ambar), .14); color: #d97706; }
.svx-dk-tag.is-rojo { background: rgba(var(--dk-rojo), .12); color: #dc2626; }
.svx-dk-tag.is-lila { background: rgba(var(--dk-lila), .13); color: #7c3aed; }
.svx-tema .svx-dk-tag.is-ambar { color: #fbbf24; }
.svx-tema .svx-dk-tag.is-rojo { color: #fca5a5; }
.svx-tema .svx-dk-tag.is-lila { color: #c4b5fd; }
[data-theme='light'] .svx-dk-tag.is-ambar { color: #b45309; }
[data-theme='light'] .svx-dk-tag.is-rojo { color: #dc2626; }
[data-theme='light'] .svx-dk-tag.is-lila { color: #6d28d9; }
.svx-dk-ancho { width: 100%; margin-top: 6px; min-height: 40px; }
.svx-dk-hora { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--svx-txt2); }
.svx-dk-sep { height: 1px; background: var(--dk-card-b); margin: 6px 0 2px; }
.svx-dk-tec1 { display: flex; align-items: center; gap: 10px; }
.svx-dk-tec1 > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.svx-dk-tec1 b { font-size: .9rem; }
.svx-dk-tec1 small { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--svx-txt3); }
.svx-dk-tec1 small.is-mal { color: var(--svx-mal); }
.svx-dk-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; background: var(--svx-g2); border: 1px solid var(--dk-card-b); color: var(--svx-txt2); }
.svx-dk-num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .84rem; font-weight: 800; color: #fff; }
.svx-dk-num.is-azul { background: #3b82f6; box-shadow: 0 0 0 4px rgba(var(--dk-azul), .18); }
.svx-dk-num.is-verde { background: #10b981; box-shadow: 0 0 0 4px rgba(var(--dk-verde), .18); }
.svx-dk-est { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.svx-dk-est.is-curso { background: rgba(var(--dk-azul), .14); color: #2563eb; }
.svx-dk-est.is-camino { background: rgba(var(--dk-ambar), .15); color: #b45309; }
.svx-tema .svx-dk-est.is-curso { color: #93c5fd; }
.svx-tema .svx-dk-est.is-camino { color: #fcd34d; }
[data-theme='light'] .svx-dk-est.is-curso { color: #1d4ed8; }
[data-theme='light'] .svx-dk-est.is-camino { color: #b45309; }
.svx-dk-hr { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--svx-txt2); }
.svx-dk-fin { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: #059669; margin-top: 2px; }
.svx-tema .svx-dk-fin { color: #6ee7b7; }
[data-theme='light'] .svx-dk-fin { color: #047857; }
.svx-dk-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; text-align: center; border-radius: 16px;
  border: 1.5px dashed rgba(var(--t), .35); color: var(--svx-txt3);
}
.svx-dk-vacio svg { color: rgb(var(--t)); opacity: .8; }
.svx-dk-vacio b { font-size: 1.05rem; color: var(--svx-txt2); }
.svx-dk-vacio span { font-size: .84rem; max-width: 240px; }
.svx-dk-vacio .svx-btn { margin-top: 6px; }
.svx-dk-vertodos { align-self: center; }

/* menú «⋯» */
.svx-dk-menu {
  position: absolute; z-index: var(--z-modal, 1000); min-width: 210px; padding: 6px; border-radius: 14px; display: flex; flex-direction: column;
  background: var(--svx-pop); border: 1px solid var(--svx-gb2); box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.svx-dk-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--svx-txt); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.svx-dk-menu button:hover { background: var(--svx-sel); }
.svx-dk-menu button.is-mal { color: var(--svx-mal); }

/* tira de abajo: sugerencia y ruta del día */
.svx-dk-tira { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; padding: 14px 16px; border-radius: 20px; }
.svx-dk-sug, .svx-dk-ruta { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.svx-dk-sug { padding-right: 16px; border-right: 1px solid var(--dk-card-b); }
.svx-dk-ruta { padding-left: 16px; }
.svx-dk-tira__ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.svx-dk-tira__t { display: flex; flex-direction: column; min-width: 0; }
.svx-dk-tira__t b { font-size: .98rem; }
.svx-dk-tira__t small { font-size: .8rem; color: var(--svx-txt3); }
.svx-dk-av--g { width: 42px; height: 42px; }
.svx-dk-sug__q { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.svx-dk-sug__q b { font-size: .92rem; }
.svx-dk-sug__q small { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-dk-sug__acc { display: flex; gap: 8px; flex-wrap: wrap; }
.svx-dk-sug__nada { margin: 0; flex: 1 1 220px; font-size: .84rem; color: var(--svx-txt3); }
.svx-dk-mini { position: relative; flex: 1 1 260px; height: 110px; border-radius: 14px; overflow: hidden; border: 1px solid var(--dk-card-b); }
.svx-dk-mini__l { position: absolute; inset: 0; background: #0a1834; }
[data-theme='light'] .svx-dk-mini__l { background: #eef2f8; }
.svx-dk-mini__l .svx-vacio { position: absolute; inset: 0; border: 0; padding: 0; font-size: .8rem; }
.svx-dk-mini .maplibregl-ctrl-group, .svx-dk-mini .maplibregl-ctrl-attrib { display: none; }
.svx-dk-mini .svx-pin { width: 20px; height: 20px; font-size: 10px; border-width: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.svx-dk-mini__ir { position: absolute; inset: 0; z-index: 3; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; }
.svx-dk-mini__ir span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: .74rem; font-weight: 600; background: var(--svx-pop); color: var(--svx-txt); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }

/* avisos de abajo */
.svx-dk-pie { display: flex; flex-wrap: wrap; gap: 10px; }
.svx-dk-chip {
  --t: var(--dk-naranja);
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: .86rem; font-weight: 600;
  background: rgba(var(--t), .1); border: 1px solid rgba(var(--t), .3); color: var(--svx-txt); cursor: pointer;
}
span.svx-dk-chip { cursor: default; }
.svx-dk-chip svg { color: rgb(var(--t)); flex: none; }
.svx-dk-chip b { color: rgb(var(--t)); }
.svx-dk-chip.is-rojo { --t: var(--dk-rojo); }
.svx-dk-chip.is-ok { --t: var(--dk-verde); }

/* semana */
.svx-dk-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.svx-dk-dia { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; min-width: 0; background: rgba(var(--dk-lila), .06); border: 1px solid rgba(var(--dk-lila), .14); }
.svx-dk-dia.is-hoy { background: rgba(var(--dk-azul), .09); border-color: rgba(var(--dk-azul), .4); }
.svx-dk-dia__h { display: flex; align-items: baseline; gap: 6px; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--svx-txt); font: inherit; cursor: pointer; text-align: left; }
.svx-dk-dia__h:hover { background: var(--svx-g2); }
.svx-dk-dia__h b { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--svx-txt3); }
.svx-dk-dia__h span { font-family: 'Sora', var(--font-family-ui); font-size: 1.3rem; font-weight: 700; }
.svx-dk-dia__h em { margin-left: auto; font-style: normal; font-size: .74rem; font-weight: 800; padding: 2px 8px; border-radius: 10px; background: rgba(var(--dk-azul), .15); color: #2563eb; }
.svx-tema .svx-dk-dia__h em { color: #93c5fd; }
[data-theme='light'] .svx-dk-dia__h em { color: #1d4ed8; }
.svx-dk-dia__l { display: flex; flex-direction: column; gap: 6px; }
.svx-dk-dia__nada { font-size: .8rem; color: var(--svx-txt3); padding: 8px 6px; }
.svx-dk-mc {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 8px 12px; border-radius: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; position: relative;
  background: var(--dk-card); border: 1px solid var(--dk-card-b); box-shadow: var(--dk-sombra);
}
.svx-dk-mc::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: rgb(var(--c, 148, 163, 184)); }
.svx-dk-mc__h { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--svx-txt3); }
.svx-dk-mc b { font-size: .82rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svx-dk-mc small { font-size: .74rem; color: var(--svx-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svx-dk-mc.is-hecho { opacity: .7; }
.svx-dk-mc.is-hecho .svx-dk-mc__h { color: #059669; }
.svx-dk-mc.is-vencido .svx-dk-mc__h { color: #dc2626; }

/* mes */
.svx-dk-mes { padding: 12px; border-radius: 20px; }
.svx-dk-mes__ds { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 2px 6px; }
.svx-dk-mes__ds span { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--svx-txt3); text-align: center; }
.svx-dk-mes__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.svx-dk-cel { min-height: 104px; min-width: 0; padding: 6px; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; background: var(--dk-card); border: 1px solid var(--dk-card-b); }
.svx-dk-cel.is-fuera { opacity: .45; }
.svx-dk-cel.is-hoy { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; }
.svx-dk-cel__n { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--svx-txt); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.svx-dk-cel__n:hover { background: var(--svx-g2); }
.svx-dk-cel__n em { margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 800; padding: 1px 6px; border-radius: 8px; background: rgba(var(--dk-azul), .14); color: #2563eb; }
.svx-tema .svx-dk-cel__n em { color: #93c5fd; }
[data-theme='light'] .svx-dk-cel__n em { color: #1d4ed8; }
.svx-dk-ev { display: flex; align-items: center; gap: 5px; padding: 2px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--svx-txt2); font: inherit; font-size: .72rem; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.svx-dk-ev:hover { background: var(--svx-g2); }
.svx-dk-ev i { width: 7px; height: 7px; flex: none; border-radius: 2px; background: rgb(var(--c, 148, 163, 184)); }
.svx-dk-ev span { font-weight: 700; color: var(--svx-txt3); }
.svx-dk-ev.is-hecho { text-decoration: line-through; opacity: .65; }
.svx-dk-mas3 { align-self: flex-start; padding: 1px 5px; border: 0; background: transparent; color: #2563eb; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }

/* pantallas medianas y teléfono */
@media (max-width: 1280px) {
  .svx-dk-kpis { flex-basis: 100%; }
  .svx-dk-tab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svx-dk-sem { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .svx-dk-tit h1 { font-size: 1.7rem; }
  .svx-dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .svx-dk-kpi { padding: 10px; gap: 10px; }
  .svx-dk-kpi__ico { width: 38px; height: 38px; }
  .svx-dk-kpi:last-child { grid-column: 1 / -1; }
  .svx-dk-nav { width: 100%; }
  .svx-dk-fecha { flex: 1; min-width: 0; }
  .svx-dk-fecha input { width: 100%; min-width: 0; }
  .svx-dk-seg, .svx-dk-tec { width: 100%; min-width: 0; }
  .svx-dk-seg button { flex: 1; min-width: 0; }
  .svx-dk-modo { margin-left: 0; }
  .svx-dk-tab { grid-template-columns: 1fr; }
  .svx-dk-lista { max-height: none; }
  .svx-dk-col--pp .svx-dk-lista { max-height: 520px; } /* los demás quedan a la vista */
  .svx-dk-kpi__t span { white-space: normal; }
  .svx-dk-fecha > svg { display: none; }
  .svx-dk-fecha { padding: 0 8px; }
  .svx-dk-tira { grid-template-columns: 1fr; gap: 14px; }
  .svx-dk-sug { padding-right: 0; border-right: 0; padding-bottom: 14px; border-bottom: 1px solid var(--dk-card-b); }
  .svx-dk-ruta { padding-left: 0; }
  .svx-dk-mini { flex-basis: 100%; }
  .svx-dk-sem { grid-template-columns: 1fr; }
  .svx-dk-cel { min-height: 54px; padding: 4px; }
  .svx-dk-ev, .svx-dk-mas3 { display: none; }
  .svx-dk-cel__n { flex-direction: column; gap: 2px; padding: 2px; font-size: .82rem; }
  .svx-dk-cel__n em { margin-left: 0; }
}

/* DANGOFE-portal-210: «Por confirmar». El aspecto va en servicios-porconfirmar.css
   (del chat de diseño); aquí solo el sitio de la bandeja y la foto real del comprobante. */
.svx-pcf { max-width: 720px; margin: 0 auto; padding: 8px 2px 28px; }
.pcf-comp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcf-comp--grande img { object-fit: contain; }
.pcf-comp__pdf { font-weight: 800; font-size: 15px; letter-spacing: .08em; color: var(--pcf-azul-txt); }