/* ═══════════════════════════════════════════════════════════
   IASOFTLAB Vision — app de detección en vivo
   Construye sobre los tokens de base.css.
   ═══════════════════════════════════════════════════════════ */

/* el atributo hidden tiene que ganarle a cualquier display de clase */
.va [hidden] { display: none !important; }

.va {
  --v-crit: var(--signal);
  --v-warn: #f5a623;
  --v-info: var(--acid);
  min-height: 100svh;
  display: flex; flex-direction: column;
}

/* ── barra superior ── */
.va-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 11, .85);
}
.va-brand { display: flex; align-items: center; gap: var(--s3); }
.va-brand__name { font-family: var(--mono); font-size: .8125rem; letter-spacing: .18em; }
.va-brand__name b { color: var(--acid); font-weight: 500; }

.va-status {
  margin-right: auto; display: inline-flex; align-items: center; gap: var(--s2);
  text-transform: none; letter-spacing: .04em; color: var(--bone-dim);
}
.va-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v-warn); animation: pulse 1.6s var(--ease) infinite; }
.va-status[data-state='ready'] .va-status__dot { background: var(--acid); animation: none; }
.va-status[data-state='live'] .va-status__dot { background: var(--signal); }
.va-status[data-state='error'] .va-status__dot { background: var(--signal); animation: none; }

/* ── layout ── */
.va-main {
  position: relative; z-index: 1; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s5); padding: var(--s5) var(--gutter);
  max-width: 1600px; width: 100%; margin: 0 auto;
}

/* ── escenario ── */
.va-stage {
  position: relative; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 40%, #12161a, #0a0c0e 75%);
  overflow: hidden; transition: box-shadow .3s var(--ease);
}
.va-stage.is-alert { box-shadow: 0 0 0 2px var(--v-crit), 0 0 30px rgba(255, 92, 53, .35); }
.va-stage.is-drawing .va-canvas { cursor: crosshair; }
.va-canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; }

.va-empty {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s3);
  text-align: center; padding: var(--s6);
}
.va-empty__title { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.va-empty__body { color: var(--muted); max-width: 30rem; margin: 0 auto; font-size: .9375rem; }

.va-error {
  position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4);
  padding: var(--s3) var(--s4); border: 1px solid var(--v-crit); border-radius: var(--radius);
  background: rgba(20, 8, 6, .92); color: #ffd9cf; font-size: .875rem; line-height: 1.5;
}
.va-hint {
  position: absolute; top: var(--s3); left: 50%; transform: translateX(-50%);
  padding: var(--s1) var(--s3); border-radius: 100px;
  background: var(--acid); color: var(--ink); white-space: nowrap;
}

/* fuentes: dentro del escenario (así el navegador no las pausa por "fuera de vista"),
   debajo del canvas y transparentes */
.va-src { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 0; }
.va-empty, .va-error, .va-hint { z-index: 2; }

.va-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.va-toolbar__sep { width: 1px; height: 24px; background: var(--line); margin: 0 var(--s1); }
.va-toolbar .btn[disabled] { opacity: .4; cursor: not-allowed; }
.va-toolbar .btn[disabled]::after { display: none; }
.va-toolbar .btn[aria-pressed='true'] { color: var(--ink); background: var(--acid); border-color: var(--acid); }

.va-hud {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3);
  margin: var(--s4) 0 0;
}
.va-hud div { border-top: 1px solid var(--line); padding-top: var(--s2); }
.va-hud dt { font-family: var(--mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.va-hud dd { margin: var(--s1) 0 0; font-family: var(--serif); font-size: 1.75rem; line-height: 1; }

/* ── panel ── */
.va-panel { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.va-block { border-top: 1px solid var(--line); padding-top: var(--s4); }
.va-block__title { color: var(--acid); margin: 0 0 var(--s3); font-weight: 400; font-size: .6875rem; }

.va-tabs { display: flex; gap: var(--s1); margin-bottom: var(--s3); }
.va-tab {
  flex: 1; background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2); font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bone-dim); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.va-tab:hover { color: var(--bone); }
.va-tab[aria-selected='true'] { background: var(--ink-4); color: var(--acid); border-color: var(--acid-dim); }

.va-label { display: block; font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.va-input {
  width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2) var(--s3); font-size: .875rem; color: var(--bone); outline: none;
}
.va-input:focus { border-color: var(--acid); }
.va-file { padding: var(--s2); font-size: .8125rem; }
.va-file::file-selector-button {
  margin-right: var(--s3); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-4); color: var(--bone); padding: var(--s1) var(--s3); cursor: pointer;
  font-family: var(--mono); font-size: .6875rem;
}
.va-help { color: var(--muted); font-size: .75rem; line-height: 1.55; margin-top: var(--s2); }
.va-help b { color: var(--bone-dim); font-weight: 500; }

.va-rules { border: 0; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s1); }
.va-rule {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.va-rule input[type='checkbox'] { accent-color: var(--acid); width: 16px; height: 16px; }
.va-rule__name { font-size: .875rem; }
.va-rule__name small { display: block; color: var(--muted); font-size: .6875rem; }
.va-rule__num {
  width: 64px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2px var(--s2); font-family: var(--mono); font-size: .75rem; color: var(--bone); text-align: right;
}
.va-rule__num:disabled { opacity: .35; }
.va-rule.is-off .va-rule__name { color: var(--muted); }
.va-rule__warn { grid-column: 2 / -1; color: var(--v-warn); font-size: .6875rem; }

.va-range { width: 100%; accent-color: var(--acid); }

.va-log__head { display: flex; justify-content: space-between; align-items: baseline; }
.va-switch { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: .6875rem; color: var(--bone-dim); cursor: pointer; }
.va-switch input { accent-color: var(--acid); }

.va-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); max-height: 340px; overflow-y: auto; }
.va-alert {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: center;
  padding: var(--s2); border: 1px solid var(--line-soft); border-left: 3px solid var(--v-info);
  border-radius: var(--radius); animation: vaIn .35s var(--ease-out) both;
}
@keyframes vaIn { from { opacity: 0; transform: translateY(-6px); } }
.va-alert--warn { border-left-color: var(--v-warn); }
.va-alert--crit { border-left-color: var(--v-crit); background: rgba(255, 92, 53, .05); }
.va-alert__thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 2px; background: var(--ink-4); display: block; }
.va-alert__label { font-size: .8125rem; line-height: 1.35; }
.va-alert__meta { display: block; font-family: var(--mono); font-size: .625rem; color: var(--muted); margin-top: 2px; }
.va-log__empty { color: var(--muted); font-size: .8125rem; }
.va-log__actions { display: flex; gap: var(--s4); margin-top: var(--s3); }

.va-privacy { color: var(--muted); text-transform: none; letter-spacing: .03em; line-height: 1.6; }
.va-privacy span { color: var(--acid); }

.va-note { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); }
.va-note summary { cursor: pointer; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; color: var(--bone-dim); }
.va-note p { color: var(--muted); font-size: .8125rem; line-height: 1.6; margin-top: var(--s3); }

/* ── responsive ── */
@media (max-width: 1000px) {
  .va-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .va-top { flex-wrap: wrap; gap: var(--s3); }
  .va-status { order: 3; width: 100%; }
  .va-hud { grid-template-columns: repeat(3, 1fr); }
  .va-hud dd { font-size: 1.375rem; }
}