/* ============================================================
   DANGOFE OS · TALLER · «SUGERIR CON LA IA» EN EL DIAGNÓSTICO Y LA NOTA AL CLIENTE (prefijo tsg-) · 2026-10-21 · chat de Diseño
   Va con taller-sugerir.js, después de taller.css / taller-panel.css. El botón reutiliza .tal-btn.tal-btn--xs de la ficha; la hoja (A) vive
   fuera de .tal-wrap, así que trae sus colores. Claro y «Noche azul» por [data-theme='dark'] (o .is-noche en el velo).
   Sin sombras (solo anillos planos de foco); el velo sin desenfoque de fondo; nada animado sin parar (los puntos y el giro, 6 vueltas).
   A · Hoja · B · Panel en línea · C · Dos casillas.
   ============================================================ */
.tsg, .tsg-fila, .tsg-pend, .tsg-marca { --tsg-az: 3, 38, 155; --tsg-cel: 59, 130, 246; --tsg-ver: 34, 197, 94; --tsg-amb: 245, 158, 11; --tsg-roj: 239, 68, 68;
  --tsg-tinta: #0b1540; --tsg-tenue: #4a5680; --tsg-azul: #0b3dd6; --tsg-ver-t: #15724a; --tsg-amb-t: #9a5b00; --tsg-roj-t: #b42318;
  --tsg-linea: rgba(3, 38, 155, .10); --tsg-linea2: rgba(3, 38, 155, .18); --tsg-campo: rgba(3, 38, 155, .045); --tsg-campo2: rgba(255, 255, 255, .92);
  --tsg-vidrio: rgba(255, 255, 255, .97); --tsg-borde: rgba(255, 255, 255, .9); --tsg-card: rgba(255, 255, 255, .78); --tsg-sobre: #fff; }
[data-theme='dark'] .tsg, .tsg-velo.is-noche .tsg, [data-theme='dark'] .tsg-fila, [data-theme='dark'] .tsg-pend, [data-theme='dark'] .tsg-marca {
  --tsg-tinta: #eef1ff; --tsg-tenue: #aab5e0; --tsg-azul: #8db0ff; --tsg-ver-t: #5ad486; --tsg-amb-t: #fcd34d; --tsg-roj-t: #ff8a7a;
  --tsg-linea: rgba(141, 176, 255, .14); --tsg-linea2: rgba(141, 176, 255, .26); --tsg-campo: rgba(141, 176, 255, .08); --tsg-campo2: rgba(13, 24, 60, .72);
  --tsg-vidrio: rgba(9, 16, 44, .98); --tsg-borde: rgba(141, 176, 255, .22); --tsg-card: rgba(13, 24, 60, .62); --tsg-sobre: #0b1540; }
.tsg { box-sizing: border-box; color: var(--tsg-tinta); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.4; text-align: left; }
.tsg *, .tsg *::before, .tsg *::after { box-sizing: border-box; }
.tsg button { font: inherit; cursor: pointer; }
.tsg button:disabled { cursor: default; opacity: .55; }
/* el botón junto a cada casilla (va con .tal-btn.tal-btn--xs de la ficha) */
.tsg-btn { gap: 6px; }
.tsg-btn svg { width: 13px; height: 13px; color: var(--tsg-azul); }
.tsg-btn.is-cargando svg { animation: tsg-gira 1.4s linear 6; }
.tsg-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.tsg-pend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; color: var(--tsg-tenue); }
.tsg-pend svg { width: 13px; height: 13px; color: var(--tsg-azul); }
.tsg-marca { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--tsg-ver-t); }
.tsg-marca svg { width: 13px; height: 13px; }
.tsg-enlace { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; color: var(--tsg-azul); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* ---------- A · la hoja ---------- */
.tsg-velo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 8800; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 22, 51, .42); animation: tsg-aparece .2s ease both; }
.tsg-velo.is-fuera { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.tsg-hoja { width: 100%; max-width: 680px; max-height: calc(100% - 24px); overflow: auto; padding: 14px 16px 18px; border-radius: 24px 24px 0 0; background: var(--tsg-vidrio); border: 1px solid var(--tsg-borde); animation: tsg-sube .24s ease both; }
@media (min-width: 700px) { .tsg-velo { align-items: center; padding: 16px; } .tsg-hoja { border-radius: 24px; } }
.tsg-cab { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
.tsg-cab__ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgb(var(--tsg-az)), rgb(var(--tsg-cel))); }
.tsg-cab__ico svg { width: 18px; height: 18px; }
.tsg-cab > div { flex: 1; min-width: 0; }
.tsg-cab b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; }
.tsg-cab span { display: block; font-size: 12.5px; color: var(--tsg-tenue); margin-top: 2px; }
.tsg-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tsg-linea2); background: var(--tsg-campo); color: var(--tsg-tenue); display: grid; place-items: center; }
.tsg-x svg { width: 16px; height: 16px; }
/* ---------- B · panel en línea · C · casillas ---------- */
.tsg-panel { margin: 10px 0 4px; padding: 12px 14px 14px; border-radius: 18px; background: var(--tsg-card); border: 1px solid var(--tsg-linea2); }
.tsg-casilla { margin: 8px 0 4px; padding: 10px 12px 12px; border-radius: 16px; background: var(--tsg-card); border: 1px solid var(--tsg-linea2); display: flex; flex-direction: column; gap: 10px; }
/* ---------- el cuerpo (igual en las tres) ---------- */
.tsg-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.tsg-ctx { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--tsg-campo); font-size: 12.5px; font-weight: 700; color: var(--tsg-tenue); }
.tsg-ctx svg { width: 14px; height: 14px; color: var(--tsg-azul); }
.tsg-dos { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .tsg-hoja .tsg-dos, .tsg-panel .tsg-dos { grid-template-columns: 1fr 1fr; } }
.tsg-blq { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--tsg-campo2); border: 1px solid var(--tsg-linea); min-width: 0; }
.tsg-blq header { display: flex; align-items: center; gap: 8px; }
.tsg-blq__ico { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--tsg-az), .10); color: var(--tsg-azul); }
.tsg-blq__ico svg { width: 15px; height: 15px; }
.tsg-blq--obs .tsg-blq__ico { background: rgba(var(--tsg-ver), .16); color: var(--tsg-ver-t); }
.tsg-blq header b { font-size: 13.5px; font-weight: 800; }
.tsg-txt { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tsg-txt i { color: var(--tsg-tenue); }
.tsg-mk { background: rgba(var(--tsg-az), .12); color: inherit; border-radius: 4px; padding: 0 2px; font-weight: 700; }
[data-theme='dark'] .tsg-mk, .tsg-velo.is-noche .tsg-mk { background: rgba(var(--tsg-cel), .28); }
.tsg-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.4; color: var(--tsg-amb-t); }
.tsg-hint svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.tsg-coinciden { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--tsg-ver-t); }
.tsg-coinciden svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(var(--tsg-ver), .16); }
.tsg-acc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tsg-b { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 14px; border-radius: 13px; border: 1px solid var(--tsg-linea2); background: var(--tsg-campo2); color: var(--tsg-tinta); font-weight: 800; font-size: 13.5px; }
.tsg-b svg { width: 15px; height: 15px; flex: none; }
.tsg-b:focus-visible, .tsg-x:focus-visible, .tsg-enlace:focus-visible, .tsg-btn:focus-visible { outline: 3px solid rgba(var(--tsg-cel), .35); outline-offset: 1px; }
.tsg-b--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, rgb(var(--tsg-az)), rgb(var(--tsg-cel))); }
.tsg-b--pri svg { color: #fff; }
.tsg-b--mini { min-height: 36px; padding: 7px 12px; border-radius: 11px; font-size: 13px; align-self: flex-start; }
.tsg-b--txt { border-color: transparent; background: transparent; color: var(--tsg-tenue); }
/* cargando y error */
.tsg-carga, .tsg-error { display: flex; align-items: center; gap: 12px; }
.tsg-carga__ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgb(var(--tsg-az)), rgb(var(--tsg-cel))); }
.tsg-carga__ico svg { width: 20px; height: 20px; }
.tsg-carga__ico.is-pensando svg { animation: tsg-gira 1.6s linear 6; }
.tsg-carga__ico.is-mal { background: rgba(var(--tsg-roj), .14); color: var(--tsg-roj-t); }
.tsg-carga b, .tsg-error b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.tsg-carga span, .tsg-error span { display: block; font-size: 12.5px; color: var(--tsg-tenue); margin-top: 2px; line-height: 1.4; }
.tsg-puntos { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.tsg-puntos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: tsg-punto 1.2s ease-in-out 6; }
.tsg-puntos i:nth-child(2) { animation-delay: .2s; }
.tsg-puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes tsg-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsg-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tsg-gira { to { transform: rotate(360deg); } }
@keyframes tsg-punto { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .tsg-velo, .tsg-hoja { animation: none; } .tsg-puntos i, .tsg-carga__ico.is-pensando svg, .tsg-btn.is-cargando svg { animation: none; } }