/* Composições estáticas. As proporções são relativas ao quadro de cada esboço. */
.system-sketch { --navy: #173f78; --green: #e1eddb; --amber: #fbe7c9; }
.sketch-layout { position: absolute; inset: 0; }
.sketch-sheet,.sk-note { position: absolute; overflow: hidden; border: 1px solid #a3b8d1; border-radius: 7px; box-shadow: 0 4px 10px #223a5b14; }
.sketch-label,.sk-note { display: flex; align-items: center; gap: .45em; padding: .55em .7em; font-size: clamp(.78rem,3.15cqi,1.1rem); line-height: 1.2; font-weight: 620; }
.sketch-label .glyph,.sk-note .glyph { flex-shrink: 0; width: 1.05em; height: 1.05em; }
.paper-main { color: var(--navy); background: white; }
.paper-main .sketch-label { color: white; background: var(--navy); }
.paper-orange { color: #754513; border-color: #d0b28e; background: var(--amber); }
.paper-green { color: #31583c; border-color: #a3bb98; background: var(--green); }
.sketch-lines { display: grid; gap: 6px; padding: 0 .8em .7em; }
.sketch-lines i,.sk-news b,.sk-agenda-lines i { display: block; height: clamp(3px,1cqi,6px); border-radius: 3px; background: currentColor; opacity: .2; }
.sketch-lines i:last-child,.sk-news b:last-child { width: 60%; }
.paper-main .sketch-lines { padding-top: .7em; }
.sk-large { left: 9%; top: 18%; width: 59%; height: 61%; transform: rotate(-2deg); }
.sk-small { left: 55%; top: 48%; width: 36%; min-height: 28%; transform: rotate(2deg); }
.sk-slip { display: grid; gap: .5em; padding: .5em .8em; font-size: clamp(.76rem,2.9cqi,1rem); }
.sk-barcode { display: block; height: clamp(15px,5cqi,32px); background: repeating-linear-gradient(90deg,#3f5875 0 2px,transparent 2px 5px,#3f5875 5px 6px,transparent 6px 9px); }
.sk-slip .sk-barcode { width: 76%; }
.sk-bars { display: flex; align-items: flex-end; gap: 8%; height: clamp(26px,8cqi,47px); margin: .2rem .8rem .6rem; border-bottom: 1px solid currentColor; }
.sk-bars i { width: 16%; height: 45%; border-radius: 2px 2px 0 0; background: #719b77; }
.sk-bars i:nth-child(2) { height: 80%; }
.sk-bars i:nth-child(3) { height: 60%; }
.sk-bars i:nth-child(4) { height: 95%; }
.sk-file-row { display: flex; align-items: center; gap: .5rem; padding: .7em; font-size: clamp(.76rem,2.9cqi,1rem); }
.sk-file-row i { display: block; width: .6em; height: .6em; border-radius: 2px; background: #df9846; }
.sk-file-tabs { display: flex; align-items: flex-end; gap: 4%; width: 82%; border-bottom: 3px solid #8da5c2; margin: 6% auto; }
.sk-file-tabs i { width: 30%; height: clamp(19px,5cqi,29px); border-radius: 3px 3px 0 0; background: #c7d9ed; }
.sk-file-tabs i:nth-child(2) { background: #f1cd97; }
.sk-file-tabs i:nth-child(3) { background: #b9d2b3; }

/* Cadastro da empresa e registros relacionados. */
.sk-company-root { left: 25%; top: 8%; width: 50%; }
.sk-company-left,.sk-company-right { top: 60%; width: 40%; }
.sk-company-left { left: 6%; }
.sk-company-right { right: 6%; }
.sk-branch { position: absolute; top: 45%; bottom: 37%; left: 26%; right: 26%; border: 1px solid #8da5c2; border-bottom: 0; }
.sk-branch::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 3.5em; border-left: 1px solid #8da5c2; }

/* Títulos, quitações e boletim de caixa. */
.sk-ledger-back { left: 34%; top: 9%; width: 50%; height: 55%; transform: rotate(4deg); }
.sk-ledger-mid { left: 22%; top: 29%; width: 55%; height: 51%; transform: rotate(-2deg); }
.sk-ledger-front { left: 10%; top: 47%; width: 62%; height: 43%; }
.sk-ledger-rules { width: 84%; height: 37%; margin: 5% auto; background: repeating-linear-gradient(0deg,#cfdae7 0 2px,transparent 2px 8px); }
.sk-ledger-rules::after { display: block; content: ""; width: 64%; height: 100%; border-right: 4px solid white; }

/* Agendas de serviços e ocupação dos apartamentos. */
.sk-calendar { top: 14%; left: 12%; width: 68%; height: 68%; }
.sk-calendar-grid,.sk-occupancy { position: relative; width: 88%; height: 49%; margin: 5% auto; background-image: linear-gradient(#d3dfeb 1px,transparent 1px),linear-gradient(90deg,#d3dfeb 1px,transparent 1px); background-size: 20% 33.33%; border-right: 1px solid #d3dfeb; border-bottom: 1px solid #d3dfeb; }
.sk-calendar-grid i,.sk-occupancy i { position: absolute; border-radius: 2px; }
.sk-calendar-grid i { width: 15%; height: 44%; background: #b3cea8; top: 5%; left: 3%; }
.sk-calendar-grid i:nth-child(2) { top: 37%; left: 43%; background: #efc78b; }
.sk-calendar-grid i:nth-child(3) { top: 12%; left: 63%; background: #acc8ed; }
.sk-schedule .sk-note { top: 63%; right: 7%; transform: rotate(2deg); }
.sk-occupancy { background-size: 16.66% 33.33%; }
.sk-occupancy i { height: 21%; width: 44%; background: #acc8ed; top: 7%; left: 3%; }
.sk-occupancy i:nth-child(2) { top: 42%; left: 34%; background: #b3cea8; }
.sk-occupancy i:nth-child(3) { top: 73%; left: 17%; width: 28%; background: #efc78b; }
.sk-occupancy i:nth-child(4) { top: 7%; left: 68%; width: 28%; background: #efc78b; }
.sk-reservations .sk-small { top: 55%; right: 7%; left: auto; width: 38%; }
.sk-folder-back { left: 13%; top: 11%; width: 60%; height: 56%; transform: rotate(-3deg); }
.sk-folder-front { left: 25%; top: 37%; width: 66%; height: 48%; }

/* Processo jurídico e controle de acesso. */
.sk-dossier { top: 11%; left: 17%; width: 66%; height: 79%; }
.sk-timeline { display: grid; gap: .45em; padding: .7em 1em; font-size: clamp(.76rem,2.8cqi,1rem); }
.sk-timeline span { position: relative; padding-left: 1.45em; }
.sk-timeline span::before { content: ""; position: absolute; left: 0; top: .45em; width: .55em; height: .55em; border-radius: 50%; background: #4775ae; }
.sk-timeline span:nth-child(2)::before { background: #d79c55; }
.sk-timeline span:nth-child(3)::before { background: #79a77e; }
.sk-timeline span:not(:last-child)::after { content: ""; position: absolute; left: .24em; top: 1em; height: calc(100% - .1em); border-left: 1px solid #a3b8d1; }
.sk-access-back { left: 11%; top: 14%; width: 55%; height: 60%; transform: rotate(-4deg); }
.sk-access-front { left: 31%; top: 36%; width: 57%; height: 50%; }
.sk-permissions { display: grid; grid-template-columns: 2.5fr 1fr 1fr; align-items: center; gap: clamp(6px,1.4cqi,10px); margin: .65em .85em; }
.sk-permissions i { height: 4px; background: #d5e1ed; }
.sk-permissions b { width: .75em; height: .75em; border: 1px solid #83a786; background: #cce2c7; border-radius: 2px; }
.sk-permissions b:nth-child(3) { background: white; border-color: #b7c6d5; }

/* Comissão eleitoral, cédula e apuração. */
.sk-agenda { width: 55%; height: 57%; top: 9%; left: 13%; transform: rotate(-3deg); }
.sk-ballot { width: 51%; height: 53%; top: 31%; left: 8%; transform: rotate(-1deg); }
.sk-ballot-options { display: grid; gap: .55em; margin: 8%; }
.sk-ballot-options i { position: relative; display: block; height: .7em; padding-left: 1.4em; }
.sk-ballot-options i::before { position: absolute; content: ""; left: 0; width: .7em; height: .7em; border: 1px solid #8aa5c4; border-radius: 50%; }
.sk-ballot-options i::after { display: block; content: ""; width: 72%; height: 4px; margin-top: .25em; background: #d1dfee; }
.sk-report { width: 38%; top: 43%; left: 55%; transform: rotate(3deg); }

/* Rede conveniada: carteirinha e registro no estabelecimento. */
.sk-pass { width: 46%; height: 42%; top: 13%; left: 8%; transform: rotate(-4deg); }
.sk-pass-body { display: flex; align-items: center; gap: 8%; padding: 6% 9%; }
.sk-pass-body i { width: 16%; aspect-ratio: 1; border-radius: 3px; border: 1px solid #cfac7d; background: #f2d6aa; }
.sk-pass-body .sk-barcode { width: 58%; height: clamp(12px,3.5cqi,22px); }
.sk-shop { width: 43%; height: 32%; top: 32%; left: 52%; transform: rotate(2deg); }
.sk-network-line { position: absolute; left: 31%; top: 46%; width: 43%; height: 29%; border: 1px solid #8aa5c4; border-top: 0; }
.sk-network .sk-note { left: 27%; top: 69%; }

/* Estrutura editorial do site da entidade. */
.sk-browser { width: 73%; height: 67%; left: 9%; top: 13%; transform: rotate(-2deg); }
.sk-news { display: grid; grid-template-columns: 36% 1fr; gap: 8%; padding: 6%; align-items: center; }
.sk-news > i { aspect-ratio: 1.5; background: linear-gradient(150deg,#d2dfed 44%,#adc5dd 44%); border-radius: 3px; }
.sk-news span { display: block; font-weight: 600; font-size: clamp(.76rem,2.9cqi,1.05rem); }
.sk-news b { margin-top: 6px; }
.sk-agenda-tab { left: 60%; top: 54%; width: 33%; transform: rotate(3deg); }
.sk-agenda-lines { display: grid; gap: 5px; padding: 0 .75em .65em; }

.product-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: clamp(18px,2.4vw,36px); row-gap: 36px; }
.product-gallery h2 { font-size: 1.6rem; margin: 1rem 0 .45rem; }
.product-gallery p { color: var(--muted); }
.product-gallery .text-link { margin-top: .8rem; }
.product-intro .back { margin-bottom: 1.4rem; }
.erp-area-heading { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 1.5rem; align-items: start; margin-bottom: 1.6rem; }
.erp-area-heading p { margin: 0; max-width: 60ch; }
.erp-area-modules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(24px,3.5vw,52px); }
.erp-area-modules article,.erp-admin { min-width: 0; }
.erp-area-modules .record-sketch,.erp-admin .record-sketch { aspect-ratio: 2.45; min-height: 178px; margin-bottom: 1rem; }
.erp-admin .record-sketch { max-width: 37rem; }
.product-gallery .record-sketch { min-height: 172px; }
@media (max-width: 800px) {
    .product-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .erp-area-heading { grid-template-columns: 1fr; gap: .5rem; }
}
@media (max-width: 660px) {
    .product-gallery,.erp-area-modules { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 380px) {
    .sketch-label,.sk-note { padding-inline: .5em; gap: .3em; }
}
@container (max-width: 350px) {
    .record-main { width: 74%; left: 5%; }
    .record-label { white-space: normal; }
    .sk-shop { left: 45%; width: 51%; }
}