/* Responsive safety layer for the exported Evolk static screens. */
html {
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 900px) {
  .messages-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .messages-list {
    border-right: 0 !important;
    border-bottom: 1px solid var(--slate-200) !important;
    max-height: 240px;
  }
  .messages-thread {
    min-height: min(560px, calc(100dvh - 280px)) !important;
  }
}

@media (max-width: 520px) {
  .messages-list {
    max-height: 190px;
  }
  .messages-thread {
    min-height: calc(100dvh - 250px) !important;
  }
  .messages-layout [style*="padding:14px 20px"][style*="border-top"] {
    padding: 12px !important;
  }
}

*,
*::before,
*::after {
  min-width: 0;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
input,
select,
textarea,
x-import {
  max-width: 100%;
}

button,
[role="button"],
a,
input,
select,
textarea {
  touch-action: manipulation;
}

button,
.nav-btn,
.tab-btn,
.filter-btn {
  min-height: 40px;
}

:focus-visible {
  outline: 3px solid #2b87d3;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1100px) {
  [style*="max-width:1280px"][style*="padding:0 32px"],
  [style*="max-width:1280px"][style*="padding:28px 32px"],
  [style*="max-width:1280px"][style*="padding:40px 32px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  [style*="grid-template-columns:repeat(auto-fit, minmax(420px"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  body > x-dc > div[style*="display:flex"][style*="min-height:100vh"] {
    flex-direction: column !important;
  }

  div[style*="display"][style*="flex"][style*="min-height"][style*="100vh"] {
    flex-direction: column !important;
  }

  body > x-dc > div[style*="display:flex"][style*="min-height:100vh"] > aside[style*="width:256px"] {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--slate-200) !important;
    overflow: visible !important;
  }

  aside[style*="width"][style*="256px"] {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--slate-200) !important;
    overflow: visible !important;
  }

  aside[style*="width:256px"] > div:first-child,
  aside[style*="width:256px"] > div:last-child {
    padding: 12px 16px !important;
  }

  aside[style*="width"][style*="256px"] > div:first-child,
  aside[style*="width"][style*="256px"] > div:last-child {
    padding: 12px 16px !important;
  }

  /* Cabecalho enxuto no mobile: mais area util pro conteudo */
  aside[style*="width"][style*="256px"] > div:first-child {
    padding: 8px 12px !important;
  }

  aside[style*="width:256px"] nav {
    flex: none !important;
    flex-direction: row !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 8px 12px !important;
    scrollbar-width: thin;
  }

  aside[style*="width"][style*="256px"] nav {
    flex: none !important;
    flex-direction: row !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 8px 12px !important;
    scrollbar-width: thin;
  }

  aside[style*="width:256px"] .nav-section-label {
    display: none !important;
  }

  aside[style*="width"][style*="256px"] .nav-section-label {
    display: none !important;
  }

  aside[style*="width:256px"] .nav-btn {
    width: auto !important;
    min-width: max-content !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
  }

  aside[style*="width"][style*="256px"] .nav-btn {
    width: auto !important;
    min-width: max-content !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
  }

  main[style*="margin-left:256px"] {
    width: 100% !important;
    margin-left: 0 !important;
  }

  main[style*="margin-left"][style*="256px"] {
    width: 100% !important;
    margin-left: 0 !important;
  }

  main[style*="margin-left:256px"] > div[style*="padding:28px 32px"] {
    padding: 22px 18px !important;
  }

  main[style*="margin-left"][style*="256px"] > div[style*="padding"][style*="28px"][style*="32px"] {
    padding: 22px 18px !important;
  }

  main[style*="margin-left:256px"] > div[style*="position:sticky"][style*="top:0"] {
    position: relative !important;
    padding: 14px 18px !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  main[style*="margin-left"][style*="256px"] > div[style*="position"][style*="sticky"][style*="top"] {
    position: relative !important;
    padding: 14px 18px !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  [style*="grid-template-columns:1fr 340px"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns"][style*="1fr"][style*="340px"]:not(.table-head):not(.table-row) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  [style*="padding:0 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="padding"][style*="32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="padding:64px 0 80px"],
  [style*="padding:72px 0"] {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }

  header [style*="height:72px"] {
    height: auto !important;
    min-height: 72px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  header [style*="height"][style*="72px"] {
    height: auto !important;
    min-height: 72px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  header [style*="gap"][style*="12px"][style*="flex-shrink"] {
    flex: 1 0 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  header nav[style*="gap:28px"] {
    order: 3 !important;
    flex: 1 0 100% !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding: 2px 0 4px !important;
  }

  header nav[style*="gap"][style*="28px"] {
    order: 3 !important;
    flex: 1 0 100% !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding: 2px 0 4px !important;
  }

  header nav[style*="gap:28px"] button {
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  header nav[style*="gap"][style*="28px"] button {
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  [style*="font-size:46px"] {
    font-size: 34px !important;
    line-height: 1.16 !important;
  }

  [style*="font-size:42px"],
  [style*="font-size:38px"] {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }

  [style*="font-size:17px"],
  [style*="font-size:18px"] {
    line-height: 1.55 !important;
  }

  [style*="box-shadow:var(--shadow-xl)"][style*="padding:24px"],
  [style*="box-shadow:var(--shadow-xl)"][style*="padding:28px"] {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  [style*="padding:48px"] {
    padding: 28px !important;
  }

  [style*="padding:40px"] {
    padding: 28px !important;
  }

  [style*="grid-template-columns:minmax(220px,1.4fr)"],
  [style*="grid-template-columns:minmax(240px,1.5fr)"],
  [style*="grid-template-columns:minmax(240px,1.3fr)"],
  [style*="grid-template-columns:repeat(auto-fit, minmax(380px"],
  [style*="grid-template-columns:repeat(auto-fit, minmax(340px"],
  [style*="grid-template-columns:repeat(auto-fit, minmax(320px"],
  [style*="grid-template-columns:repeat(auto-fit, minmax(280px"],
  [style*="grid-template-columns:repeat(auto-fit, minmax(230px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(240px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(160px"],
  [style*="grid-template-columns:48px minmax"],
  [style*="grid-template-columns:minmax(240px,1fr)"],
  [style*="grid-template-columns:minmax(0,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns"][style*="minmax"]:not(.table-head):not(.table-row),
  [style*="grid-template-columns"][style*="repeat(auto-fit"]:not(.table-head):not(.table-row),
  [style*="grid-template-columns"][style*="repeat(auto-fill"]:not(.table-head):not(.table-row) {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns"][style*="1fr 1fr"][style*="gap"][style*="12px"],
  [style*="grid-template-columns"][style*="1fr 1fr"][style*="gap"][style*="14px"],
  [style*="grid-template-columns"][style*="1fr 1fr"][style*="gap"][style*="16px"],
  [style*="grid-template-columns"][style*="repeat(3"][style*="1fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="min-width"][style*="240px"],
  [style*="min-width"][style*="220px"] {
    min-width: 0 !important;
  }

  [style*="grid-template-columns:minmax("] > x-import,
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] x-import,
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] x-import,
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] x-import,
  .field-row x-import[hint-size*="100%,"] {
    width: 100% !important;
  }

  /* IMPORTANTE: overflow aqui vale so pra .table-wrap. Aplicar em
     .section-card criava contexto de scroll no card inteiro e RECORTAVA os
     paineis de sugestao (autocomplete) que sao position:absolute — o dropdown
     ficava cortado na borda do card no mobile. As tabelas largas ja vivem
     dentro de .table-wrap, entao o card nao precisa rolar. */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Barra de rolagem sempre visivel quando o conteudo (ex: tabela larga)
       transborda -- sem isso, colunas ficam escondidas sem nenhuma pista de
       que da pra arrastar pro lado (ex: tabelas de Cursos no perfil). */
    scrollbar-width: thin;
    scrollbar-color: var(--slate-400) var(--slate-100);
  }

  .table-wrap::-webkit-scrollbar {
    height: 8px;
  }

  .table-wrap::-webkit-scrollbar-track {
    background: var(--slate-100);
    border-radius: 4px;
  }

  .table-wrap::-webkit-scrollbar-thumb {
    background: var(--slate-400);
    border-radius: 4px;
  }

  .table-head,
  .table-row {
    min-width: 640px !important;
  }

  .table-head > *,
  .table-row > * {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kanban-col {
    flex: 0 0 260px !important;
  }

  [style*="position:fixed"][style*="inset:0"][style*="justify-content:center"] {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  [style*="max-height:calc(100vh - 48px)"] {
    max-height: calc(100dvh - 24px) !important;
  }

  [style*="justify-content:flex-end"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 520px) {
  aside[style*="width:256px"] > div:last-child {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  aside[style*="width:256px"] > div:last-child [style*="font-size:11px"] {
    display: none !important;
  }

  /* Botao de feedback flutuante encobria o "Sair" no rodape da sidebar
     mobile. Encolhe pra so o icone + contador. */
  #evolk-fb-btn {
    padding: 10px !important;
    gap: 0 !important;
  }

  #evolk-fb-btn > span:nth-child(2) {
    display: none !important;
  }

  header [style*="gap:12px; flex-shrink:0"] {
    flex: 1 0 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  [style*="font-size:46px"],
  [style*="font-size:42px"],
  [style*="font-size:38px"] {
    font-size: 30px !important;
  }

  [style*="display:flex"][style*="justify-content:space-between"] {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  [style*="display"][style*="flex"][style*="justify-content"][style*="space-between"] {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  [style*="display"][style*="inline-flex"][style*="gap"][style*="6px"] {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  [style*="display"][style*="inline-flex"][style*="gap"][style*="6px"] .sc-interp {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  [style*="display:flex"][style*="justify-content:flex-end"] > x-import[component-from-global-scope*="Button"] {
    flex: 1 1 140px !important;
  }

  .section-card {
    padding: 18px !important;
  }

  .table-head,
  .table-row {
    min-width: 580px !important;
  }
}

.public-mobile-menu-toggle,
.mobile-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: #fff;
  color: var(--slate-800);
  cursor: pointer;
}

.public-mobile-menu-toggle span,
.mobile-sidebar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.public-mobile-menu-toggle,
.mobile-sidebar-toggle {
  flex-direction: column;
  gap: 4px;
}

.public-mobile-menu {
  display: none;
}

.mobile-filter-bar,
.public-filter-mobile-close,
.public-filter-mobile-footer {
  display: none;
}

.responsive-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 54;
  border: 0;
  /* Camada semitransparente + leve desfoque do conteudo ao fundo enquanto a
     sidebar/filtro esta aberto. Tocar aqui fecha (handler em responsive.js). */
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

/* Identificador de contexto ("ÁREA DO CANDIDATO" etc): pill discreto, nao
   banner. Vale para candidato/empresa/admin — os estilos inline antigos sao
   sobrescritos com !important. */
.area-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: var(--slate-400) !important;
  background: transparent !important;
  border: 1px solid var(--slate-200);
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: .08em !important;
  white-space: nowrap;
  line-height: 1.6;
}
/* No mobile fica so o papel ("CANDIDATO") — o prefixo "ÁREA DO" nao cabe
   ao lado do menu + logo em telas estreitas. */
@media (max-width: 900px) {
  .area-label-pre { display: none; }
}

/* Logo clicavel: area de toque confortavel + feedback */
.sidebar-logo-btn {
  border: 0;
  background: none;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 8px;
  min-height: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background .15s ease, transform .12s ease;
}
.sidebar-logo-btn:active { transform: scale(.96); }

/* Hamburguer -> X quando a sidebar esta aberta (as 3 barras viram duas
   diagonais). Ajuda o usuario a saber o estado atual do menu. */
.mobile-sidebar-toggle span {
  transition: transform .2s ease, opacity .15s ease;
}
body.mobile-sidebar-open .mobile-sidebar-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.mobile-sidebar-open .mobile-sidebar-toggle span:nth-child(2) {
  opacity: 0;
}
body.mobile-sidebar-open .mobile-sidebar-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
  /* Sidebar abre pela ESQUERDA -> o gatilho tambem fica a esquerda (padrao
     mobile: o menu nasce de onde voce toca). */
  .mobile-sidebar-toggle {
    display: inline-flex !important;
    order: -1;
    margin-left: 0;
    margin-right: 2px;
    flex: 0 0 auto;
  }

  aside[style*="width"][style*="256px"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 56 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--slate-200) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
  }

  aside[style*="width"][style*="256px"] > div:first-child > div {
    width: 100% !important;
  }

  aside[style*="width"][style*="256px"] nav,
  aside[style*="width"][style*="256px"] .sidebar-plan-card,
  aside[style*="width"][style*="256px"] .sidebar-account-footer,
  aside[style*="width"][style*="256px"] > div:last-child {
    display: none !important;
  }

  body.mobile-sidebar-open {
    overflow: hidden;
  }

  body.mobile-filter-open {
    overflow: hidden;
  }

  body.mobile-sidebar-open .responsive-scrim,
  body.mobile-filter-open .responsive-scrim {
    display: block;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(320px, 86vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    border-right: 1px solid var(--slate-200) !important;
    border-bottom: 0 !important;
    box-shadow: 18px 0 48px rgba(15, 23, 42, 0.18) !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] .sidebar-plan-card {
    display: flex !important;
    margin-top: auto !important;
    margin-bottom: 12px !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] .sidebar-account-footer {
    display: flex !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] > div:last-child {
    display: flex !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] .nav-section-label {
    display: block !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] .nav-btn {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    min-height: 42px !important;
    text-align: left !important;
    white-space: normal !important;
    column-gap: 10px !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] .nav-label {
    justify-self: start !important;
    text-align: left !important;
    width: 100% !important;
  }

  body.mobile-sidebar-open aside[style*="width"][style*="256px"] .nav-badge {
    justify-self: end !important;
  }

  [style*="grid-template-columns"][style*="300px 1fr"] {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  [style*="grid-template-columns"][style*="300px 1fr"] > div:first-child {
    max-height: 220px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--slate-200) !important;
  }

  [style*="grid-template-columns"][style*="300px 1fr"] > div:nth-child(2) {
    min-height: 420px !important;
  }

  .chat-item {
    min-height: 58px;
  }

  .bubble {
    max-width: 92% !important;
  }

  .kanban-col {
    flex: 0 0 min(82vw, 320px) !important;
    min-width: min(82vw, 320px) !important;
  }

  .company-jobs-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .company-jobs-table .table-head,
  .company-jobs-table .table-row {
    min-width: 820px !important;
    grid-template-columns: minmax(220px, 2fr) minmax(170px, 1.2fr) 110px 150px 110px 96px !important;
  }

  .company-job-modal-shell {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(10px, env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .company-job-modal {
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
  }

  .company-job-modal-grid {
    grid-template-columns: 1fr !important;
  }

  .company-job-criteria-grid {
    grid-template-columns: 1fr !important;
  }

  .company-job-modal-actions {
    position: sticky;
    bottom: -18px;
    margin: 0 -18px -18px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #fff;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
  }

  [style*="overflow-x"][style*="auto"] > .kanban-col:first-child {
    margin-left: 1px;
  }

  .public-results-layout {
    padding-top: 18px !important;
    gap: 16px !important;
  }

  .mobile-filter-bar {
    display: block;
  }

  .mobile-filter-button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--brand-200);
    border-radius: 12px;
    background: #fff;
    color: var(--slate-900);
    box-shadow: var(--shadow-sm);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    padding: 0 14px;
    cursor: pointer;
  }

  .mobile-filter-button span:last-child {
    flex: 0 0 auto;
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 700;
  }

  .public-filter-panel {
    position: fixed !important;
    z-index: 60 !important;
    inset: auto 10px 0 !important;
    width: auto !important;
    flex: none !important;
    max-height: min(74dvh, 620px) !important;
    overflow-y: auto !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 18px 18px calc(16px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.22) !important;
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .public-filter-panel.mobile-filter-panel-open,
  body.mobile-filter-open-jobs [data-filter-panel="jobs"],
  body.mobile-filter-open-candidates [data-filter-panel="candidates"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .public-filter-panel-head {
    position: sticky;
    top: -18px;
    z-index: 1;
    margin: -18px -18px 0;
    padding: 16px 18px 12px;
    background: #fff;
    border-bottom: 1px solid var(--slate-100);
  }

  .public-filter-mobile-close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: #fff;
    color: var(--slate-700);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .public-filter-mobile-footer {
    display: block;
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin: 0 -18px calc(-16px - env(safe-area-inset-bottom));
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--slate-100);
  }

  .public-filter-apply {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--brand-600);
    border-radius: 12px;
    background: var(--brand-600);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
  }
}

@media (max-width: 760px) {
  header [style*="height"][style*="72px"] {
    min-height: 64px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }

  header [style*="height"][style*="72px"] > nav,
  header [style*="height"][style*="72px"] > div[style*="gap"][style*="12px"][style*="flex-shrink"] {
    display: none !important;
  }

  .public-mobile-menu-toggle {
    display: inline-flex !important;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .public-mobile-menu,
  .public-mobile-menu:not([hidden]) {
    display: none !important;
  }

  body.public-menu-open .public-mobile-menu {
    display: grid !important;
    gap: 16px;
    padding: 12px 16px 18px;
    border-top: 1px solid var(--slate-100);
    background: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  }

  .public-mobile-menu-nav {
    display: grid;
    gap: 4px;
  }

  .public-mobile-menu-nav button {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--slate-800);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
  }

  .public-mobile-menu-nav button:hover,
  .public-mobile-menu-nav button:focus-visible {
    background: var(--surface-blue-50);
    color: var(--brand-700);
  }

  .public-mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .public-mobile-auth {
    min-height: 44px;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
  }

  .public-mobile-auth.secondary {
    border: 1px solid var(--slate-200);
    background: #fff;
    color: var(--slate-800);
  }

  .public-mobile-auth.primary {
    border: 1px solid var(--brand-600);
    background: var(--brand-600);
    color: #fff;
  }

  .public-results-layout {
    padding-top: 18px !important;
    gap: 16px !important;
  }

  .mobile-filter-bar {
    display: block;
  }

  .mobile-filter-button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--brand-200);
    border-radius: 12px;
    background: #fff;
    color: var(--slate-900);
    box-shadow: var(--shadow-sm);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    padding: 0 14px;
    cursor: pointer;
  }

  .mobile-filter-button span:last-child {
    flex: 0 0 auto;
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 700;
  }

  .public-filter-panel {
    position: fixed !important;
    z-index: 60 !important;
    inset: auto 10px 0 !important;
    width: auto !important;
    flex: none !important;
    max-height: min(74dvh, 620px) !important;
    overflow-y: auto !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 18px 18px calc(16px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.22) !important;
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .public-filter-panel.mobile-filter-panel-open,
  body.mobile-filter-open-jobs [data-filter-panel="jobs"],
  body.mobile-filter-open-candidates [data-filter-panel="candidates"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .public-filter-panel-head {
    position: sticky;
    top: -18px;
    z-index: 1;
    margin: -18px -18px 0;
    padding: 16px 18px 12px;
    background: #fff;
    border-bottom: 1px solid var(--slate-100);
  }

  .public-filter-mobile-close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    background: #fff;
    color: var(--slate-700);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .public-filter-mobile-footer {
    display: block;
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin: 0 -18px calc(-16px - env(safe-area-inset-bottom));
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--slate-100);
  }

  .public-filter-apply {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--brand-600);
    border-radius: 12px;
    background: var(--brand-600);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
  }

  .auth-side {
    padding: 10px 16px 28px !important;
  }

  .story {
    padding: 20px 18px 8px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .story .logo {
    width: 144px !important;
    margin-bottom: 0 !important;
  }

  .story .eyebrow,
  .story h1,
  .story .lead,
  .story .benefits,
  .story .back-link {
    display: none !important;
  }

  .auth-card {
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22) !important;
  }

  .card-scroll {
    padding: 20px 18px 24px !important;
  }

  .access-icon {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Padroes compartilhados (candidato / empresa / admin): chat, filtros,
   estados vazios, skeleton e linguagem de movimento.
   ══════════════════════════════════════════════════════════════════════ */
/* ── Chat ──────────────────────────────────────────────────────────────
   Padrao de app de mensagens: lista (avatar, nome, previa, hora, nao
   lidas) -> conversa em tela cheia no mobile com voltar; compositor
   colado no rodape. */
.chat-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; padding:28px 20px; }
.chat-empty .empty-state-texto { max-width:280px; }
.chat-badge-naolida { flex-shrink:0; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--brand-600); color:#fff; font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(43,135,211,.16); }
.chat-voltar { display:none; width:34px; height:34px; min-height:0; flex-shrink:0; border:1px solid var(--slate-200); background:#fff; border-radius:9px; color:var(--slate-600); cursor:pointer; align-items:center; justify-content:center; }
.chat-voltar:active { transform:scale(.94); }
.chat-compositor { padding:12px 14px; border-top:1px solid var(--slate-200); display:flex; gap:10px; align-items:center; background:#fff; }
.chat-compositor-input { flex:1; min-width:0; }
/* Enviar nunca encolhe (no mobile o input tentava tomar toda a largura) */
.chat-compositor button { flex-shrink:0; }
/* O FAB de Feedback fica exatamente sobre o "Enviar" quando a conversa esta
   aberta no mobile — sobe pra nao cobrir o compositor. */
@media (max-width: 900px) {
  body:has(.messages-layout.chat-com-thread) #evolk-fb-btn { bottom: 88px !important; }
}
.chat-anexo-btn { width:40px; height:40px; min-height:0; flex-shrink:0; border:1px solid var(--slate-300); border-radius:10px; color:var(--slate-600); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease, transform .12s ease; }
.chat-anexo-btn:hover { background:var(--surface-blue-50); border-color:var(--brand-200); color:var(--brand-700); }
.chat-anexo-btn:active { transform:scale(.92); background:var(--surface-blue-100); }
@media (max-width: 900px) {
  /* Uma tela por vez: lista OU conversa (com botao de voltar) */
  /* Altura DEFINIDA (104px = topo do layout + respiro no rodape) pro
     compositor encostar na dobra; a rolagem fica no corpo da conversa.
     Seletores com 2 classes pra vencer os !important antigos do
     responsive.css (que sao de 1 classe so). */
  .messages-layout { grid-template-columns:1fr !important; height:calc(100dvh - 104px) !important; min-height:0 !important; }
  .messages-layout .messages-list { max-height:none !important; min-height:0 !important; border-bottom:0 !important; }
  .messages-layout .messages-thread { min-height:0 !important; height:100%; }
  .messages-layout:not(.chat-com-thread) .messages-thread { display:none !important; }
  .messages-layout.chat-com-thread .messages-list { display:none !important; }
  .chat-voltar { display:inline-flex; }
}

/* ── Filtros de candidaturas: barra rolavel com dica de scroll ────────── */
.filtros-barra { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:10px 12px; background:#fff; border:1px solid var(--slate-200); border-radius:12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; position:relative; }
.filtros-barra::-webkit-scrollbar { display:none; }
.filtros-barra .filter-btn { flex:0 0 auto; min-height:38px; transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
.filtros-barra .filter-btn:active { transform:scale(.96); }
.filtros-barra .filter-btn[data-ativo="1"] { box-shadow:0 2px 10px rgba(43,135,211,.32); }
.filtros-wrap { position:relative; }
/* Dica de que ha mais opcoes pro lado (some quando chega no fim) */
.filtros-wrap::after { content:''; position:absolute; top:1px; right:1px; bottom:1px; width:34px; border-radius:0 12px 12px 0; background:linear-gradient(90deg, rgba(255,255,255,0), #fff 72%); pointer-events:none; opacity:1; transition:opacity .2s ease; }
.filtros-wrap[data-fim="1"]::after { opacity:0; }
.filtros-contagem { font-size:12.5px; color:var(--slate-400); padding:0 2px; white-space:nowrap; }

/* ── Cabecalho de area: identificador discreto, nao banner ───────────── */
.area-label { font-size:9.5px !important; font-weight:700 !important; color:var(--slate-400) !important; background:transparent !important; border:1px solid var(--slate-200); padding:2px 8px !important; border-radius:999px !important; letter-spacing:.08em !important; white-space:nowrap; line-height:1.6; }
.sidebar-logo-btn { border:none; background:none; padding:4px 6px; margin:-4px -6px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; min-height:0; transition:background .15s ease, transform .12s ease; }
.sidebar-logo-btn:hover { background:var(--surface-blue-50); }
.sidebar-logo-btn:active { transform:scale(.96); }

/* ── Movimento: sutil, consistente e desligavel ──────────────────────── */
@keyframes evolkEntrada { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes evolkPulseGlow { 0%,100% { box-shadow:0 0 0 0 rgba(43,135,211,.28); } 50% { box-shadow:0 0 0 7px rgba(43,135,211,0); } }
@keyframes evolkSkeleton { 0% { background-position:-180px 0; } 100% { background-position:calc(180px + 100%) 0; } }
.anim-entrada { animation:evolkEntrada .26s ease both; }
.section-card, .curso-card, .candidatura-card, .idioma-card, .empty-state, .chat-empty { animation:evolkEntrada .26s ease both; }
/* Feedback de toque + elevacao ao pressionar */
.section-card, .curso-card, .candidatura-card, .idioma-card { transition:box-shadow .18s ease, transform .14s ease, border-color .18s ease; }
.candidatura-card:active, .curso-card:active, .idioma-card:active { transform:translateY(1px) scale(.995); box-shadow:var(--shadow-sm); }
.candidatura-card:hover { box-shadow:var(--shadow-md, 0 6px 18px rgba(15,23,42,.08)); border-color:var(--brand-200); }
.nav-btn { transition:background .16s ease, color .16s ease, transform .12s ease; }
.nav-btn:active { transform:scale(.985); }
.tab-btn { transition:background .18s ease, color .18s ease, transform .12s ease; }
.tab-btn:active { transform:scale(.96); }
.pencil-btn, .icon-btn-remove { transition:background .15s ease, transform .12s ease, color .15s ease; }
.pencil-btn:active, .icon-btn-remove:active { transform:scale(.92); }
.chat-item { transition:background .16s ease, transform .12s ease; }
.chat-item:active { transform:scale(.99); }
/* Glow so onde reforca acao/estado: badge de nao lida, item ativo do
   menu e barra de progresso. */
.nav-btn[data-ativo="1"] { box-shadow:inset 3px 0 0 var(--brand-600); }
.nav-badge { animation:evolkPulseGlow 2.6s ease-in-out infinite; }
.barra-progresso-fill { transition:width .6s cubic-bezier(.4,0,.2,1); animation:barraProgressoPulso 2.4s ease-in-out infinite; }
/* Pulsacao discreta pra chamar o olho sem virar pisca-pisca: so o brilho varia,
   a largura fica firme (senao parece que a completude esta oscilando). */
@keyframes barraProgressoPulso {
  0%, 100% { opacity:1; filter:saturate(1); }
  50%      { opacity:.82; filter:saturate(1.25); }
}
.skeleton { background:linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 37%, var(--slate-100) 63%); background-size:180px 100%; animation:evolkSkeleton 1.1s linear infinite; border-radius:8px; }
.tour-card { animation:evolkEntrada .22s ease both; }
@media (prefers-reduced-motion: reduce) {
  .anim-entrada, .section-card, .curso-card, .candidatura-card, .idioma-card,
  .empty-state, .chat-empty, .nav-badge, .skeleton, .tour-card { animation:none !important; }
  * { transition-duration:.01ms !important; }
}
/* Chips de escolaridade no Perfil (mesmo estilo do pill "Foto obrigatória").
   Clicar no chip navega pro quadro do nivel em Qualificacoes; o × desmarca
   o nivel seguindo a mesma cadeia de pre-requisitos dos checkboxes. */
.escolaridade-chip { font-size:11px; font-weight:700; color:var(--brand-700); background:var(--surface-blue-100); padding:5px 8px 5px 10px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.escolaridade-chip:hover { background:var(--brand-100); }
/* min-height:0 anula o "button { min-height:40px }" global do
   responsive.css, que estufava o chip inteiro. */
.escolaridade-chip-x { border:none; background:transparent; color:var(--slate-400); width:14px; height:14px; min-height:0 !important; min-width:0; border-radius:50%; cursor:pointer; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; font-weight:600; margin:-2px -2px -2px 0; }
.escolaridade-chip-x:hover { color:#fff; background:var(--error-500); }
/* Cabecalho do chat: no desktop mostra "Denunciar empresa" completo; no
   mobile encurta pra "Denunciar" e as acoes quebram pra segunda linha
   (o container ja tem flex-wrap:wrap) pra nao esmagar o titulo. */
.msg-action-short { display:none; }
.msg-action-full { display:inline; }
@media (max-width: 760px) {
  .cursos-table-wrap, .candidaturas-table-wrap, .idiomas-table-wrap { display:none !important; }
  .cursos-cards, .candidaturas-cards, .idiomas-cards { display:flex !important; flex-direction:column; gap:12px; }
  .msg-action-full { display:none; }
  .msg-action-short { display:inline; }
  .messages-thread-head-actions { flex-basis:100%; justify-content:flex-end; padding-top:6px; margin-top:2px; border-top:1px solid var(--slate-100); }
}
.table-head { display:grid; padding:12px 20px; background:var(--slate-50); border-bottom:1px solid var(--slate-200); font-size:11px; font-weight:700; color:var(--slate-400); letter-spacing:0.06em; text-transform:uppercase; }
.table-row { display:grid; padding:14px 20px; border-bottom:1px solid var(--slate-100); align-items:center; font-size:13px; }
.table-row:last-child { border-bottom:none; }
.tab-btn { border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; padding:8px 18px; border-radius:8px; transition:all 0.15s; }
.filter-btn { border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; padding:7px 16px; border-radius:var(--radius-full); }
.section-card { background:#fff; border:1px solid var(--slate-200); border-radius:14px; padding:24px; box-shadow:var(--shadow-sm); }
.job-card { background:#fff; border:1px solid var(--slate-200); border-radius:14px; padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px; }
.job-tag { font-size:11px; font-weight:600; color:var(--slate-600); background:var(--slate-100); padding:3px 9px; border-radius:6px; }
.star-btn { border:none; background:none; cursor:pointer; font-size:18px; line-height:1; padding:2px; }
.chat-item { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:10px; cursor:pointer; transition:background .15s; }
.chat-item:hover { background:var(--slate-50); }
.chat-item.active { background:var(--surface-blue-100); }
.avatar-circle { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.bubble { max-width:78%; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5; }
.bubble.them { background:var(--slate-100); color:var(--slate-800); align-self:flex-start; }
.bubble.me { background:var(--brand-700); color:#fff; align-self:flex-end; }
.bubble.sistema { background:var(--warning-100); color:var(--warning-800); align-self:center; max-width:92%; text-align:center; font-weight:600; }
.field-row { display:flex; flex-direction:column; gap:4px; min-width:0; }
.campo-destacado { outline:2px solid var(--warning-500); outline-offset:5px; border-radius:10px; animation:campoDestacadoPulse 1.6s ease-in-out 2; }
@keyframes campoDestacadoPulse { 0%,100% { outline-color:var(--warning-500); } 50% { outline-color:var(--warning-200); } }
/* Recado junto ao primeiro campo pendente: o contorno sozinho nao dizia por
   que aquele campo estava marcado nem o que ganhar preenchendo (item 4). */
.campo-destacado-primeiro::after {
  content: "Comece por aqui! Preencher este campo deixa seu perfil bem mais forte para as empresas.";
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--warning-100, #FEF3C7);
  color: var(--warning-800, #92400E);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
/* Cada campo tem o seu proprio recado (data-dica vem do template). A frase
   generica acima continua valendo pra qualquer campo que ainda nao tenha uma. */
.campo-destacado-primeiro[data-dica]::after { content: attr(data-dica); }
.field-label { font-size:11px; font-weight:700; color:var(--slate-400); letter-spacing:0.04em; text-transform:uppercase; }
.field-value { font-size:14px; color:var(--slate-800); font-weight:500; word-break:break-word; overflow-wrap:anywhere; }
.profile-edit-control { width:100%; height:42px; padding:0 12px; border:1px solid var(--slate-300); border-radius:9px; outline:none; color:var(--slate-800); background:#fff; font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.profile-edit-control:focus { border-color:var(--action); box-shadow:0 0 0 3px rgba(43,135,211,.18); }
.autocomplete-wrap { position:relative; width:100%; }
/* max-height ~= 5 opcoes; o resto rola dentro da propria lista (nunca
   estica o card nem fica cortado pelo container pai). */
.suggestion-panel { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80; background:#fff; border:1px solid var(--slate-200); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; gap:3px; max-height:248px; overflow-y:auto; overscroll-behavior:contain; }
.suggestion-vazio { padding:10px; font-size:12px; color:var(--slate-400); text-align:center; }
.suggestion-option { border:none; background:#fff; cursor:pointer; width:100%; text-align:left; border-radius:8px; padding:9px 10px; font-family:inherit; display:flex; flex-direction:column; gap:2px; }
.suggestion-option:hover { background:var(--surface-blue-50); }
.suggestion-title { font-size:13px; font-weight:700; color:var(--slate-800); }
.suggestion-subtitle { font-size:11px; color:var(--slate-400); line-height:1.35; }
.profile-edit-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding-top:2px; }
.control-textarea { width:100%; min-height:96px; padding:10px 12px; border:1px solid var(--slate-300); border-radius:9px; outline:none; color:var(--slate-800); background:#fff; font-size:14px; font-family:inherit; line-height:1.55; resize:vertical; transition:border-color .15s, box-shadow .15s; }
.control-textarea:focus { border-color:var(--action); box-shadow:0 0 0 3px rgba(43,135,211,.18); }
.chip-removable { display:inline-flex; align-items:center; gap:6px; }
.chip-remove-btn { border:none; background:none; cursor:pointer; color:var(--brand-600); font-size:13px; line-height:1; padding:0; }
.icon-btn-remove { border:none; background:none; cursor:pointer; color:var(--error-500); font-size:12px; font-weight:600; padding:4px 6px; }
.pencil-btn { border:1px solid var(--slate-200); background:#fff; cursor:pointer; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--brand-700); flex-shrink:0; transition:background .15s, border-color .15s; }
.pencil-btn:hover { background:var(--surface-blue-50); border-color:var(--brand-200); }
.account-layout-grid { display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:18px; align-items:stretch; }
.account-layout-grid > .section-card:first-child { justify-content:center; }
@media (max-width: 820px) { .account-layout-grid { grid-template-columns:1fr; } }


.skeleton-card { pointer-events:none; }
.skeleton-card .skeleton { display:block; }

/* ─────────────────────────────────────────────────────────────────────────
   Empty states compartilhados. Nasceram no <style> do candidato.html; com
   empresa e admin passando a usar (secao 19 / roadmap), vieram pra ca — a
   definicao precisa existir onde as 3 telas enxergam.
   ───────────────────────────────────────────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:26px 18px; border:1px dashed var(--slate-200); border-radius:12px; background:var(--slate-50); }
.empty-state-icone { width:44px; height:44px; border-radius:12px; background:var(--surface-blue-100, #dbeafe); color:var(--brand-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.empty-state-titulo { font-size:14px; font-weight:700; color:var(--slate-800); }
.empty-state-texto { font-size:12.5px; color:var(--slate-500); line-height:1.55; max-width:420px; }

/* Detalhe da vaga como PAGINA (antes era modal). O botao voltar precisa de
   min-height:0 por causa do reset global de button (40px) do proprio arquivo. */
.vaga-voltar { display:inline-flex; align-items:center; gap:8px; min-height:0; align-self:flex-start; padding:8px 12px; border:1px solid var(--slate-200); border-radius:9px; background:#fff; color:var(--slate-600); font-size:13px; font-weight:700; cursor:pointer; transition:background .15s ease, color .15s ease; }
.vaga-voltar:hover { background:var(--slate-50); color:var(--brand-700); }
.vaga-pagina { display:flex; flex-direction:column; gap:16px; }
/* Pagina da vaga em duas colunas: conteudo + cartao da empresa. O cartao ocupa
   a faixa direita que ficava em branco na tela larga; no mobile empilha. */
.vaga-detalhe-grid { display:flex; gap:16px; align-items:flex-start; }
.vaga-detalhe-grid > .vaga-pagina { flex:1 1 620px; min-width:0; }
.vaga-detalhe-lateral { flex:0 1 300px; min-width:240px; position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.vaga-empresa-card, .vaga-recomendadas-card { width:100%; min-width:0; display:flex; flex-direction:column; gap:12px; }
.vaga-recomendadas-card { border-color:var(--brand-200,#b9d9f3); background:linear-gradient(180deg,var(--surface-blue-50,#f3f9fe) 0,#fff 48%); box-shadow:0 8px 24px rgba(23,86,143,.09); }
.vaga-recomendadas-titulo { display:flex; align-items:center; gap:8px; color:var(--brand-700); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.vaga-recomendadas-icone { width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; color:var(--brand-700); background:var(--surface-blue-100,#dbeefe); }
.vaga-recomendadas-icone svg { width:15px; height:15px; }
.vaga-similar-item { padding:11px; gap:6px; box-shadow:0 2px 8px rgba(15,23,42,.04); }
.vaga-similar-empresa { display:flex; align-items:center; gap:8px; min-width:0; }
.vaga-similar-logo, .vaga-similar-logo-img { width:30px; height:30px; border-radius:8px; flex:0 0 auto; }
.vaga-similar-logo { display:inline-flex; align-items:center; justify-content:center; background:var(--surface-blue-100,#dbeefe); color:var(--brand-700); font-size:10px; font-weight:800; }
.vaga-similar-logo-img { object-fit:contain; background:#fff; border:1px solid var(--slate-200); }
@media (max-width: 900px) {
  .vaga-detalhe-grid { flex-direction:column; }
  .vaga-detalhe-lateral { position:static; width:100%; min-width:0; flex:1 1 auto; }
}
.vaga-detalhe-header { display:flex; align-items:flex-start; gap:14px; }
.vaga-detalhe-logo, .vaga-detalhe-logo-img { width:52px; height:52px; border-radius:12px; flex:0 0 auto; }
.vaga-detalhe-logo { background:var(--surface-blue-100); color:var(--brand-700); font-size:17px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.vaga-detalhe-logo-img { object-fit:contain; background:#fff; border:1px solid var(--slate-200); }
.vaga-empresa-link { border:none; background:none; padding:0; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; color:var(--brand-600); min-height:0; text-align:left; }
.vaga-empresa-link:hover { color:var(--brand-dark, var(--brand-700)); text-decoration:underline; }
.vaga-empresa-outra { border:1px solid var(--slate-200); background:#fff; border-radius:10px; padding:9px 12px; cursor:pointer; font-family:inherit; text-align:left; display:flex; flex-direction:column; gap:2px; transition:border-color .15s, background .15s; }
.vaga-empresa-outra:hover { border-color:var(--action); background:var(--surface-blue-50); }
.job-geolocation-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.job-geolocation-button { min-height:32px; padding:5px 9px; border:0; background:transparent; color:var(--brand-700); font:600 12px/1.35 inherit; display:inline-flex; align-items:center; gap:6px; border-radius:8px; cursor:pointer; }
.job-geolocation-button:hover { background:var(--surface-blue-50,#f3f9fe); }
.job-geolocation-button:disabled { opacity:.6; cursor:wait; }
.job-geolocation-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.job-geolocation-icon svg { width:16px; height:16px; }
.job-geolocation-status { color:var(--slate-500); font-size:11.5px; }
.job-geolocation-status[data-status="error"] { color:var(--danger-600,#b91c1c); }
.vaga-pagina .wizard-lista { overflow:visible; max-height:none; }
.vaga-pagina .wizard-acoes { border-top:1px solid var(--slate-100); padding-top:16px; }

/* ── Card de vaga reorganizado (feedback de 06/08) ───────────────────────────
   Empresa colada na logo; "Salvar" virou bookmark no canto superior direito;
   Denunciar a esquerda e Candidatar-se a direita no rodape. Os botoes levam
   min-height:0 por causa do reset global de button (40px) deste arquivo. */
.vaga-card { background:#fff; border:1px solid var(--slate-200); border-radius:14px; box-shadow:var(--shadow-sm); padding:20px 22px; display:flex; flex-direction:column; gap:14px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.vaga-card:hover { border-color:var(--brand-400,#7bb8ea); box-shadow:var(--shadow-md, 0 6px 18px rgba(15,23,42,.08)); }
.vaga-card-topo { display:flex; align-items:flex-start; gap:12px; }
/* Paginacao do feed de vagas (10/08 v2, substituiu o lazy loading/sentinela). */
.vagas-paginacao { display:flex; align-items:center; justify-content:center; gap:6px; padding:18px 0 4px; flex-wrap:wrap; }
.vagas-pagina-nav, .vagas-pagina-num { min-width:36px; height:36px; padding:0 12px; border-radius:9px; border:1px solid var(--slate-200); background:#fff; color:var(--slate-600); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.vagas-pagina-num { padding:0; }
.vagas-pagina-nav:hover:not(:disabled), .vagas-pagina-num:hover:not([data-ativo="true"]) { border-color:var(--brand-400,#7bb8ea); color:var(--brand-700); }
.vagas-pagina-nav:disabled { opacity:.4; cursor:not-allowed; }
.vagas-pagina-num[data-ativo="true"] { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
/* Rail (Perfis completos / Vagas salvas) com a mesma largura dos cards no
   empilhamento mobile (10/08). */
@media (max-width: 900px) {
  .vagas-rail { max-width:none !important; width:100%; flex:1 1 100% !important; position:static !important; }
}
.vaga-card-logo-img { object-fit:contain; background:#fff; border:1px solid var(--slate-200); padding:4px; box-sizing:border-box; }
.vaga-card-logo { width:44px; height:44px; border-radius:10px; background:var(--surface-blue-100); color:var(--brand-700); font-size:14px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.vaga-card-empresa { font-size:12.5px; font-weight:700; color:var(--slate-500); letter-spacing:.01em; }
.vaga-card-titulo { font-size:18px; font-weight:600; color:var(--slate-900); line-height:1.3; margin-top:1px; }
.vaga-salvar { min-height:0; width:36px; height:36px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--slate-200); border-radius:10px; background:#fff; color:var(--slate-400); cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; }
.vaga-salvar:hover { color:var(--brand-600); border-color:var(--brand-400,#7bb8ea); }
.vaga-salvar[data-ativo="true"] { color:var(--brand-600); border-color:var(--brand-600); background:var(--surface-blue-50); }
.vaga-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vaga-chip { font-size:12px; color:var(--slate-600); background:var(--slate-50); border:1px solid var(--slate-200); border-radius:999px; padding:3px 10px; }
.vaga-chip-sutil { background:transparent; border-color:transparent; color:var(--slate-400); padding-inline:2px; }
.vaga-card-rodape { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--slate-100); padding-top:14px; }
.vaga-card-numeros { display:flex; align-items:center; gap:16px; }
/* flex-basis 100%: a linha de acoes ocupa a largura toda do rodape, abaixo dos
   numeros. Dividindo a linha com salario+candidatos sobravam ~160px e os botoes
   empilhavam um sobre o outro (era o que aparecia no print do feedback). O "Ver
   detalhes" ancora a esquerda via margin-right:auto no wrapper. */
.vaga-card-acoes { display:flex; gap:10px; align-items:center; flex-wrap:wrap; flex:1 1 100%; justify-content:flex-end; }
@media (max-width:760px) {
  .vaga-card { padding:16px; }
  .vaga-card-rodape { align-items:stretch; }
  .vaga-card-acoes { width:100%; }
}

/* ── Busca de vagas com sugestoes (feedback de 06/08) ────────────────────── */
.busca-campo { position:relative; }
.busca-campo > input { width:100%; padding-right:36px; }
.busca-limpar { position:absolute; right:8px; top:50%; transform:translateY(-50%); min-height:0; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:var(--slate-100); color:var(--slate-500); font-size:12px; line-height:1; cursor:pointer; }
.busca-limpar:hover { background:var(--slate-200); color:var(--slate-700); }
.busca-sugestoes { max-height:290px; overflow-y:auto; overscroll-behavior:contain; }
/* flex-direction:row e obrigatorio: .suggestion-option e column (feito pros
   autocompletes de titulo+subtitulo), e a linha da busca herdava isso — o
   termo saia centralizado com a contagem embaixo, aquele visual quebrado. */
.busca-sug-item { display:flex; flex-direction:row; align-items:center; gap:8px; width:100%; text-align:left; }
.busca-sug-item .suggestion-title { flex:1; min-width:0; }
/* Ícone de tendência: marca as opções "em alta" sem precisar de rótulo. */
.busca-sug-alta { display:inline-flex; align-items:center; gap:4px; color:var(--success,#16a34a); flex:0 0 auto; font-size:11px; font-weight:700; }

/* ── Filtros em accordion (feedback de 06/08) ────────────────────────────── */
.filtro-grupo { display:flex; flex-direction:column; gap:6px; border-bottom:1px solid var(--slate-100); padding-bottom:12px; }
.filtro-grupo:last-of-type { border-bottom:none; padding-bottom:0; }
.filtro-grupo-cabecalho { display:flex; align-items:center; gap:8px; width:100%; min-height:0; padding:6px 0; border:none; background:none; cursor:pointer; text-align:left; font-family:inherit; }
.filtro-grupo-titulo { flex:1; min-width:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); }
.filtro-grupo-cabecalho:hover .filtro-grupo-titulo { color:var(--brand-700); }
/* Contador de marcados: com o grupo fechado e o unico sinal de que ha filtro
   ativo ali dentro. */
.filtro-grupo-contagem { flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--brand-600); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.filtro-grupo-seta { flex:0 0 auto; display:inline-flex; color:var(--slate-400); transition:transform .18s ease; }
.filtro-grupo-seta[data-aberto="false"] { transform:rotate(-90deg); }

/* ── Campo de data com calendario (feedback de 06/08) ────────────────────── */
.data-campo { position:relative; }
.data-campo > input { width:100%; padding-right:38px; }
/* O <input type=date> fica invisivel por cima do icone: o clique abre o
   calendario nativo do navegador sem precisar de biblioteca. */
.data-calendario { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; color:var(--slate-400); cursor:pointer; }
.data-calendario:hover { color:var(--brand-600); background:var(--slate-100); }
.data-nativo { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; padding:0; }
.campo-erro { font-size:11.5px; color:var(--error-600,#dc2626); line-height:1.45; margin-top:6px; }

/* ── Sub-abas do Perfil Profissional em faixa rolavel (feedback de 06/08) ───
   Eram 8 botoes com flex-wrap: no celular viravam 3-4 linhas e empurravam o
   conteudo pra baixo da dobra. Agora é uma linha so, rolavel, com setas. */
.abas-wrap { display:flex; align-items:center; gap:4px; background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:6px; }
.abas-trilho { display:flex; gap:4px; overflow-x:auto; flex:1; min-width:0; scrollbar-width:none; }
.abas-trilho::-webkit-scrollbar { display:none; }
.abas-trilho > .tab-btn { flex:0 0 auto; white-space:nowrap; }
.abas-seta { min-height:0; width:28px; height:32px; flex:0 0 auto; display:none; align-items:center; justify-content:center; border:none; border-radius:8px; background:var(--slate-50); color:var(--slate-500); cursor:pointer; }
.abas-seta:hover { background:var(--slate-100); color:var(--brand-700); }
/* Setas só quando ha o que rolar — o JS liga/desliga via data-visivel. */
.abas-seta[data-visivel="true"] { display:inline-flex; }

/* ── Indicador de pendencia em campo nao preenchido (feedback de 07/08) ─────
   Campo vazio virava um espaco em branco e o candidato nao percebia que
   faltava algo. Agora o valor diz "Não informado" e fica em ambar discreto,
   com um ponto antes — sem parecer erro, so pendencia. */
.field-value[data-pendente="true"] { color:var(--warning-700,#b45309); font-style:italic; display:inline-flex; align-items:center; gap:6px; }
.field-value[data-pendente="true"]::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--warning-500,#f59e0b); flex:0 0 auto; }

/* Formulario de experiencia inline (feedback de 07/08). Borda destacada pra
   separar o que esta sendo editado da lista logo abaixo. */
.exp-form { display:flex; flex-direction:column; gap:16px; border-color:var(--brand-400,#7bb8ea); }