/* Bugito · banco de pruebas del Creador de incidencias (DCL-5da4653d859552490fd5ae1d).
   Player virtual a la izquierda, Bugito (la nube de Admirito con piel de diablillo) a la derecha.
   Reutiliza las variables de plano.css y los pasos .inc-steps de plano-incidencias.css (copiados aquí). */
.bugito-banco{--bug:#e2302e;--bug-ink:#ffb4a8;--bug-deep:#3a0b0d}
.bugito-banco .eyebrow{color:var(--bug-ink)}
.bb-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:16px;align-items:start}
.bb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.bb-head h2{margin:0;font-size:16px;letter-spacing:-.01em;flex:1 1 auto;min-width:0}
.bb-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;font:600 11px/1.3 ui-monospace,Menlo,monospace;color:var(--mut);background:var(--card2);white-space:nowrap}
.bb-estado{color:var(--bug-ink);border-color:rgba(226,48,46,.55);background:rgba(58,11,13,.6)}
.bb-estado:empty{display:none}
.bb-mini{border:1px solid var(--line);background:var(--card2);color:var(--mut);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600}
.bb-mini:hover{color:var(--ink);border-color:var(--bug)}
/* La pantalla: un monitor 16:9 con su bisel. */
.bb-tv{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 6px #0b1215,0 0 0 8px #263338,0 22px 60px rgba(0,0,0,.55)}
.bb-tv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
/* Player en pausa (pestaña oculta o 5 min sin actividad): el iframe se descarga y no escribe /signage/now. */
.bb-pausa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;
  background:rgba(6,14,18,.92);color:var(--ink);font-size:14px;line-height:1.4}
.bb-pausa[hidden]{display:none}
.bb-pausa p{margin:0;max-width:440px;color:var(--mut)}
.bb-pausa button{min-height:44px;padding:8px 22px;border-radius:10px;border:1px solid rgba(136,255,170,.6);background:#1d3a26;color:var(--ink);font-weight:800;font-size:14px}
.bb-pausa button:hover,.bb-pausa button:focus-visible{border-color:#88ffaa;outline:none}
.bb-vivo{margin:14px 0 6px;color:var(--mut);font-size:13px;line-height:1.45;min-height:1.45em}
.bb-detectores{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}
.bb-detectores li{border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--card2);font-size:12px;line-height:1.35;color:var(--mut);min-width:0;overflow-wrap:anywhere}
.bb-detectores li b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}
.bb-detectores li.fallo{border-color:rgba(255,109,109,.65)}
.bb-detectores li.fallo b::after{content:" · ✖";color:var(--err)}
.bb-detectores li.casa b::after{content:" · ✓";color:#88ffaa}
.bb-detectores li a{color:var(--bug-ink);text-decoration:underline}
/* Bugito */
.bb-bugito{border-color:rgba(226,48,46,.45);background:linear-gradient(180deg,rgba(58,11,13,.55),var(--card) 46%)}
.bb-cara{position:relative;height:clamp(280px,46vh,440px);border-radius:12px;overflow:hidden;background:#0b0405;border:1px solid rgba(226,48,46,.35)}
.bb-cara iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b0405}
.bb-cara[hidden]{display:none}
.bb-menu{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:12px 0 6px}
.bb-fault-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:6px}
.bb-menu-title{grid-column:1/-1;margin:0;color:var(--mut);font:700 11px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.bb-menu button,.bb-normal{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid rgba(226,48,46,.55);background:rgba(58,11,13,.5);color:var(--ink);
  border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700;text-align:left;line-height:1.2}
.bb-menu button .ico{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--bug);color:#fff;font-size:14px}
.bb-menu button:hover,.bb-menu button:focus-visible{background:var(--bug);border-color:var(--bug);outline:none}
.bb-menu button:hover .ico{background:#170607}
.bb-menu button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--bug-ink)}
.bb-menu button.pre{box-shadow:0 0 0 2px var(--bug-ink)}
.bb-menu button.bb-remove{justify-content:center;border-color:rgba(136,255,170,.45);background:var(--card2);text-align:center}
.bb-menu button.bb-remove:hover,.bb-menu button.bb-remove:focus-visible{background:#1d3a26;border-color:#88ffaa}
.bb-menu button:focus-visible{outline:2px solid var(--bug-ink);outline-offset:2px}
.bb-normal{width:100%;justify-content:center;border-color:rgba(136,255,170,.45);background:var(--card2)}
.bb-normal:hover,.bb-normal:focus-visible{background:#1d3a26;border-color:#88ffaa;outline:none}
.bb-menu button:disabled,.bb-normal:disabled{opacity:.45;cursor:not-allowed}
.bb-pasos{margin:10px 0 0}
.bb-status{margin:8px 0 0;font-size:12.5px;color:var(--mut);min-height:1.3em}
.bb-status.err{color:var(--err)}
.bb-note{margin:8px 0 0;color:var(--mut);font-size:11.5px;line-height:1.4}
/* Pasos (mismo aspecto que el ▤ Creador de incidencias del plano). */
.inc-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:paso;font-size:11.5px;line-height:1.35}
.inc-steps[hidden]{display:none}
.inc-steps li{counter-increment:paso;padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--card2);color:var(--mut);overflow-wrap:anywhere}
.inc-steps li::before{content:counter(paso) ". ";font:700 10.5px/1 ui-monospace,Menlo,monospace}
.inc-steps li.ok{border-color:rgba(136,255,170,.55);color:var(--ink)}
.inc-steps li.ok::before{content:"✓ ";color:#88ffaa}
.inc-steps li.err{border-color:rgba(255,109,109,.55);color:var(--ink)}
.inc-steps li.err::before{content:"✖ ";color:var(--err)}
.inc-steps small{font-size:11px;color:var(--mut)}
.inc-steps a{color:var(--bug-ink)}
/* Bugito oculto (/bugito o el botón): el player ocupa todo el ancho. */
.bugito-banco.sin-bugito .bb-cara{display:none}
@media (max-width:720px){
  .bb-grid{grid-template-columns:minmax(0,1fr)}
  .bb-cara{height:clamp(240px,38vh,320px)}
}
@media (max-width:420px){ .bb-menu{grid-template-columns:minmax(0,1fr)} }

/* Objetivo acotado: proyecto · circuito · dispositivo (Opción A, laboratorio). */
.bb-objetivo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.bb-objetivo[hidden]{display:none}
.bb-objetivo-etq{font:800 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.bb-objetivo-campo{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.bb-objetivo-campo select{font:600 12.5px/1.3 inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 8px;max-width:min(60vw,320px)}
.bb-objetivo-campo select:disabled{opacity:.5}
.bb-objetivo-bc{flex:1 1 100%;font:600 12px/1.35 inherit;color:var(--ok,#7fe3a1)}
.bb-objetivo-nota{flex:1 1 100%;margin:0;color:var(--mut);font-size:11px;line-height:1.4}

/* Opción B · dispositivo real (superusuario con login de owner). */
.bb-super{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card2);padding:0 12px}
.bb-super>summary{cursor:pointer;padding:10px 0;font:800 11px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--warn,#f0a35e);list-style:none}
.bb-super>summary::-webkit-details-marker{display:none}
.bb-super>summary::before{content:'⚠ ';opacity:.8}
.bb-super-intro{margin:0 0 8px;color:var(--mut);font-size:11.5px;line-height:1.4}
.bb-super-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.bb-super-quien{font-size:12px;color:var(--ok,#7fe3a1);font-weight:600}
.bb-super-sel{margin:0 0 8px;color:var(--mut);font-size:12px}
.bb-super-sel select{font:600 12.5px/1.3 inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 8px;max-width:min(70vw,360px)}
.bb-super:not([data-on="1"]) .bb-super-sel,.bb-super:not([data-on="1"]) #bb-super-salir{display:none}
.bb-super-banner{margin:4px 0 10px;padding:8px 10px;border-radius:8px;background:rgba(240,80,60,.14);border:1px solid rgba(240,80,60,.5);color:#ffb3a6;font:700 12px/1.35 inherit}
.bb-real-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8%;background:rgba(10,10,12,.82);color:#ffd9d0;font:600 14px/1.5 inherit;border:2px dashed rgba(240,80,60,.6);border-radius:inherit}

/* Supervisor en vivo (Morfeo, 18-oct-2026): lo que ve la Insta360 del MacMini y su veredicto tras cada orden. */
.bb-supervisor{margin:0 0 16px;border-color:rgba(127,227,161,.4)}
.bb-sv-estado[data-estado="encendida"]{color:#88ffaa;border-color:rgba(136,255,170,.55)}
.bb-sv-estado[data-estado="apagada"]{color:var(--bug-ink);border-color:rgba(226,48,46,.6);background:rgba(58,11,13,.6)}
.bb-sv-estado[data-estado="sin-dato"],.bb-sv-estado[data-estado="sin-senal"]{color:var(--warn,#f0a35e);border-color:rgba(240,163,94,.5)}
.bb-supervisor .bb-head a.bb-mini{text-decoration:none}
.bb-sv-cuerpo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"foto datos cara";gap:12px 16px;align-items:start}
.bb-sv-foto{grid-area:foto}.bb-sv-datos{grid-area:datos}
/* La cara del Supervisor tiene su casilla en la rejilla: nunca va encima de la foto, los datos ni el banco. */
.bb-sv-cara{grid-area:cara;position:relative;width:200px;height:224px;border-radius:12px;overflow:hidden;background:#04110f;border:1px solid rgba(127,227,161,.35)}
/* 4 px dentro: el iframe (se compone aparte) nunca toca las esquinas redondeadas, así no se recorta.
   Con tamaño explícito: un iframe absoluto no se estira con inset, se queda en 300×150. */
.bb-sv-cara iframe{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border:0;background:transparent}
.bb-sv-foto{margin:0;display:grid;gap:4px;justify-items:start}
.bb-sv-foto img{display:block;width:232px;max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:#000;image-rendering:pixelated}
.bb-sv-foto img[hidden]{display:none}
.bb-sv-foto img[data-vieja="1"]{opacity:.45;filter:grayscale(1)}
.bb-sv-foto figcaption{color:var(--mut);font-size:11px;line-height:1.35;max-width:232px}
.bb-sv-datos{min-width:0;display:grid;gap:6px}
.bb-sv-datos p{margin:0}
.bb-sv-objetivo{font:700 12px/1.35 ui-monospace,Menlo,monospace;color:var(--ink)}
.bb-sv-lectura{color:var(--mut);font-size:12.5px;min-height:1.3em}
.bb-sv-incidencias{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;color:var(--mut)}
.bb-sv-incidencias a,.bb-sv-veredicto a{color:var(--bug-ink);text-decoration:underline;font-weight:700}
.bb-sv-veredicto{font-size:13px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.bb-sv-veredicto:empty{display:none}
.bb-sv-veredicto[data-estado]{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card2)}
.bb-sv-veredicto[data-estado="visto"]{border-color:rgba(136,255,170,.55)}
.bb-sv-veredicto[data-estado="no-visto"],.bb-sv-veredicto[data-estado="sin-senal"],.bb-sv-veredicto[data-estado="sin-dato"],.bb-sv-veredicto[data-estado="sin-nueva"]{border-color:rgba(240,163,94,.55)}
@media (max-width:900px){
  .bb-sv-cuerpo{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"foto datos" "cara datos"}
  .bb-sv-cara{width:min(232px,100%)}
}
/* Móvil: la cara en su propia fila a todo el ancho, para que se lea su bocadillo. */
@media (max-width:560px){
  .bb-sv-cuerpo{grid-template-columns:minmax(0,1fr);grid-template-areas:"foto" "cara" "datos"}
  .bb-sv-cara{width:100%;height:200px}
}