/* ==========================================================================
   Diagnóstico: sistema de diseño de Pytronic.
   Los tokens son los de `labs/static/labs/css/tokens.css`, los mismos que
   usan el taller y finanzas: el cian de marca, las superficies y la
   tipografía salen de ahí y no de una paleta propia. Los nombres viejos se
   dejan como alias para no reescribir las 991 líneas que ya funcionan.
   ========================================================================== */
.diag-wrap{
  --brand-cyan:#1AB3D3; --brand-cyan-bright:#3ED8F7; --brand-cyan-deep:#0B7D96;
  --font-display:"Sora",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --bg:#08090B; --bg-alt:#0B0D10;
  --surface:#101317; --surface-2:#171B21; --surface-3:#1E242B;
  --borde:rgba(255,255,255,.08); --borde-fuerte:rgba(255,255,255,.16);
  --texto:#F0F4F7; --texto-suave:#98A4B0; --texto-tenue:#67727D;
  --acento:var(--brand-cyan); --acento-claro:var(--brand-cyan-bright);
  --acento-suave:rgba(26,179,211,.14); --acento-linea:rgba(26,179,211,.32);
  --sobre-acento:#041A21; --halo:rgba(26,179,211,.30);

  --exito:#34D399; --exito-suave:rgba(52,211,153,.12); --exito-linea:rgba(52,211,153,.3);
  --aviso:#FBBF24; --aviso-suave:rgba(251,191,36,.12); --aviso-linea:rgba(251,191,36,.3);
  --alerta:#F87171; --alerta-suave:rgba(248,113,113,.12); --alerta-linea:rgba(248,113,113,.32);

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:160ms; --dur-base:280ms;

  /* Alias del tema anterior: un solo sitio decide el color. */
  --accent:var(--acento); --text:var(--texto); --danger:var(--alerta);

  font-family:var(--font-body); color:var(--texto);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.diag-wrap h1,.diag-wrap h2,.diag-wrap h3,.diag-wrap h4{
  font-family:var(--font-display); letter-spacing:-.018em; text-wrap:balance; }

/* Estilos base para la app diagnostico.
   Coexiste con AdminLTE + tema dark "Titanium". */

.diag-wrap { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

/* Banner de "diagnóstico reabierto" */
.diag-reopen-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--acento-suave);
  border: 1px solid var(--acento-linea);
  border-left: 3px solid var(--acento);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--texto-suave); font-size: 13.5px; line-height: 1.5;
}
.diag-reopen-banner i { color: var(--acento); font-size: 20px; padding-top: 2px; }
.diag-reopen-banner strong { color: var(--texto); display: block; margin-bottom: 2px; }
.diag-reopen-banner small { display: block; color: var(--texto-suave); margin-top: 4px; font-size: 12px; }

.diag-tabs {
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 12px 14px;
}
.diag-tabs__grupo {
  display: flex; flex-direction: column; gap: 6px;
}
.diag-tabs__categoria {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.45); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px;
}
.diag-tabs__categoria i { color: var(--accent, var(--acento)); }
.diag-tabs__fila {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.diag-tabs button {
  background: transparent; color: var(--text, var(--texto));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.diag-tabs button:hover { background: rgba(255,255,255,.06); }
.diag-tabs button.is-active {
  background: var(--danger, var(--alerta)); color: #fff;
  border-color: transparent;
}
.diag-tabs button[data-status="aprobado"] { border-color: var(--exito); }
.diag-tabs button[data-status="falla"] { border-color: var(--alerta); }

.diag-panel {
  margin-top: 18px;
  background: var(--card, var(--surface));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px;
}

.diag-panel__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; font-weight: 600; font-size: 1.1rem;
}

.diag-hint {
  border-left: 4px solid var(--danger, var(--alerta));
  background: rgba(255,255,255,.04);
  padding: 10px 14px; border-radius: 6px;
  color: var(--muted, var(--texto-suave)); margin-bottom: 14px;
}

.diag-actions { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.diag-actions .btn-aprobar { background: var(--exito); color: #fff; border: 0; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.diag-actions .btn-fallar { background: transparent; color: var(--text, var(--texto)); border: 1px solid rgba(255,255,255,.2); padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.diag-actions .btn-fallar:hover { border-color: var(--danger, var(--alerta)); }
.diag-actions .badge-status { color: var(--muted, var(--texto-suave)); }

/* Caja de observación del técnico (debajo de los botones aprobar/fallar). */
.diag-observacion { margin-top: 14px; }
.diag-observacion label {
  display: block; color: var(--muted, var(--texto-suave)); font-size: 13px;
  margin-bottom: 6px; font-weight: 500;
}
.diag-observacion label small { color: rgba(255,255,255,.35); margin-left: 6px; font-weight: 400; }
.diag-observacion label i { margin-right: 6px; color: var(--accent, var(--acento)); }
.diag-observacion textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: var(--text, var(--texto));
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 48px;
  transition: border-color .15s, background .15s;
}
.diag-observacion textarea:focus {
  outline: none;
  border-color: var(--accent, var(--acento));
  background: rgba(255,255,255,.06);
}
.diag-observacion textarea::placeholder { color: rgba(255,255,255,.25); }

.diag-footer {
  margin-top: 24px; display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
}
.diag-footer .btn-guardar {
  background: var(--accent, var(--acento)); color: #fff; border: 0;
  padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600;
}

/* Tablas resumen */
.diag-table { width: 100%; border-collapse: collapse; }
.diag-table th, .diag-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.diag-table th { color: var(--muted, var(--texto-suave)); font-weight: 500; }

.estado-aprobado { color: var(--exito); font-weight: 600; }
.estado-falla { color: var(--alerta); font-weight: 600; }
.estado-no_probado { color: var(--muted, var(--texto-suave)); }

/* ========== Test de Teclado (rediseño fiel) ==========
   Variables base. --kb-u = ancho de 1 unidad. Cambia este valor para
   escalar todo el teclado en proporción. */
.kb-stage,
.kb-board,
.kb-key { --kb-u: 38px; --kb-gap: 5px; }

.kb-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.kb-toolbar__label {
  color: var(--texto-suave); font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
.kb-layout-switch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kb-layout-switch button {
  background: rgba(255,255,255,.06); color: var(--texto);
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.kb-layout-switch button:hover { background: rgba(255,255,255,.1); }
.kb-layout-switch button.is-active {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

/* Progreso */
.kb-progress {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 220px; align-items: flex-end;
}
.kb-progress__num { color: var(--texto); font-weight: 700; font-size: 14px; }
.kb-progress__lbl { color: var(--texto-suave); font-weight: 400; font-size: 12px; margin-left: 4px; }
.kb-progress__bar {
  width: 220px; height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 99px; overflow: hidden;
}
.kb-progress__bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--exito), var(--acento));
  transition: width .25s ease;
}

/* "Escenario": captura de teclado y dibuja el equipo */
.kb-stage {
  position: relative;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px 18px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  overflow-x: auto;
}
.kb-stage:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave), inset 0 0 80px var(--acento-suave);
}
.kb-focus-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,25,.85); backdrop-filter: blur(2px);
  color: var(--texto); font-size: 14px; font-weight: 600;
  border-radius: 16px;
  z-index: 5;
  pointer-events: none;
}
.kb-focus-hint i { margin-right: 8px; color: var(--acento); }
.kb-focus-hint.is-hidden { display: none; }

/* Layout del "tablero": main | flechas | numpad? */
.kb-board {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 18px;
  align-items: end;
  justify-content: center;
}
.kb-main { display: flex; flex-direction: column; gap: var(--kb-gap); }
.kb-row {
  display: flex; gap: var(--kb-gap);
  flex-wrap: nowrap;
}

/* Cluster de flechas en T invertida */
.kb-arrows {
  display: flex; flex-direction: column; gap: var(--kb-gap);
  align-items: center;
}
.kb-arrow-top, .kb-arrow-bot {
  display: flex; gap: var(--kb-gap); justify-content: center;
}

/* Numpad: 4 cols × 5 rows con span en + y Enter */
.kb-numpad {
  display: grid;
  grid-template-columns: repeat(4, var(--kb-u));
  grid-auto-rows: var(--kb-u);
  gap: var(--kb-gap);
}
.kb-numpad .kb-key { width: auto; }
.kb-numpad .kb-key--tall { grid-row: span 2; height: auto; }
.kb-numpad .kb-key--wide { grid-column: span 2; }

/* === LA TECLA === */
.kb-key {
  --u: 1;
  width: calc(var(--kb-u) * var(--u) + (var(--u) - 1) * var(--kb-gap));
  height: var(--kb-u);
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-bottom-color: rgba(0,0,0,.45);
  border-radius: 6px;
  color: var(--texto);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif;
  user-select: none; cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.4),
    0 2px 4px rgba(0,0,0,.25);
  transition: transform .06s, box-shadow .08s, background .08s, border-color .15s;
  text-align: center; line-height: 1.05;
  padding: 0 4px; box-sizing: border-box;
  overflow: hidden;
}
.kb-key__main { font-size: 12px; }
.kb-key__sub  {
  font-size: 9px; color: var(--texto-suave); font-weight: 500;
  margin-bottom: 1px; text-transform: none;
}

/* Variantes por tipo */
.kb-key--mod   { background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 100%); color: var(--texto-suave); }
.kb-key--mod .kb-key__main { font-size: 10px; }
.kb-key--fn    { background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); color: var(--texto-suave); }
.kb-key--fn .kb-key__main { font-size: 10px; }
.kb-key--arrow { background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 100%); color: var(--acento); }
.kb-key--arrow .kb-key__main { font-size: 16px; }
.kb-key--optional { opacity: .55; border-style: dashed; }

/* Estado: presionando ahora */
.kb-key.is-active {
  background: linear-gradient(180deg, var(--acento) 0%, var(--acento) 100%);
  border-color: var(--acento);
  color: #fff;
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 0 2px var(--acento-suave),
    0 0 14px var(--acento-linea);
}
.kb-key.is-active .kb-key__sub { color: rgba(255,255,255,.75); }

/* Estado: ya probada */
.kb-key.was-pressed {
  background: linear-gradient(180deg, var(--exito-suave) 0%, var(--exito-suave) 100%);
  border-color: var(--exito);
  color: var(--exito);
  box-shadow:
    inset 0 1px 0 rgba(46,204,113,.15),
    0 1px 0 rgba(0,0,0,.4),
    0 0 6px rgba(46,204,113,.18);
}
.kb-key.was-pressed .kb-key__sub { color: rgba(110,231,167,.55); }

/* Estado: ignorada (no presente en el equipo) */
.kb-key.is-ignored {
  background: repeating-linear-gradient(
    45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 4px,
    rgba(255,255,255,.05) 4px, rgba(255,255,255,.05) 8px
  );
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.25);
  cursor: not-allowed;
  box-shadow: none;
}
.kb-key.is-ignored::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 1px; background: rgba(255,255,255,.25); transform: rotate(-15deg);
}
.kb-key.is-ignored .kb-key__sub { display: none; }

/* Hover suave (sólo en escritorio) */
@media (hover: hover) {
  .kb-key:hover:not(.is-active):not(.is-ignored) {
    border-color: var(--acento-suave);
    transform: translateY(-1px);
  }
}

/* Footer (última tecla + leyenda + acciones) */
.kb-bottom {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 18px;
  align-items: center;
}
.kb-last {
  color: var(--texto-suave); font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.kb-last code {
  background: rgba(255,255,255,.06);
  color: var(--texto);
  padding: 2px 8px; border-radius: 6px;
  font-family: ui-monospace, monospace; font-size: 12px;
}
.kb-tips {
  grid-column: 1 / -1;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--texto-suave);
}
.kb-tip { display: inline-flex; align-items: center; gap: 6px; }
.kb-swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; border: 1px solid rgba(255,255,255,.15);
}
.kb-swatch--pending { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); }
.kb-swatch--active  { background: var(--acento); border-color: var(--acento); }
.kb-swatch--ok      { background: var(--exito-suave); border-color: var(--exito); }
.kb-swatch--ignore  { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--surface-3) 3px, var(--surface-3) 6px); }

.kb-actions { display: flex; gap: 8px; }
.kb-btn-ghost {
  background: transparent; color: var(--texto-suave);
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.kb-btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }

/* Adaptación a pantallas chicas: reducimos --kb-u */
@media (max-width: 900px) {
  .kb-stage,
  .kb-board,
  .kb-key { --kb-u: 30px; --kb-gap: 4px; }
  .kb-key__main { font-size: 11px; }
  .kb-key--arrow .kb-key__main { font-size: 14px; }
}
@media (max-width: 640px) {
  .kb-stage,
  .kb-board,
  .kb-key { --kb-u: 26px; --kb-gap: 3px; }
  .kb-key__sub { display: none; }
  .kb-board { grid-template-columns: auto; row-gap: 14px; }
}

/* ========== Test de Mouse ========== */
.mouse-area {
  position: relative;
  width: 100%; height: 280px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 8px;
  overflow: hidden; cursor: crosshair;
}
.mouse-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mouse-stats {
  display: flex; gap: 18px; margin-top: 10px;
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--texto-suave);
}
.mouse-buttons { margin-top: 8px; display: flex; gap: 8px; }
.mouse-btn-test {
  background: rgba(255,255,255,.04); color: var(--texto);
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 14px; border-radius: 6px;
  user-select: none;
}
.mouse-btn-test.was-clicked { border-color: var(--exito); }

/* ========== Test de Audio ========== */
.audio-controls { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.audio-btn {
  border: 0; padding: 8px 14px; border-radius: 999px;
  font-weight: 600; cursor: pointer; color: #fff;
}
.audio-btn.l { background: var(--alerta); }
.audio-btn.r { background: var(--alerta); }
.audio-btn.b { background: var(--acento); }
.audio-btn.stop { background: var(--texto-tenue); }
.audio-vis {
  background: var(--bg); border-radius: 6px; padding: 6px;
  height: 110px;
}
.audio-vis canvas { width: 100%; height: 100%; display: block; }

/* ========== Test de Pantalla ========== */
.pantalla-info { font-family: ui-monospace, monospace; color: var(--texto-suave); font-size: 13px; margin-bottom: 10px; }
.pantalla-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.pantalla-colors button {
  border: 1px solid rgba(255,255,255,.2);
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600;
}
#pantalla-fs {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
}
#pantalla-fs.is-on { display: flex; }
#pantalla-fs .hint { background: rgba(0,0,0,.5); color: #fff; padding: 8px 14px; border-radius: 6px; }

/* ========== Test de Benchmark CPU ========== */
.bench-result {
  font-family: ui-monospace, monospace; color: var(--texto-suave); margin-top: 10px;
  background: rgba(255,255,255,.04); padding: 10px; border-radius: 6px;
}
.bench-result strong { color: var(--texto); }
.bench-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.bench-bar > div { height: 100%; background: var(--acento); width: 0%; transition: width .2s; }

/* ========== Test WebGL ========== */
.webgl-wrap canvas {
  width: 100%; max-width: 420px; aspect-ratio: 1.4;
  background: var(--bg); border-radius: 8px; display: block;
}
.webgl-info { font-family: ui-monospace, monospace; color: var(--texto-suave); font-size: 12px; margin-top: 8px; white-space: pre-wrap; }

/* ========== Test Webcam/Mic ========== */
.cam-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.cam-wrap video { width: 280px; height: 200px; background: var(--bg); border-radius: 6px; object-fit: cover; }
.cam-mic { flex: 1; min-width: 240px; }
.cam-mic-bar { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.cam-mic-bar > div { height: 100%; background: linear-gradient(90deg, var(--exito), var(--aviso), var(--alerta)); width: 0%; transition: width .05s; }
.cam-actions button { margin-right: 6px; }

/* ========== Test Red/WiFi & otros con info simple ========== */
.info-list { font-family: ui-monospace, monospace; font-size: 13px; color: var(--texto-suave); }
.info-list strong { color: var(--texto); }
.info-list .row-info { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }

/* Botones genéricos para acciones (Bluetooth, USB, Multi, Batería) */
.act-btn {
  background: var(--acento); color: #fff; border: 0;
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.act-btn.secondary { background: rgba(255,255,255,.08); color: var(--texto); border: 1px solid rgba(255,255,255,.2); }
.act-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ========== Test de Video 4K (rediseño) ========== */
.v4k-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.v4k-tabs button {
  background: rgba(255,255,255,.06); color: var(--texto);
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.v4k-tabs button:hover { background: rgba(255,255,255,.1); }
.v4k-tabs button.is-active { background: var(--acento); border-color: var(--acento); color: #fff; }

.v4k-controls { margin-bottom: 12px; }
.v4k-help {
  margin: 8px 0 0; color: var(--texto-suave); font-size: 12px; line-height: 1.5;
}
.v4k-help strong { color: var(--texto); }
.v4k-local4k {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.v4k-local4k__meta {
  color: var(--texto-suave);
  font-size: 12px;
  font-family: ui-monospace, monospace;
}

/* File picker custom */
.v4k-file { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.v4k-file input[type="file"] { display: none; }
.v4k-file__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--acento); color: #fff;
  padding: 8px 14px; border-radius: 6px; font-weight: 600; font-size: 13px;
}
.v4k-file__btn:hover { background: var(--acento); }
.v4k-file__name { color: var(--texto-suave); font-size: 13px; font-family: ui-monospace, monospace; }

/* YouTube y URL */
.v4k-youtube, .v4k-urlbox {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.v4k-youtube select,
.v4k-youtube input,
.v4k-urlbox input {
  background: rgba(255,255,255,.04); color: var(--texto);
  border: 1px solid rgba(255,255,255,.15);
  padding: 8px 12px; border-radius: 6px;
  font: inherit; font-size: 13px;
}
.v4k-youtube select { min-width: 220px; }
.v4k-youtube input,
.v4k-urlbox input  { flex: 1; min-width: 240px; font-family: ui-monospace, monospace; }
.v4k-youtube input:focus,
.v4k-urlbox input:focus { border-color: var(--acento); outline: none; }

/* Player */
.v4k-player {
  background: var(--bg); border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}
.v4k-player video,
.v4k-canvas { width: 100%; height: 100%; display: block; background: #000; }
.v4k-yt-wrap { position: relative; width: 100%; height: 100%; }
.v4k-yt-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0;
}
.v4k-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--texto-suave); gap: 8px;
}
.v4k-empty i { font-size: 48px; opacity: .4; }
.v4k-empty p { margin: 0; font-size: 14px; }

.v4k-extlink {
  display: inline-block; margin-top: 8px;
  color: var(--texto-suave); font-size: 12px; text-decoration: underline;
}
.v4k-extlink:hover { color: var(--acento); }

.v4k-info {
  margin-top: 12px;
  background: var(--acento-suave);
  border: 1px solid var(--acento-suave);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--texto-suave); font-size: 13px; line-height: 1.6;
  min-height: 1em;
}
.v4k-info:empty { display: none; }
.v4k-info strong { color: var(--texto); }
.v4k-error { color: var(--alerta); }

/* ========== Bloques compartidos: RAM, Almacenamiento (data-sheet style) ========== */
.ds-block {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ds-block__title {
  font-weight: 600; color: var(--texto); font-size: 14px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.ds-block__title i { color: var(--acento); }
.ds-block__title small { color: var(--texto-suave); font-weight: 400; font-size: 12px; margin-left: 4px; }

.ds-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0;
}

.muted-note {
  color: var(--texto-suave); font-size: 12px;
  margin-top: 6px; line-height: 1.5;
}
.muted-note strong { color: var(--texto); }

/* "Por qué no detecta…" expandible */
.ds-why {
  background: rgba(245,158,11,.05);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.ds-why summary {
  cursor: pointer; color: var(--aviso); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.ds-why summary::-webkit-details-marker { display: none; }
.ds-why summary::after {
  content: '▾'; margin-left: auto; transition: transform .2s;
  color: var(--texto-suave);
}
.ds-why[open] summary::after { transform: rotate(180deg); }
.ds-why__body {
  margin-top: 10px; color: var(--texto-suave); line-height: 1.6;
}
.ds-why__body ul { margin: 6px 0 6px 18px; padding: 0; }
.ds-why__body li { margin: 3px 0; }
.ds-why__body code {
  background: rgba(0,0,0,.3); color: var(--acento-claro);
  padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 12px;
}
.ds-why__body strong { color: var(--texto); }

/* Formulario de entrada manual del técnico */
.ds-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.ds-form__full { grid-column: 1 / -1; }
.ds-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--texto-suave); font-weight: 600;
}
.ds-form input,
.ds-form select {
  background: rgba(255,255,255,.04); color: var(--texto);
  border: 1px solid rgba(255,255,255,.12);
  padding: 7px 10px; border-radius: 6px;
  /* Forzar esquema oscuro para que el desplegable nativo del SO use
     colores oscuros también (sin esto, en Windows el menú abierto se
     ve gris claro sobre gris claro y no se leen las opciones). */
  color-scheme: dark;
  font: inherit; font-size: 13px; font-weight: 400;
  font-family: inherit;
}
.ds-form input:focus,
.ds-form select:focus {
  border-color: var(--acento); outline: none;
  background: var(--acento-suave);
}
/* Opciones del desplegable: fondo oscuro + texto claro.
   Algunos browsers (Firefox / Chromium en Linux) sí respetan estos colores;
   en Windows el SO ignora estos estilos pero `color-scheme: dark` arriba
   ya basta para forzar el tema oscuro nativo. */
.ds-form select option,
.ds-form select optgroup {
  background-color: var(--bg-alt);
  color: var(--texto);
}

/* ========== Test QR / Barras ========== */
.qr-engine {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px; color: var(--texto-suave);
  line-height: 1.5;
}
.qr-engine strong { color: var(--texto); }
.qr-engine small { color: var(--texto-suave); }

.qr-video-wrap {
  margin-top: 10px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  max-width: 480px;
  position: relative;
}
.qr-video-wrap video { width: 100%; display: block; }
.qr-video-wrap::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px dashed var(--acento-suave);
  border-radius: 12px;
  pointer-events: none;
}

.qr-img-preview {
  margin-top: 10px;
  max-width: 320px; max-height: 240px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: var(--bg);
}

/* ========== Test Permisos (rediseño con explicaciones) ========== */
.perm-summary {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}
.perm-summary__chip {
  font-size: 14px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
.perm-summary__lbl {
  color: var(--texto-suave); font-size: 13px;
  margin-left: auto;
}
.perm-list { display: flex; flex-direction: column; gap: 8px; }

.perm-row {
  display: flex; gap: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 10px 14px;
}
.perm-row--alert {
  border-left-color: var(--alerta);
  background: rgba(255,77,77,.04);
}
.perm-row__icon {
  flex: 0 0 36px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--acento);
}
.perm-row--alert .perm-row__icon { color: var(--alerta); }
.perm-row__body { flex: 1; min-width: 0; }
.perm-row__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.perm-row__head strong { color: var(--texto); font-size: 14px; }
.perm-row__desc {
  color: var(--texto-suave); font-size: 13px; line-height: 1.4;
  margin-bottom: 6px;
}
.perm-uses {
  display: block; color: var(--texto-suave); font-size: 11.5px;
  margin-top: 4px;
}
.perm-uses i { margin-right: 4px; color: var(--acento); }
.perm-uses em { color: var(--texto-suave); font-style: normal; font-weight: 600; }
.perm-uses--none { font-style: italic; color: var(--texto-tenue); }
.perm-uses--none::before { content: ''; }

.perm-badge {
  font-size: 12px; font-weight: 600;
  padding: 2px 10px; border-radius: 99px;
  white-space: nowrap;
}
.perm-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(245,158,11,.15); color: var(--aviso);
  border: 1px solid rgba(245,158,11,.3);
}
.perm-row__warn {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,77,77,.08);
  border: 1px solid rgba(255,77,77,.2);
  border-radius: 6px;
  color: var(--alerta); font-size: 12px; line-height: 1.5;
}
.perm-row__warn i { margin-right: 6px; }

.ds-why__body ol { margin: 6px 0 6px 20px; padding: 0; }
.ds-why__body ol li { margin: 4px 0; }

/* ==========================================================================
   Variantes coloreadas de ds-block (resultado del test)
   ========================================================================== */
.ds-block--ok    { border-left: 3px solid var(--exito); }
.ds-block--warn  { border-left: 3px solid var(--aviso); }
.ds-block--alert { border-left: 3px solid var(--aviso); }
.ds-block--fail  { border-left: 3px solid var(--alerta); }

/* ==========================================================================
   Throttling térmico
   ========================================================================== */
.ds-block .bench-bar {
  margin-top: 10px;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.ds-block .bench-bar > div[data-bar] {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--acento-claro), var(--exito));
  transition: width .25s ease;
}

/* ==========================================================================
   Codecs de video
   ========================================================================== */
.codec-summary {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.codec-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  font-weight: 600;
}
.codec-chip--ok   { background: var(--exito-suave); color: var(--exito); }
.codec-chip--warn { background: var(--aviso-suave); color: var(--aviso); }
.codec-chip--fail { background: var(--alerta-suave); color: var(--alerta); }
.codec-summary__lbl { color: var(--texto-suave); font-size: 12px; margin-left: 4px; }

.codec-grid { display: grid; gap: 10px; }
.codec-row {
  background: var(--bg-alt);
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.codec-row__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.codec-row__head strong { color: var(--texto); font-size: 14px; }
.codec-row__head small { color: var(--texto-suave); font-size: 11px; text-align: right; }
.codec-row__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.codec-cell {
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: help;
}
.codec-cell__res    { font-size: 11px; color: var(--texto-suave); }
.codec-cell__badge  { font-weight: 700; font-size: 14px; }
.codec-cell__detail { font-size: 10px; color: var(--texto-tenue); }

.codec-cell--ok      { border-color: var(--exito-linea); background: var(--exito-suave); }
.codec-cell--warn    { border-color: var(--aviso-linea); background: var(--aviso-suave); }
.codec-cell--alert   { border-color: var(--aviso-linea); background: var(--aviso-suave); }
.codec-cell--fail    { border-color: var(--alerta-linea); background: var(--alerta-suave); }
.codec-cell--unknown { border-color: var(--borde-fuerte); background: var(--surface-2); }

@media (max-width: 600px) {
  .codec-row__cells { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Dispositivos audio/video (enumerateDevices)
   ========================================================================== */
.dev-summary {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.dev-chip {
  font-size: 12px; padding: 5px 10px; border-radius: 6px;
  background: var(--surface-2); color: var(--texto); border: 1px solid var(--surface-2);
}
.dev-chip i { margin-right: 6px; color: var(--acento-claro); }

.dev-board { display: grid; gap: 12px; }
.dev-grupo {
  background: var(--bg-alt);
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.dev-grupo__head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--texto);
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--surface-2);
}
.dev-grupo__count {
  margin-left: auto;
  background: var(--surface-2); color: var(--texto-suave);
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
}

.dev-list { display: grid; gap: 6px; }
.dev-row {
  display: flex; gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 6px;
}
.dev-row__icon {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center;
  background: var(--surface-2); border-radius: 6px; color: var(--acento-claro);
}
.dev-row__body { flex: 1; min-width: 0; }
.dev-row__name { color: var(--texto); font-size: 13px; }
.dev-row__name em { color: var(--texto-suave); font-style: italic; }
.dev-row__id   { color: var(--texto-tenue); font-size: 11px; margin-top: 2px; }
.dev-row__id code { color: var(--texto-suave); }

.dev-tag {
  display: inline-block;
  background: var(--exito-suave); color: var(--exito);
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  margin-left: 6px; font-weight: 600;
}

/* ==========================================================================
   Información del sistema (ficha técnica)
   ========================================================================== */
/* Reutiliza ds-block + info-list + row-info ya definidos. Solo ajustes finos: */
.ds-why__body code {
  background: var(--bg); padding: 2px 4px; border-radius: 3px;
  color: var(--texto);
}

/* ==========================================================================
   Video 4K: extras (muestras libres + banner aviso + info-warn/error)
   ========================================================================== */
.v4k-muestras {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.v4k-muestras select {
  flex: 1; min-width: 220px;
  background: var(--bg-alt); color: var(--texto); border: 1px solid var(--surface-2);
  padding: 8px 10px; border-radius: 6px;
}
.v4k-warn-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(250, 204, 21, .08);
  border: 1px solid rgba(250, 204, 21, .3);
  color: var(--aviso);
  padding: 10px 12px; border-radius: 8px;
  margin-bottom: 10px; font-size: 12px; line-height: 1.4;
}
.v4k-warn-banner i { color: var(--aviso); font-size: 16px; margin-top: 2px; }
.v4k-info-warn,
.v4k-info-error {
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.4; margin-bottom: 8px;
}
.v4k-info-warn  { background: rgba(250, 204, 21, .08); border: 1px solid rgba(250, 204, 21, .3); color: var(--aviso); }
.v4k-info-error { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .3); color: var(--alerta); }
.v4k-yt-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}

/* ==========================================================================
   Fullscreen / PiP: badges
   ========================================================================== */
.fs-badge {
  display: inline-block;
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.fs-badge--ok   { background: var(--exito-suave); color: var(--exito); }
.fs-badge--fail { background: var(--alerta-suave); color: var(--alerta); }

/* ==========================================================================
   Web Serial: input baudios + ds-actions con select
   ========================================================================== */
.ds-actions select,
.ds-actions input[type="text"] {
  background: var(--bg-alt); color: var(--texto); border: 1px solid var(--surface-2);
  padding: 7px 10px; border-radius: 6px; font-size: 13px;
}
.ds-actions select:focus,
.ds-actions input[type="text"]:focus {
  outline: 2px solid var(--acento-linea); border-color: var(--acento-claro);
}

/* Error de formulario que no pertenece a un campo: elegir las dos órdenes. */
.diag-error{
  margin:0 0 14px; padding:11px 14px; border-radius:var(--r-md);
  background:var(--alerta-suave); border:1px solid var(--alerta-linea);
  color:var(--alerta); font-size:13.5px; line-height:1.5;
}