:root {
    --verde: #1a6b3a;
    --verde-claro: #2d9a57;
    --verde-bg: #e8f5ee;
    --verde-borda: #b2dfca;
    --cinza-bg: #f4f6f5;
    --cinza-borda: #d1d9d5;
    --cinza-texto: #4a5550;
    --texto: #1a2620;
    --branco: #fff;
    --azul: #1d6fa4;
    --azul-bg: #e3f0f9;
    --amarelo: #b07d00;
    --amarelo-bg: #fff8e1;
    --vermelho: #b52a2a;
    --vermelho-bg: #fdeaea;
    --roxo: #6b3fa0;
    --roxo-bg: #f3eeff;
    --sombra: 0 2px 8px rgba(0,0,0,0.08);
    --sombra-modal: 0 8px 32px rgba(0,0,0,0.18);
    --prototipo-footer-h: 44px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--cinza-bg); color: var(--texto); font-size: 14px; }

  body.proex-modo-consulta .defensor-acao,
  body.proex-conta-inativa .defensor-acao {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* HEADER */
  #header { background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 56px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: sticky; top: 0; z-index: 100; }
  #header .logo { font-size: 16px; font-weight: 700; letter-spacing: 0.5px; display: flex; align-items: center; gap: 10px; }
  #header .logo span { font-size: 11px; font-weight: 400; opacity: 0.75; }
  #perfil-toggle { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; padding: 6px 12px; cursor: pointer; color: #fff; font-size: 13px; transition: background 0.2s; }
  #perfil-toggle:hover { background: rgba(255,255,255,0.25); }
  #perfil-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: #6effa0; }

  /* NAV */
  #nav { background: var(--branco); border-bottom: 1px solid var(--cinza-borda); display: flex; gap: 0; padding: 0 24px; overflow-x: auto; }
  .nav-item { padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--cinza-texto); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
  .nav-item:hover { color: var(--verde); }
  .nav-item.ativo { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }
  .nav-item.nav-sem-acesso,
  .nav-item.nav-sem-acesso.ativo {
    color: #a8b0ac;
    border-bottom-color: transparent;
    font-weight: 500;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    opacity: 0.85;
  }
  .nav-item.nav-sem-acesso:hover { color: #a8b0ac; }

  /* LAYOUT */
  #conteudo { padding: 24px; max-width: 1200px; margin: 0 auto; }
  .modulo { display: none; }
  .modulo.ativo { display: block; }

  /* PROTOTYPE FOOTER */
  #proex-prototipo-footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 90;
    width: max-content;
    max-width: calc(100vw - 32px);
    background: var(--vermelho);
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
  }
  #proex-prototipo-footer strong { font-weight: 600; }
  body.has-prototipo-footer { padding-bottom: var(--prototipo-footer-h); }
  body.has-prototipo-footer #toast { bottom: calc(var(--prototipo-footer-h) + 12px); }

  /* CARDS TOPO */
  .cards-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
  .card-stat { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 16px; }
  .card-stat .valor { font-size: 28px; font-weight: 700; color: var(--verde); }
  .card-stat .label { font-size: 11px; color: var(--cinza-texto); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

  /* SEÇÃO */
  .secao { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 8px; margin-bottom: 20px; overflow: hidden; }
  .secao-header { padding: 14px 18px; border-bottom: 1px solid var(--cinza-borda); display: flex; align-items: center; justify-content: space-between; }
  .secao-titulo { font-size: 14px; font-weight: 600; }
  .secao-body { padding: 16px 18px; }

  /* TABELA */
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  thead tr { background: var(--cinza-bg); }
  th { padding: 9px 12px; text-align: left; font-weight: 600; font-size: 12px; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--cinza-borda); }
  th.th-sort-visual::after {
    content: '↕';
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.45;
    vertical-align: middle;
    letter-spacing: 0;
    text-transform: none;
    user-select: none;
  }
  th.th-sort-visual.th-sort-visual-asc::after {
    content: '↑';
    opacity: 0.6;
  }
  th.th-sort-visual.th-sort-visual-desc::after {
    content: '↓';
    opacity: 0.6;
  }
  td { padding: 10px 12px; border-bottom: 1px solid #f0f2f1; vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: #fafcfb; }

  /* BADGES */
  .badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
  .badge-verde { background: var(--verde-bg); color: var(--verde); }
  .badge-amarelo { background: var(--amarelo-bg); color: var(--amarelo); }
  .badge-azul { background: var(--azul-bg); color: var(--azul); }
  .badge-vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
  .badge-cinza { background: #eee; color: #666; }
  .badge-roxo { background: var(--roxo-bg); color: var(--roxo); }
  .badge-execucao { background: #e0f7f4; color: #0d6b5c; }

  /* BOTÕES */
  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: filter 0.15s; }
  .btn:hover { filter: brightness(0.92); }
  .btn-verde { background: var(--verde); color: #fff; }
  .btn-outline { background: transparent; border: 1px solid var(--cinza-borda); color: var(--cinza-texto); }
  .btn-vermelho { background: var(--vermelho); color: #fff; }
  .btn-azul { background: var(--azul); color: #fff; }
  .btn-sm { padding: 4px 10px; font-size: 12px; }
  .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn:disabled:hover { filter: none; }
  .btn-outline:disabled {
    background: #e8ece9;
    color: #6b7670;
    border-color: #b8c2bc;
  }

  /* FILTROS */
  .filtros { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .filtros select, .filtros input { padding: 7px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 13px; background: var(--branco); color: var(--texto); outline: none; }
  .filtros select:focus, .filtros input:focus { border-color: var(--verde); }

  /* FORMULÁRIO */
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-grid.col3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grupo { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 14px; }
  .modal-body .form-grupo:last-child { margin-bottom: 0; }
  .form-grupo.full { grid-column: 1 / -1; min-width: 0; }
  .form-grupo.full > .form-grid { width: 100%; min-width: 0; }
  .form-datas-aproex input[data-date-field],
  .form-datas-aproex input.input-data-br { max-width: 100%; }
  input.input-data-br[data-date-field] { font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) {
    .form-datas-aproex { grid-template-columns: 1fr; }
  }
  label { font-size: 12px; font-weight: 600; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: 0.4px; }
  input, select, textarea { padding: 8px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; background: var(--branco); }
  input:focus, select:focus, textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(26,107,58,0.1); }
  input:disabled,
  select:disabled,
  textarea:disabled {
    background: #dfe5e1;
    color: #5a6560;
    border-color: #b8c2bc;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: #5a6560;
  }
  input:disabled:focus,
  select:disabled:focus,
  textarea:disabled:focus {
    border-color: #b8c2bc;
    box-shadow: none;
  }
  textarea { resize: vertical; min-height: 70px; }

  /* MODAL */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999; align-items: center; justify-content: center; }
  .modal-overlay.aberto { display: flex; }
  .modal { background: var(--branco); border-radius: 10px; width: min(100%, calc(100vw - 32px)); max-width: 520px; box-shadow: var(--sombra-modal); overflow: hidden; }
  .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--cinza-borda); display: flex; align-items: center; justify-content: space-between; }
  .modal-titulo { font-size: 15px; font-weight: 700; }
  .modal-fechar { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--cinza-texto); line-height: 1; }
  .modal-body { padding: 20px; max-height: min(calc(100vh - 140px), 75vh); overflow-y: auto; overflow-x: hidden; }
  .modal-footer { padding: 14px 20px; border-top: 1px solid var(--cinza-borda); display: flex; justify-content: flex-end; gap: 10px; }

  /* ALERTA */
  .alerta { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; }
  .alerta-vermelho { background: var(--vermelho-bg); color: var(--vermelho); border: 1px solid #f5b8b8; }
  .alerta-amarelo { background: var(--amarelo-bg); color: #7a5500; border: 1px solid #ffe082; }
  .alerta-verde { background: var(--verde-bg); color: var(--verde); border: 1px solid var(--verde-borda); }

  /* LINHA INFO */
  .info-linha { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
  .info-item { display: flex; flex-direction: column; gap: 2px; }
  .info-item .k { font-size: 11px; color: var(--cinza-texto); font-weight: 600; text-transform: uppercase; }
  .info-item .v { font-size: 14px; font-weight: 500; }

  /* PROGRESSO */
  .prog-barra { height: 6px; background: #e0e7e3; border-radius: 3px; overflow: hidden; margin-top: 4px; }
  .prog-fill { height: 100%; background: var(--verde); border-radius: 3px; }

  /* TABS */
  .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--cinza-borda); margin-bottom: 16px; }
  .tab { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--cinza-texto); cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.2s; }
  .tab.ativo { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }
  .tab-content { display: none; }
  .tab-content.ativo { display: block; }

  /* TOAST */
  #toast { position: fixed; bottom: 24px; right: 24px; background: #1a2620; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13px; z-index: 9999; display: none; box-shadow: var(--sombra-modal); max-width: 320px; }
  #toast.vis { display: block; animation: fadeup 0.3s ease; }
  @keyframes fadeup { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

  /* PENDENCIA */
  .pendencia { background: #fff8e1; border: 1px solid #ffe082; border-left: 4px solid #f9a825; padding: 10px 14px; border-radius: 6px; font-size: 12px; color: #5a4000; margin-top: 10px; }

  /* PERFIL — exclusão / inativo (protótipo) */
  .perfil-inativo-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: var(--vermelho-bg);
    border: 1px solid #f5b8b8;
    color: var(--vermelho);
    font-size: 14px;
    font-weight: 600;
  }
  body.perfil-page-inativo .perfil-inativo-bar { display: flex; }
  body.perfil-page-inativo #mod-licencas {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
  }
  .perfil-zona-exclusao {
    margin: 12px 0 4px;
    padding: 12px;
    border: 1px solid #f5b8b8;
    border-radius: 8px;
    background: var(--vermelho-bg);
  }
  .perfil-zona-exclusao-titulo { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--vermelho); }
  .btn-excluir-perfil-outline { border-color: var(--vermelho); color: var(--vermelho); }
  .btn-excluir-perfil-outline:hover { background: var(--vermelho-bg); }

  /* MOCK DATE NAV */
  #mock-date-nav { display: flex; align-items: center; gap: 6px; margin-right: 12px; flex-shrink: 0; }
  #mock-date-nav .mock-date-label { color: rgba(255,255,255,0.92); font-size: 14px; font-weight: 600; margin-right: 4px; white-space: nowrap; font-family: monospace; letter-spacing: 0.02em; }
  #mock-date-nav button { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; color: white; font-size: 12px; padding: 4px 8px; cursor: pointer; line-height: 1; }
  #mock-date-nav button:hover { background: rgba(255,255,255,0.25); }

  /* PROTOTYPE DEV NAV */
  #prototipo-dev-nav { display: flex; align-items: center; gap: 6px; margin-right: 8px; flex-shrink: 0; }
  .prototipo-dev-dropdown { position: relative; }
  .prototipo-dev-dropdown-toggle { background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.45); border-radius: 4px; color: white; font-size: 12px; padding: 4px 10px; cursor: pointer; line-height: 1; white-space: nowrap; }
  .prototipo-dev-dropdown-toggle:hover { background: rgba(255,255,255,0.2); }
  .prototipo-dev-dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 200px; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 200; flex-direction: column; padding: 4px 0; }
  .prototipo-dev-dropdown-menu.aberto { display: flex; }
  .prototipo-dev-dropdown-menu button { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 0; color: var(--texto); font-size: 13px; padding: 8px 12px; cursor: pointer; line-height: 1.3; white-space: nowrap; }
  .prototipo-dev-dropdown-menu button:hover { background: var(--verde-bg); }
  .prototipo-dev-dropdown-menu button.prototipo-dev-destrutivo { color: var(--vermelho); }
  .prototipo-dev-dropdown-menu button.prototipo-dev-destrutivo:hover { background: var(--vermelho-bg); }