:root{
  /* LIGHT – Enterprise Blue (refinado) */

  /* Fundo e superfícies */
  --cor-bg: #dce8f8;    /* eef3fb;              /* fundo azul-claro (menos branco) */
  --cor-surface: #ffffff;         /* cards continuam brancos */
  --cor-borda: #bfd3f0;   /*  dbe4f3;           /* borda levemente azulada */

  /* Texto */
  --cor-texto: #0b1220;           /* mais contraste */
  --cor-texto-fraco: #334e7a;   /* 475569;     /* slate (menos lavado) */

  /* Primária */
  --cor-primaria: #1e3a8a;   /* 2563eb;        /* azul enterprise (menos “neon”) */
  --cor-primaria-hover: #1e40af; 
  --cor-primaria-contraste: #ffffff;

  /* Secundária */
  --cor-secundaria: #dbeafe;    /* e8f0ff;      /* azul suave, mas perceptível */
  --cor-secundaria-hover: #bfdbfe;    /* dbeafe; */
  --cor-secundaria-contraste: #0b1220;

  /* Flash / Alerts */
  --cor-flash-bg: #eaf2ff;
  --cor-flash-borda: #93c5fd;    /* c7dbff;  */
  --cor-flash-texto: #0b1220;

  /* UI */
  --raio: 12px;
  --sombra: 0 10px 28px  rgba(30, 58, 138, .12);    /* rgba(15, 23, 42, .10); */

  /* Cabeçalho e rodapé do tema light */
  --cor-layout-bg: #1558b0;
  --cor-layout-bg-hover: rgba(255, 255, 255, .13);
  --cor-layout-borda: #0f4c9a;
  --cor-layout-texto: #ffffff;
  --cor-layout-texto-fraco: #dbeafe;
}


/* DARK (preto/cinza com azul mais contido) */
body[data-theme="dark"]{
  --cor-bg: #0b0f19;
  --cor-surface: #111827;
  --cor-texto: #e5e7eb;
  --cor-texto-fraco: #9ca3af;
  --cor-borda: #1f2937;

  --cor-primaria: #60a5fa;
  --cor-primaria-contraste: #0b0f19;

  --cor-secundaria: #1f2937;
  --cor-secundaria-contraste: #e5e7eb;

  --cor-flash-bg: #0b1220;
  --cor-flash-borda: #334155;
  --cor-flash-texto: #e5e7eb;

  --cor-layout-bg: var(--cor-surface);
  --cor-layout-bg-hover: var(--cor-secundaria);
  --cor-layout-borda: var(--cor-borda);
  --cor-layout-texto: var(--cor-texto);
  --cor-layout-texto-fraco: var(--cor-texto-fraco);
}

html, body { height: 100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--cor-bg);
  color: var(--cor-texto);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.topo, .rodape { flex: 0 0 auto; }

.topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  background: var(--cor-surface);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topo-esq, .topo-dir{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink: 0;
}

/* No desktop topo-menu fica entre esq e dir, cresce para preencher o espaço */
.topo-menu{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--cor-texto);
}

.logo-marca{
  width:34px;
  height:34px;
  border-radius:10px;
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.logo-texto{
  font-weight:700;
}

.logo-img{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

.link-topo{
  text-decoration:none;
  color: var(--cor-texto);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
.link-topo:hover{
  border-color: var(--cor-borda);
  background: var(--cor-secundaria);
}

.status{
  color: var(--cor-texto-fraco);
  font-size:14px;
}

.app{
  display:flex;
  /* min-height: calc(100vh - 120px); */
  flex: 1 1 auto;
  display:flex;
  min-height: 0;
}

/* ===== Sidebar ===== */
.sidebar{
  width: 260px;
  background: var(--cor-surface);
  border-right: 1px solid var(--cor-borda);
  transition: width .2s ease;
  overflow: auto;
}

.sidebar.recolhido{
  width: 64px;
}

.sidebar-topo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--cor-borda);
}

.sidebar-titulo{
  font-weight:700;
}

.sidebar.recolhido .sidebar-titulo{
  display:none;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  padding:8px;
  gap:6px;
}

.sidebar-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--cor-texto);
  border:1px solid transparent;
}

.sidebar-item:hover{
  background: var(--cor-secundaria);
  border-color: var(--cor-borda);
}

.sidebar-icone{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--cor-secundaria);
  color: var(--cor-secundaria-contraste);
  flex: 0 0 34px;
}

.sidebar.recolhido .sidebar-texto{
  display: none;
}

/* ===== Conteúdo ===== */
.conteudo{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 16px;
}

/* ===== Botões ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius: 12px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  background: transparent;
  color: var(--cor-texto);
}

.btn-pri{
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
}

.btn-sec{
  background: var(--cor-secundaria);
  color: var(--cor-secundaria-contraste);
  border-color: var(--cor-borda);
}

.btn-ico{
  width:42px;
  height:42px;
  padding:0;
}

/* ===== Form ===== */
.form{
  max-width: 420px;
  background: var(--cor-surface);
  border:1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 32px 28px 28px;
  box-shadow: var(--sombra);
}

.campo{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: 20px;
}

.campo input{
  padding:12px 14px;
  border-radius: 12px;
  border:1px solid var(--cor-borda);
  background: transparent;
  color: var(--cor-texto);
}

/* ===== Rodapé ===== */
.rodape{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  background: var(--cor-surface);
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-fraco);
}

.rodape-sub{
  margin-top:4px;
}

.titulo-pagina{
  text-align:center;
  margin: 12px 0 24px;
  font-size: 22px; /* equivalente a h2 leve */
  font-weight: 700;
}

/* Botão de submit dentro de .form com respiro acima */
.form > .btn[type="submit"],
.form > button[type="submit"] {
  margin-top: 8px;
  width: 100%;
}

/* Evita scrollbar horizontal na página */
.pagina{
  max-width: 100%;
  overflow-x: hidden;
}

/* Card central (login, tema, etc.) */
.card-central{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.flash{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cor-flash-borda);
  background: var(--cor-flash-bg);
  color: var(--cor-flash-texto);
  margin-bottom: 12px;
}

.menu-drop{
  position: relative;
}

.menu-drop > summary{
  list-style: none;
  cursor: pointer;
}
.menu-drop > summary::-webkit-details-marker{ display: none; }

.menu-caret{
  margin-left: 6px;
  opacity: .7;
  font-size: 12px;
}

.menu-drop__panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--cor-surface);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 6px;
  z-index: 200;
}

.menu-drop__item{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--cor-texto);
  border: 1px solid transparent;
}

.menu-drop__item:hover{
  background: var(--cor-secundaria);
  border-color: var(--cor-borda);
}

.empresa-switch{
  display:flex;
  align-items:center;
  gap:8px;
}

.select-topo{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-surface);
  color: var(--cor-texto);
}

.select-topo:focus{
  outline: none;
  border-color: var(--cor-primaria);
}

/* ===== UI Premium (Empresas) ===== */

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin: 6px 0 14px;
}
.page-title{
  margin:0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.page-subtitle{
  margin-top: 4px;
  color: var(--cor-texto-fraco);
  font-size: 14px;
}
.page-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ===== CARDS ===== */

.card{
  background: var(--cor-surface);
  border: 1px solid var(--cor-borda);
  border-radius: calc(var(--raio) + 4px);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.card-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
}

.card-tools{
  display:flex;
  align-items:center;
  gap:10px;
}

.card-body{
  padding: 16px;
}

.card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 16px;
  border-top: 1px solid var(--cor-borda);
}

.card-soft{
  background: color-mix(in srgb, var(--cor-secundaria) 65%, var(--cor-surface));
  border: 1px solid var(--cor-borda);
}


/* ===== GRID DE FORMULÁRIOS (🔥 CORREÇÃO DO ESPAÇO LATERAL) ===== */

.form-wide{
  max-width: 1200px; /* 🔥 aumentamos aqui */
  margin: 0 auto;
  width: 100%;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
}

/* spans */
.form-grid .span-2{ grid-column: span 2; }
.form-grid .span-3{ grid-column: span 3; }
.form-grid .span-4{ grid-column: span 4; }

/* 🔥 ajuste para telas maiores (remove espaço lateral exagerado) */
@media (min-width: 1400px){
  .form-wide{
    max-width: 1400px;
  }
}

@media (max-width: 900px){
  .form-grid{
    grid-template-columns: 1fr;
  }
}


/* ===== CAMPOS ===== */

.campo{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 0;
}

.campo label{
  font-size: 13px;
  font-weight: 800;
}

.campo input,
.campo select{
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--cor-borda);
  background: var(--cor-surface);
  color: var(--cor-texto);
}

.campo input::placeholder{
  color: var(--cor-texto-fraco);
}

/* DARK fix */
body[data-theme="dark"] .campo input,
body[data-theme="dark"] .campo select{
  background: #0f172a;
  color: #e5e7eb;
  border-color: #1e293b;
}

body[data-theme="dark"] .campo select option{
  background: #0f172a;
  color: #e5e7eb;
}

.help{
  font-size: 12px;
  color: var(--cor-texto-fraco);
}

.muted{
  color: var(--cor-texto-fraco);
}


/* ===== TABS ===== */

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding: 8px 16px 0;
  border-bottom: 1px solid var(--cor-borda);
}

.tab-btn{
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 10px 10px 0 0;
  font-weight: 600;
  cursor: pointer;
  color: var(--cor-texto-fraco);
  transition: background .15s, color .15s;
}

.tab-btn:hover{
  background: var(--cor-secundaria);
  color: var(--cor-texto);
}

.tab-btn.is-active{
  background: var(--cor-primaria);
  color: #fff;
}

.tab-panel{
  display:none;
  padding: 16px;
}

.tab-panel.is-active{
  display:block;
}


/* ===== BADGES / CHIPS ===== */

.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--cor-borda);
}

.badge-ok{
  background: rgba(34,197,94,.12);
  color: #16a34a;
}

.badge-warn{
  background: rgba(245,158,11,.14);
  color: #b45309;
}

.badge-danger{
  background: rgba(239,68,68,.12);
  color: #dc2626;
}

.btn-warn {
  background: rgba(245,158,11,.15);
  color: #b45309;
  border: 1px solid rgba(245,158,11,.3);
}

.btn-warn:hover {
  background: rgba(245,158,11,.25);
}

.chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--cor-secundaria);
  border: 1px solid var(--cor-borda);
}


/* ===== TABELAS ===== */

.table-wrap{
  overflow:auto;
}

.table{
  width:100%;
  border-collapse: collapse;
  min-width: 820px;
}

.table thead th{
  text-align:left;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  padding: 12px 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.table tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.table tbody tr:hover{
  background: rgba(0,0,0,.03);
}

.table-empty{
  text-align:center;
  color: var(--cor-texto-fraco);
  padding: 26px 16px !important;
}


/* ===== CÉLULAS ===== */

.cell-title{
  font-weight: 700;
}

.cell-sub{
  font-size: 12px;
  color: var(--cor-texto-fraco);
}

.mono{
  font-family: monospace;
}


/* ===== AÇÕES ===== */

.acoes-linha{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* botão pequeno padrão */
.btn-sm{
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.1;
}

/* =========================================================
   FASE 3 — COMPONENTES REUTILIZÁVEIS DE LISTAS
   ========================================================= */

/* container de filtros para listas */
.lista-filtros{
  margin-bottom: 0;
}

.lista-filtros-grid{
  display: grid;
  gap: 14px 16px;
  align-items: end;
}

.lista-filtros-grid.grid-2{
  grid-template-columns: minmax(320px, 2fr) minmax(220px, 1fr);
}

.lista-filtros-grid.grid-3{
  grid-template-columns: minmax(320px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr);
}

.lista-filtros-grid.grid-4{
  grid-template-columns: minmax(280px, 2fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr);
}

.lista-filtros-grid .campo{
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.lista-filtros-grid input,
.lista-filtros-grid select,
.lista-filtros-grid textarea{
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-surface);
  color: var(--cor-texto);
}

.lista-filtros-grid textarea{
  min-height: 90px;
  resize: vertical;
}

.lista-filtros-grid input::placeholder,
.lista-filtros-grid textarea::placeholder{
  color: var(--cor-texto-fraco);
}

/* dark mode garantido */
body[data-theme="dark"] .lista-filtros-grid input,
body[data-theme="dark"] .lista-filtros-grid select,
body[data-theme="dark"] .lista-filtros-grid textarea{
  background: #0f172a;
  color: #e5e7eb;
  border-color: #1e293b;
}

body[data-theme="dark"] .lista-filtros-grid select option{
  background: #0f172a;
  color: #e5e7eb;
}

/* alinhamento quando só um campo possui help */
.lista-filtros-grid .campo:not(.lista-filtro-busca)::after{
  content: '';
  height: 18px;
}

/* busca padrão dentro de listas */
.lista-filtro-busca input{
  min-width: 0;
}

/* ações de filtros */
.lista-filtros-acoes{
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* toolbar opcional acima da tabela */
.lista-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.lista-toolbar-left,
.lista-toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* compactação visual para listas densas */
.table-compact thead th{
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 11.5px;
}

.table-compact tbody td{
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  line-height: 1.25;
}

/* células específicas */
.cell-stack{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cell-title{
  font-weight: 700;
}

.cell-sub{
  font-size: 12px;
  color: var(--cor-texto-fraco);
}

.cell-meta{
  font-size: 11px;
  color: var(--cor-texto-fraco);
}

/* links leves dentro de tabelas */
.link-soft{
  color: var(--cor-primaria);
  text-decoration: none;
}
.link-soft:hover{
  text-decoration: underline;
}

/* ações padrão de listas */
.lista-acoes{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
  white-space:nowrap;
}

.lista-btn-acao{
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.1;
}

/* versão ainda mais compacta */
.lista-btn-acao-xs{
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.05;
}

/* ações por ícone mantendo cor do tema */
.lista-btn-icon{
  width: 34px;
  height: 34px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
}

/* coluna de ações com largura previsível */
.col-acoes{
  text-align:right;
  white-space:nowrap;
}

/* cards de filtro em listas */
.card-lista-filtros .card-header{
  padding-bottom: 12px;
}

.card-lista-filtros .card-body{
  padding-top: 14px;
}

/* resumo acima da lista */
.lista-resumo{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* estados */
.status-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* tabelas de ERP com muita ação */
.table td .btn,
.table td .chip,
.table td .badge{
  vertical-align: middle;
}

/* responsividade dos filtros */
@media (max-width: 1100px){
  .lista-filtros-grid.grid-4{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 900px){
  .lista-filtros-grid.grid-2,
  .lista-filtros-grid.grid-3,
  .lista-filtros-grid.grid-4{
    grid-template-columns: 1fr;
  }

  .lista-filtros-grid .campo:not(.lista-filtro-busca)::after{
    display:none;
  }

  .lista-toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .lista-toolbar-left,
  .lista-toolbar-right{
    justify-content:flex-start;
  }

  .lista-acoes{
    justify-content:flex-start;
    white-space:normal;
  }
}

/* =========================================================
   FASE 3 — REFINOS FINAIS / HELPERS
   ========================================================= */

/* largura mais generosa para páginas com formulários e listas largas */
.pagina.page-wide,
.form-wide.page-wide{
  max-width: 100%;
}

/* páginas com muito conteúdo lateral */
.page-max{
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* linhas auxiliares */
.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.row-end{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-end;
}

.row-between{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
}

/* blocos de filtro legados */
.filtros-card .card-body{
  padding-top: 16px;
  padding-bottom: 16px;
}

.filtros-linha{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

.campo-filtro{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:140px;
}

.campo-filtro label{
  font-size:12px;
  font-weight:700;
  color: var(--cor-texto-fraco);
}

.campo-filtro input,
.campo-filtro select{
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--cor-borda);
  background: var(--cor-surface);
  color: var(--cor-texto);
}

.campo-filtro input::placeholder{
  color: var(--cor-texto-fraco);
}

body[data-theme="dark"] .campo-filtro input,
body[data-theme="dark"] .campo-filtro select{
  background:#0f172a;
  color:#e5e7eb;
  border-color:#1e293b;
}

body[data-theme="dark"] .campo-filtro select option{
  background:#0f172a;
  color:#e5e7eb;
}

.campo-filtro-sm{ flex:1 1 140px; }
.campo-filtro-md{ flex:1 1 220px; }
.campo-filtro-lg{ flex:2 1 320px; }

.filtros-acoes{
  display:flex;
  gap:8px;
  align-items:flex-end;
  margin-left:auto;
  flex-wrap:wrap;
}

/* checkboxes / papeis */
.check{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  cursor:pointer;
  background: transparent;
}

.check:hover{
  background: var(--cor-secundaria);
}

.papeis-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

/* cartões de endereço / subgrids */
.end-card{
  border:1px solid var(--cor-borda);
  border-radius: 14px;
  padding:14px;
  margin-bottom:12px;
  background: color-mix(in srgb, var(--cor-surface) 88%, var(--cor-secundaria));
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.panel-title{
  font-weight:800;
  font-size:15px;
}

.campo-acoes,
.campo--actions{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* textarea padrão */
textarea{
  width:100%;
  box-sizing:border-box;
  min-height:90px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--cor-borda);
  background: var(--cor-surface);
  color: var(--cor-texto);
  resize:vertical;
}

textarea::placeholder{
  color: var(--cor-texto-fraco);
}

body[data-theme="dark"] textarea{
  background:#0f172a;
  color:#e5e7eb;
  border-color:#1e293b;
}

/* selects e options globais */
select{
  background-color: var(--cor-surface);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}

select option{
  background-color: var(--cor-surface);
  color: var(--cor-texto);
}

select:focus,
input:focus,
textarea:focus{
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-primaria) 22%, transparent);
}

body[data-theme="dark"] select{
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: #1e293b;
}

body[data-theme="dark"] select option{
  background-color: #0f172a;
  color: #e5e7eb;
}

/* tema readonly / bloqueado */
input[readonly],
textarea[readonly]{
  opacity: .92;
  background: color-mix(in srgb, var(--cor-surface) 88%, var(--cor-secundaria));
  cursor: default;
}

/* alerta de leitura */
.alerta-leitura{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border:1px solid var(--cor-borda);
  border-radius:14px;
  background: color-mix(in srgb, var(--cor-secundaria) 65%, var(--cor-surface));
  margin-bottom:16px;
}

/* pequenos helpers */
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }
.mb-12{ margin-bottom:12px; }
.mb-16{ margin-bottom:16px; }
.w-100{ width:100%; }
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.strong{ font-weight:700; }

/* sidebar item ativo */
.sidebar-item.active{
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  border-color: transparent;
}

.sidebar-item.active .sidebar-icone{
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* animação leve do topo */
.menu-drop__panel{
  animation: fadeIn .12s ease;
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(-4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* estados de botão */
.btn:hover{
  filter: brightness(0.97);
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0);
  filter: brightness(0.94);
}

.btn:disabled,
.btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-outline{
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
}
.btn-outline:hover{
  background: var(--cor-secundaria);
}

.btn-danger{
  background: #ef4444;
  color: #fff;
  border-color: #dc2626;
}
.btn-danger:hover{
  background: #dc2626;
}

.btn-group{
  display:flex;
  gap:8px;
  align-items:center;
}

.btn-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
}
.btn-icon:hover{
  background: var(--cor-secundaria);
  border-color: var(--cor-borda);
}
.btn-icon-danger{
  color:#ef4444;
}
.btn-icon-danger:hover{
  background: rgba(239,68,68,.12);
}

.btn-block{
  width:100%;
}

/* responsividade complementar */
@media (max-width: 1200px){
  .papeis-grid{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 900px){
  .page-head{
    flex-direction: column;
    align-items: stretch;
  }

  .page-actions{
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .form-wide{
    max-width: 100%;
  }

  .filtros-linha{
    flex-direction:column;
    align-items:stretch;
  }

  .filtros-acoes{
    margin-left:0;
    justify-content:flex-start;
  }
}

@media (max-width: 700px){
  .papeis-grid{
    grid-template-columns: 1fr;
  }

  .rodape{
    flex-direction:column;
    align-items:flex-start;
  }

  .acoes-linha{
    justify-content:flex-start;
  }
}


/* =========================================================
   FASE 3.1 — PERMISSÕES / TELAS ESPECIAIS
   ========================================================= */

.lista-regras{
  margin:0;
  padding-left:18px;
}
.lista-regras li{
  margin-bottom:6px;
}

.section{
  margin-bottom:24px;
}

.section-title{
  font-size:1rem;
  font-weight:700;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}

.perm-table{
  width:100%;
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  overflow:hidden;
  background: var(--cor-surface);
}

.perm-row{
  display:grid;
  grid-template-columns: 3fr 2fr 1fr;
  gap:16px;
  padding:12px 16px;
  align-items:center;
}

.perm-head{
  font-weight:700;
  background: color-mix(in srgb, var(--cor-secundaria) 55%, var(--cor-surface));
  border-bottom:1px solid var(--cor-borda);
}

.perm-row:not(.perm-head){
  border-bottom:1px solid var(--cor-borda);
}

.perm-row:last-child{
  border-bottom:none;
}

.perm-nome{
  font-weight:700;
}

.perm-meta{
  font-size:.85rem;
  color:var(--cor-texto-fraco);
}

.perm-rota{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.85rem;
  color:var(--cor-texto-fraco);
  word-break:break-all;
}

.perm-acesso select{
  width:100%;
}

.chip-ok{
  background: rgba(30, 170, 90, .12);
  color:#1eaa5a;
  border-color: rgba(30, 170, 90, .22);
}

@media (max-width: 900px){
  .perm-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .perm-head{
    display:none;
  }

  .perm-rota::before{
    content:'Rota: ';
    font-weight:700;
    font-family:inherit;
    color:var(--cor-texto);
  }
}

/* ===== FINAL ===== */

/* ==========================================================
   MOBILE — estilos críticos (adicionados inline para garantir
   que não há problema de cache no arquivo responsivo.css)
   ========================================================== */
@media (max-width: 768px) {
  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;
    cursor: pointer;
  }
  #sidebar-overlay.ativo {
    display: block;
  }
  .btn-mobile-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--cor-texto);
    font-size: 22px;
    line-height: 1;
  }
  /* Esconde o sidebar — ID tem especificidade máxima */
  #sidebar {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: 280px !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    transition: none !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  #sidebar.mobile-aberto {
    display: flex !important;
    flex-direction: column !important;
  }
  .conteudo {
    width: 100% !important;
    padding: 12px !important;
  }
  .logo-texto { display: none; }
  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid .span-2,
  .form-grid .span-3,
  .form-grid .span-4 { grid-column: span 1 !important; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .dash-kpis { grid-template-columns: repeat(2,1fr) !important; }
  table { min-width: 500px; }
  .tabela-responsiva { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
}
@media (max-width: 480px) {
  .dash-kpis { grid-template-columns: 1fr !important; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .conteudo { padding: 8px !important; }
}


/* ==========================================================
   MOBILE — Layout de duas linhas no topo
   ========================================================== */
@media (max-width: 768px) {

  /*
   * O <header class="topo"> vira flex-wrap.
   * Linha 1: .topo-esq (☰ + logo) e .topo-dir (👤) — justify space-between
   * Linha 2: .topo-menu ocupa 100% da largura, rola horizontalmente
   */
  .topo {
    flex-wrap: wrap;
    gap: 0;
    padding: 8px 12px 0;
    row-gap: 0;
  }

  /* Linha 1: esq e dir ficam nas pontas, sem o menu no meio */
  .topo-esq {
    flex: 1 1 auto;
    gap: 8px;
    padding-bottom: 8px;
  }

  .topo-dir {
    flex-shrink: 0;
    gap: 6px;
    padding-bottom: 8px;
  }

  /* Linha 2: topo-menu ocupa largura total, separado por borda */
  .topo-menu {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0;
    scrollbar-width: none;
    padding: 4px 0 6px;
    border-top: 1px solid var(--cor-borda);
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .topo-menu::-webkit-scrollbar {
    display: none;
  }

  /* Itens da segunda linha: compactos, não quebram */
  .topo-menu > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .topo-menu .link-topo {
    font-size: 13px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  /* Dropdown dos grupos: abre para baixo, full-width, posição fixed */
  .menu-drop {
    position: static;
  }

  .menu-drop__panel:not(.topo-user-panel) {
    position: fixed !important;
    /* altura do topo desktop (~56px) + linha do menu (~38px) */
    top: 94px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: unset !important;
    max-height: 65dvh;
    overflow-y: auto;
    border-radius: 0 0 16px 16px !important;
    border-left: none;
    border-right: none;
    z-index: 201 !important;
    padding: 8px 12px 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }

  /* Itens do dropdown em 2 colunas */
  .menu-drop__item {
    display: inline-flex !important;
    width: calc(50% - 4px);
    padding: 10px 12px;
    font-size: 14px;
    vertical-align: top;
  }

  .menu-drop__divider {
    width: 100%;
    display: block;
  }

  .menu-drop > summary.link-topo {
    font-size: 13px;
    padding: 6px 10px;
  }

  .menu-caret {
    margin-left: 3px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  /* Itens do dropdown em coluna única em telas muito pequenas */
  .menu-drop__item {
    width: 100% !important;
    display: flex !important;
  }

}


/* ===== PAGINAÇÃO ===== */
.paginacao-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0 4px;
}

.paginacao-info {
  font-size: 13px;
  color: var(--cor-texto-fraco);
}

.paginacao {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pag-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: 8px;
}

.pag-ativa {
  pointer-events: none;
  font-weight: 700;
}

.pag-disabled {
  pointer-events: none;
  opacity: .35;
}

.pag-ellipsis {
  padding: 0 4px;
  color: var(--cor-texto-fraco);
  font-size: 14px;
}

/* ===== Tema light: cabeçalho e rodapé com identidade azul ===== */
body[data-theme="light"] .topo,
body:not([data-theme]) .topo,
body[data-theme="light"] .rodape,
body:not([data-theme]) .rodape{
  background: var(--cor-layout-bg);
  border-color: var(--cor-layout-borda);
  color: var(--cor-layout-texto);
  box-shadow: 0 8px 24px rgba(21, 88, 176, .16);
}

body[data-theme="light"] .topo .logo,
body:not([data-theme]) .topo .logo,
body[data-theme="light"] .topo .logo-texto,
body:not([data-theme]) .topo .logo-texto,
body[data-theme="light"] .topo .link-topo,
body:not([data-theme]) .topo .link-topo,
body[data-theme="light"] .topo .status,
body:not([data-theme]) .topo .status,
body[data-theme="light"] .topo .empresa-switch,
body:not([data-theme]) .topo .empresa-switch,
body[data-theme="light"] .topo .btn-outline,
body:not([data-theme]) .topo .btn-outline,
body[data-theme="light"] .topo .btn-mobile-menu,
body:not([data-theme]) .topo .btn-mobile-menu,
body[data-theme="light"] .rodape,
body:not([data-theme]) .rodape,
body[data-theme="light"] .rodape .rodape-sub,
body:not([data-theme]) .rodape .rodape-sub{
  color: var(--cor-layout-texto);
}

body[data-theme="light"] .rodape .rodape-sub,
body:not([data-theme]) .rodape .rodape-sub,
body[data-theme="light"] .topo .status,
body:not([data-theme]) .topo .status{
  color: var(--cor-layout-texto-fraco);
}

body[data-theme="light"] .topo .link-topo:hover,
body:not([data-theme]) .topo .link-topo:hover,
body[data-theme="light"] .topo .btn-outline:hover,
body:not([data-theme]) .topo .btn-outline:hover,
body[data-theme="light"] .topo .btn-mobile-menu:hover,
body:not([data-theme]) .topo .btn-mobile-menu:hover{
  background: var(--cor-layout-bg-hover);
  border-color: rgba(255, 255, 255, .30);
}

body[data-theme="light"] .topo .btn-outline,
body:not([data-theme]) .topo .btn-outline{
  border-color: rgba(255, 255, 255, .28);
}

body[data-theme="light"] .topo .menu-drop__panel,
body:not([data-theme]) .topo .menu-drop__panel{
  background: var(--cor-surface);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

body[data-theme="light"] .topo .menu-drop__item,
body:not([data-theme]) .topo .menu-drop__item,
body[data-theme="light"] .topo .topo-user-empresa,
body:not([data-theme]) .topo .topo-user-empresa,
body[data-theme="light"] .topo .topo-user-nome,
body:not([data-theme]) .topo .topo-user-nome{
  color: var(--cor-texto);
}