/* =============================================================
   Akimatsuri 2027 — Gestão de vendas
   Paleta: aiiro (índigo), momiji (vermelho de bordo), kin (ouro),
   sumi (tinta) e papel.
   ============================================================= */
:root {
  --aiiro:   #1E2B4A;
  --aiiro-2: #2E4A7D;
  --momiji:  #A8322A;
  --kin:     #C9A227;
  --sumi:    #1A1A1F;
  --papel:   #FFFFFF;
  --nevoa:   #E6E9F0;
  --cinza:   #5D6475;
  --verde:   #4F7A4A;

  /* Fonte única do sistema: Google Sans (títulos e textos).
     --serif foi mantida só como apelido, para não quebrar regras antigas. */
  --sans:  "Google Sans", "Segoe UI", system-ui, sans-serif;
  --serif: var(--sans);

  /* Exceções que NÃO usam Google Sans:
     --planta: textos dentro do SVG da planta (tela do Mapa) — fonte original.
     --kanji:  kanji decorativo da tela de login (Google Sans não tem japonês). */
  --planta: "Zen Kaku Gothic New", "Segoe UI", system-ui, sans-serif;
  --kanji:  "Shippori Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sumi);
  background: var(--papel);
}

:focus-visible { outline: 3px solid var(--kin); outline-offset: 2px; }

/* ---------- Tela de login ---------------------------------- */
.tela-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
}

.painel-festival {
  position: relative;
  overflow: hidden;
  background: var(--aiiro);
  color: #F1EEE6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 2.5rem;
}
/* Sol vermelho atrás dos kanji */
.painel-festival::before {
  content: "";
  position: absolute;
  width: 26rem; height: 26rem;
  border-radius: 50%;
  background: var(--momiji);
  right: -9rem; top: 12%;
}
.tategaki {
  position: relative;
  writing-mode: vertical-rl;
  font-family: var(--kanji);
  font-weight: 800;
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: .08em;
  align-self: flex-end;
}
.festival-info { position: relative; }
.festival-nome {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 .25rem;
  color: var(--kin);
}
.festival-datas { margin: 0; opacity: .85; }

.area-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.area-form-unica { grid-column: 1 / -1; }

.form-login { width: 100%; max-width: 22rem; }
.form-login h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 0 0 .5rem;
}
.subtitulo { color: var(--cinza); margin: 0 0 2rem; }

.form-login label {
  display: block;
  font-weight: 500;
  font-size: .9rem;
  margin: 1.25rem 0 .4rem;
}
.form-login input {
  width: 100%;
  font: inherit;
  padding: .75rem .9rem;
  border: 1px solid #C8CDD8;
  border-radius: 4px;
  background: #fff;
}
.form-login input:focus { border-color: var(--aiiro-2); outline: none; box-shadow: 0 0 0 3px rgba(46,74,125,.18); }

.form-login button,
.botao {
  display: inline-block;
  width: 100%;
  margin-top: 2rem;
  padding: .85rem 1rem;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--momiji);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.form-login button:hover, .botao:hover { background: #8E2922; }

.msg { padding: .75rem .9rem; border-radius: 4px; font-size: .95rem; margin: 0 0 .5rem; }
.msg-erro  { background: #FBECEA; color: #7D221C; border-left: 4px solid var(--momiji); }
.msg-aviso { background: #F7F1DC; color: #5E4B0E; border-left: 4px solid var(--kin); }

/* ---------- Páginas internas ------------------------------- */
.barra {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .75rem 1.5rem;
  background: var(--aiiro);
  color: #F1EEE6;
  flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.marca-nome { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }

.menu { display: flex; gap: 1.25rem; flex-wrap: wrap; flex: 1; }
.menu a { color: #F1EEE6; text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-color: rgba(201,162,39,.5); }
.menu a[aria-current="page"] { border-color: var(--kin); }
.menu-em-breve { color: rgba(241,238,230,.4); cursor: default; }

.conta { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.conta a { color: var(--kin); }

.conteudo { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.titulo-pagina { font-family: var(--serif); font-weight: 800; font-size: 2rem; margin: 0 0 2rem; }

.resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--nevoa);
  border-bottom: 1px solid var(--nevoa);
}
.resumo-item { padding: 1.5rem 1.25rem; border-left: 4px solid var(--nevoa); }
.resumo-numero { display: block; font-family: var(--serif); font-weight: 800; font-size: 2.75rem; line-height: 1; }
.resumo-rotulo { color: var(--cinza); }
.status-livre     { border-left-color: var(--verde); }
.status-reservado { border-left-color: var(--kin); }
.status-vendido   { border-left-color: var(--momiji); }
.status-bloqueado { border-left-color: #9AA0AD; }

.vazio { margin-top: 3rem; max-width: 38rem; }
.vazio h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 .5rem; }
.vazio p { color: var(--cinza); }
.detalhe { font-size: .9rem; }

/* ---------- Cadastros (Fase 2) ----------------------------- */
.msg-ok { background: #E8F0E6; color: #2F4D2B; border-left: 4px solid var(--verde); }

.cad { max-width: 52rem; }
.cad > .msg { margin-bottom: 1.5rem; }

/* Formulário em linha: campos lado a lado, quebram no celular */
.form-cad {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
  padding: 1.5rem 0;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--nevoa);
  border-bottom: 1px solid var(--nevoa);
}
.campo { display: flex; flex-direction: column; gap: .4rem; font-weight: 500; font-size: .9rem; }
.campo-largo { flex: 1 1 16rem; }
.campo input[type="text"],
.campo input[type="number"],
.campo input[type="email"],
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
  padding: .65rem .8rem;
  border: 1px solid #C8CDD8;
  border-radius: 4px;
  background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--aiiro-2); outline: none; box-shadow: 0 0 0 3px rgba(46,74,125,.18);
}
.campo input[type="color"] {
  width: 3.25rem; height: 2.75rem; padding: .2rem;
  border: 1px solid #C8CDD8; border-radius: 4px; background: #fff; cursor: pointer;
}

/* Botões das telas internas (o .botao acima é o grande do login) */
.btn {
  display: inline-block;
  padding: .65rem 1.1rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: var(--sumi);
  background: #fff;
  border: 1px solid #C8CDD8;
  border-radius: 4px;
  cursor: pointer;
}
/* Botão neutro (Cancelar, Voltar, Filtrar, Abrir...): branco com contorno
   cinza. Rollover no mesmo padrão dos coloridos, na cor cinza #5D6475. */
.btn:hover:not(:disabled) { border-color: #5D6475; background: rgba(93, 100, 117, .25); }

/* Tabelas de listagem */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left;
  font-size: .85rem;
  font-weight: 500;
  color: var(--cinza);
  padding: .5rem .75rem;
  border-bottom: 2px solid var(--aiiro);
}
.tabela td { padding: .75rem; border-bottom: 1px solid var(--nevoa); vertical-align: middle; }
.tabela tbody tr:hover { background: #F6F7FA; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela .acoes > * + * { margin-left: .4rem; }
.form-inline { display: inline; margin: 0; }

/* Bolinha de cor — o mesmo "sol" da marca */
.amostra-cor {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  margin-right: .6rem;
  vertical-align: -.15em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.vazio-lista { color: var(--cinza); padding: 1rem 0; }

/* ---------- Telas de expositores (Fase 2) ------------------
   Tudo aqui vale só dentro de <div class="f2">, que as telas de
   expositores recebem automaticamente. Assim o visual delas não
   briga com o cabeçalho e com as outras telas.
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

.f2 {
  --ai: var(--aiiro);
  --tinta: var(--sumi);
  --linha: #DDE1E8;
  --momiji-claro: #FBEAE6;
  --verde-claro: #E6F3EC;
}
/* :not(.btn) — links com cara de botão seguem o padrão dos botões */
.f2 a:not(.btn) { color: var(--aiiro-2); }
.f2 h1 { font-family: var(--serif); font-weight: 800; font-size: 2rem; line-height: 1.2; margin: 0 0 .25rem; }
.f2 .sub { color: var(--cinza); margin: 0 0 1.4rem; }

/* Barra de busca/filtros (não é o cabeçalho azul) */
.f2 .barra {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 18px; padding: 0; background: none; color: inherit;
}

.f2 input, .f2 select, .f2 textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--linha);
  border-radius: 6px; background: #fff; width: 100%;
}
.f2 input:focus, .f2 select:focus, .f2 textarea:focus {
  outline: 2px solid var(--ai); outline-offset: 1px; border-color: var(--ai);
}
.f2 input:disabled { background: #F0F1F4; color: #98A2B3; }

.f2 .btn { white-space: nowrap; }

.f2 .aviso { padding: 11px 14px; border-radius: 6px; margin-bottom: 18px; }
.f2 .aviso.ok   { background: var(--verde-claro); color: #2F4D2B; }
.f2 .aviso.erro { background: var(--momiji-claro); color: #8E2A1B; }
.f2 .aviso ul { margin: 4px 0 0; padding-left: 20px; }

/* Mensagem curta embaixo do campo (não é a caixa .msg-erro do login) */
.f2 .msg-erro {
  display: block; background: none; border: 0; padding: 0; margin: 4px 0 0;
  color: #B42318; font-size: 13px; font-weight: 600;
}
.f2 .dica { display: block; color: var(--cinza); font-size: 12px; margin-top: 4px; }

/* Caixa branca que envolve as tabelas */
.f2 .tabela { background: #fff; border: 1px solid var(--linha); border-radius: 8px; overflow-x: auto; }
.f2 table { width: 100%; border-collapse: collapse; }
.f2 th, .f2 td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: top; }
.f2 th { font-size: 13px; color: var(--cinza); font-weight: 600; background: #FAFBFC; }
.f2 tr:last-child td { border-bottom: 0; }
.f2 td small { color: var(--cinza); display: block; }

.f2 .selo { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 20px; background: #EEF1F7; color: var(--ai); }
.f2 .selo.veterano { background: var(--momiji-claro); color: #8E2A1B; }
.f2 .vazio { margin: 0; max-width: none; padding: 40px; text-align: center; color: var(--cinza); }

/* Ficha de cadastro */
.f2 form.ficha { background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 22px; }
.f2 fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.f2 legend { font-weight: 700; font-size: 16px; margin-bottom: 12px; color: var(--ai); }
.f2 .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.f2 .grade .largo { grid-column: 1 / -1; }
.f2 label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.f2 label .obrig { color: var(--momiji); }
.f2 .opcoes { display: flex; gap: 18px; }
.f2 .opcoes label { font-weight: 400; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.f2 .opcoes input { width: auto; }
.f2 .acoes { display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--linha); padding-top: 18px; }
.f2 .historico { margin-top: 28px; }
.f2 .historico h2 { font-size: 19px; margin: 0 0 4px; }

/* ---------- Celular ---------------------------------------- */
@media (max-width: 760px) {
  .tela-login { grid-template-columns: 1fr; }
  .painel-festival { flex-direction: row; align-items: flex-end; padding: 1.5rem; min-height: 11rem; }
  .painel-festival::before { width: 12rem; height: 12rem; right: -3rem; top: -3rem; }
  .tategaki { font-size: 3.5rem; align-self: auto; order: 2; }
  .resumo { grid-template-columns: repeat(2, 1fr); }
  .barra { gap: 1rem; }
  .campo-largo { flex-basis: 100%; }
}

/* ---------- Telas de espaços (Fase 3) ----------------------
   Também ficam dentro de <div class="f2">.
   ------------------------------------------------------------ */

/* Resumo por status: cada número é um atalho para o filtro */
.f2 .resumo-espacos { margin-bottom: 18px; }
.f2 .resumo-espacos a.resumo-item { color: inherit; text-decoration: none; }
.f2 .resumo-espacos a.resumo-item:hover { background: #F6F7FA; }
.f2 .resumo-espacos a.resumo-item.ativo { background: var(--nevoa); }
.f2 .resumo-espacos .resumo-numero { font-size: 2.25rem; }

/* Aviso amarelo (ex.: espaços sem preço) */
.f2 .aviso.alerta { background: #F7F1DC; color: #5E4B0E; }

/* Selos de status na tabela */
.f2 .selo.st-livre     { background: var(--verde-claro); color: #2F4D2B; }
.f2 .selo.st-reservado { background: #F7F1DC; color: #5E4B0E; }
.f2 .selo.st-vendido   { background: var(--momiji-claro); color: #8E2A1B; }
.f2 .selo.st-bloqueado { background: #ECEDF1; color: #4A505C; }

.f2 td.codigo { white-space: nowrap; }
.f2 td.preco  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.f2 .sem-valor { color: #98A2B3; font-size: 13px; }

/* ---------- Planta do evento (Fase 3, Etapa 4) -------------
   Também fica dentro de <div class="f2">.
   ------------------------------------------------------------ */
.f2 .planta-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }

/* Grupo de botões colados (abas dos mapas e zoom usam o mesmo visual) */
.f2 .grupo-botoes { display: flex; }
.f2 .grupo-botoes .btn { border-radius: 0; margin-left: -1px; }
.f2 .grupo-botoes .btn:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.f2 .grupo-botoes .btn:last-child  { border-radius: 0 4px 4px 0; }
.f2 .grupo-botoes .btn[aria-selected="true"] { background: var(--aiiro); border-color: var(--aiiro); color: #fff; position: relative; }
.f2 .planta-zoom .btn[data-zoom="menos"],
.f2 .planta-zoom .btn[data-zoom="mais"] { min-width: 2.6rem; }

.f2 .btn.btn-ajustar { margin-left: 0; background: #FF0000; border-color: #FF0000; color: #fff; }
.f2 .btn.btn-ajustar:hover:not(:disabled) { color: #FF0000; background: rgba(255, 0, 0, .25); border-color: #FF0000; }

/* Área com rolagem: o zoom aumenta o desenho e a área rola */
.f2 .planta-area {
  height: 75vh; min-height: 22rem;
  overflow: auto;
  scrollbar-gutter: stable;   /* a barra de rolagem não "come" a largura do mapa */
  border: 1px solid var(--linha); border-radius: 8px;
  background: #F6F7FA;
  -webkit-overflow-scrolling: touch;
}
.f2 .planta-area svg { display: block; margin: 0 auto; background: #fff; }

/* Textos do SVG da planta: fonte original (exceção à Google Sans) */
.planta .rotulo text { font-family: var(--planta); font-weight: 500; fill: #5D6475; user-select: none; }

/* Boxes */
.planta .box { cursor: pointer; }
.planta .box rect { stroke-width: .5; vector-effect: non-scaling-stroke; }
.planta .box text { font-family: var(--planta); font-weight: 700; pointer-events: none; user-select: none; }
.planta .box:focus { outline: none; }

/* Mapa 1 — Disponibilidade */
.planta.mapa-disp .box rect { fill: #2E9E4F; stroke: #fff; }
.planta.mapa-disp .box.ocupado rect { fill: #D33A2C; }
.planta.mapa-disp .box text { fill: #fff; }

/* Mapa 2 — Por categoria */
.planta.mapa-tipo .box rect { fill: #fff; stroke: var(--cor); stroke-width: 1.2; }
.planta.mapa-tipo .box text { fill: var(--cor); }

/* Destaque ao passar o mouse ou navegar pelo teclado */
.planta .box:hover rect,
.planta .box:focus-visible rect { stroke: var(--aiiro); stroke-width: 2.5; }

/* Modo ajuste: um item selecionado por vez */
.planta.ajustando .box,
.planta.ajustando .rotulo { cursor: move; touch-action: none; }
.planta.ajustando .box { opacity: .8; }
.planta.ajustando .box.sel { opacity: 1; }
.planta.ajustando .box.sel rect { stroke: #1565D8; stroke-width: 3; }
.planta.ajustando .rotulo text { fill: #2E4A7D; }
.planta.ajustando .rotulo.sel text { fill: #1565D8; text-decoration: underline; }

/* Legenda */
.f2 .planta-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 12px 0 0; font-size: 14px; }
.f2 .leg-item { display: inline-flex; align-items: center; gap: 6px; }
.f2 .leg-amostra { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.f2 .leg-livre   { background: #2E9E4F; }
.f2 .leg-ocupado { background: #D33A2C; }
.f2 .leg-tipo    { background: #fff; border: 2px solid var(--cor); }

/* Dica com as informações do espaço (aparece ao lado do box) */
.f2 .planta-dica {
  position: fixed; z-index: 30;
  width: 15rem; padding: 12px 14px;
  background: #fff; border: 1px solid var(--linha); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(30,43,74,.18);
  pointer-events: none;
}
.f2 .planta-dica.fixa { pointer-events: auto; }
.f2 .dica-codigo { display: block; font-family: var(--serif); font-size: 1.3rem; margin: 0 0 6px; }
.f2 .planta-dica dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.f2 .planta-dica dt { color: var(--cinza); }
.f2 .planta-dica dd { margin: 0; font-weight: 500; }
.f2 .dica-acao { margin: 8px 0 0; font-size: 12px; color: var(--cinza); }
.f2 .planta-dica .btn { display: block; width: 100%; text-align: center; margin-top: 10px; }
.f2 .dica-fechar {
  position: absolute; top: 4px; right: 6px;
  width: 2rem; height: 2rem; border: 0; background: none;
  font-size: 1.4rem; line-height: 1; color: var(--cinza); cursor: pointer;
}

/* Painel do modo ajuste */
.f2 .planta-ajuste {
  background: #fff; border: 1px solid #1565D8; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 12px;
}
.f2 .dica-ajuste { margin: 0 0 10px; font-size: 14px; color: var(--cinza); }
.f2 .ajuste-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.f2 .ajuste-linha label { margin: 0; font-size: 14px; }
.f2 .ajuste-linha input[type="range"] { width: 12rem; padding: 0; border: 0; }
.f2 .ajuste-linha input[type="number"] { width: 5.5rem; }
.f2 .ajuste-texto textarea { flex: 1 1 16rem; width: auto; min-height: 2.8rem; }
.f2 .ajuste-contagem { font-size: 13px; color: var(--cinza); }
.f2 .ajuste-acoes { justify-content: flex-end; margin-bottom: 0; border-top: 1px solid var(--linha); padding-top: 10px; }
.f2 .ajuste-acoes .ajuste-contagem { margin-right: auto; }
.f2 .planta-ajuste .aviso { margin: 10px 0 0; }

@media (max-width: 760px) {
  .f2 .btn.btn-ajustar { margin-left: 0; }
  .f2 .planta-area { height: 65vh; }
  .f2 .ajuste-linha input[type="range"] { width: 100%; order: 5; }
}

/* ---------- Planta — Etapa 5: pins, alças e barra de pins -----
   Pins = faixas, testeira, wind banners e outros.
   ------------------------------------------------------------ */
.planta .pin { cursor: pointer; }
.planta .pin path { stroke: #fff; stroke-width: .8; vector-effect: non-scaling-stroke; }
.planta .pin circle { fill: #fff; }
.planta .pin text { font-family: var(--planta); font-weight: 700; fill: #1A1A1F; pointer-events: none; user-select: none; }
.planta .pin:focus { outline: none; }
.planta.mapa-disp .pin path { fill: #2E9E4F; }
.planta.mapa-disp .pin.ocupado path { fill: #D33A2C; }
.planta.mapa-tipo .pin path { fill: var(--cor); stroke: #1A1A1F; stroke-width: .6; }
.planta .pin:hover path,
.planta .pin:focus-visible path { stroke: var(--aiiro); stroke-width: 2.5; }
.planta.ajustando .pin { cursor: move; touch-action: none; }
.planta.ajustando .pin.sel path { stroke: #1565D8; stroke-width: 2.5; }
.planta .pin.novo path { stroke-dasharray: 3 2; }

/* Alças do item selecionado: bolinha gira, quadradinho muda o tamanho */
.planta .alca-moldura { fill: none; stroke: #1565D8; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.planta .alca-linha { stroke: #1565D8; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.planta .alca { stroke: #1565D8; stroke-width: 1.5; vector-effect: non-scaling-stroke; touch-action: none; }
.planta .alca-girar { fill: #1565D8; cursor: grab; }
.planta .alca-escala { fill: #fff; cursor: nwse-resize; }

/* Barra de pins (dentro do painel do modo ajuste) */
.f2 .pins-barra { border-bottom: 1px solid var(--linha); margin-bottom: 10px; }
.f2 .pins-rotulo { font-size: 14px; font-weight: 600; min-width: 10.5rem; }
.f2 .pins-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; font: inherit; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--sumi); background: #fff; border: 1px solid #C8CDD8; border-radius: 20px;
  cursor: grab; touch-action: none; user-select: none;
}
.pin-chip:hover { border-color: var(--aiiro-2); }
.pin-fantasma {
  position: fixed; z-index: 50; pointer-events: none;
  transform: translate(-50%, -120%);
  box-shadow: 0 6px 18px rgba(30,43,74,.25);
}
/* Gotinha colorida (ícone do pin) — usada na barra e na legenda */
.pin-gota {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--cor, #5D6475); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ---------- Botão padrão do sistema (v=14) ----------------
   Modelo: botão "Adicionar evento" da tela Eventos. TODOS os botões
   usam o mesmo tamanho e fonte (.btn: padding .65rem 1.1rem, 0,95rem,
   negrito, cantos de 4px) — não existe mais botão "pequeno".
   Normal: botão cheio na cor da função. Rollover: contorno na cor,
   preenchimento com 25% da cor e texto na cor (no amarelo, o texto
   fica escuro para dar leitura). Sem função = botão neutro (branco).
   Usar junto com .btn, ex.: class="btn btn-salvar"
   - .btn-salvar    cadastrar / salvar        verde    #3d8900
   - .btn-ativar    tornar ativa / confirmar  verde    #3d8900
   - .btn-adicionar adicionar item            azul     #007dc5
   - .btn-editar    editar                    amarelo  #ffcb05
   - .btn-excluir   excluir                   vermelho #b11116
   ------------------------------------------------------------ */
.btn.btn-salvar, .btn.btn-ativar { color: #fff; background: #3d8900; border-color: #3d8900; }
.btn.btn-salvar:hover:not(:disabled), .btn.btn-ativar:hover:not(:disabled) { color: #3d8900; background: rgba(61, 137, 0, .25); border-color: #3d8900; }

.btn.btn-adicionar { color: #fff; background: #007dc5; border-color: #007dc5; }
.btn.btn-adicionar:hover:not(:disabled) { color: #007dc5; background: rgba(0, 125, 197, .25); border-color: #007dc5; }

.btn.btn-editar { color: #2B2B2B; background: #ffcb05; border-color: #ffcb05; }
.btn.btn-editar:hover:not(:disabled) { color: #2B2B2B; background: rgba(255, 203, 5, .25); border-color: #ffcb05; }

.btn.btn-excluir { color: #fff; background: #b11116; border-color: #b11116; }
.btn.btn-excluir:hover:not(:disabled) { color: #b11116; background: rgba(177, 17, 22, .25); border-color: #b11116; }

/* Contorno de foco (teclado) e botão desativado */
.btn:focus-visible { outline: 3px solid rgba(46, 74, 125, .45); outline-offset: 2px; }
.btn:disabled, .btn:disabled:hover { opacity: .5; cursor: not-allowed; }

/* ---------- Nome do evento em destaque (v=8) ----------------
   Abaixo do título da tela: linha divisória e o nome da edição
   ativa, para não confundir quando houver mais de um evento.
   <hr class="divisor-edicao">
   <p class="edicao-destaque">Akimatsuri 2027</p>
   ------------------------------------------------------------ */
.divisor-edicao { border: 0; border-top: 1px solid #DDE1E8; margin: .8rem 0 .7rem; }
.edicao-destaque {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #b11116;
  margin: 0 0 .35rem;
}

/* ---------- Cabeçalho padrão das telas (v=10) --------------
   Montado pela função cabecalho_tela() (includes/edicoes_funcoes.php):
   título da tela, linha divisória e nome da edição ativa.
   ------------------------------------------------------------ */
.cabecalho-tela { margin: 0 0 1.25rem; }
h1.titulo-tela {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0;
}
.cabecalho-tela .edicao-destaque { margin: 0; }
.cabecalho-tela .edicao-destaque.sem-edicao { color: var(--cinza); font-size: 1.1rem; }

/* ---------- Boxes coloridos, padrão da Dashboard (v=11) ----
   Usados em Espaços, Vendas, Pagamentos e Financeiro.
   <section class="caixas"> com <div|a class="caixa cx-COR">
     <b>número</b> <span>rótulo</span> <small>detalhe</small>
   "dinheiro" deixa o número menor, para caber valores em R$.
   ------------------------------------------------------------ */
.caixas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 1.5rem; }
.caixas .caixa {
  display: block;
  background: var(--c, #5D6475);
  color: #fff;
  border-radius: 6px;
  padding: .8rem 1rem;
  text-decoration: none;
}
.caixas .caixa b {
  display: block;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}
.caixas.dinheiro .caixa b { font-size: clamp(1.3rem, 2.2vw, 1.75rem); white-space: nowrap; margin: .35rem 0 .2rem; }
.caixas .caixa span  { display: block; font-size: .9rem; }
.caixas .caixa small { display: block; font-size: .8rem; opacity: .85; margin-top: .1rem; }
/* Texto do box sempre branco — inclusive quando o box é um link
   (a regra ".f2 a" pintava os links de azul). Lote 4, v=16 */
.caixas .caixa,
.caixas .caixa b,
.caixas .caixa span,
.caixas .caixa small { color: #fff !important; }
.caixas a.caixa:hover { filter: brightness(.9); }
.caixas a.caixa:focus-visible { outline: 3px solid rgba(46, 74, 125, .45); outline-offset: 2px; }
/* Box escolhido como filtro: anel na cor do box */
.caixas .caixa.ativo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c, #5D6475); }

/* Cores (as mesmas da Dashboard) */
.cx-livre     { --c: #4F7A4A; }
.cx-reservado { --c: #f7941d; }
.cx-vendido   { --c: #A8322A; }
.cx-bloqueado { --c: #5D6475; }
.cx-azul      { --c: #007dc5; }
.cx-verde     { --c: #3d8900; }
.cx-verde-esc { --c: #487b00; }
.cx-laranja   { --c: #f7941d; }
.cx-vermelho  { --c: #b11116; }

@media (max-width: 1000px) { .caixas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .caixas.dinheiro { grid-template-columns: 1fr; } }

/* ---------- Espaços: grupos por tipo em accordion (v=12) ---- */
.f2 .acc-controles { display: flex; gap: 8px; justify-content: flex-end; margin: 4px 0 -12px; }
.f2 .acc-tipo {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  margin: 0 0 10px;
  overflow: hidden;
}
.f2 .acc-tipo > summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 16px;
  cursor: pointer;
}
.f2 .acc-tipo > summary::-webkit-details-marker { display: none; }
.f2 .acc-tipo > summary:hover { background: #F6F7FA; }
.f2 .acc-tipo > summary:focus-visible { outline: 3px solid rgba(46, 74, 125, .45); outline-offset: -3px; }
.f2 .acc-tipo .amostra-cor { margin: 0; }
.f2 .acc-tipo-nome { font-weight: 700; font-size: 1.05rem; }
.f2 .acc-tipo-qtd { font-size: 13px; color: var(--cinza); }
.f2 .acc-tipo-status { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.f2 .acc-tipo-seta {
  width: 9px; height: 9px; flex: none; margin-left: 4px;
  border-right: 2px solid var(--cinza); border-bottom: 2px solid var(--cinza);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.f2 .acc-tipo[open] .acc-tipo-seta { transform: rotate(-135deg) translate(-2px, -2px); }
/* A tabela dentro do grupo perde a caixa própria */
.f2 .acc-tipo .tabela { border: 0; border-top: 1px solid var(--linha); border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .f2 .acc-tipo-seta { transition: none; } }

/* ---------- Lote 4: accordion de espaços no formulário de venda (v=15) ----
   Mesmo visual dos grupos da tela Espaços (.acc-tipo), dentro do
   fieldset "Espaços" da tela Nova venda / Editar venda. */
.f2 .venda-cat { font-size: 1.1rem; margin: 18px 0 8px; }
.f2 .venda-bloco:first-child .venda-cat { margin-top: 4px; }
.f2 .selo.marcados { background: #007dc5; color: #fff; font-weight: 600; }
.f2 #lista_espacos td:first-child { width: 40px; }

/* ---------- Versão 5: tela Edições acima dos eventos -------------
   Barra superior com o caminho "Edições › Akimatsuri 2027"
   e cartões da tela Edições (edicoes.php). */
.marca-caminho { gap: .5rem; }
.marca-caminho a { color: inherit; text-decoration: none; }
.marca-caminho a:first-child { color: rgba(241, 238, 230, .75); font-size: .95rem; }
.marca-caminho a:hover { color: var(--kin); }
.caminho-seta { color: rgba(241, 238, 230, .5); font-size: 1.2rem; line-height: 1; }

.eventos-topo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin: 0 0 1.5rem; }
.eventos-topo p { margin: 0; color: var(--cinza); }
.eventos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
.evento-card {
  display: flex; flex-direction: column;
  border: 1px solid #DDE1E8; border-radius: 10px; overflow: hidden;
  background: #fff; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.evento-card:hover { border-color: var(--aiiro-2); box-shadow: 0 6px 18px rgba(30, 43, 74, .12); transform: translateY(-2px); }
.evento-card.destaque { border-color: var(--kin); border-width: 2px; }
.evento-thumb {
  aspect-ratio: 1 / 1; background: #F4F5F8; border-bottom: 1px solid #E6E9F0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.evento-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evento-thumb .sem-thumb { font-size: 4rem; font-weight: 700; color: #C3C8D1; text-transform: uppercase; }
.evento-corpo { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.evento-selos { display: flex; flex-wrap: wrap; gap: .4rem; }
.evento-selo { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: #EEF1F7; color: var(--aiiro); }
.evento-selo.atual { background: #FBF3D5; color: #6B5410; }
.evento-selo.andamento { background: #E6F3EC; color: #2F4D2B; }
.evento-selo.encerrado { background: #ECEDF1; color: #4A505C; }
.evento-nome { font-weight: 700; font-size: 1.25rem; margin: .15rem 0 0; }
.evento-datas { margin: 0; color: var(--cinza); font-size: .92rem; }
.evento-numeros { margin-top: auto; padding-top: .6rem; display: flex; gap: 1.25rem; font-size: .9rem; color: var(--cinza); }
.evento-numeros strong { color: var(--sumi); font-size: 1.05rem; }
.evento-entrar { margin-top: .5rem; font-weight: 700; color: var(--aiiro-2); }
.evento-card:hover .evento-entrar { color: var(--momiji); }
@media (prefers-reduced-motion: reduce) { .evento-card { transition: none; } .evento-card:hover { transform: none; } }

/* ---------- Versão 6: header ------------------------------------
   Nome do evento em laranja #f7941d e engrenagem do Cadastro do
   evento (só admin) ao lado dele. */
.barra .marca-caminho .marca-nome { color: #f7941d; }
.barra .marca-caminho .marca-nome:hover { color: #FFB25C; }
.engrenagem { display: inline-flex; align-items: center; padding: .25rem; margin-left: .1rem; border-radius: 50%; color: rgba(241, 238, 230, .75) !important; transition: color .15s, background .15s, transform .3s; }
.engrenagem:hover { color: #f7941d !important; background: rgba(255, 255, 255, .08); transform: rotate(45deg); }
.engrenagem[aria-current="page"] { color: #f7941d !important; background: rgba(247, 148, 29, .15); }
@media (prefers-reduced-motion: reduce) { .engrenagem { transition: none; } .engrenagem:hover { transform: none; } }

/* ---------- Lote 6: Usuários e Meu perfil (v=17) ------------
   Telas usuarios.php, usuario_form.php e meu_perfil.php.
   ------------------------------------------------------------ */
/* Texto só para leitores de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Campos de senha e telefone com o mesmo visual dos outros */
.campo input[type="password"],
.campo input[type="tel"] {
  width: 100%;
  font: inherit;
  font-weight: 400;
  padding: .65rem .8rem;
  border: 1px solid #C8CDD8;
  border-radius: 4px;
  background: #fff;
}
.campo-dica { font-weight: 400; font-size: .85rem; color: var(--cinza); }

/* Nome da pessoa na barra azul: abre "Meu perfil" */
.conta a.conta-nome { color: #F1EEE6; text-decoration: none; border-bottom: 2px solid transparent; padding: .25rem 0; }
.conta a.conta-nome:hover { border-color: rgba(201,162,39,.5); }
.conta a.conta-nome[aria-current="page"] { border-color: var(--kin); }

/* Lista de usuários */
.tabela-usuarios a { color: var(--aiiro-2); }
.usuario-funcao { font-size: .88rem; color: var(--cinza); }
.usuario-voce   { font-size: .85rem; color: var(--cinza); font-weight: 400; }
.usuario-desativado td { color: var(--cinza); }
.usuario-desativado td strong { text-decoration: line-through; }

/* Etiquetas de nível de acesso (texto branco, padrão dos boxes) */
.tag-acesso {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  padding: .35rem .55rem;
  border-radius: 999px;
  color: #fff;
  background: #5D6475;
  margin: .1rem .2rem .1rem 0;
  white-space: nowrap;
}
.tag-admin      { background: #1E2B4A; }
.tag-vendedor   { background: #007dc5; }
.tag-financeiro { background: #3d8900; }
.tag-superadmin { background: #f7941d; }
.tag-desativado { background: #b11116; }

/* Blocos do formulário (nível de acesso, senha) */
.bloco-form { flex: 1 1 100%; border: 0; padding: 0; margin: 0; min-width: 0; }
.bloco-form > legend { padding: 0; margin-bottom: .6rem; }
.linha-campos { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; }

.opcoes-acesso { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; }
.opcao-acesso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .75rem .9rem;
  border: 1px solid #C8CDD8; border-radius: 6px; background: #fff;
  cursor: pointer;
}
.opcao-acesso:hover { border-color: #5D6475; }
.opcao-acesso:has(input:checked) { border-color: #007dc5; box-shadow: 0 0 0 1px #007dc5; background: rgba(0, 125, 197, .06); }
.opcao-acesso input { margin-top: .2rem; accent-color: #007dc5; }
.opcao-acesso strong { display: block; font-size: .95rem; }
.opcao-acesso small  { display: block; font-size: .82rem; color: var(--cinza); line-height: 1.35; }
.marcar-acesso { display: flex; gap: .5rem; align-items: center; margin-top: .9rem; font-weight: 500; font-size: .9rem; }
.marcar-acesso input { width: 1.05rem; height: 1.05rem; accent-color: #3d8900; }

/* Caixa de exclusão, abaixo do formulário */
.caixa-perigo {
  margin: -1.5rem 0 2.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid #DDE1E8; border-radius: 6px; background: #fff;
}
.caixa-perigo p { margin: 0; font-size: .92rem; }

/* Meu perfil */
.subtitulo-form { font-size: 1.15rem; font-weight: 700; margin: 0 0 .25rem; }
.dados-consulta {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  margin: .25rem 0 0; padding: .9rem 1rem;
  background: #F6F7FA; border-radius: 6px;
}
.dados-consulta dt { font-size: .8rem; color: var(--cinza); }
.dados-consulta dd { margin: .15rem 0 0; font-weight: 500; }

/* Senha separada dos dados pessoais por uma linha (v=18) */
.bloco-separado {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #DDE1E8;
}

/* ---------- Lote 7: listas em linhas com accordion (v=19) ----------
   Telas Expositores e Vendas. Cada item é um <details class="acc-linha">;
   a linha de títulos (.acc-cab) ordena a lista. As colunas de cada tela
   ficam na variável --colunas da .lista-acc.
   ------------------------------------------------------------ */
.f2 .lista-acc { --colunas: minmax(0, 1fr); margin-top: 20px; }
.f2 .lista-expositores {
  --colunas: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, .8fr) 18px;
}

/* Linha de títulos (clicar ordena) */
.f2 .acc-cab {
  display: grid; grid-template-columns: var(--colunas); gap: 12px; align-items: end;
  padding: 0 17px 8px; font-size: 13px; font-weight: 600;
}
.f2 .acc-cab a { color: var(--cinza); text-decoration: none; }
.f2 .acc-cab a:hover { color: var(--sumi); text-decoration: underline; }
.f2 .acc-cab a.ativa { color: var(--aiiro); }

/* Cada linha */
.f2 .acc-linha {
  background: #fff; border: 1px solid var(--linha); border-radius: 8px;
  margin: 0 0 8px; overflow: hidden;
}
.f2 .acc-linha > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: var(--colunas); gap: 12px; align-items: center;
  padding: 12px 16px;
}
.f2 .acc-linha > summary::-webkit-details-marker { display: none; }
.f2 .acc-linha > summary:hover { background: #F6F7FA; }
.f2 .acc-linha > summary:focus-visible { outline: 3px solid rgba(46, 74, 125, .45); outline-offset: -3px; }
.f2 .acc-linha[open] > summary { background: #F6F7FA; border-bottom: 1px solid var(--linha); }
.f2 .acc-linha[open] .acc-tipo-seta { transform: rotate(-135deg) translate(-2px, -2px); }
.f2 .acc-linha summary small { display: block; color: var(--cinza); font-size: 13px; }
.f2 .acc-linha .col-nome strong { display: block; font-size: 1.02rem; }
.f2 .acc-linha .col-nome small,
.f2 .acc-linha .col-espacos small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f2 .acc-linha .col-espacos b { font-size: 1.05rem; }
.f2 .acc-linha .col-cadastro { font-variant-numeric: tabular-nums; color: var(--cinza); font-size: 14px; }

/* Conteúdo que abre */
.f2 .acc-corpo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 28px; padding: 18px 16px 16px;
}
.f2 .acc-bloco h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cinza);
}
.f2 .acc-bloco p { margin: 0 0 5px; }
.f2 .acc-bloco p small { color: var(--cinza); font-size: 12px; margin-right: 4px; }
.f2 .acc-largo { grid-column: 1 / -1; }
.f2 .acc-redes { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.f2 .acc-vendas { list-style: none; margin: 0; padding: 0; }
.f2 .acc-vendas li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 0; border-top: 1px solid var(--linha);
}
.f2 .acc-vendas li:first-child { border-top: 0; padding-top: 0; }
.f2 .acc-vendas a { font-weight: 600; }
.f2 .acc-vendas .preco { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f2 .acc-acoes {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--linha); padding-top: 14px;
}

/* Celular: a linha vira um cartão e os títulos viram botões de ordenar */
@media (max-width: 760px) {
  .f2 .acc-cab { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
  .f2 .acc-cab a { border: 1px solid var(--linha); border-radius: 20px; padding: 3px 10px; background: #fff; }
  .f2 .acc-cab span { display: none; }
  .f2 .acc-linha > summary { display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .f2 .acc-linha .col-nome { flex: 1 1 100%; }
  .f2 .acc-linha .col-cadastro { display: none; }
  .f2 .acc-linha .acc-tipo-seta { margin-left: auto; }
  .f2 .acc-linha .col-espacos small { white-space: normal; }
}

/* ---------- Lote 7b: tela Vendas em linhas com accordion (v=20) ---------- */
.f2 .lista-vendas {
  --colunas: minmax(0, .45fr) minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .8fr) 18px;
}
.f2 .lista-acc .col-valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f2 .acc-linha .col-num,
.f2 .acc-linha .col-data { font-variant-numeric: tabular-nums; color: var(--cinza); font-size: 14px; }
.f2 .acc-linha.cancelada > summary { opacity: .6; }
.f2 .acc-linha.cancelada > summary .col-valor { text-decoration: line-through; }
/* Quadro de valores dentro da venda */
.f2 .acc-valores {
  display: grid; grid-template-columns: auto auto; justify-content: start;
  gap: 4px 18px; margin: 0;
}
.f2 .acc-valores dt { color: var(--cinza); }
.f2 .acc-valores dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .f2 .acc-linha .col-num { order: -1; }
  .f2 .lista-acc .col-valor { text-align: left; }
  .f2 .acc-linha .col-data { display: none; }
}

/* ---------- Lote 8: Documentos das vendas (v=21) ---------- */
/* Vendas: uma coluna a mais (Docs) antes da seta */
.f2 .lista-vendas {
  --colunas: minmax(0, .45fr) minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .8fr) 52px 18px;
}
.f2 .lista-acc .col-docs { text-align: center; }
.f2 .link-docs {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 6px;
  text-decoration: none; line-height: 1;
}
.f2 .link-docs:hover { background: rgba(61, 137, 0, .15); }
.f2 .link-docs b { color: #3d8900; font-size: 13px; }
.f2 .link-docs:focus-visible { outline: 3px solid rgba(46, 74, 125, .45); outline-offset: 1px; }
/* Tela Documentos */
.f2 .selo.doc-tipo { background: #E6F3EC; color: #2F4D2B; }
.f2 td.doc-acoes { white-space: nowrap; text-align: right; }
.f2 td.doc-acoes > * { display: inline-block; margin-left: 6px; vertical-align: middle; }
.f2 td.doc-acoes form { margin: 0; }
@media (max-width: 760px) {
  .f2 .lista-acc .col-docs { order: 5; }
}

/* ---------- Lote 8b: Enviar documento (v=22) ---------- */
.f2 .envio-lista { list-style: none; margin: 0; padding: 0; }
.f2 .envio-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--linha);
}
.f2 .envio-lista li:first-child { border-top: 0; }
.f2 .envio-lista label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin: 0; cursor: pointer; }
.f2 .envio-lista label input { margin-top: 4px; }
.f2 .envio-lista small { display: block; color: var(--cinza); font-size: 13px; }
.f2 .envio-lista strong + small { display: inline; }
.f2 .envio-todos { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin: 0 0 6px; }
/* Botão do WhatsApp: verde do WhatsApp, rollover no padrão do sistema */
.btn.btn-whats { color: #fff; background: #128C7E; border-color: #128C7E; }
.btn.btn-whats:hover:not(:disabled) { color: #128C7E; background: rgba(18, 140, 126, .25); border-color: #128C7E; }
.f2 .doc-enviado { color: #3d8900 !important; }

/* ---------- Menu hambúrguer no celular (v=23) ----------
   No computador nada muda: o botão fica escondido.
   Até 760px: menu e conta somem e aparecem só com o botão aberto,
   em lista, um item por linha. "header.barra" para não pegar as
   barras de busca (.f2 .barra) das telas. */
.menu-botao { display: none; }

@media (max-width: 760px) {
  header.barra { gap: 0 1rem; padding: .7rem 1.1rem; flex-wrap: wrap; }
  header.barra .marca { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }

  .menu-botao {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    flex: none; width: 2.6rem; height: 2.6rem; padding: 0 .6rem;
    background: transparent; color: #F1EEE6;
    border: 1px solid rgba(241, 238, 230, .35); border-radius: 6px;
    cursor: pointer;
  }
  .menu-botao span {
    display: block; height: 2px; width: 100%;
    background: currentColor; border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .menu-botao:hover { background: rgba(255, 255, 255, .08); }
  /* Aberto: as três linhas viram um X */
  .menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  header.barra .menu,
  header.barra .conta { display: none; flex-basis: 100%; }

  header.barra.menu-aberto .menu {
    display: flex; flex-direction: column; gap: 0;
    margin-top: .7rem; border-top: 1px solid rgba(241, 238, 230, .15);
  }
  header.barra.menu-aberto .menu a,
  header.barra.menu-aberto .menu-em-breve {
    padding: .8rem 0; font-size: 1.05rem;
    border-bottom: 1px solid rgba(241, 238, 230, .12);
  }
  header.barra.menu-aberto .menu a:hover { border-bottom-color: rgba(241, 238, 230, .12); color: var(--kin); }
  header.barra.menu-aberto .menu a[aria-current="page"] {
    color: var(--kin); font-weight: 700; border-bottom-color: rgba(241, 238, 230, .12);
  }

  header.barra.menu-aberto .conta {
    display: flex; justify-content: space-between; padding: .9rem 0 .3rem; font-size: 1rem;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .menu-botao span { transition: none; }
}

/* ---------- Planta: barra "Visualizar o mapa por:" e arrastar o mapa (v=24) ----------
   Botões no azul padrão (#007dc5), rollover: contorno na cor e 25% da cor.
   Abas do mapa: a escolhida fica cheia; a outra, branca com contorno azul. */
.f2 .planta-barra { gap: .6rem 1rem; }
.f2 .planta-rotulo { font-weight: 600; }
.f2 .planta-abas { display: flex; flex-wrap: wrap; gap: .6rem; }

.f2 .planta-barra .btn.btn-azul { color: #fff; background: #007dc5; border-color: #007dc5; }
.f2 .planta-barra .btn.btn-azul:hover:not(:disabled) { color: #007dc5; background: rgba(0, 125, 197, .25); border-color: #007dc5; }
.f2 .planta-barra .btn.btn-azul:focus-visible { outline: 3px solid rgba(0, 125, 197, .45); outline-offset: 2px; }
.f2 .planta-abas .btn.btn-azul[aria-selected="false"] { color: #007dc5; background: #fff; }
.f2 .planta-abas .btn.btn-azul[aria-selected="false"]:hover:not(:disabled) { background: rgba(0, 125, 197, .25); }
/* Zoom: botões colados; a linha entre eles fica branca para separar */
.f2 .planta-zoom .btn.btn-azul + .btn.btn-azul { border-left-color: rgba(255, 255, 255, .5); }

/* Mapa arrastável: mão aberta; mão fechada enquanto arrasta */
.f2 .planta-area { cursor: grab; }
.f2 .planta-area.arrastando,
.f2 .planta-area.arrastando * { cursor: grabbing !important; user-select: none; }