/* ============================================================
   DANGOFE OS · SERVICIOS · «SUSPENDER: ESPERA AL CLIENTE» (prefijo sve-) · 2026-10-22 · chat de Diseño
   Va con servicios-espera.js. Mismo cristal C1 (blanco de día, «Noche azul» por [data-theme='dark']), sin sombras (solo anillos planos de foco),
   Plus Jakarta Sans, íconos de línea. Gris pizarra = en espera; ámbar = ya pasaron 2 días (te salió la tarea en el Tablero); azul cielo = lo
   pasó el técnico. Tres versiones por [data-v]: A · Cinta, B · Tarjetas, C · Línea. El aviso del servicio, la hoja y la lista traen sus propias
   variables porque viven fuera del armazón .sv (la hoja se pinta en el body).
   ============================================================ */
.sve-ban, .sve-lista, .sve-velo, .sve-toast, .sve-ins, .sve-btn, .sve-chip {
  --sv-az: #03269b; --sv-cel: #3592cf; --sv-azrgb: 3, 38, 155; --sv-celrgb: 53, 146, 207;
  --sv-tinta: #0b1540; --sv-tenue: #4a5680; --sv-suave: #7a85a8;
  --sv-vidrio: rgba(255, 255, 255, .72); --sv-vidrio3: rgba(255, 255, 255, .92); --sv-borde: rgba(255, 255, 255, .9);
  --sv-linea: rgba(3, 38, 155, .10); --sv-linea2: rgba(3, 38, 155, .18); --sv-campo: rgba(3, 38, 155, .045); --sv-campo2: rgba(3, 38, 155, .08);
  --sv-ok: #15724a; --sv-okrgb: 34, 197, 94; --sv-amb: #9a5b00; --sv-ambrgb: 245, 158, 11; --sv-mal: #b42318; --sv-malrgb: 239, 68, 68;
  --sve: 71, 85, 105; --sve-t: #334155;
}
[data-theme='dark'] .sve-ban, [data-theme='dark'] .sve-lista, [data-theme='dark'] .sve-velo, [data-theme='dark'] .sve-toast, [data-theme='dark'] .sve-ins, [data-theme='dark'] .sve-btn, [data-theme='dark'] .sve-chip {
  --sv-tinta: #eef1ff; --sv-tenue: #aab5e0; --sv-suave: #7d89b8; --sv-cel: #7dc4ff;
  --sv-vidrio: rgba(12, 22, 60, .72); --sv-vidrio3: rgba(16, 28, 76, .92); --sv-borde: rgba(140, 170, 255, .22);
  --sv-linea: rgba(120, 150, 255, .14); --sv-linea2: rgba(120, 150, 255, .28); --sv-campo: rgba(255, 255, 255, .05); --sv-campo2: rgba(255, 255, 255, .09);
  --sv-ok: #86efac; --sv-amb: #fcd34d; --sv-mal: #ff8a7a;
  --sve: 148, 163, 184; --sve-t: #cbd5e1;
}
.sve-ban, .sve-ban *, .sve-lista, .sve-lista *, .sve-velo, .sve-velo *, .sve-toast, .sve-toast * { box-sizing: border-box; }
.sve-ban, .sve-lista, .sve-velo, .sve-toast { font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); font-size: 13.5px; line-height: 1.4; color: var(--sv-tinta); }
.sve-ban svg, .sve-lista svg, .sve-velo svg, .sve-toast svg { display: block; }

/* ---------- botones ---------- */
.sve-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); color: var(--sv-tinta); font: inherit; font-size: 13px; font-weight: 800; line-height: 1.15; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.sve-btn svg { width: 16px; height: 16px; flex: none; }
.sve-btn:hover:not(:disabled) { border-color: rgba(var(--sv-celrgb), .65); }
.sve-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .4); }
.sve-btn:disabled { opacity: .55; cursor: default; }
.sve-btn.sve-btn--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--sv-az), var(--sv-cel)); }
.sve-btn.sve-btn--pri:hover:not(:disabled) { border-color: transparent; filter: brightness(1.07); }
.sve-btn.sve-btn--esp { color: var(--sve-t); border-color: rgba(var(--sve), .5); background: rgba(var(--sve), .09); }
.sve-btn.sve-btn--esp:hover:not(:disabled) { border-color: rgba(var(--sve), .75); background: rgba(var(--sve), .17); }
.sve-btn.sve-btn--cel { color: var(--sv-az); border-color: rgba(var(--sv-celrgb), .55); background: rgba(var(--sv-celrgb), .13); }
.sve-btn.sve-btn--cel:hover:not(:disabled) { background: rgba(var(--sv-celrgb), .22); }
.sve-btn.sve-btn--solido { color: #fff; border-color: transparent; background: #334155; }
.sve-btn.sve-btn--solido:hover:not(:disabled) { border-color: transparent; background: #1e293b; }
.sve-btn.sve-btn--cel-solido { color: #fff; border-color: transparent; background: linear-gradient(135deg, #0a5da0, var(--sv-cel)); }
.sve-btn.sve-btn--cel-solido:hover:not(:disabled) { border-color: transparent; filter: brightness(1.07); }
.sve-btn--mini { min-height: 32px; padding: 0 11px; font-size: 12px; border-radius: 11px; }
.sve-btn--ico { width: 40px; padding: 0; }
.sve-btn--mini.sve-btn--ico { width: 32px; }
.sve-btn.is-ocupado svg { animation: sve-gira .9s linear infinite; }
[data-theme='dark'] .sve-btn.sve-btn--cel { color: #c6e6ff; }
[data-theme='dark'] .sve-btn.sve-btn--solido { color: #0f172a; background: #cbd5e1; }
[data-theme='dark'] .sve-btn.sve-btn--solido:hover:not(:disabled) { background: #e2e8f0; }

/* ---------- el disco, la insignia y las cápsulas ---------- */
.sve-disco { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(var(--sve), .14); color: var(--sve-t); }
.sve-disco svg { width: 20px; height: 20px; }
.sve-disco--pase { background: rgba(var(--sv-celrgb), .18); color: var(--sv-az); }
.is-vence > .sve-disco { background: rgba(var(--sv-ambrgb), .2); color: var(--sv-amb); }
[data-theme='dark'] .sve-disco--pase { color: var(--sv-cel); }
.sve-ins { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; border: 1px solid rgba(var(--sve), .42); background: rgba(var(--sve), .1); color: var(--sve-t); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sve-ins svg { width: 12px; height: 12px; flex: none; }
.sve-ins.is-vence { border-color: rgba(var(--sv-ambrgb), .55); background: rgba(var(--sv-ambrgb), .15); color: var(--sv-amb); }
.sve-ins--pase { border-color: rgba(var(--sv-celrgb), .55); background: rgba(var(--sv-celrgb), .14); color: var(--sv-az); }
[data-theme='dark'] .sve-ins--pase { color: var(--sv-cel); }
.sve-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--sve), .4); background: rgba(var(--sve), .1); color: var(--sve-t); font-size: 12.5px; font-weight: 700; }
.sve-chip b { font-size: 14px; font-weight: 800; color: var(--sv-tinta); }
.sve-chip svg { width: 14px; height: 14px; }
.sve-chip--vence { border-color: rgba(var(--sv-ambrgb), .55); background: rgba(var(--sv-ambrgb), .14); color: var(--sv-amb); }
.sve-chip--vence b { color: var(--sv-amb); }

/* ---------- piezas de texto compartidas ---------- */
.sve-nota { margin: 0; display: flex; gap: 7px; align-items: flex-start; padding: 7px 10px; border-radius: 12px; background: var(--sv-campo); font-size: 12.5px; font-style: italic; color: var(--sv-tinta); overflow-wrap: anywhere; }
.sve-nota svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--sv-suave); }
.sve-por { font-size: 11.5px; font-weight: 600; color: var(--sv-suave); overflow-wrap: anywhere; }
.sve-vence { margin: 2px 0 0; display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; font-weight: 700; color: var(--sv-amb); }
.sve-vence svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.sve-tenia { display: inline-flex; align-items: flex-start; gap: 7px; align-self: flex-start; max-width: 100%; padding: 6px 10px; border-radius: 12px; border: 1px dashed rgba(var(--sve), .55); font-size: 12.5px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.sve-tenia svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.sve-tenia b { color: var(--sv-tinta); }

/* ---------- el aviso del servicio (suspendido / lo pasó el técnico) ---------- */
.sve-ban { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(var(--sve), .38); background: var(--sv-vidrio); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
.sve-ban--esp { border-left: 5px solid rgba(var(--sve), .8); }
.sve-ban--esp.is-vence { border-color: rgba(var(--sv-ambrgb), .6); border-left-color: rgb(var(--sv-ambrgb)); background: #fff7e8; }
[data-theme='dark'] .sve-ban--esp.is-vence { background: linear-gradient(rgba(245, 158, 11, .13), rgba(245, 158, 11, .13)), var(--sv-vidrio); }
.sve-ban--pase { border-color: rgba(var(--sv-celrgb), .5); border-left: 5px solid rgba(var(--sv-celrgb), .9); }
.sve-ban__txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sve-ban__t { font-size: 15px; font-weight: 800; }
.sve-ban__m { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.sve-ban__m b { color: var(--sv-tinta); }
.sve-ban__sub { font-size: 12.5px; font-weight: 700; color: var(--sv-tenue); }
.sve-ban__acc { flex: 0 0 auto; margin-left: auto; }
.sve-dias { padding: 2px 9px; border-radius: 999px; background: rgba(var(--sve), .15); color: var(--sve-t); font-size: 11.5px; font-weight: 800; }
.is-vence .sve-dias { background: rgba(var(--sv-ambrgb), .2); color: var(--sv-amb); }
.sve-dato { display: inline-flex; align-items: center; gap: 5px; }
.sve-dato svg { width: 13px; height: 13px; flex: none; }
.sve-cambio { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 8px; }
.sve-cambio__f { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 11px; border-radius: 12px; border: 1px dashed rgba(var(--sv-celrgb), .6); font-size: 12.5px; }
.sve-cambio__f.is-ahora { border-style: solid; border-color: rgba(var(--sv-celrgb), .55); background: rgba(var(--sv-celrgb), .12); }
.sve-cambio__f small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-cambio__f b { font-weight: 800; color: var(--sv-tinta); overflow-wrap: anywhere; }
.sve-cambio__fl { align-self: center; color: var(--sv-az); }
.sve-cambio__fl svg { width: 16px; height: 16px; }
[data-theme='dark'] .sve-cambio__fl { color: var(--sv-cel); }
/* B · el anillo de días y el botón entero abajo */
.sve-ban[data-v='B'] { align-items: flex-start; gap: 14px 16px; padding: 14px 16px; }
.sve-ban[data-v='B'].sve-ban--esp, .sve-ban[data-v='B'].sve-ban--pase { border-left-width: 1px; }
.sve-ban[data-v='B'] .sve-ban__acc { flex: 1 1 100%; margin: 0; }
.sve-ban[data-v='B'] .sve-ban__acc .sve-btn { width: 100%; }
.sve-anillo { position: relative; flex: none; width: 64px; height: 64px; display: inline-grid; place-items: center; }
.sve-anillo > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sve-anillo__pista { fill: none; stroke: rgba(var(--sve), .2); stroke-width: 5; }
.sve-anillo__arco { fill: none; stroke: rgb(var(--sve)); stroke-width: 5; stroke-linecap: round; }
.sve-anillo.is-vence .sve-anillo__arco { stroke: rgb(var(--sv-ambrgb)); }
.sve-anillo b { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: 20px; font-weight: 800; color: var(--sv-tinta); }
.sve-anillo b svg { width: 18px; height: 18px; color: var(--sve-t); }
.sve-anillo b small { margin-top: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-anillo.is-vence b { color: var(--sv-amb); }
/* C · la línea: su cita → suspendido → falta que confirme */
.sve-ban[data-v='C'] { flex-direction: column; align-items: stretch; gap: 12px; }
.sve-ban[data-v='C'] .sve-ban__acc { margin: 0; }
.sve-ban[data-v='C'] .sve-ban__acc .sve-btn { width: 100%; }
.sve-linea { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sve-linea li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 0 4px; text-align: center; }
.sve-linea li::before { content: ''; position: absolute; top: 16px; left: 50%; width: 100%; height: 3px; border-radius: 3px; background: rgba(var(--sve), .55); }
.sve-linea li:last-child::before { display: none; }
.sve-linea li:nth-child(2)::before { background: repeating-linear-gradient(90deg, rgba(var(--sve), .65) 0 7px, transparent 7px 12px); }
.sve-linea li > i { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(var(--sve), .6); background: var(--sv-vidrio3); color: var(--sve-t); }
.sve-linea li > i svg { width: 16px; height: 16px; }
.sve-linea li.is-ahora > i { border-width: 3px; border-color: rgb(var(--sve)); background: rgba(var(--sve), .16); }
.is-vence .sve-linea li.is-ahora > i { border-color: rgb(var(--sv-ambrgb)); background: rgba(var(--sv-ambrgb), .2); color: var(--sv-amb); }
.sve-linea li div { min-width: 0; }
.sve-linea li b { display: block; font-size: 12.5px; font-weight: 800; }
.sve-linea li span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--sv-tenue); overflow-wrap: anywhere; }
/* lo pasó el técnico: B · el boleto «antes → ahora» · C · el rebobinado */
.sve-ban--pase[data-v='B'], .sve-ban--pase[data-v='C'] { flex-direction: column; align-items: stretch; }
.sve-ban[data-v='B'].sve-ban--pase .sve-ban__txt, .sve-ban[data-v='C'] .sve-ban__txt { flex: 0 0 auto; }
.sve-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.sve-ticket__col { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 14px; border: 1px solid rgba(var(--sv-celrgb), .5); background: rgba(var(--sv-celrgb), .11); }
.sve-ticket__col--antes { border-style: dashed; background: transparent; }
.sve-ticket__col small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-ticket__col b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.sve-ticket__col span { font-size: 12.5px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.sve-ticket__flecha { align-self: center; display: grid; place-items: center; color: var(--sv-az); }
.sve-ticket__flecha svg { width: 20px; height: 20px; }
[data-theme='dark'] .sve-ticket__flecha { color: var(--sv-cel); }
.sve-rebobina { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.sve-rebobina__pt { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 14px; border: 1px dashed rgba(var(--sv-celrgb), .6); }
.sve-rebobina__pt.is-ahora { border-style: solid; border-color: rgba(var(--sv-celrgb), .55); background: rgba(var(--sv-celrgb), .12); }
.sve-rebobina__pt i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: rgb(var(--sv-celrgb)); }
.sve-rebobina__pt.is-ahora i { background: transparent; border: 2px solid rgb(var(--sv-celrgb)); }
.sve-rebobina__pt small { display: flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-rebobina__pt b { font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.sve-rebobina__ruta { display: inline-grid; place-items: center; width: 46px; height: 28px; border-radius: 999px; border: 1.5px dashed rgba(var(--sv-celrgb), .75); color: var(--sv-az); }
.sve-rebobina__ruta svg { width: 15px; height: 15px; }
[data-theme='dark'] .sve-rebobina__ruta { color: var(--sv-cel); }

/* ---------- la hoja ---------- */
.sve-velo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(10, 22, 51, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: sve-aparece .18s ease both; }
@media (min-width: 700px) { .sve-velo { align-items: center; padding: 16px; } }
.sve-hoja { width: 100%; max-width: 540px; max-height: calc(100% - 20px); overflow: auto; display: flex; flex-direction: column; border-radius: 24px 24px 0 0; border: 1px solid var(--sv-borde); background: #fafbff; color: var(--sv-tinta); }
[data-theme='dark'] .sve-hoja { background: #0f1a48; }
@media (min-width: 700px) { .sve-hoja { border-radius: 24px; } }
.sve-hoja__cab { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--sv-linea); }
.sve-hoja__cab > div { flex: 1; min-width: 0; }
.sve-hoja__cab h3 { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.sve-hoja__cab p { margin: 2px 0 0; font-size: 12.5px; color: var(--sv-tenue); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
button.sve-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: var(--sv-tenue); display: grid; place-items: center; cursor: pointer; }
.sve-x svg { width: 16px; height: 16px; }
.sve-x:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .4); }
.sve-hoja__cuerpo { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.sve-hoja__pie { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--sv-linea); }
.sve-hoja__pie .sve-btn { flex: 1 1 0; max-width: 250px; }
@media (max-width: 520px) { .sve-hoja__pie .sve-btn { max-width: none; } }
@media (max-width: 460px) {
  .sve-hoja__pie { flex-direction: column-reverse; }
  .sve-hoja__pie .sve-btn { width: 100%; white-space: normal; text-align: center; }
}
.sve-txt { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sve-txt b { font-weight: 800; }
.sve-pasa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sve-pasa li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.sve-pasa li > span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--sve), .13); color: var(--sve-t); }
.sve-pasa li > span svg { width: 16px; height: 16px; }
.sve-pasa li > div { padding-top: 5px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.sve-campo { display: flex; flex-direction: column; gap: 5px; }
.sve-campo > span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-campo textarea { display: block; width: 100%; min-height: 64px; max-height: 160px; resize: vertical; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: var(--sv-tinta); font: inherit; font-size: 13.5px; line-height: 1.4; }
.sve-campo textarea:focus { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .38); border-color: rgba(var(--sv-celrgb), .7); }
.sve-campo textarea::placeholder { color: var(--sv-suave); }
.sve-campo small { font-size: 11.5px; color: var(--sv-suave); }
.sve-sincorreo { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 14px; border: 1px solid rgba(var(--sv-ambrgb), .5); background: rgba(var(--sv-ambrgb), .12); color: var(--sv-amb); font-size: 12.5px; font-weight: 700; }
.sve-sincorreo svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sve-error { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--sv-mal); }
.sve-error:empty { display: none; }
/* B · «qué pasa» en tarjetitas */
.sve-efectos { display: flex; flex-direction: column; gap: 8px; }
.sve-efecto { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--sv-linea); background: var(--sv-campo); }
.sve-efecto__ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--sve), .14); color: var(--sve-t); }
.sve-efecto__ico svg { width: 18px; height: 18px; }
.sve-efecto b { display: block; font-size: 13.5px; font-weight: 800; }
.sve-efecto small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--sv-tenue); overflow-wrap: anywhere; }
.sve-efecto small b { display: inline; font-size: inherit; color: var(--sv-tinta); }
/* C · dos pasos: qué esperas → qué va a pasar */
.sve-paso { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-paso b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 4px; border-radius: 999px; background: #334155; color: #fff; font-size: 12px; }
.sve-frases { display: flex; flex-wrap: wrap; gap: 6px; }
.sve-frase { min-height: 36px; padding: 0 13px; 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; text-align: left; cursor: pointer; }
.sve-frase:hover { border-color: rgba(var(--sve), .7); }
.sve-frase:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .4); }
.sve-frase.is-on { border-color: #334155; background: #334155; color: #fff; }
.sve-futuro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sve-futuro li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; }
.sve-futuro li:last-child { padding-bottom: 0; }
.sve-futuro li::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--sv-linea2); }
.sve-futuro li:last-child::before { display: none; }
.sve-futuro li > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(var(--sve), .45); background: rgba(var(--sve), .13); color: var(--sve-t); }
.sve-futuro li > i svg { width: 16px; height: 16px; }
.sve-futuro li b { display: block; font-size: 13px; font-weight: 800; }
.sve-futuro li span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--sv-tenue); overflow-wrap: anywhere; }
.sve-futuro li span b { display: inline; font-size: inherit; color: var(--sv-tinta); }
.sve-ticket--hoja .sve-ticket__flecha svg { width: 22px; height: 22px; }
[data-theme='dark'] .sve-paso b, [data-theme='dark'] .sve-frase.is-on { border-color: #cbd5e1; background: #cbd5e1; color: #0f172a; }

/* ---------- la lista «En espera del cliente» ---------- */
.sve-lista { display: flex; flex-direction: column; gap: 12px; }
.sve-lh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.sve-lh__t { flex: 1 1 240px; min-width: 0; }
.sve-lh__t h3 { margin: 0; font-size: 16px; font-weight: 800; }
.sve-lh__t p { margin: 2px 0 0; font-size: 12.5px; color: var(--sv-tenue); }
.sve-lh__n { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sve-it__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sve-it__num { font-size: 12px; font-weight: 800; color: var(--sv-az); white-space: nowrap; }
[data-theme='dark'] .sve-it__num { color: var(--sv-cel); }
.sve-it__cat { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-it__hace { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--sve-t); }
.is-vence .sve-it__hace { color: var(--sv-amb); }
.sve-it__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sve-it__t { font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; }
.sve-it__cli { font-size: 12.5px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.sve-it__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--sv-tenue); }
.sve-it__datos > span { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.sve-it__datos svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.sve-it__datos b { color: var(--sv-tinta); }
.sve-it__cuerpo .sve-nota { margin-top: 3px; }
.sve-it__acc { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.sve-it__top { display: flex; align-items: center; gap: 12px; }
.sve-it__id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* A · filas */
.sve-filas { display: flex; flex-direction: column; gap: 8px; }
.sve-filas .sve-it { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--sv-linea); border-left: 4px solid rgba(var(--sve), .6); background: var(--sv-vidrio3); }
.sve-filas .sve-it.is-vence { border-color: rgba(var(--sv-ambrgb), .5); border-left-color: rgb(var(--sv-ambrgb)); }
.sve-dia { width: 54px; height: 54px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: rgba(var(--sve), .13); color: var(--sve-t); }
.sve-dia b { display: flex; font-size: 21px; font-weight: 800; }
.sve-dia b svg { width: 20px; height: 20px; }
.sve-dia small { margin-top: 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.is-vence .sve-dia { background: rgba(var(--sv-ambrgb), .2); color: var(--sv-amb); }
@media (max-width: 640px) {
  .sve-filas .sve-it { grid-template-columns: 46px minmax(0, 1fr); }
  .sve-filas .sve-dia { width: 46px; height: 46px; border-radius: 14px; }
  .sve-filas .sve-it__acc { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .sve-filas .sve-it__acc .sve-btn { flex: 1 1 auto; white-space: normal; }
  .sve-filas .sve-it__acc .sve-btn--pri { flex: 1 1 100%; }
}
/* B · tarjetas */
.sve-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(290px, calc((100% - 24px) / 3)), 1fr)); gap: 12px; }
.sve-tarjetas .sve-it { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
.sve-tarjetas .sve-it.is-vence { border-color: rgba(var(--sv-ambrgb), .6); background: #fff7e8; }
[data-theme='dark'] .sve-tarjetas .sve-it.is-vence { background: linear-gradient(rgba(245, 158, 11, .13), rgba(245, 158, 11, .13)), var(--sv-vidrio); }
.sve-tarjetas .sve-it__acc { margin-top: auto; }
.sve-tarjetas .sve-it__acc .sve-btn--pri { width: 100%; min-height: 42px; }
/* C · la línea del tiempo, por antigüedad */
.sve-linea-dia { display: flex; flex-direction: column; gap: 16px; }
.sve-grupo > header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px 2px; }
.sve-grupo > header b { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-tenue); }
.sve-grupo > header em { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(var(--sve), .14); color: var(--sve-t); font-size: 11.5px; font-style: normal; font-weight: 800; }
.sve-grupo > header span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--sv-amb); }
.sve-grupo > header span svg { width: 14px; height: 14px; }
.sve-grupo--vence > header b { color: var(--sv-amb); }
.sve-grupo--vence > header em { background: rgba(var(--sv-ambrgb), .2); color: var(--sv-amb); }
.sve-grupo ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sve-grupo ol::before { content: ''; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: rgba(var(--sve), .32); }
.sve-grupo--vence ol::before { background: rgba(var(--sv-ambrgb), .5); }
.sve-nodo { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.sve-nodo__pt { position: relative; z-index: 1; width: 36px; height: 36px; margin-top: 10px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(var(--sve), .6); background: var(--sv-vidrio3); color: var(--sve-t); }
.sve-nodo__pt svg { width: 16px; height: 16px; }
.sve-nodo.is-vence .sve-nodo__pt { border-color: rgb(var(--sv-ambrgb)); background: rgba(var(--sv-ambrgb), .15); color: var(--sv-amb); }
.sve-nodo .sve-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 11px 14px; border-radius: 18px; border: 1px solid var(--sv-linea); background: var(--sv-vidrio3); }
.sve-nodo.is-vence .sve-it { border-color: rgba(var(--sv-ambrgb), .45); }
@media (max-width: 640px) { .sve-nodo .sve-it { grid-template-columns: minmax(0, 1fr); } .sve-nodo .sve-it__acc { flex-direction: row; flex-wrap: wrap; } .sve-nodo .sve-it__acc .sve-btn { flex: 1 1 auto; white-space: normal; } .sve-nodo .sve-it__acc .sve-btn--pri { flex: 1 1 100%; } }
/* vacío, error y carga */
.sve-vacio { display: flex; align-items: center; gap: 14px; padding: 22px 18px; border-radius: 20px; border: 1px dashed var(--sv-linea2); color: var(--sv-tenue); }
.sve-vacio > svg { width: 30px; height: 30px; flex: none; color: var(--sve-t); }
.sve-vacio b { display: block; font-size: 14px; color: var(--sv-tinta); }
.sve-vacio span { display: block; margin-top: 2px; font-size: 12.5px; }
.sve-vacio .sve-btn { margin-top: 8px; }
.sve-vacio--mal > svg { color: var(--sv-mal); }
.sve-esq { display: flex; flex-direction: column; gap: 8px; }
.sve-esq i { display: block; height: 86px; border-radius: 18px; background: linear-gradient(90deg, var(--sv-campo), var(--sv-campo2), var(--sv-campo)); background-size: 200% 100%; animation: sve-esq 1.6s ease-in-out 4; }

/* ---------- aviso suelto ---------- */
.sve-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9100; display: flex; align-items: flex-start; gap: 9px; max-width: min(520px, calc(100% - 32px)); padding: 11px 16px; border-radius: 14px; background: #0b1540; color: #fff; font-size: 13.5px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sve-toast.is-on { opacity: 1; }
.sve-toast svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #86efac; }
.sve-toast.is-mal svg { color: #fca5a5; }
[data-theme='dark'] .sve-toast { background: #eef1ff; color: #0b1540; }
[data-theme='dark'] .sve-toast svg { color: #15724a; }
[data-theme='dark'] .sve-toast.is-mal svg { color: #b42318; }

@keyframes sve-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sve-gira { to { transform: rotate(360deg); } }
@keyframes sve-esq { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sve-velo, .sve-esq i, .sve-btn.is-ocupado svg { animation: none; } .sve-toast { transition: none; } }