/* CSS do sistema Hinata GO Acesso — usa só os tokens do hinata-ui.css */
.demo-portao { margin-top: 28px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; max-width: 420px; }
.demo-portao .cam { position: relative; height: 90px; border: 2px solid var(--acao); border-radius: 10px; background: rgba(255,197,2,.06); overflow: hidden; }
.demo-portao .face { position: absolute; left: 50%; top: 50%; width: 44px; height: 56px; transform: translate(-50%,-50%); border: 2px solid #cfcfcf; border-radius: 50% 50% 45% 45%; }
.demo-portao .face span { position: absolute; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: #cfcfcf; } .demo-portao .face span:first-child { left: 10px; } .demo-portao .face span:last-child { right: 10px; }
.demo-portao .varredura { position: absolute; left: 0; right: 0; height: 2px; background: var(--acao-2); box-shadow: 0 0 10px var(--acao-2); animation: varrer 1.8s linear infinite; }
@keyframes varrer { from { top: 0 } to { top: 100% } }
.demo-portao.ok .cam { border-color: var(--ok); } .demo-portao.ok .varredura { display: none; } .demo-portao.ok .face { border-color: var(--ok); }
.demo-portao .portao { position: relative; height: 90px; background: rgba(255,255,255,.04); border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.demo-portao .folha { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, #2a2a2a 0 10px, #3a3a3a 10px 12px); transition: transform .9s ease; }
.demo-portao .folha.esq { left: 0; } .demo-portao .folha.dir { right: 0; }
.demo-portao.ok .folha.esq { transform: translateX(-92%); } .demo-portao.ok .folha.dir { transform: translateX(92%); }
.demo-portao .carro { position: absolute; left: -40px; top: 50%; transform: translateY(-50%); font-size: 34px; transition: left 2.2s ease-in; }
.demo-portao.passou .carro { left: 110%; }
.demo-portao .legenda { grid-column: 1 / -1; color: #9a9a9a; letter-spacing: .14em; } .demo-portao.ok .legenda { color: var(--ok); }

/* Painel */
.lista-eventos { display: grid; gap: 8px; }
.evento { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); }
.evento .mini { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--superficie-2); display: grid; place-items: center; font-size: 20px; }
.evento .nome { font-weight: 600; } .evento .sub { color: var(--tinta-2); font-size: 13px; }
.evento .hora { font-family: var(--fonte-mono); font-size: 12px; color: var(--tinta-2); text-align: right; }
.serie { display: flex; gap: 8px; align-items: flex-end; height: 110px; margin-top: 8px; }
.serie .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--fonte-mono); font-size: 11px; color: var(--tinta-2); }
.serie .col i { display: block; width: 100%; background: var(--acao); border-radius: 4px 4px 0 0; min-height: 2px; }
.foto-pessoa { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--superficie-2); }
.foto-grande { width: 100%; max-width: 480px; border-radius: 10px; border: 1px solid var(--borda); }
.ferramentas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ferramentas input, .ferramentas select { width: auto; min-width: 180px; }
.form-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.form-grade .c12 { grid-column: span 12; } .form-grade .c6 { grid-column: span 6; } .form-grade .c4 { grid-column: span 4; } .form-grade .c3 { grid-column: span 3; } .form-grade .c8 { grid-column: span 8; } .form-grade .c2 { grid-column: span 2; }
@media (max-width: 760px) { .form-grade > * { grid-column: span 12 !important; } }
.secao-titulo { font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin: 18px 0 8px; grid-column: span 12; }
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dias label { border: 1px solid var(--borda); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.dias label:has(input:checked) { background: rgba(255,197,2,.16); border-color: var(--acao); }
.captura { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.captura video, .captura canvas { width: 320px; height: 240px; border-radius: 10px; background: #000; display: block; }
.captura .quadro { position: relative; width: 320px; height: 240px; }
.captura .quadro canvas { position: absolute; left: 0; top: 0; background: transparent; }
.amostras { display: flex; gap: 8px; flex-wrap: wrap; }
.amostras .a { position: relative; } .amostras img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--borda); }
.amostras .a button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--erro); color: #fff; font-size: 11px; cursor: pointer; }
.horario-linha { display: grid; grid-template-columns: 110px 60px 1fr 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.guia-passo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.guia-passo .num { width: 30px; height: 30px; border-radius: 50%; background: var(--acao); color: #111; display: grid; place-items: center; font: 700 14px var(--fonte-titulo); flex: none; }
.guia-passo.feito .num { background: var(--ok); color: #fff; }
.matriz td input { margin: 0 auto; display: block; }
.codigo { font-family: var(--fonte-mono); font-size: 12px; background: var(--fundo); border: 1px solid var(--borda); padding: 8px 10px; border-radius: 6px; word-break: break-all; }
details summary { cursor: pointer; color: var(--tinta-2); font-size: 13px; }
pre.detalhes { font-family: var(--fonte-mono); font-size: 11px; color: var(--tinta-2); white-space: pre-wrap; margin: 4px 0 0; }
.canto .menu-botao { display: none; }
.cabecalho { padding-right: 110px; }
@media (max-width: 760px) { .canto .menu-botao { display: grid; } .captura { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grade[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .cabecalho { flex-direction: column; padding-right: 0; padding-top: 44px; } .cabecalho > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; } }