/* Framecoder — componentes. Usado pelo portal E pelo brandbook: a documentação é a implementação.
   Só consome tokens (--fw-*). Nenhuma cor é escrita à mão aqui. */
@import url("tokens/framework.tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fw-page); color: var(--fw-text); font: var(--fw-type-body-m); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fw-font-display); color: var(--fw-text); }
h1 { font: var(--fw-type-display-m); letter-spacing: var(--fw-tracking-display); }
h2 { font: var(--fw-type-title-m); letter-spacing: var(--fw-tracking-title); margin-top: var(--fw-space-5); }
h3 { font: 600 15px/1.3 var(--fw-font-display); letter-spacing: -0.01em; }
p { margin: 0 0 var(--fw-space-3); } p:last-child { margin-bottom: 0; }
.muted { color: var(--fw-text-muted); } .small { font: var(--fw-type-body-s); } .right { text-align: right; } .nowrap { white-space: nowrap; }
.tnum, table, .kpi { font-variant-numeric: tabular-nums; }

/* links: texto neutro com sublinhado amarelo; no hover, marca-texto. */
a { color: var(--fw-text); text-decoration: underline; text-decoration-color: var(--fw-link-underline); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: background var(--fw-motion-fast); }
a:hover { background: color-mix(in srgb, var(--fw-accent) 30%, transparent); }
a.plain, .nav a, .btn, .tabs a, .brand-link { text-decoration: none; } a.plain:hover, .nav a:hover, .btn:hover, .tabs a:hover { background: none; }

:focus-visible { outline: 2px solid var(--fw-focus); outline-offset: 2px; border-radius: var(--fw-radius-sm); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--fw-accent); color: var(--fw-on-accent); padding: 8px 12px; border-radius: var(--fw-radius-md); z-index: 99; font-weight: 600; } .skip:focus { left: 8px; }

/* código */
code, .mono, kbd { font-family: var(--fw-font-code); font-size: .92em; }
code, .chip { background: var(--fw-code-bg); color: var(--fw-code-text); padding: 1px 6px; border-radius: var(--fw-radius-xs); }
kbd { border: 1px solid var(--fw-border-strong); border-bottom-width: 2px; border-radius: var(--fw-radius-xs); padding: 0 5px; font-size: .85em; }
.overline { font: var(--fw-type-overline); color: var(--fw-text-muted); letter-spacing: .02em; }
.overline::before { content: "// "; color: var(--fw-text-subtle); }
.term { background: var(--fw-sunken); border: 1px solid var(--fw-border); border-radius: var(--fw-radius-lg); padding: 14px 16px; font: var(--fw-type-code); color: var(--fw-code-text); white-space: pre-wrap; word-break: break-word; margin: 0; }
.term .p { color: var(--fw-accent-text); user-select: none; }
.codebox { background: var(--fw-sunken); border: 1px dashed var(--fw-border-strong); border-radius: var(--fw-radius-md); padding: 12px; font: var(--fw-type-code); word-break: break-all; }
.caret::after { content: ""; display: inline-block; width: .5ch; height: 1.02em; margin-left: .12em; background: var(--fw-accent); vertical-align: -.14em; animation: fw-blink 1.06s steps(1) infinite; }
@keyframes fw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret::after { animation: none; } * { transition-duration: 0ms !important; scroll-behavior: auto !important; } }

.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; } .icon.sm { width: 14px; height: 14px; vertical-align: -2px; } .icon.lg { width: 22px; height: 22px; }

/* botões: UM acento por tela (.accent). Em contextos densos, o botão principal é .primary (neutro sólido). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--fw-radius-md); border: 1px solid var(--fw-border-strong); background: transparent; color: var(--fw-text); font: 600 13.5px/1 var(--fw-font-text); cursor: pointer; transition: background var(--fw-motion-fast), border-color var(--fw-motion-fast), transform var(--fw-motion-fast); white-space: nowrap; }
.btn:hover { background: var(--fw-sunken); } .btn:active { transform: translateY(1px); }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.btn.primary { background: var(--fw-solid); border-color: var(--fw-solid); color: var(--fw-on-solid); } .btn.primary:hover { background: var(--fw-solid); filter: brightness(1.18); }
[data-theme="dark"] .btn.primary:hover { filter: brightness(.9); }
.btn.accent { background: var(--fw-accent); border-color: var(--fw-accent); color: var(--fw-on-accent); } .btn.accent:hover { background: var(--fw-accent); filter: brightness(.94); }
.btn.danger { color: var(--fw-danger-ink); border-color: var(--fw-danger-solid); } .btn.danger:hover { background: var(--fw-danger-bg); }
.btn.quiet { border-color: transparent; color: var(--fw-text-muted); } .btn.quiet:hover { color: var(--fw-text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.icon-only { padding: 0; width: 36px; } .btn.icon-only.sm { width: 28px; }

/* formulários */
label { display: block; font: var(--fw-type-label); letter-spacing: .01em; margin-bottom: 6px; color: var(--fw-text); }
input, select, textarea { width: 100%; min-height: 36px; padding: 8px 10px; font: var(--fw-type-body-m); color: var(--fw-text); background: var(--fw-card); border: 1px solid var(--fw-border-strong); border-radius: var(--fw-radius-md); transition: border-color var(--fw-motion-fast), box-shadow var(--fw-motion-fast); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--fw-sunken); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background: var(--fw-sunken); } }
input::placeholder, textarea::placeholder { color: var(--fw-text-subtle); }
input:hover, select:hover, textarea:hover { border-color: var(--fw-text-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--fw-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fw-focus) 28%, transparent); }
input[type=checkbox], input[type=radio] { width: 16px; min-height: 16px; height: 16px; accent-color: var(--fw-solid); } textarea { min-height: 92px; resize: vertical; }
.field { margin-bottom: var(--fw-space-3); } .field .hint { font: var(--fw-type-body-s); color: var(--fw-text-muted); margin-top: 4px; }
.row { display: flex; gap: var(--fw-space-2); align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .row > select, .row > input:not([type=checkbox]):not([type=radio]) { width: auto; min-width: 170px; max-width: 100%; } .row > .field { margin-bottom: 0; }
.stack > * + * { margin-top: var(--fw-space-3); } .cols2 { display: grid; gap: var(--fw-space-3); grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .cols2 { grid-template-columns: 1fr; } }
.grid { display: grid; gap: var(--fw-space-3); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* superfícies */
.card { background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: var(--fw-radius-lg); padding: var(--fw-space-4); }
.card.hover:hover { border-color: var(--fw-border-strong); }
.card.flat { background: var(--fw-sunken); }

/* selos de estado: sempre ícone + rótulo (nunca cor sozinha) */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--fw-radius-sm); font: 600 11.5px/1.5 var(--fw-font-text); background: var(--fw-sunken); color: var(--fw-text-muted); border: 1px solid var(--fw-border); white-space: nowrap; }
.badge .icon { width: 12px; height: 12px; vertical-align: 0; }
.badge.ok { background: var(--fw-success-bg); color: var(--fw-success-ink); border-color: transparent; }
.badge.warn { background: var(--fw-warning-bg); color: var(--fw-warning-ink); border-color: transparent; }
.badge.bad { background: var(--fw-danger-bg); color: var(--fw-danger-ink); border-color: transparent; }
.badge.info { background: var(--fw-info-bg); color: var(--fw-info-ink); border-color: transparent; }
.badge.accent { background: var(--fw-accent-soft); color: var(--fw-on-accent-soft); border-color: transparent; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--fw-radius-md); border: 1px solid var(--fw-border); background: var(--fw-sunken); font: var(--fw-type-body-m); }
.alert .icon { margin-top: 2px; } .alert.bad { background: var(--fw-danger-bg); border-color: var(--fw-danger-solid); color: var(--fw-danger-ink); } .alert.warn { background: var(--fw-warning-bg); color: var(--fw-warning-ink); border-color: transparent; } .alert.ok { background: var(--fw-success-bg); color: var(--fw-success-ink); border-color: transparent; } .alert.info { background: var(--fw-info-bg); color: var(--fw-info-ink); border-color: transparent; }

/* tabelas */
table { width: 100%; border-collapse: collapse; font: var(--fw-type-body-m); }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--fw-border); vertical-align: top; }
th { font: var(--fw-type-overline); color: var(--fw-text-muted); font-weight: 500; white-space: nowrap; } tbody tr:hover td { background: color-mix(in srgb, var(--fw-sunken) 60%, transparent); }

/* abas */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--fw-border); margin: var(--fw-space-4) 0; flex-wrap: wrap; }
.tabs a { padding: 8px 12px; color: var(--fw-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font: 600 13.5px/1.3 var(--fw-font-text); }
.tabs a:hover { color: var(--fw-text); } .tabs a[aria-current="page"] { color: var(--fw-text); border-bottom-color: var(--fw-indicator); }
.bar { height: 6px; background: var(--fw-border); border-radius: 99px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--fw-indicator); border-radius: 99px; transition: width var(--fw-motion-enter); }
.timeline { list-style: none; margin: 0; padding: 0; } .timeline li { padding: 6px 0 6px 16px; border-left: 2px solid var(--fw-border); font: var(--fw-type-body-m); position: relative; } .timeline li::before { content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 99px; background: var(--fw-card); border: 2px solid var(--fw-border-strong); }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 84px; } .chart i { flex: 1; background: var(--fw-indicator); min-height: 2px; border-radius: 2px 2px 0 0; opacity: .9; }

/* kanban */
.kanban { display: grid; gap: var(--fw-space-3); grid-template-columns: repeat(6, minmax(240px, 1fr)); overflow-x: auto; padding-bottom: var(--fw-space-2); }
.col { background: var(--fw-sunken); border: 1px solid var(--fw-border); border-radius: var(--fw-radius-lg); padding: var(--fw-space-2); min-height: 120px; }
.col > h3 { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 10px; font: var(--fw-type-overline); font-weight: 500; color: var(--fw-text-muted); }
.col .card { padding: 12px; margin-bottom: var(--fw-space-2); }

/* diálogo e avisos */
dialog { border: 1px solid var(--fw-border); border-radius: var(--fw-radius-xl); background: var(--fw-card); color: var(--fw-text); padding: var(--fw-space-5); max-width: min(540px, 92vw); width: 100%; box-shadow: var(--fw-shadow-float); }
dialog::backdrop { background: rgb(8 9 13 / 62%); }
dialog[open] { animation: fw-pop var(--fw-motion-enter); } @keyframes fw-pop { from { opacity: 0; transform: translateY(8px); } }
#toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(400px, 92vw); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--fw-solid); color: var(--fw-on-solid); padding: 10px 14px; border-radius: var(--fw-radius-md); border-left: 3px solid var(--fw-accent); box-shadow: var(--fw-shadow-float); font: var(--fw-type-body-m); animation: fw-pop var(--fw-motion-enter); }
.toast.bad { border-left-color: var(--fw-danger-solid); }

/* ---------- estrutura do aplicativo ---------- */
.app { display: grid; grid-template-columns: var(--fw-sidebar) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--fw-chrome-bg); color: var(--fw-chrome-text); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px 14px; border-right: 1px solid var(--fw-chrome-border); overflow-y: auto; }
.side .logo { display: block; padding: 2px 8px 6px; } .side .logo img { height: 30px; width: auto; display: block; }
.nav-label { font: var(--fw-type-overline); color: var(--fw-chrome-muted); padding: 18px 10px 6px; } .nav-label::before { content: "// "; opacity: .6; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--fw-radius-md); color: var(--fw-chrome-text); font: 500 13.5px/1.2 var(--fw-font-text); position: relative; }
.nav a:hover { background: var(--fw-chrome-hover-bg); color: var(--fw-chrome-text-strong); }
.nav a[aria-current="page"] { background: var(--fw-chrome-active-bg); color: var(--fw-chrome-text-strong); } .nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--fw-chrome-accent); }
.nav a:focus-visible { outline-color: var(--fw-chrome-accent); }
.side .foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--fw-chrome-border); display: flex; flex-direction: column; gap: 10px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--fw-space-3); min-height: 52px; padding: 0 var(--fw-space-6); background: color-mix(in srgb, var(--fw-page) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--fw-border); }
.top .spacer { flex: 1; } .top .user { font: 500 13px/1 var(--fw-font-text); color: var(--fw-text-muted); }
.menu-btn { display: none; }
.content { width: 100%; max-width: 1200px; padding: var(--fw-space-6) var(--fw-space-6) 72px; outline: none; }
.page-head { margin-bottom: var(--fw-space-5); } .page-head p { color: var(--fw-text-muted); margin-top: 6px; max-width: 70ch; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); z-index: 40; transform: translateX(-102%); transition: transform var(--fw-motion-enter); box-shadow: var(--fw-shadow-float); }
  .side.open { transform: none; } .menu-btn { display: inline-flex; } .top { padding: 0 var(--fw-space-4); } .content { padding: var(--fw-space-5) var(--fw-space-4) 64px; }
  .scrim { position: fixed; inset: 0; background: rgb(8 9 13 / 55%); z-index: 35; } 
}

/* ---------- entrada (login) ---------- */
.entry { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 100vh; }
.entry .hero { background: var(--fw-carbon-950); color: var(--fw-carbon-200); position: relative; overflow: hidden; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.entry .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--fw-carbon-700) 1px, transparent 1.4px); background-size: 24px 24px; opacity: .55; mask-image: linear-gradient(120deg, #000 10%, transparent 75%); -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 75%); }
.entry .hero > * { position: relative; }
.entry .hero .big { font: var(--fw-type-display-l); letter-spacing: var(--fw-tracking-display); color: #fff; margin: 0; max-width: 14ch; } .entry .hero .big em { font-style: normal; color: var(--fw-yellow-400); }
.entry .hero .lead { font: var(--fw-type-body-l); color: var(--fw-carbon-300); max-width: 48ch; margin-top: var(--fw-space-4); }
.entry .hero .verbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--fw-space-5); } .entry .hero .verbs span { font: 500 13px/1 var(--fw-font-code); color: var(--fw-carbon-200); border: 1px solid var(--fw-carbon-700); border-radius: var(--fw-radius-sm); padding: 7px 10px; background: color-mix(in srgb, var(--fw-carbon-900) 80%, transparent); } .entry .hero .verbs b { color: var(--fw-yellow-400); font-weight: 500; }
.entry .panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--fw-page); } .entry .panel .box { width: 100%; max-width: 400px; }
@media (max-width: 900px) { .entry { grid-template-columns: 1fr; } .entry .hero { padding: 28px 24px; min-height: 0; gap: 28px; } .entry .hero .big { font-size: 30px; } }

/* entrada: logo à esquerda, respiro sob o título e marca d'água do símbolo (textura, não desenho) */
.entry .hero > img:first-child { align-self: flex-start; }
.entry .hero::after { content: ""; position: absolute; right: -7%; bottom: -10%; width: 66%; aspect-ratio: 1; background: url("logos/framecoder/framecoder-simbolo-mono-branco.svg") no-repeat center / contain; opacity: .045; pointer-events: none; }
.entry .panel .box > .tabs { margin-top: var(--fw-space-3); margin-bottom: var(--fw-space-4); }

/* ritmo vertical da página: seções separadas por 24px; dentro de cartões, 12px */
.content > .stack > * + * { margin-top: var(--fw-space-5); }
.entry .hero p.big { font: var(--fw-type-display-l); letter-spacing: var(--fw-tracking-display); color: #fff; margin: 0; max-width: 14ch; }
.entry .hero p.big em { font-style: normal; color: var(--fw-yellow-400); }
.term { overflow-x: auto; }

.entry .hero .pitch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-space-4); margin-top: var(--fw-space-5); max-width: 62ch; }
.entry .hero .pitch b { font: 600 14px/1.3 var(--fw-font-text); color: #fff; } .entry .hero .pitch p { font: var(--fw-type-body-s); color: var(--fw-carbon-300); margin: 4px 0 0; }
.entry .hero .pitch > div { border-top: 1px solid var(--fw-carbon-700); padding-top: var(--fw-space-3); }
.entry .hero p.big { max-width: 20ch; font-size: 36px; }
@media (max-width: 900px) { .entry .hero .pitch { grid-template-columns: 1fr; } .entry .hero p.big { font-size: 28px; } }

/* ---- admin: KPIs e gráficos -------------------------------------------------- */
.kpis { display: grid; gap: var(--fw-space-3); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.kpis .card { padding: 14px 16px; } .kpis .num { font: 700 28px/1.1 var(--fw-font-display); letter-spacing: -.02em; margin-top: 6px; } .kpis .sub { font: var(--fw-type-body-s); color: var(--fw-text-muted); margin-top: 2px; }
.viz { margin: 0; display: block; } .viz > div { width: 100%; } .viz details { margin-top: 8px; } .viz summary { cursor: pointer; }
.viz svg { width: 100%; height: auto; display: block; }
.radar { max-width: 420px; margin: 0 auto; } .radar .grid-ring, .radar .grid-axis, .daily .grid-axis { fill: none; stroke: var(--fw-border); stroke-width: 1; }
.radar .axis-label { font: 500 11.5px var(--fw-font-code); fill: var(--fw-text); } .radar .ring-label, .daily .ring-label { font: 400 10px var(--fw-font-code); fill: var(--fw-text-muted); }
.radar .series.main { fill: var(--fw-accent-soft); stroke: var(--fw-indicator); stroke-width: 2.2; stroke-linejoin: round; } .radar .series.ref { fill: none; stroke: var(--fw-text-muted); stroke-width: 1.6; stroke-dasharray: 5 4; }
.radar .dot { fill: var(--fw-indicator); stroke: var(--fw-page); stroke-width: 1.5; }
.daily .area { fill: var(--fw-accent-soft); stroke: none; } .daily .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; } .daily .line.main { stroke: var(--fw-indicator); } .daily .line.ref { stroke: var(--fw-text-muted); stroke-dasharray: 5 4; stroke-width: 1.6; }
.legend { display: flex; gap: 16px; justify-content: center; margin-top: 6px; color: var(--fw-text-muted); } .legend .key::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--fw-indicator); vertical-align: middle; margin-right: 6px; } .legend .key.ref::before { border-top: 2px dashed var(--fw-text-muted); }
.bars { display: grid; gap: 8px; } .bar-row { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto; gap: 10px; align-items: center; }
.bar-track { background: var(--fw-sunken); border-radius: 3px; height: 14px; overflow: hidden; display: block; } .bar-track i { display: block; height: 100%; background: var(--fw-indicator); border-radius: 3px; }
.admin-cols { display: grid; gap: var(--fw-space-4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.editor { width: 100%; min-height: 420px; font: var(--fw-type-code); line-height: 1.55; resize: vertical; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.filelist-admin { display: grid; gap: 2px; max-height: 70vh; overflow: auto; } .filelist-admin a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: var(--fw-radius-sm); font: 500 12.5px var(--fw-font-code); color: var(--fw-text); text-decoration: none; } .filelist-admin a[aria-current="true"] { background: var(--fw-sunken); } .filelist-admin a:hover { background: var(--fw-sunken); }
@media (max-width: 700px) { .bar-row { grid-template-columns: 1fr; gap: 2px; } }

.viz .daily .dot { fill: var(--fw-indicator); }