/* ============================================================
   Deal4b.doc — Documentação Smart Process
   Paleta e vocabulário visual portados do SmartProcess.CRM.Portal.
   ============================================================ */
:root {
  --smart-primary: #005daa;
  --smart-primary-dark: #004a87;
  --smart-primary-soft: #e8f1fa;
  --smart-bg: #f4f7fb;
  --smart-text: #243247;
  --smart-muted: #6b778c;
  --smart-border: #dce4ef;
  --smart-line: #eaf0f7;
  --ok: #1f8a4c;
  --warn: #c9761a;
  --danger: #b3323f;
  --shadow-sm: 0 1px 2px rgba(35, 65, 105, .06);
  --shadow-md: 0 6px 20px rgba(35, 65, 105, .08);
  --shadow-lg: 0 18px 46px rgba(35, 65, 105, .12);
  --r: .65rem;
  --r-lg: .9rem;
}

html { font-size: 15px; }
html, body { height: 100%; }
body { color: var(--smart-text); background: var(--smart-bg); display: flex; flex-direction: column; min-height: 100vh; padding-top: 4.35rem; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--smart-text); font-weight: 650; }
a { color: var(--smart-primary-dark); }
.container-doc { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }

body > main { flex: 1 0 auto; }
.app-footer { flex: 0 0 auto; }

/* ---------- cabeçalho ---------- */
.site-header-fixed { left: 0; position: fixed; right: 0; top: 0; z-index: 1000; }
.brand-accent { height: 3px; background: linear-gradient(90deg, var(--smart-primary) 0%, #2f8fd8 60%, #7cc0ee 100%); }
.app-header { background: #fff; border-bottom: 1px solid var(--smart-border); box-shadow: var(--shadow-sm); }
.app-header-inner { align-items: center; display: flex; gap: 1rem; justify-content: space-between; min-height: 4.15rem; padding: 0 1.5rem; }
.app-brand { align-items: center; display: flex; min-width: 0; text-decoration: none; color: inherit; }
.app-brand img.brand-mark { height: 2.35rem; width: auto; }
.app-nav { align-items: center; display: flex; gap: .35rem; }
.app-nav a { align-items: center; border-radius: var(--r); color: var(--smart-muted); display: inline-flex; font-size: .87rem; font-weight: 600; padding: .5rem .8rem; text-decoration: none; transition: .15s; }
.app-nav a:hover { background: #f6f9fd; color: var(--smart-text); }
.app-nav-sair { display: inline-flex; margin: 0; }
.app-nav-link-btn { align-items: center; background: none; border: 0; border-radius: var(--r); color: var(--smart-muted); cursor: pointer; display: inline-flex; font: inherit; font-size: .87rem; font-weight: 600; padding: .5rem .8rem; transition: .15s; }
.app-nav-link-btn:hover { background: #f6f9fd; color: var(--smart-text); }
/* Separa a navegação do bloco de conta (usuário + sair). */
.app-nav-sep { background: var(--smart-border); height: 1.4rem; margin: 0 .45rem; width: 1px; }
.app-nav-user { align-items: center; color: var(--smart-muted); display: inline-flex; font-size: .87rem; font-weight: 600; gap: .4rem; max-width: 11rem; min-width: 0; padding: .5rem .3rem; }
.app-nav-user .fa { font-size: 1.05rem; }
.app-nav-user-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-tema { align-items: center; background: #fff; border: 1px solid var(--smart-border); border-radius: 50%; color: var(--smart-muted); cursor: pointer; display: inline-flex; height: 2.3rem; justify-content: center; margin-left: .35rem; transition: .15s; width: 2.3rem; }
.btn-tema:hover { background: #f6f9fd; color: var(--smart-text); }

.app-main { flex: 1 0 auto; padding: 1.4rem 0 2.5rem; }
.app-footer { background: #fff; border-top: 1px solid var(--smart-border); color: var(--smart-muted); font-size: .78rem; padding: 1rem 0; text-align: center; }

/* ---------- botões ---------- */
.btn-smart { align-items: center; background: var(--smart-primary); border: 1px solid var(--smart-primary); border-radius: var(--r); color: #fff; cursor: pointer; display: inline-flex; font-size: .86rem; font-weight: 650; gap: .45rem; justify-content: center; min-height: 2.55rem; padding: .5rem 1.05rem; text-decoration: none; transition: .15s; white-space: nowrap; }
.btn-smart:hover, .btn-smart:focus { background: var(--smart-primary-dark); border-color: var(--smart-primary-dark); color: #fff; }
.btn-smart.outline { background: #fff; color: var(--smart-primary-dark); }
.btn-smart.outline:hover, .btn-smart.outline:focus { background: var(--smart-primary-soft); color: var(--smart-primary-dark); }

/* ---------- painéis / seções ---------- */
.panel { background: #fff; border: 1px solid var(--smart-border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.panel-head { align-items: center; border-bottom: 1px solid var(--smart-line); display: flex; justify-content: space-between; padding: 1rem 1.25rem; }
.panel-head h1, .panel-head h2 { font-size: 1.1rem; margin: 0; }
.panel-body { padding: 1.25rem; }
.block { margin-bottom: 1.5rem; }
.block:last-child { margin-bottom: 0; }
.block-title { align-items: center; color: var(--smart-text); display: flex; font-size: .78rem; font-weight: 750; gap: .5rem; letter-spacing: .07em; margin-bottom: .7rem; text-transform: uppercase; }
.block-title::after { background: var(--smart-line); content: ""; flex: 1 1 auto; height: 1px; }
.block-text { color: #3c4a60; font-size: .93rem; line-height: 1.65; white-space: pre-line; }

.notice { border-radius: var(--r); font-size: .88rem; line-height: 1.5; margin-bottom: 1.1rem; padding: .8rem .95rem; }
.notice.info { background: #eef5fc; border: 1px solid #c9dcef; color: #194f7c; }
.notice.warn { background: #fff8e5; border: 1px solid #f0dcb8; color: #7a5c14; }
.notice.err { background: #fdeef0; border: 1px solid #f0c4c9; color: #8f2b36; }
.notice.ok { background: #eef7f1; border: 1px solid #c6e5d2; color: #186c3d; }

/* ---------- links de lista (versões, changelog) ---------- */
.link-list { display: flex; flex-direction: column; }
.link-item { align-items: center; border-bottom: 1px solid var(--smart-line); color: inherit; display: flex; gap: .9rem; justify-content: space-between; padding: .9rem 1.25rem; text-decoration: none; transition: .15s; }
.link-item:last-child { border-bottom: 0; }
.link-item:hover { background: #f8fbfe; }
.link-item strong { display: block; font-size: .93rem; }
.link-item .chevron { color: var(--smart-muted); }

/* ---------- landing / cards de projeto ---------- */
.landing { padding: 1.5rem 0 2.5rem; }
.landing-hero { margin: 0 auto 1.8rem; max-width: 44rem; text-align: center; }
.eyebrow { color: var(--smart-primary); font-size: .74rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.landing-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 650; margin: .35rem 0 .5rem; }
.landing-hero p { color: var(--smart-muted); font-size: .95rem; line-height: 1.6; margin: 0; }
.entry-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.entry-card { background: #fff; border: 1px solid var(--smart-border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; padding: 1.4rem; text-decoration: none; color: inherit; transition: .15s; }
.entry-card:hover { border-color: #a8cbe8; box-shadow: var(--shadow-lg); transform: translateY(-2px); color: inherit; }
.entry-icon { align-items: center; background: var(--smart-primary-soft); border-radius: .7rem; color: var(--smart-primary-dark); display: inline-flex; font-size: 1.15rem; height: 2.6rem; justify-content: center; margin-bottom: .85rem; width: 2.6rem; }
.entry-icon.entry-icon-brand { background: none; border-radius: 0; height: 2.5rem; justify-content: flex-start; margin-bottom: 1rem; width: 100%; }
.entry-icon.entry-icon-brand img.brand-mark { height: 100%; width: auto; }
.entry-card h2 { font-size: 1.02rem; font-weight: 650; margin: 0; }
.entry-card p { color: var(--smart-muted); font-size: .85rem; margin: .3rem 0 0; }

/* ---------- mestre-detalhe da documentação ---------- */
.workspace { align-items: start; display: grid; gap: 1.1rem; grid-template-columns: minmax(260px, 20rem) minmax(0, 1fr); }
.workspace.full { gap: 0; grid-template-columns: 20% 80%; left: 50%; margin-left: -50vw; margin-right: -50vw; position: relative; right: 50%; width: 100vw; }
.workspace.full .ws-list, .workspace.full .ws-detail { border-radius: 0; box-shadow: none; }
.workspace.full .ws-list { border-right: 1px solid var(--smart-border); height: calc(100vh - 4.35rem); max-height: none; position: sticky; top: 4.35rem; }
.ws-list { display: flex; flex-direction: column; max-height: calc(100vh - 9rem); }
.ws-search { padding: .9rem .9rem .5rem; }
.ws-search input { border: 1px solid #cfdbea; border-radius: var(--r); font-size: .86rem; min-height: 2.5rem; padding: .45rem .7rem; width: 100%; }
.ws-search input:focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(0, 93, 170, .13); outline: none; }
.ws-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem .5rem 1rem; }
.ws-menu::-webkit-scrollbar { width: 9px; }
.ws-menu::-webkit-scrollbar-thumb { background: #d6e0ec; border: 3px solid #fff; border-radius: 9px; }
.ws-menu ul.nav { list-style: none; margin: 0; padding-left: 0; }
.ws-menu ul.nav.pl-3 { padding-left: .9rem; }
.ws-menu .nav-item { margin-bottom: .1rem; }
.ws-menu .nav-link { align-items: center; border-radius: var(--r); color: var(--smart-text); display: flex; font-size: .85rem; gap: .55rem; padding: .45rem .6rem; text-decoration: none; transition: .15s; }
.ws-menu a.nav-link:hover { background: #f6f9fd; color: var(--smart-primary-dark); }
.ws-menu .nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-menu .menu-icon { color: var(--smart-muted); flex: 0 0 auto; font-size: 1.1rem; height: 1.1rem; width: 1.1rem; }
.ws-menu img.menu-icon { object-fit: contain; }
.ws-menu .menu-icon-default { color: var(--smart-primary); }
.ws-menu a.nav-link:hover .menu-icon { color: var(--smart-primary-dark); }
.ws-menu .menu-group-toggle { color: var(--smart-muted); cursor: pointer; font-size: .74rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; user-select: none; }
.ws-menu .menu-group-toggle:hover { background: #f6f9fd; }
.ws-menu .menu-group-toggle .menu-icon { font-size: .95rem; height: .95rem; width: .95rem; }
.ws-menu .toggle-icon { color: var(--smart-muted); flex: 0 0 auto; font-size: .62rem; transform: rotate(90deg); transition: transform .15s; width: .8rem; }
.ws-menu .menu-group.is-collapsed > .menu-group-toggle .toggle-icon { transform: rotate(0deg); }
.ws-menu .menu-group.is-collapsed > ul { display: none; }

.ws-detail { padding: 1.5rem; }
.ws-detail-header { border-bottom: 1px solid var(--smart-line); margin-bottom: 1.25rem; padding-bottom: 1.1rem; }
.ws-detail-header a { color: inherit; text-decoration: none; }
.ws-detail-header h1 { font-size: 1.2rem; margin: 0; }
.detail-title { font-size: 1.05rem; font-weight: 650; margin: 0 0 .3rem; }

.portal-html { color: #3c4a60; font-size: .93rem; line-height: 1.65; overflow-wrap: anywhere; }
.portal-html > :first-child { margin-top: 0; }
.portal-html > :last-child { margin-bottom: 0; }
.portal-html img, .portal-html video, .portal-html iframe { height: auto; max-width: 100%; }
.portal-html pre, .portal-html .ql-code-block { background: #f4f6f8; border-radius: .35rem; overflow-x: auto; padding: .65rem; white-space: pre-wrap; }

/* ---------- changelog rico (mesma estrutura do popup "novidades" do desktop) ---------- */
.portal-html .hero { background: var(--smart-primary-soft); border-left: 4px solid var(--smart-primary); border-radius: var(--r); margin-bottom: 1.1rem; padding: 1rem; }
.portal-html .hero-tag { color: var(--smart-muted); font-size: .78rem; margin-bottom: .35rem; }
.portal-html .hero-title { font-size: 1.2rem; font-weight: 700; margin-bottom: .35rem; }
.portal-html .hero-text { line-height: 1.55; }
.portal-html .cards-resumo { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: .9rem 0 1.1rem; }
.portal-html .card-resumo { background: #fbfdff; border-radius: var(--r); border-top: 4px solid var(--smart-primary); padding: .75rem; }
.portal-html .card-novidade { border-top-color: var(--smart-primary); }
.portal-html .card-melhoria { border-top-color: var(--ok); }
.portal-html .card-correcao { border-top-color: var(--warn); }
.portal-html .card-numero { color: var(--smart-muted); font-size: .7rem; margin-bottom: .25rem; }
.portal-html .card-titulo { font-weight: 700; margin-bottom: .3rem; }
.portal-html .card-texto { color: var(--smart-muted); font-size: .82rem; line-height: 1.45; }
.portal-html .secao { margin-top: 1.4rem; }
.portal-html .secao:first-of-type { margin-top: .5rem; }
.portal-html .titulo { border-left: 4px solid; font-size: .95rem; font-weight: 700; margin-bottom: .6rem; padding-left: .5rem; }
.portal-html .titulo.novidades { border-color: var(--smart-primary); color: var(--smart-primary-dark); }
.portal-html .titulo.melhorias { border-color: var(--ok); color: var(--ok); }
.portal-html .titulo.correcoes { border-color: var(--danger); color: var(--danger); }
.portal-html .titulo.outros { border-color: var(--smart-muted); color: var(--smart-muted); }
.portal-html .destaque { background: var(--smart-primary-soft); border-left: 4px solid var(--smart-primary); border-radius: var(--r); margin-top: .6rem; padding: .75rem; }
.portal-html .galeria-4, .portal-html .galeria-2 { margin-top: .9rem; overflow: hidden; width: 100%; }
.portal-html .card-4, .portal-html .card-2 { background: #fbfdff; border: 1px solid var(--smart-border); border-radius: var(--r); float: left; margin-bottom: .9rem; margin-right: .75rem; padding: .5rem; text-align: center; }
.portal-html .card-4 { height: 11rem; width: 15rem; }
.portal-html .card-2 { height: 21rem; width: 30rem; }
.portal-html .card-4 img, .portal-html .card-2 img { background: #fff; border: 1px solid var(--smart-border); border-radius: .35rem; }
.portal-html .card-4 img { height: 7.5rem; width: 100%; }
.portal-html .card-2 img { height: auto; max-height: 15rem; max-width: 100%; width: auto; }
.portal-html .imagem-destaque { margin-top: .75rem; text-align: center; }
.portal-html .imagem-destaque img { border-radius: var(--r); max-width: 95%; }
.portal-html .legenda { color: var(--smart-muted); font-size: .78rem; margin-top: .4rem; }

/* ---------- formulários (admin) ---------- */
.field { margin-bottom: .95rem; }
.field > label { color: var(--smart-text); display: block; font-size: .82rem; font-weight: 650; margin-bottom: .35rem; }
.form-control, .form-select { border: 1px solid #cfdbea !important; border-radius: var(--r) !important; font-size: .88rem; min-height: 2.6rem; padding: .5rem .7rem; }
textarea.form-control { min-height: 6rem; }
.form-control:focus, .form-select:focus { border-color: #86b7fe !important; box-shadow: 0 0 0 .2rem rgba(0, 93, 170, .13) !important; }
.text-danger { color: var(--danger) !important; font-size: .8rem; }

/* ---------- botão voltar ao topo ---------- */
.back-to-top { align-items: center; background: #fff; border: 1px solid var(--smart-border); border-radius: 50%; bottom: 1.6rem; box-shadow: var(--shadow-md); color: var(--smart-primary-dark); display: flex; height: 2.7rem; justify-content: center; opacity: 0; pointer-events: none; position: fixed; right: 1.6rem; transition: opacity .15s; visibility: hidden; width: 2.7rem; }
.back-to-top.show { opacity: 1; pointer-events: auto; visibility: visible; }
.back-to-top:hover { background: var(--smart-primary-soft); color: var(--smart-primary-dark); }
.back-to-top i { line-height: 1; }

/* ---------- editor quill ---------- */
/* Quill insere a toolbar como irmã do elemento do container, não como filha —
   por isso os seletores miram .ql-toolbar/.ql-container direto, não .quill-host.
   O canvas do editor fica sempre claro (fundo e ícones), independente do tema da página. */
.ql-toolbar.ql-snow { background: #fff; border-color: #cfdbea; border-radius: var(--r) var(--r) 0 0; }
.quill-host.ql-container.ql-snow { background: #fff; border-color: #cfdbea; border-radius: 0 0 var(--r) var(--r); font-size: .9rem; }
.quill-host .ql-editor { color: #243247; min-height: 16rem; }
.editor-fonte-html { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .82rem; }
.editor-modo-toggle { display: flex; gap: .4rem; margin-bottom: .5rem; }
.editor-modo-btn { background: #fff; border: 1px solid var(--smart-border); border-radius: var(--r); color: var(--smart-muted); cursor: pointer; font-size: .78rem; font-weight: 650; padding: .35rem .75rem; }
.editor-modo-btn.is-active { background: var(--smart-primary-soft); border-color: #a8cbe8; color: var(--smart-primary-dark); }
.editor-preview-html { border: 1px solid var(--smart-border); border-radius: var(--r); min-height: 16rem; padding: 1rem; }

/* ---------- ações de tabela (editar/excluir consistentes) ---------- */
.link-action-danger { background: none; border: 0; color: var(--danger); cursor: pointer; font: inherit; padding: 0; text-decoration: none; }
.link-action-danger:hover { text-decoration: underline; }

/* ---------- página de erro ---------- */
.error-wrap { align-items: center; display: flex; justify-content: center; min-height: 60vh; padding: 2rem 1rem; }
.error-card { background: #fff; border: 1px solid var(--smart-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-width: 32rem; padding: 2.2rem; text-align: center; }
.error-code { color: var(--smart-primary); font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.error-card h1 { font-size: 1.3rem; margin: .4rem 0 .6rem; }
.error-card p { color: var(--smart-muted); font-size: .92rem; line-height: 1.6; margin: 0 0 1.4rem; }

/* ---------- modo escuro ---------- */
:root[data-theme="dark"] {
  --smart-primary: #4da3ff;
  --smart-primary-dark: #7cbfff;
  --smart-primary-soft: #16324d;
  --smart-bg: #10161d;
  --smart-text: #e4eaf2;
  --smart-muted: #8b98a9;
  --smart-border: #29333f;
  --smart-line: #212b36;
  --ok: #3fbd77;
  --warn: #e0993f;
  --danger: #e2626f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 46px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] a { color: var(--smart-primary-dark); }
:root[data-theme="dark"] a.btn-smart { color: #fff; }
:root[data-theme="dark"] a.btn-smart.outline { color: var(--smart-primary-dark); }
/* --smart-primary no tema escuro é claro demais pra servir de fundo de botão
   (branco sobre ele dá ~2.3:1); o preenchido usa um azul próprio e legível. */
:root[data-theme="dark"] .btn-smart:not(.outline) { background: #0a6ec4; border-color: #0a6ec4; color: #fff; }
:root[data-theme="dark"] .btn-smart:not(.outline):hover,
:root[data-theme="dark"] .btn-smart:not(.outline):focus { background: #085a9f; border-color: #085a9f; }
:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .entry-card,
:root[data-theme="dark"] .error-card,
:root[data-theme="dark"] .app-footer,
:root[data-theme="dark"] .back-to-top,
:root[data-theme="dark"] .btn-tema,
:root[data-theme="dark"] .editor-modo-btn,
:root[data-theme="dark"] .link-item,
:root[data-theme="dark"] .portal-html .card-resumo,
:root[data-theme="dark"] .portal-html .card-4,
:root[data-theme="dark"] .portal-html .card-2 { background: #17202b; }
:root[data-theme="dark"] .btn-smart.outline { background: #17202b; }
:root[data-theme="dark"] .app-nav a:hover,
:root[data-theme="dark"] .app-nav-link-btn:hover,
:root[data-theme="dark"] .btn-tema:hover,
:root[data-theme="dark"] .link-item:hover,
:root[data-theme="dark"] .ws-menu a.nav-link:hover,
:root[data-theme="dark"] .ws-menu .menu-group-toggle:hover,
:root[data-theme="dark"] .entry-card:hover { background: #1d2733; }
:root[data-theme="dark"] .block-text,
:root[data-theme="dark"] .portal-html { color: #c3ccd8; }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .ws-search input { background: #101820; border-color: var(--smart-border) !important; color: var(--smart-text); }
:root[data-theme="dark"] .entry-icon { background: var(--smart-primary-soft); }
:root[data-theme="dark"] .entry-icon.entry-icon-brand { background: none; }
:root[data-theme="dark"] .table { color: var(--smart-text); }
:root[data-theme="dark"] .table > :not(caption) > * > * { background: transparent; border-color: var(--smart-border); color: var(--smart-text); }
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: #1d2733; }
:root[data-theme="dark"] .notice.info { background: #132a3d; border-color: #1e415c; color: #bcdcff; }
:root[data-theme="dark"] .notice.warn { background: #3a2c0f; border-color: #5c451c; color: #ffd98a; }
:root[data-theme="dark"] .notice.err { background: #3a1418; border-color: #5c2029; color: #ffb3ba; }
:root[data-theme="dark"] .notice.ok { background: #0f3320; border-color: #1c5c37; color: #9be8bb; }
:root[data-theme="dark"] .portal-html .hero,
:root[data-theme="dark"] .portal-html .destaque { background: var(--smart-primary-soft); }
:root[data-theme="dark"] .portal-html .card-4 img,
:root[data-theme="dark"] .portal-html .card-2 img { background: #0c1218; }

/* ---------- lightbox de imagens ---------- */
.portal-html img { cursor: zoom-in; }
.img-lightbox { align-items: center; background: rgba(8, 12, 18, .87); cursor: zoom-out; display: none; inset: 0; justify-content: center; padding: 1.5rem; position: fixed; z-index: 2000; }
.img-lightbox.show { display: flex; }
.img-lightbox img { border-radius: .5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: default; max-height: 100%; max-width: 100%; }
.img-lightbox-close { background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; color: #fff; cursor: pointer; font-size: 1.3rem; height: 2.4rem; line-height: 1; position: absolute; right: 1rem; top: 1rem; width: 2.4rem; }

/* ---------- responsivo ---------- */
@media (max-width: 1050px) {
  .workspace, .workspace.full { grid-template-columns: 1fr; }
  .ws-list { max-height: 22rem; }
  .workspace.full { left: auto; margin-left: 0; margin-right: 0; position: static; right: auto; width: auto; }
  .workspace.full .ws-list { border-bottom: 1px solid var(--smart-border); border-right: 0; height: auto; max-height: 22rem; position: static; top: auto; }
  .portal-html .card-4, .portal-html .card-2 { float: none; width: 100%; }
}

@media (max-width: 640px) {
  body { padding-top: 3.75rem; }
  .app-header-inner { min-height: 3.6rem; padding: 0 .75rem; }
  .app-brand img.brand-mark { height: 1.85rem; }
  .app-nav { gap: .15rem; }
  .app-nav a { padding: .5rem; }
  .app-nav-label { display: none; }
  .app-nav-link-btn { padding: .5rem; }
  .app-nav-user, .app-nav-sep { display: none; }
  .btn-tema { height: 2.1rem; margin-left: .15rem; width: 2.1rem; }
  .container-doc { padding: 0 1rem; }
  .ws-detail { padding: 1.1rem; }
  .panel-body { padding: 1rem; }
  .entry-grid { grid-template-columns: 1fr; }
  .link-item { padding: .8rem 1rem; }
  .portal-html .cards-resumo { grid-template-columns: 1fr; }
}

/* ---------- login ----------
   Dois painéis (institucional + formulário), mesmo vocabulário visual da tela de
   login do SmartProcess (Deal4b.ERP.SmartProcess.Shared/Pages/Login.razor). */
.body-limpo { padding-top: 0; }
.login-page { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.login-brand { background: radial-gradient(900px 600px at 85% -10%, rgba(255, 255, 255, .10), transparent 60%), linear-gradient(160deg, #0a6ec4 0%, #005daa 45%, #003a6b 100%); color: #fff; display: flex; flex-direction: column; overflow: hidden; padding: 2.7rem 3.5rem 2.4rem; position: relative; }
.login-brand-marca-dagua { bottom: -14%; height: auto; opacity: .07; pointer-events: none; position: absolute; right: -8%; width: 46%; }
.login-brand-topo { align-items: center; display: flex; gap: .9rem; position: relative; z-index: 1; }
.login-brand-logo { align-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: .75rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: flex; flex: 0 0 auto; height: 3rem; justify-content: center; width: 3rem; }
.login-brand-logo img { height: 1.75rem; width: auto; }
.login-brand-nome { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.login-brand-mensagem { margin: auto 0; max-width: 30rem; padding: 3rem 0; position: relative; z-index: 1; }
.login-brand-mensagem h1 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; margin: 0 0 1rem; }
.login-brand-mensagem p { color: rgba(255, 255, 255, .85); font-size: 1.05rem; line-height: 1.6; margin: 0; }

.login-form { align-items: center; background: #fff; display: flex; justify-content: center; padding: 2.5rem 1.5rem; position: relative; z-index: 1; }
.login-form-conteudo { max-width: 25rem; width: 100%; }
.login-form-titulo { color: var(--smart-primary-dark); font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .4rem; }
.login-form-subtitulo { color: var(--smart-muted); font-size: .95rem; margin: 0 0 1.6rem; }
.login-form-botao { box-shadow: 0 6px 18px rgba(0, 93, 170, .28); font-size: .95rem; justify-content: center; padding: .8rem 1rem; transition: box-shadow .15s, transform .15s; width: 100%; }
.login-form-botao:hover { box-shadow: 0 8px 22px rgba(0, 93, 170, .38); transform: translateY(-1px); }
.login-form-rodape { border-top: 1px solid var(--smart-border); color: var(--smart-muted); font-size: .75rem; margin-top: 2.2rem; padding-top: 1rem; text-align: center; }
.field-dica { color: var(--smart-muted); display: block; font-size: .78rem; margin-top: .35rem; }

:root[data-theme="dark"] .login-form { background: #17202b; }

@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand { padding: 2rem 1.5rem 3rem; text-align: center; }
  .login-brand-topo { flex-direction: column; gap: .75rem; margin: 0 auto; }
  .login-brand-mensagem { display: none; }
  .login-brand-marca-dagua { bottom: -40%; right: -22%; width: 66%; }
  .login-form { align-items: flex-start; border-radius: 1.4rem 1.4rem 0 0; box-shadow: 0 -8px 26px rgba(0, 0, 0, .12); margin-top: -1.4rem; padding-top: 2.2rem; }
}