/*! krv-ui v1 — design system do ecossistema KRV/Larke
* Fonte de verdade: extraído do krv-site (next/app/globals.css + next/tailwind.config.js).
* Consumo (apps estáticos/vanilla/Supabase/Python):
*
* Tema de cor por marca (KRV é o padrão):
* KRV — vermelho (site + ferramentas)
* Calculadora
* Larke (corporativo)
* simulador-caixa
*/
/* ---- Fontes (SELF-HOST, offline-safe nos apps nginx; OFL) — subsets latin + latin-ext ----
* .woff2 em https://larke.com.br/ui/v1/fonts/ (Bricolage Grotesque + Instrument Sans,
* variáveis). URL ABSOLUTA de propósito: o path relativo /ui/v1/fonts/ resolvia contra o
* origin do consumidor quando o CSS é bundlado (Vite/Next em krv-calculadora, krv-site,
* nova) e dava 404 silencioso. Sem dependência de Google Fonts em runtime.
* font-display:swap → fallback de sistema enquanto carrega. */
@font-face{font-family:'Bricolage Grotesque';font-weight:500 800;font-style:normal;font-display:swap;src:url('https://larke.com.br/ui/v1/fonts/BricolageGrotesque-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-weight:500 800;font-style:normal;font-display:swap;src:url('https://larke.com.br/ui/v1/fonts/BricolageGrotesque-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-weight:400 700;font-style:normal;font-display:swap;src:url('https://larke.com.br/ui/v1/fonts/InstrumentSans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-weight:400 700;font-style:normal;font-display:swap;src:url('https://larke.com.br/ui/v1/fonts/InstrumentSans-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* >>> tokens GERADOS — não editar (fonte: tokens.json, build/generate.mjs) >>> */
/* ---- Tokens (tema KRV padrão) ---- */
:root{
--krv-brand:#E0040B;
--krv-brand-dark:#B5030A;
--krv-brand-soft:#FFF1F1;
--krv-brand-ink:#B5030A;
--krv-on-brand:#ffffff;
--krv-accent:#E0040B;
--krv-ink:#15171C;
--krv-ink-soft:#3A3E47;
--krv-ink-mute:#6B6F78;
--krv-paper:#F6F4EF;
--krv-paper-alt:#ECE9E1;
--krv-paper-line:#D8D4C9;
--krv-wa:#1FAF5A;
--krv-ok:#15803d;
--krv-ok-soft:#dcfce7;
--krv-ok-ink:#166534;
--krv-on-ok:#ffffff;
--krv-warn:#b45309;
--krv-warn-soft:#fef3c7;
--krv-warn-ink:#92400e;
--krv-on-warn:#ffffff;
--krv-danger:#b91c1c;
--krv-danger-soft:#fee2e2;
--krv-danger-ink:#991b1b;
--krv-on-danger:#ffffff;
--krv-info:#1d4ed8;
--krv-info-soft:#dbeafe;
--krv-info-ink:#1e40af;
--krv-on-info:#ffffff;
--krv-font-display:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
--krv-font-sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
--krv-radius-card:1rem; --krv-radius-field:.75rem; --krv-radius-pill:9999px;
--krv-shadow-card:0 10px 30px rgba(21,23,28,.06);
--krv-shadow-lift:0 18px 44px rgba(21,23,28,.12);
--krv-shadow-glow:0 10px 24px -10px rgba(224,4,11,.55);
--krv-shadow-glow-wa:0 12px 26px -10px rgba(31,175,90,.55);
}
/* ---- Temas (mesma base, cor diferente) — só os tokens que mudam ---- */
[data-brand="emerald"]{ --krv-brand:#065f46; --krv-brand-dark:#047857; --krv-brand-soft:#ecfdf5; --krv-brand-ink:#065f46; --krv-accent:#065f46; --krv-paper:#ffffff; --krv-paper-alt:#f5f5f4; --krv-paper-line:#e7e5e4; --krv-shadow-glow:0 10px 24px -10px rgba(6,95,70,.45); }
[data-brand="larke"]{ --krv-brand:#c8a96a; --krv-brand-dark:#b2935a; --krv-brand-soft:#f4f1ea; --krv-brand-ink:#7a5a14; --krv-on-brand:#211b09; --krv-accent:#c8a96a; --krv-ink:#1a1a18; --krv-ink-soft:#3a3a33; --krv-ink-mute:#5c5c52; --krv-paper:#f4f1ea; --krv-paper-alt:#ece7db; --krv-paper-line:#ddd5c5; --krv-shadow-glow:0 10px 24px -10px rgba(200,169,106,.5); }
[data-brand="caixa"]{ --krv-brand:#005ca9; --krv-brand-dark:#004b8b; --krv-brand-soft:#edf4f9; --krv-brand-ink:#005ca9; --krv-accent:#005ca9; --krv-shadow-glow:0 10px 24px -10px rgba(0,92,169,.5); }
/* <<< fim tokens GERADOS <<< */
/* ---- Base opt-in (aplique a classe .krv-base no ou num root) ---- */
.krv-base{ background:var(--krv-paper); color:var(--krv-ink); font-family:var(--krv-font-sans); -webkit-font-smoothing:antialiased; }
.krv-base h1,.krv-base h2,.krv-base h3,.krv-base h4{ font-family:var(--krv-font-display); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.krv-base h3,.krv-base h4{ font-weight:700; }
.krv-base h1{ font-size:2.5rem; line-height:1.04; }
.krv-base h2{ font-size:1.9rem; }
.krv-base h3{ font-size:1.22rem; }
@media(min-width:768px){ .krv-base h1{ font-size:4rem; } .krv-base h2{ font-size:2.55rem; } }
/* ---- Componentes (porte de globals.css, em CSS puro) ---- */
.container-k{ max-width:72rem; margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:768px){ .container-k{ padding-inline:2rem; } }
.kicker{ display:inline-flex; align-items:center; gap:.5rem; color:var(--krv-brand-ink); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; }
.kicker::before{ content:""; width:1.75rem; height:2.5px; background:var(--krv-brand-ink); border-radius:2px; }
.btn-k,.btn-ghost,.btn-light{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:var(--krv-radius-pill); font-weight:700; padding:.875rem 1.5rem; min-height:44px; font-size:.95rem; line-height:1; cursor:pointer; text-decoration:none; border:0; transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s; }
.btn-k{ background:var(--krv-brand); color:var(--krv-on-brand); box-shadow:var(--krv-shadow-glow); }
.btn-k:hover{ background:var(--krv-brand-dark); transform:translateY(-2px); }
.btn-k:active{ transform:none; background:var(--krv-brand-dark); }
.btn-ghost{ background:#fff; color:var(--krv-ink); border:1.5px solid var(--krv-paper-line); }
.btn-ghost:hover{ border-color:var(--krv-ink); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--krv-ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--krv-shadow-lift); }
.btn-k:disabled,.btn-ghost:disabled,.btn-light:disabled{ opacity:.6; pointer-events:none; }
.card-k{ background:#fff; border:1px solid var(--krv-paper-line); border-radius:var(--krv-radius-card); box-shadow:var(--krv-shadow-card); transition:box-shadow .3s,transform .3s; }
.card-k:hover{ box-shadow:var(--krv-shadow-lift); transform:translateY(-4px); }
.fld-k{ display:block; font-size:.85rem; font-weight:600; color:var(--krv-ink-soft); }
.fld-k input,.fld-k select,.fld-k textarea{ margin-top:.375rem; width:100%; border-radius:var(--krv-radius-field); border:1.5px solid var(--krv-paper-line); background:#fff; padding:.75rem 1rem; min-height:44px; font-size:1rem; font-weight:500; color:var(--krv-ink); outline:0; transition:border-color .15s; }
.fld-k input:focus,.fld-k select:focus,.fld-k textarea:focus{ border-color:var(--krv-brand-ink); }
.fld-k input[aria-invalid="true"],.fld-k select[aria-invalid="true"],.fld-k textarea[aria-invalid="true"]{ border-color:var(--krv-brand-ink); }
.fld-err{ margin-top:.25rem; display:flex; align-items:center; gap:.25rem; font-size:.8rem; font-weight:600; color:var(--krv-brand-ink); }
.chip-k{ display:inline-flex; align-items:center; gap:.25rem; border-radius:var(--krv-radius-pill); padding:.375rem .75rem; font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums; }
.price-k{ font-variant-numeric:tabular-nums; }
details.faq-k{ border:1px solid var(--krv-paper-line); border-radius:.75rem; background:#fff; padding-inline:1.25rem; }
details.faq-k summary{ cursor:pointer; list-style:none; padding-block:1rem; min-height:44px; font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
details.faq-k summary::-webkit-details-marker{ display:none; }
details.faq-k summary::after{ content:'+'; color:var(--krv-brand-ink); font-size:1.5rem; font-family:var(--krv-font-display); line-height:1; transition:transform .2s; }
details.faq-k[open] summary::after{ transform:rotate(45deg); }
details.faq-k p{ padding-bottom:1.25rem; color:var(--krv-ink-mute); line-height:1.6; }
/* ---- Tabela de dados (v1.3.0) ----
* Sticky header precisa de um contêiner com overflow — use o envoltório:
*
* Célula numérica (alinhada à direita, tabular-nums): .
* Variante compacta: . */
.table-wrap-k{ overflow:auto; background:#fff; border:1px solid var(--krv-paper-line); border-radius:var(--krv-radius-card); box-shadow:var(--krv-shadow-card); }
.table-k{ width:100%; border-collapse:collapse; background:#fff; font-size:.92rem; font-variant-numeric:tabular-nums; }
.table-k caption{ padding:.75rem 1rem; text-align:left; font-weight:700; color:var(--krv-ink); }
.table-k th,.table-k td{ padding:.75rem 1rem; text-align:left; vertical-align:middle; border-bottom:1px solid var(--krv-paper-line); }
.table-k thead th{ position:sticky; top:0; z-index:1; background:var(--krv-paper-alt); color:var(--krv-ink-soft); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.table-k tbody tr:nth-child(even){ background:var(--krv-paper-alt); } /* zebra (paper-alt: visível nos 3 temas — paper é branco no emerald) */
.table-k tbody tr:last-child td{ border-bottom:0; }
.table-k .num{ text-align:right; }
.table-k.dense th,.table-k.dense td{ padding:.5rem .75rem; font-size:.85rem; }
/* ---- Alertas e toasts (v1.3.0) — famílias semânticas ok/warn/danger/info ----
* Acessibilidade (obrigatório no markup):
* erro/atenção → role="alert" (aria-live="assertive" implícito; interrompe o leitor)
* sucesso/info → role="status" (aria-live="polite" implícito; anuncia sem interromper)
* Falha ao salvar.
* Registro salvo. */
.alert-k{ display:flex; align-items:flex-start; gap:.625rem; padding:.875rem 1.125rem; border:1.5px solid; border-radius:var(--krv-radius-field); font-size:.92rem; font-weight:500; line-height:1.5; }
.alert-k.ok{ background:var(--krv-ok-soft); border-color:var(--krv-ok); color:var(--krv-ok-ink); }
.alert-k.warn{ background:var(--krv-warn-soft); border-color:var(--krv-warn); color:var(--krv-warn-ink); }
.alert-k.danger{ background:var(--krv-danger-soft); border-color:var(--krv-danger); color:var(--krv-danger-ink); }
.alert-k.info{ background:var(--krv-info-soft); border-color:var(--krv-info); color:var(--krv-info-ink); }
.alert-k strong{ font-weight:700; }
/* Toast (feedback efêmero). A zona fixa posiciona e é a região viva — anuncia sem roubar foco:
*
* Remoção do DOM fica a cargo do app (ex.: setTimeout 5s). */
.toast-zone-k{ position:fixed; inset-inline:0; bottom:1rem; z-index:60; display:flex; flex-direction:column; align-items:center; gap:.5rem; padding-inline:1rem; pointer-events:none; }
.toast-k{ display:inline-flex; align-items:center; gap:.625rem; padding:.75rem 1.25rem; border-radius:var(--krv-radius-pill); box-shadow:var(--krv-shadow-lift); font-size:.92rem; font-weight:600; pointer-events:auto; animation:krv-toast-in .25s ease-out; }
.toast-k.ok{ background:var(--krv-ok); color:var(--krv-on-ok); }
.toast-k.warn{ background:var(--krv-warn); color:var(--krv-on-warn); }
.toast-k.danger{ background:var(--krv-danger); color:var(--krv-on-danger); }
.toast-k.info{ background:var(--krv-info); color:var(--krv-on-info); }
@keyframes krv-toast-in{ from{ opacity:0; transform:translateY(8px); } }
/* ---- Badge de status (v1.3.0) — evolução do .chip-k com cor semântica ----
* Estados de negócio: ok (pago, garantia ativa), warn (pendente, a vencer),
* danger (atrasado, expirado), info (em análise), brand (destaque de marca).
* Pago */
.badge-k{ display:inline-flex; align-items:center; gap:.375rem; border-radius:var(--krv-radius-pill); padding:.25rem .625rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-variant-numeric:tabular-nums; background:var(--krv-paper-alt); color:var(--krv-ink-soft); }
.badge-k.ok{ background:var(--krv-ok-soft); color:var(--krv-ok-ink); }
.badge-k.warn{ background:var(--krv-warn-soft); color:var(--krv-warn-ink); }
.badge-k.danger{ background:var(--krv-danger-soft); color:var(--krv-danger-ink); }
.badge-k.info{ background:var(--krv-info-soft); color:var(--krv-info-ink); }
.badge-k.brand{ background:var(--krv-brand-soft); color:var(--krv-brand-ink); }
.badge-k.dot::before{ content:""; width:.45em; height:.45em; border-radius:50%; background:currentColor; flex:none; }
/* ---- Estados de carregamento (v1.3.0) ----
* Skeleton: dê largura/altura ao elemento e marque aria-hidden="true" (o
* conteúdo real chega depois). Shimmer desliga em prefers-reduced-motion.
* */
.skel-k{ position:relative; overflow:hidden; background:var(--krv-paper-alt); border-radius:var(--krv-radius-field); min-height:1em; }
.skel-k::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:krv-shimmer 1.6s infinite; }
@keyframes krv-shimmer{ 100%{ transform:translateX(100%); } }
/* Spinner:
* Arco em brand-ink: >=3:1 sobre o trilho paper-alt nos 3 temas (o brand puro
* do larke dava 1.8:1). Variante maior: .spin-k.lg */
.spin-k{ display:inline-block; width:1.25rem; height:1.25rem; flex:none; border-radius:50%; border:2.5px solid var(--krv-paper-alt); border-top-color:var(--krv-brand-ink); animation:krv-spin .8s linear infinite; }
.spin-k.lg{ width:2rem; height:2rem; border-width:3px; }
@keyframes krv-spin{ to{ transform:rotate(360deg); } }
/* Progress nativo:
* (indeterminado = sem value; o navegador anima por conta própria) */
.progress-k{ -webkit-appearance:none; appearance:none; width:100%; height:.5rem; border:0; border-radius:var(--krv-radius-pill); background:var(--krv-paper-alt); overflow:hidden; }
.progress-k::-webkit-progress-bar{ background:var(--krv-paper-alt); border-radius:var(--krv-radius-pill); }
.progress-k::-webkit-progress-value{ background:var(--krv-brand-ink); border-radius:var(--krv-radius-pill); transition:inline-size .3s; }
.progress-k::-moz-progress-bar{ background:var(--krv-brand-ink); border-radius:var(--krv-radius-pill); }
/* ---- Empty state (v1.3.0) — "nada aqui ainda" com ícone/título/ação ----
*
* 📭
* Nenhuma cobrança
* Quando houver cobranças, elas aparecem aqui.
* Criar cobrança
* |