/* =========================================================
Impersol Components — biblioteca enxuta sobre tokens.css
Prefixo: .imp-* (nao colide com classes atuais)
Carregar DEPOIS de tokens.css e ANTES de styles.css
========================================================= */
/* ---------- Reset minimo ---------- */
.imp-reset, .imp-reset * { box-sizing: border-box; }
/* =========================================================
BOTOES — Impersol UI
.imp-btn + variante + tamanho + modificador
Variantes : primary · secondary · outline · ghost · soft
elevated · gradient · success · warn · danger · link
Tamanhos : xs · sm · md (default) · lg
Modifiers : block · icon (icon-only) · rounded (pill) · loading
Design: moderno, dark-first, microinteracoes (lift no hover, press no active,
focus ring duplo, highlight interno glassy nos solids).
========================================================= */
.imp-btn {
--_btn-bg: transparent;
--_btn-bg-hover: transparent;
--_btn-color: var(--imp-text);
--_btn-border: transparent;
--_btn-border-hover: transparent;
--_btn-shadow: 0 0 0 transparent;
--_btn-shadow-hover: 0 0 0 transparent;
--_btn-ring: 0 0 0 3px rgba(74,127,212,.28);
--_btn-highlight: inset 0 1px 0 rgba(255,255,255,.08);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--imp-space-2);
padding: 10px 18px; /* md */
min-height: 38px;
font-family: var(--imp-font-sans);
font-size: var(--imp-text-md);
font-weight: var(--imp-weight-semibold);
line-height: 1;
letter-spacing: .005em;
text-decoration: none;
white-space: nowrap;
user-select: none;
cursor: pointer;
color: var(--_btn-color);
background: var(--_btn-bg);
border: 1px solid var(--_btn-border);
border-radius: var(--imp-radius-md);
box-shadow: var(--_btn-shadow), var(--_btn-highlight);
transition:
background 140ms var(--imp-ease-out),
border-color 140ms var(--imp-ease-out),
color 140ms var(--imp-ease-out),
transform 140ms var(--imp-ease-out),
box-shadow 180ms var(--imp-ease-out),
filter 140ms var(--imp-ease-out);
}
.imp-btn > svg,
.imp-btn > .imp-btn-icon-slot {
width: 1em; height: 1em;
flex: none;
}
/* Estados ---------------------------------------------------------- */
.imp-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.imp-is-loading) {
background: var(--_btn-bg-hover);
border-color: var(--_btn-border-hover);
box-shadow: var(--_btn-shadow-hover), var(--_btn-highlight);
transform: translateY(-1px);
}
.imp-btn:active:not(:disabled):not([aria-disabled="true"]):not(.imp-is-loading) {
transform: translateY(0);
transition-duration: 60ms;
filter: brightness(.96);
}
.imp-btn:focus-visible {
outline: none;
box-shadow: var(--_btn-ring), var(--_btn-shadow-hover), var(--_btn-highlight);
}
.imp-btn:disabled,
.imp-btn[aria-disabled="true"] {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(.2);
}
/* Variantes -------------------------------------------------------- */
/* primary — navy solido com gradiente sutil + glow no hover */
.imp-btn-primary {
--_btn-bg: linear-gradient(180deg, #3560ad 0%, #1f3f7e 100%);
--_btn-bg-hover: linear-gradient(180deg, #3c6ac0 0%, #25468c 100%);
--_btn-color: #fff;
--_btn-border: rgba(255,255,255,.06);
--_btn-border-hover: rgba(255,255,255,.12);
--_btn-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(26,56,112,.35);
--_btn-shadow-hover: 0 2px 4px rgba(0,0,0,.4), 0 10px 24px rgba(26,56,112,.55);
}
/* secondary — superficie escura com borda, muito usado */
.imp-btn-secondary {
--_btn-bg: var(--imp-surface-3);
--_btn-bg-hover: #17223b;
--_btn-color: var(--imp-text);
--_btn-border: var(--imp-border);
--_btn-border-hover: var(--imp-brand-400);
--_btn-shadow: 0 1px 2px rgba(0,0,0,.25);
--_btn-shadow-hover: 0 2px 6px rgba(0,0,0,.35);
}
/* outline — transparente com borda da marca, vira preenchido no hover */
.imp-btn-outline {
--_btn-bg: transparent;
--_btn-bg-hover: rgba(74,127,212,.12);
--_btn-color: var(--imp-brand-200);
--_btn-border: var(--imp-brand-400);
--_btn-border-hover: var(--imp-brand-200);
}
/* ghost — so texto com hover tonal */
.imp-btn-ghost {
--_btn-bg: transparent;
--_btn-bg-hover: rgba(74,127,212,.10);
--_btn-color: var(--imp-brand-200);
}
/* soft — pill tonal (fundo sutil, bom pra acoes secundarias) */
.imp-btn-soft {
--_btn-bg: rgba(74,127,212,.14);
--_btn-bg-hover: rgba(74,127,212,.22);
--_btn-color: var(--imp-brand-200);
--_btn-border: rgba(74,127,212,.18);
--_btn-border-hover: rgba(74,127,212,.35);
}
/* elevated — superfice com sombra forte, ideal pra card actions */
.imp-btn-elevated {
--_btn-bg: #131c34;
--_btn-bg-hover: #18223f;
--_btn-color: var(--imp-text);
--_btn-border: transparent;
--_btn-shadow: 0 2px 6px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.3);
--_btn-shadow-hover: 0 4px 10px rgba(0,0,0,.45), 0 14px 32px rgba(0,0,0,.45);
}
/* gradient — CTA destacado (hero, onboarding, primeiro-passo) */
.imp-btn-gradient {
--_btn-bg: linear-gradient(135deg, #4a7fd4 0%, #8b5cf6 100%);
--_btn-bg-hover: linear-gradient(135deg, #5c8ee0 0%, #9c6efa 100%);
--_btn-color: #fff;
--_btn-border: transparent;
--_btn-shadow: 0 4px 14px rgba(139,92,246,.35);
--_btn-shadow-hover: 0 8px 24px rgba(139,92,246,.55);
}
/* success */
.imp-btn-success {
--_btn-bg: linear-gradient(180deg, #2fb763 0%, #178145 100%);
--_btn-bg-hover: linear-gradient(180deg, #35c46d 0%, #1b9250 100%);
--_btn-color: #fff;
--_btn-border: rgba(255,255,255,.08);
--_btn-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(34,197,94,.3);
--_btn-shadow-hover: 0 2px 4px rgba(0,0,0,.35), 0 10px 22px rgba(34,197,94,.45);
--_btn-ring: 0 0 0 3px rgba(34,197,94,.28);
}
/* warn */
.imp-btn-warn {
--_btn-bg: linear-gradient(180deg, #f2a937 0%, #c9820f 100%);
--_btn-bg-hover: linear-gradient(180deg, #f6b54b 0%, #d98d13 100%);
--_btn-color: #0c1222;
--_btn-border: rgba(0,0,0,.08);
--_btn-shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(245,158,11,.3);
--_btn-shadow-hover: 0 2px 4px rgba(0,0,0,.3), 0 10px 22px rgba(245,158,11,.45);
--_btn-ring: 0 0 0 3px rgba(245,158,11,.3);
}
/* danger */
.imp-btn-danger {
--_btn-bg: linear-gradient(180deg, #ef4444 0%, #b71d1d 100%);
--_btn-bg-hover: linear-gradient(180deg, #f55858 0%, #c92424 100%);
--_btn-color: #fff;
--_btn-border: rgba(255,255,255,.08);
--_btn-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(239,68,68,.3);
--_btn-shadow-hover: 0 2px 4px rgba(0,0,0,.35), 0 10px 22px rgba(239,68,68,.5);
--_btn-ring: 0 0 0 3px rgba(239,68,68,.3);
}
/* link — parece texto clicavel */
.imp-btn-link {
--_btn-bg: transparent;
--_btn-bg-hover: transparent;
--_btn-color: var(--imp-brand-200);
padding: 0; min-height: auto;
text-decoration: underline;
text-underline-offset: 3px;
box-shadow: none !important;
transform: none !important;
}
.imp-btn-link:hover { color: #b3d4fd; filter: none; transform: none; }
/* Tamanhos --------------------------------------------------------- */
.imp-btn-xs { padding: 4px 10px; min-height: 24px; font-size: var(--imp-text-xs); border-radius: var(--imp-radius-sm); gap: 6px; }
.imp-btn-sm { padding: 7px 14px; min-height: 30px; font-size: var(--imp-text-sm); border-radius: var(--imp-radius-sm); gap: 6px; }
.imp-btn-lg { padding: 13px 22px; min-height: 46px; font-size: var(--imp-text-lg); border-radius: var(--imp-radius-lg); gap: 10px; }
/* Modificadores ---------------------------------------------------- */
.imp-btn-block { width: 100%; }
.imp-btn-rounded { border-radius: var(--imp-radius-full); }
/* icon-only: quadrado, padding uniforme */
.imp-btn-icon { padding: 0; width: 38px; height: 38px; }
.imp-btn-icon.imp-btn-xs { width: 24px; height: 24px; }
.imp-btn-icon.imp-btn-sm { width: 30px; height: 30px; }
.imp-btn-icon.imp-btn-lg { width: 46px; height: 46px; }
/* loading state — spinner embutido, texto fica meio transparente */
.imp-btn.imp-is-loading {
color: transparent !important;
pointer-events: none;
}
.imp-btn.imp-is-loading::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 16px; height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
color: #fff;
animation: imp-spin .7s linear infinite;
}
.imp-btn-secondary.imp-is-loading::after,
.imp-btn-outline.imp-is-loading::after,
.imp-btn-ghost.imp-is-loading::after,
.imp-btn-soft.imp-is-loading::after { color: var(--imp-brand-200); }
@keyframes imp-spin { to { transform: rotate(360deg); } }
/* grupo de botoes (segmented) ------------------------------------- */
.imp-btn-group {
display: inline-flex;
isolation: isolate;
}
.imp-btn-group > .imp-btn {
border-radius: 0;
margin-left: -1px;
}
.imp-btn-group > .imp-btn:first-child { border-top-left-radius: var(--imp-radius-md); border-bottom-left-radius: var(--imp-radius-md); margin-left: 0; }
.imp-btn-group > .imp-btn:last-child { border-top-right-radius: var(--imp-radius-md); border-bottom-right-radius: var(--imp-radius-md); }
.imp-btn-group > .imp-btn:hover,
.imp-btn-group > .imp-btn:focus-visible { z-index: 1; }
/* =========================================================
FORMULARIOS — Impersol UI
Componentes:
.imp-field wrapper label + input + help/error
.imp-label label
.imp-input text livre (email, tel, url, password, number...)
.imp-textarea multi-linha + counter opcional
.imp-select select custom (chevron desenhado)
.imp-search input com icone de busca + clear
.imp-input-group compound (prefix / suffix / addon)
.imp-input-icon-left wrapper para icone a esquerda
.imp-input-icon-right wrapper para icone a direita
.imp-field-floating label flutuante estilo material
.imp-checkbox checkbox customizado
.imp-radio radio customizado
.imp-switch toggle switch
.imp-file upload (dropzone e botao)
.imp-segmented radio segmentado (pills)
Tamanhos: .imp-input-sm, .imp-input-md (default), .imp-input-lg
Estados: :focus, [disabled], [readonly], .imp-is-error, .imp-is-success, .imp-is-loading
========================================================= */
/* ---------- Wrapper de campo ---------- */
.imp-field {
display: flex;
flex-direction: column;
gap: var(--imp-space-1);
margin-bottom: var(--imp-space-4);
}
.imp-field-row { display: flex; gap: var(--imp-space-3); }
.imp-field-row > .imp-field { flex: 1; margin-bottom: 0; }
.imp-label {
font-size: var(--imp-text-sm);
font-weight: var(--imp-weight-medium);
color: var(--imp-text-muted);
display: inline-flex; align-items: center; gap: 6px;
}
.imp-label-required::after { content: " *"; color: var(--imp-danger); }
.imp-label-hint {
font-size: var(--imp-text-xs);
font-weight: var(--imp-weight-regular);
color: var(--imp-text-faint);
margin-left: auto;
}
/* ---------- Input base (text / email / tel / number / password / url / date) ---------- */
.imp-input,
.imp-select,
.imp-textarea,
.imp-search {
box-sizing: border-box;
width: 100%;
padding: 10px 12px;
min-height: 42px;
font-family: var(--imp-font-sans);
font-size: var(--imp-text-md);
line-height: 1.4;
color: var(--imp-text);
background: var(--imp-surface);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-md);
transition:
background 140ms var(--imp-ease-out),
border-color 140ms var(--imp-ease-out),
box-shadow 180ms var(--imp-ease-out);
appearance: none;
-webkit-appearance: none;
}
.imp-input:hover:not(:disabled):not([readonly]),
.imp-select:hover:not(:disabled),
.imp-textarea:hover:not(:disabled):not([readonly]),
.imp-search:hover:not(:disabled) {
border-color: rgba(74,127,212,.55);
background: #121a2f;
}
.imp-input:focus,
.imp-select:focus,
.imp-textarea:focus,
.imp-search:focus {
outline: none;
border-color: var(--imp-brand-400);
background: #121a2f;
box-shadow: 0 0 0 3px rgba(74,127,212,.22);
}
.imp-input::placeholder,
.imp-textarea::placeholder,
.imp-search::placeholder { color: var(--imp-text-faint); }
.imp-input:disabled,
.imp-select:disabled,
.imp-textarea:disabled,
.imp-search:disabled {
opacity: .5; cursor: not-allowed;
background: var(--imp-surface-3);
}
.imp-input[readonly],
.imp-textarea[readonly] {
background: var(--imp-surface-3);
color: var(--imp-text-muted);
cursor: default;
}
/* estados semanticos */
.imp-input.imp-is-error, .imp-select.imp-is-error, .imp-textarea.imp-is-error,
.imp-input[aria-invalid="true"] {
border-color: var(--imp-danger);
box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.imp-input.imp-is-success, .imp-select.imp-is-success, .imp-textarea.imp-is-success {
border-color: var(--imp-success);
box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
/* ---------- Textarea ---------- */
.imp-textarea { min-height: 96px; resize: vertical; padding: 10px 12px; }
.imp-textarea-counter {
align-self: flex-end;
font-size: var(--imp-text-xs);
color: var(--imp-text-faint);
margin-top: -2px;
}
.imp-textarea-counter.imp-is-over { color: var(--imp-danger); }
/* ---------- Select nativo (fallback em forms reais) ---------- */
.imp-select {
padding: 10px 36px 10px 12px;
min-height: 42px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
.imp-select option { background: var(--imp-surface); color: var(--imp-text); }
/* ---------- Dropdown customizado (visual completo, lista estilizada) ---------- */
/*
Uso:
JS: imp-dropdown[data-imp-dd] inicializado automaticamente.
*/
.imp-dropdown {
position: relative;
width: 100%;
}
/* trigger — idêntico ao .imp-input */
.imp-dropdown-trigger {
box-sizing: border-box;
width: 100%;
height: 42px;
padding: 10px 36px 10px 12px;
display: flex;
align-items: center;
font-family: var(--imp-font-sans);
font-size: var(--imp-text-md);
line-height: 1.4;
color: var(--imp-text);
background: var(--imp-surface);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-md);
cursor: pointer;
text-align: left;
white-space: nowrap;
overflow: hidden;
position: relative;
transition:
background 140ms var(--imp-ease-out),
border-color 140ms var(--imp-ease-out),
box-shadow 180ms var(--imp-ease-out);
}
.imp-dropdown-trigger::after {
content: "";
position: absolute;
right: 12px; top: 50%;
transform: translateY(-50%);
width: 12px; height: 8px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition: transform 200ms var(--imp-ease-out);
pointer-events: none;
}
.imp-dropdown-trigger:hover:not(:disabled) {
border-color: rgba(74,127,212,.55);
background: #121a2f;
}
.imp-dropdown-trigger:focus-visible {
outline: none;
border-color: var(--imp-brand-400);
box-shadow: 0 0 0 3px rgba(74,127,212,.22);
}
.imp-dropdown.imp-is-open .imp-dropdown-trigger {
border-color: var(--imp-brand-400);
background: #121a2f;
box-shadow: 0 0 0 3px rgba(74,127,212,.22);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.imp-dropdown.imp-is-open .imp-dropdown-trigger::after {
transform: translateY(-50%) rotate(180deg);
}
.imp-dropdown-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.imp-dropdown-value.imp-is-placeholder { color: var(--imp-text-faint); }
/* painel de lista */
.imp-dropdown-menu {
position: absolute;
top: 100%; left: 0; right: 0;
z-index: var(--imp-z-dropdown, 200);
max-height: 240px;
overflow-y: auto;
background: #121a2f;
border: 1px solid var(--imp-brand-400);
border-top: none;
border-bottom-left-radius: var(--imp-radius-md);
border-bottom-right-radius: var(--imp-radius-md);
box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
display: none;
scrollbar-width: thin;
scrollbar-color: var(--imp-border) transparent;
}
.imp-dropdown.imp-is-open .imp-dropdown-menu { display: block; }
/* separador de grupo */
.imp-dropdown-separator {
height: 1px;
background: var(--imp-border-soft);
margin: 4px 0;
}
/* grupo com título */
.imp-dropdown-group-label {
padding: 8px 12px 4px;
font-size: 10px;
font-weight: var(--imp-weight-semibold);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--imp-text-faint);
pointer-events: none;
}
/* item */
.imp-dropdown-item {
display: flex;
align-items: center;
gap: var(--imp-space-2);
padding: 9px 12px;
font-size: var(--imp-text-md);
color: var(--imp-text-muted);
cursor: pointer;
transition: background 100ms, color 100ms;
position: relative;
}
.imp-dropdown-item:hover {
background: rgba(74,127,212,.12);
color: var(--imp-text);
}
.imp-dropdown-item.imp-is-selected {
color: var(--imp-brand-200);
background: rgba(74,127,212,.10);
}
.imp-dropdown-item.imp-is-selected::after {
content: "";
position: absolute;
right: 12px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center;
}
.imp-dropdown-item:focus-visible {
outline: none;
background: rgba(74,127,212,.16);
color: var(--imp-text);
}
/* estados no wrapper */
.imp-dropdown.imp-is-error .imp-dropdown-trigger {
border-color: var(--imp-danger);
box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.imp-dropdown.imp-is-error.imp-is-open .imp-dropdown-trigger {
border-color: var(--imp-danger);
}
.imp-dropdown.imp-is-error.imp-is-open .imp-dropdown-menu {
border-color: var(--imp-danger);
}
.imp-dropdown.imp-is-disabled .imp-dropdown-trigger {
opacity: .5; cursor: not-allowed; pointer-events: none;
}
/* ---------- Input com icones ---------- */
.imp-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.imp-input-wrap .imp-input,
.imp-input-wrap .imp-search { width: 100%; }
.imp-input-wrap .imp-input-icon {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--imp-text-faint);
pointer-events: none;
transition: color 140ms var(--imp-ease-out);
}
.imp-input-wrap .imp-input-icon-l { left: 12px; }
.imp-input-wrap .imp-input-icon-r { right: 12px; }
.imp-input-wrap:focus-within .imp-input-icon { color: var(--imp-brand-200); }
.imp-input-wrap .imp-input.has-icon-l,
.imp-input-wrap .imp-search { padding-left: 36px; }
.imp-input-wrap .imp-input.has-icon-r { padding-right: 36px; }
/* botao de clear / visibilidade (interativo, clicavel) */
.imp-input-action {
position: absolute;
top: 50%; right: 8px; transform: translateY(-50%);
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; color: var(--imp-text-faint);
border-radius: var(--imp-radius-sm);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.imp-input-action:hover { background: var(--imp-surface-3); color: var(--imp-text); }
.imp-input-action svg { width: 14px; height: 14px; }
/* ---------- Input group (compound: prefix / suffix / addon button) ---------- */
.imp-input-group {
display: flex;
width: 100%;
border-radius: var(--imp-radius-md);
isolation: isolate;
}
.imp-input-group > .imp-input,
.imp-input-group > .imp-select,
.imp-input-group > .imp-btn { border-radius: 0; margin-left: -1px; }
.imp-input-group > :first-child { border-top-left-radius: var(--imp-radius-md); border-bottom-left-radius: var(--imp-radius-md); margin-left: 0; }
.imp-input-group > :last-child { border-top-right-radius: var(--imp-radius-md); border-bottom-right-radius: var(--imp-radius-md); }
.imp-input-group > .imp-input:focus,
.imp-input-group > .imp-select:focus { z-index: 2; }
.imp-input-addon {
display: inline-flex; align-items: center; justify-content: center;
padding: 0 12px; min-height: 38px;
font-size: var(--imp-text-sm);
color: var(--imp-text-muted);
background: var(--imp-surface-3);
border: 1px solid var(--imp-border);
white-space: nowrap;
user-select: none;
}
/* ---------- Floating label ---------- */
.imp-field-floating {
position: relative;
display: block;
margin-bottom: var(--imp-space-4);
}
.imp-field-floating > .imp-input,
.imp-field-floating > .imp-textarea,
.imp-field-floating > .imp-select {
padding-top: 18px; padding-bottom: 6px;
}
.imp-field-floating > .imp-label {
position: absolute;
top: 11px; left: 12px;
margin: 0;
color: var(--imp-text-faint);
font-size: var(--imp-text-md);
pointer-events: none;
transition: top 140ms var(--imp-ease-out), font-size 140ms var(--imp-ease-out), color 140ms var(--imp-ease-out);
}
.imp-field-floating > .imp-input:focus + .imp-label,
.imp-field-floating > .imp-input:not(:placeholder-shown) + .imp-label,
.imp-field-floating > .imp-textarea:focus + .imp-label,
.imp-field-floating > .imp-textarea:not(:placeholder-shown) + .imp-label,
.imp-field-floating > .imp-select:focus + .imp-label,
.imp-field-floating > .imp-select:valid + .imp-label {
top: 4px; font-size: 10px;
color: var(--imp-brand-200);
letter-spacing: .04em; text-transform: uppercase;
}
/* ---------- Checkbox ---------- */
.imp-checkbox {
display: inline-flex; align-items: center; gap: var(--imp-space-2);
cursor: pointer; user-select: none;
font-size: var(--imp-text-md); color: var(--imp-text);
}
.imp-checkbox input {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px; flex: none;
background: var(--imp-surface);
border: 1.5px solid var(--imp-border);
border-radius: 5px;
cursor: pointer;
transition: background 140ms var(--imp-ease-out), border-color 140ms var(--imp-ease-out), box-shadow 180ms;
position: relative;
}
.imp-checkbox input:hover { border-color: var(--imp-brand-400); }
.imp-checkbox input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,127,212,.25); }
.imp-checkbox input:checked {
background: linear-gradient(180deg, #3560ad 0%, #1f3f7e 100%);
border-color: #3560ad;
}
.imp-checkbox input:checked::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.imp-checkbox input:indeterminate {
background: linear-gradient(180deg, #3560ad 0%, #1f3f7e 100%);
border-color: #3560ad;
}
.imp-checkbox input:indeterminate::after {
content: ""; position: absolute;
left: 3px; right: 3px; top: 50%;
height: 2px; background: #fff; transform: translateY(-50%);
}
.imp-checkbox input:disabled { opacity: .5; cursor: not-allowed; }
/* ---------- Radio ---------- */
.imp-radio {
display: inline-flex; align-items: center; gap: var(--imp-space-2);
cursor: pointer; user-select: none;
font-size: var(--imp-text-md); color: var(--imp-text);
}
.imp-radio input {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px; flex: none;
background: var(--imp-surface);
border: 1.5px solid var(--imp-border);
border-radius: 50%;
cursor: pointer;
transition: border-color 140ms, box-shadow 180ms;
position: relative;
}
.imp-radio input:hover { border-color: var(--imp-brand-400); }
.imp-radio input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,127,212,.25); }
.imp-radio input:checked { border-color: var(--imp-brand-400); border-width: 1.5px; }
.imp-radio input:checked::after {
content: ""; position: absolute;
inset: 3px;
border-radius: 50%;
background: linear-gradient(180deg, #4a7fd4 0%, #284d94 100%);
}
.imp-radio input:disabled { opacity: .5; cursor: not-allowed; }
/* ---------- Switch (toggle) ---------- */
.imp-switch {
display: inline-flex; align-items: center; gap: var(--imp-space-2);
cursor: pointer; user-select: none;
font-size: var(--imp-text-md); color: var(--imp-text);
}
.imp-switch input {
appearance: none; -webkit-appearance: none;
width: 38px; height: 22px; flex: none;
background: var(--imp-surface-3);
border: 1px solid var(--imp-border);
border-radius: 999px;
cursor: pointer; position: relative;
transition: background 200ms var(--imp-ease-out), border-color 200ms;
}
.imp-switch input::after {
content: "";
position: absolute;
left: 2px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.4);
transition: left 200ms var(--imp-ease-out), background 200ms;
}
.imp-switch input:hover { border-color: var(--imp-brand-400); }
.imp-switch input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,127,212,.25); }
.imp-switch input:checked {
background: linear-gradient(90deg, #3560ad, #4a7fd4);
border-color: #4a7fd4;
}
.imp-switch input:checked::after { left: 18px; }
.imp-switch input:disabled { opacity: .5; cursor: not-allowed; }
/* ---------- Segmented (radios como pills) ---------- */
.imp-segmented {
display: inline-flex;
padding: 3px;
gap: 2px;
background: var(--imp-surface-3);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-md);
}
.imp-segmented input { display: none; }
.imp-segmented label {
padding: 6px 14px;
font-size: var(--imp-text-sm);
font-weight: var(--imp-weight-medium);
color: var(--imp-text-muted);
border-radius: var(--imp-radius-sm);
cursor: pointer;
transition: background 140ms, color 140ms;
}
.imp-segmented label:hover { color: var(--imp-text); }
.imp-segmented input:checked + label {
background: linear-gradient(180deg, #3560ad 0%, #1f3f7e 100%);
color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* ---------- File upload ---------- */
.imp-file {
position: relative;
display: block;
}
.imp-file input[type="file"] {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer;
}
.imp-file-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--imp-space-2);
padding: var(--imp-space-6);
min-height: 120px;
text-align: center;
background: var(--imp-surface);
border: 1.5px dashed var(--imp-border);
border-radius: var(--imp-radius-md);
color: var(--imp-text-muted);
transition: background 140ms, border-color 140ms;
}
.imp-file-dropzone svg { width: 28px; height: 28px; color: var(--imp-text-faint); }
.imp-file:hover .imp-file-dropzone,
.imp-file input:focus-visible + .imp-file-dropzone {
border-color: var(--imp-brand-400);
background: #121a2f;
color: var(--imp-text);
}
.imp-file-hint { font-size: var(--imp-text-xs); color: var(--imp-text-faint); }
.imp-file-preview {
display: flex; align-items: center; gap: var(--imp-space-3);
padding: var(--imp-space-2) var(--imp-space-3);
background: var(--imp-surface-3);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-sm);
font-size: var(--imp-text-sm);
}
.imp-file-preview .imp-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-file-preview .imp-file-size { color: var(--imp-text-faint); font-size: var(--imp-text-xs); }
/* ---------- Help / error / success text ---------- */
.imp-help { font-size: var(--imp-text-xs); color: var(--imp-text-faint); display: inline-flex; align-items: center; gap: 4px; }
.imp-error { font-size: var(--imp-text-xs); color: var(--imp-danger); display: inline-flex; align-items: center; gap: 4px; }
.imp-success-text { font-size: var(--imp-text-xs); color: var(--imp-success-soft); display: inline-flex; align-items: center; gap: 4px; }
/* =========================================================
CARDS
========================================================= */
.imp-card {
background: var(--imp-surface);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-md);
padding: var(--imp-space-5);
box-shadow: var(--imp-shadow-sm);
}
.imp-card-lg { padding: var(--imp-space-6); border-radius: var(--imp-radius-lg); }
.imp-card-hover { transition: transform var(--imp-duration-normal) var(--imp-ease-out), box-shadow var(--imp-duration-normal) var(--imp-ease-out); }
.imp-card-hover:hover { transform: translateY(-2px); box-shadow: var(--imp-shadow-md); }
.imp-card-header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--imp-space-3);
margin-bottom: var(--imp-space-4);
}
.imp-card-title {
font-size: var(--imp-text-xl);
font-weight: var(--imp-weight-semibold);
color: var(--imp-text);
margin: 0;
}
.imp-card-subtitle {
font-size: var(--imp-text-sm);
color: var(--imp-text-muted);
margin: 0;
}
.imp-card-footer {
display: flex; gap: var(--imp-space-2);
margin-top: var(--imp-space-4);
padding-top: var(--imp-space-4);
border-top: 1px solid var(--imp-border-soft);
}
/* =========================================================
BADGES / CHIPS
Variantes : neutro · brand · success · warn · danger · info
Tamanhos : normal (default) · .imp-badge-sm
Extras : dot (bolinha de status) · .imp-badge-solid (preenchido)
========================================================= */
.imp-badge {
--_badge-bg: rgba(255,255,255,.05);
--_badge-color: var(--imp-text-muted);
--_badge-border: rgba(255,255,255,.08);
--_badge-dot: var(--imp-text-faint);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-family: var(--imp-font-sans);
font-size: var(--imp-text-xs);
font-weight: var(--imp-weight-semibold);
line-height: 1;
letter-spacing: .015em;
border-radius: var(--imp-radius-full);
background: var(--_badge-bg);
color: var(--_badge-color);
border: 1px solid var(--_badge-border);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
white-space: nowrap;
user-select: none;
}
/* tamanho small */
.imp-badge-sm {
padding: 2px 7px;
font-size: 10px;
gap: 4px;
}
/* dot de status (bolinha antes do texto) */
.imp-badge-dot::before {
content: "";
flex: none;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--_badge-dot);
}
.imp-badge-sm.imp-badge-dot::before { width: 5px; height: 5px; }
/* variantes tonais — fundo bem sutil, borda leve, texto colorido nítido */
.imp-badge-brand {
--_badge-bg: rgba(74,127,212,.08);
--_badge-color: #93c5fd;
--_badge-border: rgba(74,127,212,.22);
--_badge-dot: #4a7fd4;
}
.imp-badge-success {
--_badge-bg: rgba(34,197,94,.07);
--_badge-color: #86efac;
--_badge-border: rgba(34,197,94,.20);
--_badge-dot: #22c55e;
}
.imp-badge-warn {
--_badge-bg: rgba(245,158,11,.07);
--_badge-color: #fcd34d;
--_badge-border: rgba(245,158,11,.22);
--_badge-dot: #f59e0b;
}
.imp-badge-danger {
--_badge-bg: rgba(239,68,68,.07);
--_badge-color: #fca5a5;
--_badge-border: rgba(239,68,68,.20);
--_badge-dot: #ef4444;
}
.imp-badge-info {
--_badge-bg: rgba(99,179,237,.07);
--_badge-color: #7dd3fc;
--_badge-border: rgba(99,179,237,.20);
--_badge-dot: #63b3ed;
}
/* variante solid (preenchida — para status ativos, destaque) */
.imp-badge-solid {
border-color: transparent;
}
.imp-badge-solid.imp-badge-brand { --_badge-bg: #284d94; --_badge-color: #bfdbfe; }
.imp-badge-solid.imp-badge-success { --_badge-bg: #166534; --_badge-color: #bbf7d0; }
.imp-badge-solid.imp-badge-warn { --_badge-bg: #92400e; --_badge-color: #fde68a; }
.imp-badge-solid.imp-badge-danger { --_badge-bg: #991b1b; --_badge-color: #fecaca; }
.imp-badge-solid.imp-badge-info { --_badge-bg: #1e3a5f; --_badge-color: #bae6fd; }
/* =========================================================
ALERTAS / BANNERS
========================================================= */
.imp-alert {
display: flex; gap: var(--imp-space-3);
padding: var(--imp-space-3) var(--imp-space-4);
border-radius: var(--imp-radius-md);
border: 1px solid var(--imp-border);
background: var(--imp-surface);
font-size: var(--imp-text-md);
color: var(--imp-text);
}
.imp-alert-info { border-color: var(--imp-info); background: var(--imp-info-bg); }
.imp-alert-success { border-color: var(--imp-success); background: var(--imp-success-bg); }
.imp-alert-warn { border-color: var(--imp-warn); background: var(--imp-warn-bg); }
.imp-alert-danger { border-color: var(--imp-danger); background: var(--imp-danger-bg); }
/* =========================================================
TABELAS
========================================================= */
.imp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--imp-text-md);
color: var(--imp-text);
}
.imp-table th,
.imp-table td {
padding: var(--imp-space-3) var(--imp-space-4);
text-align: left;
border-bottom: 1px solid var(--imp-border-soft);
}
.imp-table th {
font-size: var(--imp-text-xs);
font-weight: var(--imp-weight-semibold);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--imp-text-muted);
background: var(--imp-surface-alt);
position: sticky; top: 0;
}
.imp-table tr:hover td { background: rgba(74,127,212,.04); }
.imp-table-compact th,
.imp-table-compact td { padding: var(--imp-space-2) var(--imp-space-3); }
/* =========================================================
MODAIS
========================================================= */
.imp-modal-backdrop {
position: fixed; inset: 0;
background: rgba(6,9,19,.72);
backdrop-filter: blur(4px);
z-index: var(--imp-z-overlay);
display: flex; align-items: center; justify-content: center;
padding: var(--imp-space-4);
}
.imp-modal {
width: 100%;
max-width: 560px;
max-height: calc(100vh - 96px);
overflow: auto;
background: var(--imp-surface);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-lg);
box-shadow: var(--imp-shadow-lg);
z-index: var(--imp-z-modal);
}
.imp-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--imp-space-5);
border-bottom: 1px solid var(--imp-border-soft);
}
.imp-modal-title { margin: 0; font-size: var(--imp-text-2xl); font-weight: var(--imp-weight-semibold); }
.imp-modal-body { padding: var(--imp-space-5); }
.imp-modal-footer {
display: flex; justify-content: flex-end; gap: var(--imp-space-2);
padding: var(--imp-space-4) var(--imp-space-5);
border-top: 1px solid var(--imp-border-soft);
}
.imp-modal-lg { max-width: 860px; }
.imp-modal-sm { max-width: 400px; }
/* =========================================================
TOAST — feedback sem sair da tela
Uso via JS: ImpToast.show({ title, desc, variant, action, onAction, duration })
Variantes: success · warn · danger · info · default
Estrutura gerada pelo JS:
Título
Descrição opcional
========================================================= */
/* stack — bottom-right */
.imp-toast-stack {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9100;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
width: 360px;
max-width: calc(100vw - 40px);
}
/* item */
.imp-toast {
--_t-bg: rgba(74,127,212,.08);
--_t-border: rgba(74,127,212,.22);
--_t-icon-bg: rgba(74,127,212,.15);
--_t-icon-col: #93c5fd;
--_t-bar: var(--imp-brand-400);
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 42px 18px 16px;
background: var(--_t-bg);
border: 1px solid var(--_t-border);
border-radius: 14px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
pointer-events: all;
overflow: hidden;
animation: imp-toast-in 300ms var(--imp-ease-out) both;
}
.imp-toast.imp-is-leaving {
animation: imp-toast-out 240ms var(--imp-ease-out) both;
}
@keyframes imp-toast-in {
from { opacity: 0; transform: translateY(14px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes imp-toast-out {
from { opacity: 1; transform: scale(1); max-height: 140px; padding-top: 16px; padding-bottom: 18px; margin-bottom: 0; }
to { opacity: 0; transform: scale(.95); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -12px; }
}
/* círculo do ícone */
.imp-toast-icon-wrap {
flex: none;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--_t-icon-bg);
display: flex; align-items: center; justify-content: center;
}
.imp-toast-icon-wrap svg {
width: 18px; height: 18px;
color: var(--_t-icon-col);
}
/* corpo */
.imp-toast-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.imp-toast-title {
font-family: var(--imp-font-sans);
font-size: var(--imp-text-md);
font-weight: var(--imp-weight-semibold);
color: var(--imp-text);
line-height: 1.3;
}
.imp-toast-desc {
font-family: var(--imp-font-sans);
font-size: var(--imp-text-sm);
color: var(--imp-text-muted);
line-height: 1.5;
}
/* botão de ação (Desfazer, Ver, etc.) */
.imp-toast-action {
align-self: flex-start;
margin-top: 8px;
padding: 5px 14px;
font-family: var(--imp-font-sans);
font-size: var(--imp-text-sm);
font-weight: var(--imp-weight-semibold);
color: var(--imp-text);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--imp-radius-sm);
cursor: pointer;
transition: background 140ms;
}
.imp-toast-action:hover { background: rgba(255,255,255,.11); }
/* fechar — canto superior direito */
.imp-toast-close {
position: absolute;
top: 12px; right: 12px;
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
border-radius: var(--imp-radius-sm);
color: var(--imp-text-faint);
cursor: pointer;
font-size: 13px;
line-height: 1;
transition: background 120ms, color 120ms;
}
.imp-toast-close:hover { background: rgba(255,255,255,.08); color: var(--imp-text); }
/* barra de progresso */
.imp-toast-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
border-radius: 0 0 14px 14px;
overflow: hidden;
}
.imp-toast-bar::after {
content: "";
display: block;
height: 100%;
background: var(--_t-bar);
transform-origin: left;
animation: imp-toast-bar-shrink var(--imp-toast-dur, 4500ms) linear both;
opacity: .55;
}
@keyframes imp-toast-bar-shrink {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* variantes — mesmo sistema dos badges */
.imp-toast-success {
--_t-bg: rgba(34,197,94,.07);
--_t-border: rgba(34,197,94,.20);
--_t-icon-bg: rgba(34,197,94,.15);
--_t-icon-col: #86efac;
--_t-bar: #22c55e;
}
.imp-toast-warn {
--_t-bg: rgba(245,158,11,.07);
--_t-border: rgba(245,158,11,.22);
--_t-icon-bg: rgba(245,158,11,.15);
--_t-icon-col: #fcd34d;
--_t-bar: #f59e0b;
}
.imp-toast-danger {
--_t-bg: rgba(239,68,68,.07);
--_t-border: rgba(239,68,68,.20);
--_t-icon-bg: rgba(239,68,68,.15);
--_t-icon-col: #fca5a5;
--_t-bar: #ef4444;
}
.imp-toast-info {
--_t-bg: rgba(99,179,237,.07);
--_t-border: rgba(99,179,237,.20);
--_t-icon-bg: rgba(99,179,237,.15);
--_t-icon-col: #7dd3fc;
--_t-bar: #63b3ed;
}
/* =========================================================
CALENDAR — seleção única ou intervalo de datas
ImpCalendar(el, { mode:'single'|'range', onChange:fn })
========================================================= */
.imp-cal {
display: inline-flex;
flex-direction: column;
width: 296px;
background: var(--imp-surface);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-lg);
padding: 16px;
user-select: none;
}
/* header */
.imp-cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 8px;
}
.imp-cal-title {
flex: 1;
text-align: center;
font-size: var(--imp-text-md);
font-weight: var(--imp-weight-semibold);
color: var(--imp-text);
}
.imp-cal-nav {
flex: none;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-sm);
color: var(--imp-text-muted);
cursor: pointer;
transition: background 120ms, color 120ms, border-color 120ms;
}
.imp-cal-nav:hover {
background: var(--imp-surface-3);
color: var(--imp-text);
border-color: var(--imp-brand-400);
}
.imp-cal-nav svg { width: 14px; height: 14px; pointer-events: none; }
/* nomes dos dias da semana */
.imp-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.imp-cal-weekdays span {
display: flex; align-items: center; justify-content: center;
height: 26px;
font-size: 10px;
font-weight: var(--imp-weight-semibold);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--imp-text-faint);
}
/* grade de dias */
.imp-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.imp-cal-day {
position: relative;
height: 36px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
background: transparent;
border: none;
padding: 0;
outline: none;
}
/* número do dia — círculo */
.imp-cal-day > span {
position: relative;
z-index: 1;
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-family: var(--imp-font-sans);
font-size: var(--imp-text-sm);
color: var(--imp-text-muted);
transition: background 120ms, color 120ms, box-shadow 120ms;
}
/* strip do intervalo — pseudo-elemento por baixo do círculo */
.imp-cal-day::before {
content: "";
position: absolute;
top: 50%; transform: translateY(-50%);
left: 0; right: 0;
height: 30px;
background: transparent;
pointer-events: none;
transition: background 120ms;
}
/* hover */
.imp-cal-day:hover:not(.imp-is-disabled):not(.imp-is-other-month) > span {
background: var(--imp-surface-3);
color: var(--imp-text);
}
/* today — ponto indicador */
.imp-cal-day.imp-is-today > span { color: var(--imp-brand-200); font-weight: var(--imp-weight-semibold); }
.imp-cal-day.imp-is-today > span::after {
content: "";
position: absolute;
bottom: 2px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px;
border-radius: 50%;
background: var(--imp-brand-400);
}
/* selecionado */
.imp-cal-day.imp-is-selected > span {
background: linear-gradient(180deg, #3560ad 0%, #1f3f7e 100%) !important;
color: #fff !important;
box-shadow: 0 2px 10px rgba(26,56,112,.55);
font-weight: var(--imp-weight-semibold);
}
/* strip — intervalo confirmado */
.imp-cal-day.imp-is-in-range::before { background: rgba(74,127,212,.12); }
.imp-cal-day.imp-is-range-start::before { left: 50%; right: 0; background: rgba(74,127,212,.12); }
.imp-cal-day.imp-is-range-end::before { left: 0; right: 50%; background: rgba(74,127,212,.12); }
.imp-cal-day.imp-is-range-start.imp-is-range-end::before { display: none; }
.imp-cal-day.imp-is-in-range > span { color: var(--imp-text); }
/* strip — hover preview (antes de confirmar o fim) */
.imp-cal-day.imp-is-hover-range::before { background: rgba(74,127,212,.07); }
.imp-cal-day.imp-is-hover-range > span { color: var(--imp-text); }
.imp-cal-day.imp-is-hover-range-start::before { left: 50%; right: 0; background: rgba(74,127,212,.07); }
.imp-cal-day.imp-is-hover-range-end::before { left: 0; right: 50%; background: rgba(74,127,212,.07); }
.imp-cal-day.imp-is-hover-end > span {
background: rgba(74,127,212,.20);
color: var(--imp-brand-200);
}
/* mês adjacente */
.imp-cal-day.imp-is-other-month > span { color: var(--imp-text-faint); opacity: .3; }
.imp-cal-day.imp-is-other-month { cursor: default; pointer-events: none; }
/* desabilitado */
.imp-cal-day.imp-is-disabled { cursor: not-allowed; pointer-events: none; }
.imp-cal-day.imp-is-disabled > span { opacity: .25; }
/* footer */
.imp-cal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--imp-border-soft);
min-height: 28px;
}
.imp-cal-footer-val {
font-size: var(--imp-text-sm);
color: var(--imp-text-muted);
line-height: 1.4;
}
.imp-cal-footer-val strong { color: var(--imp-text); font-weight: var(--imp-weight-semibold); }
.imp-cal-footer-val em { color: var(--imp-text-faint); font-style: normal; }
/* ----- titulo clicável (abre year picker) ----- */
.imp-cal-title-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
padding: 2px 6px;
margin: -2px -6px;
border-radius: var(--imp-radius-sm);
color: var(--imp-text);
font-family: var(--imp-font-sans);
font-size: var(--imp-text-md);
font-weight: var(--imp-weight-semibold);
cursor: pointer;
transition: background 140ms var(--imp-ease-out), color 140ms var(--imp-ease-out);
line-height: 1;
}
.imp-cal-title-btn:hover {
background: rgba(255,255,255,.06);
color: var(--imp-brand-300);
}
.imp-cal-title-btn svg {
width: 12px;
height: 12px;
opacity: .55;
flex: none;
transition: transform 180ms var(--imp-ease-out), opacity 140ms var(--imp-ease-out);
}
.imp-cal-title-btn:hover svg { opacity: .85; }
.imp-cal-title-btn.imp-is-open svg { transform: rotate(180deg); opacity: .85; }
/* titulo no modo year-picker (span apenas, sem interação) */
.imp-cal-title-years {
font-size: var(--imp-text-sm);
color: var(--imp-text-faint);
letter-spacing: .06em;
text-transform: uppercase;
}
/* badge do ano no titulo */
.imp-cal-year-badge {
font-size: 11px;
font-weight: var(--imp-weight-semibold);
padding: 1px 6px;
border-radius: var(--imp-radius-full);
background: rgba(74,127,212,.14);
color: var(--imp-brand-300);
border: 1px solid rgba(74,127,212,.22);
letter-spacing: .02em;
line-height: 1.6;
}
/* ----- grade de anos ----- */
.imp-cal-year-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 4px 0 2px;
}
.imp-cal-year-cell {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
border-radius: var(--imp-radius-md);
font-family: var(--imp-font-sans);
font-size: var(--imp-text-sm);
font-weight: var(--imp-weight-medium);
color: var(--imp-text-muted);
background: none;
border: 1px solid transparent;
cursor: pointer;
transition:
background 120ms var(--imp-ease-out),
color 120ms var(--imp-ease-out),
border-color 120ms var(--imp-ease-out),
transform 100ms var(--imp-ease-out);
}
.imp-cal-year-cell:hover {
background: rgba(255,255,255,.06);
color: var(--imp-text);
border-color: rgba(255,255,255,.06);
transform: translateY(-1px);
}
.imp-cal-year-cell.imp-is-today {
color: var(--imp-brand-200);
font-weight: var(--imp-weight-semibold);
border-color: rgba(74,127,212,.28);
}
.imp-cal-year-cell.imp-is-selected {
background: linear-gradient(180deg, #3560ad 0%, #1f3f7e 100%);
color: #fff;
border-color: transparent;
font-weight: var(--imp-weight-semibold);
box-shadow: 0 2px 10px rgba(26,56,112,.55);
}
.imp-cal-year-cell.imp-is-selected:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
/* nav de páginas de anos (< 2000–2019 >) */
.imp-cal-year-nav-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
gap: 4px;
}
.imp-cal-year-range {
font-size: var(--imp-text-xs);
color: var(--imp-text-faint);
font-weight: var(--imp-weight-medium);
letter-spacing: .04em;
}
/* ----- dropdown picker (input + popup flutuante) ----- */
.imp-cal-picker {
position: relative;
display: inline-block;
width: 100%;
}
/* input dentro do picker parece clicável */
.imp-cal-picker .imp-input[readonly] {
cursor: pointer;
}
.imp-cal-picker .imp-input[readonly]:hover {
border-color: var(--imp-border-hover);
}
.imp-cal-picker .imp-input[readonly]:focus {
outline: none;
border-color: var(--imp-brand-400);
box-shadow: 0 0 0 3px rgba(74,127,212,.18);
}
.imp-cal-popup {
position: absolute;
z-index: 320;
top: calc(100% + 6px);
left: 0;
/* responsivo: nunca ultrapassa a viewport */
width: min(296px, calc(100vw - 24px));
background: var(--imp-surface);
border: 1px solid var(--imp-border);
border-radius: var(--imp-radius-lg);
box-shadow:
0 8px 32px rgba(0,0,0,.45),
0 2px 8px rgba(0,0,0,.25);
padding: 0;
overflow: hidden;
/* estado fechado */
opacity: 0;
pointer-events: none;
transform: translateY(-6px) scale(.98);
transform-origin: top left;
transition:
opacity 180ms var(--imp-ease-out),
transform 180ms var(--imp-ease-out);
}
.imp-cal-popup.imp-is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* quando as duas classes ficam no mesmo elemento (ImpCalendar renderiza no popup) */
.imp-cal-popup.imp-cal {
display: flex; /* mantém layout de coluna interno do .imp-cal */
flex-direction: column;
width: 100%; /* preenche largura do popup */
border: none;
border-radius: 0;
box-shadow: none;
}
/* ou quando .imp-cal é filho direto do popup */
.imp-cal-popup > .imp-cal {
width: 100%;
border: none;
border-radius: 0;
box-shadow: none;
}
/* =========================================================
UTILS (uso pontual — nao virar vicio)
========================================================= */
.imp-stack { display: flex; flex-direction: column; gap: var(--imp-space-3); }
.imp-row { display: flex; align-items: center; gap: var(--imp-space-3); }
.imp-row-between{display: flex; align-items: center; justify-content: space-between; gap: var(--imp-space-3); }
.imp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--imp-space-4); }
.imp-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--imp-space-4); }
.imp-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--imp-space-4); }
.imp-text-muted { color: var(--imp-text-muted); }
.imp-text-dim { color: var(--imp-text-dim); }
.imp-text-sm { font-size: var(--imp-text-sm); }
.imp-text-xs { font-size: var(--imp-text-xs); }
.imp-text-lg { font-size: var(--imp-text-lg); }
.imp-text-xl { font-size: var(--imp-text-xl); }
@media (prefers-reduced-motion: reduce) {
.imp-btn, .imp-card-hover, .imp-input, .imp-select, .imp-textarea {
transition: none !important;
}
}