/* Anil — generated from tokens.json */
:root, [data-theme="dark"] {
--blue-600: #0013B7;
--blue-500: #2438E8;
--blue-300: #8F9AFF;
--indigo-700: #1B2585;
--navy-800: #212652;
--ink-850: #1F2133;
--graphite-800: #292A33;
--ink-950: #12131C;
--ink-1000: #0B0C12;
--bg: var(--ink-950);
--surface: var(--ink-850);
--surface-2: var(--graphite-800);
--surface-brand: var(--navy-800);
--border: #2F3245;
--border-strong: #7A7E9A;
--text: #ECEDF5;
--text-muted: #A3A7C0;
--primary: var(--blue-500);
--primary-hover: #3A4DF2;
--on-primary: #FFFFFF;
--primary-text: #9ba4ff; /* um tom acima do blue-300: o item ativo do menu (#8b96fd sobre #2c326b) dava 4,43:1, abaixo dos 4,5:1 do WCAG AA */
--primary-soft: #262C66;
--focus: var(--blue-300);
--success: #4ADE9A;
--success-soft: #16302A;
--warning: #F5B547;
--warning-soft: #3A2E17;
--danger: #FF8A8A;
--danger-soft: #3A1F27;
--info: #7CC4FF;
--info-soft: #1B2C45;
--chart-1: #5B6BFF;
--chart-2: #38C6E8;
--chart-3: #F5B547;
--chart-4: #C792FF;
--chart-5: #9AA0BE;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] {
--bg: #F4F5FA;
--surface: #FFFFFF;
--surface-2: #EEF0F7;
--surface-brand: #E8EAFB;
--border: #E1E4EE;
--border-strong: #7D829C;
--text: var(--ink-850);
--text-muted: #565A74;
--primary: var(--blue-600);
--primary-hover: var(--indigo-700);
--on-primary: #FFFFFF;
--primary-text: var(--blue-600);
--primary-soft: #E6E8FB;
--focus: var(--blue-600);
--success: #0B7A48;
--success-soft: #E3F5EC;
--warning: #9A5B00;
--warning-soft: #FDF1DC;
--danger: #C42B3A;
--danger-soft: #FCE8EA;
--info: #0A63B8;
--info-soft: #E3F0FC;
--chart-1: var(--blue-600);
--chart-2: #0A7FA0;
--chart-3: #C46A00;
--chart-4: #7A3FD0;
--chart-5: #6B7090;
--shadow-sm: 0 1px 2px rgba(31, 33, 51, 0.08);
--shadow-md: 0 4px 12px rgba(31, 33, 51, 0.10);
--shadow-lg: 0 16px 40px rgba(31, 33, 51, 0.16);
}
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-full: 9999px;
--z-sticky: 10;
--z-dropdown: 100;
--z-modal: 1000;
--z-toast: 1100;
--font-sans: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Roboto Mono", ui-monospace, Menlo, monospace;
}
.display { font-family: var(--font-sans); font-size: 36px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 500; }
.h3 { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 500; }
.kpi { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.kpi-sm { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.overline { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(./files/roboto-latin-300-normal.woff2) format('woff2'), url(./files/roboto-latin-300-normal.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(./files/roboto-latin-400-normal.woff2) format('woff2'), url(./files/roboto-latin-400-normal.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(./files/roboto-latin-500-normal.woff2) format('woff2'), url(./files/roboto-latin-500-normal.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(./files/roboto-latin-700-normal.woff2) format('woff2'), url(./files/roboto-latin-700-normal.woff) format('woff');
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(./files/roboto-mono-latin-400-normal.woff2) format('woff2'), url(./files/roboto-mono-latin-400-normal.woff) format('woff');
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(./files/roboto-mono-latin-500-normal.woff2) format('woff2'), url(./files/roboto-mono-latin-500-normal.woff) format('woff');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-display: swap;
font-weight: 800;
src: url(./files/plus-jakarta-sans-latin-800-normal.woff2) format('woff2'), url(./files/plus-jakarta-sans-latin-800-normal.woff) format('woff');
}
/* Anil (contexto/anil-design-system/components/bundle.css) sem os @import do Google Fonts: Roboto e os ícones são hospedados no projeto. */
/* Anil — component styles. Values come from tokens.css (var(--…)). */
html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; }
.an-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.an-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.an-icon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; user-select: none; }
:where(.an-btn, .an-input, .an-tab, .an-nav):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Button */
.an-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.an-btn .an-icon { font-size: 18px; }
.an-btn-sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.an-btn-md { height: 40px; padding: 0 var(--space-4); }
.an-btn-lg { height: 48px; padding: 0 var(--space-6); font-size: 15px; }
.an-btn-primary { background: var(--primary); color: var(--on-primary); }
.an-btn-primary:hover { background: var(--primary-hover); }
.an-btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.an-btn-secondary:hover { background: var(--surface-2); }
.an-btn-ghost { background: transparent; color: var(--primary-text); }
.an-btn-ghost:hover { background: var(--primary-soft); }
.an-btn-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.an-btn-danger:hover { filter: brightness(1.08); }
.an-btn:disabled { opacity: .45; cursor: not-allowed; }
.an-btn-icononly { padding: 0; aspect-ratio: 1; }
/* Input */
.an-field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.an-field-label { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text); }
.an-field-hint { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.an-field-error .an-field-hint { color: var(--danger); }
.an-input-wrap { position: relative; display: flex; align-items: center; }
.an-input-wrap .an-icon { position: absolute; left: 12px; font-size: 18px; color: var(--text-muted); pointer-events: none; }
.an-input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 var(--space-3); font-family: var(--font-sans); font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.an-input::placeholder { color: var(--text-muted); }
.an-input-wrap .an-icon + .an-input { padding-left: 40px; }
.an-field-error .an-input { border-color: var(--danger); }
/* Badge */
.an-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); font-size: 12px; line-height: 16px; font-weight: 500; border-radius: var(--radius-sm); white-space: nowrap; }
.an-badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.an-badge-neutral { background: var(--surface-2); color: var(--text-muted); }
.an-badge-brand { background: var(--primary-soft); color: var(--primary-text); }
.an-badge-success { background: var(--success-soft); color: var(--success); }
.an-badge-warning { background: var(--warning-soft); color: var(--warning); }
.an-badge-danger { background: var(--danger-soft); color: var(--danger); }
.an-badge-info { background: var(--info-soft); color: var(--info); }
/* Card */
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-6); box-sizing: border-box; }
.an-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.an-card-title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: var(--text); }
.an-card-sub { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.an-card-flush { padding: 0; overflow: hidden; }
.an-card-flush .an-card-head { padding: var(--space-5) var(--space-6) 0; }
/* StatCard */
.an-stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 220px; padding: var(--space-5); }
.an-stat-top { display: flex; align-items: center; justify-content: space-between; }
.an-stat-label { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text-muted); }
.an-stat-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-text); }
.an-stat-value { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.an-stat-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.an-delta { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.an-delta .an-icon { font-size: 16px; }
.an-delta-up { color: var(--success); }
.an-delta-down { color: var(--danger); }
.an-delta-cap { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.an-spark { display: block; flex-shrink: 0; }
.an-spark-line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.an-spark-area { fill: var(--chart-1); opacity: .14; }
/* DataTable */
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; }
.an-table th { text-align: left; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); padding: var(--space-3) var(--space-4); white-space: nowrap; }
.an-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.an-table tbody tr:hover td { background: var(--surface-2); }
.an-table .an-num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table .an-mono { font-family: var(--font-mono); color: var(--text-muted); }
/* Tabs */
.an-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--radius-sm); }
.an-tab { height: 32px; padding: 0 var(--space-3); font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-muted); background: transparent; border: 0; border-radius: 3px; cursor: pointer; }
.an-tab:hover { color: var(--text); }
.an-tab[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
/* Alert */
.an-alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-size: 14px; line-height: 20px; }
.an-alert .an-icon { margin-top: 0; }
.an-alert-title { font-weight: 500; color: var(--text); }
.an-alert-body { color: var(--text-muted); font-size: 13px; }
.an-alert-info { background: var(--info-soft); border-color: var(--info); } .an-alert-info > .an-icon { color: var(--info); }
.an-alert-success { background: var(--success-soft); border-color: var(--success); } .an-alert-success > .an-icon { color: var(--success); }
.an-alert-warning { background: var(--warning-soft); border-color: var(--warning); } .an-alert-warning > .an-icon { color: var(--warning); }
.an-alert-danger { background: var(--danger-soft); border-color: var(--danger); } .an-alert-danger > .an-icon { color: var(--danger); }
.an-alert-info .an-alert-title, .an-alert-success .an-alert-title, .an-alert-warning .an-alert-title, .an-alert-danger .an-alert-title { color: inherit; }
.an-alert-info { color: var(--info); } .an-alert-success { color: var(--success); } .an-alert-warning { color: var(--warning); } .an-alert-danger { color: var(--danger); }
.an-alert-body { color: var(--text); }
/* NavItem */
.an-nav { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; cursor: pointer; }
.an-nav:hover { color: var(--text); background: var(--surface-2); }
.an-nav[aria-current="page"] { color: var(--primary-text); background: var(--primary-soft); }
.an-nav-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.an-sidebar { width: 240px; box-sizing: border-box; padding: var(--space-4) var(--space-3); background: var(--surface-brand); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 2px; }
.an-sidebar-group { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: var(--space-3) var(--space-3) var(--space-2); }
/* ProgressBar */
.an-progress { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.an-progress-head { display: flex; justify-content: space-between; font-size: 13px; line-height: 20px; }
.an-progress-label { color: var(--text); font-weight: 500; }
.an-progress-value { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.an-progress-track { height: 8px; background: var(--surface-2); border-radius: var(--radius-xs); overflow: hidden; }
.an-progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-xs); }
.an-progress-success .an-progress-fill { background: var(--success); }
.an-progress-warning .an-progress-fill { background: var(--warning); }
.an-progress-danger .an-progress-fill { background: var(--danger); }
/*
* Extensões do TeMandei sobre o Anil. O Anil define os componentes (Button, Input, Badge, Card, StatCard, DataTable, Tabs,
* Alert, NavItem, ProgressBar, Icon) em components.css; aqui ficam só as peças que o produto precisa e o Anil não traz
* (layout das telas, lista de itens, envio de arquivos, entrada no sistema), escritas com os tokens do Anil e as mesmas
* regras: cantos de 4 px em controles e 6 px em cards, botões nunca em pílula, cor de status sempre com palavra,
* foco com anel sólido, transições de 150 ms e nada de degradê. Antes de criar algo novo, procure no Anil.
*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html[data-theme="dark"], :root:not([data-theme]) { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body { margin: 0; min-height: 100dvh; }
a { color: var(--primary-text); text-underline-offset: 3px; }
a:hover { color: var(--text); }
h1, h2, h3, p { margin: 0; }
h1 { font: 500 28px/36px var(--font-sans); letter-spacing: -0.01em; }
h2 { font: 500 22px/30px var(--font-sans); }
h3 { font: 500 18px/26px var(--font-sans); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; line-height: 20px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { display: inline-flex; flex: none; vertical-align: middle; }
.icon svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* ---------------------------------------------------------------- Button, Input, Badge, Alert */
a.an-btn { text-decoration: none; }
a.an-btn-primary:hover { color: var(--on-primary); }
a.an-btn-secondary:hover, a.an-btn-ghost:hover { color: var(--text); }
a.an-btn-ghost:hover { color: var(--primary-text); }
.an-btn-block { width: 100%; }
.an-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.an-btn .icon { margin-left: -2px; }
.an-btn-ghost.an-btn-link { text-decoration: underline; text-underline-offset: 4px; }
.an-field { min-width: 0; width: 100%; }
.an-input { transition: border-color .15s ease; }
.an-input:hover:not(:focus):not(:disabled) { border-color: var(--text-muted); }
.an-input:focus { border-color: var(--primary); }
.an-input:disabled { opacity: .6; cursor: not-allowed; }
textarea.an-input { height: auto; min-height: 96px; padding: var(--space-3); line-height: 22px; resize: vertical; font-family: var(--font-sans); }
select.an-input { appearance: none; padding-right: 36px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A3A7C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px; }
select.an-input option { background: var(--surface-2); color: var(--text); }
.an-input-wrap > .icon { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
.an-input-wrap > .icon + .an-input { padding-left: 40px; }
.an-input-wrap:focus-within > .icon { color: var(--primary-text); }
.input-addon { display: inline-flex; align-items: center; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface); color: var(--text-muted); font: 500 13px/20px var(--font-mono); }
.input-addon + .an-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 20px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primary); }
.optional { font-weight: 400; color: var(--text-muted); }
.an-badge-dotted::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); text-align: center; }
.empty-state__icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); }
.empty-state h1, .empty-state h3 { font: 500 22px/30px var(--font-sans); }
.empty-state p { max-width: 420px; color: var(--text-muted); }
.an-progress { min-width: 0; }
.an-progress-fill { transition: width .3s ease; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.avatar { width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary-text); font: 500 13px/1 var(--font-sans); letter-spacing: .02em; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.main { min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }
.meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); color: var(--text-muted); font-size: 13px; line-height: 20px; }
.meta > span { display: inline-flex; align-items: center; gap: 6px; }
/* Listas em card (Precisa de você, itens da solicitação) */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); text-decoration: none; color: inherit; transition: background-color .15s ease; }
.rows > li:first-child > .row, .rows > .row:first-child { border-top: 0; }
a.row:hover { background: var(--surface-2); color: inherit; }
.row .note { margin-top: 6px; }
.row .file-list { margin-top: 6px; }
@media (max-width: 640px) { .row { flex-wrap: wrap; row-gap: var(--space-2); padding: var(--space-3) var(--space-4); } .row .an-badge { margin-left: 40px; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.steps > li { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); counter-increment: step; }
.steps > li::before { content: counter(step); width: 24px; height: 24px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); font: 500 13px/1 var(--font-sans); }
.steps strong { font: 500 15px/22px var(--font-sans); }
/* Itens de uma solicitação, anotações, envio de arquivos */
.item-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .15s ease; }
.item-card h3 { font: 500 16px/24px var(--font-sans); }
.item-card__bar { display: flex; justify-content: space-between; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.item-card--ok { border-color: var(--success); }
.item-card--fix { border-color: var(--danger); }
.item-card__tags { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); align-items: center; color: var(--text-muted); font-size: 13px; line-height: 20px; }
.item-card__tags .icon { margin-right: 3px; }
.note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; }
.note--fix { background: var(--danger-soft); color: var(--danger); }
.note--muted { background: var(--surface-2); color: var(--text-muted); }
.note .icon { margin-top: 1px; }
.note strong { font-weight: 500; }
.done-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--success); background: var(--success-soft); color: var(--success); font-size: 14px; line-height: 20px; }
.done-banner strong { display: block; font: 500 16px/24px var(--font-sans); margin-bottom: 2px; }
.done-banner--info { border-color: var(--info); background: var(--info-soft); color: var(--info); }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.file-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.file-row .icon { color: var(--primary-text); }
.file-row__name { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; font: 400 13px/20px var(--font-mono); overflow-wrap: anywhere; }
.file-row__size { color: var(--text-muted); font: 400 12px/16px var(--font-mono); }
.file-row__error { color: var(--danger); flex: 1 1 100%; }
.file-row--job { flex-wrap: wrap; background: var(--surface); border-style: dashed; border-color: var(--border-strong); }
.file-row--job .an-progress { flex: 1 1 100%; }
.file-row--error { border-color: var(--danger); background: var(--danger-soft); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.dropzone--over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone--compact { padding: 0; border: 0; background: transparent; align-items: stretch; }
.dropzone--compact .dropzone__actions { justify-content: flex-start; }
.dropzone__hint { color: var(--text-muted); font-size: 13px; line-height: 20px; }
.dropzone__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: transparent; color: var(--text-muted); font: 500 14px/20px var(--font-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; border-radius: var(--radius-sm); }
.link-btn:hover { color: var(--text); }
.skeleton { border-radius: var(--radius-md); background: var(--surface-2); animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* ---------------------------------------------------------------- Página do cliente final */
.client-page { max-width: 640px; margin: 0 auto; padding: var(--space-5) var(--space-4) 64px; display: flex; flex-direction: column; gap: var(--space-4); }
.topbar { display: flex; align-items: center; gap: var(--space-3); }
.topbar__text { display: flex; flex-direction: column; min-width: 0; }
.topbar__name { font: 500 15px/22px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.topbar__brand { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 16px/24px var(--font-sans); }
.client-footer { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-muted); font-size: 13px; line-height: 20px; text-align: center; padding-top: var(--space-2); }
.an-progress-track, .an-progress-fill { display: block; }
/* ---------------------------------------------------------------- Página do cliente final: fluxo guiado */
.topbar__brand--solo { margin-left: 0; }
.skeleton--hero { height: 280px; }
.skeleton--list { height: 240px; }
.deadline { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font: 500 13px/20px var(--font-sans); background: var(--surface-2); color: var(--text); }
.deadline--soon { background: var(--warning-soft); color: var(--warning); }
.deadline--late { background: var(--danger-soft); color: var(--danger); }
.deadline .icon { flex: none; }
.checklist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.checklist__head h2 { font: 500 16px/24px var(--font-sans); }
.checklist__rows { list-style: none; margin: 0; padding: 0; }
.checklist__rows > li + li .check-row { border-top: 1px solid var(--border); }
.check-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--space-5); border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.check-row:hover { background: var(--surface-2); }
.check-row > .icon:last-child { color: var(--text-muted); }
.check-row__icon { width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-muted); }
.check-row__icon--ok { background: var(--success-soft); color: var(--success); }
.check-row__icon--fix { background: var(--danger-soft); color: var(--danger); }
.check-row__icon--muted { background: var(--surface-2); color: var(--text-muted); }
.check-row__icon--todo { background: var(--primary-soft); color: var(--primary-text); }
.check-row__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.check-row__title { font: 500 15px/22px var(--font-sans); overflow-wrap: anywhere; }
.check-row__sub { font-size: 13px; line-height: 20px; color: var(--text-muted); }
.check-row--fix .check-row__sub { color: var(--danger); font-weight: 500; }
.checklist--optional { background: transparent; box-shadow: none; }
.checklist--optional .checklist__head { background: transparent; }
.step__optional { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: 13px; line-height: 20px; }
.item-card--guided { padding: var(--space-6); gap: var(--space-4); }
.item-card--guided h3 { font: 500 22px/30px var(--font-sans); letter-spacing: -0.01em; }
.how-to { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info); }
.how-to .icon { margin-top: 1px; }
.how-to strong { display: block; font: 500 13px/20px var(--font-sans); }
.how-to p { color: var(--text); font-size: 14px; line-height: 22px; }
.checklist__head > span { white-space: nowrap; }
.item-card__tags:empty { display: none; }
.avatar--t1 { background: var(--info-soft); color: var(--info); }
.avatar--t2 { background: var(--success-soft); color: var(--success); }
.avatar--t3 { background: var(--warning-soft); color: var(--warning); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.choice__btn { height: 56px; font-size: 16px; }
.choice__btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* ---------------------------------------------------------------- Etapas da página do cliente: textos */
.roadmap { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.roadmap__title { font: 500 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.roadmap ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: r; }
.roadmap li { position: relative; display: flex; flex-direction: column; padding-left: 36px; counter-increment: r; }
.roadmap li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); font: 500 13px/1 var(--font-sans); }
.roadmap strong { font: 500 15px/22px var(--font-sans); }
.roadmap li span { font-size: 13px; line-height: 20px; color: var(--text-muted); }
.preview { list-style: none; margin: 0; padding: var(--space-2) 0; display: flex; flex-direction: column; border-block: 1px solid var(--border); }
.preview li { display: flex; align-items: center; gap: var(--space-3); padding: 6px 0; font-size: 14px; line-height: 20px; }
.preview .icon { color: var(--primary-text); flex: none; }
.preview__more { color: var(--text-muted); padding-left: 30px !important; }
.how-to--tip { background: var(--surface-2); color: var(--text-muted); }
.how-to--tip strong { display: inline; color: var(--text); font-size: 14px; }
.fixes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fixes li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft); }
.fixes strong { font: 500 15px/22px var(--font-sans); }
.fixes span { font-size: 14px; line-height: 20px; color: var(--danger); }
/* Correção pedida: tem que saltar aos olhos, mesmo com os obrigatórios todos enviados */
.progress-alert { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--danger); font: 500 14px/20px var(--font-sans); }
.done-banner--fix { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.checklist--fix { border-color: var(--danger); }
.checklist--fix .checklist__head { background: var(--danger-soft); }
/* ---------------------------------------------------------------- Página do cliente: fita de etapas em tela cheia */
/* A página nunca rola: topo + indicador + fita (a única parte flexível) + barra de ações. Só uma etapa comprida rola por dentro. */
.client-page--steps { max-width: 560px; height: 100vh; height: 100dvh; padding: 0; gap: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: clip; }
.client-page--steps > .topbar { padding: var(--space-3) var(--space-4) var(--space-2); }
.client-page--steps > .topbar .avatar { width: 32px; height: 32px; }
@media (min-width: 600px) { .client-page--steps { border-inline: 1px solid var(--border); background: var(--bg); } }
@media (max-height: 700px) { .client-page--steps .topbar__sub { display: none; } .client-page--steps > .topbar { padding-block: var(--space-2); } }
app-track { display: block; position: relative; min-height: 0; overflow: clip; }
app-indicator, app-actions { display: block; }
app-story, app-item-panel, app-summary { display: flex; flex-direction: column; gap: var(--space-4); }
/* Indicador: três blocos, tocar abre a folha */
.steps-indicator { display: flex; align-items: center; gap: var(--space-1); width: 100%; padding: var(--space-1) var(--space-3) var(--space-2) var(--space-4); border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.steps-indicator > .icon { flex: none; color: var(--text-muted); }
.steps-indicator__blocks { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.block { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 8px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.block--on { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.block__name { font: 500 13px/18px var(--font-sans); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block--on .block__name { color: var(--text); }
.block__sub { font-size: 11px; line-height: 16px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block__sub--fix { color: var(--danger); font-weight: 500; }
.block__segs { display: flex; align-items: center; gap: 3px; height: 6px; margin-top: 2px; }
.seg { flex: 1 1 0; min-width: 3px; height: 4px; border-radius: var(--radius-full); background: var(--border-strong); transition: background-color .2s ease, height .2s ease; }
.seg--ok { background: var(--success); }
.seg--fix { background: var(--danger); }
.seg--cur { background: var(--primary); }
.seg--on { height: 6px; }
.steps-indicator:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-sm); }
/* A fita: cada etapa ocupa a tela inteira e desliza para o lado */
.track__strip { display: flex; height: 100%; transition: transform .32s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.track__panel { flex: 0 0 100%; min-width: 0; height: 100%; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-6); }
.track__panel > * { flex-shrink: 0; }
.track__panel [data-panel-title]:focus { outline: none; }
.track__toast { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--success-soft); border: 1px solid var(--success); color: var(--success); font: 500 14px/20px var(--font-sans); box-shadow: var(--shadow-md); }
app-track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .track__strip, .seg { transition: none; } }
/* Barra de ações fixa */
.actions-bar { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); }
.actions-bar__back { flex: none; width: 48px; padding: 0; }
.actions-bar__main { flex: 1; min-width: 0; }
/* Etapas de texto (boas-vindas, explicações, fim dos obrigatórios) */
.story__icon { width: 52px; height: 52px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); }
.story__icon--ok { background: var(--success-soft); color: var(--success); }
.story__icon--warn { background: var(--warning-soft); color: var(--warning); }
.story__icon--fix { background: var(--danger-soft); color: var(--danger); }
.story__eyebrow { font: 500 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); margin-bottom: calc(var(--space-2) * -1); }
app-story h1, app-summary h1 { font: 500 26px/34px var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.story__text { color: var(--text-muted); font-size: 15px; line-height: 24px; }
.story__note { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: 13px; line-height: 20px; }
.story__note .icon { flex: none; }
.topbar__logo { flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: contain; background: #fff; }
.story__text strong { color: var(--text); font-weight: 500; }
.story__skip { align-self: flex-start; }
.summary__head { display: flex; flex-direction: column; gap: var(--space-2); }
.summary__title { font: 500 15px/22px var(--font-sans); }
/* Folha com todas as etapas */
.sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, .55); animation: fade-in .2s ease; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-modal) + 1); max-width: 560px; max-height: 82dvh; margin: 0 auto; display: flex; flex-direction: column; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; box-shadow: var(--shadow-lg); animation: sheet-up .28s cubic-bezier(.2, 0, 0, 1); padding-bottom: env(safe-area-inset-bottom); }
.sheet__grip { align-self: center; width: 36px; height: 4px; margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--border-strong); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4) var(--space-2); }
.sheet__head h2 { font: 500 18px/26px var(--font-sans); }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-4); }
.sheet__group h3 { padding: var(--space-3) var(--space-4) var(--space-1); font: 500 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.check-row--compact { min-height: 56px; padding: var(--space-2) var(--space-4); }
.check-row--compact .check-row__icon { width: 32px; height: 32px; }
.check-row--current { background: var(--primary-soft); }
.sheet__here { font: 500 12px/16px var(--font-sans); color: var(--primary-text); white-space: nowrap; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop { animation: none; } }
/* Telas baixas (celular pequeno, teclado aberto): menos respiro, mesmo conteúdo */
.client-page--steps .item-card--guided { padding: var(--space-5); gap: var(--space-3); }
@media (max-height: 700px) { .track__panel { padding-top: var(--space-2); gap: var(--space-3); } .client-page--steps .item-card--guided { padding: var(--space-4); } .story__icon, .story__eyebrow, app-story .preview, app-story .roadmap li span, .client-page--steps .dropzone__hint { display: none; } app-story .roadmap { padding: var(--space-3) var(--space-4); } }
/* ---------------------------------------------------------------- Explicação do item e opções de "não se aplica" */
.how-to__steps { margin: var(--space-1) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text); font-size: 14px; line-height: 22px; }
.how-to__steps li::marker { color: var(--info); font-weight: 500; }
.how-to__example { margin-top: var(--space-2); color: var(--text-muted); font-size: 13px; line-height: 20px; }
.how-to__label { color: var(--info); font-weight: 500; }
.why { padding: 0 var(--space-1); }
.why summary { display: flex; align-items: center; gap: var(--space-2); width: fit-content; padding: var(--space-1) 0; color: var(--text-muted); font: 500 14px/20px var(--font-sans); cursor: pointer; list-style: none; border-radius: var(--radius-sm); }
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s ease; }
.why[open] summary::before { transform: rotate(45deg); }
.why summary:hover { color: var(--text); }
.why p { margin-top: var(--space-1); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 22px; }
.na { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.na__title { font: 500 13px/20px var(--font-sans); color: var(--text-muted); }
.na__cancel { align-self: flex-start; }
.reason-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reason-chip { min-height: 44px; padding: 8px var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--text); font: 500 14px/20px var(--font-sans); text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.reason-chip:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.reason-chip:disabled { opacity: .6; cursor: default; }
.reason-chip--other { border-style: dashed; color: var(--text-muted); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Campo de arquivo (importar planilha): o botão nativo com o visual do sistema */
.an-input[type="file"] { height: auto; padding: 6px var(--space-3); color: var(--text-muted); cursor: pointer; }
.an-input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: 6px var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 500 13px/20px var(--font-sans); cursor: pointer; transition: background-color .15s ease; }
.an-input[type="file"]::file-selector-button:hover { background: var(--surface-2); }
/* ---------------------------------------------------------------- Solicitação: itens, arquivos, janelas */
.an-btn-success { background: var(--success); border-color: var(--success); color: var(--bg); }
.an-btn-success:hover:not(:disabled) { filter: brightness(1.08); }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.viewer { display: flex; align-items: center; justify-content: center; min-height: 40vh; border-radius: var(--radius-sm); background: var(--surface-2); overflow: auto; }
.viewer img { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }
.pick { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Marca TeMandei (logomarca V1, contexto/TeMandei — Logomarca.pdf): símbolo "documento conferido" + o nome em Plus Jakarta Sans ExtraBold,
espaçamento -4,5%, "Te" na cor principal e "Mandei" em tinta. O texto do site continua em Roboto. Uso:
TeMandei
O tamanho vem do font-size do pai: símbolo = 1,5 x, vão = 0,32 x. As cores seguem o tema (claro: azul e tinta; escuro: lilás e branco). */
:root, [data-theme="dark"] {
--logo-te: #9EA5FF;
--logo-ink: #FFFFFF;
--brand-orange: #F26B1D; /* Laranja Recado: o toque leve do nome (a dobra do documento); use em detalhes, nunca como cor de botão */
}
[data-theme="light"] {
--logo-te: #0013B7;
--logo-ink: #11132B;
}
.logo { display: inline-flex; align-items: center; gap: 0.32em; font: 800 1em/1 "Plus Jakarta Sans", var(--font-sans); letter-spacing: -0.045em; color: var(--logo-ink); white-space: nowrap; }
.logo__mark { flex: none; width: 1.5em; height: 1.5em; background: center / contain no-repeat; }
/* mark:start (gerado por tools/gen-brand.mjs, igual a icon.svg e icon-dark.svg) */
.logo__mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='1024' height='1024'%3E%3Crect width='1024' height='1024' rx='245' fill='%233D4AFF'/%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M327 208H576L753 382V793Q753 847 699 847H327Q273 847 273 793V262Q273 208 327 208Z'/%3E%3Cpath fill='%23F26B1D' d='M576 208L753 382H642A66 66 0 0 1 576 316Z'/%3E%3Cpath fill='none' stroke='%233D4AFF' stroke-width='80' stroke-linecap='round' stroke-linejoin='round' d='M393 576L487 671L656 486'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="light"] .logo__mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='1024' height='1024'%3E%3Crect width='1024' height='1024' rx='245' fill='%230013B7'/%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M327 208H576L753 382V793Q753 847 699 847H327Q273 847 273 793V262Q273 208 327 208Z'/%3E%3Cpath fill='%23F26B1D' d='M576 208L753 382H642A66 66 0 0 1 576 316Z'/%3E%3Cpath fill='none' stroke='%230013B7' stroke-width='80' stroke-linecap='round' stroke-linejoin='round' d='M393 576L487 671L656 486'/%3E%3C/g%3E%3C/svg%3E"); }
/* mark:end */
.logo__te { color: var(--logo-te); }
/* Estilos que só o painel do escritório usa: nenhum seletor aqui acerta algo da página do cliente, que por isso não
* carrega este arquivo (orçamento de tamanho, ADR 0021). Estilo novo do painel entra aqui; o que as duas telas usam
* fica em extensions.css. */
.an-field--grow { flex: 1 1 260px; }
.an-input-sm { height: 32px; }
.an-input-code { font: 500 22px/1 var(--font-mono); letter-spacing: .3em; text-align: center; }
.an-field-hint-error { color: var(--danger); }
.check--inline { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; cursor: pointer; }
.check--inline input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.badge-list { display: flex; flex-wrap: wrap; gap: 6px; }
.an-alert { align-items: flex-start; }
.an-alert::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat; }
.an-alert-danger { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M479.98-280q14.02 0 23.52-9.48t9.5-23.5q0-14.02-9.48-23.52t-23.5-9.5q-14.02 0-23.52 9.48t-9.5 23.5q0 14.02 9.48 23.52t23.5 9.5ZM453-433h60v-253h-60v253Zm27.27 353q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z'/%3E%3C/svg%3E"); }
.an-alert-success { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m421-298 283-283-46-45-237 237-120-120-45 45 165 166Zm59 218q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z'/%3E%3C/svg%3E"); }
.an-alert-warning { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M40-120l440-760 440 760H40Zm104-60h672L480-760 144-180Zm340-56q12.75 0 21.38-8.63Q514-253.25 514-266q0-12.75-8.62-21.38Q496.75-296 484-296t-21.37 8.62Q454-278.75 454-266t8.63 21.37Q471.25-236 484-236Zm-30-120h60v-200h-60v200Zm26-100Z'/%3E%3C/svg%3E"); }
.an-alert-info { --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M453-280h60v-240h-60v240Zm26.98-314q14.02 0 23.52-9.2T513-626q0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52 9.78Q447-640.45 447-626q0 13.6 9.48 22.8 9.48 9.2 23.5 9.2Zm.29 514q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z'/%3E%3C/svg%3E"); }
.an-alert-body { color: var(--text); font-size: 14px; }
/* ----------------------------------------------------------------- Card, StatCard, DataTable */
.an-card-head h2, .an-card-head h3 { font: 500 18px/26px var(--font-sans); }
.card-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.an-card-flush > .an-card-head { padding: var(--space-5) var(--space-6); margin-bottom: 0; border-bottom: 1px solid var(--border); align-items: center; }
a.an-stat { text-decoration: none; color: inherit; transition: border-color .15s ease, background-color .15s ease; }
a.an-stat:hover { border-color: var(--border-strong); background: var(--surface-2); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.an-stat { min-width: 0; }
.an-stat-danger .an-stat-icon { background: var(--danger-soft); color: var(--danger); }
.an-stat-danger .an-stat-value { color: var(--danger); }
.an-stat-warning .an-stat-icon { background: var(--warning-soft); color: var(--warning); }
.an-stat-info .an-stat-icon { background: var(--info-soft); color: var(--info); }
.an-stat-success .an-stat-icon { background: var(--success-soft); color: var(--success); }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.an-table-wrap.an-card { padding: 0; overflow-x: auto; }
.an-table a { color: var(--text); font-weight: 500; text-decoration: none; }
.an-table a:hover { color: var(--primary-text); text-decoration: underline; }
.an-table td { white-space: normal; }
.an-table th, .an-table td { vertical-align: middle; }
.cell-person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cell-progress { display: flex; align-items: center; gap: var(--space-3); min-width: 140px; }
.cell-progress .an-progress { min-width: 60px; flex: 1; }
.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
/* ------------------------------------------------------------------------ Tabs, NavItem, ProgressBar */
.an-tabs { flex-wrap: wrap; }
.an-tab { transition: background-color .15s ease, color .15s ease; }
.an-tab[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.an-tab:disabled { opacity: .45; cursor: not-allowed; }
/* ---------------------------------------------------------------- Layout do painel */
.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
.an-sidebar { position: sticky; top: 0; height: 100dvh; width: auto; border-radius: 0; padding: var(--space-5) var(--space-3); gap: 2px; border-right: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3) var(--space-4); font: 700 20px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.an-nav .icon { flex: none; }
.an-nav { transition: background-color .15s ease, color .15s ease; }
.user-card { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.user-card__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.user-card__name { font: 500 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card__role { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.user-card__actions { display: flex; gap: 2px; }
.avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.topbar-m, .drawer-close, .menu-backdrop { display: none; }
@media (max-width: 860px) {
.app-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
/* barra do topo: menu, marca e iniciais; fica visível ao rolar */
.topbar-m { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-2); height: 56px; padding: 0 var(--space-3); background: var(--surface-brand); border-bottom: 1px solid var(--border); }
.topbar-m .icon-btn { width: 44px; height: 44px; }
.topbar-m .brand { padding: 0; margin-right: auto; font-size: 18px; }
/* o menu vira gaveta: fora da tela e do foco quando fechada, por cima de tudo quando aberta */
.an-sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--z-modal); width: min(300px, 86vw); height: 100dvh; padding: var(--space-5) var(--space-3); border-right: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.app-shell--menu .an-sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
.menu-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(8, 10, 30, .55); }
.drawer-close { display: grid; position: absolute; top: var(--space-3); right: var(--space-3); width: 44px; height: 44px; }
.an-nav { height: 44px; }
.bulk-bar { top: 64px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .an-sidebar, .app-shell--menu .an-sidebar { transition: none; } }
.page { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-8) 64px; display: flex; flex-direction: column; gap: var(--space-6); }
.page--narrow { max-width: 680px; }
@media (max-width: 860px) { .page { padding: var(--space-5) var(--space-4) 48px; } }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.page-header__text { display: flex; flex-direction: column; gap: var(--space-1); }
.page-header h1, .hero h1 { font: 500 36px/44px var(--font-sans); letter-spacing: -0.02em; }
@media (max-width: 640px) { .page-header h1, .hero h1 { font-size: 28px; line-height: 36px; } }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.eyebrow { font: 500 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.narrow { max-width: 640px; }
@media (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: var(--space-4); } }
.back-link { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/20px var(--font-sans); color: var(--text-muted); text-decoration: none; }
.back-link:hover { color: var(--text); }
.card-title { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; }
.card-title h2 { font: 500 18px/26px var(--font-sans); }
.row--top { align-items: flex-start; }
.row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.row__title { font: 500 15px/22px var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.row__sub { font-size: 13px; line-height: 20px; color: var(--text-muted); overflow-wrap: anywhere; }
.row__action { display: inline-flex; align-items: center; gap: 2px; color: var(--primary-text); font: 500 14px/20px var(--font-sans); white-space: nowrap; }
.row__index { width: 24px; height: 24px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-muted); font: 500 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .row__main { flex: 1 1 calc(100% - 52px); } .row__action { margin-left: auto; } }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline > li { position: relative; display: grid; grid-template-columns: 16px 1fr auto; gap: var(--space-3); padding: 0 0 var(--space-4); font-size: 14px; line-height: 20px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before { content: ""; position: absolute; left: 3.5px; top: 14px; bottom: 0; width: 1px; background: var(--border); }
.timeline > li:last-child::before { display: none; }
.timeline__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: var(--radius-full); background: var(--text-muted); position: relative; z-index: 1; }
.timeline__dot--ok { background: var(--success); }
.timeline__dot--info { background: var(--info); }
.timeline__dot--warn { background: var(--warning); }
.timeline__when { font: 400 13px/20px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.summary-list { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.summary-list > div { display: flex; flex-direction: column; gap: 4px; }
.summary-list dt { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font: 500 12px/16px var(--font-sans); }
.summary-list dd { margin: 0; font: 500 15px/22px var(--font-sans); overflow-wrap: anywhere; }
.summary-list dd .text-sm { font-weight: 400; }
.copy-box { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.copy-box code { font: 400 13px/20px var(--font-mono); word-break: break-all; flex: 1 1 240px; color: var(--text); }
.code-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); }
.code-grid span { font: 400 14px/20px var(--font-mono); letter-spacing: .04em; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: 6px; min-height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.chips:focus-within { border-color: var(--primary); outline: 2px solid var(--focus); outline-offset: 2px; }
.chips input { flex: 1 1 120px; min-width: 120px; border: 0; outline: none; background: transparent; font: 400 14px/20px var(--font-sans); color: var(--text); height: 28px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-text); font: 500 13px/20px var(--font-sans); }
.chip button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 20px; height: 20px; border-radius: var(--radius-xs); font-size: 16px; line-height: 1; }
.chip button:hover { background: var(--surface-2); }
/* ---------------------------------------------------------------- Entrada no sistema */
.auth-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-8) var(--space-4); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.auth-page__brand { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 28px/36px var(--font-sans); letter-spacing: -0.01em; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.auth-page__brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.auth-brand__tag { max-width: 360px; color: var(--text-muted); text-wrap: balance; }
.auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-5); box-shadow: var(--shadow-md); }
.auth-card__header { display: flex; flex-direction: column; gap: var(--space-1); }
.auth-card__header h1 { font: 500 28px/36px var(--font-sans); letter-spacing: -0.01em; }
.auth-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); width: 100%; max-width: 640px; }
.auth-points > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.auth-points .icon-circle { width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); }
@media (max-width: 560px) { .auth-points { grid-template-columns: 1fr; } .auth-points > div { flex-direction: row; text-align: left; } }
.an-progress--thin .an-progress-track { height: 4px; }
/* ---------------------------------------------------------------- Alinhamento dos campos e senha com "olho" */
/* A dica fica sempre ABAIXO do controle: assim, em campos lado a lado, os rótulos e os controles alinham com ou sem dica. */
.an-field > .an-field-hint { order: 1; }
.grid-2, .grid-3 { align-items: start; }
/* Item solto ao lado de campos (checkbox, botão): alinha com o controle, abaixo do rótulo (20px de rótulo + 6px de espaço). */
.field-aside { align-self: start; margin-top: 26px; }
.check--inline.field-aside { min-height: 40px; }
.field-aside--stack { margin-top: 34px; }
.reminder-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: start; }
.reminder-row__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.an-field > .field-extra { order: 2; }
@media (max-width: 700px) { .reminder-row { grid-template-columns: 1fr; } .field-aside, .field-aside--stack { margin-top: 0; } .field-aside.an-btn { justify-self: start; } }
/* Campo de etiquetas com a mesma altura dos demais campos */
.chips { box-sizing: border-box; min-height: 40px; padding: 4px 6px; }
.chips input { height: 26px; }
/* Senha com o "olho" (mostrar/esconder) */
.an-input-wrap--toggle .an-input { padding-right: 44px; }
.input-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.header-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
@media (max-width: 700px) { .header-side { align-items: flex-start; } }
/* A seção dos itens é um bloco à parte: cabeçalho próprio com as ações da solicitação, e cada item é um cartão de conferência */
.req-items { margin-top: var(--space-6); }
.req-items__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.req-items__title h2 { font: 500 20px/28px var(--font-sans); }
.req-items__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.req-items__conclude { box-shadow: var(--shadow-md); }
.text-info { color: var(--info); font-weight: 500; }
.req-items__list { list-style: none; margin: 0; padding: 0; }
.req-item { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); }
.req-item:first-child { border-top: 0; }
.req-item--ok { box-shadow: inset 3px 0 0 var(--success); }
.req-item--fix { box-shadow: inset 3px 0 0 var(--danger); }
.req-item__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.req-item__title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
.req-item__body, .req-item__foot, .req-item__fix { margin-left: 36px; }
.req-item__body { display: flex; flex-direction: column; gap: var(--space-2); }
.req-item__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.req-item__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.req-item__hint--ok { color: var(--success); }
.req-item__hint--fix { color: var(--danger); }
.req-item__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.req-item__fix { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); }
.req-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.req-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.req-file__kind { flex: none; min-width: 46px; padding: 4px 6px; border-radius: var(--radius-xs); background: var(--primary-soft); color: var(--primary-text); font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-align: center; }
/* Ícones coloridos dentro de botões: só o desenho muda, o texto segue o padrão. Cores do tema (contraste garantido nos dois modos). */
.ico-info { color: var(--info); }
.ico-warning { color: var(--warning); }
.ico-success { color: var(--success); }
.ico-danger { color: var(--danger); }
.ico-primary { color: var(--primary-text); }
.req-file__kind--pdf { background: var(--danger-soft); color: var(--danger); }
.req-file__kind--imagem { background: var(--info-soft); color: var(--info); }
.req-file__kind--planilha { background: var(--success-soft); color: var(--success); }
.req-file__kind--dados { background: var(--warning-soft); color: var(--warning); }
.req-file__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.req-file__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/20px var(--font-sans); }
.req-file__meta { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.req-file__actions { display: flex; flex: none; gap: var(--space-1); }
@media (max-width: 700px) { .req-items__head, .req-item { padding-inline: var(--space-4); } .req-item__body, .req-item__foot, .req-item__fix { margin-left: 0; } .req-file { flex-wrap: wrap; } .req-file__actions { width: 100%; justify-content: flex-end; } .req-items__actions, .req-items__actions .an-btn { width: 100%; } .req-item__buttons { width: 100%; margin-left: 0; } .req-item__buttons .an-btn { flex: 1; } }
/* Janela modal (sobre o