/* TsBot — «Descripción de TeamSpeak» (/desc). Se apoya en site.css (paleta, botones, cabecera y pie).
   Sin estilos en línea en el HTML ni en el JS (la CSP no los permite): todo estado es una clase. */
/* Los orbes del fondo se recortan en su propia caja (.ds-bg). Si desbordaran a <main>, aunque no se vieran, <main>
   pasaría a tener desplazamiento horizontal y el navegador lo movería al enfocar un campo (en el teléfono la página
   quedaba corrida hacia la izquierda). */
.ds { position: relative; overflow-x: clip; padding-bottom: 40px; }
.ds-bg { position: absolute; inset: 0 0 auto 0; height: 900px; overflow: hidden; pointer-events: none; }
.ds-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.ds-orb.o1 { width: 520px; height: 520px; left: -160px; top: 40px; background: radial-gradient(circle, rgba(0,124,153,.5), transparent 70%); animation: dsFloat 14s ease-in-out infinite; }
.ds-orb.o2 { width: 420px; height: 420px; right: -120px; top: 200px; background: radial-gradient(circle, rgba(217,54,12,.24), transparent 70%); animation: dsFloat 17s ease-in-out infinite reverse; }
.ds .wrap { position: relative; }
.ds-mono { font-family: var(--mono); }

.ds-head { position: relative; padding-top: 48px; margin-bottom: 0; max-width: none; padding-right: 150px; }
.ds-head h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; font-weight: 700; }
.ds-head .lead { max-width: 700px; }
.ds-mascot { position: absolute; right: 16px; top: 30px; width: 112px; height: auto; animation: dsFloat 6s ease-in-out infinite; }

.ds-banner { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--teal-line); background: var(--teal-deep); color: #b9d3dd; font-size: 14px; line-height: 1.45; }
.ds-banner[hidden] { display: none; }
.ds-banner svg { flex: none; color: var(--cyan-soft); }
.ds-banner p { flex-grow: 1; margin: 0; }
.ds-banner b { color: #fff; font-weight: 600; }
.ds-banner .btn { flex: none; }

.ds-grid { display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 32px; align-items: start; padding-top: 34px; }
.ds-col, .ds-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ds-side { position: sticky; top: 100px; }
.ds-card { padding: 24px; }
.ds-card h2 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; font-weight: 600; }
.ds-card h2 small { font: 500 13px/1 var(--mono); color: var(--accent-soft); }
.ds-card h2 em { margin-left: auto; font: 500 11px/1.4 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 4px 9px; border: 1px solid var(--line-3); border-radius: 999px; white-space: nowrap; }
.ds-card h2 em[hidden] { display: none; }
.ds-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.ds-sub-top { margin-top: 0; }
.ds-lbl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--soft); }
.ds-lbl small { font-weight: 400; font-size: 13px; color: var(--muted-2); }
.ds-inp { display: block; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-3); background: var(--bg-2); color: var(--text-strong); font: 500 16px/1 var(--body); outline: none; transition: border-color .15s, box-shadow .15s; }
.ds-inp.ds-mono { font: 500 13px/1 var(--mono); color: var(--soft); }
.ds-inp:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,188,214,.18); background: #0b131b; }
.ds-inp::placeholder { color: #566a79; }
.ds-row { display: flex; gap: 10px; align-items: center; }
.ds-row > .ds-inp, .ds-row > .ds-inwrap { flex-grow: 1; min-width: 0; }
.ds-row .btn { flex: none; padding: 13px 18px; font-size: 15px; }
.ds-btn-c { background: var(--teal-deep); color: var(--cyan-soft); border-color: var(--teal-line); }
.ds-btn-c:hover { border-color: var(--cyan); color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.ds-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.ds-hint[hidden], .ds-note[hidden], .ds-alert[hidden] { display: none; }
.ds-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--cyan-soft); }
.ds-alert { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-bg); font-size: 14px; line-height: 1.45; color: #ffd2c6; }

.ds-import { display: flex; gap: 16px; border-style: dashed; border-color: var(--line-3); background: rgba(10,16,23,.6); }
.ds-import-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--teal-line); background: var(--teal-deep); color: var(--cyan-soft); display: flex; align-items: center; justify-content: center; }
.ds-import-body { flex-grow: 1; min-width: 0; }

.ds-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.ds-field { min-width: 0; }
.ds-field-main { margin-top: 16px; }
.ds-inwrap { position: relative; }
.ds-inwrap .ds-inp { padding-right: 44px; }
.ds-instate { position: absolute; right: 14px; top: 14px; width: 18px; height: 18px; color: var(--cyan-soft); }
.ds-instate .ds-spin, .ds-instate .ds-ok { display: none; }
.ds-inwrap.is-busy .ds-spin { display: block; }
.ds-inwrap.is-ok .ds-ok { display: block; }
.ds-inwrap.is-bad .ds-inp { border-color: #c2412a; box-shadow: 0 0 0 3px rgba(217,54,12,.16); }
.ds-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--teal-line); border-top-color: var(--cyan-soft); animation: dsSpin .8s linear infinite; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 0; }
.ds-chips:empty { display: none; }
.ds-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-3); font-size: 13px; line-height: 1; color: var(--soft); white-space: nowrap; }
.ds-chip.is-ok { border-color: var(--teal-line); background: var(--teal-deep); color: var(--cyan-soft); }
.ds-chip.is-world { border-color: var(--teal-line); color: var(--cyan-soft); font: 500 12px/1 var(--mono); }
.ds-chip.is-warn { border-color: var(--accent-line); background: var(--accent-bg); color: #ff9d8a; }
.ds-chip.is-dim { color: var(--muted); }

.ds-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ds-groups:empty { display: none; }
.ds-ghead { display: flex; align-items: center; gap: 10px; min-height: 24px; margin-bottom: 8px; }
.ds-letter { flex: none; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 7px; background: var(--teal-deep); border: 1px solid var(--teal-line); display: inline-flex; align-items: center; justify-content: center; font: 500 13px/1 var(--mono); color: var(--cyan-soft); }
.ds-gname { font: 600 15px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--text-strong); }
.ds-gnote { font-size: 12px; line-height: 1.2; color: var(--muted-2); }
.ds-gline { flex-grow: 1; height: 1px; background: var(--line); }
.ds-mrows { display: flex; flex-direction: column; gap: 6px; }
.ds-mrow { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px 6px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.ds-mrow.is-pend { border-style: dashed; border-color: var(--line-3); }
.ds-mtxt { flex-grow: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; }
.ds-mname { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.ds-mmeta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ds-x { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--muted-2); font: 400 22px/1 var(--body); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ds-x:hover { color: #ffd2c6; background: var(--accent-bg); }
.ds-add { margin-top: 16px; }

.ds-panel { padding: 24px; border-radius: 18px; border: 1px solid var(--teal-line); background: var(--teal-deep); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ds-ptag { display: flex; align-items: center; gap: 8px; font: 500 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-soft); }
.ds-ptag i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-soft); animation: pulse 1.6s ease-in-out infinite; }
.ds-ptag-plain { color: var(--muted); margin-bottom: 8px; }
.ds-out { margin-top: 12px; min-height: 104px; padding: 15px 16px; border-radius: 12px; border: 1px solid var(--teal-line); background: var(--bg); font: 500 15px/1.6 var(--mono); color: var(--text-strong); overflow-wrap: anywhere; white-space: pre-wrap; }
.ds-out.is-empty { color: #566a79; }
.ds-out.is-over { border-color: #c2412a; }
.ds-out .lab { color: var(--accent-soft); }
.ds-count { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.ds-count b { font: 700 34px/1.05 var(--display); color: var(--text-strong); }
.ds-count > span { font: 500 14px/1.4 var(--mono); color: var(--muted); }
.ds-count em { margin-left: auto; font: 500 12px/1.6 var(--mono); font-style: normal; color: var(--cyan-soft); }
.ds-count.is-over b, .ds-count.is-over em { color: var(--accent-soft); }
.ds-meter { display: flex; gap: 3px; margin-top: 8px; }
.ds-meter i { flex: 1 1 0; height: 8px; border-radius: 2px; background: #12303d; }
.ds-meter i.on { background: var(--cyan-soft); box-shadow: 0 0 8px rgba(127,220,236,.45); }
.ds-meter i.over { background: var(--accent-soft); box-shadow: 0 0 8px rgba(255,111,85,.6); }
.ds-fit { color: #ffd2c6; }
.ds-copy { position: relative; overflow: hidden; width: 100%; margin-top: 16px; padding: 18px 24px; font-size: 17px; border-radius: 14px; }
.ds-copy::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); animation: dsShine 3.8s ease-in-out infinite; }
.ds-copy[disabled]::after { display: none; }
.ds-copy.is-done { background: #0d7a55; }
.ds-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 12px; border: 1px solid var(--teal-line); background: var(--bg); }
.ds-seg button { height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 13px/1 var(--body); cursor: pointer; }
.ds-seg button[aria-pressed="true"] { background: var(--teal-line); color: #fff; }
.ds-seg button[disabled] { opacity: .5; cursor: not-allowed; }
.ds-legend { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--teal-line); }
.ds-legend[hidden] { display: none; }
.ds-lrow { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.ds-lrow .ds-letter { background: var(--bg); color: var(--accent-soft); border-color: var(--accent-line); }
.ds-lrow b { font-weight: 600; color: var(--text-strong); }
.ds-lrow em { margin-left: auto; font: 500 12px/1 var(--mono); font-style: normal; color: var(--muted); }
.ds-legend-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #b9d3dd; }
.ds-legend-note b { color: #fff; font-weight: 600; }
.ds-help { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--teal-line); font-size: 13px; line-height: 1.55; color: #b9d3dd; }
.ds-help summary { cursor: pointer; font-weight: 600; color: var(--cyan-soft); }
.ds-help ol { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.ds-wide { margin-top: 20px; }
.ds-two { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 36px; margin-top: 16px; align-items: start; }
.ds-tid { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 14px 14px 18px; border-radius: 14px; border: 1px dashed var(--accent-line); background: var(--accent-bg); }
.ds-tid-s { flex-grow: 1; min-width: 0; }
.ds-tid-k { font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ff9d8a; }
.ds-tid-v { font-size: clamp(18px, 2.4vw, 26px); line-height: 1.25; letter-spacing: .04em; color: #fff; white-space: nowrap; }
.ds-tid.is-none .ds-tid-v { color: #8a6257; }
.ds-tid-in { margin-top: 10px; }
.ds-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-steps li { display: flex; gap: 14px; align-items: baseline; padding: 11px 14px; border-left: 2px solid var(--line-3); border-radius: 10px; background: var(--bg-2); font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.ds-steps li:first-child { border-left-color: var(--accent); }
.ds-steps b { flex: none; font: 500 12px/1 var(--mono); color: var(--muted-2); }
.ds-steps li:first-child b { color: var(--accent-soft); }
.ds-vrows { display: flex; flex-direction: column; gap: 6px; }
.ds-vrows:empty { display: none; }
.ds-vrow { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px 6px 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.ds-vtxt { flex-grow: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.ds-vname { font-weight: 600; font-size: 14px; color: var(--text-strong); overflow-wrap: anywhere; }
.ds-vrole { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.ds-vst { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 600; white-space: nowrap; border: 1px solid var(--line-3); color: var(--muted); }
.ds-vrow.is-ok .ds-vst { background: var(--teal-deep); border-color: var(--teal-line); color: var(--cyan-soft); }
.ds-vrow.is-no .ds-vst { background: var(--accent-bg); border-color: var(--accent-line); color: #ff9d8a; }
.ds-vfoot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ds-vfoot p { flex-grow: 1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--soft); }

.ds-band { display: flex; align-items: center; gap: 36px; margin-top: 20px; padding: 26px 28px; border-radius: 18px; border: 1px solid var(--teal-line); background: var(--teal-deep); }
.ds-band-h { flex: none; width: 214px; }
.ds-band-h small { font: 500 13px/1 var(--mono); color: var(--accent-soft); }
.ds-band-h h2 { margin-top: 6px; font-size: 24px; line-height: 1.15; font-weight: 700; }
.ds-band ol { flex-grow: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: .8fr 1.7fr 1fr; gap: 22px; }
.ds-band li { display: flex; gap: 12px; font-size: 14px; line-height: 1.45; color: #b9d3dd; }
.ds-band li b { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--teal-line); background: var(--bg); display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--mono); color: var(--cyan-soft); }

.ds-dock { display: none; }

@keyframes dsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dsSpin { to { transform: rotate(360deg); } }
@keyframes dsShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

@media (max-width: 1040px) {
  .ds-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ds-side { position: static; }
  .ds-two { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ds-band { flex-direction: column; align-items: stretch; gap: 16px; }
  .ds-band-h { width: auto; }
  .ds-band ol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ds { padding-bottom: 96px; }
  .ds-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--teal-line); background: var(--teal-deep); box-shadow: 0 -14px 30px rgba(0,0,0,.45); }
  .ds-dock-n { flex-grow: 1; font: 500 12px/1 var(--mono); color: var(--muted); }
  .ds-dock-n b { font: 700 22px/1 var(--display); color: var(--text-strong); }
  .ds-dock.is-over .ds-dock-n b { color: var(--accent-soft); }
  .ds-dock .btn { flex: none; min-width: 150px; }
}
@media (max-width: 640px) {
  .ds-head { padding-top: 28px; padding-right: 96px; }
  .ds-mascot { width: 76px; right: 0; top: 22px; }
  .ds-card, .ds-panel { padding: 18px; }
  .ds-mmeta, .ds-vrole { white-space: normal; }
  .ds-mrow { padding-left: 12px; gap: 8px; }
  .ds-row .btn { padding: 13px 14px; }
  .ds-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ds-import { flex-direction: column; gap: 12px; }
  .ds-import-ico { display: none; }
  .ds-banner { flex-wrap: wrap; }
  .ds-card h2 { flex-wrap: wrap; }
  .ds-card h2 em { margin-left: 0; }
  .ds-tid { flex-wrap: wrap; }
  .ds-out { font-size: 14px; }
  .ds-band { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-orb, .ds-mascot, .ds-ptag i, .ds-copy::after, .ds-spin { animation: none; }
}