/*
═══════════════════════════════════════════════════════════════
SOLSEC v5.0 — Design System
Solidy Seguranca — Central de Monitoramento Veicular
═══════════════════════════════════════════════════════════════
*/

:root {
  --bg-principal: #0a1120;
  --bg-superficie: #0e1729;
  --bg-cartao: #111d32;
  --bg-cartao-2: #152240;
  --bg-elevado: #1a2a4a;

  --borda: #1e3050;
  --borda-brilho: #2a4060;
  --borda-ativa: #d4a840;

  --ouro: #d4a840;
  --ouro-claro: #e8c860;
  --ouro-escuro: #b08830;
  --ouro-dim: rgba(212, 168, 64, .10);
  --ouro-glow: rgba(212, 168, 64, .22);

  --prata: #8a95a8;
  --prata-claro: #c0c8d4;

  --ciano: #38bdf8;
  --ciano-dim: rgba(56, 189, 248, .10);
  --verde: #22c55e;
  --verde-dim: rgba(34, 197, 94, .10);
  --vermelho: #ef4444;
  --vermelho-dim: rgba(239, 68, 68, .10);
  --laranja: #f97316;
  --roxo: #a78bfa;

  --texto: #94a3b8;
  --texto-brilho: #e2e8f0;
  --texto-mudo: #475569;
  --texto-titulo: #cbd5e1;

  --placa-bg: #e8edf5;
  --placa-borda: #1e3a8a;
  --placa-texto: #0f172a;

  --vidro: rgba(14, 23, 41, .80);
  --vidro-borda: rgba(30, 48, 80, .5);
  --vidro-blur: 16px;

  --sombra-sm: 0 2px 8px rgba(0,0,0,.35);
  --sombra-md: 0 8px 24px rgba(0,0,0,.45);
  --sombra-lg: 0 16px 48px rgba(0,0,0,.55);
  --sombra-ouro: 0 0 20px var(--ouro-dim);

  --transicao: all .25s cubic-bezier(.4,0,.2,1);
  --transicao-rapida: all .15s ease;

  --fonte-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Rajdhani', 'Inter', sans-serif;
  --fonte-dados: 'JetBrains Mono', 'Fira Code', monospace;

  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 14px;
  --raio-xl: 20px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  background: var(--bg-principal);
  color: var(--texto);
  font-family: var(--fonte-ui);
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 15% 85%, rgba(212,168,64,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(56,189,248,.03) 0%, transparent 50%);
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--borda); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--ouro-escuro); }

a { color:var(--ouro); text-decoration:none; transition:var(--transicao-rapida); }
a:hover { color:var(--ouro-claro); }

/* ═══ ANIMACOES ═══ */
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes brilhar{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes deslizar-entrada{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes escala-entrada{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes piscar{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes borda-brilho{0%,100%{border-color:var(--borda)}50%{border-color:var(--ouro-escuro)}}
@keyframes badge-pulsar{0%,100%{box-shadow:0 0 0 0 var(--vermelho-dim)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 8px var(--ouro-dim)}50%{box-shadow:0 0 24px var(--ouro-glow)}}
@keyframes scan-line{0%{top:0}100%{top:100%}}
@keyframes counter-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══ CARTAO ═══ */
.cartao {
  background:var(--vidro); backdrop-filter:blur(var(--vidro-blur)); -webkit-backdrop-filter:blur(var(--vidro-blur));
  border:1px solid var(--vidro-borda); border-radius:var(--raio-md); transition:var(--transicao);
}
.cartao:hover { border-color:var(--borda-brilho); }

/* ═══ BADGES ═══ */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:.65rem; font-weight:600; letter-spacing:.5px; }
.badge-admin { background:var(--ouro-dim); color:var(--ouro); }
.badge-supervisor { background:var(--ciano-dim); color:var(--ciano); }
.badge-operador { background:var(--verde-dim); color:var(--verde); }
.badge-visualizador { background:rgba(100,116,139,.12); color:var(--texto-mudo); }
.badge-alerta { background:var(--vermelho-dim); color:var(--vermelho); animation:badge-pulsar 2s infinite; }
.badge-vip { background:rgba(167,139,250,.12); color:var(--roxo); }
.badge-online { background:var(--verde-dim); color:var(--verde); }
.badge-offline { background:rgba(100,116,139,.12); color:var(--texto-mudo); }

/* ═══ BOTOES ═══ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 18px; border:none; border-radius:var(--raio-sm);
  font-family:var(--fonte-ui); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:var(--transicao); white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn-primario { background:linear-gradient(135deg, var(--ouro), var(--ouro-escuro)); color:var(--bg-principal); box-shadow:var(--sombra-ouro); }
.btn-primario:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--ouro-glow); }
.btn-perigo { background:var(--vermelho); color:#fff; }
.btn-contorno { background:transparent; border:1px solid var(--borda); color:var(--texto); }
.btn-contorno:hover { border-color:var(--ouro); color:var(--ouro); }
.btn-fantasma { background:transparent; color:var(--texto-mudo); padding:4px 8px; }
.btn-fantasma:hover { color:var(--ouro); background:var(--ouro-dim); }
.btn-sm { padding:4px 10px; font-size:.7rem; }

/* ═══ CAMPOS ═══ */
.campo { margin-bottom:14px; }
.campo label { display:block; font-size:.6rem; font-weight:700; color:var(--prata); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:5px; }
.campo input, .campo select, .campo textarea {
  width:100%; background:var(--bg-principal); border:1px solid var(--borda);
  color:var(--texto-brilho); padding:10px 12px; border-radius:var(--raio-sm);
  font-size:.85rem; outline:none; transition:var(--transicao); font-family:var(--fonte-ui);
}
.campo input:focus, .campo select:focus { border-color:var(--ouro); box-shadow:0 0 12px var(--ouro-dim); }
.campo input::placeholder { color:var(--texto-mudo); }

/* ═══ TABELA ═══ */
.tabela { width:100%; border-collapse:collapse; }
.tabela th {
  text-align:left; padding:10px 14px; background:var(--bg-cartao-2);
  color:var(--ouro); font-family:var(--fonte-titulo); font-size:.7rem;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase; border-bottom:1px solid var(--borda);
}
.tabela td { padding:10px 14px; border-bottom:1px solid rgba(30,48,80,.3); font-size:.82rem; }
.tabela tr:hover { background:rgba(212,168,64,.03); }

/* ═══ MENSAGENS ═══ */
.msg { padding:10px 14px; border-radius:var(--raio-sm); margin-bottom:12px; font-size:.8rem; display:flex; align-items:center; gap:8px; animation:deslizar-entrada .3s ease-out; }
.msg-sucesso { background:var(--verde-dim); border:1px solid rgba(34,197,94,.25); color:var(--verde); }
.msg-erro { background:var(--vermelho-dim); border:1px solid rgba(239,68,68,.25); color:var(--vermelho); }
.msg-info { background:var(--ciano-dim); border:1px solid rgba(56,189,248,.25); color:var(--ciano); }

/* ═══ MODAL ═══ */
.modal-fundo { display:none; position:fixed; inset:0; background:rgba(5,10,20,.92); backdrop-filter:blur(16px); z-index:1000; align-items:center; justify-content:center; padding:16px; }
.modal-fundo.aberto { display:flex; }
.modal { background:var(--bg-cartao-2); border:1px solid var(--borda-brilho); border-radius:var(--raio-lg); width:100%; max-width:900px; max-height:90vh; overflow-y:auto; box-shadow:var(--sombra-lg); animation:escala-entrada .3s ease-out; }
.modal-cabecalho { padding:14px 18px; border-bottom:1px solid var(--borda); display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg, var(--bg-elevado), var(--bg-cartao-2)); position:sticky; top:0; z-index:10; }
.modal-cabecalho h2 { font-family:var(--fonte-titulo); font-size:.85rem; color:var(--ouro); letter-spacing:2px; display:flex; align-items:center; gap:10px; }
.modal-fechar { background:none; border:1px solid var(--borda); color:var(--texto-mudo); font-size:1rem; width:32px; height:32px; border-radius:var(--raio-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transicao); }
.modal-fechar:hover { background:var(--vermelho); color:#fff; border-color:var(--vermelho); }
.modal-corpo { padding:16px 18px; }

/* ═══ TOAST ═══ */
.toast-container { position:fixed; top:80px; right:16px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--vidro); backdrop-filter:blur(12px); border:1px solid var(--borda); border-radius:var(--raio-md); padding:12px 16px; min-width:280px; max-width:380px; display:flex; align-items:center; gap:10px; font-size:.8rem; animation:deslizar-entrada .3s ease-out; box-shadow:var(--sombra-md); }
.toast-alerta { border-left:3px solid var(--vermelho); }
.toast-sucesso { border-left:3px solid var(--verde); }
.toast-info { border-left:3px solid var(--ciano); }

/* ═══ PLACA ═══ */
.placa {
  display:inline-flex; align-items:center; position:relative;
  background:var(--placa-bg); color:var(--placa-texto);
  font-family:var(--fonte-dados); font-weight:800; letter-spacing:2px;
  padding:4px 12px; border-radius:5px; border:2px solid var(--placa-borda);
  box-shadow:0 2px 8px rgba(30,58,138,.2); cursor:pointer; transition:var(--transicao);
}
.placa:hover { transform:scale(1.04); box-shadow:0 4px 16px rgba(30,58,138,.3); }
.placa-grande { font-size:1.8rem; padding:10px 20px; border-width:3px; }
.placa-media { font-size:1rem; padding:5px 14px; }
.placa-pequena { font-size:.75rem; padding:2px 8px; border-width:1.5px; }

/* Confianca */
.confianca { font-family:var(--fonte-titulo); font-weight:700; }
.confianca-alta { color:var(--verde); }
.confianca-media { color:var(--laranja); }
.confianca-baixa { color:var(--vermelho); }

/* Dot */
.dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-online { background:var(--verde); box-shadow:0 0 8px var(--verde); animation:pulsar 2s infinite; }
.dot-offline { background:var(--texto-mudo); }
.dot-alerta { background:var(--vermelho); box-shadow:0 0 8px var(--vermelho); animation:piscar 1s infinite; }

/* Skeleton */
.skeleton { background:linear-gradient(90deg, var(--bg-cartao) 25%, var(--bg-cartao-2) 50%, var(--bg-cartao) 75%); background-size:400% 100%; animation:shimmer 1.5s ease-in-out infinite; border-radius:var(--raio-sm); }

.grade-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.separador { border:none; border-top:1px solid var(--borda); margin:12px 0; }

/* ═══ CARROSSEL AO VIVO ═══ */
.carousel-container {
  position:relative; background:var(--bg-cartao); border:1px solid var(--borda);
  border-radius:var(--raio-md); overflow:hidden; min-height:360px;
}
.carousel-container::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:5;
  background:linear-gradient(90deg, transparent, var(--ouro), var(--ouro-claro), var(--ouro), transparent);
  animation:brilhar 3s ease-in-out infinite;
}
.carousel-badge {
  position:absolute; top:10px; left:10px; z-index:10;
  background:var(--vermelho); color:#fff; font-family:var(--fonte-titulo);
  font-size:.6rem; padding:3px 10px; border-radius:3px;
  animation:piscar 1.5s infinite; font-weight:700; letter-spacing:2px;
  display:flex; align-items:center; gap:5px;
}
.carousel-badge .dot { width:5px; height:5px; background:#fff; }
.carousel-counter {
  position:absolute; top:10px; right:10px; z-index:10;
  background:rgba(0,0,0,.6); color:var(--prata-claro); font-family:var(--fonte-titulo);
  font-size:.6rem; padding:3px 10px; border-radius:3px; letter-spacing:1px;
}
.carousel-slide {
  display:none; animation:fade-in .6s ease; width:100%;
}
.carousel-slide.active { display:block; }
.carousel-images {
  display:grid; grid-template-columns:2fr 1fr; gap:0; min-height:240px;
}
.carousel-main-img {
  position:relative; background:#000; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.carousel-main-img img { width:100%; height:100%; max-height:280px; object-fit:cover; transition:transform .4s ease; cursor:zoom-in; }
.carousel-main-img:hover img { transform:scale(1.15); }
.carousel-main-img .img-label {
  position:absolute; bottom:0; left:0; right:0; padding:6px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  font-size:.5rem; color:var(--ouro); letter-spacing:2px;
  font-family:var(--fonte-titulo); font-weight:700;
}
.carousel-side {
  display:flex; flex-direction:column; gap:0;
}
.carousel-side-img {
  flex:1; position:relative; background:#060e1a; overflow:hidden;
  display:flex; align-items:center; justify-content:center; border-left:1px solid var(--borda);
}
.carousel-side-img:first-child { border-bottom:1px solid var(--borda); }
.carousel-side-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; cursor:zoom-in; }
.carousel-side-img:hover img { transform:scale(1.2); }
.carousel-side-img .img-label {
  position:absolute; bottom:0; left:0; right:0; padding:3px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  font-size:.45rem; color:var(--ouro-claro); letter-spacing:1.5px;
  font-family:var(--fonte-titulo); font-weight:700;
}
.carousel-info {
  padding:12px 16px; background:var(--bg-cartao-2); border-top:1px solid var(--borda);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.carousel-info .placa { font-size:1.3rem; }
.carousel-meta {
  flex:1; display:flex; flex-direction:column; gap:2px;
}
.carousel-meta-line {
  display:flex; align-items:center; gap:8px; font-size:.7rem; color:var(--prata);
}
.carousel-nav {
  display:flex; gap:6px;
}
.carousel-dot {
  width:8px; height:8px; border-radius:50%; background:var(--borda);
  cursor:pointer; transition:var(--transicao); border:none;
}
.carousel-dot.active { background:var(--ouro); box-shadow:0 0 8px var(--ouro-glow); transform:scale(1.3); }
.carousel-progress {
  position:absolute; bottom:0; left:0; height:3px; background:var(--ouro);
  transition:width .3s linear; z-index:5;
}

/* ═══ DOSSIÊ CARD v2 ═══ */
.dossie-v2 {
  background:var(--bg-superficie); border:1px solid var(--borda); border-radius:var(--raio-sm);
  padding:0; cursor:pointer; transition:var(--transicao); animation:slide-up .3s ease-out;
  display:flex; overflow:hidden; min-height:56px;
}
.dossie-v2:hover { border-color:var(--ouro); transform:translateX(3px); box-shadow:0 0 12px var(--ouro-dim); }
.dossie-v2.monitorada { border-color:var(--vermelho); }
.dossie-v2-thumb {
  width:80px; min-height:56px; flex-shrink:0; background:#060e1a;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.dossie-v2-thumb img { width:100%; height:100%; object-fit:cover; }
.dossie-v2-thumb .ph { font-size:1.5rem; }
.dossie-v2-body { flex:1; padding:8px 10px; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; overflow:hidden; }
.dossie-v2-top { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.dossie-v2-bottom { display:flex; align-items:center; gap:6px; font-size:.55rem; color:var(--texto-mudo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ═══ CAPTURA 3-LAYER ═══ */
.cap-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:6px; margin-bottom:10px;
  animation:slide-up .3s ease-out;
}
.cap-grid-item {
  position:relative; border-radius:var(--raio-sm); overflow:hidden;
  border:1px solid var(--borda); background:#000; cursor:pointer; transition:var(--transicao);
}
.cap-grid-item:hover { border-color:var(--ouro); transform:scale(1.02); }
.cap-grid-item img { width:100%; height:auto; display:block; min-height:50px; }
.cap-grid-item .layer-label {
  position:absolute; bottom:0; left:0; right:0; padding:4px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.9));
  font-size:.5rem; color:var(--ouro); letter-spacing:2px;
  font-family:var(--fonte-titulo); font-weight:700; text-align:center;
}
.cap-grid-item.main-frame { grid-row:span 2; }
.cap-grid-item.main-frame img { height:100%; object-fit:cover; }
.cap-meta-bar {
  background:var(--bg-cartao-2); border:1px solid var(--borda); border-radius:var(--raio-sm);
  padding:8px 12px; margin-bottom:8px; display:flex; justify-content:space-between;
  align-items:center; font-size:.7rem; flex-wrap:wrap; gap:6px;
}

/* ═══ MAPA ═══ */
.map-container {
  background:var(--bg-cartao); border:1px solid var(--borda); border-radius:var(--raio-md);
  overflow:hidden; position:relative;
}
.map-header {
  padding:8px 14px; background:var(--bg-cartao-2); border-bottom:1px solid var(--borda);
  font-family:var(--fonte-titulo); font-size:.55rem; color:var(--ouro);
  letter-spacing:2px; font-weight:700; display:flex; justify-content:space-between; align-items:center;
}
#mapa { height:200px; }
.leaflet-container { background:var(--bg-principal) !important; }

/* ═══ LIGHTBOX ═══ */
#lightbox {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.96);
  z-index:5000; align-items:center; justify-content:center;
  cursor:zoom-out; padding:20px;
}
#lightbox.aberto { display:flex; }
#lightbox img {
  max-width:95vw; max-height:92vh; border-radius:var(--raio-md);
  border:2px solid var(--ouro-escuro); box-shadow:var(--sombra-lg);
  animation:zoom-in .3s ease;
}
@keyframes zoom-in { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }

/* ═══ HOVER ZOOM EM DOSSIÊ ═══ */
.dossie-v2-thumb img { transition:transform .4s ease; cursor:zoom-in; }
.dossie-v2:hover .dossie-v2-thumb img { transform:scale(1.15); }

/* ═══ CROP DA PLACA (destaque) ═══ */
.plate-crop-wrap {
  display:flex; align-items:center; gap:8px; padding:4px;
}
.plate-crop-img {
  height:40px; border:2px solid var(--placa-borda); border-radius:4px;
  background:var(--placa-bg); cursor:zoom-in; transition:transform .3s ease;
  object-fit:contain;
}
.plate-crop-img:hover { transform:scale(1.8); z-index:20; position:relative; }

/* ═══ CAP-GRID HOVER ═══ */
.cap-grid-item img { transition:transform .4s ease; cursor:zoom-in; }
.cap-grid-item:hover img { transform:scale(1.1); }

@media (max-width:640px) { html{font-size:13px} .grade-form{grid-template-columns:1fr} .carousel-images{grid-template-columns:1fr} .carousel-side{flex-direction:row} .cap-grid{grid-template-columns:1fr} .cap-grid-item.main-frame{grid-row:auto} }