/* ============================================================
   SST eSocial — Repaginacao (template webapp-receita + paleta roxa)
   Paleta mantida do app original: roxo #8e44ad + azul #2c3e50
   ============================================================ */

:root {
  --roxo: #8e44ad;
  --roxo-escuro: #732d91;
  --roxo-claro: #9b59b6;
  --azul: #2c3e50;
  --azul-escuro: #1e293b;
  --fundo: #f0f2f5;
  --branco: #ffffff;
  --vermelho: #e74c3c;
  --laranja: #f39c12;
  --verde: #27ae60;
  --azul-info: #3498db;
  --borda: #e0e0e0;
  --texto: #2c3e50;
  --texto-suave: #7f8c8d;
  --toque: 44px;
  --sombra: 0 2px 8px rgba(0,0,0,.06);
  --sombra-forte: 0 8px 24px rgba(0,0,0,.14);
  --raio: 14px;
  --sidebar: 264px;

  /* Aliases de compatibilidade (templates antigos usam var(--x)) */
  --primary: #8e44ad;
  --primary-dark: #732d91;
  --primary-light: #9b59b6;
  --secondary: #2c3e50;
  --danger: #e74c3c;
  --danger-dark: #c0392b;
  --warning: #f39c12;
  --success: #27ae60;
  --info: #3498db;
  --bg-body: #f0f2f5;
  --bg-card: #ffffff;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-muted: #95a5a6;
  --border: #e0e0e0;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 15px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; font-family: 'Inter', "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; background: var(--fundo); color: var(--texto); font-size: 16px; }
body { min-height: 100vh; }
.hidden { display: none !important; }
a { color: var(--roxo); }
h1, h2, h3, h4 { color: var(--azul); }

/* ============================================================
   BOTOES (compativel: .btn + variantes antigas e novas)
   ============================================================ */
.btn { height: var(--toque); border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; font-family: inherit; text-decoration: none; transition: all .2s ease; }
.btn:active { transform: scale(.98); }
.btn.primario, .btn-primary { background: var(--roxo); color: #fff; }
.btn.primario:hover, .btn-primary:hover { background: var(--roxo-escuro); box-shadow: 0 4px 12px rgba(142,68,173,.3); }
.btn.marrom, .btn-secondary { background: var(--azul); color: #fff; }
.btn.marrom:hover, .btn-secondary:hover { background: #34495e; }
.btn.perigo, .btn-danger { background: var(--vermelho); color: #fff; }
.btn.perigo:hover, .btn-danger:hover { background: #c0392b; }
.btn.secundario, .btn-outline { background: transparent; color: var(--roxo); border: 2px solid var(--roxo); }
.btn.secundario:hover, .btn-outline:hover { background: var(--roxo); color: #fff; }
.btn-success { background: var(--verde); color: #fff; }
.btn-success:hover { background: #219a52; }
.btn.pequeno, .btn-sm { height: 38px; font-size: 13px; border-radius: 9px; padding: 0 14px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
#app { min-height: 100vh; display: flex; }
#menu-lateral, .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; width: var(--sidebar); background: linear-gradient(180deg, var(--azul-escuro) 0%, #16202e 100%); color: #fff; transform: translateX(0); transition: transform .24s; display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
#menu-lateral .menu-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0 10px; }
#menu-lateral .menu-nav::-webkit-scrollbar { width: 5px; }
#menu-lateral .menu-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
#menu-lateral.fechado { transform: translateX(-100%); }
#logo-menu, .sidebar-header { padding: 20px 20px 14px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
#logo-menu img { max-width: 100%; height: 64px; width: auto; object-fit: contain; margin: 0 auto 10px; display: block; }
#logo-nome { display: block; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .2px; }
.sidebar-header h2 { color: #fff; font-size: 18px; font-weight: 700; }
.sidebar-header span { color: #94a3b8; font-size: 12px; display: block; margin-top: 4px; }
.menu-separador { height: 1px; background: rgba(255,255,255,.10); margin: 10px 22px; flex-shrink: 0; }
.menu-secao { padding: 18px 22px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; color: rgba(255,255,255,.45); }
#menu-lateral a, .sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 22px; font-size: 14px; font-weight: 600; color: #cbd5e1; text-decoration: none; cursor: pointer; border-left: 3px solid transparent; transition: all .15s; min-height: 44px; }
#menu-lateral a:hover, .sidebar-nav a:hover { background: rgba(255,255,255,.07); color: #e2e8f0; }
#menu-lateral a.ativo, .sidebar-nav a.active { background: rgba(142,68,173,.18); border-left-color: var(--roxo); color: #fff; }
#menu-lateral a .mi, .sidebar-nav a .icon { font-size: 19px; width: 26px; text-align: center; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Rodape do menu: item Sair alinhado aos demais */
.menu-rodape, .sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.10); padding: 8px 0; }
.menu-rodape a, .sidebar-footer a { display: flex; align-items: center; gap: 12px; padding: 11px 22px; min-height: 44px; font-size: 14px; font-weight: 600; color: #f87171; text-decoration: none; cursor: pointer; border-left: 3px solid transparent; transition: all .15s; }
.menu-rodape a:hover, .sidebar-footer a:hover { background: rgba(248,113,113,.10); color: #fca5a5; border-left-color: #f87171; }
.menu-rodape a .mi, .sidebar-footer a .mi { font-size: 19px; width: 26px; text-align: center; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

#overlay { position: fixed; inset: 0; z-index: 75; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .22s; }
#overlay.visivel { opacity: 1; pointer-events: auto; }
#area-principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar { position: sticky; top: 0; z-index: 60; height: 58px; background: rgba(240,242,245,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#topbar .icone { background: none; border: none; color: var(--azul); font-size: 22px; width: var(--toque); height: var(--toque); cursor: pointer; border-radius: 10px; }
#titulo-topbar { font-size: 17px; font-weight: 800; color: var(--azul); }
#conteudo { flex: 1; padding: 20px 16px calc(84px + env(safe-area-inset-bottom)); width: 100%; }

/* Compatibilidade: wrapper antigo .main-content vira o conteudo */
.main-content { width: 100%; min-height: 100vh; animation: fadeIn .35s ease-out; }
#conteudo .main-content { padding: 0; min-height: 0; }
@media (max-width: 1023px) {
  .main-content { padding: 0; }
}

/* Bottom nav (mobile) */
#bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 65; height: calc(64px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--borda); display: none; padding-bottom: env(safe-area-inset-bottom); }
.bn-item { flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--texto-suave); font-size: 21px; cursor: pointer; }
.bn-item small { font-size: 11px; font-weight: 700; }
.bn-item.ativo { color: var(--roxo); }

/* ============================================================
   CARDS / CONTAINERS (compativel com .container, .form-card, .cartao)
   ============================================================ */
.cartao, .container, .form-card { background: var(--branco); border-radius: var(--raio); padding: 18px; margin-bottom: 14px; box-shadow: var(--sombra); border: 1px solid rgba(224,224,224,.8); animation: fadeIn .35s ease-out; }
.cartao h3 { color: var(--roxo); font-size: 16px; margin-bottom: 10px; }
.cartao p { font-size: 14px; line-height: 1.6; }
.muted, .text-muted { color: var(--texto-suave); font-size: 13px; }
.cartao-acoes { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cartao-acoes .btn { flex: 1; min-width: 130px; }

/* Page header / top-bar */
.page-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #f0f0f0; }
.page-header h1, .page-header h2 { color: var(--azul); font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.page-header p { color: var(--texto-suave); font-size: 14px; }
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.top-bar h2 { color: var(--azul); font-size: 22px; font-weight: 700; }

/* ============================================================
   GRID DASHBOARD (stat-box/stat-card/action-card antigos + resumo-item novo)
   ============================================================ */
.grid-resumo, .stats-grid, .quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.resumo-item, .stat-box, .stat-card { background: var(--branco); border-radius: var(--raio); padding: 16px 12px; border: 1px solid rgba(224,224,224,.8); text-align: center; box-shadow: var(--sombra); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.resumo-item.clicavel, .stat-box.clicavel { cursor: pointer; }
.resumo-item.clicavel:hover, .stat-box.clicavel:hover, .action-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.resumo-item .num, .stat-box .value, .stat-num { font-size: 26px; font-weight: 800; color: var(--roxo); }
.resumo-item .rot { font-size: 12px; color: var(--texto-suave); margin-top: 3px; font-weight: 600; }
.stat-box::before { content: ''; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--roxo); }
.stat-box.secondary::before { background: var(--azul); }
.stat-box.danger::before { background: var(--vermelho); }
.stat-box.success::before { background: var(--verde); }
.stat-box.warning::before { background: var(--laranja); }
.stat-box .stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stat-box h3 { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .8px; }
.stat-box .stat-icon { font-size: 26px; color: var(--roxo); opacity: .6; }
.stat-box .trend { font-size: 12px; font-weight: 600; margin-top: 6px; display: block; }
.trend.up { color: var(--verde); }
.trend.down { color: var(--vermelho); }

.action-card { background: var(--branco); padding: 16px 18px; border-radius: var(--raio); text-decoration: none; display: flex; align-items: center; gap: 12px; box-shadow: var(--sombra); border: 1.5px solid var(--borda); cursor: pointer; transition: .2s ease; }
.action-card:hover { border-color: var(--roxo); box-shadow: 0 4px 12px rgba(142,68,173,.15); transform: translateY(-2px); }
.action-card ion-icon { font-size: 24px; color: var(--roxo); flex-shrink: 0; }
.action-card span { font-weight: 500; color: var(--azul); font-size: 13.5px; }

/* ============================================================
   LINHAS / LISTAS (linha-item novo + tabelas antigas)
   ============================================================ */
.linha-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--borda); }
.linha-item:last-child { border-bottom: none; }
.linha-item .titulo { font-weight: 700; font-size: 15px; }
.linha-item .sub { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.linha-item .acoes { display: flex; gap: 4px; flex-shrink: 0; }

.table-container { overflow-x: auto; border-radius: 10px; box-shadow: var(--sombra); background: #fff; }
table { width: 100%; border-collapse: collapse; background: #fff; }
thead { background: linear-gradient(135deg, var(--azul) 0%, #34495e 100%); }
th { padding: 14px 16px; text-align: left; font-weight: 600; font-size: 12.5px; letter-spacing: .4px; color: #fff; white-space: nowrap; }
td { padding: 14px 16px; border-bottom: 1px solid var(--borda); font-size: 14px; color: var(--texto); }
tbody tr { transition: background .2s; }
tbody tr:hover { background: #f8f9fa; }
tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   FORMULARIOS (compativel: form-group/form-control antigos)
   ============================================================ */
.form-row, .form-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.form-grupo, .form-group { display: flex; flex-direction: column; margin-bottom: 14px; }
.form-grupo label, .form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--azul); margin-bottom: 6px; }
.form-grupo input, .form-grupo select, .form-grupo textarea,
.form-group .form-control, .form-control { width: 100%; height: var(--toque); border: 1.5px solid var(--borda); border-radius: 10px; padding: 0 13px; font-size: 15px; background: #fff; font-family: inherit; transition: all .2s; color: var(--texto); }
textarea.form-control, .form-grupo textarea { height: auto; min-height: 100px; padding: 10px 13px; resize: vertical; }
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus, .form-control:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(142,68,173,.15); background: #fff; }
.form-grupo input::placeholder, .form-control::placeholder { color: var(--texto-suave); }
select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237f8c8d' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.form-secao, .form-section { font-size: 12px; font-weight: 800; color: var(--roxo); letter-spacing: .8px; border-bottom: 1px solid var(--borda); padding-bottom: 6px; margin: 16px 0 12px; }
.form-botoes { display: flex; gap: 10px; margin-top: 16px; justify-content: stretch; }
.form-botoes .btn { flex: 1; padding: 0 20px; }
.btn-voltar, .voltar-link { background: none; border: none; color: var(--azul); font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-bottom: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: .2s; }
.btn-voltar:hover, .voltar-link:hover { color: var(--roxo); transform: translateX(-3px); }

/* ============================================================
   ALERTS / BADGES / ESTADOS
   ============================================================ */
.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.alert-success { background: #d4edda; color: #155724; border-left: 4px solid var(--verde); }
.alert-error { background: #f8d7da; color: #721c24; border-left: 4px solid var(--vermelho); }
.alert-warning { background: #fff3cd; color: #856404; border-left: 4px solid var(--laranja); }
.alert-info { background: #d1ecf1; color: #0c5460; border-left: 4px solid var(--azul-info); }

.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.verde, .badge-success { background: #d4edda; color: var(--verde); }
.badge.marrom, .badge-primary { background: rgba(142,68,173,.15); color: var(--roxo); }
.badge-danger { background: rgba(231,76,60,.15); color: var(--vermelho); }
.badge-warning { background: rgba(243,156,18,.15); color: #d68910; }
.badge-info { background: rgba(52,152,219,.15); color: var(--azul-info); }

.empty-state { text-align: center; padding: 50px 20px; color: var(--texto-suave); }
.empty-state h3 { color: var(--texto-suave); margin-bottom: 8px; font-size: 17px; }
.empty-state p { font-size: 14px; }

/* Detalhes (ver) */
.detalhes-empresa, .detalhes-card { display: flex; flex-direction: column; gap: 0; background: #f9fafb; border-radius: 10px; overflow: hidden; }
.detalhe-row { display: flex; padding: 13px 18px; border-bottom: 1px solid var(--borda); }
.detalhe-row:last-child { border-bottom: none; }
.detalhe-label { width: 150px; font-weight: 600; font-size: 12.5px; color: var(--texto-suave); flex-shrink: 0; }
.detalhe-value { font-size: 14.5px; color: var(--texto); }

/* Acoes em linha */
.acoes { display: flex; gap: 8px; align-items: center; }
.acoes a, .acoes button { text-decoration: none; font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; transition: all .2s; border: none; cursor: pointer; }
.btn-action-edit { color: var(--laranja); background: rgba(243,156,18,.1); }
.btn-action-edit:hover { background: var(--laranja); color: #fff; }
.btn-action-delete { color: var(--vermelho); background: rgba(231,76,60,.1); }
.btn-action-delete:hover { background: var(--vermelho); color: #fff; }
.btn-action-view { color: var(--azul-info); background: rgba(52,152,219,.1); }
.btn-action-view:hover { background: var(--azul-info); color: #fff; }

/* ============================================================
   TOAST / SPINNER / ANIMACOES
   ============================================================ */
#toast { position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--azul-escuro); color: #fff; padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 200; box-shadow: var(--sombra-forte); max-width: 92vw; text-align: center; }
.spinner { border: 3px solid #e8e8e8; border-top-color: var(--roxo); border-radius: 50%; width: 26px; height: 26px; margin: 24px auto; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Caixa de alerta global (legado, mantida) */
#caixa-alerta-global { position: fixed; top: 20px; right: 20px; padding: 15px 25px; border-radius: 8px; color: white; font-weight: bold; display: none; box-shadow: 0 4px 15px rgba(0,0,0,.2); z-index: 9999; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: all .3s; }
.alerta-sucesso { background-color: var(--verde); border-left: 5px solid #1e8449; }
.alerta-erro { background-color: var(--vermelho); border-left: 5px solid #c0392b; }
.alerta-aviso { background-color: var(--laranja); border-left: 5px solid #d68910; }

/* Utilitarios */
.text-primary { color: var(--roxo); }
.text-danger { color: var(--vermelho); }
.text-success { color: var(--verde); }
.text-warning { color: var(--laranja); }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 30px; }
.mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 30px; }
.d-flex { display: flex; } .d-grid { display: grid; }
.align-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-1 { gap: 10px; } .gap-2 { gap: 20px; }
.welcome-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--borda); }
.user-info h1 { font-size: 26px; color: var(--azul); font-weight: 700; margin-bottom: 6px; }
.user-info p { color: var(--texto-suave); font-size: 15px; }
.btn-logout { display: inline-flex; align-items: center; gap: 8px; background: var(--vermelho); color: #fff; padding: 11px 20px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: .3s; font-size: 14px; }
.btn-logout:hover { background: #c0392b; transform: translateY(-2px); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 480px) {
  .linha-item .acoes .btn.pequeno { height: 30px; width: 30px; padding: 0; font-size: 13px; min-width: 30px; }
  .linha-item .acoes { gap: 2px; }
  .grid-resumo, .stats-grid, .quick-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .detalhe-label { width: 110px; }
}

@media (max-width: 1023px) {
  /* Menu: por padrao escondido via .fechado (classe real usada pelo JS toggleMenu) */
  #menu-lateral, #menu-lateral.fechado, .sidebar, .sidebar.fechado { transform: translateX(-100%); }
  /* Sem a classe .fechado => aberto */
  #menu-lateral:not(.fechado), .sidebar:not(.fechado) { transform: translateX(0); }
  #bottom-nav { display: flex; }
  #btn-menu { display: flex; }
  body.menu-aberto #menu-lateral { transform: translateX(0); }

  /* ============ MOBILE-FIRST: tabelas viram cards ============ */
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-container table { display: table; min-width: 640px; }
  /* Tabelas SEM .table-container: vira cards empilhados */
  table:not(.table-container table) { display: block; border: none; }
  table:not(.table-container table) thead { display: none; }
  table:not(.table-container table) tbody { display: block; }
  table:not(.table-container table) tr { display: block; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--sombra); }
  table:not(.table-container table) td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--borda); border: none; text-align: right; white-space: normal; }
  table:not(.table-container table) td:last-child { border-bottom: none; }
  table:not(.table-container table) td::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--texto-suave); text-transform: none; letter-spacing: .3px; text-align: left; }
  table:not(.table-container table) td:first-child::before { display: none; }
  table:not(.table-container table) td:first-child { font-weight: 700; font-size: 15px; color: var(--azul); text-align: left; }
  th, td { padding: 12px 12px; }

  /* ============ MOBILE-FIRST: formularios empilham ============ */
  .form-row { grid-template-columns: 1fr !important; gap: 10px; }
  .form-duplo { grid-template-columns: 1fr; gap: 10px; }
  .config-grid { grid-template-columns: 1fr !important; }
  .form-row .form-section { flex: none !important; width: 100%; }
  .form-botoes { flex-direction: column; }
  .form-botoes .btn { width: 100%; }
  .cartao-acoes { flex-direction: column; }
  .cartao-acoes .btn { width: 100%; }

  /* ============ MOBILE-FIRST: botoes de acao em lista ============ */
  .acoes { flex-wrap: wrap; }
  .acoes a, .acoes button { min-height: 38px; display: inline-flex; align-items: center; }

  /* ============ MOBILE-FIRST: detalhes ============ */
  .detalhe-row { flex-direction: column; gap: 2px; padding: 11px 14px; }
  .detalhe-label { width: 100%; font-size: 11px; }
  .detalhe-value { font-size: 14px; }

  /* ============ MOBILE-FIRST: upload-zone e certificados ============ */
  .cert-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cert-item .cert-actions { width: 100%; justify-content: flex-end; }
  .upload-zone { padding: 22px 14px; }

  /* ============ MOBILE-FIRST: paginas do eSocial ============ */
  .page-header { flex-direction: column; gap: 10px; }
  .welcome-section { flex-direction: column; align-items: flex-start; gap: 12px; }
  .welcome-section .btn-logout { width: 100%; justify-content: center; }
  .btn-block { width: 100%; }

  /* ============ MOBILE-FIRST: transmissao ============ */
  .passos-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .passo { padding: 14px 10px; }
  .passo h4 { font-size: 12.5px; }
  .passo p { font-size: 11px; }
  .passo-num { width: 34px; height: 34px; font-size: 14px; }
  .resultado-box, .recibo-box { padding: 14px !important; }
  .xml-preview { font-size: 10.5px; padding: 12px; max-height: 200px; }
  .detalhe-row { flex-direction: column; gap: 2px; padding: 10px 12px; }
  .form-row { grid-template-columns: 1fr !important; }

  /* ============ MOBILE-FIRST: psicossocial interno ============ */
  .psico-grid, .dims-grid { grid-template-columns: 1fr !important; }

  /* ============ MOBILE-FIRST: ltcat/ltip ============ */
  .card-horiz { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .card-horiz .acoes { justify-content: flex-start; }
}

@media (min-width: 1024px) {
  #menu-lateral, #menu-lateral.fechado, .sidebar, .sidebar.fechado { transform: translateX(0); }
  #btn-menu { display: none; }
  #overlay { display: none; }
  #bottom-nav { display: none; }
  #area-principal { margin-left: var(--sidebar); }
  #topbar { height: 62px; padding: 0 32px; background: rgba(255,255,255,.88); }
  #conteudo { padding: 32px 40px 48px; max-width: 1240px; margin: 0 auto; }
  .main-content { padding: 0; margin-left: 0; width: 100%; }
  .cartao, .container, .form-card { padding: 24px 26px; border-radius: 18px; margin-bottom: 20px; }
  .grid-resumo, .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .quick-actions { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  .resumo-item, .stat-box { padding: 22px 16px; border-radius: 16px; }
  .resumo-item .num, .stat-box .value { font-size: 30px; }
  .linha-item:hover { background: #faf8f3; }
  .cartao form, .container form, .form-card form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
  .cartao form > .form-grupo, .cartao form > .form-group, .cartao form > .form-duplo, .cartao form > .form-row { grid-column: span 1; }
  .cartao form > .form-secao, .cartao form > .form-section, .cartao form > .form-botoes, .cartao form > .form-row:has(.btn) { grid-column: 1 / -1; }
  .form-grupo label { font-size: 12px; letter-spacing: .4px; }
  #toast { bottom: 28px; left: auto; right: 32px; transform: none; }
}

/* Scrollbar sutil */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c8c8c8; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }