/* =========================================================
   TECON ID - cores do modo claro e escuro
   Todas as telas usam estas variaveis (var(--nome)).
   ========================================================= */

:root, :root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #eef2f7;
  --padrao: rgba(15, 42, 74, .07);
  --card: #ffffff;
  --card-vidro: rgba(255, 255, 255, .88);
  --texto: #1d2433;
  --texto-forte: #0f2a4a;
  --suave: #5b6475;
  --rotulo: #3a4252;
  --borda: #c9cfd9;
  --linha: #e6e9ef;
  --campo: #ffffff;
  --chip: #e8edf4;
  --chip-texto: #3a4252;
  --primaria: #1f6feb;
  --link: #1f6feb;
  --topo: #0f2a4a;
  --menu: #163a63;
  --menu-texto: #cfe0f5;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08);
  --sombra-forte: 0 2px 10px rgba(0, 0, 0, .14);
  --ok-fundo: #e3f6e8;   --ok-texto: #1b5e20;
  --erro-fundo: #fde7e7; --erro-texto: #8e1c1c;
  --info-fundo: #e7effd; --info-texto: #1a4fa0;
  --alerta-fundo: #fff4d6; --alerta-texto: #7a5300; --alerta-borda: #f0c75e;
  --placa: #f1f3f6;
  --papel-de-parede: url("../img/predios-claro.svg");
  --vela: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(238,242,247,.92) 100%);
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0b1220;
  --padrao: rgba(160, 190, 255, .06);
  --card: #141d2e;
  --card-vidro: rgba(20, 29, 46, .88);
  --texto: #e3e9f3;
  --texto-forte: #ffffff;
  --suave: #95a1b6;
  --rotulo: #b7c2d4;
  --borda: #2c3a52;
  --linha: #222e44;
  --campo: #0f1828;
  --chip: #1f2b40;
  --chip-texto: #c4cfe0;
  --primaria: #3d84f5;
  --link: #6ea8ff;
  --topo: #070d19;
  --menu: #0e1830;
  --menu-texto: #b5c7e4;
  --sombra: 0 1px 3px rgba(0, 0, 0, .5);
  --sombra-forte: 0 2px 12px rgba(0, 0, 0, .6);
  --ok-fundo: #12331d;   --ok-texto: #8be0a4;
  --erro-fundo: #3a1517; --erro-texto: #ff9b9b;
  --info-fundo: #142a4d; --info-texto: #9cc3ff;
  --alerta-fundo: #3a2c0b; --alerta-texto: #ffd36b; --alerta-borda: #7a5d14;
  --placa: #1b2537;
  --papel-de-parede: url("../img/predios-escuro.svg");
  --vela: linear-gradient(180deg, rgba(11,18,32,0) 30%, rgba(11,18,32,.92) 100%);
}

/* Fundo de todas as paginas: pontinhos sutis que mudam de cor com o tema */
body {
  background-color: var(--fundo);
  background-image: radial-gradient(var(--padrao) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--texto);
  transition: background-color .25s, color .25s;
}

/* Logo da TECON ao lado do nome TECON ID */
.marca-tecon { display: inline-flex; align-items: center; gap: .4em; }
.marca-tecon img { height: 1.3em; width: auto; flex: 0 0 auto; display: block; }

/* Papel de parede (predios de dia / de noite) */
.papel-de-parede {
  background-image: var(--papel-de-parede);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative; isolation: isolate;
}
/* Com uma cor escolhida no 🎨, os prédios do papel de parede ganham o tom dela */
.papel-de-parede::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: var(--tinta, transparent); mix-blend-mode: color; }

/* Tela de entrada (login, primeiro acesso): papel de parede na tela toda */
body.tela-entrada {
  min-height: 100vh;
  background-image: var(--papel-de-parede);
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}
body.tela-entrada .card { background: var(--card-vidro); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Botao de trocar o tema */
.botao-tema {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  font-size: 15px !important;
  line-height: 1.2;
  cursor: pointer;
}
.botao-tema.flutuante {
  position: fixed; top: 14px; right: 14px; z-index: 20;
  background: var(--card-vidro) !important; color: var(--texto) !important;
  border-color: var(--borda) !important; box-shadow: var(--sombra);
}
:root[data-tema="escuro"] .icone-claro, :root:not([data-tema="escuro"]) .icone-escuro { display: none; }

/* ---------------------------------------------------------------- acessibilidade */

/* Tamanho da letra (botao Aa) */
:root[data-fonte="grande"] body { zoom: 1.15; }
:root[data-fonte="maior"] body { zoom: 1.32; }

/* Alto contraste: textos mais fortes, bordas visiveis, links sublinhados */
:root[data-contraste="alto"] {
  --suave: #2b2f38; --rotulo: #111; --texto: #000; --texto-forte: #000; --borda: #222; --linha: #555;
  --chip: #e6e6e6; --chip-texto: #000; --link: #0033cc; --primaria: #0033cc;
  --ok-texto: #003d12; --erro-texto: #7a0000; --alerta-texto: #4a3300; --info-texto: #00266b;
  --padrao: transparent;
}
:root[data-contraste="alto"][data-tema="escuro"] {
  --suave: #e8e8e8; --rotulo: #fff; --texto: #fff; --texto-forte: #fff; --borda: #fff; --linha: #aaa;
  --fundo: #000; --card: #0a0a0a; --campo: #000; --chip: #222; --chip-texto: #fff; --link: #7fc4ff; --primaria: #1c5fd6;
  --ok-texto: #8dffb0; --erro-texto: #ffb3b3; --alerta-texto: #ffe08a; --info-texto: #b3d6ff;
}
:root[data-contraste="alto"] a { text-decoration: underline !important; }
:root[data-contraste="alto"] .card, :root[data-contraste="alto"] input, :root[data-contraste="alto"] select,
:root[data-contraste="alto"] textarea { border: 2px solid var(--borda) !important; }
:root[data-contraste="alto"] .papel-de-parede { background-image: none !important; background: var(--card) !important; }
:root[data-contraste="alto"] body.tela-entrada { background-image: none !important; }

/* Foco bem visivel para quem usa teclado */
:focus-visible { outline: 3px solid #ffbf00 !important; outline-offset: 2px !important; border-radius: 4px; }

/* Link "pular para o conteudo" (aparece ao apertar Tab) */
.pular-conteudo { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #ffbf00; color: #000 !important;
  padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.pular-conteudo:focus { left: 8px; }

/* Menu de acessibilidade (Aa) */
.menu-acess { position: relative; display: inline-block; }
.menu-acess > summary { list-style: none; cursor: pointer; }
.menu-acess > summary::-webkit-details-marker { display: none; }
.menu-acess .caixa-acess { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); color: var(--texto);
  border-radius: 14px; box-shadow: var(--sombra-forte); padding: 12px; width: 230px; z-index: 70; border: 1px solid var(--linha); }
.caixa-acess b { display: block; font-size: 13px; margin-bottom: 8px; }
.caixa-acess .linha-acess { display: flex; gap: 6px; margin-bottom: 10px; }
.caixa-acess button { flex: 1; background: var(--chip) !important; color: var(--texto) !important; border-radius: 10px !important;
  padding: 8px !important; font-weight: 700; font-size: 14px !important; }
.caixa-acess .contraste-ligado { background: var(--primaria) !important; color: #fff !important; }
.caixa-acess a { font-size: 13px; color: var(--texto); }
.cores-acess { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 12px; }
.caixa-acess .cor-opcao { width: 32px; height: 32px; padding: 0 !important; border-radius: 50% !important; flex: none;
  border: 2px solid var(--linha) !important; display: grid; place-items: center; cursor: pointer; font-size: 14px !important;
  margin: 0; background: var(--chip); color: var(--texto); }
.caixa-acess .cor-opcao.cor-atual { outline: 3px solid var(--texto); outline-offset: 2px; }
.caixa-acess .cor-livre { position: relative; overflow: hidden;
  background: conic-gradient(#f44, #fb3, #4c4, #3bf, #66f, #d4d, #f44) !important; color: #fff; text-shadow: 0 0 3px #000; }
.caixa-acess .cor-livre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; }

/* Tess com imagens prontas: uma imagem por pose, troca com transição suave */
.tess-img { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 400 / 1280; }
.tess-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.tess-img .pose-padrao { opacity: 1; }
.tess-img.acenando .pose-padrao, .tess-img.feliz .pose-padrao, .tess-img.pensando .pose-padrao { opacity: 0; }
.tess-img.acenando .pose-acenando, .tess-img.feliz .pose-feliz, .tess-img.pensando .pose-pensando { opacity: 1; }
/* a pose nova só aparece depois que a antiga sumiu (nunca duas juntas) */
.tess-img:not(.acenando):not(.feliz):not(.pensando) .pose-padrao, .tess-img.acenando .pose-acenando, .tess-img.feliz .pose-feliz, .tess-img.pensando .pose-pensando { transition: opacity .16s ease .13s; }
.tess-img:not(.tess-busto) { transform-origin: 50% 100%; transition: transform .25s ease;
  animation: tess-respira 5s ease-in-out infinite; }
@keyframes tess-respira { 50% { scale: 1 1.006; } }
@keyframes tess-balanca { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
.tess-img:not(.tess-busto).acenando .pose-acenando, .tess-img:not(.tess-busto).feliz .pose-feliz, .tess-img:not(.tess-busto).pensando .pose-pensando { animation: tess-pop .34s cubic-bezier(.2,1.6,.5,1) .13s backwards; }
@keyframes tess-pop { 0% { transform: scale(.97); } 100% { transform: none; } }
.tess-palpebra { position: absolute; transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; border-radius: 50% 50% 45% 45%; }
.tess-palpebra::after { content: ""; position: absolute; left: 8%; right: 4%; bottom: 14%; height: 46%; border-bottom: 2px solid #2a160c; border-radius: 0 0 50% 50%; }
.tess-palpebra.pisca { animation: tess-pisca .19s ease-in-out; }
@keyframes tess-pisca { 0% { transform: scaleY(0); } 45%, 60% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .tess-img, .tess-img img { animation: none !important; } }
.tess-img.tess-busto { aspect-ratio: auto; overflow: hidden; border-radius: 50%; background: rgba(255,255,255,.12); }
.tess-img.tess-busto img { object-fit: cover; object-position: center; }
.tess-img.tess-busto img, .tess-img.tess-busto.acenando img, .tess-img.tess-busto.feliz img, .tess-img.tess-busto.pensando img { opacity: 1; }

/* Menus que abrem no cabecalho e na barra de navegacao */
details.suspenso { position: relative; }
details.suspenso > summary { list-style: none; cursor: pointer; }
details.suspenso > summary::-webkit-details-marker { display: none; }
.lista-suspensa { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--card); color: var(--texto);
  border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-forte); padding: 6px; z-index: 80;
  display: flex; flex-direction: column; }
.lista-suspensa.a-direita { left: auto; right: 0; }
.lista-suspensa a { color: var(--texto) !important; text-decoration: none; padding: 9px 12px; border-radius: 8px; font-size: 14px;
  white-space: nowrap; display: flex; gap: 8px; align-items: center; border: 0 !important; }
.lista-suspensa a:hover, .lista-suspensa a:focus-visible { background: var(--chip); }
.lista-suspensa a.atual { background: var(--primaria); color: #fff !important; }
.lista-suspensa hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 6px; }
.lista-suspensa .sair { color: #e04848 !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.flutuante-estatico { background: var(--card-vidro) !important; color: var(--texto) !important; border: 1px solid var(--borda) !important;
  box-shadow: var(--sombra); border-radius: 20px !important; padding: 4px 10px !important; font-size: 15px !important; cursor: pointer; }


/* =========================================================
   Toque futurista (HUD) em todas as telas de quem está logado.
   Grade de fundo, cartões com borda fina que brilha na cor do sistema, cantos de mira, números digitais.
   Tudo usa var(--primaria): acompanha a cor escolhida no 🎨. Alto contraste desliga os enfeites.
   ========================================================= */
:root { --fonte-hud: "Chakra Petch", "Rajdhani", ui-monospace, "Segoe UI", system-ui, sans-serif; }
body.hud { background-image:
    radial-gradient(ellipse 70% 50% at 50% -10%, color-mix(in srgb, var(--primaria) 18%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--primaria) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primaria) 7%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px; background-attachment: fixed; }
body.hud .card, body.hud .numeros a {
  border: 1px solid color-mix(in srgb, var(--primaria) 18%, var(--linha));
  background: linear-gradient(160deg, color-mix(in srgb, var(--primaria) 6%, var(--card)), var(--card) 55%); border-radius: 14px; }
:root[data-tema="escuro"] body.hud .card, :root[data-tema="escuro"] body.hud .numeros a {
  background: linear-gradient(160deg, color-mix(in srgb, var(--primaria) 10%, var(--card)), color-mix(in srgb, #000 15%, var(--card)) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.35); }
body.hud .card > h2:first-child, body.hud .card > .titulo h2 { font-family: var(--fonte-hud); letter-spacing: .6px; text-transform: uppercase; font-size: 16px; }
body.hud th { font-family: var(--fonte-hud); letter-spacing: 1px; color: color-mix(in srgb, var(--primaria) 55%, var(--suave)); }
body.hud h1 { font-family: var(--fonte-hud); letter-spacing: .4px; }
/* números grandes */
body.hud .numeros a { position: relative; transition: box-shadow .2s, transform .2s; }
body.hud .numeros b { font-family: var(--fonte-hud); font-size: 32px; font-weight: 700; letter-spacing: .5px; }
:root[data-tema="escuro"] body.hud .numeros b { text-shadow: 0 0 18px color-mix(in srgb, var(--primaria) 55%, transparent); }
body.hud .numeros a.alerta b { color: #ff5252; text-shadow: 0 0 16px rgba(255,82,82,.45); }
body.hud .numeros a::before, body.hud .numeros a::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: color-mix(in srgb, var(--primaria) 75%, transparent); border-style: solid; opacity: .8; transition: all .25s; }
body.hud .numeros a::before { top: 6px; left: 6px; border-width: 2px 0 0 2px; border-top-left-radius: 5px; }
body.hud .numeros a::after { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; border-bottom-right-radius: 5px; }
@media (hover: hover) {
  body.hud .numeros a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primaria) 50%, transparent), 0 8px 26px color-mix(in srgb, var(--primaria) 25%, transparent); }
  body.hud .numeros a:hover::before { top: 3px; left: 3px; } body.hud .numeros a:hover::after { bottom: 3px; right: 3px; }
}
/* faixa de topo das telas (.hero): borda que brilha + linhas de monitor + varredura */
body.hud .hero { position: relative; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--primaria) 35%, transparent); border-radius: 18px; }
body.hud .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primaria) 16%, transparent) 50%, transparent 100%) 0 -120px / 100% 120px no-repeat,
              linear-gradient(115deg, color-mix(in srgb, var(--primaria) 22%, transparent) 0%, transparent 45%),
              repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--primaria) 5%, transparent) 3px 4px);
  animation: hud-varrer 7s linear infinite; }
@keyframes hud-varrer { to { background-position: 0 calc(100% + 120px), 0 0, 0 0; } }
body.hud .hero h1 { text-shadow: 0 0 22px color-mix(in srgb, var(--primaria) 40%, transparent); }
body.hud .hero .botao, body.hud .hero button { backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--primaria) 35%, transparent); }
/* campos: brilho ao focar */
body.hud input:focus, body.hud select:focus, body.hud textarea:focus { outline: none;
  border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 28%, transparent); }
/* alto contraste e menos movimento */
:root[data-contraste="alto"] body.hud { background-image: none; }
:root[data-contraste="alto"] body.hud .hero::after, :root[data-contraste="alto"] body.hud .numeros a::before, :root[data-contraste="alto"] body.hud .numeros a::after { display: none; }
@media (prefers-reduced-motion: reduce) { body.hud .hero::after { animation: none; } }