/* Author: Marcílio Souza */
/* Faixa institucional e janela compartilhada pelas duas apresentacoes. */
.client-guide-band { background:#f4f8f6; border-bottom:1px solid #d3e0d8; }
.client-guide-band-inner { max-width:1180px; margin:auto; padding:25px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.client-guide-band h2 { margin:0 0 7px; font-size:25px; color:#173f36; }
.client-guide-band p { margin:0; color:#60766a; font:15px/1.5 Arial,sans-serif; }
.client-guide-band .button { gap:10px; flex-shrink:0; font:600 14px Arial,sans-serif; padding:14px 18px; min-height:48px; border-radius:5px; }
.client-guide-band .button svg { width:19px; height:19px; }
body.client-guide-open { overflow:hidden; }
.client-guide-dialog { width:calc(100% - 40px); max-width:1180px; max-height:calc(100dvh - 32px); padding:0; border:1px solid #d0ddd4; border-radius:8px; color:#173f36; background:#fff; font:14px/1.5 Arial,sans-serif; box-shadow:0 24px 80px #06171355; }
.client-guide-dialog[open] { display:flex; flex-direction:column; }
.client-guide-dialog::backdrop { background:#061713b8; }
.client-guide-heading { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid #dce5df; }
.client-guide-heading h2 { margin:0; font:600 20px/1.25 Arial,sans-serif; }
.client-guide-heading>div { display:flex; gap:6px; }
.guide-icon-button { display:inline-flex; flex-shrink:0; justify-content:center; align-items:center; width:42px; height:42px; min-height:42px; border:1px solid #d2ddd6; border-radius:5px; background:#f4f8f6; color:#173f36; padding:9px; }
.guide-icon-button svg { width:21px; height:21px; }
.guide-icon-button:hover { background:#e4eee8; border-color:#b29255; }
.guide-icon-button:disabled { opacity:.35; cursor:default; }
.guide-modes { display:flex; flex-shrink:0; gap:10px; margin:0; padding:10px 18px; border:0; }
.guide-modes label { display:flex; align-items:center; gap:7px; padding:8px 11px; margin:0; border:1px solid #d0ddd4; border-radius:4px; color:#36594a; font-size:13px; cursor:pointer; }
.guide-modes label:has(input:checked) { background:#e5eee9; border-color:#8fae9c; color:#173f36; }
.guide-modes input { appearance:auto; width:15px; height:15px; min-height:0; margin:0; padding:0; accent-color:#173f36; }
.guide-stage { min-height:0; overflow:auto; background:#edf3ef; flex:1 1 auto; }
.guide-slide-image { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 260px); aspect-ratio:16/9; object-fit:contain; margin:auto; }
.guide-step-summary { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.guide-progress { height:3px; flex-shrink:0; background:#e2eae5; }
.guide-progress>span { display:block; height:100%; width:0; background:#b29255; }
.guide-controls { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; }
.guide-position { display:flex; align-items:center; gap:12px; min-width:0; }
.guide-position select { max-width:300px; min-width:0; border:1px solid #d0ddd4; border-radius:4px; padding:9px; color:#36594a; background:white; font:13px Arial,sans-serif; }
#guide-step-counter { flex-shrink:0; color:#64796b; font-size:13px; }
.guide-arrows { display:flex; gap:8px; }
.guide-arrows .guide-icon-button { background:#173f36; color:#f9f1df; border-color:#173f36; }
.guide-arrows .guide-icon-button:hover { background:#285848; }
.guide-consultation { flex-shrink:0; text-align:center; padding:8px 18px 12px; border-top:1px solid #e2eae5; }
.guide-consultation button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:6px 10px; border:0; background:transparent; color:#36594a; font:600 13px Arial,sans-serif; }
.guide-consultation svg { width:17px; height:17px; }
.guide-image-failed .guide-slide-image { display:none; }
.guide-image-failed .guide-step-summary { position:static; width:auto; height:auto; padding:28px; overflow:visible; clip-path:none; }
.guide-step-summary h3 { margin:0 0 20px; font:600 25px/1.25 Arial,sans-serif; }
.guide-step-summary p { font:16px/1.6 Arial,sans-serif; margin:0 0 16px; color:#36594a; overflow-wrap:anywhere; }
.guide-step-summary .guide-step-number { font-size:12px; font-weight:600; color:#8b703e; }
.guide-step-summary img { width:100%; height:auto; margin-top:4px; }
.guide-step-summary img[hidden] { display:none; }
/* Apresentacao do site: texto e capturas atualizadas, sem alterar o guia do cliente. */
.site-presentation .guide-slide-image,.client-guide-heading a[hidden] { display:none; }
.guide-heading-copy { flex-direction:column; gap:4px!important; min-width:0; }
.guide-brand-label { margin:0; font:600 11px/1.4 Arial,sans-serif; color:#e2c383; }
.guide-brand-label[hidden] { display:none; }
.site-presentation .client-guide-heading { padding:18px 24px; background:#173f36; color:#fff; border-bottom:3px solid #b29255; }
.site-presentation .client-guide-heading h2 { font:400 24px/1.3 Georgia,serif; }
.site-presentation .client-guide-heading .guide-icon-button { background:#214f43; color:#fff; border-color:#537669; }
.site-presentation .guide-modes { padding:12px 24px; background:#fff; border-bottom:1px solid #dce5df; }
.site-presentation .guide-modes label { min-height:38px; box-sizing:border-box; }
.site-presentation .guide-stage { background:#f4f7f5; }
/* Texto e captura ocupam colunas separadas para evitar sobreposicao. */
.site-presentation .guide-step-summary { position:static; width:auto; height:auto; overflow:visible; clip-path:none; padding:30px 24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); grid-template-rows:auto auto 1fr; column-gap:30px; min-height:350px; }
.site-presentation .guide-step-number { grid-column:1; margin:0 0 18px; padding-top:12px; border-top:2px solid #b29255; }
.site-presentation .guide-step-summary h3 { grid-column:1; font:400 30px/1.2 Georgia,serif; margin:0 0 18px; overflow-wrap:anywhere; }
.site-presentation #guide-step-description { grid-column:1; }
.site-presentation #guide-step-description p { font-size:15px; line-height:1.7; }
.site-presentation .guide-step-summary img { grid-column:2; grid-row:1 / 4; display:block; width:100%; height:100%; max-height:420px; min-height:0; object-fit:contain; margin:0; border:1px solid #d3e0d8; border-radius:4px; background:#fff; box-sizing:border-box; }
.site-presentation .guide-step-summary img[hidden] { display:none; }
.site-presentation .guide-controls { padding:14px 24px; border-top:1px solid #dce5df; }
.site-presentation .guide-position { flex:1; justify-content:center; }
.site-presentation .guide-position select { width:300px; min-height:42px; }
.site-presentation .guide-consultation { background:#f4f7f5; }
.site-presentation .guide-consultation button { min-height:36px; }
.client-guide-dialog button:focus-visible,.client-guide-dialog select:focus-visible { outline:2px solid #b29255; outline-offset:3px; }
/* Celular: conteudo rolavel e controles sempre acessiveis dentro da janela. */
@media(max-width:700px) {
 .client-guide-band-inner { padding:22px 24px; flex-direction:column; align-items:flex-start; gap:18px; }
 .client-guide-band h2 { font-size:23px; }
 .client-guide-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
 .client-guide-heading { padding:10px 12px; gap:10px; }
 .client-guide-heading h2 { font-size:17px; }
 .client-guide-heading>div { gap:4px; }
 .guide-icon-button { width:38px; height:38px; min-height:38px; }
 .guide-modes { padding:9px 12px; gap:7px; flex-wrap:wrap; }
 .guide-modes label { font-size:12px; padding:7px; }
 .guide-stage { min-height:200px; max-height:calc(100dvh - 262px); }
 .guide-slide-image { display:none; }
 .guide-step-summary { position:static; width:auto; height:auto; overflow:visible; clip-path:none; padding:24px 20px; }
 .guide-step-summary h3 { font-size:24px; }
 .guide-controls { padding:10px 12px; gap:7px; }
 .guide-position { flex:1; flex-direction:column; gap:3px; }
 .guide-position select { max-width:100%; width:100%; font-size:12px; padding:7px; }
 #guide-step-counter { font-size:12px; }
 .guide-arrows { gap:5px; }
 .site-presentation .client-guide-heading { padding:14px 16px; }
 .site-presentation .client-guide-heading h2 { font-size:21px; }
 .site-presentation .guide-modes { padding:10px 16px; }
 .site-presentation .guide-step-summary { padding:20px 16px; display:block; min-height:0; }
 .site-presentation .guide-step-number { padding-top:9px; margin-bottom:12px; }
 .site-presentation .guide-step-summary h3 { font-size:26px; margin-bottom:12px; }
 .site-presentation .guide-step-summary img { height:auto; max-height:280px; }
 .site-presentation .guide-controls { padding:10px 12px; }
 .site-presentation .guide-position select { width:100%; }
}
/* Reduz movimento quando solicitado pelo dispositivo e oculta a janela na impressao. */
@media(prefers-reduced-motion:reduce) { .guide-progress { visibility:hidden; } }
@media print { .client-guide-dialog { display:none!important; } }
