/* =============================================================
   FOOD VAGAS — DESIGN SYSTEM
   Marca: azul royal #1630CE  ·  Tipografia: Inter  ·  Mobile-first
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* marca */
  --azul-royal:        #1630CE;
  --azul-royal-escuro: #0E218F;
  --azul-profundo:     #091859;
  --azul-claro:        #DDE4FF;
  --azul-gelo:         #F2F5FF;

  /* neutros */
  --branco:            #FFFFFF;
  --off-white:         #F8F9FC;
  --cinza-claro:       #E8EAF0;
  --cinza-borda-forte: #CDD2E0;
  --cinza-medio:       #73798C;
  --cinza-texto:       #656B7E;   /* versao com contraste aprovado p/ texto pequeno */
  --cinza-grafite:     #252836;

  /* estados */
  --sucesso:        #067647;
  --sucesso-bg:     #ECFDF3;
  --sucesso-solido: #12B76A;
  --erro:           #B42318;
  --erro-bg:        #FEF3F2;
  --erro-solido:    #D92D20;
  --alerta:         #B54708;
  --alerta-bg:      #FFFAEB;
  --alerta-borda:   #FEDF89;
  --alerta-solido:  #F79009;
  --whatsapp:       #25D366;
  --whatsapp-hover: #1FB855;

  /* papeis */
  --bg-pagina:      var(--off-white);
  --bg-superficie:  var(--branco);
  --bg-sutil:       var(--azul-gelo);
  --bg-destaque:    var(--azul-claro);
  --bg-inverso:     var(--azul-profundo);
  --texto:          var(--cinza-grafite);
  --texto-fraco:    var(--cinza-texto);
  --borda:          var(--cinza-claro);

  /* tipografia */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* cantos */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 14px;
  --raio-full: 999px;

  /* sombras (azuladas, para casar com a marca) */
  --sombra-sm: 0 1px 2px rgba(9, 24, 89, .06);
  --sombra-md: 0 4px 12px rgba(9, 24, 89, .08);
  --sombra-lg: 0 12px 28px rgba(9, 24, 89, .12);

  /* espacamento (escala de 4px) */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --largura: 1060px;
  --topbar-altura: 64px;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* 16px e obrigatorio: abaixo disso o iPhone da zoom ao focar um campo */
  font: 400 16px/1.6 var(--fonte);
  color: var(--texto);
  background: var(--bg-pagina);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e3); line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; font-weight: 600; }
h3 { font-size: 1.125rem; font-weight: 600; }
p  { margin: 0 0 var(--e4); }

a { color: var(--azul-royal); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }
svg { display: block; }

/* Foco visivel para quem navega por teclado (exigencia de acessibilidade) */
:focus-visible {
  outline: 2px solid var(--azul-royal);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

.oculto { display: none !important; }
.so-leitor-tela {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. LAYOUT ---------- */
.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--e4); }
.container-estreito { max-width: 460px; }
.container-medio { max-width: 720px; }

.pagina { padding: var(--e5) 0 var(--e8); }

.topbar {
  background: var(--bg-superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  height: var(--topbar-altura);
  display: flex; align-items: center; gap: var(--e5);
  max-width: var(--largura); margin: 0 auto; padding: 0 var(--e4);
}
.topbar-logo { display: flex; align-items: center; gap: var(--e2); color: var(--azul-royal); }
.topbar-logo svg { width: 132px; height: auto; }
.topbar-nav {
  margin-left: auto; display: flex; align-items: center; gap: var(--e2);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav a { flex-shrink: 0; }
.topbar-nav a {
  color: var(--texto-fraco); padding: var(--e2) var(--e3);
  border-radius: var(--raio-md); font-size: .9375rem; font-weight: 500;
}
.topbar-nav a:hover { background: var(--bg-sutil); color: var(--azul-royal); text-decoration: none; }
.topbar-nav a.ativo { color: var(--azul-royal); background: var(--bg-sutil); }
/* .topbar-nav a tem mais especificidade que .btn-primario (classe + elemento vs so classe) —
   sem isto, botoes dentro do topbar (ex.: "Criar conta") ficam com o texto cinza em vez de branco. */
.topbar-nav a.btn-primario { color: var(--branco); }
.topbar-nav a.btn-primario:hover { color: var(--branco); background: var(--azul-royal-escuro); }

/* sino de notificacoes */
.sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; color: var(--texto-fraco);
  border-radius: var(--raio-md);
}
.sino:hover { background: var(--bg-sutil); color: var(--azul-royal); text-decoration: none; }
.sino-badge {
  position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--erro-solido); color: var(--branco);
  font-size: .6875rem; font-weight: 700; line-height: 1; border-radius: var(--raio-full);
}

/* ---------- ADMIN E EMPRESA: MENU LATERAL ---------- */
.painel-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.painel-sidebar {
  width: 232px; flex-shrink: 0; background: var(--bg-inverso); color: var(--branco);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 80;
}
.painel-sidebar-logo { display: flex; align-items: center; padding: var(--e5) var(--e4) var(--e4); flex-shrink: 0; }
.painel-sidebar-nav { flex: 1; padding: var(--e2) var(--e3); display: flex; flex-direction: column; gap: 2px; }
.painel-sidebar-nav a {
  color: rgba(255, 255, 255, .75); padding: var(--e3) var(--e3); border-radius: var(--raio-md);
  font-size: .9375rem; font-weight: 500;
}
.painel-sidebar-nav a:hover { background: rgba(255, 255, 255, .08); color: var(--branco); text-decoration: none; }
.painel-sidebar-nav a.ativo { background: var(--azul-royal); color: var(--branco); }
.painel-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, .14); padding: var(--e4); flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--e2);
}
.painel-sidebar-footer .sino { color: rgba(255, 255, 255, .75); }
.painel-sidebar-footer .sino:hover { background: rgba(255, 255, 255, .08); color: var(--branco); }
.painel-sidebar-user { font-size: .8125rem; color: rgba(255, 255, 255, .55); padding: 0 var(--e2); }
.painel-sidebar-sair {
  color: rgba(255, 255, 255, .75); padding: var(--e2) var(--e2); border-radius: var(--raio-md);
  font-size: .9375rem; font-weight: 500;
}
.painel-sidebar-sair:hover { background: rgba(255, 255, 255, .08); color: var(--branco); text-decoration: none; }
.painel-main { flex: 1; min-width: 0; }
.painel-topbar-mobile { display: none; }
.painel-sidebar-backdrop { display: none; }

@media (max-width: 860px) {
  .painel-sidebar {
    position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--sombra-lg);
  }
  .painel-sidebar.aberta { transform: translateX(0); }
  .painel-sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(9, 24, 89, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 70;
  }
  .painel-sidebar-backdrop.ativa { opacity: 1; pointer-events: auto; }
  .painel-topbar-mobile {
    display: flex; align-items: center; gap: var(--e3); height: var(--topbar-altura);
    padding: 0 var(--e4); background: var(--bg-superficie); border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 60;
  }
  .painel-menu-toggle {
    display: inline-flex; align-items: center; gap: var(--e2); height: 38px; padding: 0 var(--e3);
    border: 1px solid var(--azul-royal); background: var(--bg-sutil); color: var(--azul-royal);
    border-radius: var(--raio-md); cursor: pointer; font: 600 .875rem var(--fonte);
  }
  .painel-menu-toggle:hover { background: var(--bg-destaque); }
}

.hero {
  background: var(--azul-royal); color: var(--branco);
  padding: var(--e6) 0; margin-bottom: var(--e5);
}
.hero h1 { color: var(--branco); margin-bottom: var(--e1); }
.hero p { color: rgba(255,255,255,.85); margin: 0; }

/* ---------- 4. CARDS ---------- */
.card {
  background: var(--bg-superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: var(--e5);
  box-shadow: var(--sombra-sm);
}
.card + .card { margin-top: var(--e4); }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.card-titulo h2, .card-titulo h3 { margin: 0; }

.grid { display: grid; gap: var(--e4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 5. BOTOES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font: 600 .9375rem/1 var(--fonte);
  padding: 13px var(--e5);
  border: 1px solid transparent; border-radius: var(--raio-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
  min-height: 46px;  /* area de toque confortavel no celular */
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }

.btn-primario { background: var(--azul-royal); color: var(--branco); }
.btn-primario:hover:not(:disabled) { background: var(--azul-royal-escuro); }
.btn-primario:active:not(:disabled) { background: var(--azul-profundo); }

.btn-secundario { background: transparent; color: var(--azul-royal); border-color: var(--azul-royal); }
.btn-secundario:hover:not(:disabled) { background: var(--bg-sutil); }

.btn-neutro { background: var(--bg-superficie); color: var(--texto); border-color: var(--cinza-borda-forte); }
.btn-neutro:hover:not(:disabled) { background: var(--off-white); }

.btn-texto { background: transparent; color: var(--azul-royal); padding: var(--e2) var(--e3); min-height: auto; }
.btn-texto:hover:not(:disabled) { background: var(--bg-sutil); }

/* Verde = aprovar. Vermelho = SO acao destrutiva.
   No sistema antigo "Comprar" era vermelho, igual a "Rejeitar" — nao repetir. */
.btn-sucesso { background: var(--sucesso-solido); color: var(--branco); }
.btn-sucesso:hover:not(:disabled) { background: var(--sucesso); }
.btn-perigo { background: var(--erro-solido); color: var(--branco); }
.btn-perigo:hover:not(:disabled) { background: var(--erro); }
.btn-whatsapp { background: var(--whatsapp); color: var(--branco); }
.btn-whatsapp:hover:not(:disabled) { background: var(--whatsapp-hover); }

.btn-bloco { width: 100%; }
.btn-sm { padding: 8px var(--e3); min-height: 38px; font-size: .875rem; }

/* girinho de carregando */
.btn[aria-busy="true"]::before {
  content: ''; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- 6. FORMULARIOS ---------- */
.campo { margin-bottom: var(--e4); }
.campo label, .rotulo {
  display: block; margin-bottom: var(--e2);
  font-size: .875rem; font-weight: 600; color: var(--texto);
}
.campo .obrigatorio { color: var(--erro-solido); }
.campo .opcional { font-style: italic; font-weight: 400; font-size: .8125rem; color: var(--texto-fraco); }
.campo .ajuda { font-size: .8125rem; color: var(--texto-fraco); margin-top: var(--e1); }

.input, .select, .textarea {
  width: 100%;
  font: 400 1rem/1.5 var(--fonte);   /* 1rem evita o zoom automatico no iPhone */
  color: var(--texto);
  background: var(--bg-superficie);
  border: 1px solid var(--cinza-borda-forte);
  border-radius: var(--raio-md);
  padding: 12px var(--e3);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: #9AA0B4; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--azul-royal);
  box-shadow: 0 0 0 3px rgba(22, 48, 206, .12);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--off-white); color: var(--texto-fraco); }
.textarea { min-height: 110px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2373798C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e3) center;
  padding-right: var(--e6);
}

.campo-erro .input, .campo-erro .select, .campo-erro .textarea { border-color: var(--erro-solido); }
.msg-erro { color: var(--erro); font-size: .8125rem; margin-top: var(--e1); }

.linha { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .linha-2 { grid-template-columns: 1fr 1fr; }
  .linha-3 { grid-template-columns: 1fr 1fr 1fr; }
  .linha-cep { grid-template-columns: 1fr 140px; }
}

.check { display: flex; align-items: flex-start; gap: var(--e2); margin-bottom: var(--e3); cursor: pointer; }
.check input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--azul-royal); flex-shrink: 0; cursor: pointer; }
.check span { font-size: .9375rem; line-height: 1.5; }

.senha-wrap { position: relative; }
.senha-wrap .input { padding-right: 82px; }
.senha-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--azul-royal);
  font: 600 .8125rem var(--fonte); cursor: pointer; padding: var(--e2);
  border-radius: var(--raio-sm);
}

/* ---------- 7. AVISOS ---------- */
.aviso {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4); border-radius: var(--raio-md);
  border: 1px solid; font-size: .9375rem; margin-bottom: var(--e4);
}
.aviso-info    { background: var(--bg-sutil);   border-color: var(--azul-claro);    color: var(--azul-profundo); }
.aviso-sucesso { background: var(--sucesso-bg); border-color: #A6F4C5;              color: var(--sucesso); }
.aviso-erro    { background: var(--erro-bg);    border-color: #FECDCA;              color: var(--erro); }
.aviso-alerta  { background: var(--alerta-bg);  border-color: var(--alerta-borda);  color: var(--alerta); }

/* ---------- 8. BADGES E CHIPS ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--raio-full);
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
}
.badge-neutro   { background: var(--bg-sutil);   color: var(--azul-profundo); }
.badge-sucesso  { background: var(--sucesso-bg); color: var(--sucesso); }
.badge-erro     { background: var(--erro-bg);    color: var(--erro); }
.badge-alerta   { background: var(--alerta-bg);  color: var(--alerta); }
.badge-marca    { background: var(--bg-destaque);color: var(--azul-profundo); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--raio-full);
  background: var(--bg-sutil); color: var(--azul-profundo);
  font-size: .8125rem; font-weight: 500;
}
.chip-lista { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- 9. TABELAS ---------- */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabela th {
  text-align: left; padding: var(--e3); white-space: nowrap;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco); border-bottom: 1px solid var(--borda);
}
.tabela td { padding: var(--e3); border-bottom: 1px solid var(--borda); }
.tabela tbody tr:hover { background: var(--off-white); }

/* ---------- 10. ESTADO VAZIO ---------- */
.vazio { text-align: center; padding: var(--e7) var(--e4); color: var(--texto-fraco); }
.vazio h3 { color: var(--texto); }

/* ---------- 11. AVISO FLUTUANTE (toast) ---------- */
.toasts {
  position: fixed; z-index: 200; left: var(--e4); right: var(--e4); bottom: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2); align-items: center;
  pointer-events: none;
}
@media (min-width: 640px) { .toasts { left: auto; right: var(--e5); align-items: flex-end; } }
.toast {
  pointer-events: auto;
  background: var(--azul-profundo); color: var(--branco);
  padding: var(--e3) var(--e4); border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg); font-size: .9375rem; max-width: 420px;
  animation: subir .2s ease-out;
}
.toast-sucesso { background: var(--sucesso); }
.toast-erro    { background: var(--erro); }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 12. TELAS DE ACESSO ---------- */
.acesso { min-height: 100vh; display: flex; flex-direction: column; }
.acesso-conteudo {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--e5) var(--e4);
}
.acesso-caixa { width: 100%; max-width: 440px; }
.acesso-logo { display: flex; justify-content: center; margin-bottom: var(--e5); color: var(--azul-royal); }
.acesso-logo svg { width: 168px; height: auto; }
.acesso-titulo { text-align: center; margin-bottom: var(--e5); }
.acesso-titulo h1 { font-size: 1.5rem; margin-bottom: var(--e1); }
.acesso-titulo p { color: var(--texto-fraco); font-size: .9375rem; margin: 0; }
.acesso-rodape { text-align: center; margin-top: var(--e5); font-size: .9375rem; color: var(--texto-fraco); }

/* Escolha do tipo de conta no cadastro */
.escolha { display: grid; gap: var(--e3); margin-bottom: var(--e5); }
.escolha-op {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4); border: 2px solid var(--borda); border-radius: var(--raio-lg);
  background: var(--bg-superficie); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
  font: inherit; color: inherit; width: 100%;
}
.escolha-op:hover { border-color: var(--azul-claro); background: var(--bg-sutil); }
.escolha-op.ativo { border-color: var(--azul-royal); background: var(--bg-sutil); }
.escolha-op strong { display: block; font-size: 1rem; }
.escolha-op span { font-size: .875rem; color: var(--texto-fraco); }
.escolha-icone {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--raio-md);
  background: var(--bg-destaque); color: var(--azul-profundo);
  display: flex; align-items: center; justify-content: center;
}

/* forca da senha */
.forca { display: flex; gap: 4px; margin-top: var(--e2); }
.forca i { flex: 1; height: 4px; border-radius: 2px; background: var(--cinza-claro); transition: background .2s; }
.forca.f1 i:nth-child(1) { background: var(--erro-solido); }
.forca.f2 i:nth-child(-n+2) { background: var(--alerta-solido); }
.forca.f3 i:nth-child(-n+3) { background: var(--sucesso-solido); }
.forca.f4 i { background: var(--sucesso); }

/* ---------- 13. UTILITARIOS ---------- */
.texto-fraco   { color: var(--texto-fraco); }
.texto-pequeno { font-size: .875rem; }
.texto-centro  { text-align: center; }
.mt-0 { margin-top: 0; }      .mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--e3); } .mb-3 { margin-bottom: var(--e3); }
.mt-4 { margin-top: var(--e4); } .mb-4 { margin-bottom: var(--e4); }
.mt-5 { margin-top: var(--e5); } .mb-5 { margin-bottom: var(--e5); }
.flex { display: flex; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.flex-centro { display: flex; align-items: center; gap: var(--e2); }
.flex-fim { margin-left: auto; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--e2); } .gap-3 { gap: var(--e3); }

/* ---------- ESTRELAS (avaliacoes) ---------- */
.estrelas { display: inline-flex; align-items: center; gap: 1px; color: var(--alerta-solido); line-height: 1; }
.estrelas .vazia { color: var(--cinza-claro); }
.estrelas-media { display: inline-flex; align-items: center; gap: var(--e2); }
.estrelas-media .nota { font-weight: 700; color: var(--texto); }
.estrelas-media .qtd { color: var(--texto-fraco); font-size: .8125rem; }

/* seletor de nota (formulario) */
.estrelas-input { display: inline-flex; gap: var(--e1); direction: rtl; }
.estrelas-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrelas-input label { cursor: pointer; font-size: 1.7rem; color: var(--cinza-claro); line-height: 1; transition: color .1s; }
.estrelas-input label:hover, .estrelas-input label:hover ~ label,
.estrelas-input input:checked ~ label { color: var(--alerta-solido); }

/* Quem prefere menos movimento na tela nao ve animacao */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}