/* ===========================================================================
   1967 Woodworks — ESTILO RÚSTICO  (modulos/visual/estilo-rustico.css)

   Cara de marcenaria: madeira, couro, ferro e carimbo queimado.
   Feito para DOIS IDOSOS sem intimidade com tecnologia. Por isso as regras
   abaixo valem mais que qualquer enfeite:

     • letra do corpo 20 px no mínimo; títulos 28 px ou mais; linha 1,5
     • contraste de TODO texto 7:1 ou mais (pares medidos no README)
     • botão principal 64 px de altura e largura cheia no celular
     • tudo que se toca tem 48 px ou mais
     • foco sempre visível (anel escuro + halo âmbar)
     • nada de cinza fraco: o "texto secundário" também passa de 7:1
     • textura SÓ no fundo (a mesa de madeira, as réguas de ferro). Todo texto
       fica em superfície LISA: papel, plaquinha, couro, botão.

   Prefixo "r-" em tudo, para não brigar com as classes que o app já tem.
   Os caminhos (fontes e logo) são relativos a ESTE arquivo: copie a pasta
   inteira (estilo-rustico.css + vendor/ + marca/) para dentro do app.
   =========================================================================== */

/* ------------------------------------------------------------- FONTES ---- */
/* Licença OFL 1.1 — texto completo em vendor/fontes/<fonte>/OFL.txt          */
@font-face{
  font-family:"Alfa Slab One";
  src:url("vendor/fontes/alfa-slab-one/AlfaSlabOne-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("vendor/fontes/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("vendor/fontes/atkinson-hyperlegible/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

/* --------------------------------------------------------- CORES: DIA ---- */
:root{
  /* Peles do kit da marca (marca-tio/gerar-marca.py) — referência */
  --r-kit-nogueira:#3A2A1E;
  --r-kit-creme:#F3E7D3;
  --r-kit-carvao:#111111;
  --r-kit-madeira:#7A4A22;     /* com creme dá 6,55:1 — NÃO usar atrás de texto */

  /* Fundo de madeira (mesa). Nunca tem texto em cima. */
  --r-mesa:#8B5A2E;
  --r-mesa-escura:#5E3A1C;

  /* Superfícies LISAS, onde mora o texto */
  --r-papel:#FBF5E9;           /* folha principal */
  --r-papel-2:#F1E6D2;         /* caixa dentro da folha */
  --r-plaquinha:#EBD5B0;       /* plaquinha de pinus (botões da tela inicial) */
  --r-arte-fundo:#FFFFFF;      /* atrás da arte preta: branco, como vai na madeira clara */

  /* Tinta */
  --r-tinta:#21170F;           /* texto principal (queimado quase preto) */
  --r-tinta-2:#4A3828;         /* texto de ajuda — continua acima de 7:1 */
  --r-queimado:#6B330B;        /* destaque e link (tinta de ferro em brasa) */
  --r-borda:#4A3828;           /* borda forte, nunca cinza claro */

  /* Topo (nogueira) */
  --r-topo:#3A2A1E;
  --r-topo-texto:#F3E7D3;

  /* Botão principal (couro queimado) */
  --r-couro:#5C3214;
  --r-couro-texto:#FFF6E6;
  --r-couro-borda:#2E1A0B;
  --r-couro-sombra:#2E1A0B;

  /* Perigo (apagar) */
  --r-perigo:#8A1D12;
  --r-perigo-texto:#FFFFFF;
  --r-perigo-borda:#4E0F08;

  /* Avisos (fundo liso claro + tinta escura) */
  --r-ok-fundo:#DCEBD0;     --r-ok-borda:#2F6B35;
  --r-info-fundo:#F1E6D2;   --r-info-borda:#5C3214;
  --r-atencao-fundo:#FCEBC2;--r-atencao-borda:#8A5A00;
  --r-erro-fundo:#F8DCD5;   --r-erro-borda:#8A1D12;

  /* Abas do rodapé (couro escuro) */
  --r-aba-fundo:#4A2C17;
  --r-aba-texto:#F3E7D3;
  --r-aba-atual-fundo:#F3E7D3;
  --r-aba-atual-texto:#21170F;

  /* Foco: anel da cor da tinta + halo âmbar. Aparece em fundo claro E escuro. */
  --r-foco:#1B1209;
  --r-foco-halo:#FFC23D;

  /* Ferro */
  --r-ferro-1:#262626;
  --r-ferro-2:#5E5E5E;

  /* Medidas */
  --r-raio:14px;
  --r-toque:48px;              /* mínimo de qualquer coisa tocável */
  --r-botao:60px;              /* botões comuns */
  --r-botao-principal:64px;    /* o botão principal da tela */
  /* Escala da letra: 1 = Normal, 1.15 = Grande, 1.3 = Maior (ideia 5, aprovada em 31/10).
     Quem muda é o Visual.aplicarLetra() / botão "Aa Letra". Nada abaixo de 1.
     O topo e as abas têm teto (min(..., 22–34px)) para nunca engolir a tela. */
  --r-escala:1;
  --r-letra:calc(20px * var(--r-escala));        /* corpo: nunca menos que 20 px */
  --r-letra-botao:calc(22px * var(--r-escala));
  --r-letra-titulo:calc(30px * var(--r-escala)); /* título da tela */
  --r-letra-subtitulo:calc(28px * var(--r-escala));
  --r-abas-altura:78px;

  --r-fonte-titulo:"Alfa Slab One","Rockwell","Georgia",serif;
  --r-fonte-texto:"Atkinson Hyperlegible",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --r-sombra-papel:0 2px 0 rgba(30,16,6,.35),0 12px 26px rgba(30,16,6,.35);
  --r-sombra-bloco:0 4px 0 var(--r-couro-sombra);

  /* Texturas desenhadas por código (nada de foto). Só em área SEM texto. */
  --r-textura-tabuas:
    repeating-linear-gradient(180deg,transparent 0 117px,rgba(20,10,4,.6) 117px 120px,rgba(255,232,196,.16) 120px 121px),
    repeating-linear-gradient(180deg,rgba(255,236,204,.07) 0 121px,rgba(0,0,0,.07) 121px 242px,rgba(0,0,0,0) 242px 363px);
  --r-textura-veio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E %3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.0028 .085' numOctaves='4' seed='1967' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .07 0 0 0 0 .02 0 -2.1 0 0 1.32'/%3E %3C/filter%3E %3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .02 0 0 -.9 0 .55'/%3E %3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E %3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E %3C/svg%3E");
  --r-textura-kraft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E %3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.75 .55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .07 0 0 -1.4 0 .78'/%3E %3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.5'/%3E %3C/svg%3E");

  color-scheme:light;
}

/* --------------------------------------------------------- CORES: NOITE --- */
/* Duas portas para o tema escuro: pedido explícito (data-tema="escuro") e o
   sistema do celular quando ninguém escolheu (sem data-tema = automático). */
:root[data-tema="escuro"]{
  --r-mesa:#3B2614; --r-mesa-escura:#24170C;
  --r-papel:#251B14; --r-papel-2:#2F241B; --r-plaquinha:#3B2A1C; --r-arte-fundo:#F6F1EA;
  --r-tinta:#F6ECDD; --r-tinta-2:#E3D3BD; --r-queimado:#F2B66D; --r-borda:#E3D3BD;
  --r-topo:#120D09; --r-topo-texto:#F3E7D3;
  --r-couro:#E7BE86; --r-couro-texto:#1E140C; --r-couro-borda:#8B5A2E; --r-couro-sombra:#0B0704;
  --r-perigo:#FF9A85; --r-perigo-texto:#2A0B05; --r-perigo-borda:#FFD2C8;
  --r-ok-fundo:#1E2A1C; --r-ok-borda:#7FC08A;
  --r-info-fundo:#2F241B; --r-info-borda:#E7BE86;
  --r-atencao-fundo:#3A2C0E; --r-atencao-borda:#F2C14E;
  --r-erro-fundo:#3A1C14; --r-erro-borda:#FF9A85;
  --r-aba-fundo:#1A120C; --r-aba-texto:#F3E7D3; --r-aba-atual-fundo:#E7BE86; --r-aba-atual-texto:#1E140C;
  --r-foco:#FFF6E6; --r-foco-halo:#FFB020;
  --r-ferro-1:#151515; --r-ferro-2:#4A4A4A;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]):not([data-tema="escuro"]){
    --r-mesa:#3B2614; --r-mesa-escura:#24170C;
    --r-papel:#251B14; --r-papel-2:#2F241B; --r-plaquinha:#3B2A1C; --r-arte-fundo:#F6F1EA;
    --r-tinta:#F6ECDD; --r-tinta-2:#E3D3BD; --r-queimado:#F2B66D; --r-borda:#E3D3BD;
    --r-topo:#120D09; --r-topo-texto:#F3E7D3;
    --r-couro:#E7BE86; --r-couro-texto:#1E140C; --r-couro-borda:#8B5A2E; --r-couro-sombra:#0B0704;
    --r-perigo:#FF9A85; --r-perigo-texto:#2A0B05; --r-perigo-borda:#FFD2C8;
    --r-ok-fundo:#1E2A1C; --r-ok-borda:#7FC08A;
    --r-info-fundo:#2F241B; --r-info-borda:#E7BE86;
    --r-atencao-fundo:#3A2C0E; --r-atencao-borda:#F2C14E;
    --r-erro-fundo:#3A1C14; --r-erro-borda:#FF9A85;
    --r-aba-fundo:#1A120C; --r-aba-texto:#F3E7D3; --r-aba-atual-fundo:#E7BE86; --r-aba-atual-texto:#1E140C;
    --r-foco:#FFF6E6; --r-foco-halo:#FFB020;
    --r-ferro-1:#151515; --r-ferro-2:#4A4A4A;
    color-scheme:dark;
  }
}

/* --------------------------------------------------------------- BASE ---- */
/* Tudo vale a partir da classe "r-app" no <body>. Sem ela, nada muda. */
.r-app{
  margin:0;min-height:100vh;min-height:100dvh;
  background-color:var(--r-mesa);
  background-image:var(--r-textura-tabuas),var(--r-textura-veio);
  color:var(--r-tinta);
  font:400 var(--r-letra)/1.5 var(--r-fonte-texto);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-wrap:break-word;
  -webkit-tap-highlight-color:transparent;
}
:where(.r-app) *,:where(.r-app) *::before,:where(.r-app) *::after{box-sizing:border-box}
.r-app [hidden]{display:none!important}
:where(.r-app) img{display:block;max-width:100%}
:where(.r-app) :where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit}
:where(.r-app) button{cursor:pointer}
:where(.r-app) a{color:var(--r-queimado);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
:where(.r-app) :where(h1,h2){font-family:var(--r-fonte-titulo);font-weight:400;line-height:1.2;letter-spacing:.005em}
:where(.r-app) h3{font-weight:700;font-size:calc(24px * var(--r-escala));line-height:1.3}
:where(.r-app) p{margin:0 0 .75em}
svg.r-ic{width:28px;height:28px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Foco visível: anel da cor da tinta + halo âmbar por fora. */
:where(.r-app) :focus{outline:none}
.r-app :focus-visible{
  outline:4px solid var(--r-foco);
  outline-offset:3px;
  box-shadow:0 0 0 9px var(--r-foco-halo);
}

/* Só para leitor de tela */
.r-so-leitor{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------- CABEÇALHO ------- */
.r-cabecalho{
  position:sticky;top:0;z-index:30;
  background:var(--r-topo);color:var(--r-topo-texto);
  padding:calc(8px + env(safe-area-inset-top)) 16px 12px;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
/* Régua de ferro com rebites embaixo do topo — enfeite sem texto. */
.r-cabecalho::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:12px;
  background:
    radial-gradient(circle at 50% 50%,#d8d2c8 0 1.5px,var(--r-ferro-2) 2.5px 3.6px,transparent 4.2px) 0 0/56px 12px repeat-x,
    linear-gradient(180deg,var(--r-ferro-2),var(--r-ferro-1) 55%,#0d0d0d);
  box-shadow:0 3px 6px rgba(0,0,0,.35);
  pointer-events:none;
}
.r-cabecalho-linha{display:flex;align-items:center;gap:10px;min-height:60px}
/* Arranjos: [logo · Aa Letra]  ou  [‹ Início · logo · Aa Letra]  ou  [‹ Início · logo].
   A logo encolhe (até 64 px) antes de qualquer coisa sair da tela. */
.r-cabecalho-linha > .r-logo{flex:0 1 auto;min-width:64px}
.r-cabecalho-linha > .r-voltar ~ .r-logo{margin-left:auto}
.r-cabecalho-linha > .r-btn-letra{margin-left:auto}
.r-cabecalho--inicio{position:relative;padding-bottom:16px;text-align:center}
.r-cabecalho--inicio .r-logo{margin:4px auto 0}
.r-titulo-tela{
  margin:8px 0 0;font-family:var(--r-fonte-titulo);font-weight:400;
  font-size:min(var(--r-letra-titulo),34px);line-height:1.15;color:var(--r-topo-texto);  /* teto: o topo não engole a tela */
}

/* A logo é desenhada pela máscara do SVG do kit: herda a cor do texto. */
.r-logo{
  display:block;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("marca/horizontal.svg") center/contain no-repeat;
          mask:url("marca/horizontal.svg") center/contain no-repeat;
}
.r-logo--completa{
  width:min(210px,56vw);aspect-ratio:2615/1888;
  -webkit-mask-image:url("marca/completa.svg");mask-image:url("marca/completa.svg");
}
.r-logo--horizontal{
  width:171px;max-width:100%;height:auto;aspect-ratio:2548/745;   /* 50 px de altura; encolhe se faltar lugar */
  -webkit-mask-image:url("marca/horizontal.svg");mask-image:url("marca/horizontal.svg");
}
.r-logo--numeros{
  height:48px;aspect-ratio:1728/1013;
  -webkit-mask-image:url("marca/numeros-estrela.svg");mask-image:url("marca/numeros-estrela.svg");
}
.r-logo--estrela{
  width:36px;aspect-ratio:309/306;
  -webkit-mask-image:url("marca/estrela.svg");mask-image:url("marca/estrela.svg");
}

/* Botão voltar do topo: palavra + seta, borda creme. */
.r-voltar{
  display:inline-flex;align-items:center;gap:8px;
  min-height:56px;padding:0 18px 0 10px;
  background:transparent;color:var(--r-topo-texto);
  border:3px solid currentColor;border-radius:12px;
  font-weight:700;font-size:min(var(--r-letra-botao),24px);line-height:1.1;   /* teto do topo */
  flex:0 0 auto;
}
.r-voltar:active{background:rgba(243,231,211,.14)}

/* Botão "Aa Letra" do topo (ideia 5): abre a folha Normal · Grande · Maior.
   Tamanho fixo: o topo tem teto, não cresce junto com a letra. */
.r-btn-letra{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  flex:0 0 auto;min-height:56px;min-width:64px;padding:2px 10px;
  background:transparent;color:var(--r-topo-texto);
  border:3px solid currentColor;border-radius:12px;
  font-family:var(--r-fonte-texto);font-weight:700;font-size:20px;line-height:1.05;
}
.r-btn-letra-aa{font-family:var(--r-fonte-titulo);font-weight:400;font-size:24px;line-height:1}
.r-btn-letra:active{background:rgba(243,231,211,.14)}

/* ---------------------------------------------------- FOLHA DE PAPEL ----- */
/* O conteúdo da tela é uma folha lisa pregada na mesa de madeira. */
.r-pagina{
  position:relative;
  max-width:760px;
  margin:22px 8px 24px;
  padding:22px 16px 28px;
  background:var(--r-papel);
  border-radius:6px;
  box-shadow:var(--r-sombra-papel);
}
@media (min-width:776px){ .r-pagina{margin-left:auto;margin-right:auto;padding:28px 28px 34px} }
/* Pregos nos cantos de cima — ficam na margem da folha, longe do texto. */
.r-pagina::before,.r-pagina::after{
  content:"";position:absolute;top:6px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#efe9df 0 1.5px,#9a958e 2.5px,#4a4744 4.5px,#1c1b1a 6px);
  box-shadow:0 1px 1px rgba(0,0,0,.45);
  pointer-events:none;
}
.r-pagina::before{left:5px}
.r-pagina::after{right:5px}
/* --r-abas-medida é a altura real da barra (medida pelo Visual.ligar): com palavra em
   duas linhas ou letra grande a barra cresce, e o fim da folha não pode ficar atrás dela. */
.r-app.r-com-abas .r-pagina{margin-bottom:calc(var(--r-abas-medida, calc(var(--r-abas-altura) + env(safe-area-inset-bottom))) + 24px)}

.r-secao{margin:0 0 32px}
.r-secao:last-child{margin-bottom:0}
.r-subtitulo{margin:0 0 12px;font-size:var(--r-letra-subtitulo);color:var(--r-tinta)}
.r-ajuda{font-size:var(--r-letra);line-height:1.5;color:var(--r-tinta-2);margin:0 0 16px}
.r-destaque{color:var(--r-queimado);font-weight:700}

/* Divisor de ferro com rebites (sem texto). */
.r-ferro{
  height:12px;margin:28px -16px;border:0;
  background:
    radial-gradient(circle at 50% 50%,#d8d2c8 0 1.5px,var(--r-ferro-2) 2.5px 3.6px,transparent 4.2px) 14px 0/64px 12px repeat-x,
    linear-gradient(180deg,var(--r-ferro-2),var(--r-ferro-1) 55%,#0d0d0d);
  box-shadow:0 2px 3px rgba(0,0,0,.3);
}
@media (min-width:776px){ .r-ferro{margin-left:-28px;margin-right:-28px} }

/* Carimbo queimado: selo de palavra curta ("PRONTO", "PASSO 1"). */
.r-carimbo{
  display:inline-block;
  padding:6px 14px 5px;
  font-family:var(--r-fonte-titulo);font-size:calc(20px * var(--r-escala));line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--r-queimado);
  border:4px double var(--r-queimado);border-radius:8px;
  background:var(--r-papel);
  transform:rotate(-2deg);
}

/* ---------------------------------------------------------- BOTÕES ------- */
.r-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--r-botao);min-width:var(--r-toque);
  padding:10px 16px;
  border:3px solid var(--r-borda);border-radius:var(--r-raio);
  background:var(--r-papel);color:var(--r-tinta);
  font-family:var(--r-fonte-texto);font-weight:700;font-size:var(--r-letra-botao);line-height:1.2;
  text-align:center;text-decoration:none;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:transform .08s ease,box-shadow .08s ease;
}
.r-btn .r-ic{width:30px;height:30px;margin-left:-2px}

/* Principal: couro queimado com costura. UM por tela. */
.r-btn-principal{
  display:flex;width:100%;
  min-height:var(--r-botao-principal);
  padding:12px 18px;
  background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda);
  box-shadow:var(--r-sombra-bloco);
  font-size:var(--r-letra-botao);
}
.r-btn-principal::after{        /* costura de couro: tracejado por dentro da borda */
  content:"";position:absolute;inset:5px;border-radius:9px;
  border:2px dashed currentColor;opacity:.55;pointer-events:none;
}
.r-btn-principal:active{transform:translateY(3px);box-shadow:0 1px 0 var(--r-couro-sombra)}
@media (min-width:700px){ .r-btn-principal{width:auto;min-width:340px;margin-inline:auto} }

/* Secundário: papel com borda forte. */
.r-btn-secundario{
  display:flex;width:100%;
  background:var(--r-papel);color:var(--r-tinta);border-color:var(--r-borda);
  box-shadow:0 3px 0 var(--r-borda);
}
.r-btn-secundario:active{transform:translateY(2px);box-shadow:0 1px 0 var(--r-borda)}
@media (min-width:700px){ .r-btn-secundario{width:auto;min-width:300px;margin-inline:auto} }

/* Perigo: vermelho de brasa. Sempre passa pelo Visual.confirmar(). */
.r-btn-perigo{
  display:flex;width:100%;
  background:var(--r-perigo);color:var(--r-perigo-texto);border-color:var(--r-perigo-borda);
  box-shadow:0 3px 0 var(--r-perigo-borda);
}
.r-btn-perigo:active{transform:translateY(2px);box-shadow:0 1px 0 var(--r-perigo-borda)}
@media (min-width:700px){ .r-btn-perigo{width:auto;min-width:300px;margin-inline:auto} }

/* Desfazer: papel kraft com seta que volta. */
.r-btn-desfazer{
  background:var(--r-papel-2);color:var(--r-tinta);border-color:var(--r-borda);
  box-shadow:0 3px 0 var(--r-borda);
}
.r-btn-desfazer:active{transform:translateY(2px);box-shadow:0 1px 0 var(--r-borda)}

/* Botão desligado: sem "cinza fraco" — fica tracejado e continua legível. */
.r-btn[disabled],.r-btn[aria-disabled="true"]{
  background:var(--r-papel-2);color:var(--r-tinta-2);border-color:var(--r-tinta-2);
  border-style:dashed;box-shadow:none;cursor:not-allowed;transform:none;
}
.r-btn[disabled]::after{display:none}

.r-pilha-botoes{display:flex;flex-direction:column;gap:16px;margin-top:20px}

/* "Mais opções": tudo o que é avançado fica fechado aqui dentro. */
.r-mais-opcoes{margin-top:24px;border:3px solid var(--r-borda);border-radius:var(--r-raio);background:var(--r-papel)}
.r-mais-opcoes > summary{
  display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 18px;
  font-weight:700;font-size:var(--r-letra-botao);cursor:pointer;list-style:none;
}
.r-mais-opcoes > summary::-webkit-details-marker{display:none}
.r-mais-opcoes > summary::after{
  content:"";margin-left:auto;width:14px;height:14px;
  border-right:4px solid currentColor;border-bottom:4px solid currentColor;
  transform:translateY(-4px) rotate(45deg);transition:transform .15s;
}
.r-mais-opcoes[open] > summary::after{transform:translateY(3px) rotate(-135deg)}
.r-mais-opcoes > .r-mais-conteudo{padding:4px 18px 20px;border-top:3px dashed var(--r-borda)}

/* Escolha de uma entre poucas (ex.: Dia / Noite) — botões grandes lado a lado. */
.r-escolha{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){ .r-escolha{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} }
.r-escolha > button{
  min-height:var(--r-botao);padding:8px 12px;
  border:3px solid var(--r-borda);border-radius:12px;
  background:var(--r-papel);color:var(--r-tinta);font-weight:700;font-size:var(--r-letra);
}
.r-escolha > button[aria-pressed="true"]{background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda)}
.r-escolha > button[aria-pressed="true"]::before{content:"✓ "}

/* -------------------------------------------- TELA INICIAL: 4 TAREFAS ---- */
/* Cada tarefa é uma plaquinha de pinus lisa, com o texto queimado. */
.r-tarefas{display:grid;gap:18px}
@media (min-width:700px){ .r-tarefas{grid-template-columns:1fr 1fr} }
.r-tarefa{
  position:relative;
  display:grid;grid-template-columns:56px 1fr;align-items:center;gap:4px 14px;
  width:100%;min-height:100px;padding:14px 16px 14px 14px;
  text-align:left;
  background:var(--r-plaquinha);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:10px;
  box-shadow:0 4px 0 var(--r-borda);
  touch-action:manipulation;
}
.r-tarefa:active{transform:translateY(3px);box-shadow:0 1px 0 var(--r-borda)}
.r-tarefa-icone{
  grid-row:1 / span 2;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--r-couro);color:var(--r-couro-texto);
  border:3px solid var(--r-couro-borda);
}
.r-tarefa-icone .r-ic{width:32px;height:32px}
.r-tarefa-nome{font-weight:700;font-size:calc(24px * var(--r-escala));line-height:1.2}
.r-tarefa-desc{font-size:var(--r-letra);line-height:1.35;color:var(--r-tinta-2)}

/* ------------------------------------------------- BARRA DE PASSOS ------- */
/* <ol class="r-passos"> com <li class="r-passo r-passo--feito|--atual"> */
.r-passos-caixa{margin:0 -8px 24px}
.r-passos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;   /* 2 a 5 passos: as colunas se ajustam */
}
.r-passo{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;font-size:var(--r-letra);line-height:1.2;color:var(--r-tinta);
}
.r-passo-num{
  position:relative;z-index:1;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--r-fonte-titulo);font-size:calc(26px * var(--r-escala));line-height:1;
  background:var(--r-papel);color:var(--r-tinta);
  border:3px solid var(--r-borda);
}
/* seta entre um passo e o próximo */
.r-passo:not(:last-child)::after{
  content:"";position:absolute;top:19px;
  left:calc(50% + 30px);right:calc(-50% + 30px);height:14px;
  background:var(--r-borda);
  clip-path:polygon(0 40%,calc(100% - 11px) 40%,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,calc(100% - 11px) 60%,0 60%);
}
.r-passo--feito .r-passo-num{background:var(--r-ok-fundo);border-color:var(--r-ok-borda);font-size:0}
.r-passo--feito .r-passo-num::before{content:"✓";font-family:var(--r-fonte-texto);font-weight:700;font-size:calc(30px * var(--r-escala));color:var(--r-tinta)}
.r-passo--atual .r-passo-num{
  width:58px;height:58px;margin-top:-3px;margin-bottom:-3px;
  background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda);
  box-shadow:0 0 0 4px var(--r-papel),0 0 0 7px var(--r-couro);
}
.r-passo--atual .r-passo-nome{font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
/* Frase "Passo 2 de 4: Medidas" — some quando os nomes cabem embaixo das bolinhas. */
.r-passos-agora{
  margin:14px 8px 0;padding:10px 14px;
  background:var(--r-papel-2);border-left:6px solid var(--r-couro);border-radius:6px;
  font-size:calc(22px * var(--r-escala));line-height:1.3;font-weight:700;color:var(--r-tinta);
}
.r-passos-agora .r-destaque{color:var(--r-queimado)}
/* Celular estreito: os nomes não cabem lado a lado com 20 px de letra.
   Ficam só as bolinhas + a frase "Passo X de Y" (os nomes seguem para o leitor de tela). */
@media (max-width:459px){
  .r-passo-nome{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:460px){ .r-passos-agora{display:none} }

/* ------------------------------------------------- CAMPO DE MEDIDA ------- */
.r-medidas{display:grid;gap:18px}
@media (min-width:700px){ .r-medidas{grid-template-columns:1fr 1fr} }
.r-medida{display:flex;flex-direction:column;gap:8px}
.r-medida-rotulo{font-weight:700;font-size:calc(22px * var(--r-escala));line-height:1.2;color:var(--r-tinta)}
.r-medida-caixa{
  display:grid;grid-template-columns:64px 1fr 64px;align-items:stretch;
  min-height:68px;
  border:3px solid var(--r-borda);border-radius:var(--r-raio);
  background:var(--r-papel);overflow:hidden;
}
/* Foco: o mesmo anel escuro + halo dos outros botões. Só o halo âmbar (o que havia antes)
   dava 1,48:1 com o papel no tema claro — o campo em uso não aparecia. */
.r-medida-caixa:focus-within{outline:4px solid var(--r-foco);outline-offset:3px;box-shadow:0 0 0 9px var(--r-foco-halo)}
.r-medida--erro .r-medida-caixa{border-color:var(--r-erro-borda);border-width:4px}
/* Frase de problema embaixo do campo: o que ele digitou continua lá. */
.r-medida-erro{
  display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;
  margin:0;padding:10px 14px;
  background:var(--r-erro-fundo);color:var(--r-tinta);
  border:3px solid var(--r-erro-borda);border-left-width:10px;border-radius:10px;
  font-size:var(--r-letra);font-weight:700;line-height:1.35;
}
.r-medida-erro .r-ic{width:30px;height:30px}
.r-medida-menos,.r-medida-mais{
  border:0;background:var(--r-papel-2);color:var(--r-tinta);
  font-family:var(--r-fonte-texto);font-size:calc(36px * var(--r-escala));font-weight:700;line-height:1;
  min-width:64px;touch-action:manipulation;
}
.r-medida-menos{border-right:3px solid var(--r-borda)}
.r-medida-mais{border-left:3px solid var(--r-borda)}
.r-medida-menos:active,.r-medida-mais:active{background:var(--r-plaquinha)}
.r-medida-menos:focus-visible,.r-medida-mais:focus-visible{outline-offset:-6px;box-shadow:none}
.r-medida-meio{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;min-width:0}
.r-medida-campo{
  width:100%;min-width:0;max-width:5.2ch;height:62px;
  border:0;background:transparent;color:var(--r-tinta);
  font-family:var(--r-fonte-texto);font-size:calc(32px * var(--r-escala));font-weight:700;text-align:right;
  -webkit-appearance:none;appearance:none;padding:0;
}
.r-medida-campo:focus-visible{outline:none;box-shadow:none}
.r-medida-campo::placeholder{color:var(--r-tinta-2);opacity:1;font-weight:400}
.r-medida-unidade{font-size:calc(24px * var(--r-escala));font-weight:700;color:var(--r-tinta-2)}
.r-medida-ajuda{margin:0;font-size:var(--r-letra);color:var(--r-tinta-2);line-height:1.35}

/* Campo de texto grande (nome do cliente, frase) */
.r-campo{display:flex;flex-direction:column;gap:8px}
.r-campo-rotulo{font-weight:700;font-size:calc(22px * var(--r-escala))}
.r-campo-texto{
  width:100%;min-height:64px;padding:12px 16px;
  border:3px solid var(--r-borda);border-radius:var(--r-raio);
  background:var(--r-papel);color:var(--r-tinta);font-size:calc(24px * var(--r-escala));
}
.r-campo-texto::placeholder{color:var(--r-tinta-2);opacity:1}
.r-campo-texto:focus-visible{outline-offset:2px}

/* ------------------------------------------------- CARTÃO DE ARTE -------- */
.r-grade-artes{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (max-width:379px){ .r-grade-artes{grid-template-columns:1fr 1fr;gap:12px} }
.r-cartao-arte{
  display:flex;flex-direction:column;
  background:var(--r-papel);
  border:3px solid var(--r-borda);border-radius:12px;overflow:hidden;
  box-shadow:0 3px 0 var(--r-borda);
}
.r-cartao-abre{
  display:flex;flex-direction:column;flex:1 1 auto;width:100%;padding:0;
  background:var(--r-papel);border:0;text-align:left;color:var(--r-tinta);
}
.r-cartao-papel{
  display:grid;place-items:center;width:100%;aspect-ratio:1/1;
  background:var(--r-arte-fundo);border-bottom:3px solid var(--r-borda);
}
.r-cartao-papel img,.r-cartao-papel svg{width:86%;height:86%;object-fit:contain}
.r-cartao-nome{display:block;padding:10px 12px 12px;font-size:var(--r-letra);font-weight:700;line-height:1.25;min-height:2.5em}
.r-cartao-guardar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 8px;text-align:center;
  min-height:56px;margin:auto 0 0;padding:6px 4px;
  border:0;border-top:3px dashed var(--r-borda);
  background:var(--r-papel-2);color:var(--r-tinta);
  font-weight:700;font-size:min(var(--r-letra),24px);
}
.r-cartao-guardar .r-ic{width:28px;height:28px}
.r-cartao-guardar[aria-pressed="true"]{background:var(--r-couro);color:var(--r-couro-texto)}
.r-cartao-guardar[aria-pressed="true"] .r-ic{fill:currentColor}
.r-cartao-guardar:focus-visible,.r-cartao-abre:focus-visible{outline-offset:-7px;box-shadow:inset 0 0 0 9px var(--r-foco-halo)}

/* ------------------------------------------------- ABAS DO RODAPÉ -------- */
/* Couro escuro com costura. A planta (ARQUITETURA §2) tem 3 abas: Desenhos · Fazer peça ·
   Favoritos — cabem numa linha a 360 px. As colunas se ajustam sozinhas ao número de abas. */
.r-abas{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:var(--r-aba-fundo);
  box-shadow:0 -3px 0 rgba(0,0,0,.35);
}
.r-abas::before{        /* costura de couro na borda de cima */
  content:"";position:absolute;left:10px;right:10px;top:4px;
  border-top:2px dashed var(--r-aba-texto);opacity:.55;pointer-events:none;
}
.r-aba{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:calc(var(--r-abas-altura) - 16px);padding:4px 0;   /* "Fazer peça" cabe numa linha a 360 px */
  background:transparent;color:var(--r-aba-texto);
  border:3px solid transparent;border-radius:12px;
  font-size:min(var(--r-letra),22px);font-weight:700;line-height:1.1;   /* teto: a barra não engole a tela */
  text-align:center;
}
.r-aba .r-ic{width:30px;height:30px}
/* 4 abas (a futura "Encomendas" da planta): a letra da barra fica em 20 px fixos, senão não
   cabe a 360 px. Medido: com 4 abas, palavra de até ~8 letras ("Pedidos" cabe;
   "Encomendas" NÃO cabe a 360 px com letra Grande/Maior). Classe posta pelo Visual.ligar(). */
.r-abas--muitas{gap:2px}
.r-abas--muitas .r-aba{font-size:20px}
.r-aba[aria-current="page"]{background:var(--r-aba-atual-fundo);color:var(--r-aba-atual-texto);border-color:var(--r-aba-atual-texto)}

/* ----------------------------------------------------- AVISO (fixo) ------ */
.r-aviso{
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;
  padding:14px 16px;margin:0 0 16px;
  background:var(--r-info-fundo);color:var(--r-tinta);
  border:3px solid var(--r-info-borda);border-left-width:10px;border-radius:10px;
  font-size:var(--r-letra);line-height:1.45;
}
.r-aviso .r-ic{width:34px;height:34px;margin-top:-2px}
.r-aviso strong{display:block;font-size:calc(22px * var(--r-escala));line-height:1.3}
.r-aviso p{margin:2px 0 0}
.r-aviso--ok{background:var(--r-ok-fundo);border-color:var(--r-ok-borda)}
.r-aviso--atencao{background:var(--r-atencao-fundo);border-color:var(--r-atencao-borda)}
.r-aviso--erro{background:var(--r-erro-fundo);border-color:var(--r-erro-borda)}

/* --------------------------------------------------- TELA VAZIA --------- */
.r-vazio{text-align:center;padding:12px 4px 4px}
.r-vazio-desenho{
  width:120px;height:120px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;
  border:5px double var(--r-queimado);color:var(--r-queimado);
  background:var(--r-papel-2);
}
.r-vazio-desenho .r-ic{width:60px;height:60px;stroke-width:2}
.r-vazio-titulo{margin:0 0 8px;font-family:var(--r-fonte-titulo);font-size:calc(28px * var(--r-escala));line-height:1.2}
.r-vazio-texto{margin:0 auto 20px;max-width:30ch;color:var(--r-tinta-2)}

/* ------------------------------------- CAIXA DE CONFIRMAR (Visual.confirmar) */
.r-caixa-fundo{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));
  background:rgba(18,10,4,.72);
}
.r-caixa{
  width:100%;max-width:480px;max-height:100%;overflow:auto;
  padding:24px 20px 20px;
  background:var(--r-papel);color:var(--r-tinta);
  border:4px solid var(--r-borda);border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  text-align:center;
}
.r-caixa-icone{
  width:76px;height:76px;margin:0 auto 10px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--r-atencao-fundo);color:var(--r-tinta);border:3px solid var(--r-atencao-borda);
}
.r-caixa--perigo .r-caixa-icone{background:var(--r-erro-fundo);border-color:var(--r-erro-borda)}
.r-caixa-icone .r-ic{width:42px;height:42px}
.r-caixa-titulo{margin:0 0 10px;font-family:var(--r-fonte-titulo);font-weight:400;font-size:calc(30px * var(--r-escala));line-height:1.2}
.r-caixa-texto{margin:0 0 22px;font-size:calc(22px * var(--r-escala));line-height:1.45}
.r-caixa-botoes{display:flex;flex-direction:column;gap:14px}
.r-caixa-botoes .r-btn{width:100%;min-width:0;margin:0}

/* Folha "Tamanho da letra" (Visual.escolherLetra): cada opção escrita NO SEU tamanho. */
.r-letra-opcoes{display:flex;flex-direction:column;gap:12px;margin:0 0 22px;text-align:left}
.r-letra-opcao{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;min-height:72px;padding:10px 16px;
  background:var(--r-papel);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:12px;box-shadow:0 3px 0 var(--r-borda);
  text-align:left;touch-action:manipulation;
}
.r-letra-opcao-nome{font-weight:700;font-size:calc(20px * var(--r-escala-exemplo,1));line-height:1.2}
.r-letra-opcao-exemplo{font-weight:400;font-size:calc(22px * var(--r-escala-exemplo,1));line-height:1.3}
.r-letra-opcao[aria-pressed="true"]{background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda);box-shadow:0 3px 0 var(--r-couro-sombra)}
.r-letra-opcao[aria-pressed="true"] .r-letra-opcao-nome::before{content:"✓ "}
.r-letra-opcao:active{transform:translateY(2px)}

/* --------------------------- AVISO QUE SOME e DESFAZER (Visual.avisar) --- */
.r-avisos-pilha{
  position:fixed;left:10px;right:10px;z-index:90;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;align-items:stretch;
  max-width:560px;margin:0 auto;pointer-events:none;
}
.r-app.r-com-abas .r-avisos-pilha{bottom:calc(var(--r-abas-medida, calc(var(--r-abas-altura) + env(safe-area-inset-bottom))) + 12px)}
.r-recado{
  pointer-events:none;   /* só os botões do recado pegam o toque (o resto passa para a tela) */
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;
  padding:16px 18px;
  background:var(--r-topo);color:var(--r-topo-texto);
  border:3px solid var(--r-topo-texto);border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  font-size:calc(22px * var(--r-escala));line-height:1.35;font-weight:700;
  animation:r-sobe .18s ease-out;
}
.r-recado .r-ic{width:34px;height:34px}
.r-recado--ok{border-left:12px solid #7FC08A}
.r-recado--atencao{border-left:12px solid #F2C14E}
.r-recado--erro{border-left:12px solid #FF9A85}
.r-recado-acoes{grid-column:1 / -1;display:flex;gap:10px}
.r-recado .r-btn{pointer-events:auto}
.r-recado-acoes .r-btn{flex:1 1 auto;min-height:56px;font-size:calc(22px * var(--r-escala))}
.r-recado .r-btn-desfazer{background:var(--r-topo-texto);color:#21170F;border-color:var(--r-topo-texto);box-shadow:none}
.r-recado .r-btn-fechar{background:transparent;color:var(--r-topo-texto);border-color:var(--r-topo-texto);box-shadow:none;flex:0 0 auto}
.r-recado-tempo{grid-column:1 / -1;height:6px;border-radius:3px;background:rgba(243,231,211,.25);overflow:hidden}
.r-recado-tempo > i{display:block;height:100%;background:var(--r-topo-texto);transform-origin:left center;animation:r-tempo linear forwards}
@keyframes r-sobe{from{transform:translateY(16px)}to{transform:none}}  /* sem opacidade: se a animação travar, o recado continua legível */
@keyframes r-tempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Fundo kraft (papel de embrulho) — para área SEM texto: palco vazio, moldura. */
.r-fundo-kraft{background-color:var(--r-plaquinha);background-image:var(--r-textura-kraft)}
.r-fundo-madeira{background-color:var(--r-mesa);background-image:var(--r-textura-tabuas),var(--r-textura-veio)}

/* ------------------------------------------------------------ OUTROS ---- */
@media (prefers-reduced-motion:reduce){
  .r-app *,.r-app *::before,.r-app *::after{transition:none!important;animation:none!important}
}
/* Modo de alto contraste do sistema: garante borda em tudo que é botão. */
@media (forced-colors:active){
  .r-btn,.r-tarefa,.r-aba,.r-medida-caixa,.r-btn-letra,.r-letra-opcao{border:3px solid ButtonText}
  .r-logo{background:CanvasText}
}

/* --------------------------------------------------------- TABELINHA ----- */
/* Tabela de medidas (a mesma que vai no PDF do cliente). */
.r-tabela{width:100%;border-collapse:collapse;font-size:var(--r-letra);background:var(--r-papel)}
.r-tabela caption{text-align:left;font-weight:700;font-size:calc(22px * var(--r-escala));padding:0 0 8px}
.r-tabela th,.r-tabela td{padding:12px 14px;border:2px solid var(--r-borda);text-align:left;vertical-align:middle}
.r-tabela th{background:var(--r-papel-2);font-weight:700;width:55%}
.r-tabela td{font-weight:700;font-size:min(calc(22px * var(--r-escala)),26px);white-space:nowrap}
/* Celular estreito com letra "Maior": "Comprimento" + "120,5 cm" só cabem lado a lado
   com menos folga nas células (medido a 320 px). */
@media (max-width:379px){ .r-tabela th,.r-tabela td{padding:10px 8px} }

/* Desenho das medidas (tábua com setas) */
.r-desenho-medidas{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 18px;color:var(--r-tinta)}