/* =========================================
   1. DEFINIÇÕES GERAIS E RESET
   ========================================= */
:root {
    --cor-primaria-azul: #002D62;
    --cor-secundaria-laranja: #FF7F00;
    --cor-texto-principal: #333333;
    --fundo-claro: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--cor-texto-principal);
    background-color: var(--fundo-claro);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

h1 { font-size: 3em; font-weight: 700; margin-bottom: 0.5em; color: var(--cor-primaria-azul); }
p { font-size: 1.1em; margin-bottom: 1em; }

/* =========================================
   2. CABEÇALHO (HEADER)
   ========================================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5em 5%;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    position: relative;
}

.logo { display: flex; align-items: center; }

.logo img:hover { transform: scale(1.05); }

.nav a {
    text-decoration: none;
    color: var(--cor-texto-principal);
    margin-left: 25px;
    font-weight: 400;
    transition: color 0.3s;
}
.nav a:hover { color: var(--cor-secundaria-laranja); }

.btn-cta-principal {
    width: 280px;
    display: inline-block;
    background-color: var(--cor-secundaria-laranja);
    color: #FFF;
    padding: 1em 2em;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}
.btn-cta-principal:hover { background-color: #E66A00; transform: translateY(-2px); }

.btn-cta-nav {
    background-color: var(--cor-primaria-azul) !important;
    color: #FFF !important;
    padding: 0.5em 1.5em !important;
    border-radius: 3px;
    margin-left: 30px !important;
}
.btn-cta-nav:hover { background-color: var(--cor-secundaria-laranja) !important; }


.btn-cta-secundario {
    width: 280px;
    display:inline-block;
    border:2px solid #fff;
    color:#fff;
    padding:1em 2em;
    border-radius:5px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.btn-cta-secundario:hover {
    background:rgba(255,255,255,0.15);
}

.btn-cta-entrar {
    width: 280px;
    display: inline-block;
    background-color: var(--cor-primaria-azul);
    color: #FFF;
    padding: 1em 2em;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-cta-entrar:hover {
    background-color: var(--cor-secundaria-laranja);
    transform: translateY(-2px);
}

.link-esqueci {
    display: block;
    text-align: right;
    font-size: 0.9em;
    font-weight: 700;
    margin-top: 6px;
    text-decoration: none;
    color: var(--cor-primaria-azul);
}

.link-esqueci:hover {
    color: var(--cor-secundaria-laranja);
}


.page input{
    width:100%;
    padding:12px 14px;
    border:1px solid #dcdcdc;
    border-radius:6px;
    font-size:15px;
    margin-top:6px;
    margin-bottom:16px;
    transition:border 0.2s, box-shadow 0.2s;
}

.page input:focus{
    outline:none;
    border-color:#0B3A6F;
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.page label{
    font-size:14px;
    font-weight:600;
    color:#333;
}

.actions button{
    width:100%;
    padding:13px;
    border:none;
    border-radius:6px;
    background:#0B3A6F;
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.2s;
}

.actions button:hover{
    background:#E66A00;
}

.link-esqueci{
    display:block;
    text-align:right;
    font-size:14px;
    color:#0B3A6F;
    text-decoration:none;
    margin-top:-8px;
    margin-bottom:20px;
}

.link-esqueci:hover{
    text-decoration:underline;
}

/* --- Tooltip “Em desenvolvimento” com tema dark --- */
.tool-card[data-dev="true"] { position: relative; }

/* Balão */
.tool-card[data-dev="true"]::after {
  content: attr(data-dev-text);
  position: absolute;
  left: 12px;
  bottom: calc(100% + 10px);
  z-index: 30;
  background: rgba(17, 24, 39, .92);           /* gray-900 com transparência */
  color: #e5e7eb;                               /* gray-200 */
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid #334155;                    /* slate-700 */
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Triângulo */
.tool-card[data-dev="true"]::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: calc(100% + 6px);
  z-index: 29;
  border: 6px solid transparent;
  border-top-color: rgba(17, 24, 39, .92);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Mostrar ao passar o mouse ou focar via teclado */
.tool-card[data-dev="true"]:hover::after,
.tool-card[data-dev="true"]:hover::before,
.tool-card[data-dev="true"]:focus-visible::after,
.tool-card[data-dev="true"]:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

/* Tooltip interativo */
.tool-card {
  position: relative; /* necessário para o tooltip */
}

.tool-card .dev-badge {
  position: absolute;
  top: -10px;       /* aparece acima do card */
  right: 10px;
  background: #f59e0b;
  color: #1f2937;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
  opacity: 0;       /* escondido por padrão */
  transform: translateY(-10px);
  pointer-events: none; /* não atrapalha clique no card */
  transition: all 0.2s ease;
  z-index: 10;
}

/* Seta do tooltip */
.tool-card .dev-badge::after {
  content: "";
  position: absolute;
  bottom: -6px;   /* seta apontando para baixo */
  left: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: #f59e0b transparent transparent transparent;
}

/* Mostrar tooltip ao passar o mouse */
.tool-card:hover .dev-badge {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Badge vermelha de manutenção */
.dev-maint {
  background: #ef4444;
  color: #fff;
}

/* =========================================
   3. BANNERS (HERO) - PADRONIZADOS
   ========================================= */
.hero {
    /* Se quiser imagem de fundo, descomente abaixo e adicione img/banner-home.png */
    /* background-image: linear-gradient(rgba(0, 45, 98, 0.7), rgba(0, 45, 98, 0.7)), url('../img/banner-home.png'); */
    background: linear-gradient(135deg, rgba(0,45,98,0.9), rgba(255,127,0,0.7));
    background-size: cover;
    background-position: center;
    color: #FFF;
    text-align: center;
    padding: 120px 5% !important;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero h1 { color: #FFF; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero p  { font-size: 1.3em; max-width: 900px; margin: 0 auto; }

/* =========================================
   4. CONTEÚDO PADRÃO DAS PÁGINAS
   ========================================= */
.page {
    max-width: 720px;
    margin: 0 auto 60px auto;
    padding: 0 5%;
}
label{font-weight:600;display:block;margin:14px 0 6px}
input{width:100%;padding:12px;border:1px solid #ccc;border-radius:6px}
button{margin-top:18px;padding:12px 16px;background:var(--cor-primaria-azul);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:15px}
button:hover{background:#001a3b}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.center{text-align:center}
.success{padding:14px;border:1px solid #cfe9cc;background:#e6f6e8;color:#2e6b2f;border-radius:8px}
.error{padding:14px;border:1px solid #f3c0c0;background:#fde8e8;color:#7d1f1f;border-radius:8px}
.note{font-size:13px;color:#555}
.page .links a{color:var(--cor-primaria-azul);text-decoration:none}
.page .links a:hover{color:var(--cor-secundaria-laranja)}

.hero-actions{
    margin-top: 25px;
    display: flex;
    flex-direction: column;   /* força ficar um embaixo do outro */
    gap: 12px;
    align-items: center;
}

.hero-actions a{
    width: 260px;             /* mesmo tamanho */
    display: block;           /* impede ficar lado a lado */
    text-align: center;
}

/* =========================================
   5. RODAPÉ
   ========================================= */
.footer {
    margin-top: 60px !important;
    padding: 25px 5% !important;
    background: var(--cor-primaria-azul) !important;
    color: #e5e7eb !important;
    text-align: center !important;
    font-size: 0.9rem !important;
}

/* =========================================
   6. MENU MOBILE
   ========================================= */
.menu-toggle, .close-menu, .menu-overlay, .mobile-menu-header { display: none; }
@media (max-width: 768px) {
  .menu-toggle { display:block;background:none;border:none;font-size:2rem;color:var(--cor-primaria-azul);cursor:pointer }
  .nav {
    display:flex;flex-direction:column;position:fixed;top:0;left:-100%;
    width:80%;max-width:300px;height:100vh;background:#fff;
    box-shadow:2px 0 10px rgba(0,0,0,.2);align-items:flex-start;justify-content:flex-start;
    padding:20px;gap:0;transition:left .3s ease-in-out;z-index:1000;
  }
  .nav.active { left:0; }
  .mobile-menu-header {
    display:flex;justify-content:space-between;align-items:center;
    width:calc(100% + 40px);background:rgba(0,45,98,.1);
    margin:-20px -20px 20px -20px;padding:20px;border-bottom:1px solid #ddd;
  }
  .logo-mobile-inside { height: 50px !important; width: auto !important; }
  .close-menu { display:block;background:none;border:none;font-size:2rem;color:var(--cor-secundaria-laranja);cursor:pointer;padding:0 }
  .nav a{display:block;width:100%;padding:15px 0;border-bottom:1px solid #eee;margin-left:0;font-size:1.1em;color:var(--cor-primaria-azul)}
  .btn-cta-nav { margin-top: 20px; margin-left: 0 !important; width:100%; text-align:center; padding:12px !important; }
  .menu-overlay{ display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:999; opacity:0; visibility:hidden; transition:opacity .3s }
  .menu-overlay.active{ opacity:1; visibility:visible }
}

/* =========================================
   FORÇAR SETA GLOBAL EM TODOS OS SELECTS
   ========================================= */

select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="16" width="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;

    padding-right: 40px !important;
    cursor: pointer;
}

/* Tema escuro: seta clara */
body.theme-dark select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ddd" height="16" width="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
}

/* =========================================================
   HEADER / LOGO (PNG)
   ========================================================= */


.header-centered {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.header-left img {
  height: 60px;
  max-height: 60px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.header-user {
  font-size: 16px;
  font-weight: 500;
  color: var(--text); 
}

.header-user strong {
  color: var(--text);
  font-weight: 600;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1024px) {
  .dash-grid,
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dash-grid,
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HEADER — CENTRALIZAÇÃO PERFEITA DO TÍTULO
   ========================================================= */

/* título absolutamente central */
.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none; /* não interfere em cliques */
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-blue);
  white-space: nowrap;
}


body {
  min-height: 100vh !important; 
  background: linear-gradient(
    180deg,
    #001a3d 0%,
    #001433 40%,
    #000c1f 100%
  ) !important;
}

body::before {
  content: ""!important;
  position: fixed !important;
  inset: 0 !important;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(0, 0, 0, 0.15),
    transparent 20%
  ) !important;
  pointer-events: none !important;
}


.hero.hero-dashboard {
  background:
    linear-gradient(
      rgba(255,255,255,0.55),
      rgba(0,45,98,0.25)
    ),
    url('/img/logo_sem_nome.png') center/cover no-repeat !important;

  padding: 60px 5% 40px !important;
}
.tool-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.tool-status {
  font-size: 12px;
  font-weight: 600;
}

.tool-status.ok {
  color: #16a34a;
}

.tool-status.blocked {
  color: #94a3b8;
}

.tool-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.tool-btn:hover {
  opacity: 0.9;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;

}
.header-user {
  color: var(--text-muted);
  font-weight: 500;
}

#btnLogout {
  padding: 8px 16px; 
  border-radius: 10px; 
  font-weight: 600;
}

.nav a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.nav a:hover {
  color: var(--accent-blue);
  transition: color 0.2s ease;
}

@media (max-width: 640px) {

  .header-centered {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .header-left {
    width: 100%;
    justify-content: center;
  }

  .header-center {
    position: static; /* REMOVE o absolute */
    transform: none;
  }

  .header-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }


  .tool-card[aria-disabled="true"] {
  opacity: 1 !important;
}


.tool-card[aria-disabled="true"] {
  cursor: default;
}

.tool-card::after {
  pointer-events: none;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}

.header {
  background: #fff !important;
  border-bottom: 1px solid var(--border);
  padding: 8px 36px; /* ↓ diminui bastante a altura */
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.header-title { 
  font-size: 18px; 
  font-weight: 700; 
  color: var(--accent-blue) !important;
  white-space: nowrap;
}

.btn-like-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 15, 40, 0.18);

  background: #002D62;
  color: #fff !important;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  cursor: pointer;
  transition: background 0.2s;
}

.btn-like-button:hover {
  background: #001a45;
}

.header .logo img {
  height: 20px !important;       /* <-- diminui aqui */
  width: auto;
  max-height: 20px !important;
}

/* Mensagem padrão */
.note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}

/* ERRO */
.note[data-type="error"] {
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f1aeb5;
}

/* SUCESSO */
.note[data-type="success"] {
  color: #0f5132;
  background-color: #d1e7dd;
  border: 1px solid #badbcc;
}

/* INFO */
.note[data-type="info"] {
  color: #055160;
  background-color: #cff4fc;
  border: 1px solid #b6effb;
}
.password-wrap {
  position: relative;
}

.password-wrap input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 12px;
  box-sizing: border-box;
  display: block; /* 🔥 remove bug de baseline */
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;

  margin: auto 0; /* 🔥 centralização REAL */

  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  cursor: pointer;
  padding: 0;

  color: #9aa0a6;
}

.password-toggle svg {
  display: block;
}

/* quando senha visível */
.password-toggle.is-visible .eye-icon {
  opacity: 0.6;
}

/* linha cortando */
.password-toggle.is-visible::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  top: 50%;
  left: 0;
  transform: rotate(45deg);
}