/* Portal 0.7 — Tela 12: Sentinela e Dashcam (carregado depois de portal-ux.css). Prefixo .sdc-.
   Cores sem variável no projeto, dadas pelo documento para esta tela, viram variáveis aqui. */
:root{
 --sdc-panel:#0f1d33;          /* painel de estado ligado (doc) */
 --sdc-panel-line:var(--ux-blue-line);
 --sdc-thumb:#0b0f16;
 --sdc-amber-fill:rgba(245,185,66,.28);
 --sdc-blue-10:rgba(47,128,255,.10);
}
.sdc{padding-bottom:var(--space-24)}
.sdc [hidden]{display:none!important}

/* ---- bloco de card: nome, apoio, legenda e controle embaixo ---- */
.sdc-block{padding:var(--space-16) 0;border-top:1px solid var(--ux-divider)}
.ux-card>.sdc-block:first-child,.ux-card>:first-child>.sdc-block:first-child,.ux-expand-body>.sdc-block:first-child{border-top:0}
.sdc-block-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:22px}
.sdc-block-name{font-size:15px;line-height:22px;color:var(--ux-text)}
.sdc-block-name:empty{display:none}
.sdc-block-control.is-gap{margin-top:var(--space-16)}
.sdc-block .ux-legend+.sdc-block-control{margin-top:0}
.sdc-block .ux-ruler-ends{margin-top:var(--space-4)}
.sdc-block.is-sub{padding-top:0;border-top:0}
.sdc-block.is-sub .ux-legend{margin-top:0}
.sdc .ux-help.is-warn{color:var(--ux-amber)}
.sdc-value{font-weight:500;color:var(--ux-text);margin-left:var(--space-4)}
.sdc-big{display:block;margin:0 0 var(--space-4);font:500 17px/22px var(--font-display);color:var(--ux-text)}
.sdc-sub-control{padding:0 0 var(--space-16)}
.sdc-block>.sdc-sub-control{padding:0;margin-top:var(--space-12)}
.sdc-sub-control>.ux-legend:first-child{margin-top:0}
.sdc-legend-after{margin:var(--space-8) 0 0}
.sdc-flush{margin-bottom:calc(var(--space-16) * -1)}
.sdc-saiba-text{margin:0 0 var(--space-12);font-size:15px;line-height:22px;color:var(--ux-label)}
/* Botões menos e mais com a caixa do valor ocupando o resto da largura (Bateria e tempo, O que dispara). */
.sdc-stepper{width:100%}
.sdc-stepper output{flex:1 1 auto;min-height:44px;display:grid;place-items:center;border:1px solid var(--ux-field-line);border-radius:var(--radius-8);background:var(--ux-field)}

/* ---- linhas de estado (ponto + texto) e notas com ícone ---- */
.sdc-status-line{display:flex;align-items:center;gap:var(--space-8);margin:0;font-size:12px;line-height:16px;color:var(--ux-muted)}
.sdc-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--ux-sky)}
.sdc-status-line.is-amber{color:var(--ux-amber)}
.sdc-status-line.is-amber .sdc-dot{background:var(--ux-amber)}
.sdc-status-line.is-under{margin-top:var(--space-8)}
.sdc-bridge{padding:0 0 var(--space-12)}
.sdc-bridge .ux-help{margin-top:var(--space-4)}
.sdc-note{display:flex;align-items:center;gap:var(--space-8);margin:var(--space-8) 0 0;font-size:12px;line-height:16px;color:var(--ux-muted)}
.sdc-note svg{flex:0 0 auto}
.sdc-under .ux-note{margin:var(--space-8) 0 0;font-size:12px;line-height:18px}
.sdc-under .ux-note.is-amber{color:var(--ux-amber)}

/* ---- 1. painel de estado ---- */
.sdc-panel{margin:0 0 var(--space-24);border:1px solid var(--sdc-panel-line);border-radius:var(--radius-16);background:var(--sdc-panel)}
.sdc-panel.is-off{background:var(--ux-card);border-color:var(--ux-card-line)}
.sdc-panel-top{display:flex;align-items:center;gap:var(--space-12);min-height:52px;padding:var(--space-4) var(--space-16)}
.sdc-panel-name{flex:1 1 auto;min-width:0;font:500 15px/22px var(--font-display);color:var(--ux-text)}
.sdc-panel-top .ux-switch{margin:-10px -2px -10px 0}
.sdc-panel-body{padding:var(--space-16);border-top:1px solid var(--sdc-panel-line)}
.sdc-panel.is-off .sdc-panel-body{border-top-color:var(--ux-card-line)}
.sdc-state{display:block;font:500 11px/16px var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ux-sky)}
.sdc-panel.is-off .sdc-state{color:var(--ux-muted)}
.sdc-panel.is-rec .sdc-state{color:var(--ux-red)}
.sdc-panel-title{margin:var(--space-8) 0 0;font:500 20px/28px var(--font-display);color:var(--ux-text)}
.sdc-panel-lead{margin:var(--space-4) 0 0;font-size:14px;line-height:20px;color:var(--ux-muted)}
.sdc-panel-lead.is-amber{color:var(--ux-amber)}
.sdc-reduced{display:flex;align-items:center;gap:var(--space-8);width:100%;min-height:44px;margin:var(--space-8) 0 calc(var(--space-12) * -1);padding:0;border:0;background:none;color:var(--ux-amber);font:400 13px/18px var(--font-display);text-align:left;cursor:pointer}
.sdc-reduced svg{flex:0 0 auto}
.sdc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--sdc-panel-line)}
.sdc-num{min-width:0;padding:var(--space-12) var(--space-8);text-align:center;border-left:1px solid var(--sdc-panel-line)}
.sdc-num:first-child{border-left:0}
.sdc-num strong{display:block;font:500 17px/22px var(--font-display);color:var(--ux-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdc-num span{display:block;margin-top:var(--space-4);font-size:11px;line-height:16px;color:var(--ux-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- etiqueta com link à direita (Ver todos, Fechar, contadores) ---- */
.sdc .ux-label .ux-link{min-height:32px;margin:-8px 0;padding:0;font:400 13px var(--font-display);letter-spacing:0;text-transform:none}
.sdc .ux-label .sdc-fold-link svg{transform:rotate(180deg)}
.sdc-count{flex:0 0 auto;font:400 11px/16px var(--font-mono);letter-spacing:0;text-transform:none;color:var(--ux-muted)}
.sdc-shot-time{flex:0 0 auto;font:400 12px/16px var(--font-display);letter-spacing:0;text-transform:none;color:var(--ux-muted)}

/* ---- 2. recentes: cartões de 148 px que deslizam para o lado ---- */
.sdc-strip{display:flex;gap:var(--space-8);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--ux-side);margin:0 calc(var(--ux-side) * -1);padding:0 var(--ux-side) var(--space-4);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sdc-strip::-webkit-scrollbar{display:none}
.sdc-strip-loading{flex:0 0 148px;height:148px;border-radius:var(--radius-12);background:var(--ux-card);animation:ux-pulse 1.2s ease-in-out infinite}
.sdc-strip-empty{flex:1 1 auto;display:flex;align-items:center;gap:var(--space-12);min-height:56px;padding:var(--space-12) var(--space-16);border:1px solid var(--ux-card-line);border-radius:var(--radius-12);background:var(--ux-card);font-size:14px;line-height:20px;color:var(--ux-muted)}
.sdc-strip-empty svg{flex:0 0 auto;color:var(--ux-star)}
.sdc-card{flex:0 0 148px;width:148px;scroll-snap-align:start;border:1px solid var(--ux-card-line);border-radius:var(--radius-12);background:var(--ux-card);overflow:hidden}
.sdc-thumb{position:relative;height:88px;background:var(--sdc-thumb);overflow:hidden}
.sdc-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sdc-thumb.is-empty{display:grid;place-items:center;color:var(--ux-star)}
.sdc-card-foot{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-8) var(--space-4) var(--space-8) var(--space-8)}
.sdc-card-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.sdc-card-text>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdc-card-time{font-size:13px;line-height:18px;color:var(--ux-text)}
.sdc-card-sub{font-size:12px;line-height:16px;color:var(--ux-muted)}
.sdc-type{align-self:flex-start;max-width:100%;padding:0 6px;border-radius:4px;font:500 10px/16px var(--font-mono);letter-spacing:1px;text-transform:uppercase}
.sdc-type.is-amber{background:var(--ux-amber-deep);color:var(--ux-amber)}
.sdc-type.is-red{background:var(--ux-red-deep);color:var(--ux-red)}
.sdc-type.is-blue{background:var(--ux-sky-deep);color:var(--ux-sky)}
.sdc-play{flex:0 0 36px;width:36px;height:36px;min-height:36px;margin-top:2px;padding:0;border:0;border-radius:50%;background:var(--ux-blue-deep);color:var(--ux-blue-soft);display:grid;place-items:center;cursor:pointer;position:relative}
.sdc-play::after{content:"";position:absolute;inset:-4px}
.sdc-play svg path{fill:currentColor}
@media (min-width:1024px){.sdc-strip{margin:0;padding:0 0 var(--space-4);scrollbar-width:thin}}

/* ---- 3. quando: blocos lado a lado + card das chaves ---- */
.sdc-when{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--space-8)}
.sdc-when-block{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-12);border:1px solid var(--ux-card-line);border-radius:var(--radius-12);background:var(--ux-card);color:var(--ux-text);text-align:left;font:inherit;cursor:pointer}
.sdc-when-ico{width:32px;height:32px;margin-bottom:var(--space-4);display:grid;place-items:center;border-radius:var(--radius-8);border:1px solid var(--ux-control-line);background:var(--ux-control);color:var(--ux-label)}
.sdc-when-name{font-size:14px;line-height:20px;font-weight:500}
.sdc-when-sub{font-size:12px;line-height:16px;color:var(--ux-muted)}
.sdc-when-block[aria-checked="true"]{border-color:var(--ux-blue);background:var(--sdc-blue-10)}
.sdc-when-block[aria-checked="true"] .sdc-when-ico{border-color:var(--ux-blue);color:var(--ux-blue-soft);background:var(--ux-blue-deep)}
.sdc-when-card{margin-top:var(--space-8)}
.sdc-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-4)}
.sdc-day{min-width:0;min-height:44px;padding:0;border:1px solid var(--ux-control-line);border-radius:var(--radius-8);background:var(--ux-control);color:var(--ux-label);font:400 13px var(--font-display);cursor:pointer}
.sdc-day[aria-pressed="true"]{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff;font-weight:500}

/* ---- 5. restaurar padrão ---- */
.sdc-restore{display:flex;justify-content:center}
.sdc-restore-list{margin:var(--space-8) 0 0}
.sdc-restore-item{margin:var(--space-4) 0 0!important;font-size:14px!important;line-height:20px!important;color:var(--ux-muted)!important}
.sdc-restore-item strong{font-weight:500;color:var(--ux-text)}
.sdc-restore-amber{margin:var(--space-12) 0 0!important;font-size:12px!important;line-height:18px!important;color:var(--ux-amber)!important}

/* ---- carregando / erro ---- */
.sdc-loading{display:flex;flex-direction:column;gap:var(--space-16)}
.sdc-sk{border-radius:var(--radius-12);background:var(--ux-card);animation:ux-pulse 1.2s ease-in-out infinite}
.sdc-sk-head{height:28px;width:40%}
.sdc-sk-panel{height:200px}
.sdc-sk-row{height:64px}
.sdc-retry{margin-top:var(--space-16);max-width:240px}

/* ---- Armazenamento ---- */
.sdc-where-row{width:100%;min-height:64px;padding:var(--space-12) 0;display:flex;align-items:center;gap:var(--space-12);border:0;background:transparent;color:var(--ux-text);text-align:left;font:inherit;cursor:pointer}
.sdc-where-row .ux-row-name{flex:1 1 auto;min-width:0;padding:0}
.sdc-where-row .ux-row-name>span:first-child{display:block;font-size:15px;line-height:22px}
.sdc-swap{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--space-4);color:var(--ux-link);font-size:13px;line-height:20px}
.sdc-where-list{animation:sdc-open .2s ease-out}
.sdc-where-list .ux-choice-row:first-child{border-top:0}
@keyframes sdc-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sdc-pct{font-size:12px;line-height:16px;color:var(--ux-muted)}
.sdc-usebar{height:8px;margin-top:var(--space-8);border-radius:4px;background:var(--ux-control-line);overflow:hidden;pointer-events:none}
.sdc-usebar>span{display:block;height:100%;background:var(--ux-sky)}
.sdc-ret{padding-bottom:var(--space-4)}

/* ---- Imagem do vídeo ---- */
.sdc-summary{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);margin:0 0 var(--space-24)}
.sdc-summary .ux-row-name{padding:0}
.sdc-summary-title{display:block;font:500 15px/22px var(--font-display)}
.sdc-cams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);aspect-ratio:16/9;max-width:100%}
.sdc-cam{min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);border:1px solid var(--ux-control-line);border-radius:var(--radius-8);background:var(--ux-control);color:var(--ux-label);font:400 13px/18px var(--font-display);cursor:pointer}
.sdc-cam.is-sel{border:2px solid var(--ux-blue);color:var(--ux-text)}
.sdc-cam.is-on{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff;font-weight:500}
.sdc-cam-empty{color:var(--ux-placeholder)}
.sdc-arrow.is-down{transform:rotate(180deg)}
.sdc-arrow.is-left{transform:rotate(-90deg)}
.sdc-arrow.is-right{transform:rotate(90deg)}
.sdc-pick .ux-legend{margin-top:var(--space-12)}
.sdc-pick-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:var(--space-8)}
.sdc-usb{margin-top:var(--space-8)}
.ux-card+.sdc-usb{margin-top:var(--space-8)}
.sdc-usb-head{padding:var(--space-16) 0 var(--space-12)}
.sdc-usb-head .sdc-block-name{font-weight:500}
.sdc-usb .ux-choice-list .ux-choice-row:first-child{border-top:1px solid var(--ux-divider)}
.sdc-usb .ux-expand-body.is-deep{background:var(--ux-deeper)}
.sdc-auto .ux-switch-row{border-top:1px solid var(--ux-divider)}
.sdc-manual{padding-bottom:var(--space-12)}
.sdc-manual>.ux-legend:first-child{margin-top:0}

/* ---- Dados no vídeo ---- */
.sdc-prev-card{margin:0 0 var(--space-24)}
.sdc-prev{padding:var(--space-16) 0}
.sdc-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-8);overflow:hidden;background:#000}
.sdc-frame-cams{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:#000}
.sdc-frame-cams>span{background:linear-gradient(160deg,#1c2738,#121a27)}
.sdc-frame-cams.is-single{grid-template-columns:1fr;grid-template-rows:1fr}
.sdc-frame-cams.is-single>span:not(:first-child){display:none}
.sdc-band{position:absolute;left:0;right:0;padding:3px 4px;background:rgba(0,0,0,.82);color:#fff;font-family:var(--font-mono);font-size:9px;line-height:1.3;white-space:nowrap;overflow:hidden}
.sdc-band>span{display:inline-block}
.sdc-band.is-top{top:0}
.sdc-band.is-center{top:50%;transform:translateY(-50%)}
.sdc-band.is-bottom{bottom:0}
.sdc-prev-cap{display:block;margin-top:var(--space-8);font-size:12px;line-height:16px;color:var(--ux-muted)}
.sdc-prev-cut{display:block;margin-top:var(--space-4);font-size:12px;line-height:16px;color:var(--ux-amber)}
.sdc-extra{display:flex;align-items:center;gap:var(--space-12);min-height:52px;padding:var(--space-8) 0;border-top:1px solid var(--ux-divider)}
.sdc-extras>.sdc-extra:first-child{border-top:0}
.sdc-extra .ux-row-name{flex:1 1 auto;min-width:0;padding:0}
.sdc-extra .ux-row-name>span:first-child{display:block}
.sdc-x{flex:0 0 var(--ux-col);width:var(--ux-col);height:44px;min-height:44px;margin-right:-4px;padding:0;border:0;background:transparent;color:var(--ux-muted);display:grid;place-items:center end;cursor:pointer}
.sdc-add,.sdc-refresh{width:100%;min-height:52px;display:flex;align-items:center;gap:var(--space-12);padding:0;border:0;border-top:1px solid var(--ux-divider);background:transparent;color:var(--ux-link);font:500 15px var(--font-display);text-align:left;cursor:pointer}
.sdc-extras:empty+.sdc-add{border-top:0}
.sdc-add-text{flex:1 1 auto}
.sdc-add-col{flex:0 0 var(--ux-col);display:grid;place-items:center end}
.sdc-add:disabled{color:var(--ux-muted);cursor:default;opacity:.6}
.sdc-refresh{font:400 12px var(--font-display);color:var(--ux-link);min-height:48px}
.sdc-refresh>span:first-child{flex:1 1 auto}
.sdc-foot-note{margin-top:var(--space-24)!important;font-size:12px;line-height:18px}
.sdc-pick-note{margin:0 0 var(--space-16)}

/* ---- Áreas de detecção ---- */
.sdc-cam-dot{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--ux-amber);vertical-align:2px}
.ux-seg button[aria-checked="true"] .sdc-cam-dot{background:#fff}
.sdc-cam-legend{margin:var(--space-8) 0 0}
.sdc-draw-card{padding-top:var(--space-16)}
.sdc-stage{position:relative;aspect-ratio:16/9;border-radius:var(--radius-8);overflow:hidden;background:var(--ux-card-deep)}
.sdc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:manipulation}
.sdc-canvas:focus-visible{outline:2px solid var(--ux-focus);outline-offset:2px}
.sdc-skel{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-16);text-align:center;font-size:13px;line-height:20px;color:var(--ux-muted);pointer-events:none}
.sdc-skel.is-loading{background:var(--ux-control);animation:ux-pulse 1.2s ease-in-out infinite}
.sdc-skel.is-failed{background:var(--ux-card-deep)}
.sdc-draw-hint{margin-top:var(--space-12)!important}
.sdc-draw-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin:var(--space-16) 0}
.sdc-areas-empty{margin:0;padding:var(--space-16) 0;font-size:14px;line-height:20px;color:var(--ux-muted)}
.sdc-areas-legend{margin:var(--space-8) 0 0}
.sdc-soc{display:block;margin-top:var(--space-8);font-size:12px;line-height:16px;color:var(--ux-muted)}

.sdc-draw-actions button:disabled{opacity:.45;cursor:default}
.sdc-usb .ux-expand{border-top:1px solid var(--ux-divider)}
@media (min-width:1024px){
 .sdc-draw-actions .ux-primary,.sdc-draw-actions .ux-outline{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.sdc-where-list{animation:none}}
/* Passar o mouse: um tom mais claro e cursor de mão (nada importante depende disso). */
@media (hover:hover) and (pointer:fine){
 .sdc-when-block:hover:not([aria-checked="true"]),.sdc-cam:hover:not(.is-on),.sdc-day:hover:not([aria-pressed="true"]),.sdc-where-row:hover,.sdc-add:hover:not(:disabled),.sdc-refresh:hover,.sdc-x:hover,.sdc-reduced:hover{background-color:var(--ux-hover);cursor:pointer}
 .sdc-play:hover{background:var(--ux-blue);color:#fff}
}