/* ============================================================
   DANGOFE OS · SERVICIOS C1 · ETAPA 2 · ÁREA «AGENDA» (prefijo sva-) · 2026-10-21 · chat de Diseño
   Va después de servicios-c1.css (usa sus tokens --sv-* y sus clases .sv-kpi, .sv-ava, .sv-tl*, .sv-blq*, .sv-vacio).
   Versiones (data-v en .sva): A · Semana por técnico · B · Semana por horas · C · Mes primero. Claro y «Noche azul» por los tokens.
   Sin sombras; nada animado sin parar (puntos y giro, 6 vueltas).
   ============================================================ */
.sva { display: flex; flex-direction: column; gap: 12px; color: var(--sv-tinta); font-size: 14px; }
.sva *, .sva *::before, .sva *::after { box-sizing: border-box; }
.sva button { font: inherit; color: inherit; cursor: pointer; }
/* cabecera */
.sva-cab { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--sv-r); background: var(--sv-vidrio); border: 1px solid var(--sv-borde); }
.sva-cab__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sva-cab__fila--kpis { justify-content: space-between; }
.sva-nav { display: inline-flex; align-items: center; gap: 4px; }
.sva-nav__b { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); display: grid; place-items: center; color: var(--sv-tinta); }
.sva-nav__b svg { width: 16px; height: 16px; }
.sva-nav__hoy { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); font-weight: 800; font-size: 12.5px; }
.sva-titulo { font-size: 17px; font-weight: 800; letter-spacing: -.01em; flex: 1 1 200px; min-width: 0; }
.sva-titulo::first-letter { text-transform: uppercase; }
.sva-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--sv-linea); background: var(--sv-vidrio3); }
.sva-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: 12.5px; font-weight: 700; color: var(--sv-tenue); }
.sva-seg button.is-on { background: var(--sv-az); color: #fff; }
.sva-sel { height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: var(--sv-tinta); font: inherit; font-size: 13px; font-weight: 600; max-width: 100%; }
.sva .sv-tl__ley i.sva-ley--hecho { background: rgb(var(--sv-okrgb)); } .sva .sv-tl__ley i.sva-ley--prog { background: rgb(var(--sv-morrgb)); } .sva .sv-tl__ley i.sva-ley--vencido { background: rgb(var(--sv-malrgb)); }
.sva .sv-tl__ley i.sva-ley--pcf { border: 1.5px dashed var(--sv-cel); background: transparent; } .sva .sv-tl__ley i.sva-ley--cerrado { background: repeating-linear-gradient(135deg, var(--sv-linea2) 0 2px, transparent 2px 5px); }
.sva-carga { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: var(--sv-r2); background: var(--sv-vidrio3); border: 1px solid var(--sv-linea); color: var(--sv-tenue); font-size: 13px; font-weight: 700; }
.sva-carga svg { width: 16px; height: 16px; animation: sva-gira 1.2s linear 6; }
.sva-puntos { display: inline-flex; gap: 3px; margin-left: 2px; }
.sva-puntos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: sva-punto 1.2s ease-in-out 6; }
.sva-puntos i:nth-child(2) { animation-delay: .2s; } .sva-puntos i:nth-child(3) { animation-delay: .4s; }
.sva-cuerpo { padding: 12px; border-radius: var(--sv-r); background: var(--sv-vidrio); border: 1px solid var(--sv-borde); overflow-x: auto; }
/* minis (semana por técnico, mes, sin hora) */
.sva-mini { display: flex; align-items: baseline; gap: 5px; width: 100%; min-width: 0; padding: 4px 7px; border-radius: 8px; border: 1px solid transparent; text-align: left; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.sva-mini em { font-style: normal; font-size: 10.5px; font-weight: 800; flex: none; opacity: .85; }
.sva-mini span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sva-mini--hecho { background: rgba(var(--sv-okrgb), .14); color: var(--sv-ok); }
.sva-mini--prog { background: rgba(var(--sv-morrgb), .14); color: var(--sv-mor); }
.sva-mini--vencido { background: rgba(var(--sv-malrgb), .12); color: var(--sv-mal); }
.sva-mini--pcf { background: transparent; border: 1.5px dashed var(--sv-cel); color: var(--sv-az); }
.sva-mini--llegar { border-color: var(--sv-suave); color: var(--sv-tenue); }
/* ---------- A · semana por técnico ---------- */
.sva-sem { display: grid; grid-template-columns: 150px repeat(var(--n, 7), minmax(96px, 1fr)); gap: 4px; min-width: 820px; }
.sva-sem__d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 6px; border-radius: 10px; }
.sva-sem__d button { border: 0; background: transparent; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sv-tenue); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 8px; border-radius: 10px; }
.sva-sem__d b { font-size: 17px; font-weight: 800; color: var(--sv-tinta); letter-spacing: 0; }
.sva-sem__d.is-hoy button { background: var(--sv-az); color: #fff; } .sva-sem__d.is-hoy b { color: #fff; }
.sva-sem__d small { font-size: 10px; font-weight: 700; color: var(--sv-tenue); text-align: center; line-height: 1.2; }
.sva-sem__d.is-cerrado small { color: var(--sv-mal); }
.sva-sem__tec { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px; }
.sva-sem__tec b { display: block; font-size: 13px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-sem__tec small { display: block; font-size: 11px; color: var(--sv-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-sem__tec .sv-ava svg { width: 16px; height: 16px; }
.sva-sem__celda { display: flex; flex-direction: column; gap: 3px; min-height: 58px; padding: 4px; border-radius: 10px; background: var(--sv-campo); border: 1px solid var(--sv-linea); }
.sva-sem__celda.is-hoy { border-color: rgba(var(--sv-celrgb), .55); }
.sva-sem__celda.is-libre { background: repeating-linear-gradient(135deg, var(--sv-linea2) 0 2px, transparent 2px 7px); }
.sva-sem__celda--pcf { background: rgba(var(--sv-celrgb), .05); border-style: dashed; }
/* ---------- B · semana por horas ---------- */
.sva-horas { min-width: 820px; }
.sva-horas__cab { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.sva-horas__cuerpo { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 4px; height: var(--alto, 560px); }
.sva-horas__eje { position: relative; }
.sva-horas__eje span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; color: var(--sv-suave); }
.sva-horas__col { position: relative; border-radius: 10px; background: var(--sv-campo); border: 1px solid var(--sv-linea); overflow: hidden; }
.sva-horas__col.is-hoy { border-color: rgba(var(--sv-celrgb), .55); }
.sva-horas__col.is-cerrado { background: repeating-linear-gradient(135deg, var(--sv-linea2) 0 2px, transparent 2px 7px); }
.sva-horas__linea { position: absolute; left: 0; right: 0; height: 1px; background: var(--sv-linea); }
.sva-horas__libre { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--sv-linea2) 0 2px, transparent 2px 7px); }
.sva-bloque { position: absolute; display: block; min-height: 18px; padding: 2px 6px; border-radius: 7px; border: 1px solid; border-left-width: 4px; text-align: left; font-size: 11px; font-weight: 700; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sva-bloque em { font-style: normal; font-weight: 800; opacity: .85; margin-right: 3px; }
.sva-bloque--prog { background: rgba(var(--sv-morrgb), .14); border-color: rgba(var(--sv-morrgb), .4); border-left-color: var(--tec, var(--sv-mor)); color: var(--sv-mor); }
.sva-bloque--hecho { background: rgba(var(--sv-okrgb), .16); border-color: rgba(var(--sv-okrgb), .4); border-left-color: var(--tec, var(--sv-ok)); color: var(--sv-ok); }
.sva-bloque--vencido { background: rgba(var(--sv-malrgb), .12); border-color: rgba(var(--sv-malrgb), .4); border-left-color: var(--tec, var(--sv-mal)); color: var(--sv-mal); }
.sva-bloque--pcf { background: transparent; border: 1.5px dashed var(--sv-cel); color: var(--sv-az); }
.sva-bloque--llegar { border-color: var(--sv-suave); color: var(--sv-tenue); }
/* ---------- mes ---------- */
.sva-mes__cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.sva-mes__cab span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-tenue); text-align: center; }
.sva-mes__rej { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sva-mes__d { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 92px; padding: 6px; border-radius: 12px; border: 1px solid var(--sv-linea); background: var(--sv-campo); text-align: left; }
.sva-mes__d b { font-size: 13px; font-weight: 800; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.sva-mes__d.is-otro { opacity: .45; }
.sva-mes__d.is-hoy b { background: var(--sv-az); color: #fff; }
.sva-mes__d.is-sel { border-color: rgba(var(--sv-celrgb), .8); }
.sva-mes__d.is-cerrado { background: repeating-linear-gradient(135deg, var(--sv-linea2) 0 2px, transparent 2px 7px); }
.sva-mes__motivo { font-size: 10px; font-weight: 700; color: var(--sv-mal); line-height: 1.2; }
.sva-mes__n { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sva-mes__n--hecho { background: rgba(var(--sv-okrgb), .14); color: var(--sv-ok); } .sva-mes__n--prog { background: rgba(var(--sv-morrgb), .14); color: var(--sv-mor); } .sva-mes__n--vencido { background: rgba(var(--sv-malrgb), .12); color: var(--sv-mal); } .sva-mes__n--pcf { border: 1.5px dashed var(--sv-cel); color: var(--sv-az); }
/* ---------- día (la línea, con las tandas) ---------- */
.sva .sv-tl { min-width: 640px; }
.sva .sv-tl__pista { overflow: hidden; }
.sva-tanda { position: absolute; top: 0; bottom: 0; background: rgba(var(--sv-okrgb), .07); border-left: 1px dashed rgba(var(--sv-okrgb), .35); border-right: 1px dashed rgba(var(--sv-okrgb), .35); pointer-events: none; }
.sva-tanda--libre { background: repeating-linear-gradient(135deg, var(--sv-linea2) 0 2px, transparent 2px 7px); border: 0; }
.sva .sv-blq { cursor: pointer; }
.sva-blq--pcf { background: transparent; border: 1.5px dashed var(--sv-cel); color: var(--sv-az); }
.sva-blq--llegar { border-color: var(--sv-suave); color: var(--sv-tenue); }
.sva-cerrado { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--sv-malrgb), .1); color: var(--sv-mal); font-size: 13px; font-weight: 700; }
.sva-cerrado svg { width: 15px; height: 15px; }
.sva .sv-btn:focus-visible, .sva-nav__b:focus-visible, .sva-nav__hoy:focus-visible, .sva-seg button:focus-visible, .sva-mini:focus-visible, .sva-bloque:focus-visible, .sva-mes__d:focus-visible, .sva-sem__d button:focus-visible { outline: 3px solid rgba(var(--sv-celrgb), .35); outline-offset: 1px; }
@keyframes sva-gira { to { transform: rotate(360deg); } }
@keyframes sva-punto { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 760px) { .sva-mes__d { min-height: 64px; padding: 4px; } .sva-mes__n { font-size: 9.5px; padding: 0 5px; } .sva-titulo { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .sva-carga svg, .sva-puntos i { animation: none; } }
/* ============================================================
   v2.0 (2026-10-22) · AGENDAR CON UN CLIC (Karla: las tres formas): el fantasma del hueco, el mini formulario, la tira «Por programar»
   y el aviso «Listo». Sin sombras; nada animado sin parar.
   ============================================================ */
.sva .sv-tl__ley .sva-ley--clic { display: inline-flex; align-items: center; gap: 4px; color: var(--sv-az); font-weight: 800; }
.sva .sv-tl__ley .sva-ley--clic svg { width: 13px; height: 13px; }
/* huecos donde se puede */
.sva-horas__col.is-puedo, .sva .sv-tl__pista.is-puedo, .sva-sem__celda.is-puedo { cursor: copy; }
.sva.is-colocando .sva-horas__col.is-puedo, .sva.is-colocando .sv-tl__pista.is-puedo, .sva.is-colocando .sva-sem__celda.is-puedo { outline: 2px dashed rgba(var(--sv-celrgb), .55); outline-offset: -2px; }
.sva-sem__celda { position: relative; }
.sva-celda__mas { display: none; align-items: center; gap: 4px; margin-top: auto; padding: 3px 7px; border-radius: 8px; font-size: 11px; font-weight: 800; color: var(--sv-az); background: rgba(var(--sv-celrgb), .12); pointer-events: none; }
.sva-celda__mas svg { width: 12px; height: 12px; }
.sva-sem__celda.is-puedo:hover .sva-celda__mas, .sva.is-colocando .sva-sem__celda.is-puedo .sva-celda__mas { display: inline-flex; }
/* el fantasma */
.sva-fantasma { position: absolute; z-index: 3; pointer-events: none; display: flex; align-items: flex-start; padding: 3px 6px; border-radius: 8px; border: 1.5px dashed var(--sv-az); background: rgba(var(--sv-celrgb), .14); color: var(--sv-az); font-size: 11px; font-weight: 800; line-height: 1.25; overflow: hidden; }
.sva-fantasma span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sva-fantasma svg { width: 12px; height: 12px; }
.sva-fantasma--col { left: 2px; right: 2px; min-height: 20px; }
.sva-fantasma--pista { top: 3px; bottom: 3px; min-width: 24px; align-items: center; }
.sva-fantasma--celda { position: static; margin-top: 2px; }
.sva-fantasma.is-no { border-color: var(--sv-mal); color: var(--sv-mal); background: rgba(var(--sv-malrgb), .1); border-style: dotted; }
/* la tira Por programar (forma 3) */
.sva-pp { padding: 10px 12px; border-radius: var(--sv-r); background: var(--sv-vidrio); border: 1px solid var(--sv-borde); }
.sva-pp.is-colocando { border-color: rgba(var(--sv-celrgb), .7); }
.sva-pp__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sva-pp__cab > svg { width: 16px; height: 16px; color: var(--sv-az); }
.sva-pp__cab b { font-size: 13.5px; font-weight: 800; }
.sva-pp__cab small { font-size: 12px; color: var(--sv-tenue); font-weight: 600; }
.sva-pp__cancel { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); font-size: 12px; font-weight: 800; }
.sva-pp__cancel svg { width: 12px; height: 12px; }
.sva-pp__tira { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.sva-pp__chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; width: 318px; max-width: 86vw; flex-wrap: wrap; row-gap: 6px; padding: 7px 8px 7px 6px; border-radius: 12px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); cursor: grab; }
.sva-pp__chip.is-drag { opacity: .55; }
.sva-pp__chip.is-on { border-color: var(--sv-az); background: rgba(var(--sv-celrgb), .12); }
.sva-pp__chip.is-urgente { border-color: rgba(var(--sv-malrgb), .5); }
.sva-pp__asa { color: var(--sv-suave); display: inline-flex; }
.sva-pp__asa svg { width: 16px; height: 16px; }
.sva-pp__t { min-width: 0; flex: 1 1 auto; }
.sva-pp__t b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.5px; font-weight: 800; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; }
.sva-pp__t small { display: block; font-size: 11px; color: var(--sv-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-pp__b { flex: none; height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(var(--sv-celrgb), .5); background: var(--sv-vidrio3); color: var(--sv-az); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sva-pp__chip.is-on .sva-pp__b { background: var(--sv-az); color: #fff; border-color: var(--sv-az); }
/* el aviso «Listo» */
.sva-aviso { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; border: 1px solid rgba(var(--sv-okrgb), .4); background: rgba(var(--sv-okrgb), .1); color: var(--sv-ok); animation: sva-entra .22s ease both; }
.sva-aviso--mal { border-color: rgba(var(--sv-malrgb), .4); background: rgba(var(--sv-malrgb), .1); color: var(--sv-mal); }
.sva-aviso > svg { width: 16px; height: 16px; flex: none; }
.sva-aviso span { flex: 1 1 auto; }
.sva-aviso__x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: inherit; }
.sva-aviso__x svg { width: 13px; height: 13px; }
/* el mini formulario (forma 2) */
.sva-velo { position: fixed; inset: 0; z-index: 1180; background: rgba(10, 22, 51, .42); animation: sva-aparece .2s ease both; }
.sva-velo--claro { background: transparent; }
.sva-rapido { position: fixed; z-index: 1181; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); color: var(--sv-tinta); animation: sva-entra .22s ease both; box-shadow: none; }
.sva-rapido--hoja { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 88vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: sva-sube .26s cubic-bezier(.2, .8, .2, 1) both; }
.sva-rapido__cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--sv-linea); }
.sva-rapido__ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--sv-celrgb), .14); color: var(--sv-az); flex: none; }
.sva-rapido__ico svg { width: 16px; height: 16px; }
.sva-rapido__cab > div { min-width: 0; flex: 1 1 auto; }
.sva-rapido__cab b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.sva-rapido__cab small { display: block; font-size: 12px; color: var(--sv-tenue); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-rapido__x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: var(--sv-tenue); flex: none; }
.sva-rapido__x svg { width: 15px; height: 15px; }
.sva-rapido__cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; }
.sva-rapido__fila { display: flex; gap: 8px; flex-wrap: wrap; }
.sva-rapido__fila .sva-campo { flex: 1 1 120px; }
.sva-rapido__fila .sva-campo--corto { flex: 0 1 100px; }
.sva-campo { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sva-campo > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-tenue); }
.sva-campo > span svg { width: 12px; height: 12px; }
.sva-campo input, .sva-campo select { width: 100%; height: 38px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: var(--sv-tinta); font: inherit; font-size: 13.5px; }
.sva-campo input:focus-visible, .sva-campo select:focus-visible { outline: 2px solid rgba(var(--sv-celrgb), .6); outline-offset: 1px; border-color: var(--sv-cel); }
.sva-campo__ok { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--sv-ok); }
.sva-campo__ok svg { width: 12px; height: 12px; }
.sva-sug:empty { display: none; }
.sva-sug ul { list-style: none; margin: 0; padding: 4px; border-radius: 12px; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow: auto; }
.sva-sug button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 9px; border: 0; border-radius: 9px; background: transparent; text-align: left; color: var(--sv-tinta); }
.sva-sug button:hover, .sva-sug button:focus-visible { background: rgba(var(--sv-celrgb), .12); outline: none; }
.sva-sug b { font-size: 13px; font-weight: 800; }
.sva-sug small { font-size: 11.5px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.sva-rapido__err { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--sv-mal); }
.sva-rapido__err svg { width: 13px; height: 13px; flex: none; }
.sva-rapido__pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px 12px; border-top: 1px solid var(--sv-linea); }
.sva-rapido .sv-btn { height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); color: var(--sv-tinta); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.sva-rapido .sv-btn svg { width: 14px; height: 14px; }
.sva-rapido .sv-btn--p { background: var(--sv-az); border-color: var(--sv-az); color: #fff; }
.sva-rapido .sv-btn:disabled { opacity: .55; cursor: default; }
.sva-enlace { margin-left: auto; border: 0; background: transparent; color: var(--sv-az); font: inherit; font-size: 12.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
@keyframes sva-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sva-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sva-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sva-aviso, .sva-velo, .sva-rapido { animation: none; } }

/* ============================================================
   v2.1 (2026-10-22) · el formulario rápido: «Dónde» (los lugares del cliente y «Otra dirección»), el correo, la casilla de avisarle,
   las etiquetas «Portal» y «Ya agendado antes» en las sugerencias y la casilla «Avisarles por correo» de la tira «Por programar».
   ============================================================ */
.sva-bl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sva-ok:empty { display: none; }
.sva-nota { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sv-tenue); line-height: 1.35; }
.sva-nota svg { width: 13px; height: 13px; flex: none; }
.sva-lugares { display: flex; flex-direction: column; gap: 5px; }
.sva-lugar { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: var(--sv-tinta); text-align: left; cursor: pointer; }
.sva-lugar.is-on { border-color: var(--sv-az); background: rgba(var(--sv-celrgb), .12); }
.sva-lugar:focus-visible { outline: 2px solid rgba(var(--sv-celrgb), .6); outline-offset: 1px; }
.sva-lugar__r { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--sv-suave); position: relative; }
.sva-lugar.is-on .sva-lugar__r { border-color: var(--sv-az); }
.sva-lugar.is-on .sva-lugar__r::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--sv-az); }
.sva-lugar__t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sva-lugar__t b { font-size: 13px; font-weight: 800; overflow-wrap: anywhere; line-height: 1.3; }
.sva-lugar__t small { font-size: 11.5px; color: var(--sv-tenue); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sva-pin { font-style: normal; font-weight: 800; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; background: rgba(var(--sv-okrgb), .14); color: var(--sv-ok); }
.sva-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; font-weight: 700; color: var(--sv-tinta); cursor: pointer; line-height: 1.35; }
.sva-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--sv-az); }
.sva-check.is-off { color: var(--sv-tenue); cursor: default; }
.sva-sug__tag { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; background: rgba(var(--sv-celrgb), .16); color: var(--sv-az); }
.sva-sug__tag--ya { background: rgba(var(--sv-morrgb), .14); color: var(--sv-mor); }
.sva-pp__av { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--sv-tenue); cursor: pointer; }
.sva-pp__av input { width: 15px; height: 15px; margin: 0; accent-color: var(--sv-az); }
.sva-pp__cab .sva-pp__cancel { margin-left: 0; }
.sva-aviso--amb { border-color: rgba(var(--sv-ambrgb), .45); background: rgba(var(--sv-ambrgb), .12); color: var(--sv-amb); }
.sva-rapido { width: 360px; }
/* «Noche azul»: el azul de marca (--sv-az) no se aclara en la noche; lo que lo usaba como texto, trazo o punto pasa al celeste (--sv-cel), que sí */
[data-theme='dark'] .sva-mini--pcf, [data-theme='dark'] .sva-bloque--pcf, [data-theme='dark'] .sva-blq--pcf, [data-theme='dark'] .sva .sv-tl__ley .sva-ley--clic, [data-theme='dark'] .sva-celda__mas,
[data-theme='dark'] .sva-fantasma, [data-theme='dark'] .sva-pp__cab > svg, [data-theme='dark'] .sva-pp__b, [data-theme='dark'] .sva-rapido__ico, [data-theme='dark'] .sva-enlace, [data-theme='dark'] .sva-sug__tag { color: var(--sv-cel); }
[data-theme='dark'] .sva-fantasma, [data-theme='dark'] .sva-pp__chip.is-on, [data-theme='dark'] .sva-lugar.is-on, [data-theme='dark'] .sva-lugar.is-on .sva-lugar__r { border-color: var(--sv-cel); }
[data-theme='dark'] .sva-lugar.is-on .sva-lugar__r::after { background: var(--sv-cel); }
[data-theme='dark'] .sva-check input, [data-theme='dark'] .sva-pp__av input { accent-color: var(--sv-cel); }
[data-theme='dark'] .sva-pp__chip.is-on .sva-pp__b { background: var(--sv-cel); border-color: var(--sv-cel); color: #0b1540; }
/* ============================================================
   v2.2 (22-oct) · Karla: «que se marque bien el verde y que los colores sean más llamativos», «cuando un servicio sea de prioridad, que tenga
   alguna acción interactiva» y los bloques «Checklist» y «Cobro» en agendar con un clic.
   ============================================================ */
/* los estados, más vivos */
.sva-bloque { border-width: 1.5px; border-left-width: 5px; border-radius: 8px; padding: 3px 7px 3px 6px; container-type: size; }
.sva-bloque--prog { background: rgba(var(--sv-morrgb), .26); border-color: rgba(var(--sv-morrgb), .75); border-left-color: var(--tec, var(--sv-mor)); color: #3d2891; }
.sva-bloque--hecho { background: rgba(var(--sv-okrgb), .34); border-color: rgba(var(--sv-okrgb), .9); border-left-color: var(--tec, var(--sv-ok)); color: #0b4a26; }
.sva-bloque--vencido { background: rgba(var(--sv-malrgb), .28); border-color: rgba(var(--sv-malrgb), .9); border-left-color: var(--tec, var(--sv-mal)); color: #861b1b; }
.sva-mini--hecho { background: rgba(var(--sv-okrgb), .32); color: #0b4a26; }
.sva-mini--prog { background: rgba(var(--sv-morrgb), .24); color: #3d2891; }
.sva-mini--vencido { background: rgba(var(--sv-malrgb), .26); color: #861b1b; }
[data-theme='dark'] .sva-bloque--prog, [data-theme='dark'] .sva-mini--prog { color: #dcd2ff; }
[data-theme='dark'] .sva-bloque--hecho, [data-theme='dark'] .sva-mini--hecho { color: #b7f5cd; }
[data-theme='dark'] .sva-bloque--vencido, [data-theme='dark'] .sva-mini--vencido { color: #ffc0c0; }
/* ✓ en un círculo verde y la hora en que terminó */
.sva-bq__ok { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 4px; border-radius: 50%; background: rgb(var(--sv-okrgb)); color: #fff; vertical-align: -3px; flex: none; }
.sva-bq__ok svg { width: 10px; height: 10px; stroke-width: 3.2; }
.sva-bq__f { display: none; margin-top: 2px; font-size: 10.5px; font-weight: 800; color: inherit; opacity: .9; }
@container (min-height: 52px) { .sva-bq__f { display: block; } }
@container (min-height: 50px) { .sva-bloque { white-space: normal; } .sva-bq__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } }
.sva-mini .sva-bq__ok { margin-right: 0; align-self: center; }
/* la prioridad: banderita, franja y tira */
.sva-bq__pri { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 4px; border-radius: 50%; color: #fff; vertical-align: -3px; flex: none; }
.sva-bq__pri svg { width: 9px; height: 9px; stroke-width: 2.6; }
.sva-bq__pri--alta { background: #f59e0b; }
.sva-bq__pri--urgente { background: #ef4444; }
.sva-bloque .sva-bq__pri, .sv-blq .sva-bq__pri { position: absolute; top: 3px; right: 3px; margin: 0; z-index: 2; }
.sv-blq .sva-bq__pri svg { width: 9px; height: 9px; padding: 0; border-radius: 0; background: transparent; }
.sva-mini .sva-bq__pri { margin-right: 0; align-self: center; }
.sva-bloque--alta, .sv-blq--alta { border-top: 3px solid #f59e0b; }
.sva-bloque--urgente, .sv-blq--urgente { border-top: 3px solid #ef4444; background-image: repeating-linear-gradient(135deg, rgba(239, 68, 68, .14) 0 6px, transparent 6px 12px); }
.sva-mini--alta { border-color: rgba(245, 158, 11, .8); }
.sva-mini--urgente { border-color: #ef4444; }
.sva-prio { padding: 10px 12px; border-radius: var(--sv-r); background: var(--sv-vidrio); border: 1px solid rgba(var(--sv-ambrgb), .55); }
.sva-prio.has-urgente { border-color: rgba(var(--sv-malrgb), .65); background: linear-gradient(180deg, rgba(var(--sv-malrgb), .09), var(--sv-vidrio)); background-origin: border-box; }
.sva-prio__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sva-prio__cab b { font-size: 13.5px; font-weight: 800; }
.sva-prio__cab small { font-size: 12px; color: var(--sv-tenue); font-weight: 600; }
.sva-prio__tira { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.sva-prio__chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 300px; max-width: 86vw; padding: 8px 10px 8px 12px; border-radius: 12px; border: 1px solid var(--sv-linea2); border-left-width: 4px; background: var(--sv-campo); }
.sva-prio__chip--alta { border-left-color: #f59e0b; }
.sva-prio__chip--urgente { border-left-color: #ef4444; background: rgba(var(--sv-malrgb), .08); }
.sva-prio__t { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; }
.sva-prio__t b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.5px; font-weight: 800; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; }
.sva-prio__t small { display: block; font-size: 11px; color: var(--sv-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-prio__b { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(var(--sv-malrgb), .55); background: var(--sv-vidrio3); color: var(--sv-mal); font-size: 11.5px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.sva-prio__b svg { width: 13px; height: 13px; }
.sva-prio__b.is-on { background: var(--sv-mal); border-color: var(--sv-mal); color: #fff; }
.sva-prio__b--i { width: 30px; padding: 0; }
.sva-prio__chip .sva-prio__b { width: 100%; }
.sva-prio__e { flex: none; font-size: 11px; font-weight: 800; color: var(--sv-amb); text-align: right; }
.sva-prio__b:focus-visible, .sva-prio__t:focus-visible { outline: 3px solid rgba(var(--sv-celrgb), .35); outline-offset: 1px; }
.sva-pp__chip.is-prio--alta { border-color: rgba(var(--sv-ambrgb), .7); border-left-width: 4px; border-left-color: #f59e0b; }
.sva-pp__chip.is-prio--urgente { border-color: rgba(var(--sv-malrgb), .75); border-left-width: 4px; border-left-color: #ef4444; background: rgba(var(--sv-malrgb), .08); }
.sva-pp__t b .sva-bq__pri { margin-right: 5px; }
/* agendar con un clic: «Checklist» y «Cobro» */
.sva-chk__sitio:empty { display: none; }
.sva-cobro { display: flex; flex-direction: column; gap: 8px; }
.sva-campo > span.sva-mon { display: block; position: relative; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: inherit; }
.sva-mon i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--sv-tenue); pointer-events: none; }
.sva-mon input { padding-left: 38px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sva-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sva-chip { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: var(--sv-tinta); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sva-chip.is-on { background: var(--sv-az); border-color: var(--sv-az); color: #fff; }
.sva-chip[data-v='ya_pago'].is-on, .sva-chip[data-v='abono'].is-on { background: var(--sv-ok); border-color: var(--sv-ok); }
.sva-chip:focus-visible { outline: 3px solid rgba(var(--sv-celrgb), .35); outline-offset: 1px; }
.sva-cobro__t b { color: var(--sv-tinta); }
.sva-cobro__t:empty { display: none; }
[data-theme='dark'] .sva-chip.is-on { color: #06122a; }
[data-theme='dark'] .sva-prio__t b, [data-theme='dark'] .sva-pp__t b { color: var(--sv-tinta); }

.sva-pp__chip .sva-pp__t { flex: 1 1 calc(100% - 30px); }
.sva-pp__chip .sva-pp__b, .sva-pp__chip .sva-prio__b--i { margin-left: auto; }
.sva-pp__chip .sva-prio__b--i + .sva-pp__b { margin-left: 0; }
.sva-rapido { width: 400px; }
.sva-chk .cks-cab { display: none; }
.sva-chk .cks { gap: 8px; }
.sva-chk .cks-op { padding: 9px 11px; }

/* ============================================================
   v2.3 (22-oct) · «Suspender: espera al cliente»: la acción que sale al pasar el ratón por un bloque, la insignia de «lo pasó el técnico» y la cápsula «N en espera»
   ============================================================ */
.sva-acc { position: fixed; z-index: 1190; display: flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sva-acc[hidden] { display: none; }
.sva-acc .sva-acc__b { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: 999px; border: 1px solid rgba(71, 85, 105, .5); background: rgba(71, 85, 105, .1); color: #334155; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.sva-acc .sva-acc__b svg { width: 14px; height: 14px; flex: none; }
.sva-acc .sva-acc__b:hover { background: rgba(71, 85, 105, .2); border-color: rgba(71, 85, 105, .75); }
.sva-acc .sva-acc__b:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .4); }
.sva-acc .sva-acc__b--pase { border-color: rgba(var(--sv-celrgb), .6); background: rgba(var(--sv-celrgb), .14); color: var(--sv-az); }
.sva-acc .sva-acc__b--pase:hover { background: rgba(var(--sv-celrgb), .24); }
[data-theme='dark'] .sva-acc .sva-acc__b { border-color: rgba(148, 163, 184, .55); background: rgba(148, 163, 184, .13); color: #cbd5e1; }
[data-theme='dark'] .sva-acc .sva-acc__b--pase { border-color: rgba(125, 196, 255, .6); background: rgba(125, 196, 255, .15); color: #c6e6ff; }
.sva-bq__pase { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 4px; border-radius: 50%; background: #0ea5e9; color: #fff; vertical-align: -3px; flex: none; }
.sva-bq__pase svg { width: 9px; height: 9px; stroke-width: 2.8; }
.sva-bloque .sva-bq__pase, .sv-blq .sva-bq__pase { position: absolute; top: 3px; right: 3px; z-index: 2; margin: 0; }
.sva-bq__pri + .sva-bq__pase { right: 21px; }
.sva-mini .sva-bq__pase { margin-right: 0; align-self: center; }
.sv-kpi--esp { appearance: none; cursor: pointer; font: inherit; border-color: rgba(71, 85, 105, .45); background: rgba(71, 85, 105, .1); color: #334155; }
.sv-kpi--esp i { background: #64748b; }
.sv-kpi--esp b { color: #334155; }
.sv-kpi--esp:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .4); }
[data-theme='dark'] .sv-kpi--esp { border-color: rgba(148, 163, 184, .5); background: rgba(148, 163, 184, .13); color: #cbd5e1; }
[data-theme='dark'] .sv-kpi--esp b { color: #cbd5e1; }
/* v2.5 · agenda avanzada: «va X min tarde · motivo» */
.sva-bq__tarde { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 800; font-style: normal; background: rgba(var(--sv-ambrgb), .22); color: var(--sv-amb); vertical-align: 1px; white-space: nowrap; flex: none; }
.sva-bq__tarde svg { width: 10px; height: 10px; }
.sva-bloque.is-tarde, .sv-blq.is-tarde { border-color: rgba(var(--sv-ambrgb), .9); }
.sva-mini .sva-bq__tarde { margin-right: 0; align-self: center; }
.sva-llega { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed rgb(var(--sv-ambrgb)); z-index: 3; pointer-events: none; }
.sva-llega::after { content: attr(data-h); position: absolute; top: -1px; left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 800; background: rgba(var(--sv-ambrgb), .22); color: var(--sv-amb); white-space: nowrap; }
.sva-tec__tarde { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: rgba(var(--sv-ambrgb), .18); color: var(--sv-amb); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sva-tec__tarde svg { width: 10px; height: 10px; flex: none; }