/* ==========================================================================
   Central Técnica — portada do protótipo "Central Técnica Cardinal.dc.html".
   O protótipo é todo estilo inline; as telas mantêm esse estilo inline (fidelidade) e este arquivo só traz o que
   inline não alcança: base, scrollbar, keyframes, hover e o recolhimento do trilho em telas estreitas.
   Tokens de cor (--bg, --panel, --acc, --rail…) vêm de app.css ([data-theme="dark|light"]) — são os mesmos do protótipo.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.ct, .ct * { box-sizing: border-box; }
.ct { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; display: flex; }
.ct a { color: var(--acc); text-decoration: none; }
.ct a:hover { color: var(--ink); text-decoration: underline; }
.ct input, .ct select, .ct button, .ct textarea { font: inherit; color: inherit; }
.ct button { cursor: pointer; }
.ct button:disabled { cursor: not-allowed; }
.ct pre { margin: 0; }
.ct h1, .ct h2, .ct h3 { letter-spacing: normal; }
.ct ::-webkit-scrollbar { width: 9px; height: 9px; }
.ct ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.ct ::-webkit-scrollbar-track { background: transparent; }
.ct aside ::-webkit-scrollbar-thumb { background: var(--rail-line); background-clip: padding-box; }
.ct input::placeholder, .ct textarea::placeholder { color: var(--ink3); }
.ct select option { background: var(--panel); color: var(--ink); }

@keyframes cdBlip { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* hover (o protótipo usa o atributo style-hover) */
.ct .h-p2:hover { background: var(--panel2) !important; }
.ct .h-rail:hover { background: var(--rail-hov) !important; }
.ct .h-acc:hover { border-color: var(--acc) !important; color: var(--acc) !important; }
.ct .h-accb:hover { border-color: var(--acc) !important; }
.ct .h-neg:hover { border-color: var(--neg) !important; color: var(--neg) !important; }
.ct .h-railacc:hover { border-color: var(--rail-acc) !important; }
.ct .h-ink:hover { color: var(--ink) !important; }

/* trilho x seletor em telas estreitas (< 820 px, como o protótipo) */
.ct .ct-navsel { display: none; }
@media (max-width: 819px) {
  .ct .ct-aside { display: none !important; }
  .ct .ct-navsel { display: block; }
}

/* toggle de recurso (Recursos) */
.ct .ct-toggle { width: 40px; height: 22px; border-radius: 11px; border: none; position: relative; flex: none; }
.ct .ct-toggle > span { position: absolute; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }

/* tela de acesso negado (sem formulário de login) */
.ct-denied { min-height: 100vh; width: 100%; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.ct-denied > div { max-width: 420px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }