/* Citizen Apps • Camada de componentes avançados */
.experience-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(265px,.8fr);align-items:center;min-height:262px;margin:0 0 31px;overflow:hidden;color:#fff;background:linear-gradient(118deg,#0a2445,#103e7a 63%,#1b5aa7);border:1px solid #24528a;border-radius:25px;box-shadow:0 19px 45px #0b3c8226}
.experience-hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.95;background:radial-gradient(circle at 78% 38%,#3284e47a,transparent 35%),repeating-linear-gradient(0deg,transparent,transparent 43px,#ffffff09 44px,#ffffff09 45px),repeating-linear-gradient(90deg,transparent,transparent 43px,#ffffff08 44px,#ffffff08 45px)}
.experience-hero:after{content:"";position:absolute;right:-115px;top:-160px;width:370px;height:370px;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 0 0 65px #ffffff07,0 0 0 130px #ffffff03;pointer-events:none}
.exp-hero-copy{padding:34px 34px 34px 38px;position:relative;z-index:2}
.exp-hero-overline{color:#acd2ff;font-size:10px;letter-spacing:1.7px;text-transform:uppercase;font-weight:850;display:flex;align-items:center;gap:10px;margin-bottom:15px}
.exp-hero-overline:before{content:"";width:24px;height:2px;background:#77d8ff}
.exp-hero-copy h2{color:white!important;font-size:clamp(22px,2.15vw,31px);line-height:1.26;letter-spacing:-.7px;max-width:660px;margin:0!important}
.exp-hero-copy p{font-size:13px;color:#c4dcf6!important;max-width:580px;line-height:1.79;margin:12px 0 0}
.exp-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}
.exp-tags span{color:#dceeff;background:#ffffff0c;border:1px solid #ffffff27;border-radius:26px;padding:6px 10px;font-size:10px;font-weight:750}
.exp-hero-visual{position:relative;z-index:1;padding:13px 18px 13px 0;display:grid;place-items:center}
.exp-network{width:100%;max-width:360px;height:auto;overflow:visible}
.exp-network .exp-line{stroke:#85c5ff;stroke-width:1.5;stroke-dasharray:5 7;animation:exp-route 17s linear infinite}
.exp-network .exp-node{fill:#16487e;stroke:#86c7ff;stroke-width:1.4}
.exp-network .exp-soft{fill:#205eaa;stroke:#80c4ff;stroke-width:1.4}
.exp-network text{font-family:system-ui,sans-serif;font-weight:780;font-size:10px;fill:#d9eeff}
.exp-network .exp-point{fill:#9ee6ff}
.exp-network .exp-halo{fill:#1d90e5;opacity:.2;animation:exp-pulse 3.4s ease-in-out infinite}
.experience-context{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 26px}
.exp-context-label{display:flex;align-items:center;gap:9px;color:#45627e;font-size:12px;font-weight:760}
.exp-context-label:before{content:"";height:7px;width:7px;border-radius:50%;background:#1670e1;box-shadow:0 0 0 4px #e1eefc}
.exp-context-note{font-size:11px;font-weight:660;color:#8496aa}
.exp-filter-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:23px 0 19px}
.exp-filter-bar>span{font-size:12px;color:#62788f;font-weight:700}
.exp-filter-options{display:flex;gap:4px;flex-wrap:wrap;border:1px solid #e1e9f3;border-radius:12px;background:#f1f5fb;padding:4px}
.exp-filter-options button{border:0;background:none;color:#5b748e;font-weight:760;font-size:11px;padding:9px 13px;border-radius:9px;transition:.2s}
.exp-filter-options button.active{background:#fff;color:#155fc8;box-shadow:0 2px 9px #12468c15}
.exp-filter-options button:hover{background:#e4eefc}
#plan-cards .select-card[hidden]{display:none!important}
.exp-resource-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 14px}
.exp-ring-tile{border:1px solid #dce8f4;border-radius:15px;background:#fbfdff;padding:14px 6px;text-align:center;display:flex;flex-direction:column;align-items:center}
.exp-ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(#2276db 0%,#e4ebf4 0%);transition:background .25s}
.exp-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #edf1f6}
.exp-ring strong{position:relative;z-index:2;color:#22496c;font-size:14px;letter-spacing:-.7px;font-weight:850}
.exp-ring-tile small{font-size:10px;font-weight:760;color:#6b829b;margin-top:10px}
.exp-keyboard{display:flex;align-items:center;gap:9px;background:white;border:1px solid #dae5f2;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:760;color:#587089}
.exp-keyboard:hover{border-color:#9ac2f1;color:#165fc7}
.exp-keyboard kbd{background:#f2f6fb;border:1px solid #dce5f0;border-radius:6px;color:#526b85;padding:2px 5px;font:700 10px system-ui,sans-serif}
.exp-progress{position:fixed;z-index:90;top:0;left:266px;width:0;height:3px;background:linear-gradient(90deg,#1566e1,#54c6ee);box-shadow:0 1px 8px #1472e357;transition:width .1s}
.exp-command-backdrop{position:fixed;z-index:120;inset:0;display:none;align-items:flex-start;justify-content:center;padding:13vh 20px 20px;background:#081b3591;backdrop-filter:blur(8px)}
.exp-command-backdrop.open{display:flex}
.exp-command{width:min(550px,100%);border-radius:21px;padding:16px;background:white;border:1px solid #d8e6f6;box-shadow:0 28px 90px #061e3a47}
.exp-command-top{display:flex;align-items:center;gap:10px;padding:8px 8px 14px;border-bottom:1px solid #e8eef7}
.exp-command-top svg{width:21px;height:21px;stroke:#3179d9;fill:none}
.exp-command-top input{border:0;outline:0;background:none;flex:1;min-width:0;font:500 15px system-ui,sans-serif;color:#1c4063}
.exp-command-close{border-radius:8px;padding:6px 10px;border:1px solid #dce5f0;background:#f5f8fc;color:#5d7792}
.exp-command-list{padding:10px 0;max-height:50vh;overflow-y:auto}
.exp-command-list a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;border-radius:11px;color:#254a70;padding:13px 14px;font-weight:750;font-size:13px}
.exp-command-list a small{color:#90a1b3;font-size:11px}
.exp-command-list a:hover,.exp-command-list a:focus-visible{background:#ecf5ff;color:#135cc3}
.exp-command-empty{padding:17px;color:#8093a7;font-size:13px}
.exp-command-foot{border-top:1px solid #edf2f8;padding:10px 12px 2px;font-size:11px;color:#8093a5}
@keyframes exp-route{to{stroke-dashoffset:-144}}
@keyframes exp-pulse{50%{opacity:.42}}
@media(max-width:1220px){.exp-progress{left:236px}.exp-hero-copy{padding:27px 23px}.experience-hero{min-height:245px}}
@media(max-width:850px){.exp-progress{left:0}}
@media(max-width:690px){.experience-hero{grid-template-columns:1fr}.exp-hero-copy{padding:28px 25px 20px}.exp-hero-visual{max-height:145px;overflow:hidden;padding:0 20px 12px}.exp-network{max-width:295px;transform:translateY(-30px)}.exp-hero-copy h2{font-size:24px}.experience-context{align-items:start;flex-direction:column;gap:5px}.exp-ring{width:64px;height:64px}.exp-resource-rings{gap:6px}}
@media(max-width:450px){.exp-hero-copy{padding:25px 20px}.exp-hero-visual{max-height:119px}.exp-ring{width:54px;height:54px}.exp-ring:after{inset:7px}.exp-ring strong{font-size:11px}.exp-ring-tile{padding:12px 3px}.exp-keyboard{font-size:0}.exp-filter-options button{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.exp-network .exp-line,.exp-network .exp-halo{animation:none}}
@media print{.exp-command-backdrop,.exp-keyboard,.exp-progress,.exp-filter-bar{display:none!important}.experience-hero{background:#edf5ff;color:#163c6c;min-height:auto;box-shadow:none}.exp-hero-copy h2,.exp-hero-overline{color:#234d7e!important}.exp-hero-copy p{color:#42668d!important}.exp-hero-visual{display:none}}


/* Correções de usabilidade: filtros, estimativa guiada, comparação de carga e contraste */
.plan-count{font-size:11px;color:#577590;font-weight:770;letter-spacing:.1px;margin:4px 0 13px}
.guided-choice{border:1px solid #d8e7f7;border-radius:16px;padding:20px;background:linear-gradient(115deg,#f5faff,#fff 85%)}
.guided-title{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#234a72;font-size:15px}
.guided-pill{display:inline-block;padding:5px 9px;border-radius:20px;background:#e9f3ff;color:#1d68c9;font-size:10px;font-weight:800}
.guided-help{margin:9px 0 16px!important;color:#55718c!important;font-size:12px;line-height:1.65}
.guided-choice select{width:100%;min-height:46px;border:1px solid #cbdff3;border-radius:11px;color:#224665;background:white;padding:10px 12px;font-weight:640;font-size:13px}
.guided-choice select:focus{outline:3px solid #c6e0ff}
.guided-explanation{margin:11px 0 2px!important;font-size:12px;color:#496988!important;line-height:1.6}
.tech-details{margin-top:14px;border-top:1px solid #dce8f5;padding-top:13px}
.tech-details summary{list-style-position:inside;color:#2767b4;cursor:pointer;font-weight:770;font-size:11px}
.tech-details p{font-size:11px;color:#536f8a!important;margin:9px 0 0!important}
.api-fieldset{border:1px solid #dbe6f3;border-radius:14px;padding:17px;margin:20px 0 0}
.api-fieldset legend{padding:0 8px;font-weight:850;color:#31587d;font-size:13px}
.api-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:9px}
.api-option{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:11px 12px;border:1px solid #dce6f1;border-radius:10px;background:#fdfefe;cursor:pointer;font-size:12px;font-weight:670;color:#3a5c79;min-width:0;transition:.17s}
.api-option:hover{border-color:#a7cbf5;background:#f3f9ff}
.api-option input{width:16px;height:16px;flex-shrink:0;margin:0;accent-color:#1f6ddf}
.api-option span{overflow-wrap:anywhere}
.api-option:has(input:checked){background:#eaf4ff;border-color:#6eaaf1;color:#154f9c;box-shadow:0 3px 9px #1a66ca10}
.projected-intro{font-size:14px;color:#476988!important;max-width:1000px;line-height:1.8}
.projected-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 18px}
.projected-explainer>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:3px 10px;align-items:start;padding:17px;border-radius:13px;background:#f4f8fe;border:1px solid #dfe9f4}
.projected-explainer strong{font-size:13px;color:#214f7f}
.projected-explainer p{grid-column:1/-1;margin:6px 0 0!important;color:#55708d;font-size:11px!important;line-height:1.65}
.exp-guide-symbol{display:grid;place-items:center;color:white;border-radius:8px;min-width:38px;height:27px;padding:0 5px;font-size:10px;font-weight:900}
.projected-scale-note{background:#ecf5ff;border-left:3px solid #2b78db;border-radius:10px;padding:14px 17px;color:#3b6088;font-size:12px;line-height:1.75}
.projected-scale-note strong{color:#224f86}
.scale-chart{display:grid!important;grid-template-columns:repeat(5,minmax(150px,1fr))!important;overflow-x:auto;gap:12px;align-items:stretch;min-height:0;padding:7px 2px 14px;margin:20px 0 8px;scrollbar-color:#afc9e7 #f1f6fc}
.scale-col{min-width:0;display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:8px;border:1px solid #e2eaf4;background:#fbfdff;border-radius:13px;padding:14px 10px 12px}
.scale-col strong{font-size:13px;color:#204d7c}
.scale-col small{display:block;color:#5e7891;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.scale-bars{height:140px;width:100%;display:flex;align-items:end;gap:10px;margin-top:3px;border-bottom:1px solid #bdcfe5;padding:5px 6px 0;background-position:bottom}
.scale-bars span{display:block;flex:1;border-radius:7px 7px 0 0}
.scale-col.scale-over{background:#fff9f4;border-color:#eec7a5}
.scale-col.scale-over .scale-bars span{filter:saturate(.85)}
.scale-col.scale-near{background:#fffcf6;border-color:#f0dfba}
.scale-risk{font-size:10px;font-weight:780;border-radius:9px;padding:6px 5px;min-height:28px;margin-top:auto;display:grid;place-items:center}
.scale-risk.ok{background:#e6f6ee;color:#147652}
.scale-risk.near{background:#fff0da;color:#965e15}
.scale-risk.over{background:#fbe8de;color:#a74522}
.portal-table tr.scale-table-over td{background:#fff7f0}
.portal-table tr.scale-table-near td{background:#fffcf4}
/* Evita herança do azul usado em código inline dentro de blocos escuros. */
.portal-main pre{background:#112844!important;color:#f2f7ff!important;border:1px solid #274566!important;border-radius:14px;line-height:1.75;overflow-x:auto;overflow-wrap:normal;white-space:pre;tab-size:2;max-width:100%}
.portal-main pre code,.portal-main pre code *{color:#f2f7ff!important;-webkit-text-fill-color:#f2f7ff!important;background:transparent!important;border:0!important;box-shadow:none!important;text-shadow:none!important;white-space:pre!important;overflow-wrap:normal!important;word-break:normal!important;font-size:12px!important}
@media(max-width:1050px){.projected-explainer{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.projected-explainer{grid-template-columns:1fr}.scale-chart{grid-template-columns:repeat(5,minmax(130px,1fr))!important}.api-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guided-choice{padding:17px}}
@media(max-width:420px){.api-choice-grid{grid-template-columns:1fr}.scale-chart{grid-template-columns:repeat(5,minmax(125px,1fr))!important}}


/* Login compartilhado fixo nesta demonstração (não implica SSO implementado) */
.api-option-required{border-color:#b5d8c8!important;background:#edf8f2!important;cursor:default;color:#135a43!important}
.api-option-required input{accent-color:#18805c;opacity:1;cursor:not-allowed}
.api-option-required span{display:flex;flex-direction:column;gap:2px}
.api-option-required strong{font-size:12px;color:#176549;font-weight:850}
.api-option-required small{font-size:10px;color:#467b62;font-weight:700}
.login-guidance{font-size:11px!important;line-height:1.7!important;color:#57728a!important;margin:14px 0 0!important}
#plan-cards .select-card[hidden]{display:none!important}
#plan-cards:not(:empty){min-height:0}


/* Responsividade verificada em Chromium: conteúdo extenso não deve aumentar a largura do grid. */
.portal-main .two-col,
.portal-main .grid2,
.portal-main .deep-grid,
.portal-main .risklist,
.portal-main .section,
.portal-main .paper,
.portal-main .card,
.portal-main .riskitem,
.portal-main .step {min-width:0;max-width:100%}
.portal-main .two-col > *,
.portal-main .grid2 > *,
.portal-main .deep-grid > *,
.portal-main .risklist > * {min-width:0;max-width:100%}
.portal-main .two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-main .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-main .deep-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.portal-main .paper pre,
.portal-main .card pre{min-width:0;max-width:100%;overflow-x:auto;white-space:pre}
.portal-main .riskitem{grid-template-columns:minmax(0,180px) minmax(0,1fr)}
.portal-main .step > div,.portal-main .riskitem > *{min-width:0}
@media(max-width:1100px){
 .portal-main .deep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .portal-main .riskitem{grid-template-columns: minmax(0,1fr)}
}
@media(max-width:800px){
 .portal-main .two-col,
 .portal-main .grid2,
 .portal-main .deep-grid{grid-template-columns:minmax(0,1fr)}
 .portal-main .riskitem{grid-template-columns:minmax(0,1fr)}
}

/* O caminho técnico apps.siebot.cloud/aplicacao_separada_por_underline deve quebrar em telas estreitas. */
.portal-main .portal-description {overflow-wrap:anywhere;word-break:normal}


/* Auditoria WCAG 2.1 AA: textos secundários legíveis sobre superfícies claras. */
.portal-main .breadcrumb,
.portal-main .breadcrumb span,
.portal-main .exp-context-note{color:#455b73!important}
.portal-sidebar .portal-caption,
.portal-sidebar .sidebar-foot,
.portal-sidebar .sidebar-foot small{color:#52667d}
.portal-main .portal-description,
.portal-main .portal-panel p,
.portal-main .paper p,
.portal-main .section-head p,
.portal-main .heading p,
.portal-main .intro,
.portal-main .note,
.portal-main .caption,
.portal-main .sourcecode,
.portal-main .muted-text,
.portal-main .plan-count,
.portal-main .exp-filter-bar>span,
.portal-main .portal-metric .micro,
.portal-main .portal-metric small,
.portal-main .hero-panel p,
.portal-main .exp-ring-tile small,
.portal-main .rack-server small,
.portal-main .rack-head small,
.portal-main .usage-header,
.portal-main .calc-card p,
.portal-main .projected-intro,
.portal-main .scale-col small,
.portal-main .select-card .card-spec,
.portal-main .select-card small,
.portal-main .select-card .card-price small,
.portal-main .sequence-subtitle,
.portal-main .sequence-hint,
.portal-main .sequence-step p,
.portal-main .portal-table th,
.portal-main .portal-table td,
.portal-main .api-fieldset p,
.portal-main .login-guidance,
.portal-main .tech-details p,
.portal-main .guided-help,
.portal-main .guided-explanation,
.portal-main .projected-explainer p,
.portal-main .projected-scale-note,
.portal-main .portal-callout,
.portal-main .source-list p,
.portal-main .numbered li,
.portal-main .checks li{color:#415b77!important}
.portal-main .portal-form input::placeholder,
.portal-main .portal-form select::placeholder{color:#58718b;opacity:1}
.portal-main .portal-form label,
.portal-main .cost-controls label,
.portal-main .usage-header strong,
.portal-main .portal-metric strong{color:#254d75}
.portal-main .exp-hero-copy p{color:#d3e6ff!important}
.portal-main .exp-hero-overline{color:#c5e1ff!important}
.portal-main .experience-hero .exp-tags span{color:#edf6ff!important}
.portal-main .scale-risk.ok{color:#105e41}
.portal-main .scale-risk.near{color:#77501d}
.portal-main .scale-risk.over{color:#8b3122}
.portal-main .portal-badge.alert{color:#754e14}
.portal-main .status.pending{color:#754e14}
.portal-main .status.verified{color:#105e41}
.portal-main .status.model{color:#174b91}
/* Rolagem horizontal do código deve estar disponível também para o teclado. */
.portal-main pre:focus-visible{
 outline:3px solid #62a5f3;
 outline-offset:3px;
 box-shadow:0 0 0 6px #dcecff;
}

/* Ajustes finais de contraste identificados pelo axe-core. */
.exp-filter-options button{color:#364f69!important}
.exp-filter-options button.active{color:#174e95!important}
.portal-main table caption{color:#3c5875!important}
.portal-main .arch-box small{color:#3d5875!important}
.portal-main .projected-explainer>div:nth-child(1) .exp-guide-symbol{background:#1c559d!important;color:#fff!important}
.portal-main .projected-explainer>div:nth-child(2) .exp-guide-symbol{background:#076867!important;color:#fff!important}
.portal-main .projected-explainer>div:nth-child(3) .exp-guide-symbol{background:#815012!important;color:#fff!important}

/* WCAG AA: cor do rótulo de estado Docker no rack. */
.portal-main .rack-head > span {color:#075a3c!important}
/* Mostrar o diagrama inteiro no celular: antes o max-height cortava os últimos containers. */
@media(max-width:690px){
 .experience-hero .exp-hero-visual{max-height:none!important;overflow:visible!important;padding:0 22px 22px!important}
 .experience-hero .exp-network{max-width:290px!important;transform:none!important;height:auto}
}