/* =============================================================
* Kriou · Components
* https://kriou.com · Brand book: https://brand.kriou.com
* =============================================================
*
* Componentes oficiais Kriou: botões, badges, cards, alerts,
* formulários, tabelas, status pills.
*
* Depende de:
* - kriou-tokens.css (variáveis)
* - kriou-base.css (reset + body + helpers)
*
* Uso:
*
*
*
*
* Cada componente tem regras claras de QUANDO usar.
* Quando bater dúvida, consulte: https://brand.kriou.com
* Construído com rigor — Kriou.
* ============================================================= */
/* =============================================================
* BOTÕES · marca Kriou (kriou.com)
* =============================================================
* Hierarquia: primary → ghost → terra → disabled
* Regra: 1 botão primário por seção (chamada principal).
* Ver matriz de decisão: https://brand.kriou.com#botoes
* ============================================================= */
/* .btn — base de todos os botões Kriou */
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.55rem 1.1rem;
font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500;
border-radius: var(--r); border: 1px solid transparent;
cursor: pointer; transition: all .15s; text-decoration: none;
}
/* .btn-primary — ação principal de cada tela (Paper) */
/* Em território Night, prefira .btn-terra. Ver brand.kriou.com#territorios */
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--terra); border-color: var(--terra); }
/* .btn-ghost — ações secundárias: cancelar, voltar, editar (kriou.com) */
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--border-m); }
.btn-ghost:hover { border-color: var(--terra); color: var(--terra); }
/* .btn-terra — CTAs de venda/conversão: upgrade, comprar, começar */
/* Use com parcimônia. Em Night vira o primary. */
.btn-terra { background: var(--terra); color: var(--paper); border-color: var(--terra); }
.btn-terra:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
/* .btn-disabled — estado desabilitado · sempre dá feedback visual */
.btn-disabled {
background: var(--paper-deep); color: var(--ink-4);
border-color: var(--border); cursor: not-allowed;
}
/* .btn-sm — variante pequena · pra ações de listagem/inline */
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
/* =============================================================
* BADGES · marca Kriou (kriou.com)
* =============================================================
* Status discretos. Sempre uppercase mono. Cor comunica estado.
* Ver: https://brand.kriou.com#badges
* ============================================================= */
/* .badge — base. Sempre acompanhe de variante: -ok -warn -info -terra */
.badge {
display: inline-flex; align-items: center; gap: 0.35rem;
font-family: var(--font-mono);
font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid;
}
.badge-ok { color: var(--olive); border-color: rgba(92,112,72,.3); background: var(--olive-soft); }
.badge-warn { color: var(--warn); border-color: rgba(200,156,61,.4); background: var(--warn-soft); }
.badge-info { color: var(--info); border-color: rgba(58,100,128,.3); background: var(--info-soft); }
.badge-terra { color: var(--terra); border-color: rgba(181,67,30,.3); background: var(--terra-soft); }
/* .dot-led — bolinha pulsante dentro de badge (kriou.com) */
.badge .dot-led { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* =============================================================
* STATUS PILLS · pattern de configuração Kriou
* =============================================================
* VAZIO · PARCIAL · COMPLETO — usado em telas admin
* Ver: https://brand.kriou.com#territorios
* ============================================================= */
.status-pill {
font-family: var(--font-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.16em;
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: 1px solid;
}
.status-pill.empty { color: var(--ink-3); border-color: var(--border-m); background: var(--paper-alt); }
.status-pill.partial { color: var(--warn); border-color: rgba(200,156,61,.4); background: var(--warn-soft); }
.status-pill.complete { color: var(--olive); border-color: rgba(92,112,72,.3); background: var(--olive-soft); }
/* =============================================================
* CARDS · marca Kriou (kriou.com)
* =============================================================
* Container padrão pra blocos de conteúdo. Padding generoso.
* Variante .card-night pra território Night.
* Ver: https://brand.kriou.com#cards
* ============================================================= */
.card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 1.6rem 1.8rem;
}
.card + .card { margin-top: 1.2rem; }
/* .card-head — cabeçalho com título + ações */
.card-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1.5rem; margin-bottom: 1.2rem;
}
.card-head .ttl { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -.012em; margin-bottom: 0.25rem; }
.card-head .sub { color: var(--ink-3); font-size: 0.88rem; }
.card-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
/* .card-night — variante escura · destaque pontual em Paper, padrão em Night */
.card-night { background: var(--night); color: rgba(255,255,255,.85); border-color: var(--night-2); }
.card-night .card-head .ttl { color: #F4F1EC; }
.card-night .card-head .sub { color: rgba(255,255,255,.55); }
/* =============================================================
* ALERTS · marca Kriou (kriou.com)
* =============================================================
* Mensagens contextuais. Border-left de 3px na cor do estado.
* Variantes: default (terra) · info · olive · danger
* Ver: https://brand.kriou.com#alerts
* ============================================================= */
.alert {
padding: 1rem 1.2rem;
border-radius: var(--r);
border-left: 3px solid var(--terra);
background: var(--terra-soft);
font-size: 0.9rem;
color: var(--ink-2);
display: flex; align-items: flex-start; gap: 0.8rem;
}
.alert.info { border-left-color: var(--info); background: var(--info-soft); }
.alert.olive { border-left-color: var(--olive); background: var(--olive-soft); }
.alert.danger { border-left-color: var(--danger); background: var(--danger-soft); }
.alert strong { color: var(--ink); }
/* =============================================================
* FORMULÁRIOS · marca Kriou (kriou.com)
* =============================================================
* Label sempre acima, em mono uppercase pequena.
* Input com border simples, foca em terra.
* Ver: https://brand.kriou.com#forms
* ============================================================= */
.field-group {
display: flex; flex-direction: column;
gap: 0.4rem;
max-width: 360px;
margin-bottom: 1rem;
}
.field-group label {
font-family: var(--font-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-3);
}
.field-group input,
.field-group textarea,
.field-group select {
font-family: var(--font-sans); font-size: 0.92rem;
padding: 0.65rem 0.85rem;
background: var(--paper);
border: 1px solid var(--border-m);
border-radius: var(--r);
color: var(--ink);
transition: border-color .15s;
}
.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
outline: none;
border-color: var(--terra);
}
/* .field-hint — pista pra credencial externa (kriou.com pattern) */
/* Ex: "→ https://app.brevo.com/settings/keys/api · Permissão: ..." */
.field-hint {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--terra);
margin-top: 0.5rem;
}
/* =============================================================
* TABELAS · marca Kriou (kriou.com)
* =============================================================
* Aplique class="kt" pra estilo oficial. Header em mono uppercase.
* Ver: https://brand.kriou.com#tables
* ============================================================= */
table.kt {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
table.kt th {
text-align: left; font-family: var(--font-mono); font-size: 0.65rem;
text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3);
font-weight: 500; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--border-m);
}
table.kt td {
padding: 0.9rem 0.8rem;
border-bottom: 1px solid var(--border);
color: var(--ink-2);
}
/* =============================================================
* GRIDS · helpers de layout · Kriou (kriou.com)
* ============================================================= */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* =============================================================
* STAT TILE · pequeno bloco de métrica numérica · Kriou
* =============================================================
* Pattern usado em dashboards. Label uppercase mono em cima,
* número grande em serif embaixo.
* Ver: https://brand.kriou.com
* ============================================================= */
.stat-tile {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 1.3rem 1.4rem;
}
.stat-tile .lbl {
font-family: var(--font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
margin-bottom: 0.7rem;
}
.stat-tile .val {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1;
}
.stat-tile .sub {
font-size: 0.78rem;
color: var(--ink-3);
margin-top: 0.5rem;
}
/* =============================================================
* Fim · Kriou Components
* https://kriou.com — Infraestrutura global para software real.
* Brand book completo: https://brand.kriou.com
* Construído com rigor — Kriou.
* ============================================================= */