/* rad-console.css — safety-net do console RAD.
 *
 * O app.css do lineone é um build Tailwind PURGADO (só as utilities que o próprio
 * template usou). A cor de marca `primary` (#4C4EE7) e suas variantes de opacidade
 * são as que mais arriscam faltar. Este arquivo garante essas classes usadas pelo
 * console, sem depender do purge. Carregado DEPOIS do app.css (Main.js IMPORT).
 * Cores da paleta lineone (primary indigo + sky). navy-*/slate-* vêm do app.css.
 */
.bg-primary { background-color: #4C4EE7 !important; }
.text-primary { color: #4C4EE7 !important; }
.border-primary { border-color: #4C4EE7 !important; }
.bg-primary\/10 { background-color: rgba(76, 78, 231, 0.10) !important; }
.bg-primary\/20 { background-color: rgba(76, 78, 231, 0.20) !important; }
.text-primary { color: #4C4EE7 !important; }
.hover\:opacity-90:hover { opacity: 0.9; }

/* trilho do toggle de auto-treino (knob posicionado por inline style) */
#rad-auto { flex: 0 0 auto; }
#rad-auto > span { pointer-events: none; }

/* pre/log: quebra de linha em telas estreitas */
#rad-log, pre { word-break: break-word; }

/* Mobile: o hamburger revela o icon-rail (no desktop md+ o rail já fica sempre
   visível via app.css); o .sidebar-panel (2ª barra) desliza junto. */
@media (max-width: 767px) {
  body.is-sidebar-open .main-sidebar { --tw-translate-x: 0; translate: 0 0 !important; }
}

/* Fix #2 — toggle/switch robusto (não depende de utilities Tailwind que o purge
   possa ter comido; o knob e o trilho têm tamanho/animação próprios). */
.rad-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem;
  border-radius: 999px; background: #cbd5e1; border: 0; padding: 0; cursor: pointer;
  flex: 0 0 auto; vertical-align: middle; transition: background-color .2s; }
:root[data-theme="dark"] .rad-switch, .dark .rad-switch { background: #3f4a63; }
.rad-switch.on { background: #4C4EE7 !important; }
.rad-switch > span { position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.rad-switch.on > span { transform: translateX(1.25rem); }

/* Fix #4 — o inner do .sidebar-panel recua pela largura do icon-rail (não sobrepõe) */
.sidebar-panel .rad-panel-inner { padding-left: var(--main-sidebar-width); }

/* Fix #1 — o purge do lineone comeu quase todos os .mb-*/.space-y-* (só mb-1/mt-1..4
   sobreviveram no app.css) → cards e seções ficavam COLADOS. Redefinição com a escala
   padrão do Tailwind (harmless p/ as que já existem; preenche as ausentes). */
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem}
.mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem}
.mt-0\.5{margin-top:.125rem} .mt-1\.5{margin-top:.375rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem}
.space-y-1>*+*{margin-top:.25rem} .space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem} .space-y-4>*+*{margin-top:1rem}
.gap-5{gap:1.25rem} .gap-6{gap:1.5rem}

/* ─────────────────────────────────────────────────────────────────────────
 * VISUAL POLISH (lineone) — patch de purge + componentes vanilla.
 * O app.css purgado (crm-analytics) NÃO trouxe estas utilities, mas o console
 * as usa. Escala padrão do Tailwind. (Confirmado ausentes por grep no app.css.)
 * ──────────────────────────────────────────────────────────────────────── */
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.capitalize{text-transform:capitalize}
.gap-1\.5{gap:.375rem}
.mt-auto{margin-top:auto}
.-mb-px{margin-bottom:-1px}
.col-span-full{grid-column:1 / -1}
.p-8{padding:2rem} .my-1\.5{margin-top:.375rem;margin-bottom:.375rem}
.text-\[11px\]{font-size:11px} .text-\[10px\]{font-size:10px} .text-\[\.72em\]{font-size:.72em}
.hover\:text-slate-600:hover{color:#475569} .hover\:opacity-80:hover{opacity:.8}
.dark .dark\:hover\:text-navy-100:hover{color:#c2c9d6}
/* Achados do review adversarial — utilities purgadas usadas pelo console/shell. */
.bg-slate-900{background-color:#0f172a} .bg-black{background-color:#000}
.min-h-screen{min-height:100vh}
.border-slate-100{border-color:#f1f5f9} .last\:border-0:last-child{border-width:0}
.w-4{width:1rem} .font-black{font-weight:900} .gap-0\.5{gap:.125rem}
.select-none{-webkit-user-select:none;user-select:none} .cursor-not-allowed{cursor:not-allowed}
.pl-1{padding-left:.25rem}
@media (min-width:768px){.md\:px-6{padding-inline:1.5rem}}
.dark .dark\:hover\:bg-navy-700:hover{background-color:#26334d}
.whitespace-pre-wrap{white-space:pre-wrap}
.max-h-64{max-height:16rem}
.tracking-wide{letter-spacing:.025em}
input.accent-indigo-500,input[type=checkbox]{accent-color:#4C4EE7}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(16,24,40,.06),0 1px 3px 0 rgba(16,24,40,.05)}
.dark .shadow-sm{box-shadow:none}

/* Spinner branded (lineone border-spinner) — usado no loading(). */
.rad-spinner{display:inline-block;width:2rem;height:2rem;border-radius:9999px;
  border:3px solid #4C4EE7;border-right-color:transparent;animation:rad-spin .7s linear infinite;vertical-align:middle}
.rad-spinner.sm{width:1rem;height:1rem;border-width:2px}
@keyframes rad-spin{to{transform:rotate(360deg)}}

/* Barra de progresso (lineone .progress) — trilho + preenchimento animado. */
.rad-progress{position:relative;display:flex;width:100%;height:.5rem;overflow:hidden;
  border-radius:9999px;background:#e9eef5}
.dark .rad-progress{background:#384766}
.rad-progress>span{display:block;height:100%;border-radius:9999px;background:#4C4EE7;
  transition:width .4s ease}
.rad-progress.indeterminate>span{width:40%!important;animation:rad-indet 1.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rad-indet{0%{margin-left:-40%}100%{margin-left:100%}}

/* ── Modal vanilla (port do components-modal, SEM Alpine) ──
 * Shell auto-contido (position/backdrop/z-index próprios, imune ao purge).
 * .show revela; JS vanilla dá toggle. Painel usa cor lineone (navy-700 dark). */
.rad-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;
  justify-content:center;padding:1.5rem 1rem}
.rad-modal.show{display:flex}
.rad-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.6);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.rad-modal-panel{position:relative;width:100%;max-width:32rem;max-height:88vh;overflow-y:auto;
  border-radius:.75rem;background:#fff;box-shadow:0 20px 50px -12px rgba(0,0,0,.35);
  animation:rad-pop .18s ease-out}
.dark .rad-modal-panel{background:#26334d}
@keyframes rad-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* Realce de linha clicável em tabelas (cursor-pointer + hover já via .is-hoverable). */
table.is-hoverable>tbody>tr{cursor:default}
table.is-hoverable>tbody>tr.is-clickable{cursor:pointer}

/* ── Toast (port do components-notification; substitui os alert()) ── */
.rad-toast-wrap{position:fixed;top:1rem;right:1rem;z-index:130;display:flex;
  flex-direction:column;gap:.5rem;max-width:22rem}
.rad-toast{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .9rem;border-radius:.6rem;
  background:#fff;color:#334155;box-shadow:0 10px 30px -8px rgba(0,0,0,.25);
  border:1px solid #e9eef5;font-size:.83rem;animation:rad-toast-in .22s ease-out}
.dark .rad-toast{background:#26334d;color:#c2c9d6;border-color:#313e59}
.rad-toast .rt-ico{flex:0 0 auto;width:1.25rem;height:1.25rem;display:flex;align-items:center;
  justify-content:center;border-radius:9999px;font-size:.7rem;margin-top:.05rem}
.rad-toast.success .rt-ico{background:rgba(16,185,129,.15);color:#10b981}
.rad-toast.error   .rt-ico{background:rgba(255,87,36,.15);color:#ff5724}
.rad-toast.info    .rt-ico{background:rgba(14,165,233,.15);color:#0ea5e9}
.rad-toast.leaving{animation:rad-toast-out .2s ease-in forwards}
@keyframes rad-toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes rad-toast-out{to{opacity:0;transform:translateX(16px)}}

/* Abas (components-tab): sublinhado ativo com transição suave. */
.rad-tab{position:relative;transition:color .18s}
.rad-tab:hover{color:#4C4EE7}

/* ─────────────────────────────────────────────────────────────────────────
 * ESTÚDIO DE TREINO (Fase 1) — player + timeline com marcadores IN/OUT.
 * Widget vanilla (imune ao purge); mapeia tempo↔frame via metadata.clip.fps.
 * ──────────────────────────────────────────────────────────────────────── */
/* Lista de clips (coluna esquerda) — linha clicável. */
.rad-est-clip{cursor:pointer;border:1px solid #e2e8f0;border-radius:.6rem;padding:.5rem .6rem;
  display:flex;gap:.6rem;align-items:center;transition:background-color .15s,border-color .15s}
.dark .rad-est-clip{border-color:#26334d}
.rad-est-clip:hover{background:#f1f5f9}
.dark .rad-est-clip:hover{background:#1e293b}
.rad-est-clip.active{border-color:#4C4EE7;background:rgba(76,78,231,.08)}
.rad-est-clip video,.rad-est-clip .rad-est-thumb{width:64px;height:44px;object-fit:cover;border-radius:.4rem;
  background:#000;flex:0 0 auto}
.rad-est-thumb{display:flex;align-items:center;justify-content:center;color:#64748b;font-size:.8rem}

/* Timeline (trilho + range selecionado + playhead + marcadores). */
.rad-tl{position:relative;height:1.5rem;border-radius:.5rem;background:#e2e8f0;cursor:pointer;
  margin:.25rem 0;user-select:none;touch-action:none}
.dark .rad-tl{background:#334155}
.rad-tl-range{position:absolute;top:0;bottom:0;background:rgba(76,78,231,.30);
  border-left:2px solid #4C4EE7;border-right:2px solid #4C4EE7;pointer-events:none}
.rad-tl-play{position:absolute;top:-2px;bottom:-2px;width:2px;background:#f43f5e;pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.rad-tl-play::after{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:9999px;
  background:#f43f5e;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.rad-tl-flag{position:absolute;top:0;bottom:0;width:0;pointer-events:none}
.rad-tl-flag.in{border-left:2px solid #10b981}
.rad-tl-flag.out{border-left:2px solid #f59e0b}
.rad-tl-flag span{position:absolute;top:-1.15rem;font-size:9px;font-weight:700;line-height:1;
  padding:1px 3px;border-radius:3px;color:#fff;white-space:nowrap;transform:translateX(-50%)}
.rad-tl-flag.in span{background:#10b981;left:0}
.rad-tl-flag.out span{background:#f59e0b;left:0}

/* Chip de frame monoespaçado. */
.rad-frame-chip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;padding:.15rem .5rem;border-radius:.4rem;background:#f1f5f9;color:#334155}
.dark .rad-frame-chip{background:#1e293b;color:#c2c9d6}

/* Estúdio — stage de zoom/pan + modo teatro + fullscreen (E1). */
.rad-est-stage{position:relative;overflow:hidden;background:#000;border-radius:.5rem;max-height:360px;
  display:flex;align-items:center;justify-content:center;touch-action:none}
.rad-est-stage.zoomed{cursor:grab}
.rad-est-stage.grabbing{cursor:grabbing}
.rad-est-video{max-width:100%;max-height:360px;display:block;transform-origin:center center;
  will-change:transform;transition:transform .05s linear}
/* modo teatro (como o "teatro" do YouTube): esconde a coluna de clips, o player ocupa a
   largura toda e o stage cresce. Seletor por #id vence o .grid/.lg:col-span do Tailwind. */
.rad-theater #rad-est-grid{display:block}
.rad-theater #rad-est-clipcol{display:none}
.rad-theater .rad-est-stage{max-height:78vh}
.rad-theater .rad-est-video{max-height:78vh}
/* fullscreen do stage: preenche a tela. */
.rad-est-stage:fullscreen{max-height:none;width:100vw;height:100vh;border-radius:0}
.rad-est-stage:fullscreen .rad-est-video{max-height:100vh;max-width:100vw}
/* overlay de boxes das FERRAMENTAS (E3) — canvas absoluto sobre o vídeo, sem capturar clique. */
.rad-est-overlay{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
/* overlay de SKELETON/mão/objeto (N2) — canvas read-only sob o de anotação (z:2),
   posicionado sobre o vídeo exibido; escondido no modo anotar. */
.rad-est-skel{position:absolute;left:0;top:0;pointer-events:none;z-index:2}
/* chips de CLASSE (G1) — seleção rápida (clique/tecla). Keycap + swatch + nome. */
.rad-cls-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;border-radius:.5rem;
  border:1px solid var(--rad-chip-bd,#e2e8f0);background:transparent;cursor:pointer;font-size:.8rem;line-height:1.1;
  color:#475569;transition:background .1s,border-color .1s}
.rad-cls-chip:hover{background:rgba(148,163,184,.12)}
.rad-cls-chip.active{border-color:var(--color-primary,#4C4EE7);background:rgba(76,78,231,.10);color:var(--color-primary,#4C4EE7);font-weight:500}
.rad-cls-key{display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 .2rem;
  border-radius:.25rem;background:rgba(100,116,139,.16);font:600 .65rem/1 ui-monospace,monospace;color:#64748b}
.rad-cls-chip.active .rad-cls-key{background:rgba(76,78,231,.18);color:var(--color-primary,#4C4EE7)}
.rad-cls-dot{width:.8rem;height:.8rem;border-radius:.2rem;flex:0 0 auto}
.dark .rad-cls-chip{border-color:#334155;color:#cbd5e1}
.dark .rad-cls-key{background:rgba(148,163,184,.18);color:#94a3b8}

/* Header OPACO — o app.css deixa o .header-container com 80% de alpha (#fffc) +
   backdrop-blur, então ao rolar o conteúdo vaza por trás do header fixo. Fundo
   sólido resolve (light + dark). !important vence o color-mix do tema. */
.header .header-container{background-color:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
:root[data-theme="dark"] .header .header-container,
.dark .header .header-container{background-color:#222e45 !important}