/* ============================================================
   DANGOFE OS · SERVICIOS → «NUEVO SERVICIO CON IA» (prefijo svn-) · v1.0.0 · 2026-10-22 · chat de Diseño
   Va con servicios-nuevo.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. El violeta es de la IA (lo que ella llenó); el azul, de lo tuyo; verde = listo; ámbar = revisa; punteado = falta. Tres formas por [data-v]:
   A · Asistente, B · Tarjetas, C · Frase. La pieza trae sus propias variables (puede vivir dentro de una ventana fuera del armazón .sv).
   Nada se anima sin parar: solo las ondas mientras escucha y la barra mientras la IA piensa; la entrada de los resultados dura menos de 2 segundos.
   ============================================================ */
.svn, .svn *, .svn *::before, .svn *::after { box-sizing: border-box; }
.svn {
  --sv-az: #03269b; --sv-cel: #3592cf; --sv-azrgb: 3, 38, 155; --sv-celrgb: 53, 146, 207; --sv-mor: #5b3fd6; --sv-morrgb: 91, 63, 214; --svn-acc: #03269b;
  --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-hoja: #fafbff;
  --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, .09);
  --sv-ok: #15724a; --sv-okrgb: 34, 197, 94; --sv-amb: #9a5b00; --sv-ambrgb: 245, 158, 11; --sv-mal: #b42318; --sv-malrgb: 239, 68, 68;
  position: relative; display: block; width: 100%; 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);
}
[data-theme='dark'] .svn {
  --sv-tinta: #eef1ff; --sv-tenue: #aab5e0; --sv-suave: #7d89b8; --sv-cel: #7dc4ff; --sv-mor: #a99bff; --sv-morrgb: 169, 155, 255; --svn-acc: #9db9ff;
  --sv-vidrio: rgba(12, 22, 60, .72); --sv-vidrio3: rgba(16, 28, 76, .92); --sv-borde: rgba(140, 170, 255, .22); --sv-hoja: #0f1a48;
  --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, .10);
  --sv-ok: #86efac; --sv-amb: #fcd34d; --sv-mal: #ff8a7a;
}
.svn svg { display: block; flex: none; }
.svn b { font-weight: 800; }
.svn small { font-size: 12px; }
.svn-sp { flex: 1 1 auto; min-width: 0; }
.svn-in { display: flex; flex-direction: column; gap: 14px; }
.svn-cuerpo { min-width: 0; }

/* ---------- cabecera ---------- */
.svn-top { display: flex; align-items: center; gap: 12px; }
.svn-tit { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.svn-tit__i { flex: none; width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sv-mor), var(--sv-az) 60%, var(--sv-cel)); }
.svn-tit b { display: block; font-size: 20px; line-height: 1.15; }
.svn-tit small { display: block; margin-top: 2px; color: var(--sv-tenue); font-size: 12.5px; }
.svn-x { appearance: none; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-vidrio3); color: inherit; display: grid; place-items: center; cursor: pointer; }
.svn-x:hover { border-color: rgba(var(--sv-celrgb), .65); }

/* ---------- botones ---------- */
.svn-bt { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; 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-weight: 800; font-size: 13px; text-align: center; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.svn-bt svg { width: 16px; height: 16px; }
.svn-bt:hover:not(:disabled) { border-color: rgba(var(--sv-celrgb), .65); }
.svn-bt:disabled { opacity: .55; cursor: default; }
.svn-bt.svn-bt--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--sv-az), var(--sv-cel)); }
.svn-bt.svn-bt--pri:hover:not(:disabled) { border-color: transparent; filter: brightness(1.07); }
.svn-bt.svn-bt--ia { color: #fff; border-color: transparent; background: linear-gradient(135deg, #5b3fd6, #03269b 70%, #3592cf); }
.svn-bt.svn-bt--ia:hover:not(:disabled) { border-color: transparent; filter: brightness(1.08); }
.svn-bt.svn-bt--ok { color: var(--sv-ok); border-color: rgba(var(--sv-okrgb), .5); background: rgba(var(--sv-okrgb), .12); }
.svn-bt.svn-bt--voz.is-on { color: var(--sv-mal); border-color: rgba(var(--sv-malrgb), .55); background: rgba(var(--sv-malrgb), .10); }
.svn-bt--grande { min-height: 46px; padding: 0 22px; font-size: 14.5px; }
.svn-bt.is-ocupado svg { animation: svn-gira .9s linear infinite; }
.svn-bt:focus-visible, .svn-chip:focus-visible, .svn-x:focus-visible, .svn-sg:focus-visible, .svn-sug__i:focus-visible, .svn-tk:focus-visible, .svn-ent__r:focus-visible, .svn-q__t:focus-visible, .svn-ej__b:focus-visible, .svn-enlace:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .4); }
.svn-enlace { appearance: none; border: 0; background: transparent; padding: 0; color: var(--svn-acc); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

/* ---------- la caja «Dime el servicio» ---------- */
.svn-compo { position: relative; border-radius: 24px; padding: 16px; border: 1.5px solid transparent;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--sv-morrgb), .10), transparent 60%) padding-box, radial-gradient(100% 80% at 100% 100%, rgba(var(--sv-celrgb), .14), transparent 55%) padding-box, linear-gradient(var(--sv-vidrio3), var(--sv-vidrio3)) padding-box, linear-gradient(135deg, var(--sv-mor), var(--sv-cel), var(--sv-az)) border-box; }
.svn-compo__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.svn-compo__cab b { display: block; font-size: 15px; }
.svn-compo__cab small { display: block; color: var(--sv-tenue); font-size: 12px; }
.svn-ia { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(135deg, #5b3fd6, #3592cf); }
.svn-ia svg { width: 12px; height: 12px; }
.svn-ia--g { width: 32px; height: 32px; } .svn-ia--g svg { width: 16px; height: 16px; }
.svn-compo__caja { position: relative; }
.svn-compo__ta { display: block; width: 100%; min-height: 88px; max-height: 240px; field-sizing: content; resize: vertical; padding: 8px 4px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 1.45; outline: 0; }
.svn-compo__ta::placeholder { color: var(--sv-suave); }
.svn-compo__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.svn-voz { display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 8px 12px; border-radius: 14px; background: rgba(var(--sv-malrgb), .09); color: var(--sv-mal); font-weight: 800; font-size: 12.5px; }
.svn-onda { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.svn-onda i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: center; animation: svn-onda .9s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
.svn-barra { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 700; font-size: 12.5px; color: var(--sv-tenue); }
.svn-barra i { position: relative; flex: 0 0 90px; height: 5px; border-radius: 3px; background: rgba(var(--sv-celrgb), .18); overflow: hidden; }
.svn-barra i::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, var(--sv-mor), var(--sv-cel)); animation: svn-barra 1.2s ease-in-out infinite; }
.svn-ej { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.svn-ej small { color: var(--sv-tenue); font-weight: 700; }
.svn-ej__b { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 100%; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--sv-linea2); background: transparent; color: var(--svn-acc); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.svn-ej__b:hover { border-color: rgba(var(--sv-celrgb), .7); }
.svn-ej__b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.svn-ej__b svg { color: var(--sv-mor); }
.svn-hero { padding: 4px 2px; }
.svn-hero__t { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-tenue); }
.svn-hero__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svn-hero__l li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 18px; border: 1px solid var(--sv-linea); background: var(--sv-vidrio); }
.svn-hero__l li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #03269b, #3592cf); }
.svn-hero__l b { display: block; font-size: 13.5px; }
.svn-hero__l small { display: block; margin-top: 2px; color: var(--sv-tenue); }

/* ---------- estados, discos y marcas de la IA ---------- */
.svn-disco { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; background: rgba(var(--sv-celrgb), .14); color: var(--svn-acc); }
.svn-est { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid transparent; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.svn-est svg { width: 12px; height: 12px; }
.svn-est.is-ok { color: var(--sv-ok); border-color: rgba(var(--sv-okrgb), .5); background: rgba(var(--sv-okrgb), .13); }
.svn-est.is-revisa { color: var(--sv-amb); border-color: rgba(var(--sv-ambrgb), .55); background: rgba(var(--sv-ambrgb), .15); }
.svn-est.is-falta { color: var(--sv-tenue); border: 1px dashed var(--sv-linea2); background: transparent; }
.svn-est.is-vacio { color: var(--sv-suave); border-color: var(--sv-linea); background: transparent; }
.svn-pt { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--sv-linea2); }
.svn-pt svg { width: 12px; height: 12px; }
.svn-pt.is-ok { color: #fff; border-color: transparent; background: var(--sv-ok); }
[data-theme='dark'] .svn-pt.is-ok { color: #052e16; }
.svn-pt.is-revisa { color: var(--sv-amb); border-color: rgba(var(--sv-ambrgb), .7); background: rgba(var(--sv-ambrgb), .16); }
.svn-pt.is-falta { border-style: dashed; }
.svn-pq { display: flex; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--sv-tenue); }
.svn-pq svg { flex: none; margin-top: 1px; color: var(--sv-mor); }
.svn-pq span { min-width: 0; overflow-wrap: anywhere; }
.svn-ring { flex: none; }
.svn-ring__t { fill: none; stroke: var(--sv-linea2); stroke-width: 3; }
.svn-ring__a { fill: none; stroke-width: 3; stroke-linecap: round; stroke: var(--sv-ok); }
.svn-ring.is-revisa .svn-ring__a { stroke: var(--sv-amb); }
.svn-ring.is-falta .svn-ring__a { stroke: var(--sv-suave); }

/* ---------- lo que se escribe ---------- */
.svn-ed { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.svn-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.svn-f > span { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; }
.svn-f > span em { font-style: normal; font-weight: 600; color: var(--sv-suave); }
.svn-f input, .svn-f select, .svn-f textarea { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: inherit; font: inherit; font-size: 14.5px; outline: 0; }
.svn-f textarea { min-height: 70px; resize: vertical; }
.svn-f input:focus, .svn-f select:focus, .svn-f textarea:focus { border-color: rgba(var(--sv-celrgb), .75); box-shadow: 0 0 0 3px rgba(var(--sv-celrgb), .28); }
.svn-f input::placeholder, .svn-f textarea::placeholder { color: var(--sv-suave); }
[data-theme='dark'] .svn-f input, [data-theme='dark'] .svn-f select, [data-theme='dark'] .svn-f textarea { color-scheme: dark; }
.svn-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svn-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.svn-lk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.svn-ayu { margin: 0; font-size: 12px; color: var(--sv-tenue); }
.svn-nota { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--sv-tenue); }
.svn-nota svg { margin-top: 1px; }
.svn-nota span { min-width: 0; overflow-wrap: anywhere; }
.svn-nota--ok { color: var(--sv-ok); } .svn-nota--amb { color: var(--sv-amb); } .svn-nota--mal { color: var(--sv-mal); }
.svn-err { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(var(--sv-malrgb), .10); color: var(--sv-mal); font-weight: 700; font-size: 12.5px; }
.svn-err span { min-width: 0; overflow-wrap: anywhere; }
.svn-err .svn-enlace { color: inherit; }
.svn-ubic { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--sv-tenue); }
.svn-ubic span { min-width: 0; overflow-wrap: anywhere; }
.svn-ubic svg { margin-top: 1px; }
.svn-ubic a { color: var(--svn-acc); font-weight: 800; }
.svn-ubic.is-ok { color: var(--sv-ok); } .svn-ubic.is-aprox { color: var(--sv-amb); }
.svn-chk2 { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.svn-chk2 input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sv-az); }
.svn-chk2 em { font-style: normal; font-weight: 600; color: var(--sv-suave); }
.svn-chk2.is-off { opacity: .7; cursor: default; }

/* ---------- fichas pequeñas: chips, sugerencias, el día ---------- */
.svn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.svn-chips--col { flex-direction: column; align-items: stretch; }
.svn-chip { appearance: none; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--sv-linea2); background: var(--sv-campo); color: inherit; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; overflow-wrap: anywhere; }
.svn-chip:hover { border-color: rgba(var(--sv-celrgb), .65); }
.svn-chip.is-on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #03269b, #3592cf); }
.svn-chip b { font-weight: 800; }
.svn-chip small { display: block; opacity: .8; font-weight: 600; }
.svn-chip--q { border-style: dashed; background: transparent; color: var(--svn-acc); }
.svn-chip--mini { min-height: 32px; padding: 4px 11px; font-size: 12px; }
.svn-chip--lugar { flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 16px; }
.svn-chip--lugar.is-on { color: var(--sv-tinta); border-color: rgba(var(--sv-celrgb), .85); background: rgba(var(--sv-celrgb), .16); }
.svn-chip--tec { padding: 6px 12px 6px 8px; border-radius: 16px; }
.svn-chip--tec.is-lejos { opacity: .55; }
.svn-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #03269b, #3592cf); }
.svn-chip.is-on .svn-ava { background: rgba(255, 255, 255, .25); }
.svn-ava--x { background: rgba(var(--sv-celrgb), .2); color: var(--svn-acc); }
.svn-tec__t { display: flex; flex-direction: column; min-width: 0; }
.svn-sgs { display: grid; gap: 8px; }
.svn-sg { appearance: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; padding: 10px 12px; text-align: left; border-radius: 16px; border: 1px solid var(--sv-linea2); background: rgba(var(--sv-morrgb), .06); color: inherit; font: inherit; cursor: pointer; }
.svn-sg:hover { border-color: rgba(var(--sv-celrgb), .65); }
.svn-sg.is-on { border-color: rgba(var(--sv-celrgb), .75); background: rgba(var(--sv-celrgb), .14); }
.svn-sg__t { display: flex; flex-direction: column; min-width: 0; }
.svn-sg__t b { overflow-wrap: anywhere; }
.svn-sg__t span { font-weight: 700; }
.svn-sg__t small { color: var(--sv-tenue); overflow-wrap: anywhere; }
.svn-sg__r { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sv-suave); }
.svn-sg.is-on .svn-sg__r { border-color: var(--svn-acc); background: radial-gradient(circle, var(--svn-acc) 0 42%, transparent 48%); }
.svn-sug { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; border: 1px solid rgba(var(--sv-celrgb), .45); background: var(--sv-vidrio3); }
.svn-sug__t { margin: 2px 6px 4px; font-size: 11.5px; font-weight: 800; color: var(--sv-tenue); }
.svn-sug__i { appearance: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.svn-sug__i:hover { background: rgba(var(--sv-celrgb), .12); }
.svn-sug__i b { overflow-wrap: anywhere; }
.svn-sug__i span { font-size: 12px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.svn-dia { position: relative; height: 30px; border-radius: 10px; background: var(--sv-campo); overflow: hidden; }
.svn-dia i { position: absolute; top: 0; bottom: 0; }
.svn-dia__t { background: rgba(var(--sv-celrgb), .20); }
.svn-dia__o { background: rgba(100, 116, 139, .5); border-left: 1px solid rgba(100, 116, 139, .8); border-right: 1px solid rgba(100, 116, 139, .8); }
.svn-dia .svn-dia__s { top: 4px; bottom: 4px; border-radius: 7px; background: linear-gradient(135deg, #03269b, #3592cf); }
.svn-dia .svn-dia__s.is-mal { background: var(--sv-mal); }
.svn-dia__e { position: relative; height: 16px; margin-top: 4px; font-size: 10.5px; color: var(--sv-suave); }
.svn-dia__e span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.svn-dia__lg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font-size: 11.5px; color: var(--sv-tenue); }
.svn-dia__lg span { display: inline-flex; align-items: center; gap: 5px; }
.svn-dia__lg i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.svn-dia__lg .t { background: rgba(var(--sv-celrgb), .35); }
.svn-dia__lg .o { background: rgba(100, 116, 139, .6); }
.svn-dia__lg .s { background: linear-gradient(135deg, #03269b, #3592cf); }

/* ---------- A · Asistente ---------- */
.svn-a { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 16px; align-items: start; }
.svn-a__riel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.svn-a__form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.svn[data-v='A'][data-vista='0'] .svn-a { grid-template-columns: minmax(0, 760px); justify-content: center; }
.svn-sec { padding: 14px 16px 16px; border-radius: 22px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); min-width: 0; }
.svn-sec__h { display: flex; align-items: center; gap: 10px; }
.svn-sec__t { flex: 1; min-width: 0; }
.svn-sec__t b { font-size: 15px; }
.svn-ent__fr { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(var(--sv-morrgb), .3); background: linear-gradient(135deg, rgba(var(--sv-morrgb), .10), rgba(var(--sv-celrgb), .12)); }
.svn-ent__fr svg { margin-top: 2px; color: var(--sv-mor); }
.svn-ent__fr small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-mor); }
.svn-ent__fr span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.svn-ent__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.svn-ent__r { appearance: none; display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; text-align: left; border-radius: 16px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio); color: inherit; font: inherit; cursor: pointer; }
.svn-ent__r:hover { border-color: rgba(var(--sv-celrgb), .6); }
.svn-ent__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svn-ent__t small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-suave); }
.svn-ent__t b { overflow-wrap: anywhere; font-size: 14px; }
.svn-ent__t b.is-vacio { color: var(--sv-suave); font-weight: 700; font-style: italic; }
.svn-ent__t em { font-style: normal; font-size: 12px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.svn-pend { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; border: 1px solid rgba(var(--sv-ambrgb), .4); background: rgba(var(--sv-ambrgb), .08); }
.svn-pend__t { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-amb); }
.svn-pend--ok { flex-direction: row; align-items: center; gap: 10px; border-color: rgba(var(--sv-okrgb), .45); background: rgba(var(--sv-okrgb), .10); }
.svn-pend--ok > span { color: var(--sv-ok); }
.svn-pend--ok b { display: block; }
.svn-pend--ok small { display: block; color: var(--sv-tenue); }
.svn-q { display: flex; flex-direction: column; gap: 8px; }
.svn-q__t { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.svn-q__t b { font-size: 14px; overflow-wrap: anywhere; }
.svn-q__t small { color: var(--sv-tenue); }

/* ---------- B · Tarjetas ---------- */
.svn-b { display: flex; flex-direction: column; gap: 14px; }
.svn-prog { display: flex; flex-direction: column; gap: 8px; }
.svn-prog__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.svn-prog__t b { font-size: 15px; }
.svn-prog__t span { color: var(--sv-tenue); font-size: 12.5px; }
.svn-prog__b { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.svn-prog__b i { height: 6px; border-radius: 3px; background: var(--sv-campo2); }
.svn-prog__b i.is-ok { background: var(--sv-ok); }
.svn-prog__b i.is-vacio { background: rgba(var(--sv-okrgb), .45); }
.svn-prog__b i.is-revisa { background: rgba(var(--sv-ambrgb), .85); }
.svn-b__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.svn-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border-radius: 22px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.svn-card.is-abierta { grid-column: 1 / -1; border-color: rgba(var(--sv-celrgb), .55); }
.svn-card__h { display: flex; align-items: center; gap: 9px; }
.svn-card__h > b { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.svn-card__v { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svn-card__v b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.svn-card__v small { color: var(--sv-tenue); overflow-wrap: anywhere; }
.svn-card__v.is-vacio b { color: var(--sv-suave); font-weight: 700; font-style: italic; }
.svn-card__acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.svn-card .svn-ed { margin-top: 4px; }
.svn-card .svn-pq { margin: 0; }

/* ---------- C · Frase ---------- */
.svn-c { display: flex; flex-direction: column; gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; }
.svn-frase { padding: 18px; border-radius: 24px; border: 1px solid rgba(var(--sv-morrgb), .3); background: linear-gradient(135deg, rgba(var(--sv-morrgb), .08), rgba(var(--sv-celrgb), .10)), var(--sv-vidrio); }
.svn-frase__k { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-mor); }
.svn-fr { margin: 0; font-size: 19px; line-height: 2.1; font-weight: 600; overflow-wrap: anywhere; }
.svn-tk { appearance: none; display: inline-block; max-width: calc(100% - 12px); padding: 2px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; border-radius: 12px; border: 1.5px solid rgba(var(--sv-celrgb), .55); background: rgba(var(--sv-celrgb), .14); color: var(--svn-acc); font: inherit; font-weight: 800; line-height: 1.5; text-align: left; vertical-align: baseline; cursor: pointer; overflow-wrap: anywhere; }
.svn-tk:hover { border-color: rgba(var(--sv-celrgb), .9); }
.svn-tk.is-revisa { border: 1.5px dashed rgba(var(--sv-ambrgb), .85); background: rgba(var(--sv-ambrgb), .14); color: var(--sv-amb); }
.svn-tk.is-falta, .svn-tk.is-vacio { border: 1.5px dashed var(--sv-linea2); background: transparent; color: var(--sv-tenue); font-style: italic; }
.svn-fr__mas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.svn-hoja { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 16, 46, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.svn-hoja__p { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 640px; max-height: 88vh; overflow: auto; padding: 16px; border-radius: 26px 26px 0 0; border: 1px solid var(--sv-linea2); background: var(--sv-hoja); }
.svn-hoja__p header { display: flex; align-items: center; gap: 10px; }
.svn-hoja__p header > b { font-size: 16px; }
.svn-hoja__p footer { display: flex; justify-content: flex-end; }
.svn-hoja__p .svn-ed { margin-top: 0; }

/* ---------- el pie y el final ---------- */
.svn-pie { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio3); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.svn-pie__m { flex: 1 1 220px; min-width: 0; font-weight: 700; font-size: 12.5px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.svn-pie__m.is-ok { color: var(--sv-ok); } .svn-pie__m.is-amb { color: var(--sv-amb); } .svn-pie__m.is-mal { color: var(--sv-mal); }
.svn-hecho { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 18px; text-align: center; border-radius: 26px; border: 1px solid var(--sv-borde); background: var(--sv-vidrio); }
.svn-hecho__i { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #15a06a, #2fcf8f); }
.svn-hecho h3 { margin: 0; font-size: 22px; }
.svn-hecho__m { margin: 0; max-width: 520px; color: var(--sv-tenue); }
.svn-hecho__l { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; max-width: 560px; text-align: left; }
.svn-hecho__l li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 16px; background: var(--sv-campo); }
.svn-hecho__l li > div { min-width: 0; display: flex; flex-direction: column; }
.svn-hecho__l small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-suave); }
.svn-hecho__l b { overflow-wrap: anywhere; }
.svn-hecho__l em { font-style: normal; font-size: 12px; color: var(--sv-tenue); overflow-wrap: anywhere; }
.svn-hecho__a { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ---------- qué se ve según el momento ---------- */
.svn[data-vista='0'] .svn-a__form, .svn[data-vista='0'] .svn-b__grid, .svn[data-vista='0'] .svn-prog { display: none; }
.svn[data-est='hecho'] .svn-cuerpo { display: none; }
.svn[data-est='pensando'][data-vista='1'] .svn-a__form, .svn[data-est='pensando'][data-vista='1'] .svn-b__grid, .svn[data-est='pensando'][data-vista='1'] .svn-frase, .svn[data-est='pensando'][data-vista='1'] .svn-pend, .svn[data-est='pensando'][data-vista='1'] .svn-ent__l { opacity: .55; pointer-events: none; }
.svn[data-est='creando'] .svn-cuerpo { opacity: .65; pointer-events: none; }
.svn[data-v='B'][data-vista='1'] .svn-compo__ta, .svn[data-v='C'][data-vista='1'] .svn-compo__ta { min-height: 52px; }
.svn[data-vista='1'] .svn-compo__cab small { display: none; }

/* ---------- entrada de lo que armó la IA (una vez, menos de 2 segundos) ---------- */
.svn.is-entra .svn-anim { animation: svn-entra .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes svn-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes svn-gira { to { transform: rotate(360deg); } }
@keyframes svn-onda { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes svn-barra { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .svn *, .svn *::before, .svn *::after { animation: none !important; transition: none !important; } }

/* ---------- pantallas angostas ---------- */
@media (max-width: 1000px) { .svn-b__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .svn-a { grid-template-columns: minmax(0, 1fr); }
  .svn-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svn-b__grid { grid-template-columns: minmax(0, 1fr); }
  .svn-hero__l { grid-template-columns: minmax(0, 1fr); }
  .svn-g2 { grid-template-columns: minmax(0, 1fr); }
  .svn-lk { grid-template-columns: minmax(0, 1fr); }
  .svn-lk .svn-bt { width: 100%; }
  .svn-tit b { font-size: 18px; }
  .svn-fr { font-size: 17px; }
  .svn-pie .svn-bt--grande { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .svn-compo { padding: 14px 12px; }
  .svn-sec, .svn-card { padding: 12px; }
  .svn-frase { padding: 14px 12px; }
  .svn-compo__acc .svn-bt--ia { flex: 1 1 100%; }
}

.svn-pw { display: flex; flex-direction: column; gap: 12px; min-width: 0; }