*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:16px;color:#eee;font-family:Arial,sans-serif;background:radial-gradient(circle,#242424,#0d0d0d 60%,#030303)}
.app{width:min(1500px,98vw);margin:auto}
.cabecera{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px}
.cabecera h1{margin:0;letter-spacing:4px;color:#d8bd91}.cabecera p{margin:6px 0 0;color:#aaa}#estadoGlobal{color:#7cff9d;font-family:monospace}
.tv{padding:20px;border:9px solid #20160f;border-radius:30px;background:linear-gradient(145deg,#60452e,#2e2118);box-shadow:0 20px 60px #000b,inset 0 0 0 4px #ffffff0d}
.tv-frontal{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px;align-items:start}
.pantalla-marco{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;min-height:0;overflow:hidden;border:12px solid #171717;border-radius:12%/16%;background:#000;box-shadow:inset 0 0 55px #000f,inset 0 0 18px #78ffb41a,0 0 0 3px #75583d,0 0 34px #5aff9b29}
.pantalla-marco:after{content:"";pointer-events:none;position:absolute;z-index:5;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 44% 26%,#ffffff24,transparent 38%),radial-gradient(ellipse at center,transparent 48%,#0005 75%,#000b 100%);mix-blend-mode:screen}
canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;background:#000;filter:brightness(1.08) contrast(1.08) saturate(1.06)}
.crt{pointer-events:none;position:absolute;z-index:3;inset:0;opacity:.75;background:repeating-linear-gradient(to bottom,#ffffff0d 0 1px,#0002 2px 4px);mix-blend-mode:screen}
.barrido{pointer-events:none;position:absolute;z-index:2;left:0;right:0;top:-12%;height:10%;opacity:.15;background:linear-gradient(transparent,#d2ffe1b3,transparent);animation:barrido 5.5s linear infinite}@keyframes barrido{to{transform:translateY(1150%)}}
.panel{display:flex;flex-direction:column;gap:10px;padding:15px 13px;border:3px solid #80664d;border-radius:17px;background:linear-gradient(#27231f,#171411)}
.panel-principal{max-height:none;align-self:start}.marca{text-align:center;font-weight:bold;color:#d7bc92}.estado{min-height:90px;padding:9px;border:2px inset #4e4e4e;color:#74ff8d;background:#07120b;font:11px/1.45 monospace}
label{display:block;color:#d4c7b8;font-size:12px}label span{float:right;color:#8dffad;font-family:monospace}button,select,input[type=range]{width:100%}button,select{padding:8px;border:1px solid #8d7b64;border-radius:8px;color:#fff;background:#3a332b;cursor:pointer}.botones{display:grid;grid-template-columns:1fr 1fr;gap:7px}.check{display:flex;align-items:center;gap:7px}.check input{width:auto}
.barra{margin-top:14px;padding:11px;border-radius:10px;background:#0006}
.controles-inferiores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:15px}
.bloque-control{display:flex;flex-direction:column;gap:10px;min-width:0;padding:13px;border:1px solid #6e5b47;border-radius:12px;background:#17130f}
.ia-panel{border-color:#54725d;background:#07140d}.pareidolia-panel{border-color:#79664a;background:#151006}.subtitulo{text-align:center;color:#8dffad;font-size:12px;font-weight:bold;letter-spacing:1px}.estado-ia{padding:7px;border-radius:6px;color:#8dffad;background:#020804;font:11px/1.4 monospace}.ultima-deteccion{min-height:14px;color:#ffcf78;font:11px/1.4 monospace}.nota-metodo{color:#b9aa91;font:10px/1.35 monospace}
.aviso{min-height:22px;margin-top:8px;color:#ffcb75;text-align:center}
.boton-enlace{display:block;width:100%;padding:8px;border:1px solid #8d7b64;border-radius:8px;color:#fff;background:#3a332b;text-align:center;text-decoration:none;cursor:pointer}.boton-enlace:hover{background:#4a4035}
@media(max-width:1100px){.controles-inferiores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.cabecera{display:block}.tv-frontal{grid-template-columns:1fr}.panel-principal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.panel-principal .marca,.panel-principal .estado{grid-column:1/-1}.controles-inferiores{grid-template-columns:1fr}.pantalla-marco{aspect-ratio:16/9}}
@media(max-width:560px){body{padding:7px}.tv{padding:10px;border-width:6px}.panel-principal{grid-template-columns:1fr}.pantalla-marco{border-width:7px;border-radius:8%/12%}}

.grabacion-panel{
    border-color:#765043;
}
.estado-grabacion{
    color:#ffcf9a;
}
.grabando{
    border-color:#b45d4b !important;
    box-shadow:0 0 18px rgba(255,72,45,.22);
}
.grabando .subtitulo{
    color:#ff8b72;
}
#iniciarGrabacion{
    background:#583027;
}
#detenerGrabacion{
    background:#3b2824;
}

#pantalla{
    z-index:1;
}
/* Corrección v3.7.1:
   la capa de anotaciones debe ser transparente y no heredar
   el fondo negro ni los filtros del canvas principal. */

#pantalla{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
}

/* Versión 4.0 · Motor binaural Web Audio API */
.audio-panel{
    border-color:#526e78;
    background:linear-gradient(180deg,#07151a,#081014);
}
.audio-panel .subtitulo{
    color:#86e8ff;
}
.audio-activar{
    padding:8px;
    border:1px solid #42616b;
    border-radius:8px;
    background:#071d24;
}
.estado-audio{
    min-height:38px;
    color:#86e8ff;
    background:#02090c;
}
.audio-aviso{
    color:#b7ccd1;
}
.audio-activo{
    border-color:#61d6f0 !important;
    box-shadow:0 0 20px rgba(80,220,255,.18);
}
.audio-activo .subtitulo{
    color:#b2f3ff;
    text-shadow:0 0 10px rgba(80,220,255,.55);
}