/* =====================================================================================================
 * dossie3d.css — o dossiê do caso em 3D (landing e tela de acesso).
 *
 * É HTML de verdade em 3D (CSS transform-style: preserve-3d), não WebGL: o texto continua nítido em
 * qualquer ângulo, o peso é de poucos KB e funciona em celular simples. Quem gira é dossie3d.js, pelas
 * variáveis --rx/--ry/--rz e pelas poses de cada folha. Decorativo (aria-hidden): quem usa teclado ou
 * leitor de tela troca as etapas pelos botões "Organizar / Registrar / Revisar", que são a fonte de verdade.
 * ===================================================================================================== */

.dossie{
  position:relative;width:100%;aspect-ratio:.92;--rx:16deg;--ry:-22deg;--rz:2deg;--flutua:0px;--luz:0;--capa:0deg;--sombra-x:0px;--sombra-y:0px;
  /* composição (lida pelo dossie3d.js): pose de repouso, ângulo da capa aberta e quanto o objeto anda ao abrir */
  --base-rx:15;--base-ry:-21;--base-rz:2;--capa-aberta:-120deg;--abre-desloca:17;--obj-larg:66%
}
.dossie-sombra{
  position:absolute;left:14%;right:10%;bottom:6%;height:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.18) 55%,transparent);
  filter:blur(14px);transform:translate(var(--sombra-x),var(--sombra-y)) scale(calc(1 - var(--flutua-n,0) * .05));
  opacity:.85;pointer-events:none
}
.dossie-alvo{position:absolute;inset:0;perspective:1600px;perspective-origin:55% 35%;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.dossie-alvo:active,.dossie.arrastando .dossie-alvo{cursor:grabbing}
/* Quem recebe o toque é só o retângulo do alvo: a capa aberta e as folhas em leque saem dele no 3D e não podem
 * "roubar" o clique de um botão vizinho. */
.dossie-obj,.dossie-obj *{pointer-events:none}
.dossie-obj{
  position:absolute;left:50%;top:47%;width:var(--obj-larg);aspect-ratio:1/1.32;container-type:inline-size;
  transform-style:preserve-3d;
  transform:translate(calc(-50% + var(--abre-x,0%)),-50%) translateY(var(--flutua)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  /* o eixo do giro: fechada, o centro da pasta; aberta, a LOMBADA (a dobra entre a capa e o painel), que é o centro da
   * pasta aberta — girando, ela roda em torno de si e não escapa para o lado (--abre-o vai de 0 a 1 ao abrir) */
  transform-origin:calc(50% - var(--abre-o,0) * 50%) 50%;
}

/* -------------------------------------------------------------------------------- a pasta (fundo) */
.d-pasta{
  position:absolute;inset:-2.5% -3.5% -2.5% -2%;border-radius:2.2cqw 3.6cqw 3.6cqw 2.2cqw;transform:translateZ(-2px);
  backface-visibility:hidden; /* por trás quem aparece são as costas (.d-pasta-costas), não o lado de dentro espelhado */
  background:
    linear-gradient(calc(120deg + var(--luz) * 30deg),rgba(255,255,255,.07),transparent 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px),
    linear-gradient(160deg,#1d4a46,#143633 60%,#102c2a);
  box-shadow:0 0 0 1px rgba(0,0,0,.18) inset,0 3cqw 6cqw -2cqw rgba(0,0,0,.55);
}
.d-pasta::before{ /* a aba da pasta */
  content:"";position:absolute;right:9%;top:-5.5%;width:34%;height:7%;border-radius:2cqw 2cqw 0 0;
  background:linear-gradient(180deg,#235450,#1a4440);box-shadow:0 0 0 1px rgba(0,0,0,.14) inset
}
.d-pasta::after{ /* etiqueta na aba */
  content:"";position:absolute;right:13%;top:-3.6%;width:20%;height:3.4%;border-radius:.6cqw;background:#e9e0cd;opacity:.92
}

/* as costas da pasta: o lado de FORA do painel de trás, visto quando a pessoa gira o dossiê (o giro é livre desde
 * 16/10/2026). Virada 180° no próprio centro: o "esquerdo" daqui é o direito da pasta — por isso a aba vai em left. */
.d-pasta-costas{
  position:absolute;inset:-2.5% -3.5% -2.5% -2%;border-radius:3.6cqw 2.2cqw 2.2cqw 3.6cqw;
  transform:translateZ(-3px) rotateY(180deg);backface-visibility:hidden;
  background:
    radial-gradient(70% 60% at calc(60% - var(--luz) * 30%) 16%,rgba(255,255,255,.09),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px),
    linear-gradient(200deg,#21524d,#163d3b 55%,#112f2d);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset,0 .5cqw 0 rgba(255,255,255,.05) inset
}
.d-pasta-costas::before{ /* a aba, vista por trás */
  content:"";position:absolute;left:9%;top:-5.5%;width:34%;height:7%;border-radius:2cqw 2cqw 0 0;
  background:linear-gradient(180deg,#235450,#1a4440);box-shadow:0 0 0 1px rgba(0,0,0,.14) inset
}
.d-pasta-costas::after{ /* a marca gravada a seco no verso */
  content:"";position:absolute;right:11%;bottom:8%;width:17cqw;height:17cqw;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='1.5' y='1.5' width='37' height='37' rx='10' fill='none' stroke='%230a201e' stroke-width='1.4'/%3E%3Cpath d='M11 12h19M11 20h14M11 28h19' fill='none' stroke='%230a201e' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='29' cy='20' r='2' fill='%230a201e'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 .25cqw 0 rgba(255,255,255,.07))
}

/* ------------------------------------------------------------------------------------------- folhas */
.d-folha{
  position:absolute;inset:0;border-radius:1.4cqw;overflow:hidden;color:#1d3532;
  padding:8cqw 8.5cqw 7cqw;font:400 3.5cqw/1.45 var(--s-sans,"Segoe UI",sans-serif);
  background:
    linear-gradient(calc(115deg + var(--luz) * 25deg),rgba(255,255,255,.55),rgba(255,255,255,0) 38%,rgba(120,100,60,.06) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    #fbf8f1;
  box-shadow:0 .3cqw 0 rgba(0,0,0,.04),0 3cqw 5cqw -3cqw rgba(0,0,0,.5);
  transform:translate3d(0,0,6px);backface-visibility:hidden;
}
.d-folha::after{ /* a borda de papel, mais clara, e um vinco de leve */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(60,50,30,.08) inset;
  background:linear-gradient(90deg,transparent 49.6%,rgba(0,0,0,.025) 50%,transparent 50.4%)
}
.d-cab{display:flex;align-items:center;gap:2.4cqw;margin-bottom:4.5cqw;font:500 2.6cqw/1 var(--s-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#5b6d66}
.d-cab img{width:6cqw;height:6cqw}
.d-cab .d-num{margin-left:auto;color:#8a6224}
.d-cab .d-num::before{content:"Nº 0247"}
.d-titulo{display:block;margin:0 0 1.2cqw;font:500 7.2cqw/1.05 var(--s-serif,Georgia,serif);letter-spacing:-.02em;color:#142d2a}
.d-sub{display:block;margin:0 0 5cqw;font:500 2.7cqw/1.3 var(--s-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:#336452}
.d-regua{height:1px;background:rgba(20,45,42,.14);margin:4cqw 0}
.d-campo{display:grid;grid-template-columns:24% 1fr;gap:2.4cqw;align-items:center;margin-bottom:2.6cqw}
.d-campo i{display:block;height:1.6cqw;border-radius:1cqw;background:rgba(20,45,42,.16)}
.d-campo b{display:block;height:2.6cqw;border-radius:.4cqw;background:#1d3532}
.d-campo b.curta{width:58%}
.d-campo b.media{width:78%}
.d-campo b.clara{background:rgba(29,53,50,.24)}
.d-checks{list-style:none;margin:0;padding:0;display:grid;gap:2.6cqw}
.d-checks li{display:flex;align-items:center;gap:2.6cqw;font-size:3.3cqw;color:#24403c}
.d-checks li::before{
  content:"";flex:none;width:4.4cqw;height:4.4cqw;border-radius:1.2cqw;border:1.5px solid #336452;
  background:#336452 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf8f1' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/78% no-repeat
}
.d-carimbo{
  position:absolute;right:8cqw;bottom:7cqw;width:17cqw;height:17cqw;border-radius:50%;
  border:.7cqw solid rgba(138,98,36,.75);color:rgba(138,98,36,.85);display:grid;place-items:center;transform:rotate(-14deg);
  font:600 6cqw/1 var(--s-serif,Georgia,serif);
}
.d-carimbo::before{content:"";position:absolute;inset:1.4cqw;border-radius:50%;border:1px dashed rgba(138,98,36,.55)}

/* folha 1 — a equipe do caso e o prazo (ilustração: círculos e barras, sem nomes nem datas) */
.d-equipe{display:flex;align-items:center;margin:5.5cqw 0 0}
.d-equipe i{
  width:7.4cqw;height:7.4cqw;margin-left:-1.8cqw;border-radius:50%;border:.7cqw solid #fbf8f1;
  background:radial-gradient(circle at 50% 38%,#dfe6e1 0 21%,transparent 22%),radial-gradient(circle at 50% 112%,#dfe6e1 0 46%,transparent 47%),#336452
}
.d-equipe i:first-child{margin-left:0}
.d-equipe i:nth-child(2){background-color:#8a6224}
.d-equipe i:nth-child(3){background-color:#163d3b}
.d-equipe span{width:30%;height:1.6cqw;margin-left:3cqw;border-radius:1cqw;background:rgba(20,45,42,.16)}
.d-prazo{position:relative;width:52%;height:1.3cqw;margin-top:5cqw;border-radius:1cqw;background:rgba(20,45,42,.1)}
.d-prazo::before{content:"";position:absolute;inset:0 38% 0 0;border-radius:inherit;background:linear-gradient(90deg,#336452,#c99a4b)}
.d-prazo::after{content:"";position:absolute;left:62%;top:50%;width:3.6cqw;height:3.6cqw;border-radius:50%;transform:translate(-50%,-50%);background:#fbf8f1;border:.8cqw solid #c99a4b}

/* folha 2 — o registro de campo */
.d-miniaturas{display:flex;gap:2.6cqw;margin-top:4.5cqw}
.d-miniaturas i{position:relative;overflow:hidden;width:15cqw;height:12cqw;border-radius:1.2cqw;background:linear-gradient(160deg,#e3eae1,#bccbbf);box-shadow:0 .7cqw 1.4cqw -.7cqw rgba(0,0,0,.4)}
.d-miniaturas i::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-34%;height:66%;border-radius:50% 50% 0 0;background:#93ab9c}
.d-miniaturas i:nth-child(2){background:linear-gradient(160deg,#f1e9d6,#dccaa6)}
.d-miniaturas i:nth-child(2)::after{background:#c4ad80}
.d-miniaturas i:nth-child(3){background:linear-gradient(160deg,#e1e8ec,#b9c8d0)}
.d-miniaturas i:nth-child(3)::after{background:#8ea2ac}
.d-foto{
  position:relative;width:62%;margin:1cqw 0 4cqw;padding:2.2cqw 2.2cqw 6cqw;background:#fff;border-radius:.6cqw;
  box-shadow:0 1.6cqw 3cqw -1.4cqw rgba(0,0,0,.45);transform:rotate(-3deg)
}
.d-foto svg{width:100%;height:auto;border-radius:.3cqw;background:#e9eee6}
.d-foto::after{ /* a fita adesiva */
  content:"";position:absolute;top:-2.6cqw;left:34%;width:28%;height:5.4cqw;background:rgba(227,215,180,.75);transform:rotate(3deg);
  box-shadow:0 .3cqw .6cqw rgba(0,0,0,.08)
}
.d-geo{
  position:absolute;right:8cqw;top:30cqw;padding:1.6cqw 2.4cqw;border-radius:5cqw;background:#163d3b;color:#f5f2ec;
  font:500 2.5cqw/1.25 var(--s-mono,monospace);letter-spacing:.04em;box-shadow:0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.5);transform:translateZ(0)
}
.d-geo::before{content:"-19.9191, -43.9386"}
.d-geo::after{content:"14:32 · GPS";display:block;color:#e3bd72}
.d-onda{display:flex;align-items:center;gap:1cqw;height:9cqw;margin:0 0 4cqw;padding:0 3cqw;border-radius:2cqw;background:#eef1ea}
.d-onda::before{
  content:"";flex:none;width:4.6cqw;height:4.6cqw;border-radius:50%;margin-right:1.5cqw;
  background:#336452 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf8f1' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/62% no-repeat
}
.d-onda i{flex:1;height:calc(var(--a) * 1%);min-height:12%;border-radius:1cqw;background:#336452;opacity:.85;transform-origin:center;animation:d-onda 1.6s ease-in-out infinite;animation-delay:calc(var(--d) * -1s)}
@keyframes d-onda{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* folha 3 — o relatório */
.d-linhas{display:grid;gap:2cqw;margin:0 0 4cqw}
.d-linhas i{display:block;height:1.6cqw;border-radius:1cqw;background:rgba(20,45,42,.17)}
.d-linhas i:nth-child(3n){width:84%}
.d-linhas i:nth-child(4n){width:62%}
.d-tabela{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid rgba(20,45,42,.16);border-radius:1cqw;overflow:hidden;margin:0 0 5cqw}
.d-tabela i{height:5.4cqw;border-right:1px solid rgba(20,45,42,.12);border-bottom:1px solid rgba(20,45,42,.12)}
.d-tabela i:nth-child(3n){border-right:0}
.d-tabela i:nth-child(-n+3){background:rgba(51,100,82,.12)}
.d-assina{display:flex;align-items:flex-end;justify-content:space-between;gap:4cqw}
.d-assina svg{width:42%;height:auto;color:#1d3532}
.d-formatos{display:flex;gap:2cqw}
.d-formatos span{padding:1.2cqw 2.4cqw;border-radius:1cqw;border:1px solid rgba(20,45,42,.2);font:600 2.6cqw/1 var(--s-mono,monospace);letter-spacing:.08em;color:#163d3b;background:#fff}
.d-selo{
  position:absolute;right:7cqw;bottom:20cqw;width:22cqw;height:22cqw;transform:translateZ(1px) rotate(-12deg) scale(var(--selo,0));
  transition:transform .55s cubic-bezier(.34,1.6,.64,1);
  filter:drop-shadow(0 1.2cqw 1.4cqw rgba(90,60,10,.45))
}

/* ---------------------------------------------------------------------------------------- a capa */
.d-capa{
  position:absolute;inset:-2.5% -3.5% -2.5% -2%;transform-origin:0 50%;transform-style:preserve-3d;
  transform:translateZ(34px) rotateY(var(--capa));transition:transform 1.25s cubic-bezier(.65,0,.25,1)
}
.d-capa-frente,.d-capa-verso{position:absolute;inset:0;border-radius:2.2cqw 3.6cqw 3.6cqw 2.2cqw;backface-visibility:hidden;overflow:hidden}
.d-capa-frente{
  background:
    radial-gradient(70% 60% at calc(30% + var(--luz) * 30%) 20%,rgba(255,255,255,.11),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px),
    linear-gradient(160deg,#21524d,#163d3b 55%,#112f2d);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset,0 .5cqw 0 rgba(255,255,255,.05) inset;
  padding:11cqw 10cqw;color:#f5f2ec;display:flex;flex-direction:column
}
.d-capa-verso{
  transform:rotateY(180deg);box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
  background:
    radial-gradient(80% 60% at calc(70% - var(--luz) * 30%) 18%,rgba(255,255,255,.07),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    linear-gradient(200deg,#21504b,#173f3c)
}
.d-capa-verso::after{ /* o bolso interno, com a costura */
  content:"";position:absolute;left:7%;right:7%;bottom:5%;height:36%;border-radius:1.6cqw;
  background:
    repeating-linear-gradient(90deg,rgba(227,189,114,.55) 0 2.2cqw,transparent 2.2cqw 3.8cqw) 0 2.4cqw/100% 1px no-repeat,
    linear-gradient(180deg,#1f4c47,#163b38);
  box-shadow:0 -1px 0 rgba(255,255,255,.08) inset,0 -1.4cqw 2.4cqw -1.2cqw rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.18)
}
.d-ficha{ /* a ficha do caso, encaixada no bolso (a parte de baixo fica atrás dele) */
  position:absolute;left:15%;right:17%;bottom:15%;height:46%;padding:6cqw 7cqw;border-radius:1.2cqw;background:#efe7d6;
  transform:rotate(-3deg);box-shadow:0 1cqw 2.4cqw -1cqw rgba(0,0,0,.55)
}
.d-ficha img{width:8cqw;height:8cqw;margin-bottom:4cqw}
.d-ficha i{display:block;height:1.5cqw;margin-bottom:2.6cqw;border-radius:1cqw;background:rgba(20,45,42,.2)}
.d-ficha i:nth-of-type(3){width:64%}
.d-ficha b{display:block;width:38%;height:3.2cqw;margin-top:3.4cqw;border-radius:.6cqw;background:#163d3b}
.d-relevo{width:22cqw;height:22cqw;margin-bottom:auto;filter:drop-shadow(0 .4cqw 0 rgba(0,0,0,.35)) drop-shadow(0 -.2cqw 0 rgba(255,255,255,.12))}
.d-etiqueta{
  align-self:stretch;padding:4.4cqw 5cqw;border-radius:1.4cqw;background:#efe7d6;color:#18312f;
  box-shadow:0 .6cqw 1.4cqw -.6cqw rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.06) inset
}
.d-etiqueta .d-titulo{font-size:6.6cqw;margin-bottom:1.6cqw}
.d-etiqueta .d-sub{margin:0}
.d-elastico{position:absolute;top:-1%;bottom:-1%;right:12%;width:2.6cqw;background:linear-gradient(90deg,#0c2220,#16332f 40%,#0c2220);box-shadow:0 0 1.2cqw rgba(0,0,0,.45)}
.d-marca{margin-top:6cqw;display:flex;align-items:center;gap:2cqw;font:600 4cqw/1 var(--s-sans,sans-serif);letter-spacing:-.03em;color:rgba(245,242,236,.88)}

/* o clipe prende a folha de cima: --clipe-z (dossie3d.js) = altura dela + 1,5 px. Antes ficava a 46 px, solto no ar —
 * ao girar o dossiê, via-se o vão (Castro, 15/10/2026). Sombra curta, de objeto encostado. */
.d-clipe{
  position:absolute;left:47%;top:-6.5%;width:11%;height:auto;transform:translateZ(var(--clipe-z,30px)) rotate(-6deg);color:#b9bfba;
  filter:drop-shadow(0 .3cqw .35cqw rgba(0,0,0,.42));opacity:var(--clipe,0);transition:opacity .5s,transform .8s cubic-bezier(.55,0,.25,1)
}

.dossie .dossie-dica{ /* .dossie na frente: regras genéricas de parágrafo da página (ex.: .el-login-intro p) não a alcançam */
  position:absolute;left:0;right:0;bottom:-.4%;max-width:none;margin:0;text-align:center;pointer-events:none;
  font:500 11px/1.4 var(--s-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.55)
}
.dossie-dica .so-toque{display:none}
@media(hover:none){.dossie-dica .so-mouse{display:none}.dossie-dica .so-toque{display:inline}}

.dossie[data-sereno] .d-onda i{animation:none} /* tela sem botão de pausa: a onda do áudio fica parada */
@media(prefers-reduced-motion:reduce){
  .dossie-obj,.d-capa,.d-selo,.d-clipe{transition:none!important}
  .d-onda i{animation:none!important;transform:none}
}