/* =========================================================================
   Diário de Bordo — Jornada de Evolução (Apidouro)
   Identidade: vermelho da logo + dourado + pergaminho náutico.
   Regra do projeto: cor sempre por variável, nunca hex solto fora do :root.
   ========================================================================= */

:root{
  --red-deep:#6f130f;
  --red-primary:#9c1f19;
  --red-bright:#c22b1f;
  --gold:#c9973f;
  --gold-light:#e2c179;
  --parchment:#f2e8d3;
  --parchment-dark:#e6d8b8;
  --parchment-line:#d8c7a0;
  --ink:#2b2118;
  --ink-soft:#5a4c3c;
  --white:#fdfaf3;
  --ok:#3f7a4f;
  --wip:#c9973f;
  --pending:#a99a80;
  --sea-top:rgba(58,120,130,.35);
  --sea-bottom:rgba(30,70,80,.55);

  /* Alturas de referência do layout móvel */
  --bar-h:56px;
  /* Alvo mínimo de toque (Apple HIG / Material) */
  --touch:44px;
  /* Padronização dos formulários: mesma largura, espaçamento e altura de campo
     em TODAS as páginas. Mexer aqui muda capa, destino, reflexões e etapas.
     100% = a largura do maior formulário (a tabela das etapas), que é a
     referência. Assim nenhuma página fica mais estreita que a outra. */
  --form-max:100%;
  --form-gap:16px;
  --field-h:40px;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}

html{
  /* Evita que o iOS aumente a fonte sozinho ao girar o aparelho */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #7a1a15 0%, transparent 60%),
    var(--red-deep);
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  /* Nada no diário deve provocar rolagem lateral no celular */
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(201,151,63,.25);
}

/* Texto longo digitado pelo colaborador não pode estourar a caixa */
.q-label,.node-sub,.node-title,.track-item,.page-desc,td,th{overflow-wrap:anywhere;}

/* Foco visível para quem navega por teclado (acessibilidade) */
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:3px;}

.app{display:flex; min-height:100vh; min-height:100dvh;}
.is-hidden{display:none !important;}

/* ===== GATE ===== */
#gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 500px at 15% 10%, #8a1c16 0%, transparent 55%),
    var(--red-deep);
  padding:24px;
  padding-top:max(24px, env(safe-area-inset-top));
  padding-bottom:max(24px, env(safe-area-inset-bottom));
  overflow-y:auto;
}
.gate-card{
  background:var(--parchment); border-radius:6px; max-width:460px; width:100%;
  padding:40px 36px; box-shadow:0 30px 60px rgba(0,0,0,.45);
  border:1px solid var(--parchment-line); position:relative;
  margin:auto;
  /* bússola atrás do título, bem discreta (a abelha é o destaque do login) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g opacity='0.14'><g fill='none' stroke='%239c1f19' stroke-width='1'><circle cx='60' cy='60' r='56'/><circle cx='60' cy='60' r='42'/></g><g stroke='%23c9973f' stroke-width='0.7'><line x1='60' y1='6' x2='60' y2='114'/><line x1='6' y1='60' x2='114' y2='60'/><line x1='24' y1='24' x2='96' y2='96'/><line x1='96' y1='24' x2='24' y2='96'/></g><polygon points='60,10 65,60 55,60' fill='%239c1f19'/><polygon points='60,110 55,60 65,60' fill='%23c9973f'/><polygon points='10,60 60,55 60,65' fill='%239c1f19'/><polygon points='110,60 60,65 60,55' fill='%23c9973f'/><circle cx='60' cy='60' r='4' fill='%239c1f19'/></g></svg>");
  background-repeat:no-repeat; background-position:center 120px; background-size:188px 188px;
}
.gate-card::before{
  content:"⚓"; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--red-deep); width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
/* abelha natural no canto do cartão de login */
.gate-bee{
  position:absolute; top:10px; right:12px; width:84px; height:auto; z-index:1;
  transform:rotate(-6deg); filter:drop-shadow(0 3px 5px rgba(90,60,10,.28));
  pointer-events:none;
}
/* rastro da abelha do login: pontos mais juntos e finos (a área é pequena) */
.gate-bee .bee-trail{stroke-dasharray:0.1 6; stroke-width:2.4;}
.gate-title{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:26px; text-align:center; color:var(--red-deep); margin:0 0 4px;}
.gate-sub{text-align:center; color:var(--ink-soft); font-size:13.5px; margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field select{
  width:100%; padding:11px 12px; border:1px solid var(--parchment-line); border-radius:4px;
  background:var(--white); font-family:inherit; font-size:16px; color:var(--ink);
  min-height:var(--touch);
}
.role-toggle{display:flex; gap:8px; margin-bottom:20px;}
.role-toggle button{
  flex:1; padding:11px 8px; border-radius:4px; border:1px solid var(--parchment-line); background:var(--white);
  font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; color:var(--ink-soft);
  min-height:var(--touch);
}
.role-toggle button.active{background:var(--red-primary); border-color:var(--red-primary); color:var(--white);}
.btn-primary{
  width:100%; padding:13px; border:none; border-radius:4px; background:var(--red-primary); color:var(--white);
  font-family:inherit; font-weight:700; font-size:15px; cursor:pointer; letter-spacing:.02em;
  min-height:var(--touch);
}
.btn-primary:hover{background:var(--red-bright);}
.btn-primary:disabled{cursor:not-allowed;}
.field-hint{font-size:11px; color:var(--ink-soft); margin-top:5px; line-height:1.45;}
.gate-note{font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.5;}
.gate-error{
  display:none; margin-top:12px; padding:9px 12px; border-radius:4px; font-size:12.5px; text-align:center;
  background:#f7e2e0; border:1px solid var(--red-primary); color:var(--red-deep);
}
.gate-error.show{display:block;}

/* ===== PAINEL "MINHA EQUIPE" (líder) ===== */
.team-overlay{
  position:fixed; inset:0; z-index:65; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(20,6,4,.62);
}
.team-overlay.show{display:flex;}
.team-card{
  background:var(--parchment); border:1px solid var(--parchment-line); border-radius:8px;
  max-width:460px; width:100%; max-height:80vh; overflow-y:auto;
  padding:26px 24px; box-shadow:0 24px 50px rgba(0,0,0,.45);
}
.team-title{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:20px; color:var(--red-deep); margin:0 0 4px; text-align:center;}
.team-sub{font-size:12.5px; color:var(--ink-soft); text-align:center; margin:0 0 18px; line-height:1.5;}
.team-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.team-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--white); border:1px solid var(--parchment-line); border-radius:6px; padding:11px 14px;
}
.team-item-nome{font-weight:700; font-size:14px; color:var(--ink); min-width:0; overflow-wrap:anywhere;}
.team-item-meta{font-size:11px; color:var(--ink-soft); margin-top:2px;}
.team-item button{
  flex-shrink:0; border:1px solid var(--red-primary); background:var(--white); color:var(--red-primary);
  border-radius:5px; padding:0 14px; font-family:inherit; font-weight:700; font-size:12.5px;
  cursor:pointer; min-height:var(--touch);
}
.team-item button:hover{background:var(--red-primary); color:var(--white);}
.team-empty{font-size:13px; color:var(--ink-soft); font-style:italic; text-align:center; padding:14px 4px; line-height:1.6;}
.team-note{
  font-size:11px; color:var(--ink-soft); line-height:1.5; margin-bottom:16px;
  background:#fdf3e0; border:1px solid var(--gold); border-radius:6px; padding:10px 12px;
}

/* ===== AVISO: LÍDER LENDO O DIÁRIO DE UM LIDERADO ===== */
.view-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--red-deep); color:var(--parchment); border:1px solid var(--gold);
  border-radius:6px; padding:11px 16px; margin-bottom:18px; font-size:13px; line-height:1.45;
}
.view-banner button{
  flex-shrink:0; background:var(--gold); color:var(--red-deep); border:none; border-radius:5px;
  padding:0 14px; font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer;
  min-height:var(--touch);
}
.view-banner button:hover{background:var(--gold-light);}

/* Campo travado (líder numa página que ele não edita): fundo branco e texto
   legível. Sem isto o navegador pinta o :disabled de cinza e some com o texto. */
input:disabled, textarea:disabled, select:disabled{
  opacity:1; color:var(--ink); -webkit-text-fill-color:var(--ink); cursor:default;
}
.field-card input:disabled, .q-body textarea:disabled, .learn-body textarea:disabled,
table.etapa input:disabled, table.etapa textarea:disabled, table.etapa select:disabled{
  background:transparent;
}
.field input:disabled, .field select:disabled, .track-add input:disabled{background:var(--white);}

/* ===== AVISO DE ARMAZENAMENTO ===== */
.storage-warn{
  display:none; margin:0 0 18px; padding:11px 14px; border-radius:6px; font-size:12.5px; line-height:1.5;
  background:#fdf3e0; border:1px solid var(--gold); color:var(--ink);
}
.storage-warn.show{display:block;}

/* ===== SIDEBAR (lombada do livro) ===== */
.sidebar{
  width:260px; flex-shrink:0; background:linear-gradient(180deg,#3a1210,#1c0906);
  color:var(--parchment); padding:26px 0; position:sticky; top:0;
  height:100vh; height:100dvh; overflow-y:auto;
  border-right:6px solid var(--gold);
  -webkit-overflow-scrolling:touch;
}
.brand{padding:0 22px 20px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:16px;}
.brand-mark{display:flex; align-items:center; gap:10px; font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:15px; color:var(--gold-light);}
.brand-sub{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em; color:rgba(242,232,211,.55); margin-top:4px; text-transform:uppercase;}
.who{padding:0 22px 18px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:10px;}
.who-name{font-weight:700; font-size:14.5px; color:var(--white);}
.who-meta{font-size:11.5px; color:rgba(242,232,211,.6); margin-top:2px;}
.progress-label{display:flex; justify-content:space-between; font-size:10.5px; font-family:'JetBrains Mono',ui-monospace,monospace; color:rgba(242,232,211,.7); margin-bottom:5px;}

nav.toc{padding:6px 12px;}
.toc-item{
  display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:5px; cursor:pointer;
  color:rgba(242,232,211,.78); margin-bottom:2px; font-size:13px;
  width:100%; text-align:left; background:none; border:none; font-family:inherit;
  min-height:var(--touch);
}
.toc-item:hover{background:rgba(255,255,255,.06);}
.toc-item.active{background:rgba(201,151,63,.18); color:var(--gold-light);}
.toc-num{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; width:20px; color:var(--gold); flex-shrink:0;}
.toc-item.done .toc-num::after{content:"●"; margin-left:4px; font-size:7px; color:var(--ok);}

.sidebar-actions{margin:16px 22px 0; display:flex; flex-direction:column; gap:8px;}
.side-btn{
  font-size:11.5px; color:rgba(242,232,211,.62); background:none; border:1px solid rgba(255,255,255,.2);
  padding:10px 8px; width:100%; border-radius:4px; cursor:pointer; font-family:inherit; min-height:var(--touch);
}
.side-btn:hover{border-color:var(--gold); color:var(--gold-light);}

/* ===== BARRA SUPERIOR (só no celular) ===== */
.mobile-bar{
  display:none; position:fixed; top:0; left:0; right:0; z-index:45;
  height:calc(var(--bar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0;
  align-items:center; gap:10px;
  background:linear-gradient(180deg,#3a1210,#28100c);
  border-bottom:2px solid var(--gold);
}
.mobile-bar-title{
  flex:1; min-width:0; color:var(--parchment); font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mobile-bar-pct{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--gold-light);
  border:1px solid rgba(201,151,63,.5); border-radius:10px; padding:3px 8px; flex-shrink:0;
}
.menu-btn{
  width:var(--touch); height:var(--touch); border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.07); color:var(--gold-light); border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px;
}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; z-index:39; background:rgba(20,6,4,.55);
  opacity:0; transition:opacity .25s ease;
}
.sidebar-backdrop.show{display:block; opacity:1;}

/* ===== MAIN ===== */
main{flex:1; padding:40px 48px 100px; max-width:980px; min-width:0; margin:0 auto; position:relative;}
.page{display:none; animation:fade .35s ease;}
.page.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.page-card{
  border-radius:8px; padding:38px 42px; box-shadow:0 20px 50px rgba(0,0,0,.28);
  border:1px solid var(--parchment-line); position:relative;
  /* marca d'água: bússola no canto (identidade náutica) + favo de mel */
  background-color:var(--parchment);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g opacity='0.30'><g fill='none' stroke='%239c1f19' stroke-width='1'><circle cx='60' cy='60' r='56'/><circle cx='60' cy='60' r='42'/></g><g stroke='%23c9973f' stroke-width='0.7'><line x1='60' y1='6' x2='60' y2='114'/><line x1='6' y1='60' x2='114' y2='60'/><line x1='24' y1='24' x2='96' y2='96'/><line x1='96' y1='24' x2='24' y2='96'/></g><polygon points='60,10 65,60 55,60' fill='%239c1f19'/><polygon points='60,110 55,60 65,60' fill='%23c9973f'/><polygon points='10,60 60,55 60,65' fill='%239c1f19'/><polygon points='110,60 60,65 60,55' fill='%23c9973f'/><circle cx='60' cy='60' r='4' fill='%239c1f19'/></g></svg>"),
    radial-gradient(var(--parchment) 60%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'><path d='M15 0 L45 0 L60 26 L45 52 L15 52 L0 26 Z' fill='none' stroke='%23c9973f' stroke-width='1' opacity='0.10'/></svg>");
  background-repeat:no-repeat, no-repeat, repeat;
  background-position:right -56px top -52px, center, 0 0;
  background-size:190px 190px, auto, 60px 52px;
}
.page-num{
  position:absolute; bottom:16px; right:24px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--ink-soft);
}

/* ===== ABELHA MENSAGEIRA =====
   No pé de cada página, uma abelha voa por um caminho tracejado vermelho rumo
   ao canto: a ideia de sair de uma página e entrar na outra. */
.bee-route{margin-top:24px; text-align:right; line-height:0; pointer-events:none;}
.bee-route svg{width:min(100%, 560px); height:auto; display:inline-block;}
.bee-trail{
  fill:none; stroke:var(--red-bright); stroke-width:3; stroke-linecap:round; stroke-dasharray:0.1 9;
  animation:trailFlow 2.4s linear infinite;
}
.bee-route.no-trail .bee-trail{display:none;}   /* pág. 01: só a abelha, sem rastro de entrada */
.bee-figure{animation:beeHover 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
@keyframes trailFlow{to{stroke-dashoffset:-9.1;}}   /* = 0.1 + gap: emenda sem salto */
@keyframes beeHover{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-5px) rotate(-1.5deg);}}
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red-primary); text-align:center; margin-bottom:6px;}
h1.page-title{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:30px; color:var(--red-deep); text-align:center; margin:0 0 6px;}
h1.page-title.inline{text-align:left; margin:0;}
p.page-desc{text-align:center; color:var(--ink-soft); font-size:14.5px; max-width:620px; margin:0 auto 30px; line-height:1.6;}
p.page-desc.inline{text-align:left; margin:8px 0 0; max-width:none;}

.q-card{display:flex; gap:16px; align-items:flex-start; background:var(--white); border:1px solid var(--parchment-line); border-radius:6px; padding:16px 18px;}
.q-icon{width:34px; height:34px; border-radius:50%; border:2px solid var(--red-primary); color:var(--red-primary); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
.q-body{flex:1; min-width:0;}
.q-label{font-weight:700; font-size:13.5px; color:var(--ink); margin-bottom:6px;}

textarea{
  width:100%; border:none; border-bottom:1px dashed var(--parchment-line); background:transparent;
  font-family:inherit; font-size:15px; color:var(--ink); resize:vertical; min-height:40px; padding:4px 0;
  line-height:1.5;
}
textarea:focus{outline:none; border-bottom:1px solid var(--gold);}
.field input:focus, .field select:focus{outline:2px solid var(--gold); outline-offset:1px;}

/* ===== FORMULÁRIOS PADRONIZADOS =====
   Todos usam a mesma largura (--form-max), o mesmo respiro (--form-gap) e a
   mesma caixa. O espaçamento vem SÓ do gap do grid: caixa não carrega margem
   própria, senão o desktop soma gap+margem e o celular fica com outra medida. */
.grid2, .reflect-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--form-gap);
  max-width:var(--form-max); margin-left:auto; margin-right:auto;
}
#antesForm{
  display:grid; grid-template-columns:1fr; gap:var(--form-gap);
  max-width:var(--form-max); margin-left:auto; margin-right:auto;
}
.grid2 > *, .reflect-grid > *, #antesForm > *{margin-bottom:0;}
.field-card{background:var(--white); border:1px solid var(--parchment-line); border-radius:6px; padding:16px 18px;}
.field-card label{display:flex; align-items:center; gap:8px; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--red-primary); margin-bottom:8px;}
.field-card input{
  width:100%; border:none; border-bottom:1px dashed var(--parchment-line); background:transparent;
  font-size:15px; padding:6px 0; font-family:inherit; color:var(--ink); min-height:var(--field-h);
}
.field-card input:focus{outline:none; border-bottom:1px solid var(--gold);}
.field-card input:read-only{color:var(--ink-soft);}

.quote-box{background:var(--red-deep); color:var(--parchment); border-radius:6px; padding:20px 26px; text-align:center; font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:15px; margin-top:10px;}

/* ===== MAPA DA JORNADA ===== */
.equation-banner{
  background:linear-gradient(135deg,var(--red-deep),var(--red-primary)); color:var(--parchment); border-radius:8px;
  padding:20px 26px; text-align:center; margin-bottom:28px; border:1px solid var(--gold);
}
.equation-banner .eq{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:18px; font-weight:700; letter-spacing:.02em; line-height:1.5;}
.equation-banner .eq-note{font-size:12px; opacity:.85; margin-top:6px;}
.route{position:relative; margin:10px 0 30px; padding-left:6px;}
.route-line{position:absolute; left:23px; top:8px; bottom:8px; width:3px; background:repeating-linear-gradient(180deg,var(--parchment-line) 0 6px, transparent 6px 12px);}
.node{display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; position:relative;}
.node-dot{
  width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--white); border:3px solid var(--pending); color:var(--pending); z-index:1; cursor:pointer;
  transition:all .25s ease; padding:0; font-family:inherit;
}
/* Travado (líder acompanhando): continua legível, só não clica. */
.node-dot:disabled{opacity:1; cursor:default;}
.node-dot.done{border-color:var(--ok); color:var(--ok); background:#eaf5ec;}
.node-dot.current{border-color:var(--gold); color:var(--red-deep); background:var(--gold-light); box-shadow:0 0 0 6px rgba(201,151,63,.25);}
.node-body{padding-top:4px; min-width:0;}
.node-title{font-weight:700; font-size:15px; color:var(--ink);}
.node-sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px; max-width:480px;}
.node-tag{display:inline-block; margin-top:6px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; padding:2px 8px; border-radius:10px; background:var(--parchment-dark); color:var(--ink-soft);}
.node-tag.here{background:var(--gold); color:var(--red-deep); font-weight:700;}

/* ===== CABEÇALHO DAS ETAPAS (páginas 06–09) ===== */
.stage-head{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.stage-num{
  width:46px; height:46px; border-radius:50%; background:var(--red-primary); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:20px; flex-shrink:0;
}
.stage-titles{min-width:0;}
.stage-titles .k{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:.1em;}
.stage-titles h1{margin:2px 0 0;}

/* ===== TABELAS DE ETAPA ===== */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
/* table-layout:fixed + min-width garantem que a coluna do select não seja
   espremida (o texto "Pendente"/"Demonstra consistentemente" cabe inteiro).
   Se a tela for estreita, o .table-scroll rola no lugar de cortar o texto. */
table.etapa{width:100%; min-width:560px; table-layout:fixed; border-collapse:collapse; margin-top:18px; background:var(--white); border-radius:6px; overflow:hidden;}
table.etapa th{background:var(--red-deep); color:var(--parchment); font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:10px 12px; text-align:left;}
table.etapa td{padding:8px 10px; border-bottom:1px solid var(--parchment-line); vertical-align:top;}
table.etapa input, table.etapa select, table.etapa textarea{
  width:100%; border:none; background:transparent; font-family:inherit; font-size:14px; padding:6px 2px; color:var(--ink);
}
/* select um tico menor no desktop: a seta nunca encosta no texto do nível.
   No celular o !important da media query já força 16px (sem zoom do iOS). */
table.etapa select{font-size:13px;}
table.etapa textarea{min-height:34px; resize:none; overflow:hidden;}
table.etapa input:focus, table.etapa select:focus, table.etapa textarea:focus{outline:2px solid var(--gold); border-radius:3px;}

/* larguras de coluna (com table-layout:fixed elas são respeitadas de verdade).
   A 5ª/6ª coluna (ações) também entra na conta, senão o fixed a espremeria. */
#tbl-preparar th:nth-child(1),#tbl-navegar th:nth-child(1),#tbl-resultados th:nth-child(1){width:24%;}
#tbl-preparar th:nth-child(2),#tbl-navegar th:nth-child(2),#tbl-resultados th:nth-child(2){width:16%;}
#tbl-preparar th:nth-child(3),#tbl-navegar th:nth-child(3),#tbl-resultados th:nth-child(3){width:26%;}
#tbl-preparar th:nth-child(4),#tbl-navegar th:nth-child(4),#tbl-resultados th:nth-child(4){width:24%;}
#tbl-preparar th:nth-child(5),#tbl-navegar th:nth-child(5),#tbl-resultados th:nth-child(5){width:10%;}
#tbl-conduzir th:nth-child(1){width:18%;}
#tbl-conduzir th:nth-child(2){width:37%;}   /* nível: cabe "Demonstra consistentemente" */
#tbl-conduzir th:nth-child(3){width:20%;}
#tbl-conduzir th:nth-child(4){width:15%;}
#tbl-conduzir th:nth-child(5){width:10%;}
#tbl-desempenho th:nth-child(1){width:13%;}
#tbl-desempenho th:nth-child(2){width:12%;}
#tbl-desempenho th:nth-child(3),#tbl-desempenho th:nth-child(4){width:24%;}
#tbl-desempenho th:nth-child(5){width:17%;}
#tbl-desempenho th:nth-child(6){width:10%;}

.row-actions{text-align:center; width:44px;}
.row-actions button{
  border:none; background:none; color:var(--red-primary); cursor:pointer; font-size:16px;
  min-width:var(--touch); min-height:var(--touch); border-radius:5px; font-family:inherit;
}
.row-actions button:hover{background:var(--parchment-dark);}
.add-row{
  margin-top:12px; background:var(--white); border:1px dashed var(--parchment-line); color:var(--red-primary);
  font-weight:700; font-size:13px; padding:11px 16px; border-radius:5px; cursor:pointer;
  font-family:inherit; min-height:var(--touch);
}
.add-row:hover{border-color:var(--gold); color:var(--red-deep);}
.learn-box{background:var(--parchment-dark); border-radius:6px; padding:14px 16px; margin-top:20px; display:flex; gap:12px; align-items:flex-start;}
.learn-body{flex:1; min-width:0;}
.learn-box .li{font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--red-primary); margin-bottom:6px;}

/* Mini medalha de etapa concluída: aro serrilhado + disco dourado + a logo. */
.stamp{
  position:absolute; top:26px; right:28px; width:86px; height:86px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:repeating-conic-gradient(from 0deg, #a3781f 0 5deg, var(--gold-light) 5deg 10deg);
  box-shadow:0 8px 20px rgba(0,0,0,.32);
  opacity:0; transform:rotate(-12deg) scale(.75); pointer-events:none;
  transition:opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.stamp::before{
  content:''; position:absolute; inset:5px; border-radius:50%;
  background:radial-gradient(circle at 34% 26%, #f7ebc4 0%, var(--gold-light) 40%, var(--gold) 74%, #9c7422 100%);
  box-shadow:inset 0 -5px 12px rgba(120,80,10,.40), inset 0 4px 9px rgba(255,255,255,.55);
}
.stamp img{width:38px; height:auto; position:relative; z-index:1; filter:drop-shadow(0 1px 2px rgba(90,60,10,.45));}
.stamp span{
  position:relative; z-index:1; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:7px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#6b4e14;
}
.stamp.show{opacity:1; transform:rotate(-12deg) scale(1);}

/* Aviso de página travada (ex.: pág. 10 é do RH). */
.page-note{
  background:#fdf3e0; border:1px solid var(--gold); border-radius:6px;
  padding:10px 14px; font-size:12.5px; line-height:1.5; color:var(--ink);
  max-width:var(--form-max); margin:0 auto 18px;
}

/* Linha que diz o que falta para a etapa fechar. */
.stage-status{
  margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--ink-soft);
  border-left:3px solid var(--parchment-line); padding:6px 0 6px 12px;
}
.stage-status.ok{color:var(--ok); font-weight:600; border-left-color:var(--ok);}

/* ===== ACOMPANHAMENTO ===== */
.track-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;}
.track-col{min-width:0;}
/* mesma altura no cabeçalho de cada coluna: as caixas de adicionar ficam alinhadas */
.track-head{min-height:74px;}
.track-col h3{font-family:'Playfair Display',Georgia,serif; font-size:16px; color:var(--red-deep); margin:0 0 4px;}
.track-col .sub{font-size:11.5px; color:var(--ink-soft); margin-bottom:12px;}
.track-add{display:flex; gap:6px; margin-bottom:12px;}
.track-add input{
  flex:1; min-width:0; border:1px solid var(--parchment-line); border-radius:4px; padding:9px 10px;
  font-size:14px; font-family:inherit; color:var(--ink); background:var(--white); min-height:var(--touch);
}
.track-add button{
  border:none; background:var(--red-primary); color:var(--white); border-radius:4px; padding:0 16px;
  cursor:pointer; font-weight:700; font-size:18px; font-family:inherit;
  min-width:var(--touch); min-height:var(--touch); flex-shrink:0;
}
.track-add button:hover{background:var(--red-bright);}
.track-item{
  background:var(--white); border:1px solid var(--parchment-line); border-radius:5px;
  padding:9px 10px; margin-bottom:8px; font-size:13px;
  display:grid; grid-template-columns:1fr auto; gap:4px 8px; align-items:start;
}
.track-item .d{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; color:var(--gold); font-weight:700;}
.track-item .t{grid-column:1 / -1;}
.track-item button{
  border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:15px;
  min-width:var(--touch); min-height:var(--touch); border-radius:4px; font-family:inherit;
  margin:-6px -6px 0 0;   /* cresce o alvo sem inchar a altura do cartão */
}
.track-item button:hover{background:var(--parchment-dark); color:var(--red-primary);}
.track-empty{font-size:12px; color:var(--ink-soft); font-style:italic; padding:4px 2px;}


/* ===== FECHAMENTO ===== */
.closing{background:linear-gradient(135deg,var(--red-deep),var(--red-primary)); color:var(--parchment); border-radius:8px; padding:34px 40px; text-align:center;}
.closing h1{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:24px; margin:0 0 12px; color:var(--white);}
.closing p{max-width:560px; margin:0 auto 6px; font-size:14px; line-height:1.7; opacity:.92;}
.closing .tag{font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:16px; margin-top:18px; color:var(--gold-light);}

.save-toast{
  position:fixed; right:24px; bottom:calc(18px + env(safe-area-inset-bottom));
  background:var(--red-deep); color:var(--parchment); padding:10px 16px; border-radius:5px;
  font-size:12.5px; font-family:'JetBrains Mono',ui-monospace,monospace;
  opacity:0; transform:translateY(8px); transition:all .3s ease; z-index:60; border:1px solid var(--gold);
  pointer-events:none; max-width:calc(100vw - 48px);
}
.save-toast.show{opacity:1; transform:translateY(0);}
.save-toast.err{background:#7a1410; border-color:var(--red-bright);}

/* ===== LOGO ===== */
.gate-logo{display:block; margin:0 auto 14px; height:64px; width:auto;}
.brand-logo{height:34px; width:auto; flex-shrink:0;}
.gate-tagline{
  text-align:center; font-family:'Playfair Display',Georgia,serif; font-style:italic; color:var(--red-primary);
  font-size:14px; margin:-4px 0 18px; line-height:1.4;
}

/* ===== RÉGUA BARCO/MAR ===== */
.voyage-wrap{margin-top:12px;}
.voyage-track{
  position:relative; height:38px; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, var(--sea-top), var(--sea-bottom));
  border:1px solid rgba(255,255,255,.15);
}
.voyage-wave{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='38' viewBox='0 0 80 38'><path d='M0 22 Q 20 12 40 22 T 80 22 V38 H0 Z' fill='%23ffffff' opacity='0.10'/></svg>");
  background-size:80px 38px; background-repeat:repeat-x; animation:waveMove 6s linear infinite;
}
@keyframes waveMove{from{background-position-x:0;} to{background-position-x:-80px;}}
.voyage-port, .voyage-flag{position:absolute; top:50%; transform:translateY(-50%); font-size:15px; z-index:2;}
.voyage-port{left:8px;}
.voyage-flag{right:8px;}
.voyage-boat{
  position:absolute; top:50%; transform:translate(-50%,-55%); font-size:19px; z-index:3;
  left:6%; transition:left .7s cubic-bezier(.4,0,.2,1); filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));
}

/* ===== RODAPÉ DE CULTURA (sutil, sob cada formulário) =====
   Os 3 pilares aparecem discretos no pé de cada página, em pílulas cor de mel. */
.page-culture-footer{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 10px;
  margin-top:30px; padding-top:16px; border-top:1px dashed var(--parchment-line);
}
.page-culture-footer span{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); background:rgba(201,151,63,.10); border:1px solid rgba(201,151,63,.35);
  border-radius:20px; padding:4px 12px;
}

/* ===== SELO DE CONCLUSÃO DA JORNADA =====
   O momento de recompensa da jornada: uma medalha dourada carimbada na tela. */
.seal-overlay{
  position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 50% 42%, rgba(101,17,13,.975), rgba(14,4,3,.995));
}
.seal-overlay.show{display:flex;}
.seal-stage{text-align:center;}

.seal{
  position:relative; width:230px; height:230px; margin:0 auto; border-radius:50%;
  /* aro serrilhado da medalha */
  background:repeating-conic-gradient(from 0deg, #a3781f 0 4deg, var(--gold-light) 4deg 8deg);
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
  opacity:0; transform:scale(.3) rotate(-32deg);
  transition:opacity .3s ease, transform .75s cubic-bezier(.34,1.56,.64,1);
}
.seal-overlay.show .seal{opacity:1; transform:scale(1) rotate(-8deg);}

/* brilho que pulsa atrás da medalha */
.seal::after{
  content:''; position:absolute; inset:-30px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(226,193,121,.5), transparent 68%);
  animation:sealGlow 2.4s ease-in-out infinite;
}
@keyframes sealGlow{0%,100%{opacity:.35; transform:scale(.95);} 50%{opacity:.75; transform:scale(1.06);}}

.seal-disc{
  position:absolute; inset:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 26%, #f7ebc4 0%, var(--gold-light) 38%, var(--gold) 72%, #9c7422 100%);
  box-shadow:inset 0 -12px 26px rgba(120,80,10,.45), inset 0 10px 20px rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
}
.seal-disc::before{
  content:''; position:absolute; inset:14px; border-radius:50%;
  border:1.5px dashed rgba(122,88,24,.55);
}
/* conteúdo gravado no disco dourado: a abelha, o nome Apidouro e o mote */
.seal-emblem{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; padding:0 18px;}
.seal-bee{width:54px; height:auto; margin-bottom:1px; filter:drop-shadow(0 1px 1px rgba(90,60,10,.35));}
.seal-word{
  font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:30px; line-height:1;
  color:#5f440f; letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(90,60,10,.35);
}
.seal-rule{width:78px; height:2px; border-radius:2px; margin:3px 0 1px;
  background:linear-gradient(90deg, transparent, #7a5816, transparent);}
.seal-caption{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:#6b4e14;
}
.seal-motto{font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:11px; color:#7a5816;}

.seal-title{
  margin-top:26px; font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:22px;
  color:var(--white); text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.seal-sub{
  margin-top:6px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light);
}

.unlock-panel{
  margin-top:26px; background:var(--white); border:1px solid var(--parchment-line); border-radius:8px; padding:22px 26px;
}
.unlock-title{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:16px; color:var(--red-deep); margin-bottom:12px; text-align:center;}
.unlock-checklist{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.unlock-check{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-soft); line-height:1.45;}
.unlock-check.ok{color:var(--ok); font-weight:600;}
.unlock-check .b{width:16px; text-align:center; flex-shrink:0;}
#unlockBtn:disabled{opacity:.5;}
#unlockBtn.ready{opacity:1;}
.unlock-hint{text-align:center; font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.5;}

/* =========================================================================
   RESPONSIVO — os colaboradores acessam quase só pelo celular.
   ========================================================================= */

/* --- Tablet / celular grande: sidebar vira gaveta --- */
@media (max-width:900px){
  .mobile-bar{display:flex;}

  .sidebar{
    position:fixed; top:0; left:0; z-index:40;
    transform:translateX(-100%); transition:transform .28s ease;
    padding-top:calc(20px + env(safe-area-inset-top));
    box-shadow:6px 0 24px rgba(0,0,0,.4);
  }
  .sidebar.open{transform:translateX(0);}

  main{
    padding:calc(var(--bar-h) + env(safe-area-inset-top) + 18px)
            max(16px, env(safe-area-inset-right))
            calc(60px + env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
  }
  .page-card{padding:24px 18px 34px;}
  .bee-route{margin-top:18px;}
  /* uma coluna, mas o respiro continua sendo o mesmo --form-gap do desktop */
  .grid2, .reflect-grid, .track-grid{grid-template-columns:1fr;}
  .track-grid{gap:26px;}
  .track-head{min-height:0;}   /* alinhar cabeçalhos só faz sentido lado a lado */

  h1.page-title{font-size:23px;}
  p.page-desc{font-size:14px; margin-bottom:22px;}
  .closing{padding:26px 20px;}
  .closing h1{font-size:20px;}
  .unlock-panel{padding:18px 16px;}
  .quote-box{padding:16px 18px; font-size:14px;}
  .stamp{top:14px; right:14px; width:64px; height:64px;}
  .stamp img{width:27px;}
  .stamp span{font-size:5.5px; letter-spacing:.1em;}

  /* Selo de conclusão menor, mas ainda o momento mais bonito do diário */
  .seal{width:196px; height:196px;}
  .seal-word{font-size:24px;}
  .seal-bee{width:44px;}
  .seal-emblem{padding:0 14px;}
  .seal-title{font-size:19px; margin-top:22px;}

  /* Cabeçalho de etapa: o carimbo ocupa o canto, o título precisa caber ao lado */
  .stage-head{gap:10px; padding-right:56px;}
  .stage-num{width:38px; height:38px; font-size:17px;}
  .stage-titles .k{font-size:10px;}

  /* A equação não pode estourar a largura da tela */
  .equation-banner{padding:16px 14px;}
  .equation-banner .eq{font-size:14px;}

  /* iOS dá zoom sozinho em campo com fonte < 16px: trava tudo em 16px */
  input, select, textarea,
  table.etapa input, table.etapa select, table.etapa textarea,
  .field-card input, .track-add input{font-size:16px !important;}
}

/* --- Celular: tabela vira cartão (ninguém rola tabela de 5 colunas no celular) --- */
@media (max-width:760px){
  .table-scroll{overflow-x:visible;}
  table.etapa{background:transparent; margin-top:14px; display:block; min-width:0; table-layout:auto;}
  table.etapa thead{
    /* esconde o cabeçalho sem tirar do leitor de tela */
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  table.etapa tbody{display:block; counter-reset:linha;}
  table.etapa tr{
    display:block; counter-increment:linha; position:relative;
    background:var(--white); border:1px solid var(--parchment-line); border-radius:8px;
    padding:12px 14px 10px; margin-bottom:14px;
  }
  table.etapa tr::before{
    content:"Registro " counter(linha);
    display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700;
    border-bottom:1px solid var(--parchment-line); padding-bottom:7px; margin-bottom:4px;
  }
  table.etapa td{display:block; width:auto; padding:9px 0 0; border-bottom:none;}
  table.etapa td::before{
    content:attr(data-label);
    display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--red-primary); margin-bottom:2px;
  }
  table.etapa input, table.etapa select, table.etapa textarea{
    border:1px solid var(--parchment-line); border-radius:5px; padding:9px 10px;
    background:var(--white); min-height:var(--touch);
  }
  table.etapa textarea{min-height:56px;}

  table.etapa td.row-actions{
    width:auto; text-align:right; margin-top:10px; padding-top:10px;
    border-top:1px dashed var(--parchment-line);
  }
  table.etapa td.row-actions::before{content:none;}
  .row-actions button{
    width:100%; padding:0 12px; color:var(--red-primary);
    border:1px solid var(--parchment-line); border-radius:5px; background:var(--parchment);
    font-size:13px; font-weight:700;
  }
  .row-actions button::after{content:" Remover registro";}

  .add-row{width:100%;}

  .q-card{padding:14px; gap:12px;}
  .q-icon{width:30px; height:30px; font-size:14px;}
  .learn-box{padding:12px 14px;}

  /* Régua da jornada também aparece na barra do topo, então some daqui */
  .node{gap:12px; margin-bottom:20px;}
  .node-dot{width:44px; height:44px; font-size:18px;}
  .route-line{left:21px;}
}

/* --- Celular pequeno (iPhone SE, Androids de entrada ~320-380px) --- */
@media (max-width:380px){
  .page-card{padding:20px 14px 30px;}
  h1.page-title{font-size:20px;}
  .equation-banner .eq{font-size:12.5px;}
  .gate-card{padding:32px 20px;}
  .gate-bee{width:62px; top:8px; right:8px;}
  .gate-title{font-size:22px;}
  .role-toggle button{font-size:13px; padding:11px 4px;}
  .save-toast{right:12px; left:12px; text-align:center;}
  .mobile-bar-title{font-size:14px;}
}

/* --- Celular deitado: barra menor para sobrar tela --- */
@media (max-height:480px) and (orientation:landscape){
  :root{--bar-h:44px;}
  .sidebar{padding-top:calc(12px + env(safe-area-inset-top));}
}

/* --- Respeita quem pediu menos animação no sistema --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* --- Impressão: o diário é um documento, precisa sair bonito no papel --- */
@media print{
  body{background:var(--white);}
  .sidebar, .mobile-bar, .sidebar-backdrop, .save-toast, .add-row,
  .row-actions, #gate, .unlock-panel, .side-btn, .seal-overlay, .bee-route{display:none !important;}
  main{padding:0; max-width:none;}
  .page{display:block !important; page-break-after:always;}
  .page-card{box-shadow:none; border:1px solid var(--parchment-line);}
  table.etapa th{background:var(--parchment-dark); color:var(--ink);}
}