/* @gales/arenito - Design System CSS Bundle */
/* Generated: 2026-06-03T01:10:19.543Z */
/* === tokens/colors.css === */
/**
* ============================================================================
* CORES PRIMITIVAS - DESIGN SYSTEM ARENITO
* ============================================================================
*
* Fonte da verdade para todas as cores primitivas do design system.
* Exportado do Figma (UI Kit > Primitive Colors).
*
* ESTRUTURA:
* - Neutral: Base do sistema. Superficies, textos, icones, bordas.
* - Accent: Guiar e chamar a atencao do usuario. Botoes, links, foco.
* - Green: Indicar sucesso ou estado ativo.
* - Yellow: Indicar alertas e avisos.
* - Red: Indicar erros, urgencias e acoes destrutivas.
*
* ESCALA:
* - Light mode: 100 (mais claro) -> 500/800 (mais escuro)
* - Dark mode: 100 (mais escuro) -> 500/800 (mais claro)
* A escala se inverte no dark mode para manter a mesma semantica de uso.
*
* USO:
* - Nao use estas variaveis diretamente nos componentes.
* - Use as variaveis semanticas definidas em variables.css.
* - Excecao: apenas variables.css referencia estas cores primitivas.
*
* @version 3.0.0
* @date 2026-03-04
* @source Figma > UI Kit > Primitive Colors
*/
/* ============================================================================
MODO CLARO (Light)
============================================================================ */
:root,
[data-theme="light"] {
/* NEUTRAL ---------------------------------------------------------------- */
--neutral-100: #F6F6F9;
--neutral-200: #ECEDF2;
--neutral-300: #E6E8EF;
--neutral-400: #CED3E2;
--neutral-500: #7A839F;
--neutral-600: #394360;
--neutral-700: #1E2330;
--neutral-800: #12151F;
/* ACCENT ----------------------------------------------------------------- */
--accent-100: #E8EBF7;
--accent-200: #7391FC;
--accent-300: #3F68FB;
--accent-400: #2441A8;
--accent-500: #001047;
/* GREEN ------------------------------------------------------------------ */
--green-100: #DDE4D2;
--green-200: #7ECE17;
--green-300: #519000;
--green-400: #2D470A;
--green-500: #1A2E00;
/* YELLOW ----------------------------------------------------------------- */
--yellow-100: #F0E5C1;
--yellow-200: #E7BD2C;
--yellow-300: #C89B00;
--yellow-400: #9F7C04;
--yellow-500: #3B2E02;
/* RED -------------------------------------------------------------------- */
--red-100: #F9E1E1;
--red-200: #F17777;
--red-300: #C90A0A;
--red-400: #970707;
--red-500: #240000;
/* SPECIAL ---------------------------------------------------------------- */
--white: #FFFFFF;
--black: #000000;
}
/* ============================================================================
MODO ESCURO (Dark)
============================================================================ */
.dark,
.dark-mode,
[data-theme="dark"] {
/* NEUTRAL ---------------------------------------------------------------- */
--neutral-100: #10141D;
--neutral-200: #141926;
--neutral-300: #1D2333;
--neutral-400: #212533;
--neutral-500: #2A2F41;
--neutral-600: #A2A8B9;
--neutral-700: #BFC3CF;
--neutral-800: #E0E2EB;
/* ACCENT ----------------------------------------------------------------- */
--accent-100: #131A34;
--accent-200: #153193;
--accent-300: #476DF5;
--accent-400: #6B8AFA;
--accent-500: #F1F4FE;
/* GREEN ------------------------------------------------------------------ */
--green-100: #1B2C2B;
--green-200: #2C3627;
--green-300: #519000;
--green-400: #B3D684;
--green-500: #DDE4D2;
/* YELLOW ----------------------------------------------------------------- */
--yellow-100: #242622;
--yellow-200: #9F7C04;
--yellow-300: #C89B00;
--yellow-400: #EFD371;
--yellow-500: #F0E5C1;
/* RED -------------------------------------------------------------------- */
--red-100: #3C2020;
--red-200: #970707;
--red-300: #CC2727;
--red-400: #F49999;
--red-500: #FDEBEB;
}
/* Preferencia do sistema para dark mode */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* NEUTRAL */
--neutral-100: #10141D;
--neutral-200: #141926;
--neutral-300: #1D2333;
--neutral-400: #212533;
--neutral-500: #2A2F41;
--neutral-600: #A2A8B9;
--neutral-700: #BFC3CF;
--neutral-800: #E0E2EB;
/* ACCENT */
--accent-100: #131A34;
--accent-200: #153193;
--accent-300: #476DF5;
--accent-400: #6B8AFA;
--accent-500: #F1F4FE;
/* GREEN */
--green-100: #1B2C2B;
--green-200: #2C3627;
--green-300: #519000;
--green-400: #B3D684;
--green-500: #DDE4D2;
/* YELLOW */
--yellow-100: #242622;
--yellow-200: #9F7C04;
--yellow-300: #C89B00;
--yellow-400: #EFD371;
--yellow-500: #F0E5C1;
/* RED */
--red-100: #3C2020;
--red-200: #970707;
--red-300: #CC2727;
--red-400: #F49999;
--red-500: #FDEBEB;
}
}
/* === tokens/variables.css === */
/**
* ============================================================================
* VARIAVEIS SEMANTICAS - DESIGN SYSTEM ARENITO
* ============================================================================
*
* Fonte da verdade para todas as variaveis semanticas do design system.
* Exportado do Figma (UI Kit > Semantic Colors).
*
* ESTRUTURA DAS CORES SEMANTICAS:
* --{categoria}-{camada}-{tipo}-{variante}
*
* Categorias: text, surface, border, icon
* Camadas: base (tela normal), overlay (modais, drawers, backdrop)
* Tipos: neutral, brand, error, success, warning, alert
* Variantes: default, secondary, subtle, strong, on-black, etc.
*
* A camada "overlay" existe para resolver problemas de contraste quando
* elementos como modais/drawers sao exibidos sobre um backdrop.
*
* USO:
* - Use SEMPRE estas variaveis nos componentes.
* - Nunca use cores primitivas (--accent-300) diretamente.
* - Para modais/drawers, use as variaveis com "-overlay-".
*
* @version 3.0.0
* @date 2026-03-04
* @source Figma > UI Kit > Semantic Colors
*/
/* Importa a paleta de cores primitivas */
:root,
[data-theme="light"] {
/* ============================================================
TEXT - BASE
Cores de texto para contexto normal (paginas, cards, etc)
============================================================ */
/* Text / Base / Neutral */
--text-base-neutral-default: var(--neutral-800);
--text-base-neutral-secondary: var(--neutral-600);
--text-base-neutral-subtle: var(--neutral-500);
--text-base-neutral-white: var(--neutral-100);
/* Text / Base / Error */
--text-base-error-default: var(--red-500);
--text-base-error-secondary: var(--red-400);
--text-base-error-on-black: var(--red-200);
/* Text / Base / Success */
--text-base-success-default: var(--green-500);
--text-base-success-secondary: var(--green-400);
--text-base-success-on-black: var(--green-200);
/* Text / Base / Warning */
--text-base-warning-default: var(--yellow-500);
--text-base-warning-secondary: var(--yellow-300);
--text-base-warning-on-black: var(--yellow-200);
/* ============================================================
TEXT - OVERLAY
Cores de texto para modais, drawers e elementos sobre backdrop
============================================================ */
/* Text / Overlay / Neutral */
--text-overlay-neutral-default: var(--neutral-800);
--text-overlay-neutral-secondary: var(--neutral-600);
--text-overlay-neutral-subtle: var(--neutral-500);
--text-overlay-neutral-white: var(--neutral-100);
/* Text / Overlay / Error */
--text-overlay-error-default: var(--red-500);
--text-overlay-error-secondary: var(--red-400);
--text-overlay-error-on-black: var(--red-200);
/* Text / Overlay / Success */
--text-overlay-success-default: var(--green-500);
--text-overlay-success-secondary: var(--green-400);
--text-overlay-success-on-black: var(--green-200);
/* Text / Overlay / Warning */
--text-overlay-warning-default: var(--yellow-500);
--text-overlay-warning-secondary: var(--yellow-300);
--text-overlay-warning-on-black: var(--yellow-200);
/* ============================================================
SURFACE - BASE
Cores de fundo para contexto normal
============================================================ */
/* Surface / Base / Neutral */
--surface-base-neutral-page-default: var(--neutral-100);
--surface-base-neutral-page-deep: var(--neutral-200);
--surface-base-neutral-container-default: var(--neutral-100);
--surface-base-neutral-container-deep: var(--neutral-200);
--surface-base-neutral-container-emphasis: var(--neutral-300);
--surface-base-neutral-container-hover: var(--neutral-200);
--surface-base-neutral-container-default-on-black: var(--neutral-800);
--surface-base-neutral-container-hover-on-black: var(--neutral-700);
/* Surface / Base / Brand */
--surface-base-brand-container-low: var(--accent-200);
--surface-base-brand-container-medium: var(--accent-300);
--surface-base-brand-container-high: var(--accent-400);
/* Surface / Base / Alert */
--surface-base-alert-container-error: var(--red-100);
--surface-base-alert-container-warning: var(--yellow-100);
--surface-base-alert-container-success: var(--green-100);
/* ============================================================
SURFACE - OVERLAY
Cores de fundo para modais, drawers e elementos sobre backdrop
============================================================ */
/* Surface / Overlay / Neutral */
--surface-overlay-neutral-backdrop: var(--neutral-800);
--surface-overlay-neutral-container-default: var(--neutral-100);
--surface-overlay-neutral-container-deep: var(--neutral-200);
--surface-overlay-neutral-container-emphasis: var(--neutral-300);
--surface-overlay-neutral-container-hover: var(--neutral-200);
--surface-overlay-neutral-container-default-on-black: var(--neutral-800);
--surface-overlay-neutral-container-hover-on-black: var(--neutral-700);
/* Surface / Overlay / Brand */
--surface-overlay-brand-container-low: var(--accent-200);
--surface-overlay-brand-container-medium: var(--accent-300);
--surface-overlay-brand-container-high: var(--accent-400);
/* Surface / Overlay / Error (botão destrutivo em contexto overlay) */
--surface-overlay-error-container-low: var(--red-200);
--surface-overlay-error-container-medium: var(--red-300);
--surface-overlay-error-container-high: var(--red-400);
/* Surface / Overlay / Alert */
--surface-overlay-alert-container-error: var(--red-100);
--surface-overlay-alert-container-warning: var(--yellow-100);
--surface-overlay-alert-container-success: var(--green-100);
/* ============================================================
BORDER - BASE
Cores de borda para contexto normal
============================================================ */
/* Border / Base / Neutral */
--border-base-neutral-default: var(--neutral-400);
--border-base-neutral-strong: var(--neutral-500);
--border-base-neutral-subtle: var(--neutral-300);
--border-base-neutral-on-black: var(--neutral-600);
/* Border / Base / Brand */
--border-base-brand-default: var(--accent-300);
/* Border / Base / Error */
--border-base-error-default: var(--red-300);
--border-base-error-strong: var(--red-500);
--border-base-error-subtle: var(--red-200);
/* ============================================================
BORDER - OVERLAY
Cores de borda para modais, drawers e elementos sobre backdrop
============================================================ */
/* Border / Overlay / Neutral */
--border-overlay-neutral-default: var(--neutral-400);
--border-overlay-neutral-strong: var(--neutral-500);
--border-overlay-neutral-subtle: var(--neutral-300);
--border-overlay-neutral-on-black: var(--neutral-600);
/* Border / Overlay / Brand */
--border-overlay-brand-default: var(--accent-300);
/* Border / Overlay / Error */
--border-overlay-error-default: var(--red-300);
--border-overlay-error-strong: var(--red-500);
--border-overlay-error-subtle: var(--red-200);
/* ============================================================
ICON - BASE
Cores de icone para contexto normal
============================================================ */
/* Icon / Base / Neutral */
--icon-base-neutral-default: var(--neutral-800);
--icon-base-neutral-secondary: var(--neutral-600);
--icon-base-neutral-subtle: var(--neutral-500);
--icon-base-neutral-white: var(--neutral-100);
/* Icon / Base / Brand */
--icon-base-brand-default: var(--accent-300);
--icon-base-brand-secondary: var(--accent-500);
--icon-base-brand-on-black: var(--accent-200);
/* Icon / Base / Error */
--icon-base-error-default: var(--red-300);
--icon-base-error-secondary: var(--red-500);
--icon-base-error-on-black: var(--red-200);
/* Icon / Base / Success */
--icon-base-success-default: var(--green-300);
--icon-base-success-secondary: var(--green-500);
--icon-base-success-on-black: var(--green-200);
/* Icon / Base / Warning */
--icon-base-warning-default: var(--yellow-300);
--icon-base-warning-secondary: var(--yellow-500);
--icon-base-warning-on-black: var(--yellow-200);
/* ============================================================
ICON - OVERLAY
Cores de icone para modais, drawers e elementos sobre backdrop
============================================================ */
/* Icon / Overlay / Neutral */
--icon-overlay-neutral-default: var(--neutral-800);
--icon-overlay-neutral-secondary: var(--neutral-600);
--icon-overlay-neutral-subtle: var(--neutral-500);
--icon-overlay-neutral-white: var(--neutral-100);
/* Icon / Overlay / Brand */
--icon-overlay-brand-default: var(--accent-300);
--icon-overlay-brand-secondary: var(--accent-500);
--icon-overlay-brand-on-black: var(--accent-200);
/* Icon / Overlay / Error */
--icon-overlay-error-default: var(--red-300);
--icon-overlay-error-secondary: var(--red-500);
--icon-overlay-error-on-black: var(--red-200);
/* Icon / Overlay / Success */
--icon-overlay-success-default: var(--green-300);
--icon-overlay-success-secondary: var(--green-500);
--icon-overlay-success-on-black: var(--green-200);
/* Icon / Overlay / Warning */
--icon-overlay-warning-default: var(--yellow-300);
--icon-overlay-warning-secondary: var(--yellow-500);
--icon-overlay-warning-on-black: var(--yellow-200);
/* ============================================================
TIPOGRAFIA
============================================================ */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
/* Tamanhos - Headers */
--font-size-h1: 32px;
--font-size-h2: 20px;
/* Tamanhos - Paragraphs */
--font-size-p1: 16px;
--font-size-p2: 16px;
--font-size-p3: 14px;
--font-size-p4: 14px;
--font-size-p5: 12px;
--font-size-p6: 12px;
/* Line Heights - Headers */
--line-height-h1: 40px;
--line-height-h2: 30px;
/* Line Heights - Paragraphs */
--line-height-p1: 26px;
--line-height-p2: 26px;
--line-height-p3: 24px;
--line-height-p4: 24px;
--line-height-p5: 22px;
--line-height-p6: 22px;
/* Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* ============================================================
ESPACAMENTOS
Todos multiplos de 4px (excecao: 12px).
Micro: dentro de componentes | Macro: layout e secoes.
============================================================ */
/* Micro (componentes: padding, gap, margin interna) */
--spacing-1: 4px; /* 0.25rem */
--spacing-2: 8px; /* 0.5rem */
--spacing-3: 12px; /* 0.75rem */
--spacing-4: 16px; /* 1rem */
--spacing-5: 20px; /* 1.25rem */
--spacing-6: 24px; /* 1.5rem */
/* Macro (layout: secoes, paginas, espaco entre blocos) */
--spacing-7: 32px; /* 2rem */
--spacing-8: 40px; /* 2.5rem */
--spacing-9: 48px; /* 3rem */
--spacing-10: 56px; /* 3.5rem */
--spacing-11: 64px; /* 4rem */
--spacing-12: 72px; /* 4.5rem */
--spacing-13: 80px; /* 5rem */
--spacing-14: 88px; /* 5.5rem */
--spacing-15: 96px; /* 6rem */
--spacing-16: 120px; /* 7.5rem */
/* Aliases legado (compatibilidade com componentes existentes) */
--spacing-xs: var(--spacing-1);
--spacing-sm: var(--spacing-2);
--spacing-md: var(--spacing-4);
--spacing-lg: var(--spacing-5);
--spacing-xl: var(--spacing-6);
--spacing-2xl: var(--spacing-7);
--spacing-3xl: var(--spacing-8);
--spacing-4xl: var(--spacing-9);
--spacing-5xl: var(--spacing-10);
--spacing-6xl: var(--spacing-11);
--spacing-7xl: var(--spacing-12);
--spacing-8xl: var(--spacing-13);
--spacing-9xl: var(--spacing-14);
--spacing-10xl: var(--spacing-15);
--spacing-11xl: var(--spacing-16);
/* ============================================================
BORDER RADIUS
============================================================ */
--radius-none: 0;
--radius-sm: 2px;
--radius-default: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-full: 9999px;
/* ============================================================
GRID
============================================================ */
/* Grid Primario (12 colunas) — uso geral */
--grid-columns: 12;
--grid-gutter: 32px;
--grid-margin: 72px;
--grid-max-width: 1440px;
/* Grid Secundario (10 colunas) — formularios com stepper */
--grid-columns-form: 10;
--grid-gutter-form: 56px;
/* Grid Terciario (6 colunas) — portal de noticias */
--grid-columns-news: 6;
--grid-gutter-news: 96px;
--grid-margin-news: 200px;
/* ============================================================
SOMBRAS
============================================================ */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* ============================================================
TRANSICOES
============================================================ */
--transition-fast: 150ms ease-in-out;
--transition-base: 200ms ease-in-out;
--transition-slow: 300ms ease-in-out;
/* ============================================================
Z-INDEX
============================================================ */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* ============================================================================
MODO ESCURO (Dark) - CORES SEMANTICAS
============================================================================
No dark mode, as primitivas ja se invertem (via colors.css).
Aqui sobrescrevemos apenas os tokens semanticos que apontam para
primitivas diferentes no dark mode.
============================================================================ */
.dark,
.dark-mode,
[data-theme="dark"] {
/* TEXT - BASE */
--text-base-neutral-default: var(--neutral-800);
--text-base-neutral-secondary: var(--neutral-700);
--text-base-neutral-subtle: var(--neutral-600);
--text-base-neutral-white: var(--neutral-800);
--text-base-error-default: var(--red-500);
--text-base-error-secondary: var(--red-400);
--text-base-error-on-black: var(--red-400);
--text-base-success-default: var(--green-500);
--text-base-success-secondary: var(--green-400);
--text-base-success-on-black: var(--green-400);
--text-base-warning-default: var(--yellow-400);
--text-base-warning-secondary: var(--yellow-300);
--text-base-warning-on-black: var(--yellow-500);
/* TEXT - OVERLAY */
--text-overlay-neutral-default: var(--neutral-800);
--text-overlay-neutral-secondary: var(--neutral-700);
--text-overlay-neutral-subtle: var(--neutral-600);
--text-overlay-neutral-white: var(--neutral-800);
--text-overlay-error-default: var(--red-500);
--text-overlay-error-secondary: var(--red-400);
--text-overlay-error-on-black: var(--red-400);
--text-overlay-success-default: var(--green-500);
--text-overlay-success-secondary: var(--green-400);
--text-overlay-success-on-black: var(--green-300);
--text-overlay-warning-default: var(--yellow-400);
--text-overlay-warning-secondary: var(--yellow-300);
--text-overlay-warning-on-black: var(--yellow-500);
/* SURFACE - BASE */
--surface-base-neutral-page-default: var(--neutral-200);
--surface-base-neutral-page-deep: var(--neutral-100);
--surface-base-neutral-container-default: var(--neutral-200);
--surface-base-neutral-container-deep: var(--neutral-100);
--surface-base-neutral-container-emphasis: var(--neutral-300);
--surface-base-neutral-container-hover: var(--neutral-400);
--surface-base-neutral-container-default-on-black: var(--neutral-200);
--surface-base-neutral-container-hover-on-black: var(--neutral-300);
--surface-base-brand-container-low: var(--accent-200);
--surface-base-brand-container-medium: var(--accent-300);
--surface-base-brand-container-high: var(--accent-400);
--surface-base-alert-container-error: var(--red-100);
--surface-base-alert-container-warning: var(--yellow-100);
--surface-base-alert-container-success: var(--green-100);
/* SURFACE - OVERLAY */
--surface-overlay-neutral-backdrop: var(--neutral-100);
--surface-overlay-neutral-container-default: var(--neutral-300);
--surface-overlay-neutral-container-deep: var(--neutral-500);
--surface-overlay-neutral-container-emphasis: var(--neutral-300);
--surface-overlay-neutral-container-hover: var(--neutral-500);
--surface-overlay-neutral-container-default-on-black: var(--neutral-200);
--surface-overlay-neutral-container-hover-on-black: var(--neutral-300);
--surface-overlay-brand-container-low: var(--accent-200);
--surface-overlay-brand-container-medium: var(--accent-300);
--surface-overlay-brand-container-high: var(--accent-400);
--surface-overlay-error-container-low: var(--red-200);
--surface-overlay-error-container-medium: var(--red-300);
--surface-overlay-error-container-high: var(--red-400);
--surface-overlay-alert-container-error: var(--red-100);
--surface-overlay-alert-container-warning: var(--yellow-100);
--surface-overlay-alert-container-success: var(--green-100);
/* BORDER - BASE */
--border-base-neutral-default: var(--neutral-500);
--border-base-neutral-strong: color-mix(in srgb, var(--neutral-600) 40%, transparent);
--border-base-neutral-subtle: var(--neutral-300);
--border-base-neutral-on-black: var(--neutral-500);
--border-base-brand-default: var(--accent-300);
--border-base-error-default: var(--red-300);
--border-base-error-strong: var(--red-400);
--border-base-error-subtle: var(--red-400);
/* BORDER - OVERLAY */
--border-overlay-neutral-default: color-mix(in srgb, var(--neutral-800) 16%, transparent);
--border-overlay-neutral-strong: color-mix(in srgb, var(--neutral-800) 40%, transparent);
--border-overlay-neutral-subtle: var(--neutral-400);
--border-overlay-neutral-on-black: var(--neutral-500);
--border-overlay-error-default: var(--red-300);
--border-overlay-error-strong: var(--red-400);
--border-overlay-error-subtle: var(--red-400);
/* ICON - BASE */
--icon-base-neutral-default: var(--neutral-800);
--icon-base-neutral-secondary: var(--neutral-600);
--icon-base-neutral-subtle: var(--neutral-600);
--icon-base-neutral-white: var(--neutral-800);
--icon-base-brand-default: var(--accent-300);
--icon-base-brand-secondary: var(--accent-500);
--icon-base-brand-on-black: var(--accent-200);
--icon-base-error-default: var(--red-300);
--icon-base-error-secondary: var(--red-400);
--icon-base-error-on-black: var(--red-300);
--icon-base-success-default: var(--green-300);
--icon-base-success-secondary: var(--green-500);
--icon-base-success-on-black: var(--green-400);
--icon-base-warning-default: var(--yellow-400);
--icon-base-warning-secondary: var(--yellow-500);
--icon-base-warning-on-black: var(--yellow-400);
/* ICON - OVERLAY */
--icon-overlay-neutral-default: var(--neutral-800);
--icon-overlay-neutral-secondary: var(--neutral-600);
--icon-overlay-neutral-subtle: var(--neutral-600);
--icon-overlay-neutral-white: var(--neutral-800);
--icon-overlay-brand-default: var(--accent-300);
--icon-overlay-brand-secondary: var(--accent-500);
--icon-overlay-brand-on-black: var(--accent-400);
--icon-overlay-error-default: var(--red-300);
--icon-overlay-error-secondary: var(--red-400);
--icon-overlay-error-on-black: var(--red-300);
--icon-overlay-success-default: var(--green-300);
--icon-overlay-success-secondary: var(--green-500);
--icon-overlay-success-on-black: var(--green-400);
--icon-overlay-warning-default: var(--yellow-400);
--icon-overlay-warning-secondary: var(--yellow-500);
--icon-overlay-warning-on-black: var(--yellow-400);
}
/* Preferencia do sistema para dark mode */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* TEXT - BASE */
--text-base-neutral-default: var(--neutral-800);
--text-base-neutral-secondary: var(--neutral-700);
--text-base-neutral-subtle: var(--neutral-600);
--text-base-neutral-white: var(--neutral-800);
--text-base-error-default: var(--red-500);
--text-base-error-secondary: var(--red-400);
--text-base-error-on-black: var(--red-400);
--text-base-success-default: var(--green-500);
--text-base-success-secondary: var(--green-400);
--text-base-success-on-black: var(--green-400);
--text-base-warning-default: var(--yellow-400);
--text-base-warning-secondary: var(--yellow-300);
--text-base-warning-on-black: var(--yellow-500);
/* TEXT - OVERLAY */
--text-overlay-neutral-default: var(--neutral-800);
--text-overlay-neutral-secondary: var(--neutral-700);
--text-overlay-neutral-subtle: var(--neutral-600);
--text-overlay-neutral-white: var(--neutral-800);
--text-overlay-error-default: var(--red-500);
--text-overlay-error-secondary: var(--red-400);
--text-overlay-error-on-black: var(--red-400);
--text-overlay-success-default: var(--green-500);
--text-overlay-success-secondary: var(--green-400);
--text-overlay-success-on-black: var(--green-300);
--text-overlay-warning-default: var(--yellow-400);
--text-overlay-warning-secondary: var(--yellow-300);
--text-overlay-warning-on-black: var(--yellow-500);
/* SURFACE - BASE */
--surface-base-neutral-page-default: var(--neutral-200);
--surface-base-neutral-page-deep: var(--neutral-100);
--surface-base-neutral-container-default: var(--neutral-200);
--surface-base-neutral-container-deep: var(--neutral-100);
--surface-base-neutral-container-emphasis: var(--neutral-300);
--surface-base-neutral-container-hover: var(--neutral-400);
--surface-base-neutral-container-default-on-black: var(--neutral-200);
--surface-base-neutral-container-hover-on-black: var(--neutral-300);
--surface-base-brand-container-low: var(--accent-200);
--surface-base-brand-container-medium: var(--accent-300);
--surface-base-brand-container-high: var(--accent-400);
--surface-base-alert-container-error: var(--red-100);
--surface-base-alert-container-warning: var(--yellow-100);
--surface-base-alert-container-success: var(--green-100);
/* SURFACE - OVERLAY */
--surface-overlay-neutral-backdrop: var(--neutral-100);
--surface-overlay-neutral-container-default: var(--neutral-300);
--surface-overlay-neutral-container-deep: var(--neutral-500);
--surface-overlay-neutral-container-emphasis: var(--neutral-300);
--surface-overlay-neutral-container-hover: var(--neutral-500);
--surface-overlay-neutral-container-default-on-black: var(--neutral-200);
--surface-overlay-neutral-container-hover-on-black: var(--neutral-300);
--surface-overlay-brand-container-low: var(--accent-200);
--surface-overlay-brand-container-medium: var(--accent-300);
--surface-overlay-brand-container-high: var(--accent-400);
--surface-overlay-error-container-low: var(--red-200);
--surface-overlay-error-container-medium: var(--red-300);
--surface-overlay-error-container-high: var(--red-400);
--surface-overlay-alert-container-error: var(--red-100);
--surface-overlay-alert-container-warning: var(--yellow-100);
--surface-overlay-alert-container-success: var(--green-100);
/* BORDER - BASE */
--border-base-neutral-default: var(--neutral-500);
--border-base-neutral-strong: color-mix(in srgb, var(--neutral-600) 40%, transparent);
--border-base-neutral-subtle: var(--neutral-300);
--border-base-neutral-on-black: var(--neutral-500);
--border-base-brand-default: var(--accent-300);
--border-base-error-default: var(--red-300);
--border-base-error-strong: var(--red-400);
--border-base-error-subtle: var(--red-400);
/* BORDER - OVERLAY */
--border-overlay-neutral-default: color-mix(in srgb, var(--neutral-800) 16%, transparent);
--border-overlay-neutral-strong: color-mix(in srgb, var(--neutral-800) 40%, transparent);
--border-overlay-neutral-subtle: var(--neutral-400);
--border-overlay-neutral-on-black: var(--neutral-500);
--border-overlay-brand-default: var(--accent-300);
--border-overlay-error-default: var(--red-300);
--border-overlay-error-strong: var(--red-400);
--border-overlay-error-subtle: var(--red-400);
/* ICON - BASE */
--icon-base-neutral-default: var(--neutral-800);
--icon-base-neutral-secondary: var(--neutral-600);
--icon-base-neutral-subtle: var(--neutral-600);
--icon-base-neutral-white: var(--neutral-800);
--icon-base-brand-default: var(--accent-300);
--icon-base-brand-secondary: var(--accent-500);
--icon-base-brand-on-black: var(--accent-200);
--icon-base-error-default: var(--red-300);
--icon-base-error-secondary: var(--red-400);
--icon-base-error-on-black: var(--red-300);
--icon-base-success-default: var(--green-300);
--icon-base-success-secondary: var(--green-500);
--icon-base-success-on-black: var(--green-400);
--icon-base-warning-default: var(--yellow-400);
--icon-base-warning-secondary: var(--yellow-500);
--icon-base-warning-on-black: var(--yellow-400);
/* ICON - OVERLAY */
--icon-overlay-neutral-default: var(--neutral-800);
--icon-overlay-neutral-secondary: var(--neutral-600);
--icon-overlay-neutral-subtle: var(--neutral-600);
--icon-overlay-neutral-white: var(--neutral-800);
--icon-overlay-brand-default: var(--accent-300);
--icon-overlay-brand-secondary: var(--accent-500);
--icon-overlay-brand-on-black: var(--accent-400);
--icon-overlay-error-default: var(--red-300);
--icon-overlay-error-secondary: var(--red-400);
--icon-overlay-error-on-black: var(--red-300);
--icon-overlay-success-default: var(--green-300);
--icon-overlay-success-secondary: var(--green-500);
--icon-overlay-success-on-black: var(--green-400);
--icon-overlay-warning-default: var(--yellow-400);
--icon-overlay-warning-secondary: var(--yellow-500);
--icon-overlay-warning-on-black: var(--yellow-400);
}
}
/* === tokens/legacy-aliases.css === */
/**
* ============================================================================
* ALIASES LEGADOS — TOKENS `--color-*` (CAMADA DE COMPATIBILIDADE)
* ============================================================================
*
* ⚠️ TRANSITÓRIO — NÃO USE ESTES TOKENS EM CÓDIGO NOVO.
*
* Esta camada existe apenas para que componentes legados que ainda referenciam
* o sistema de tokens antigo (`--color-*`) continuem renderizando corretamente
* enquanto a migração para os tokens semânticos (`--surface-base-*`,
* `--text-base-*`, `--border-base-*`) e primitivos (`--neutral-*`, `--accent-*`,
* etc.) não é concluída.
*
* Antes desta camada, ~44 tokens `--color-*` eram usados SEM fallback e ficavam
* indefinidos no bundle concatenado (`dist/arenito.css`) — fazendo `.card`,
* `detail`, `report` e outros saírem transparentes/sem borda em consumidores
* que carregam o CSS via `` (sem build PostCSS/Tailwind).
*
* ESTRATÉGIA DE MAPEAMENTO:
* - Tokens com NOME DE PAPEL (text-*, bg-*, border-*) → token SEMÂNTICO
* equivalente (alinhado ao design system atual).
* - Tokens de MATIZ/STATUS puro (primary, danger, success, warning) e ESCALAS
* NUMÉRICAS (neutral-300, accent-400…) → PRIMITIVA mais próxima, pois são
* usados de forma polimórfica (fundo, texto, borda) e só a primitiva
* reproduz o valor em todos os papéis. Primitivas e semânticos já invertem
* automaticamente no dark mode, então não é preciso redefinir aqui por tema.
*
* PLANO DE REMOÇÃO: ver docs/arquitetura/migracao-tokens-legados.md
*
* @version 1.0.0
* @date 2026-06-02
* @deprecated Remover quando a migração dos componentes for concluída.
*/
:root {
/* ============================================================
TEXTO (papel → semântico)
============================================================ */
--color-text-primary: var(--text-base-neutral-default);
--color-text-secondary: var(--text-base-neutral-secondary);
--color-text-muted: var(--text-base-neutral-subtle);
--color-text-light: var(--text-base-neutral-white);
/* ============================================================
FUNDO / SUPERFÍCIE (papel → semântico)
Hierarquia legada: primary → secondary → tertiary (claro→escuro)
============================================================ */
--color-bg-primary: var(--surface-base-neutral-container-default);
--color-bg-secondary: var(--surface-base-neutral-container-deep);
--color-bg-tertiary: var(--surface-base-neutral-container-emphasis);
--color-bg-dark: var(--surface-base-neutral-container-default-on-black);
/* ============================================================
BORDA (papel → semântico)
============================================================ */
--color-border: var(--border-base-neutral-default);
--color-border-light: var(--border-base-neutral-subtle);
--color-border-dark: var(--border-base-neutral-strong);
/* ============================================================
MATIZ / STATUS (uso polimórfico → primitiva mais próxima)
============================================================ */
--color-primary: var(--accent-300);
--color-primary-dark: var(--accent-400);
--color-danger: var(--red-300);
--color-danger-light: var(--red-100);
--color-success: var(--green-300);
--color-success-light: var(--green-100);
--color-warning: var(--yellow-200);
--color-warning-light: var(--yellow-100);
/* ============================================================
ESCALAS NUMÉRICAS LEGADAS (→ primitivas equivalentes)
Valores sem correspondência exata (neutral-50, accent-600)
são fixados na extremidade mais próxima da escala atual.
============================================================ */
/* Neutral */
--color-neutral-50: var(--neutral-100);
--color-neutral-100: var(--neutral-100);
--color-neutral-200: var(--neutral-200);
--color-neutral-300: var(--neutral-300);
--color-neutral-400: var(--neutral-400);
--color-neutral-500: var(--neutral-500);
--color-neutral-600: var(--neutral-600);
--color-neutral-700: var(--neutral-700);
--color-neutral-800: var(--neutral-800);
/* Accent (brand) */
--color-accent-100: var(--accent-100);
--color-accent-200: var(--accent-200);
--color-accent-300: var(--accent-300);
--color-accent-400: var(--accent-400);
--color-accent-500: var(--accent-500);
--color-accent-600: var(--accent-500);
/* Green (success) */
--color-green-100: var(--green-100);
--color-green-300: var(--green-300);
--color-green-400: var(--green-400);
--color-green-500: var(--green-500);
/* Red (danger) */
--color-red-300: var(--red-300);
--color-red-400: var(--red-400);
--color-red-500: var(--red-500);
/* Yellow (warning) */
--color-yellow-300: var(--yellow-300);
--color-yellow-400: var(--yellow-400);
--color-yellow-500: var(--yellow-500);
}
/* === foundation/reset.css === */
/**
* Reset e Normalizacao Basica
* Extraido de design-system.css
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
height: 100%;
overflow-x: hidden;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--font-size-p2);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p2);
color: var(--text-base-neutral-default, var(--color-text-primary));
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
position: relative;
height: auto;
}
/* Pseudo-elemento para garantir background em toda altura visivel */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
z-index: -1;
pointer-events: none;
}
/* === foundation/typography.css === */
/**
* ============================================================================
* TIPOGRAFIA - DESIGN SYSTEM ARENITO
* ============================================================================
*
* Classes utilitarias para tipografia baseadas no Figma (UI Kit > Tipografia).
*
* FONTES:
* - Headers: Space Grotesk (Medium 500, Bold 700)
* - Paragraphs: Inter (Regular 400, Medium 500)
*
* TOKENS:
* - Header 01: 32px / 40px / Bold
* - Header 02: 20px / 30px / Medium
* - Paragraph 01: 16px / 26px / Medium
* - Paragraph 02: 16px / 26px / Regular
* - Paragraph 03: 14px / 24px / Medium
* - Paragraph 04: 14px / 24px / Regular
* - Paragraph 05: 12px / 22px / Medium
* - Paragraph 06: 12px / 22px / Regular
*
* @version 2.0.0
* @date 2026-03-05
* @source Figma > UI Kit > Tipografia
*/
/* ============================================================
RESET TIPOGRÁFICO GLOBAL
============================================================ */
/* Aplicar fonte padrão em todo o sistema */
body {
font-family: var(--font-body);
font-size: var(--font-size-p1);
line-height: var(--line-height-p1);
font-weight: var(--font-weight-regular);
color: var(--text-base-neutral-default);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Resetar todos os headings para usar a fonte do sistema */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
color: var(--text-base-neutral-default);
margin: 0;
padding: 0;
line-height: 1.2;
}
/* Resetar parágrafos */
p {
font-family: var(--font-body);
margin: 0;
padding: 0;
}
/* ============================================================
HEADINGS (TÍTULOS) - Space Grotesk
============================================================ */
/**
* Header 01
* Uso: Títulos principais de páginas e seções importantes
*/
h1,
.h1,
.heading-1,
.header-01 {
font-family: var(--font-heading);
font-size: var(--font-size-h1);
line-height: var(--line-height-h1);
font-weight: var(--font-weight-bold);
color: var(--text-base-neutral-default);
}
/**
* Header 02
* Uso: Subtítulos e títulos de seções secundárias
*/
h2,
.h2,
.heading-2,
.header-02 {
font-family: var(--font-heading);
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
/**
* Headers menores (h3-h6)
* Mantém consistência com o design system
*/
h3, .h3 {
font-family: var(--font-heading);
font-size: 18px;
line-height: 28px;
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
h4, .h4 {
font-family: var(--font-heading);
font-size: 16px;
line-height: 24px;
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
h5, .h5,
h6, .h6 {
font-family: var(--font-body);
font-size: var(--font-size-p3);
line-height: var(--line-height-p3);
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
/* ============================================================
PARAGRAPHS (PARÁGRAFOS) - Inter
============================================================ */
/**
* Paragraph 01
* Uso: Texto principal, conteúdo importante
* font-size: 16px, line-height: 26px, weight: medium
*/
.p1,
.paragraph-01,
.text-base-medium {
font-family: var(--font-body);
font-size: var(--font-size-p1);
line-height: var(--line-height-p1);
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
/**
* Paragraph 02
* Uso: Texto de corpo regular
* font-size: 16px, line-height: 26px, weight: regular
*/
.p2,
.paragraph-02,
.text-base,
.text-base-regular {
font-family: var(--font-body);
font-size: var(--font-size-p2);
line-height: var(--line-height-p2);
font-weight: var(--font-weight-regular);
color: var(--text-base-neutral-default);
}
/**
* Paragraph 03
* Uso: Labels, badges, botões
* font-size: 14px, line-height: 24px, weight: medium
*/
.p3,
.paragraph-03,
.text-sm-medium {
font-family: var(--font-body);
font-size: var(--font-size-p3);
line-height: var(--line-height-p3);
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
/**
* Paragraph 04
* Uso: Texto secundário pequeno
* font-size: 14px, line-height: 24px, weight: regular
*/
.p4,
.paragraph-04,
.text-sm,
.text-sm-regular {
font-family: var(--font-body);
font-size: var(--font-size-p4);
line-height: var(--line-height-p4);
font-weight: var(--font-weight-regular);
color: var(--text-base-neutral-default);
}
/**
* Paragraph 05
* Uso: Texto auxiliar, metadados
* font-size: 12px, line-height: 22px, weight: medium
*/
.p5,
.paragraph-05,
.text-xs-medium {
font-family: var(--font-body);
font-size: var(--font-size-p5);
line-height: var(--line-height-p5);
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
/**
* Paragraph 06
* Uso: Notas de rodapé, timestamps
* font-size: 12px, line-height: 22px, weight: regular
*/
.p6,
.paragraph-06,
.text-xs,
.text-xs-regular {
font-family: var(--font-body);
font-size: var(--font-size-p6);
line-height: var(--line-height-p6);
font-weight: var(--font-weight-regular);
color: var(--text-base-neutral-default);
}
/* ============================================================
MODIFICADORES DE PESO (FONT WEIGHT)
============================================================ */
.font-regular,
.fw-regular {
font-weight: var(--font-weight-regular) !important;
}
.font-medium,
.fw-medium {
font-weight: var(--font-weight-medium) !important;
}
.font-bold,
.fw-bold,
.font-weight-bold {
font-weight: var(--font-weight-bold) !important;
}
/* ============================================================
MODIFICADORES DE COR DE TEXTO
============================================================ */
.text-primary {
color: var(--text-base-neutral-default) !important;
}
.text-secondary {
color: var(--text-base-neutral-secondary) !important;
}
.text-muted {
color: var(--text-base-neutral-subtle) !important;
}
.text-light {
color: var(--text-base-neutral-white) !important;
}
.text-success {
color: var(--text-base-success-default) !important;
}
.text-warning {
color: var(--text-base-warning-default) !important;
}
.text-danger {
color: var(--text-base-error-default) !important;
}
.text-accent {
color: var(--accent-300) !important;
}
/* ============================================================
ALINHAMENTO DE TEXTO
============================================================ */
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-justify {
text-align: justify !important;
}
/* ============================================================
TRANSFORMAÇÃO DE TEXTO
============================================================ */
.text-uppercase {
text-transform: uppercase !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-normal {
text-transform: none !important;
}
/* ============================================================
DECORAÇÃO DE TEXTO
============================================================ */
.text-underline {
text-decoration: underline !important;
}
.text-line-through {
text-decoration: line-through !important;
}
.text-no-decoration {
text-decoration: none !important;
}
/* ============================================================
ESTILOS DE TEXTO
============================================================ */
.text-italic {
font-style: italic !important;
}
.text-normal-style {
font-style: normal !important;
}
/* ============================================================
QUEBRA DE LINHA E OVERFLOW
============================================================ */
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-wrap {
white-space: normal !important;
}
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* ============================================================
CLASSES AUXILIARES PARA LINKS
============================================================ */
a {
color: var(--accent-300);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--accent-400);
text-decoration: underline;
}
a:focus {
outline: 2px solid var(--accent-300);
outline-offset: 2px;
}
.link-primary {
color: var(--accent-300);
}
.link-primary:hover {
color: var(--accent-400);
}
.link-secondary {
color: var(--text-base-neutral-secondary);
}
.link-secondary:hover {
color: var(--text-base-neutral-default);
}
.link-muted {
color: var(--text-base-neutral-subtle);
}
.link-muted:hover {
color: var(--text-base-neutral-secondary);
}
/* ============================================================
LISTAS
============================================================ */
ul, ol {
font-family: var(--font-body);
font-size: var(--font-size-p2);
line-height: var(--line-height-p2);
color: var(--text-base-neutral-default);
}
.list-unstyled {
list-style: none;
padding-left: 0;
margin: 0;
}
/* ============================================================
CASOS ESPECIAIS - COMPATIBILIDADE COM CÓDIGO LEGADO
============================================================ */
/* Garantir que elementos antigos usem a fonte correta */
table,
form,
input,
select,
textarea,
button,
.form-control,
.btn {
font-family: var(--font-body);
}
/* Labels de formulário */
label,
.form-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
/* Placeholders */
::placeholder {
color: var(--text-base-neutral-subtle);
opacity: 1;
}
:-ms-input-placeholder {
color: var(--text-base-neutral-subtle);
}
::-ms-input-placeholder {
color: var(--text-base-neutral-subtle);
}
/* ============================================
FONT SIZES RESPONSIVOS
Escalam fluidamente via clamp() — sem media queries.
============================================ */
.fs-1 { font-size: clamp(1.75rem, 1.5rem + 0.5vw, 2rem) !important; } /* ~28-32px */
.fs-2 { font-size: clamp(1.375rem, 1.2rem + 0.4vw, 1.5rem) !important; } /* ~22-24px */
.fs-3 { font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem) !important; } /* ~18-20px */
.fs-4 { font-size: clamp(1rem, 0.95rem + 0.15vw, 1.125rem) !important; } /* ~16-18px */
.fs-5 { font-size: clamp(0.875rem, 0.85rem + 0.1vw, 1rem) !important; } /* ~14-16px */
.fs-6 { font-size: clamp(0.75rem, 0.73rem + 0.05vw, 0.875rem) !important; } /* ~12-14px */
/* === foundation/grid.css === */
/**
* ============================================================================
* GRID SYSTEM - DESIGN SYSTEM ARENITO
* ============================================================================
*
* Sistema de grid responsivo baseado em CSS Grid.
* Exportado do Figma (UI Kit > Grid e Espacamento).
*
* TRES GRIDS:
* - Primario (12 colunas): margin 72px, gutter 32px — uso geral
* - Secundario (10 colunas): margin 72px, gutter 56px — formularios com stepper
* - Terciario (6 colunas): margin 200px, gutter 96px — portal de noticias
*
* TOKENS (definidos em variables.css):
* --grid-columns: 12 --grid-gutter: 32px --grid-margin: 72px
* --grid-columns-form: 10 --grid-gutter-form: 56px
* --grid-columns-news: 6 --grid-gutter-news: 96px --grid-margin-news: 200px
* --grid-max-width: 1440px
*
* @version 2.0.0
* @date 2026-03-05
* @source Figma > UI Kit > Grid e Espacamento
*/
/* ============================================================
BREAKPOINTS
============================================================ */
/*
xs: < 576px (Mobile)
sm: ≥ 576px (Mobile landscape)
md: ≥ 768px (Tablet)
lg: ≥ 992px (Desktop)
xl: ≥ 1200px (Large desktop)
xxl: ≥ 1440px (Extra large)
*/
/* ============================================================
CONTAINER SYSTEM
============================================================ */
.container {
width: 100%;
max-width: var(--grid-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--grid-margin);
padding-right: var(--grid-margin);
}
.container-fluid {
width: 100%;
padding-left: var(--spacing-7);
padding-right: var(--spacing-7);
}
/* Container com larguras fixas por breakpoint */
@media (min-width: 576px) {
.container-sm {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container-md {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container-lg {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container-xl {
max-width: 1140px;
}
}
@media (min-width: 1440px) {
.container-xxl {
max-width: var(--grid-max-width);
}
}
/* ============================================================
ROW SYSTEM
============================================================ */
.row {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gutter);
/* Padding lateral para replicar comportamento do MDL */
padding-left: 0.5rem;
padding-right: 0.5rem;
/* Margem negativa para compensar o padding lateral e manter alinhamento */
margin-left: -0.5rem;
margin-right: -0.5rem;
/* Alinhamento à esquerda conforme Figma - não centralizar */
justify-content: start;
align-items: start;
width: 100%;
max-width: 100%;
}
/* Grid Secundario: 10 colunas para formulários */
.row-10 {
display: grid;
grid-template-columns: repeat(var(--grid-columns-form), 1fr);
gap: var(--grid-gutter-form);
}
/* Grid Terciario: 6 colunas para portal de noticias */
.row-6 {
display: grid;
grid-template-columns: repeat(var(--grid-columns-news), 1fr);
gap: var(--grid-gutter-news);
}
.container-news {
width: 100%;
max-width: var(--grid-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--grid-margin-news);
padding-right: var(--grid-margin-news);
}
/* Grid com gap customizado */
.row-gap-none {
gap: 0;
}
.row-gap-xs {
gap: var(--spacing-xs);
}
.row-gap-sm {
gap: var(--spacing-sm);
}
.row-gap-md {
gap: var(--spacing-md);
}
.row-gap-lg {
gap: var(--spacing-lg);
}
.row-gap-xl {
gap: var(--spacing-xl);
}
.row-gap-2xl {
gap: var(--spacing-2xl);
}
/* Alinhamento vertical */
.row-align-start {
align-items: start;
}
.row-align-center {
align-items: center;
}
.row-align-end {
align-items: end;
}
.row-align-stretch {
align-items: stretch;
}
/* Alinhamento horizontal */
.row-justify-start {
justify-items: start;
}
.row-justify-center {
justify-items: center;
}
.row-justify-end {
justify-items: end;
}
.row-justify-stretch {
justify-items: stretch;
}
/* ============================================================
COLUMN SYSTEM - 12 Colunas
============================================================ */
/* Colunas padrão (todas as telas) */
.col-1 {
grid-column: span 1;
padding-left: 0.5rem;
padding-right: 0.5rem;
/* Garantir que todos os inputs dentro ocupem 100% */
min-width: 0;
box-sizing: border-box;
}
.col-2 {
grid-column: span 2;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-3 {
grid-column: span 3;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-4 {
grid-column: span 4;
padding-left: 0.5rem;
padding-right: 0.5rem;
/* Garantir que todos os inputs dentro ocupem 100% */
min-width: 0;
box-sizing: border-box;
/* Garantir alinhamento vertical consistente */
display: flex;
flex-direction: column;
/* Garantir que a coluna tenha largura consistente */
align-items: stretch;
}
.col-5 {
grid-column: span 5;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-6 {
grid-column: span 6;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-7 {
grid-column: span 7;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-8 {
grid-column: span 8;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-9 {
grid-column: span 9;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-10 {
grid-column: span 10;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-11 {
grid-column: span 11;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
.col-12 {
grid-column: span 12;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
/* Coluna automática */
.col-auto {
grid-column: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Coluna que ocupa todo o espaço disponível */
.col {
grid-column: span 12;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* ============================================================
RESPONSIVE COLUMNS
============================================================ */
/* Small devices (≥576px) */
@media (min-width: 576px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.col-sm-1 { grid-column: span 1; }
.col-sm-2 { grid-column: span 2; }
.col-sm-3 { grid-column: span 3; }
.col-sm-4 { grid-column: span 4; }
.col-sm-5 { grid-column: span 5; }
.col-sm-6 { grid-column: span 6; }
.col-sm-7 { grid-column: span 7; }
.col-sm-8 { grid-column: span 8; }
.col-sm-9 { grid-column: span 9; }
.col-sm-10 { grid-column: span 10; }
.col-sm-11 { grid-column: span 11; }
.col-sm-12 { grid-column: span 12; }
.col-sm-auto { grid-column: auto; }
}
/* Medium devices (≥768px) */
@media (min-width: 768px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.col-md-1 { grid-column: span 1; }
.col-md-2 { grid-column: span 2; }
.col-md-3 { grid-column: span 3; }
.col-md-4 { grid-column: span 4; }
.col-md-5 { grid-column: span 5; }
.col-md-6 { grid-column: span 6; }
.col-md-7 { grid-column: span 7; }
.col-md-8 { grid-column: span 8; }
.col-md-9 { grid-column: span 9; }
.col-md-10 { grid-column: span 10; }
.col-md-11 { grid-column: span 11; }
.col-md-12 { grid-column: span 12; }
.col-md-auto { grid-column: auto; }
}
/* Large devices (≥992px) */
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.col-lg-1 { grid-column: span 1; }
.col-lg-2 { grid-column: span 2; }
.col-lg-3 { grid-column: span 3; }
.col-lg-4 { grid-column: span 4; }
.col-lg-5 { grid-column: span 5; }
.col-lg-6 { grid-column: span 6; }
.col-lg-7 { grid-column: span 7; }
.col-lg-8 { grid-column: span 8; }
.col-lg-9 { grid-column: span 9; }
.col-lg-10 { grid-column: span 10; }
.col-lg-11 { grid-column: span 11; }
.col-lg-12 { grid-column: span 12; }
.col-lg-auto { grid-column: auto; }
}
/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.col-xl-1 { grid-column: span 1; }
.col-xl-2 { grid-column: span 2; }
.col-xl-3 { grid-column: span 3; }
.col-xl-4 { grid-column: span 4; }
.col-xl-5 { grid-column: span 5; }
.col-xl-6 { grid-column: span 6; }
.col-xl-7 { grid-column: span 7; }
.col-xl-8 { grid-column: span 8; }
.col-xl-9 { grid-column: span 9; }
.col-xl-10 { grid-column: span 10; }
.col-xl-11 { grid-column: span 11; }
.col-xl-12 { grid-column: span 12; }
.col-xl-auto { grid-column: auto; }
}
/* Extra extra large devices (≥1440px) */
@media (min-width: 1440px) {
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6,
.col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.col-xxl-1 { grid-column: span 1; }
.col-xxl-2 { grid-column: span 2; }
.col-xxl-3 { grid-column: span 3; }
.col-xxl-4 { grid-column: span 4; }
.col-xxl-5 { grid-column: span 5; }
.col-xxl-6 { grid-column: span 6; }
.col-xxl-7 { grid-column: span 7; }
.col-xxl-8 { grid-column: span 8; }
.col-xxl-9 { grid-column: span 9; }
.col-xxl-10 { grid-column: span 10; }
.col-xxl-11 { grid-column: span 11; }
.col-xxl-12 { grid-column: span 12; }
.col-xxl-auto { grid-column: auto; }
}
/* ============================================================
COLUMN ORDERING
============================================================ */
.order-first { order: -1; }
.order-last { order: 999; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
/* ============================================================
COLUMN OFFSET (Start Position)
============================================================ */
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
.offset-3 { grid-column-start: 4; }
.offset-4 { grid-column-start: 5; }
.offset-5 { grid-column-start: 6; }
.offset-6 { grid-column-start: 7; }
.offset-7 { grid-column-start: 8; }
.offset-8 { grid-column-start: 9; }
.offset-9 { grid-column-start: 10; }
.offset-10 { grid-column-start: 11; }
.offset-11 { grid-column-start: 12; }
/* ============================================================
AUTO-LAYOUT GRIDS
============================================================ */
/* Grid com colunas de largura automática */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--grid-gutter);
}
.grid-auto-sm {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--grid-gutter);
}
.grid-auto-lg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--grid-gutter);
}
/* Grid com número fixo de colunas iguais */
.grid-cols-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--grid-gutter);
}
.grid-cols-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gutter);
}
.grid-cols-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gutter);
}
.grid-cols-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--grid-gutter);
}
.grid-cols-6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--grid-gutter);
}
/* ============================================================
SPECIAL LAYOUTS
============================================================ */
/* Layout sidebar + conteúdo */
.grid-sidebar {
display: grid;
grid-template-columns: 250px 1fr;
gap: var(--grid-gutter);
}
@media (max-width: 767px) {
.grid-sidebar {
grid-template-columns: 1fr;
}
}
/* Layout com header fixo */
.grid-header-content {
display: grid;
grid-template-rows: auto 1fr;
gap: var(--grid-gutter);
min-height: 100vh;
}
/* Layout dashboard (sidebar + header + content) */
.grid-dashboard {
display: grid;
grid-template-areas:
"sidebar header"
"sidebar content";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr;
gap: 0;
min-height: 100vh;
}
.grid-dashboard-sidebar {
grid-area: sidebar;
}
.grid-dashboard-header {
grid-area: header;
}
.grid-dashboard-content {
grid-area: content;
}
@media (max-width: 991px) {
.grid-dashboard {
grid-template-areas:
"header"
"content";
grid-template-columns: 1fr;
}
.grid-dashboard-sidebar {
display: none;
}
}
/* ============================================================
DISPLAY UTILITIES PARA GRID
============================================================ */
/* Esconder/mostrar colunas por breakpoint */
@media (max-width: 575px) {
.d-none-xs { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767px) {
.d-none-sm { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
.d-none-md { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
.d-none-lg { display: none !important; }
}
@media (min-width: 1200px) {
.d-none-xl { display: none !important; }
}
/* Mostrar apenas em determinado breakpoint */
.d-block-xs { display: none !important; }
@media (max-width: 575px) {
.d-block-xs { display: block !important; }
}
.d-block-sm { display: none !important; }
@media (min-width: 576px) {
.d-block-sm { display: block !important; }
}
.d-block-md { display: none !important; }
@media (min-width: 768px) {
.d-block-md { display: block !important; }
}
.d-block-lg { display: none !important; }
@media (min-width: 992px) {
.d-block-lg { display: block !important; }
}
.d-block-xl { display: none !important; }
@media (min-width: 1200px) {
.d-block-xl { display: block !important; }
}
/* === foundation/utilities.css === */
/**
* Design System - Utilitários Avançados
*
* Classes utilitárias adicionais para layout e estilo
* Complementa as classes do design-system.css principal
*
* @version 1.1.0
* @date 2025-10-29
*/
/* ============================================================
ESPAÇAMENTO NEGATIVO
============================================================ */
/* Margin negativo (útil para compensar gaps) */
.m-n-xs { margin: calc(var(--spacing-xs) * -1) !important; }
.m-n-sm { margin: calc(var(--spacing-sm) * -1) !important; }
.m-n-md { margin: calc(var(--spacing-md) * -1) !important; }
.m-n-lg { margin: calc(var(--spacing-lg) * -1) !important; }
.m-n-xl { margin: calc(var(--spacing-xl) * -1) !important; }
.mt-n-xs { margin-top: calc(var(--spacing-xs) * -1) !important; }
.mt-n-sm { margin-top: calc(var(--spacing-sm) * -1) !important; }
.mt-n-md { margin-top: calc(var(--spacing-md) * -1) !important; }
.mt-n-lg { margin-top: calc(var(--spacing-lg) * -1) !important; }
.mt-n-xl { margin-top: calc(var(--spacing-xl) * -1) !important; }
.mb-n-xs { margin-bottom: calc(var(--spacing-xs) * -1) !important; }
.mb-n-sm { margin-bottom: calc(var(--spacing-sm) * -1) !important; }
.mb-n-md { margin-bottom: calc(var(--spacing-md) * -1) !important; }
.mb-n-lg { margin-bottom: calc(var(--spacing-lg) * -1) !important; }
.mb-n-xl { margin-bottom: calc(var(--spacing-xl) * -1) !important; }
.ml-n-xs { margin-left: calc(var(--spacing-xs) * -1) !important; }
.ml-n-sm { margin-left: calc(var(--spacing-sm) * -1) !important; }
.ml-n-md { margin-left: calc(var(--spacing-md) * -1) !important; }
.ml-n-lg { margin-left: calc(var(--spacing-lg) * -1) !important; }
.ml-n-xl { margin-left: calc(var(--spacing-xl) * -1) !important; }
.mr-n-xs { margin-right: calc(var(--spacing-xs) * -1) !important; }
.mr-n-sm { margin-right: calc(var(--spacing-sm) * -1) !important; }
.mr-n-md { margin-right: calc(var(--spacing-md) * -1) !important; }
.mr-n-lg { margin-right: calc(var(--spacing-lg) * -1) !important; }
.mr-n-xl { margin-right: calc(var(--spacing-xl) * -1) !important; }
/* ============================================================
ESPAÇAMENTO HORIZONTAL E VERTICAL
============================================================ */
/* Margin horizontal */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
/* Margin vertical */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
/* Padding horizontal */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
/* Padding vertical */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
/* ============================================================
DIMENSÕES AVANÇADAS
============================================================ */
/* Width */
.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-33 { width: 33.333333% !important; }
.w-40 { width: 40% !important; }
.w-60 { width: 60% !important; }
.w-66 { width: 66.666667% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
/* Max-width */
.mw-100 { max-width: 100% !important; }
.mw-none { max-width: none !important; }
/* Min-width */
.min-w-0 { min-width: 0 !important; }
.min-w-100 { min-width: 100% !important; }
/* Height */
.h-10 { height: 10% !important; }
.h-20 { height: 20% !important; }
.h-25 { height: 25% !important; }
.h-30 { height: 30% !important; }
.h-33 { height: 33.333333% !important; }
.h-40 { height: 40% !important; }
.h-60 { height: 60% !important; }
.h-66 { height: 66.666667% !important; }
.h-70 { height: 70% !important; }
.h-75 { height: 75% !important; }
.h-80 { height: 80% !important; }
.h-90 { height: 90% !important; }
/* Max-height */
.mh-100 { max-height: 100% !important; }
.mh-none { max-height: none !important; }
/* Min-height */
.min-h-0 { min-height: 0 !important; }
.min-h-100 { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
/* Viewport dimensions */
.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }
.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }
/* ============================================================
ASPECT RATIO
============================================================ */
.aspect-square {
aspect-ratio: 1 / 1;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
.aspect-4-3 {
aspect-ratio: 4 / 3;
}
.aspect-21-9 {
aspect-ratio: 21 / 9;
}
/* ============================================================
FLEXBOX AVANÇADO
============================================================ */
/* Flex grow/shrink */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
/* Flex basis */
.flex-basis-0 { flex-basis: 0 !important; }
.flex-basis-auto { flex-basis: auto !important; }
.flex-basis-100 { flex-basis: 100% !important; }
/* Flex shorthand */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-initial { flex: 0 1 auto !important; }
.flex-none { flex: none !important; }
/* Align self */
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-stretch { align-self: stretch !important; }
.align-self-baseline { align-self: baseline !important; }
/* Justify self (para grid) */
.justify-self-auto { justify-self: auto !important; }
.justify-self-start { justify-self: start !important; }
.justify-self-end { justify-self: end !important; }
.justify-self-center { justify-self: center !important; }
.justify-self-stretch { justify-self: stretch !important; }
/* ============================================================
POSICIONAMENTO AVANÇADO
============================================================ */
/* Positioning helpers */
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.left-0 { left: 0 !important; }
.left-50 { left: 50% !important; }
.left-100 { left: 100% !important; }
.right-0 { right: 0 !important; }
.right-50 { right: 50% !important; }
.right-100 { right: 100% !important; }
/* Translate (para centralização) */
.translate-middle {
transform: translate(-50%, -50%) !important;
}
.translate-middle-x {
transform: translateX(-50%) !important;
}
.translate-middle-y {
transform: translateY(-50%) !important;
}
/* Z-index */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }
.z-10 { z-index: var(--z-dropdown) !important; }
.z-20 { z-index: var(--z-sticky) !important; }
.z-30 { z-index: var(--z-fixed) !important; }
.z-40 { z-index: var(--z-modal-backdrop) !important; }
.z-50 { z-index: var(--z-modal) !important; }
.z-100 { z-index: var(--z-tooltip) !important; }
/* ============================================================
TEXTO AVANÇADO
============================================================ */
/* Text alignment */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
/* Text transform */
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-normal { text-transform: none !important; }
/* Text decoration */
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
/* Font style */
.font-italic { font-style: italic !important; }
.font-normal { font-style: normal !important; }
/* Line height */
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 2 !important; }
/* White space */
.text-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }
.text-pre { white-space: pre !important; }
.text-pre-line { white-space: pre-line !important; }
.text-pre-wrap { white-space: pre-wrap !important; }
/* Word break */
.text-break { word-wrap: break-word !important; word-break: break-word !important; }
.text-break-all { word-break: break-all !important; }
/* Truncate */
.text-truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Line clamp */
.line-clamp-1 {
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================
INTERAÇÃO
============================================================ */
/* Pointer events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }
/* User interaction */
.user-select-all { user-select: all !important; }
.user-select-text { user-select: text !important; }
/* Resize */
.resize-none { resize: none !important; }
.resize-both { resize: both !important; }
.resize-horizontal { resize: horizontal !important; }
.resize-vertical { resize: vertical !important; }
/* ============================================================
SCROLL
============================================================ */
/* Scroll behavior */
.scroll-smooth { scroll-behavior: smooth !important; }
.scroll-auto { scroll-behavior: auto !important; }
/* Overflow scrolling */
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }
.overflow-y-scroll { overflow-y: scroll !important; }
/* Scrollbar styling (webkit) */
.scrollbar-thin::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-md);
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-500);
}
/* ============================================================
OBJECT FIT
============================================================ */
.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-none { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }
/* Object position */
.object-center { object-position: center !important; }
.object-top { object-position: top !important; }
.object-bottom { object-position: bottom !important; }
.object-left { object-position: left !important; }
.object-right { object-position: right !important; }
/* ============================================================
ANIMATION E TRANSITION
============================================================ */
/* Transition duration */
.duration-75 { transition-duration: 75ms !important; }
.duration-100 { transition-duration: 100ms !important; }
.duration-150 { transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }
.duration-700 { transition-duration: 700ms !important; }
.duration-1000 { transition-duration: 1000ms !important; }
/* Transition timing function */
.ease-linear { transition-timing-function: linear !important; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }
/* Animation */
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce {
animation: bounce 1s infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes bounce {
0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
/* ============================================================
PRINT
============================================================ */
@media print {
.print-hidden { display: none !important; }
.print-visible { display: block !important; }
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* Visually hidden — conteúdo acessível apenas para screen readers */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Variante que se torna visível ao receber foco (skip links, etc) */
.visually-hidden-focusable:not(:focus):not(:focus-within),
.sr-only-focusable:not(:focus):not(:focus-within) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ============================================================
FLOAT
============================================================ */
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* === foundation/utilities-inline.css === */
/**
* Classes Utilitarias Inline
* Extraido de design-system.css (linhas 130-435)
* Display, Flexbox, Margin, Padding, Width, Height, Overflow, Position,
* Borders, Background, Shadow, Cursor, User Select, Visibility, Opacity,
* Grid, Icons, Transitions, Estados Interativos
*/
/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
/* Flexbox */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-center { align-items: center !important; }
.align-stretch { align-items: stretch !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }
.gap-2xl { gap: var(--spacing-2xl) !important; }
/* Margin */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-auto { margin-top: auto !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-auto { margin-bottom: auto !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.ml-0 { margin-left: 0 !important; }
.ml-auto { margin-left: auto !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.ml-md { margin-left: var(--spacing-md) !important; }
.ml-lg { margin-left: var(--spacing-lg) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }
.ml-2xl { margin-left: var(--spacing-2xl) !important; }
.mr-0 { margin-right: 0 !important; }
.mr-auto { margin-right: auto !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mr-sm { margin-right: var(--spacing-sm) !important; }
.mr-md { margin-right: var(--spacing-md) !important; }
.mr-lg { margin-right: var(--spacing-lg) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }
.mr-2xl { margin-right: var(--spacing-2xl) !important; }
/* Padding */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pt-2xl { padding-top: var(--spacing-2xl) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-2xl { padding-bottom: var(--spacing-2xl) !important; }
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--spacing-xs) !important; }
.pl-sm { padding-left: var(--spacing-sm) !important; }
.pl-md { padding-left: var(--spacing-md) !important; }
.pl-lg { padding-left: var(--spacing-lg) !important; }
.pl-xl { padding-left: var(--spacing-xl) !important; }
.pl-2xl { padding-left: var(--spacing-2xl) !important; }
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--spacing-xs) !important; }
.pr-sm { padding-right: var(--spacing-sm) !important; }
.pr-md { padding-right: var(--spacing-md) !important; }
.pr-lg { padding-right: var(--spacing-lg) !important; }
.pr-xl { padding-right: var(--spacing-xl) !important; }
.pr-2xl { padding-right: var(--spacing-2xl) !important; }
/* Width */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }
.w-75 { width: 75% !important; }
/* Height */
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.h-50 { height: 50% !important; }
/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
/* Position */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
/* Borders */
.border { border: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-left { border-left: 1px solid var(--color-border) !important; }
.border-right { border-right: 1px solid var(--color-border) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.rounded-0 { border-radius: 0 !important; }
/* Background Colors */
.bg-primary { background-color: var(--color-bg-primary) !important; }
.bg-secondary { background-color: var(--color-bg-secondary) !important; }
.bg-tertiary { background-color: var(--color-bg-tertiary) !important; }
.bg-dark { background-color: var(--color-bg-dark) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-transparent { background-color: transparent !important; }
/* Shadow */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
/* User Select */
.user-select-none { user-select: none !important; }
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }
/* Container */
.container {
width: 100%;
max-width: var(--grid-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--grid-margin);
padding-right: var(--grid-margin);
}
.container-fluid {
width: 100%;
padding-left: var(--spacing-2xl);
padding-right: var(--spacing-2xl);
}
.row {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gutter);
}
.row-10 {
display: grid;
grid-template-columns: repeat(var(--grid-columns-form), 1fr);
gap: var(--grid-gutter-form);
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
/* Icons SVG */
.icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
}
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
/* Transitions */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
/* Estados Interativos */
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
transition: all var(--transition-base);
}
.hover-grow:hover {
transform: scale(1.05);
transition: all var(--transition-base);
}
/* === foundation/utilities-responsive.css === */
/**
* Design System - Utilitários Responsivos
*
* Classes de spacing (margin/padding) com breakpoints.
* Padrão: {propriedade}-{breakpoint}-{tamanho}
* Exemplo: .m-md-0, .p-lg-xl, .mt-sm-xs
*
* Breakpoints: sm (576px), md (768px), lg (992px), xl (1200px)
* Tamanhos: 0, xs (4px), sm (8px), md (16px), lg (20px), xl (24px), 2xl (32px), auto (margin)
*
* @version 1.0.0
* @since 0.2.0
*/
/* ============================================================
SM — min-width: 576px
============================================================ */
@media (min-width: 576px) {
/* Margin */
.m-sm-0 { margin: 0 !important; }
.m-sm-auto { margin: auto !important; }
.m-sm-xs { margin: var(--spacing-xs) !important; }
.m-sm-sm { margin: var(--spacing-sm) !important; }
.m-sm-md { margin: var(--spacing-md) !important; }
.m-sm-lg { margin: var(--spacing-lg) !important; }
.m-sm-xl { margin: var(--spacing-xl) !important; }
.m-sm-2xl { margin: var(--spacing-2xl) !important; }
/* Margin top */
.mt-sm-0 { margin-top: 0 !important; }
.mt-sm-auto { margin-top: auto !important; }
.mt-sm-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm-sm { margin-top: var(--spacing-sm) !important; }
.mt-sm-md { margin-top: var(--spacing-md) !important; }
.mt-sm-lg { margin-top: var(--spacing-lg) !important; }
.mt-sm-xl { margin-top: var(--spacing-xl) !important; }
.mt-sm-2xl { margin-top: var(--spacing-2xl) !important; }
/* Margin bottom */
.mb-sm-0 { margin-bottom: 0 !important; }
.mb-sm-auto { margin-bottom: auto !important; }
.mb-sm-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-sm-md { margin-bottom: var(--spacing-md) !important; }
.mb-sm-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-sm-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-sm-2xl { margin-bottom: var(--spacing-2xl) !important; }
/* Margin left */
.ml-sm-0 { margin-left: 0 !important; }
.ml-sm-auto { margin-left: auto !important; }
.ml-sm-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm-sm { margin-left: var(--spacing-sm) !important; }
.ml-sm-md { margin-left: var(--spacing-md) !important; }
.ml-sm-lg { margin-left: var(--spacing-lg) !important; }
.ml-sm-xl { margin-left: var(--spacing-xl) !important; }
.ml-sm-2xl { margin-left: var(--spacing-2xl) !important; }
/* Margin right */
.mr-sm-0 { margin-right: 0 !important; }
.mr-sm-auto { margin-right: auto !important; }
.mr-sm-xs { margin-right: var(--spacing-xs) !important; }
.mr-sm-sm { margin-right: var(--spacing-sm) !important; }
.mr-sm-md { margin-right: var(--spacing-md) !important; }
.mr-sm-lg { margin-right: var(--spacing-lg) !important; }
.mr-sm-xl { margin-right: var(--spacing-xl) !important; }
.mr-sm-2xl { margin-right: var(--spacing-2xl) !important; }
/* Margin horizontal */
.mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-sm-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-sm-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-sm-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-sm-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-sm-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-sm-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
/* Margin vertical */
.my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-sm-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-sm-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-sm-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-sm-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-sm-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
/* Padding */
.p-sm-0 { padding: 0 !important; }
.p-sm-xs { padding: var(--spacing-xs) !important; }
.p-sm-sm { padding: var(--spacing-sm) !important; }
.p-sm-md { padding: var(--spacing-md) !important; }
.p-sm-lg { padding: var(--spacing-lg) !important; }
.p-sm-xl { padding: var(--spacing-xl) !important; }
.p-sm-2xl { padding: var(--spacing-2xl) !important; }
/* Padding top */
.pt-sm-0 { padding-top: 0 !important; }
.pt-sm-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm-sm { padding-top: var(--spacing-sm) !important; }
.pt-sm-md { padding-top: var(--spacing-md) !important; }
.pt-sm-lg { padding-top: var(--spacing-lg) !important; }
.pt-sm-xl { padding-top: var(--spacing-xl) !important; }
.pt-sm-2xl { padding-top: var(--spacing-2xl) !important; }
/* Padding bottom */
.pb-sm-0 { padding-bottom: 0 !important; }
.pb-sm-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-sm-md { padding-bottom: var(--spacing-md) !important; }
.pb-sm-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-sm-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-sm-2xl { padding-bottom: var(--spacing-2xl) !important; }
/* Padding left */
.pl-sm-0 { padding-left: 0 !important; }
.pl-sm-xs { padding-left: var(--spacing-xs) !important; }
.pl-sm-sm { padding-left: var(--spacing-sm) !important; }
.pl-sm-md { padding-left: var(--spacing-md) !important; }
.pl-sm-lg { padding-left: var(--spacing-lg) !important; }
.pl-sm-xl { padding-left: var(--spacing-xl) !important; }
.pl-sm-2xl { padding-left: var(--spacing-2xl) !important; }
/* Padding right */
.pr-sm-0 { padding-right: 0 !important; }
.pr-sm-xs { padding-right: var(--spacing-xs) !important; }
.pr-sm-sm { padding-right: var(--spacing-sm) !important; }
.pr-sm-md { padding-right: var(--spacing-md) !important; }
.pr-sm-lg { padding-right: var(--spacing-lg) !important; }
.pr-sm-xl { padding-right: var(--spacing-xl) !important; }
.pr-sm-2xl { padding-right: var(--spacing-2xl) !important; }
/* Padding horizontal */
.px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-sm-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-sm-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-sm-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-sm-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-sm-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
/* Padding vertical */
.py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-sm-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-sm-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-sm-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-sm-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-sm-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
/* Display */
.d-sm-none { display: none !important; }
.d-sm-block { display: block !important; }
.d-sm-inline { display: inline !important; }
.d-sm-inline-block { display: inline-block !important; }
.d-sm-flex { display: flex !important; }
.d-sm-inline-flex { display: inline-flex !important; }
.d-sm-grid { display: grid !important; }
/* Flex direction */
.flex-sm-row { flex-direction: row !important; }
.flex-sm-column { flex-direction: column !important; }
/* Text align */
.text-sm-left { text-align: left !important; }
.text-sm-center { text-align: center !important; }
.text-sm-right { text-align: right !important; }
}
/* ============================================================
MD — min-width: 768px
============================================================ */
@media (min-width: 768px) {
/* Margin */
.m-md-0 { margin: 0 !important; }
.m-md-auto { margin: auto !important; }
.m-md-xs { margin: var(--spacing-xs) !important; }
.m-md-sm { margin: var(--spacing-sm) !important; }
.m-md-md { margin: var(--spacing-md) !important; }
.m-md-lg { margin: var(--spacing-lg) !important; }
.m-md-xl { margin: var(--spacing-xl) !important; }
.m-md-2xl { margin: var(--spacing-2xl) !important; }
/* Margin top */
.mt-md-0 { margin-top: 0 !important; }
.mt-md-auto { margin-top: auto !important; }
.mt-md-xs { margin-top: var(--spacing-xs) !important; }
.mt-md-sm { margin-top: var(--spacing-sm) !important; }
.mt-md-md { margin-top: var(--spacing-md) !important; }
.mt-md-lg { margin-top: var(--spacing-lg) !important; }
.mt-md-xl { margin-top: var(--spacing-xl) !important; }
.mt-md-2xl { margin-top: var(--spacing-2xl) !important; }
/* Margin bottom */
.mb-md-0 { margin-bottom: 0 !important; }
.mb-md-auto { margin-bottom: auto !important; }
.mb-md-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-md-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md-md { margin-bottom: var(--spacing-md) !important; }
.mb-md-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-md-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-md-2xl { margin-bottom: var(--spacing-2xl) !important; }
/* Margin left */
.ml-md-0 { margin-left: 0 !important; }
.ml-md-auto { margin-left: auto !important; }
.ml-md-xs { margin-left: var(--spacing-xs) !important; }
.ml-md-sm { margin-left: var(--spacing-sm) !important; }
.ml-md-md { margin-left: var(--spacing-md) !important; }
.ml-md-lg { margin-left: var(--spacing-lg) !important; }
.ml-md-xl { margin-left: var(--spacing-xl) !important; }
.ml-md-2xl { margin-left: var(--spacing-2xl) !important; }
/* Margin right */
.mr-md-0 { margin-right: 0 !important; }
.mr-md-auto { margin-right: auto !important; }
.mr-md-xs { margin-right: var(--spacing-xs) !important; }
.mr-md-sm { margin-right: var(--spacing-sm) !important; }
.mr-md-md { margin-right: var(--spacing-md) !important; }
.mr-md-lg { margin-right: var(--spacing-lg) !important; }
.mr-md-xl { margin-right: var(--spacing-xl) !important; }
.mr-md-2xl { margin-right: var(--spacing-2xl) !important; }
/* Margin horizontal */
.mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-md-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-md-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-md-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-md-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-md-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-md-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
/* Margin vertical */
.my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-md-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-md-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-md-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-md-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-md-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-md-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
/* Padding */
.p-md-0 { padding: 0 !important; }
.p-md-xs { padding: var(--spacing-xs) !important; }
.p-md-sm { padding: var(--spacing-sm) !important; }
.p-md-md { padding: var(--spacing-md) !important; }
.p-md-lg { padding: var(--spacing-lg) !important; }
.p-md-xl { padding: var(--spacing-xl) !important; }
.p-md-2xl { padding: var(--spacing-2xl) !important; }
/* Padding top */
.pt-md-0 { padding-top: 0 !important; }
.pt-md-xs { padding-top: var(--spacing-xs) !important; }
.pt-md-sm { padding-top: var(--spacing-sm) !important; }
.pt-md-md { padding-top: var(--spacing-md) !important; }
.pt-md-lg { padding-top: var(--spacing-lg) !important; }
.pt-md-xl { padding-top: var(--spacing-xl) !important; }
.pt-md-2xl { padding-top: var(--spacing-2xl) !important; }
/* Padding bottom */
.pb-md-0 { padding-bottom: 0 !important; }
.pb-md-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-md-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md-md { padding-bottom: var(--spacing-md) !important; }
.pb-md-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-md-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-md-2xl { padding-bottom: var(--spacing-2xl) !important; }
/* Padding left */
.pl-md-0 { padding-left: 0 !important; }
.pl-md-xs { padding-left: var(--spacing-xs) !important; }
.pl-md-sm { padding-left: var(--spacing-sm) !important; }
.pl-md-md { padding-left: var(--spacing-md) !important; }
.pl-md-lg { padding-left: var(--spacing-lg) !important; }
.pl-md-xl { padding-left: var(--spacing-xl) !important; }
.pl-md-2xl { padding-left: var(--spacing-2xl) !important; }
/* Padding right */
.pr-md-0 { padding-right: 0 !important; }
.pr-md-xs { padding-right: var(--spacing-xs) !important; }
.pr-md-sm { padding-right: var(--spacing-sm) !important; }
.pr-md-md { padding-right: var(--spacing-md) !important; }
.pr-md-lg { padding-right: var(--spacing-lg) !important; }
.pr-md-xl { padding-right: var(--spacing-xl) !important; }
.pr-md-2xl { padding-right: var(--spacing-2xl) !important; }
/* Padding horizontal */
.px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-md-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-md-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-md-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-md-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-md-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
/* Padding vertical */
.py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-md-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-md-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-md-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-md-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-md-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
/* Display */
.d-md-none { display: none !important; }
.d-md-block { display: block !important; }
.d-md-inline { display: inline !important; }
.d-md-inline-block { display: inline-block !important; }
.d-md-flex { display: flex !important; }
.d-md-inline-flex { display: inline-flex !important; }
.d-md-grid { display: grid !important; }
/* Flex direction */
.flex-md-row { flex-direction: row !important; }
.flex-md-column { flex-direction: column !important; }
/* Text align */
.text-md-left { text-align: left !important; }
.text-md-center { text-align: center !important; }
.text-md-right { text-align: right !important; }
}
/* ============================================================
LG — min-width: 992px
============================================================ */
@media (min-width: 992px) {
/* Margin */
.m-lg-0 { margin: 0 !important; }
.m-lg-auto { margin: auto !important; }
.m-lg-xs { margin: var(--spacing-xs) !important; }
.m-lg-sm { margin: var(--spacing-sm) !important; }
.m-lg-md { margin: var(--spacing-md) !important; }
.m-lg-lg { margin: var(--spacing-lg) !important; }
.m-lg-xl { margin: var(--spacing-xl) !important; }
.m-lg-2xl { margin: var(--spacing-2xl) !important; }
/* Margin top */
.mt-lg-0 { margin-top: 0 !important; }
.mt-lg-auto { margin-top: auto !important; }
.mt-lg-xs { margin-top: var(--spacing-xs) !important; }
.mt-lg-sm { margin-top: var(--spacing-sm) !important; }
.mt-lg-md { margin-top: var(--spacing-md) !important; }
.mt-lg-lg { margin-top: var(--spacing-lg) !important; }
.mt-lg-xl { margin-top: var(--spacing-xl) !important; }
.mt-lg-2xl { margin-top: var(--spacing-2xl) !important; }
/* Margin bottom */
.mb-lg-0 { margin-bottom: 0 !important; }
.mb-lg-auto { margin-bottom: auto !important; }
.mb-lg-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-lg-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-lg-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-lg-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-lg-2xl { margin-bottom: var(--spacing-2xl) !important; }
/* Margin left */
.ml-lg-0 { margin-left: 0 !important; }
.ml-lg-auto { margin-left: auto !important; }
.ml-lg-xs { margin-left: var(--spacing-xs) !important; }
.ml-lg-sm { margin-left: var(--spacing-sm) !important; }
.ml-lg-md { margin-left: var(--spacing-md) !important; }
.ml-lg-lg { margin-left: var(--spacing-lg) !important; }
.ml-lg-xl { margin-left: var(--spacing-xl) !important; }
.ml-lg-2xl { margin-left: var(--spacing-2xl) !important; }
/* Margin right */
.mr-lg-0 { margin-right: 0 !important; }
.mr-lg-auto { margin-right: auto !important; }
.mr-lg-xs { margin-right: var(--spacing-xs) !important; }
.mr-lg-sm { margin-right: var(--spacing-sm) !important; }
.mr-lg-md { margin-right: var(--spacing-md) !important; }
.mr-lg-lg { margin-right: var(--spacing-lg) !important; }
.mr-lg-xl { margin-right: var(--spacing-xl) !important; }
.mr-lg-2xl { margin-right: var(--spacing-2xl) !important; }
/* Margin horizontal */
.mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-lg-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-lg-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-lg-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-lg-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-lg-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
/* Margin vertical */
.my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-lg-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-lg-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-lg-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-lg-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-lg-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
/* Padding */
.p-lg-0 { padding: 0 !important; }
.p-lg-xs { padding: var(--spacing-xs) !important; }
.p-lg-sm { padding: var(--spacing-sm) !important; }
.p-lg-md { padding: var(--spacing-md) !important; }
.p-lg-lg { padding: var(--spacing-lg) !important; }
.p-lg-xl { padding: var(--spacing-xl) !important; }
.p-lg-2xl { padding: var(--spacing-2xl) !important; }
/* Padding top */
.pt-lg-0 { padding-top: 0 !important; }
.pt-lg-xs { padding-top: var(--spacing-xs) !important; }
.pt-lg-sm { padding-top: var(--spacing-sm) !important; }
.pt-lg-md { padding-top: var(--spacing-md) !important; }
.pt-lg-lg { padding-top: var(--spacing-lg) !important; }
.pt-lg-xl { padding-top: var(--spacing-xl) !important; }
.pt-lg-2xl { padding-top: var(--spacing-2xl) !important; }
/* Padding bottom */
.pb-lg-0 { padding-bottom: 0 !important; }
.pb-lg-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-lg-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-lg-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-lg-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-lg-2xl { padding-bottom: var(--spacing-2xl) !important; }
/* Padding left */
.pl-lg-0 { padding-left: 0 !important; }
.pl-lg-xs { padding-left: var(--spacing-xs) !important; }
.pl-lg-sm { padding-left: var(--spacing-sm) !important; }
.pl-lg-md { padding-left: var(--spacing-md) !important; }
.pl-lg-lg { padding-left: var(--spacing-lg) !important; }
.pl-lg-xl { padding-left: var(--spacing-xl) !important; }
.pl-lg-2xl { padding-left: var(--spacing-2xl) !important; }
/* Padding right */
.pr-lg-0 { padding-right: 0 !important; }
.pr-lg-xs { padding-right: var(--spacing-xs) !important; }
.pr-lg-sm { padding-right: var(--spacing-sm) !important; }
.pr-lg-md { padding-right: var(--spacing-md) !important; }
.pr-lg-lg { padding-right: var(--spacing-lg) !important; }
.pr-lg-xl { padding-right: var(--spacing-xl) !important; }
.pr-lg-2xl { padding-right: var(--spacing-2xl) !important; }
/* Padding horizontal */
.px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-lg-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-lg-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-lg-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-lg-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-lg-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
/* Padding vertical */
.py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-lg-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-lg-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-lg-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-lg-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-lg-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
/* Display */
.d-lg-none { display: none !important; }
.d-lg-block { display: block !important; }
.d-lg-inline { display: inline !important; }
.d-lg-inline-block { display: inline-block !important; }
.d-lg-flex { display: flex !important; }
.d-lg-inline-flex { display: inline-flex !important; }
.d-lg-grid { display: grid !important; }
/* Flex direction */
.flex-lg-row { flex-direction: row !important; }
.flex-lg-column { flex-direction: column !important; }
/* Text align */
.text-lg-left { text-align: left !important; }
.text-lg-center { text-align: center !important; }
.text-lg-right { text-align: right !important; }
}
/* ============================================================
XL — min-width: 1200px
============================================================ */
@media (min-width: 1200px) {
/* Margin */
.m-xl-0 { margin: 0 !important; }
.m-xl-auto { margin: auto !important; }
.m-xl-xs { margin: var(--spacing-xs) !important; }
.m-xl-sm { margin: var(--spacing-sm) !important; }
.m-xl-md { margin: var(--spacing-md) !important; }
.m-xl-lg { margin: var(--spacing-lg) !important; }
.m-xl-xl { margin: var(--spacing-xl) !important; }
.m-xl-2xl { margin: var(--spacing-2xl) !important; }
/* Margin top */
.mt-xl-0 { margin-top: 0 !important; }
.mt-xl-auto { margin-top: auto !important; }
.mt-xl-xs { margin-top: var(--spacing-xs) !important; }
.mt-xl-sm { margin-top: var(--spacing-sm) !important; }
.mt-xl-md { margin-top: var(--spacing-md) !important; }
.mt-xl-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl-xl { margin-top: var(--spacing-xl) !important; }
.mt-xl-2xl { margin-top: var(--spacing-2xl) !important; }
/* Margin bottom */
.mb-xl-0 { margin-bottom: 0 !important; }
.mb-xl-auto { margin-bottom: auto !important; }
.mb-xl-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-xl-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-xl-md { margin-bottom: var(--spacing-md) !important; }
.mb-xl-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-xl-2xl { margin-bottom: var(--spacing-2xl) !important; }
/* Margin left */
.ml-xl-0 { margin-left: 0 !important; }
.ml-xl-auto { margin-left: auto !important; }
.ml-xl-xs { margin-left: var(--spacing-xs) !important; }
.ml-xl-sm { margin-left: var(--spacing-sm) !important; }
.ml-xl-md { margin-left: var(--spacing-md) !important; }
.ml-xl-lg { margin-left: var(--spacing-lg) !important; }
.ml-xl-xl { margin-left: var(--spacing-xl) !important; }
.ml-xl-2xl { margin-left: var(--spacing-2xl) !important; }
/* Margin right */
.mr-xl-0 { margin-right: 0 !important; }
.mr-xl-auto { margin-right: auto !important; }
.mr-xl-xs { margin-right: var(--spacing-xs) !important; }
.mr-xl-sm { margin-right: var(--spacing-sm) !important; }
.mr-xl-md { margin-right: var(--spacing-md) !important; }
.mr-xl-lg { margin-right: var(--spacing-lg) !important; }
.mr-xl-xl { margin-right: var(--spacing-xl) !important; }
.mr-xl-2xl { margin-right: var(--spacing-2xl) !important; }
/* Margin horizontal */
.mx-xl-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xl-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-xl-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-xl-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-xl-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-xl-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-xl-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
/* Margin vertical */
.my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-xl-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-xl-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-xl-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-xl-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-xl-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
/* Padding */
.p-xl-0 { padding: 0 !important; }
.p-xl-xs { padding: var(--spacing-xs) !important; }
.p-xl-sm { padding: var(--spacing-sm) !important; }
.p-xl-md { padding: var(--spacing-md) !important; }
.p-xl-lg { padding: var(--spacing-lg) !important; }
.p-xl-xl { padding: var(--spacing-xl) !important; }
.p-xl-2xl { padding: var(--spacing-2xl) !important; }
/* Padding top */
.pt-xl-0 { padding-top: 0 !important; }
.pt-xl-xs { padding-top: var(--spacing-xs) !important; }
.pt-xl-sm { padding-top: var(--spacing-sm) !important; }
.pt-xl-md { padding-top: var(--spacing-md) !important; }
.pt-xl-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl-xl { padding-top: var(--spacing-xl) !important; }
.pt-xl-2xl { padding-top: var(--spacing-2xl) !important; }
/* Padding bottom */
.pb-xl-0 { padding-bottom: 0 !important; }
.pb-xl-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-xl-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-xl-md { padding-bottom: var(--spacing-md) !important; }
.pb-xl-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-xl-2xl { padding-bottom: var(--spacing-2xl) !important; }
/* Padding left */
.pl-xl-0 { padding-left: 0 !important; }
.pl-xl-xs { padding-left: var(--spacing-xs) !important; }
.pl-xl-sm { padding-left: var(--spacing-sm) !important; }
.pl-xl-md { padding-left: var(--spacing-md) !important; }
.pl-xl-lg { padding-left: var(--spacing-lg) !important; }
.pl-xl-xl { padding-left: var(--spacing-xl) !important; }
.pl-xl-2xl { padding-left: var(--spacing-2xl) !important; }
/* Padding right */
.pr-xl-0 { padding-right: 0 !important; }
.pr-xl-xs { padding-right: var(--spacing-xs) !important; }
.pr-xl-sm { padding-right: var(--spacing-sm) !important; }
.pr-xl-md { padding-right: var(--spacing-md) !important; }
.pr-xl-lg { padding-right: var(--spacing-lg) !important; }
.pr-xl-xl { padding-right: var(--spacing-xl) !important; }
.pr-xl-2xl { padding-right: var(--spacing-2xl) !important; }
/* Padding horizontal */
.px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xl-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-xl-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-xl-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-xl-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-xl-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
/* Padding vertical */
.py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xl-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-xl-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-xl-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-xl-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-xl-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
/* Display */
.d-xl-none { display: none !important; }
.d-xl-block { display: block !important; }
.d-xl-inline { display: inline !important; }
.d-xl-inline-block { display: inline-block !important; }
.d-xl-flex { display: flex !important; }
.d-xl-inline-flex { display: inline-flex !important; }
.d-xl-grid { display: grid !important; }
/* Flex direction */
.flex-xl-row { flex-direction: row !important; }
.flex-xl-column { flex-direction: column !important; }
/* Text align */
.text-xl-left { text-align: left !important; }
.text-xl-center { text-align: center !important; }
.text-xl-right { text-align: right !important; }
}
/* === foundation/icons.css === */
/**
* Sistema de Ícones - Design System SIDASP
*
* Uso básico:
*
*/
/* ============================================
CLASSE BASE
============================================ */
.icon {
display: inline-block;
width: 1rem;
height: 1rem;
fill: currentColor;
vertical-align: middle;
flex-shrink: 0;
}
/* ============================================
TAMANHOS
============================================ */
/* Extra Small - 12px */
.icon-xs {
width: 0.75rem;
height: 0.75rem;
}
/* Small - 16px (padrão) */
.icon-sm,
.icon {
width: 1rem;
height: 1rem;
}
/* Medium - 20px */
.icon-md {
width: 1.25rem;
height: 1.25rem;
}
/* Large - 24px */
.icon-lg {
width: 1.5rem;
height: 1.5rem;
}
/* Extra Large - 32px */
.icon-xl {
width: 2rem;
height: 2rem;
}
/* 2X Large - 40px */
.icon-2xl {
width: 2.5rem;
height: 2.5rem;
}
/* ============================================
CORES SEMÂNTICAS
============================================ */
.icon-primary {
color: var(--color-accent-400);
}
.icon-secondary {
color: var(--color-text-secondary);
}
.icon-muted {
color: var(--color-text-muted);
}
.icon-success {
color: var(--color-green-300);
}
.icon-warning {
color: var(--color-yellow-300);
}
.icon-danger {
color: var(--color-red-300);
}
.icon-info {
color: var(--color-accent-300);
}
/* ============================================
ESTADOS
============================================ */
.icon-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.icon-clickable {
cursor: pointer;
transition: color 0.2s ease, transform 0.2s ease;
}
.icon-clickable:hover {
color: var(--color-accent-300);
transform: scale(1.1);
}
.icon-clickable:active {
transform: scale(0.95);
}
/* ============================================
BOTÕES COM ÍCONES
============================================ */
.btn .icon {
vertical-align: middle;
margin-right: 0.5rem;
}
.btn .icon:last-child {
margin-right: 0;
margin-left: 0.5rem;
}
.btn.icon-only {
padding: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.icon-only .icon {
margin: 0;
}
/* ============================================
INPUTS COM ÍCONES
============================================ */
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-group .icon {
position: absolute;
left: 0.75rem;
color: var(--color-text-muted);
pointer-events: none;
}
.input-group input {
padding-left: 2.5rem;
}
.input-group .icon-right {
left: auto;
right: 0.75rem;
}
.input-group input.has-icon-right {
padding-right: 2.5rem;
padding-left: 0.75rem;
}
/* ============================================
BADGES COM ÍCONES
============================================ */
.badge .icon {
width: 0.875rem;
height: 0.875rem;
margin-right: 0.25rem;
vertical-align: middle;
}
/* ============================================
ALERTAS COM ÍCONES
============================================ */
.alert {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.alert .icon {
flex-shrink: 0;
margin-top: 0.125rem;
}
.alert-success .icon {
color: var(--color-green-300);
}
.alert-warning .icon {
color: var(--color-yellow-300);
}
.alert-danger .icon {
color: var(--color-red-300);
}
.alert-info .icon {
color: var(--color-accent-300);
}
/* ============================================
NAVEGAÇÃO COM ÍCONES
============================================ */
.nav-item .icon {
margin-right: 0.5rem;
vertical-align: middle;
}
.breadcrumb .icon {
width: 0.875rem;
height: 0.875rem;
margin: 0 0.5rem;
color: var(--color-text-muted);
}
/* ============================================
TABELAS COM ÍCONES
============================================ */
.table-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.table-actions .icon {
cursor: pointer;
transition: color 0.2s ease;
}
.table-actions .icon:hover {
color: var(--color-accent-300);
}
.table-actions .icon-danger:hover {
color: var(--color-red-300);
}
/* ============================================
UTILITÁRIOS
============================================ */
/* Rotação */
.icon-rotate-90 {
transform: rotate(90deg);
}
.icon-rotate-180 {
transform: rotate(180deg);
}
.icon-rotate-270 {
transform: rotate(270deg);
}
/* Flip */
.icon-flip-horizontal {
transform: scaleX(-1);
}
.icon-flip-vertical {
transform: scaleY(-1);
}
/* Animações */
.icon-spin {
animation: icon-spin 1s linear infinite;
}
@keyframes icon-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.icon-pulse {
animation: icon-pulse 2s ease-in-out infinite;
}
@keyframes icon-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.icon-lg {
width: 1.25rem;
height: 1.25rem;
}
.icon-xl {
width: 1.5rem;
height: 1.5rem;
}
.icon-2xl {
width: 2rem;
height: 2rem;
}
}
/* ============================================
DARK MODE
============================================ */
.dark-mode .icon-primary,
[data-theme="dark"] .icon-primary {
color: var(--color-accent-300);
}
.dark-mode .icon-secondary,
[data-theme="dark"] .icon-secondary {
color: var(--color-text-secondary);
}
.dark-mode .input-group .icon,
[data-theme="dark"] .input-group .icon {
color: var(--color-text-muted);
}
/* ============================================
ACESSIBILIDADE
============================================ */
.icon[aria-label] {
cursor: help;
}
.icon-clickable:focus {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
border-radius: 2px;
}
/* Ocultar visualmente mas manter acessível para screen readers */
.icon-label-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* === foundation/base-components.css === */
/**
* Base Components - Estilos Base Inline
* Extraido de components.css (linhas 112-723)
* Badge, Button, Card, Form Controls, Table, Alert, Modal, Spinner, Divider, Tooltip
*/
/* ============================================================
BADGES — movido para components/badge.css
============================================================ */
/* ============================================================
BOTÕES
============================================================ */
/**
* Botão Base
* Uso: Ações primárias, secundárias, etc.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-md);
gap: var(--spacing-sm);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--font-size-p3);
line-height: var(--line-height-p3);
font-weight: var(--font-weight-medium);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
white-space: nowrap;
user-select: none;
}
.btn:focus {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Botão Primary */
.btn-primary {
background: var(--color-neutral-800);
color: var(--color-text-light);
}
.btn-primary:hover {
background: var(--color-neutral-700);
}
.btn-primary:active {
background: var(--color-neutral-600);
}
/* Botão Secondary */
.btn-secondary {
background: var(--color-accent-400);
color: var(--color-text-light);
}
.btn-secondary:hover {
background: var(--color-accent-500);
}
.btn-secondary:active {
background: var(--color-accent-300);
}
/* Botão Success */
.btn-success {
background: var(--color-green-300);
color: #DDE4D2;
}
.btn-success:hover {
background: var(--color-green-400);
}
/* Botão Warning */
.btn-warning {
background: var(--color-yellow-300);
color: var(--color-neutral-800);
}
.btn-warning:hover {
background: var(--color-yellow-400);
}
/* Botão Danger */
.btn-danger {
background: var(--color-red-400);
color: var(--color-text-light);
}
.btn-danger:hover {
background: var(--color-red-500);
}
/* Botão Outline */
.btn-outline {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-primary);
}
.btn-outline:hover {
background: var(--color-bg-secondary);
border-color: var(--color-accent-400);
}
.btn-outline-primary {
background: transparent;
border: 1px solid var(--color-accent-400);
color: var(--color-accent-400);
}
.btn-outline-primary:hover {
background: var(--color-accent-400);
color: var(--color-text-light);
}
/* Botão Ghost */
.btn-ghost {
background: transparent;
color: var(--color-text-primary);
}
.btn-ghost:hover {
background: var(--color-bg-secondary);
}
/* Botão Link */
.btn-link {
background: transparent;
color: var(--color-accent-400);
padding: 0;
text-decoration: underline;
}
.btn-link:hover {
color: var(--color-accent-500);
}
/* Tamanhos de Botão */
.btn-sm {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-p5);
line-height: var(--line-height-p5);
}
.btn-lg {
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-p1);
line-height: var(--line-height-p1);
}
.btn-block {
display: flex;
width: 100%;
}
/* Botão com Ícone */
.btn-icon {
padding: var(--spacing-sm);
width: 36px;
height: 36px;
}
.btn-icon-sm {
padding: var(--spacing-xs);
width: 28px;
height: 28px;
}
.btn-icon-lg {
padding: var(--spacing-md);
width: 48px;
height: 48px;
}
/* ============================================================
CARDS
============================================================ */
/**
* Card Base
* Uso: Containers de conteúdo
*/
.card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-2xl);
transition: all var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
}
/* Card Dark */
.card-dark {
background: var(--color-bg-dark);
border: 1px solid var(--color-border-dark);
color: var(--color-text-light);
}
/* Card Header */
.card-header {
padding: var(--spacing-xl) var(--spacing-2xl);
border-bottom: 1px solid var(--color-border);
font-family: var(--font-heading);
font-size: var(--font-size-h2);
font-weight: var(--font-weight-medium);
}
/* Card Body */
.card-body {
padding: var(--spacing-2xl);
}
/* Card Footer */
.card-footer {
padding: var(--spacing-xl) var(--spacing-2xl);
border-top: 1px solid var(--color-border);
}
/* Card Sem Padding */
.card-no-padding {
padding: 0;
}
/* Card com Sombra */
.card-shadow {
box-shadow: var(--shadow-md);
}
.card-shadow-lg {
box-shadow: var(--shadow-lg);
}
/* Card Hover Effect */
.card-hover:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* ============================================================
INPUTS E FORMS
============================================================ */
/**
* Form Control Base
* Uso: Inputs, selects, textareas
*/
.form-control {
display: block;
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
font-family: var(--font-body);
font-size: var(--font-size-p2);
line-height: var(--line-height-p2);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--color-accent-400);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.1);
}
.form-control:disabled {
background: var(--color-bg-secondary);
opacity: 0.6;
cursor: not-allowed;
}
.form-control.is-invalid {
border-color: var(--color-danger);
}
.form-control.is-valid {
border-color: var(--color-success);
}
/* Form Group */
.form-group {
margin-bottom: var(--spacing-xl);
}
/* Form Label */
.form-label {
display: block;
margin-bottom: var(--spacing-sm);
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.form-label-required::after {
content: " *";
color: var(--color-danger);
}
/* Form Text (Helper) */
.form-text {
display: block;
margin-top: var(--spacing-xs);
font-size: var(--font-size-p5);
color: var(--color-text-muted);
}
/* Form Feedback */
.invalid-feedback {
display: block;
margin-top: var(--spacing-xs);
font-size: var(--font-size-p5);
color: var(--color-danger);
}
.valid-feedback {
display: block;
margin-top: var(--spacing-xs);
font-size: var(--font-size-p5);
color: var(--color-success);
}
/* ============================================================
TABELAS
============================================================ */
.table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: var(--font-size-p2);
}
.table th,
.table td {
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.table th {
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
background: var(--color-bg-secondary);
}
.table tbody tr:hover {
background: var(--color-bg-secondary);
}
.table-striped tbody tr:nth-child(odd) {
background: var(--color-bg-secondary);
}
/* ============================================================
ALERTS — movido para components/alert.css
============================================================ */
/* ============================================================
MODAL / DIALOG
============================================================ */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: var(--z-modal-backdrop);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--color-bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
z-index: var(--z-modal);
max-width: 90vw;
max-height: 90vh;
overflow: auto;
}
.modal-header {
padding: var(--spacing-2xl);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-family: var(--font-heading);
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
margin: 0;
}
.modal-body {
padding: var(--spacing-2xl);
}
.modal-footer {
padding: var(--spacing-2xl);
border-top: 1px solid var(--color-border);
display: flex;
gap: var(--spacing-md);
justify-content: flex-end;
}
/* ============================================================
SPINNER / LOADER
============================================================ */
.spinner {
width: 40px;
height: 40px;
border: 4px solid var(--color-border);
border-top-color: var(--color-accent-400);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.spinner-sm {
width: 20px;
height: 20px;
border-width: 2px;
}
.spinner-lg {
width: 60px;
height: 60px;
border-width: 6px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ============================================================
DIVIDER
============================================================ */
.divider {
height: 1px;
background: var(--color-border);
margin: var(--spacing-2xl) 0;
}
.divider-vertical {
width: 1px;
height: 100%;
background: var(--color-border);
margin: 0 var(--spacing-2xl);
}
/* ============================================================
TOOLTIP (Básico)
============================================================ */
.tooltip {
position: absolute;
z-index: var(--z-tooltip);
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--color-neutral-800);
color: var(--color-text-light);
font-size: var(--font-size-p5);
border-radius: var(--radius-md);
white-space: nowrap;
pointer-events: none;
}
/* === foundation/header.css === */
/**
* Header Components - SIDASP Design System
*
* Estilos para componentes do cabeçalho (ícones, botões)
* Suporte completo para light/dark mode via CSS variables
*
* @version 1.0.0
* @date 2025-10-30
*/
/* ==========================================================================
Header Icon Buttons
========================================================================== */
.header-icon-button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--color-border-dark, #262b3b);
border-radius: var(--radius-md);
background: transparent;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.header-icon-button:hover {
background: rgba(255, 255, 255, 0.05);
}
.header-icon-button:active {
transform: scale(0.95);
}
/* Ícone dentro do botão */
.header-icon {
font-size: 18px;
color: var(--color-icon-header, #e0e2eb);
transition: color 0.2s ease;
}
/* ==========================================================================
Light Mode Overrides
========================================================================== */
[data-theme="light"] .header-icon-button,
.light-mode .header-icon-button {
border-color: var(--color-border, #e2e8f0);
}
[data-theme="light"] .header-icon-button:hover,
.light-mode .header-icon-button:hover {
background: var(--color-bg-secondary, #f7fafc);
}
[data-theme="light"] .header-icon,
.light-mode .header-icon {
color: var(--color-text-primary, #1a202c);
}
/* ==========================================================================
Dark Mode (padrão do header)
========================================================================== */
[data-theme="dark"] .header-icon-button,
body:not([data-theme="light"]) .header-icon-button {
border-color: #262b3b;
}
[data-theme="dark"] .header-icon,
body:not([data-theme="light"]) .header-icon {
color: #e0e2eb;
}
/* ==========================================================================
Focus States (Acessibilidade)
========================================================================== */
.header-icon-button:focus-visible {
outline: 2px solid var(--color-accent-400);
outline-offset: 2px;
}
/* ==========================================================================
Specific Header Buttons
========================================================================== */
/* Botão de Menu/Sidebar */
.menu-sidago {
background: var(--color-accent-400, #486df4);
border-color: var(--color-accent-400, #486df4);
}
.menu-sidago:hover {
background: var(--color-accent-500, #3d5de0);
}
.menu-sidago svg {
color: white;
}
/* Botão de Inserir */
#button-inserir a {
background: var(--color-accent-400, #3f68fb);
border-color: var(--color-border-dark, #394360);
color: var(--color-text-light, #e8ebf7);
}
#button-inserir a:hover {
background: var(--color-accent-500, #3558e0);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 400px) {
.header-icon-button {
width: 40px;
height: 40px;
}
.header-icon {
font-size: 16px;
}
}
/* ==========================================================================
High Contrast Mode
========================================================================== */
@media (prefers-contrast: high) {
.header-icon-button {
border-width: 2px;
}
.header-icon {
font-weight: 600;
}
}
/* ==========================================================================
Print Mode
========================================================================== */
@media print {
.header-icon-button,
.menu-sidago,
#button-inserir {
display: none !important;
}
}
/* === foundation/breadcrumb.css === */
/**
* Breadcrumb Foundation (legado)
*
* Mantém apenas compatibilidade com classe .migalha (legado).
* O componente principal está em components/breadcrumb.css.
*
* @version 3.0.0
*/
/* Classes legadas (compatibilidade) */
.migalha {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
margin: 0;
padding: 0;
list-style: none;
}
.migalha li {
display: inline-flex;
align-items: center;
}
.migalha a {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-subtle);
text-decoration: none;
transition: color var(--transition-fast);
}
.migalha a:hover {
color: var(--text-base-neutral-secondary);
}
.migalha > li:last-child,
.migalha > li:last-child span {
font-weight: var(--font-weight-medium);
color: var(--text-base-neutral-default);
}
/* === foundation/profile-modal.css === */
/**
* Profile Modal Component - SIDASP Design System
*
* Modal de perfil do usuário com tipografia e cores padronizadas
* Suporte completo para light/dark mode via CSS variables
*
* @version 1.0.0
* @date 2025-10-30
*/
/* ==========================================================================
Modal Container
========================================================================== */
.profile-modal {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0;
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
}
/* ==========================================================================
Actions (Top Right Buttons)
========================================================================== */
.profile-modal__actions {
position: absolute;
top: 1.4rem;
right: 0.5rem;
z-index: 10;
display: flex;
flex-direction: row;
gap: 1rem;
}
.profile-modal__logout-btn,
.profile-modal__close-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 1.75rem; /* 28px */
padding: 0 0.75rem;
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-family: var(--font-sans);
color: var(--color-text-primary);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.profile-modal__logout-btn:hover,
.profile-modal__close-btn:hover {
background: var(--color-bg-secondary);
}
.profile-modal__logout-btn:active,
.profile-modal__close-btn:active {
transform: scale(0.98);
}
.profile-modal__logout-btn i,
.profile-modal__close-btn i {
font-size: 1.25rem;
color: var(--color-text-primary);
}
.profile-modal__close-btn {
width: 1.75rem;
padding: 0;
}
/* ==========================================================================
Header
========================================================================== */
.profile-modal__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
min-height: 104px;
padding: 2rem 1rem 1.5rem;
background: var(--color-bg-secondary);
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.profile-modal__header h2 {
margin: 0;
color: var(--color-text-primary);
}
/* ==========================================================================
Main Content
========================================================================== */
.profile-modal__main {
display: flex;
flex-direction: column;
gap: 0;
padding: 2rem 1rem;
}
/* ==========================================================================
User Header (Avatar + Name + Email + Button)
========================================================================== */
.profile-modal__user-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: -2rem; /* Pull up to overlap with header */
margin-bottom: 2rem;
}
@media (min-width: 640px) {
.profile-modal__user-header {
flex-direction: row;
justify-content: space-between;
}
}
.profile-modal__avatar {
width: 84px;
min-width: 84px;
max-width: 84px;
height: 84px;
min-height: 84px;
max-height: 84px;
margin-top: -14px;
border: 4px solid var(--color-bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
object-fit: cover;
background: var(--color-bg-secondary);
}
.profile-modal__user-info {
display: flex;
flex-direction: column;
flex: 1;
align-items: flex-start;
gap: 0.5rem;
min-width: 0;
margin-top: 1.25rem;
margin-bottom: 0.375rem;
padding-top: 0.5rem;
}
@media (min-width: 640px) {
.profile-modal__user-info {
align-items: flex-start;
}
}
.profile-modal__user-info h3 {
margin: 0;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-modal__user-info .p2 {
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
Fields Grid
========================================================================== */
.profile-modal__fields {
display: grid;
grid-template-columns: 1fr;
gap: 2rem 3rem;
width: 100%;
}
@media (min-width: 640px) {
.profile-modal__fields {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.profile-modal__fields {
grid-template-columns: repeat(3, 1fr);
}
}
.profile-modal__field {
display: flex;
flex-direction: column;
gap: 0.25rem;
text-align: left;
}
.profile-modal__field .label {
color: var(--color-text-secondary);
}
.profile-modal__field .p1 {
color: var(--color-text-primary);
}
.profile-modal__field-with-icon {
display: flex;
align-items: center;
gap: 0.5rem;
}
.profile-modal__field-with-icon i {
font-size: 1rem;
color: var(--color-text-secondary);
}
.profile-modal__field a {
color: var(--color-accent-400);
text-decoration: none;
transition: color 0.2s ease;
}
.profile-modal__field a:hover {
color: var(--color-accent-500);
text-decoration: underline;
}
/* ==========================================================================
Responsive Adjustments
========================================================================== */
@media (max-width: 640px) {
.profile-modal {
max-width: 100%;
border-radius: var(--radius-xl);
}
.profile-modal__actions {
gap: 0.5rem;
}
.profile-modal__logout-btn span {
display: none; /* Hide text on mobile */
}
.profile-modal__logout-btn {
width: 1.75rem;
padding: 0;
}
}
/* ==========================================================================
Dark Mode Specific
========================================================================== */
[data-theme="dark"] .profile-modal {
background: var(--color-bg-primary);
border-color: var(--color-border);
}
[data-theme="dark"] .profile-modal__header {
background: var(--color-bg-secondary);
}
[data-theme="dark"] .profile-modal__logout-btn,
[data-theme="dark"] .profile-modal__close-btn {
background: var(--color-bg-secondary);
border-color: var(--color-border);
}
[data-theme="dark"] .profile-modal__logout-btn:hover,
[data-theme="dark"] .profile-modal__close-btn:hover {
background: var(--color-bg-tertiary);
}
[data-theme="dark"] .profile-modal__avatar {
border-color: var(--color-bg-primary);
background: var(--color-bg-tertiary);
}
/* === components/accordion.css === */
/**
* Accordion
*
* Seções colapsáveis com simple-table no conteúdo expandido.
* 4 variantes: padrão, com ícone, com badge, com badge e ícone.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Header padding: 24px top/bottom
* - Header gap (label↔chevron): 20px
* - Label-content gap: 12px
* - Separador: 1px border-bottom --border-base-neutral-default
* - Conteúdo padding-bottom: 32px
* - Chevron: btn ghost xs (24x24) ou ícone 18x18
* - Título: p3 medium
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.accordion {
display: flex;
flex-direction: column;
width: 100%;
}
/* ============================================================
ITEM
============================================================ */
.accordion-item {
border-bottom: 1px solid var(--border-base-neutral-default);
}
/* ============================================================
HEADER
============================================================ */
.accordion-header {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 0;
cursor: pointer;
user-select: none;
}
.accordion-header-content {
display: flex;
align-items: center;
gap: var(--spacing-3);
flex: 1;
min-width: 0;
}
/* Título */
.accordion-title {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
}
/* Ícone à esquerda (opcional) */
.accordion-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--icon-base-neutral-default);
}
.accordion-icon svg {
width: 18px;
height: 18px;
}
/* Chevron */
.accordion-chevron {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--icon-base-neutral-default);
transition: transform var(--transition-fast);
}
.accordion-chevron svg {
width: 12px;
height: 12px;
}
.accordion-item.is-open .accordion-chevron {
transform: rotate(180deg);
}
/* ============================================================
CONTEÚDO (expandido)
============================================================ */
.accordion-body {
display: none;
padding-bottom: 32px;
}
.accordion-item.is-open .accordion-body {
display: block;
}
/* Simple table dentro do accordion herda 100% da largura */
.accordion-body .simple-table {
width: 100%;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.accordion-body {
display: block !important;
}
.accordion-chevron {
display: none;
}
}
/* === components/alert-dialog.css === */
/**
* ALERT DIALOG
*
* Diálogos de alerta para confirmações, avisos e ações destrutivas.
* Modal agora é exclusivo para alertas (drawer = container padrão).
*
* Tipos: Primary (vertical, centrado), Secondary (horizontal, à esquerda)
* Variantes: Neutral, Success, Warning, Destructive
*
* @version 1.0.0
* @date 2026-03-24
* @source Figma > UI Kit > Alert Dialog
*/
/* ============================================
BACKDROP
============================================ */
.alert-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 1060;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface-overlay-neutral-backdrop) 20%, transparent);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base, 200ms ease-in-out),
visibility var(--transition-base, 200ms ease-in-out);
}
.alert-dialog-backdrop.is-open {
opacity: 1;
visibility: visible;
}
/* ============================================
DIALOG BASE
============================================ */
.alert-dialog {
background: var(--surface-overlay-neutral-container-default);
border-radius: var(--radius-default, 6px);
box-shadow: var(--shadow-lg);
opacity: 0;
transform: scale(0.95) translateY(8px);
transition: opacity var(--transition-base, 200ms ease-in-out),
transform var(--transition-base, 200ms ease-in-out);
}
.alert-dialog-backdrop.is-open .alert-dialog {
opacity: 1;
transform: scale(1) translateY(0);
}
/* ============================================
ICON
============================================ */
.alert-dialog-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--border-overlay-neutral-default);
flex-shrink: 0;
}
.alert-dialog-icon svg {
width: 18px;
height: 18px;
}
/* ============================================
CONTENT (wrapper para texto + footer)
============================================ */
.alert-dialog-content {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.alert-dialog-text {
display: flex;
flex-direction: column;
gap: var(--spacing-1, 4px);
}
.alert-dialog-title {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p2, 26px);
color: var(--text-overlay-neutral-default);
margin: 0;
}
.alert-dialog-description {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p3, 24px);
color: var(--text-overlay-neutral-secondary);
margin: 0;
}
/* ============================================
FOOTER (BUTTONS)
============================================ */
.alert-dialog-footer {
display: flex;
gap: var(--spacing-3, 12px);
}
/* ============================================
OVERLAY BUTTON OVERRIDES
Botões dentro do alert-dialog usam tokens overlay
============================================ */
.alert-dialog .btn-filled {
background-color: var(--surface-overlay-brand-container-medium);
color: var(--text-overlay-neutral-white);
}
.alert-dialog .btn-filled:hover {
background-color: var(--surface-overlay-brand-container-low);
}
.alert-dialog .btn-outlined {
background-color: transparent;
color: var(--text-overlay-neutral-default);
border-color: var(--border-overlay-neutral-default);
}
.alert-dialog .btn-outlined:hover {
background-color: var(--surface-overlay-neutral-container-hover);
}
/* ============================================
TYPE: PRIMARY (vertical, centrado)
============================================ */
.alert-dialog--primary {
display: flex;
flex-direction: column;
align-items: center;
width: 464px;
max-width: calc(100vw - 48px);
padding: var(--spacing-7, 32px);
gap: var(--spacing-5, 20px);
}
.alert-dialog--primary .alert-dialog-content {
gap: var(--spacing-8, 40px);
align-items: center;
text-align: center;
width: 100%;
}
.alert-dialog--primary .alert-dialog-footer {
justify-content: center;
width: 100%;
}
/* Primary: botões large (40px) */
.alert-dialog--primary .alert-dialog-footer .btn {
height: 40px;
padding: 8px 12px;
min-width: 120px;
}
/* ============================================
TYPE: SECONDARY (horizontal, à esquerda)
============================================ */
.alert-dialog--secondary {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 512px;
max-width: calc(100vw - 48px);
padding: var(--spacing-6, 24px);
gap: var(--spacing-6, 24px);
}
.alert-dialog--secondary .alert-dialog-content {
gap: var(--spacing-6, 24px);
}
.alert-dialog--secondary .alert-dialog-footer {
justify-content: flex-start;
}
/* Secondary: botões small (32px) */
.alert-dialog--secondary .alert-dialog-footer .btn {
height: 32px;
padding: 4px 12px;
}
/* ============================================
ICON COLOR VARIANTS
============================================ */
.alert-dialog--neutral .alert-dialog-icon {
color: var(--icon-overlay-neutral-default);
}
.alert-dialog--success .alert-dialog-icon {
color: var(--icon-overlay-success-default);
}
.alert-dialog--warning .alert-dialog-icon {
color: var(--icon-overlay-warning-default);
}
.alert-dialog--destructive .alert-dialog-icon {
color: var(--icon-overlay-error-default);
}
/* ============================================
DESTRUCTIVE BUTTON OVERRIDE
Botão filled muda de azul para vermelho.
Especificidade maior que .alert-dialog .btn-filled
============================================ */
.alert-dialog.alert-dialog--destructive .btn-filled {
background-color: var(--surface-overlay-error-container-medium);
}
.alert-dialog.alert-dialog--destructive .btn-filled:hover {
background-color: var(--surface-overlay-error-container-low);
}
.alert-dialog.alert-dialog--destructive .btn-filled:active {
background-color: var(--surface-overlay-error-container-low);
}
/* ============================================
RESPONSIVO
============================================ */
@media (max-width: 560px) {
.alert-dialog--primary,
.alert-dialog--secondary {
width: calc(100vw - 48px);
}
.alert-dialog--secondary {
flex-direction: column;
align-items: center;
text-align: center;
}
.alert-dialog--secondary .alert-dialog-footer {
justify-content: center;
width: 100%;
}
}
/* ============================================
ACESSIBILIDADE
============================================ */
@media (prefers-reduced-motion: reduce) {
.alert-dialog-backdrop,
.alert-dialog {
transition: none !important;
}
}
/* === components/alert.css === */
/**
* ALERT COMPONENT
*
* Componente de alertas com 4 tipos e 4 variacoes.
*
* Tipos: default, success, warning, error
* Variacoes (via presenca/ausencia de elementos HTML):
* - Padrao: texto + close
* - Fixo: texto (sem close)
* - Com icone: icone + texto + close
* - Fixo com icone: icone + texto (sem close)
*
* Estrutura HTML:
* .alert > .alert-content [> .alert-icon] + .alert-message
* > .alert-close (opcional)
*
* Specs:
* padding: --spacing-3 (12px)
* border-radius: 6px
* gap externo (content <-> close): --spacing-3 (12px)
* gap interno (icone <-> texto): --spacing-2 (8px)
* icones: 18px
* texto: p4 (14px/24px regular)
* altura: hug (auto)
* largura: 100% do container pai
*
* @version 2.0.0
* @date 2026-03-05
* @source Figma > UI Kit > Componentes Raiz > Alert
*/
/* ============================================
ESTRUTURA BASE
============================================ */
.alert {
display: flex;
align-items: center;
gap: var(--spacing-3);
width: 100%;
padding: var(--spacing-3);
border: none;
border-radius: 6px;
font-family: var(--font-body);
font-size: var(--font-size-p4);
line-height: var(--line-height-p4);
font-weight: var(--font-weight-regular);
}
/* Container do icone + texto */
.alert-content {
flex: 1;
display: flex;
align-items: center;
gap: var(--spacing-2);
min-width: 0;
}
/* Icone do tipo (esquerda) */
.alert-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.alert-icon svg {
width: 18px;
height: 18px;
}
/* Texto */
.alert-message {
flex: 1;
min-width: 0;
}
/* Botao fechar */
.alert-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
.alert-close svg {
width: 18px;
height: 18px;
}
/* ============================================
TIPO: DEFAULT (Padrao)
============================================ */
.alert-default {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-default);
}
.alert-default .alert-icon {
color: var(--icon-base-neutral-default);
}
.alert-default .alert-close {
color: var(--icon-base-neutral-secondary);
}
/* ============================================
TIPO: SUCCESS (Sucesso)
============================================ */
.alert-success {
background-color: var(--surface-base-alert-container-success);
color: var(--text-base-success-default);
}
.alert-success .alert-icon {
color: var(--icon-base-success-default);
}
.alert-success .alert-close {
color: var(--icon-base-success-secondary);
}
/* ============================================
TIPO: WARNING (Atencao)
============================================ */
.alert-warning {
background-color: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
.alert-warning .alert-icon {
color: var(--icon-base-warning-default);
}
.alert-warning .alert-close {
color: var(--icon-base-warning-secondary);
}
/* ============================================
TIPO: ERROR (Erro)
============================================ */
.alert-error {
background-color: var(--surface-base-alert-container-error);
color: var(--text-base-error-default);
}
.alert-error .alert-icon {
color: var(--icon-base-error-default);
}
.alert-error .alert-close {
color: var(--icon-base-error-secondary);
}
/* === components/avatar.css === */
/**
* AVATAR COMPONENT
*
* Componente de avatar com 4 tipos e 4 tamanhos.
*
* Tipos:
* - Com foto (imagem do usuario)
* - Sem foto masculino (placeholder avatar-male.png)
* - Sem foto feminino (placeholder avatar-female.png)
* - Com botao (foto + botao de edicao, apenas XL e LG)
*
* Tamanhos:
* --xl: 96px (drawer de perfil)
* --lg: 80px (pre-visualizacao na home)
* --md: 40px (navbar)
* --sm: 32px (listas, tabelas)
*
* Estrutura HTML:
* .avatar.avatar--{size} > img.avatar-img
*
* Com botao:
* .avatar-wrapper > .avatar.avatar--{xl|lg} > img.avatar-img
* > button.avatar-action > svg (edit icon 16px)
*
* @version 3.0.0
* @date 2026-03-05
* @source Figma > UI Kit > Componentes Raiz > Avatar
*/
/* ============================================
ESTRUTURA BASE
============================================ */
.avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============================================
TAMANHOS
============================================ */
.avatar--xl {
width: 96px;
height: 96px;
}
.avatar--lg {
width: 80px;
height: 80px;
}
.avatar--md {
width: 40px;
height: 40px;
}
.avatar--sm {
width: 32px;
height: 32px;
}
/* ============================================
AVATAR COM BOTAO
Apenas para tamanhos XL e LG.
Botao posicionado no canto inferior direito.
============================================ */
.avatar-wrapper {
position: relative;
display: inline-flex;
}
.avatar-action {
position: absolute;
bottom: 0;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background-color: var(--surface-base-neutral-container-emphasis);
border: 2px solid var(--surface-base-neutral-page-default);
border-radius: 50%;
cursor: pointer;
z-index: 1;
}
.avatar-action svg {
width: 16px;
height: 16px;
color: var(--icon-base-neutral-default);
}
/* === components/badge.css === */
/**
* BADGE COMPONENT
*
* Componente de badge com 5 tipos e 4 variações.
*
* Tipos:
* - Contornada (outline): fundo transparente + borda
* - Neutra: fundo neutral-container-emphasis
* - Sucesso: fundo alert-container-success
* - Atenção: fundo alert-container-warning
* - Erro: fundo alert-container-error
*
* Variações:
* - Grande (default): altura 36px, padding 0 16px, texto p3, ícone 16px
* - Pequena (.badge-sm): altura 30px, padding 0 12px, texto p5, ícone 12px
* - Grande com ícone
* - Pequena com ícone
*
* Estrutura HTML:
* .badge.badge--{tipo} > span.badge-text
* .badge.badge--{tipo} > .badge-icon > svg + span.badge-text
* .badge.badge--{tipo}.badge--sm > span.badge-text
* .badge.badge--{tipo}.badge--sm > .badge-icon > svg + span.badge-text
*
* @version 3.0.0
* @date 2026-03-05
* @source Figma > UI Kit > Componentes Raiz > Badge
*/
/* ============================================
ESTRUTURA BASE
============================================ */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 16px;
border: 1px solid transparent;
border-radius: 9999px;
font-family: var(--font-body);
font-size: var(--font-size-p3);
line-height: var(--line-height-p3);
font-weight: var(--font-weight-medium);
white-space: nowrap;
user-select: none;
vertical-align: middle;
}
/* Ícone dentro da badge */
.badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.badge-icon svg {
width: 16px;
height: 16px;
}
/* ============================================
TAMANHO PEQUENO
============================================ */
.badge--sm {
height: 30px;
padding: 0 12px;
font-size: var(--font-size-p5);
line-height: var(--line-height-p5);
}
.badge--sm .badge-icon {
width: 12px;
height: 12px;
}
.badge--sm .badge-icon svg {
width: 12px;
height: 12px;
}
/* ============================================
TIPO: CONTORNADA (OUTLINE)
============================================ */
.badge--outline {
background-color: transparent;
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-default);
}
.badge--outline .badge-icon svg {
color: var(--icon-base-neutral-default);
}
/* ============================================
TIPO: NEUTRA
============================================ */
.badge--neutral {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-default);
}
.badge--neutral .badge-icon svg {
color: var(--icon-base-neutral-default);
}
/* ============================================
TIPO: SUCESSO
============================================ */
.badge--success {
background-color: var(--surface-base-alert-container-success);
color: var(--text-base-success-default);
}
.badge--success .badge-icon svg {
color: var(--icon-base-success-default);
}
/* ============================================
TIPO: ATENÇÃO (WARNING)
============================================ */
.badge--warning {
background-color: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
.badge--warning .badge-icon svg {
color: var(--icon-base-warning-default);
}
/* ============================================
TIPO: ERRO
============================================ */
.badge--error {
background-color: var(--surface-base-alert-container-error);
color: var(--text-base-error-default);
}
.badge--error .badge-icon svg {
color: var(--icon-base-error-default);
}
/* ============================================
VARIANTE: REMOVÍVEL (com botão fechar)
============================================ */
.badge-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
flex-shrink: 0;
cursor: pointer;
border: none;
background: none;
padding: 0;
color: inherit;
opacity: 0.6;
transition: opacity var(--transition-fast);
}
.badge-close:hover {
opacity: 1;
}
.badge-close svg {
width: 12px;
height: 12px;
}
/* === components/baruh.css === */
/**
* Baruh (IA Chat)
*
* Modal de chat com IA para auxílio ao usuário.
* Dois estados: welcome (sugestões) e conversação.
* Overlay tokens para todas as cores.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Modal: 720x520, radius 6px
* - Header: 64px, logo + close btn-xs ghost
* - Chat: padding 56px lateral, 20px bottom
* - User bubble: bg emphasis, radius 6px, aligned right
* - AI bubble: left border 1px, padding 0 20px
* - Input: 40px, send btn filled accent
* - Welcome: título h1, 3 suggestion cards
*
* @version 3.0.0
*/
/* ============================================================
BACKDROP
============================================================ */
.baruh-backdrop {
position: fixed;
inset: 0;
z-index: var(--z-modal, 1060);
background: var(--surface-overlay-neutral-backdrop);
display: none;
align-items: center;
justify-content: center;
}
.baruh-backdrop.is-open {
display: flex;
}
/* ============================================================
MODAL
============================================================ */
.baruh {
width: 720px;
height: 520px;
display: flex;
flex-direction: column;
background: var(--surface-overlay-neutral-container-default);
border: 1px solid var(--border-overlay-neutral-default);
border-radius: var(--radius-default);
box-sizing: border-box;
overflow: hidden;
}
/* ============================================================
HEADER
============================================================ */
.baruh-header {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 20px;
flex-shrink: 0;
position: relative;
}
.baruh-logo {
display: flex;
align-items: center;
gap: 4px;
height: 24px;
}
.baruh-logo img,
.baruh-logo svg {
height: 24px;
width: auto;
}
.baruh-close {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
/* ============================================================
CONTENT AREA
============================================================ */
.baruh-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 56px 20px;
min-height: 0;
gap: var(--spacing-3);
}
/* ============================================================
WELCOME STATE
============================================================ */
.baruh-welcome {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 56px;
}
.baruh-welcome-text {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-2);
}
.baruh-welcome-title {
font-family: var(--font-display);
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-h1);
color: var(--text-overlay-neutral-default);
text-align: center;
}
.baruh-welcome-subtitle {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-secondary);
text-align: center;
}
/* Suggestion cards */
.baruh-suggestions {
display: flex;
gap: var(--spacing-3);
width: 100%;
}
.baruh-suggestion {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-5);
padding: var(--spacing-3);
height: 110px;
border: 1px solid var(--border-overlay-neutral-default);
border-radius: var(--radius-md);
background: var(--surface-overlay-neutral-container-default);
cursor: pointer;
box-sizing: border-box;
transition: background var(--transition-fast);
}
.baruh-suggestion:hover {
background: var(--surface-overlay-neutral-container-hover);
}
.baruh-suggestion-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--icon-overlay-brand-default);
}
.baruh-suggestion-icon svg {
width: 18px;
height: 18px;
}
.baruh-suggestion-text {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-default);
cursor: pointer;
}
/* ============================================================
CHAT STATE
============================================================ */
.baruh-chat {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-3);
overflow-y: auto;
min-height: 0;
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
}
.baruh-chat::-webkit-scrollbar {
display: none;
}
/* Fade gradient at bottom */
.baruh-chat-fade {
position: sticky;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, var(--surface-overlay-neutral-container-default));
pointer-events: none;
flex-shrink: 0;
margin-top: -80px;
}
/* ============================================================
USER MESSAGE
============================================================ */
.baruh-msg-user {
display: flex;
justify-content: flex-end;
}
.baruh-msg-user-bubble {
padding: var(--spacing-1) var(--spacing-2);
background: var(--surface-overlay-neutral-container-emphasis);
border-radius: var(--radius-default);
font-family: var(--font-body);
font-size: var(--font-size-p5);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p5);
color: var(--text-overlay-neutral-default);
max-width: 80%;
}
/* ============================================================
AI MESSAGE
============================================================ */
.baruh-msg-ai {
padding: 0 20px;
border-left: 1px solid var(--border-overlay-neutral-default);
font-family: var(--font-body);
font-size: var(--font-size-p5);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p5);
color: var(--text-overlay-neutral-default);
}
.baruh-msg-ai-actions {
display: flex;
gap: 4px;
margin-top: var(--spacing-2);
}
/* ============================================================
INPUT AREA
============================================================ */
.baruh-input {
display: flex;
gap: var(--spacing-3);
flex-shrink: 0;
padding: 0 56px 20px;
}
.baruh-input .input {
flex: 1;
background: var(--surface-overlay-neutral-container-default);
border-color: var(--border-overlay-neutral-default);
color: var(--text-overlay-neutral-default);
}
.baruh-input .input::placeholder {
color: var(--text-overlay-neutral-subtle);
}
.baruh-input .input:focus {
border-color: var(--border-overlay-neutral-strong);
}
/* ============================================================
PRINT
============================================================ */
@media print {
.baruh-backdrop {
display: none !important;
}
}
/* === components/breadcrumb.css === */
/**
* Breadcrumb
*
* Navegação hierárquica com separadores chevron.
* Margin-top 24px (da navbar), margin-bottom 40px (do conteúdo).
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Texto: p3 (14px, medium 500)
* - Gap: 8px entre texto e separador
* - Separador: chevron right 18x18, stroke 1.5px
* - Link: --text-base-neutral-subtle
* - Hover: --text-base-neutral-secondary (sem underline)
* - Current: --text-base-neutral-default
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin: 24px 0 40px 0;
padding: 0;
list-style: none;
}
/* ============================================================
ITEM
============================================================ */
.breadcrumb-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
}
/* ============================================================
LINK
============================================================ */
.breadcrumb-link {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-subtle);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-link:hover {
color: var(--text-base-neutral-secondary);
}
.breadcrumb-link:focus-visible {
outline: 2px solid var(--border-base-brand-default);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================================================
ITEM ATUAL (current)
============================================================ */
.breadcrumb-current {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
}
/* ============================================================
SEPARADOR (chevron)
============================================================ */
.breadcrumb-separator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--icon-base-neutral-subtle);
}
.breadcrumb-separator svg {
width: 18px;
height: 18px;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.breadcrumb {
margin: 0 0 16px 0;
}
.breadcrumb-link {
color: #000;
}
.breadcrumb-separator {
color: #666;
}
}
/* === components/button.css === */
/**
* BUTTON COMPONENT
*
* Alinhado com o Figma (UI Kit > Botoes).
*
* Variantes: Filled, Outlined, Ghost, FAB
* Tipos: Default (texto), With-icon (texto + icone), Icon-only
* Estados: Default, Hover, Disabled, Loading
* Tamanhos: Large (padrao, 40px), Small (32px)
*
* Dark mode automatico via variaveis semanticas.
* Acessibilidade WCAG 2.1 AA.
*
* @version 2.0.0
* @date 2026-03-10
* @source Figma > UI Kit > Botoes
*/
/* ============================================
BASE
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2, 8px);
height: 40px;
padding: 8px 12px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p3, 24px);
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 6px;
outline: none;
cursor: pointer;
user-select: none;
transition: all var(--transition-base, 200ms ease-in-out);
-webkit-tap-highlight-color: transparent;
}
.btn:focus-visible {
outline: 2px solid var(--surface-base-brand-container-medium);
outline-offset: 2px;
}
/* ============================================
TAMANHOS
============================================ */
/* Small (32px) */
.btn-sm {
height: 32px;
padding: 4px 12px;
}
/* ============================================
FILLED
============================================ */
.btn-filled {
background-color: var(--surface-base-brand-container-medium);
color: var(--text-base-neutral-white);
border-color: transparent;
}
.btn-filled:hover {
background-color: var(--surface-base-brand-container-low);
}
.btn-filled:active {
background-color: var(--surface-base-brand-container-low);
}
.btn-filled:disabled,
.btn-filled.is-disabled {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* ============================================
OUTLINED
============================================ */
.btn-outlined {
background-color: transparent;
color: var(--text-base-neutral-default);
border-color: var(--border-base-neutral-default);
}
.btn-outlined:hover {
background-color: var(--surface-base-neutral-container-hover);
}
.btn-outlined:active {
background-color: var(--surface-base-neutral-container-hover);
}
.btn-outlined:disabled,
.btn-outlined.is-disabled {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* ============================================
GHOST
============================================ */
.btn-ghost {
background-color: transparent;
color: var(--text-base-neutral-default);
border-color: transparent;
}
.btn-ghost:hover {
background-color: var(--surface-base-neutral-container-hover);
}
.btn-ghost:active {
background-color: var(--surface-base-neutral-container-hover);
}
.btn-ghost:disabled,
.btn-ghost.is-disabled {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* ============================================
ICON-ONLY
============================================ */
.btn-icon {
width: 40px;
height: 40px;
padding: 0;
}
.btn-icon.btn-sm {
width: 32px;
height: 32px;
}
/* Ghost icon-only tem tamanho medio (32px) e pequeno (24px) */
.btn-icon-md {
width: 32px;
height: 32px;
padding: 0;
}
.btn-icon-sm {
width: 24px;
height: 24px;
padding: 0;
}
/* Icone dentro do botao */
.btn-icon-content {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-icon-content svg {
width: 18px;
height: 18px;
}
.btn-sm .btn-icon-content svg,
.btn-icon-md .btn-icon-content svg {
width: 14px;
height: 14px;
}
.btn-icon-sm .btn-icon-content svg {
width: 12px;
height: 12px;
}
/* ============================================
FAB (Floating Action Button)
============================================ */
.btn-fab {
width: 56px;
height: 56px;
padding: 0;
border-radius: var(--radius-full, 9999px);
background-color: var(--surface-base-brand-container-medium);
color: var(--text-base-neutral-white);
border-color: transparent;
box-shadow: var(--shadow-lg);
}
.btn-fab:hover {
background-color: var(--surface-base-brand-container-low);
}
.btn-fab:active {
background-color: var(--surface-base-brand-container-low);
}
.btn-fab:disabled,
.btn-fab.is-disabled {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
.btn-fab .btn-icon-content svg {
width: 18px;
height: 18px;
}
/* ============================================
LOADING
============================================ */
.btn.is-loading {
pointer-events: none;
}
/* Esconde o icone original, mantém o texto */
.btn.is-loading > .btn-icon-content {
display: none;
}
/* Spinner inline antes do texto */
.btn.is-loading::before {
content: '';
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
border-right-color: transparent;
animation: btn-spinner 0.6s linear infinite;
flex-shrink: 0;
}
.btn-sm.is-loading::before,
.btn-icon-md.is-loading::before {
width: 14px;
height: 14px;
}
.btn-icon-sm.is-loading::before {
width: 12px;
height: 12px;
}
/* Icon-only loading: esconde icone, centraliza spinner */
.btn-icon.is-loading > .btn-icon-content,
.btn-icon-md.is-loading > .btn-icon-content,
.btn-icon-sm.is-loading > .btn-icon-content,
.btn-fab.is-loading > .btn-icon-content {
display: none;
}
/* Cor do spinner por variante */
.btn-filled.is-loading,
.btn-fab.is-loading {
color: var(--text-base-neutral-white);
}
.btn-filled.is-loading {
background-color: var(--surface-base-brand-container-medium);
}
.btn-outlined.is-loading {
background-color: transparent;
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-default);
}
.btn-ghost.is-loading {
background-color: transparent;
color: var(--text-base-neutral-default);
}
.btn-fab.is-loading {
background-color: var(--surface-base-brand-container-medium);
}
@keyframes btn-spinner {
to {
transform: rotate(360deg);
}
}
/* ============================================
UTILIDADES
============================================ */
/* Full width */
.btn-block {
display: flex;
width: 100%;
}
/* Button Groups */
.btn-group {
display: inline-flex;
gap: 0;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
margin-left: 0;
}
.btn-group .btn:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.btn-group .btn:focus {
z-index: 1;
}
.btn-group-vertical {
display: inline-flex;
flex-direction: column;
gap: 0;
}
.btn-group-vertical .btn {
border-radius: 0;
margin-top: -1px;
width: 100%;
}
.btn-group-vertical .btn:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-top: 0;
}
.btn-group-vertical .btn:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
/* ============================================
ACESSIBILIDADE
============================================ */
@media (prefers-contrast: high) {
.btn {
border-width: 2px;
}
.btn:focus-visible {
outline-width: 3px;
outline-offset: 3px;
}
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
.btn.is-loading::after {
animation: none;
border: none;
content: '...';
font-size: 16px;
color: inherit;
visibility: visible;
}
}
.btn-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.btn-block-mobile {
display: flex;
width: 100%;
}
.btn-group {
flex-wrap: wrap;
}
}
@media print {
.btn {
border: 1px solid #000;
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
}
}
/* ============================================
COMPATIBILIDADE
Classes legadas mapeadas para a nova estrutura.
Remover apos migrar todos os componentes.
============================================ */
/* Filled aliases */
.btn-primary,
.btn-solid-primary,
.btn-secondary,
.btn-solid-secondary {
background-color: var(--surface-base-brand-container-medium);
color: var(--text-base-neutral-white);
border-color: transparent;
}
.btn-primary:hover,
.btn-solid-primary:hover,
.btn-secondary:hover,
.btn-solid-secondary:hover {
background-color: var(--surface-base-brand-container-low);
}
.btn-primary:disabled,
.btn-solid-primary:disabled,
.btn-secondary:disabled,
.btn-solid-secondary:disabled {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* Outlined aliases */
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary {
background-color: transparent;
color: var(--text-base-neutral-default);
border-color: var(--border-base-neutral-default);
}
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
background-color: var(--surface-base-neutral-container-hover);
}
.btn-outline:disabled,
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* Ghost aliases */
.btn-ghost-primary,
.btn-ghost-secondary {
background-color: transparent;
color: var(--text-base-neutral-default);
border-color: transparent;
}
.btn-ghost-primary:hover,
.btn-ghost-secondary:hover {
background-color: var(--surface-base-neutral-container-hover);
}
/* Status colors - mapeadas para filled como fallback */
.btn-success,
.btn-solid-success,
.btn-warning,
.btn-solid-warning,
.btn-danger,
.btn-solid-danger {
background-color: var(--surface-base-brand-container-medium);
color: var(--text-base-neutral-white);
border-color: transparent;
}
.btn-success:hover,
.btn-solid-success:hover,
.btn-warning:hover,
.btn-solid-warning:hover,
.btn-danger:hover,
.btn-solid-danger:hover {
background-color: var(--surface-base-brand-container-low);
}
.btn-success:disabled,
.btn-solid-success:disabled,
.btn-warning:disabled,
.btn-solid-warning:disabled,
.btn-danger:disabled,
.btn-solid-danger:disabled {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* Outlined status aliases */
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-light {
background-color: transparent;
color: var(--text-base-neutral-default);
border-color: var(--border-base-neutral-default);
}
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-light:hover {
background-color: var(--surface-base-neutral-container-hover);
}
.btn-outline-success:disabled,
.btn-outline-warning:disabled,
.btn-outline-danger:disabled,
.btn-outline-light:disabled {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* Ghost status aliases */
.btn-ghost-success,
.btn-ghost-warning,
.btn-ghost-danger,
.btn-ghost-light {
background-color: transparent;
color: var(--text-base-neutral-default);
border-color: transparent;
}
.btn-ghost-success:hover,
.btn-ghost-warning:hover,
.btn-ghost-danger:hover,
.btn-ghost-light:hover {
background-color: var(--surface-base-neutral-container-hover);
}
/* Light/Neutral aliases */
.btn-light,
.btn-solid-light {
background-color: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-default);
border-color: var(--border-base-neutral-default);
}
.btn-light:hover,
.btn-solid-light:hover {
background-color: var(--surface-base-neutral-container-hover);
}
/* Link aliases */
.btn-link {
background-color: transparent;
color: var(--surface-base-brand-container-medium);
border: none;
padding: 0;
height: auto;
text-decoration: underline;
text-underline-offset: 2px;
}
.btn-link:hover {
color: var(--surface-base-brand-container-low);
}
.btn-link-primary {
background-color: transparent;
color: var(--text-base-neutral-default);
border: none;
padding: 0;
height: auto;
text-decoration: underline;
text-underline-offset: 2px;
}
.btn-link-danger {
background-color: transparent;
color: var(--text-base-error-default);
border: none;
padding: 0;
height: auto;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Extra-small (24px) — somente icon-only ghost (close button padrão) */
.btn-xs {
width: 24px;
height: 24px;
padding: 0;
}
.btn-xs .btn-icon-content svg {
width: 12px;
height: 12px;
}
.btn-lg {
height: 40px;
padding: 8px 12px;
}
.btn-xl {
height: 40px;
padding: 8px 16px;
}
/* Disabled alias */
.btn.btn-disabled {
cursor: not-allowed;
pointer-events: none;
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-subtle);
}
/* Loading alias */
.btn.btn-loading {
pointer-events: none;
}
.btn.btn-loading > .btn-icon-content {
display: none;
}
.btn.btn-loading::before {
content: '';
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
border-right-color: transparent;
animation: btn-spinner 0.6s linear infinite;
flex-shrink: 0;
}
/* Icon size aliases */
.btn-icon-lg {
width: 40px;
height: 40px;
padding: 0;
}
.btn-icon .btn-icon-content {
width: 18px;
height: 18px;
}
.btn-icon.btn-sm .btn-icon-content {
width: 14px;
height: 14px;
}
/* === components/capacity-map.css === */
/**
* Capacity Map
*
* Tabela de capacidade por região com barras de utilização, badges de status
* e linha de resumo. BEM naming, dark mode, semantic CSS vars.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.capacity-map {
width: 100%;
}
.capacity-map__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Tabela */
.capacity-map__table {
width: 100%;
border-collapse: collapse;
}
/* Cabeçalho de coluna */
.capacity-map__header {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-base-neutral-secondary);
padding: 8px 12px;
text-align: left;
border-bottom: 2px solid var(--border-base-neutral-default);
}
/* Linha por região */
.capacity-map__row {
transition: background 0.2s;
}
.capacity-map__row:hover {
background: var(--surface-base-neutral-container-default);
}
/* Nome da região (primeira célula) */
.capacity-map__row-label {
font-weight: 600;
color: var(--text-base-neutral-default);
padding: 10px 12px;
}
/* Célula de dados */
.capacity-map__cell {
padding: 10px 12px;
font-size: 14px;
color: var(--text-base-neutral-default);
border-bottom: 1px solid var(--border-base-neutral-default);
}
/* Célula numérica */
.capacity-map__cell--numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Wrapper da barra de utilização */
.capacity-map__bar-wrapper {
height: 8px;
background: var(--neutral-100, var(--color-neutral-100));
border-radius: 4px;
overflow: hidden;
}
/* Barra colorida */
.capacity-map__bar {
height: 100%;
border-radius: 4px;
transition: width 0.8s ease;
}
/* Percentual */
.capacity-map__bar-label {
font-size: 12px;
font-weight: 600;
color: var(--text-base-neutral-default);
}
/* Badge de status */
.capacity-map__status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
font-weight: 500;
line-height: 1.6;
white-space: nowrap;
}
.capacity-map__status--ok {
background: var(--surface-base-alert-container-success);
color: var(--text-base-success-default);
}
.capacity-map__status--warning {
background: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
.capacity-map__status--overload {
background: var(--surface-base-alert-container-error);
color: var(--text-base-error-default);
}
/* Rodapé com totais */
.capacity-map__summary {
font-weight: 700;
border-top: 2px solid var(--border-base-neutral-default);
}
.capacity-map__summary td {
padding: 10px 12px;
font-size: 14px;
color: var(--text-base-neutral-default);
}
/* Estado vazio */
.capacity-map__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
ANIMATION
======================================================================== */
@keyframes barFill {
from {
width: 0;
}
to {
width: var(--target-width);
}
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .capacity-map__row:hover {
background: var(--surface-base-neutral-container-default);
}
.dark .capacity-map__header {
border-bottom-color: var(--border-base-neutral-default);
}
.dark .capacity-map__cell {
border-bottom-color: var(--border-base-neutral-default);
}
.dark .capacity-map__bar-wrapper {
background: var(--neutral-700, var(--color-neutral-700));
}
.dark .capacity-map__summary {
border-top-color: var(--border-base-neutral-default);
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.capacity-map__table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* === components/checkbox.css === */
/**
* CHECKBOX COMPONENT
*
* Controle de selecao multipla.
* Estados: default, hover, checked, indeterminate, disabled, disabled+checked
*
* Baseado no Figma — Controls / Checkbox
* @version 2.0.0
* @date 2026-03-17
*/
/* ============================================
STRUCTURE
============================================ */
.checkbox {
display: inline-flex;
align-items: center;
gap: var(--spacing-3);
cursor: pointer;
user-select: none;
}
.checkbox-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* ============================================
BOX
============================================ */
.checkbox-box {
position: relative;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--border-base-neutral-strong);
border-radius: var(--spacing-1);
transition: all var(--transition-base);
}
/* Check icon (via pseudo-element) */
.checkbox-box::after {
content: '';
display: none;
width: 5px;
height: 9px;
border-right: 1.5px solid var(--icon-base-neutral-white);
border-bottom: 1.5px solid var(--icon-base-neutral-white);
transform: rotate(45deg);
margin-top: -2px;
}
/* Minus icon for indeterminate */
.checkbox-box::before {
content: '';
display: none;
width: 10px;
height: 0;
border-top: 1.5px solid var(--icon-base-neutral-white);
}
/* ============================================
LABEL
============================================ */
.checkbox-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--spacing-6);
color: var(--text-base-neutral-default);
cursor: pointer;
}
/* ============================================
HOVER
============================================ */
.checkbox:hover .checkbox-box {
background-color: var(--surface-base-neutral-container-deep);
}
/* ============================================
CHECKED
============================================ */
.checkbox-input:checked + .checkbox-box {
background-color: var(--surface-base-brand-container-medium);
border-color: transparent;
}
.checkbox-input:checked + .checkbox-box::after {
display: block;
}
/* ============================================
INDETERMINATE
============================================ */
.checkbox-input:indeterminate + .checkbox-box {
background-color: var(--surface-base-brand-container-medium);
border-color: transparent;
}
.checkbox-input:indeterminate + .checkbox-box::before {
display: block;
}
/* ============================================
DISABLED
============================================ */
.checkbox-input:disabled + .checkbox-box {
border-color: var(--border-base-neutral-default);
cursor: not-allowed;
}
.checkbox-input:disabled ~ .checkbox-label {
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
.checkbox:has(.checkbox-input:disabled) {
cursor: not-allowed;
}
/* Disabled + Checked */
.checkbox-input:disabled:checked + .checkbox-box,
.checkbox-input:disabled:indeterminate + .checkbox-box {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--border-base-neutral-default);
}
.checkbox-input:disabled:checked + .checkbox-box::after {
border-color: var(--icon-base-neutral-subtle);
}
.checkbox-input:disabled:indeterminate + .checkbox-box::before {
border-color: var(--icon-base-neutral-subtle);
}
/* Disabled nao reage a hover */
.checkbox:has(.checkbox-input:disabled):hover .checkbox-box {
background-color: transparent;
}
.checkbox:has(.checkbox-input:disabled:checked):hover .checkbox-box,
.checkbox:has(.checkbox-input:disabled:indeterminate):hover .checkbox-box {
background-color: var(--surface-base-neutral-container-emphasis);
}
/* ============================================
FOCUS
============================================ */
.checkbox-input:focus-visible + .checkbox-box {
outline: 2px solid var(--border-base-brand-default);
outline-offset: 2px;
}
/* ============================================
ANIMATION
============================================ */
@keyframes checkbox-pop {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.checkbox-input:checked + .checkbox-box,
.checkbox-input:indeterminate + .checkbox-box {
animation: checkbox-pop var(--transition-base);
}
/* ============================================
ACCESSIBILITY
============================================ */
@media (prefers-reduced-motion: reduce) {
.checkbox-box {
transition: none;
animation: none;
}
}
@media (prefers-contrast: high) {
.checkbox-box {
border-width: 2px;
}
.checkbox-input:focus-visible + .checkbox-box {
outline: 3px solid;
outline-offset: 2px;
}
}
@media print {
.checkbox-box {
border: 1px solid #000;
}
.checkbox-input:checked + .checkbox-box {
background: #000;
}
.checkbox-input:checked + .checkbox-box::after {
border-color: #fff;
}
}
/* === components/circular-diagram.css === */
/**
* Circular Diagram
*
* Diagrama circular (pie/donut) SVG com segmentos interativos, tooltip e legenda.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.circular-diagram {
width: 100%;
position: relative;
text-align: center;
}
.circular-diagram__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
text-align: center;
}
/* SVG wrapper */
.circular-diagram__svg-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
/* SVG responsivo */
.circular-diagram__svg {
width: 100%;
max-width: 400px;
height: auto;
display: block;
}
/* Segmento (arc path) */
.circular-diagram__segment {
cursor: pointer;
transition: opacity 0.3s, transform 0.3s;
transform-origin: center;
}
.circular-diagram__segment:hover {
opacity: 0.8;
transform: scale(1.02);
}
/* Label no segmento */
.circular-diagram__label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
fill: #fff;
pointer-events: none;
text-anchor: middle;
dominant-baseline: central;
}
/* Valor no segmento */
.circular-diagram__value {
font-family: var(--font-body);
font-size: 11px;
fill: #fff;
pointer-events: none;
text-anchor: middle;
dominant-baseline: central;
}
/* Centro do donut */
.circular-diagram__center {
fill: var(--surface-base-neutral-page-default);
}
.circular-diagram__center-text {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
fill: var(--text-base-neutral-default);
text-anchor: middle;
dominant-baseline: central;
}
/* Tooltip */
.circular-diagram__tooltip {
position: absolute;
padding: 8px 12px;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
font-size: 13px;
color: var(--text-base-neutral-default);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 10;
max-width: 240px;
white-space: normal;
}
.circular-diagram__tooltip--visible {
opacity: 1;
}
.circular-diagram__tooltip-title {
font-weight: 600;
margin-bottom: 2px;
}
.circular-diagram__tooltip-desc {
color: var(--text-base-neutral-secondary);
line-height: 1.4;
}
/* Legenda */
.circular-diagram__legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.circular-diagram__legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.circular-diagram__legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.circular-diagram__legend-label {
color: var(--text-base-neutral-secondary);
}
.circular-diagram__legend-value {
font-weight: 600;
color: var(--text-base-neutral-default);
}
/* Estado vazio */
.circular-diagram__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
ANIMATION
======================================================================== */
@keyframes segmentDraw {
from {
stroke-dashoffset: var(--dash-length);
}
to {
stroke-dashoffset: 0;
}
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .circular-diagram__segment:hover {
opacity: 0.85;
}
.dark .circular-diagram__center {
fill: var(--surface-base-neutral-page-default);
}
.dark .circular-diagram__center-text {
fill: var(--text-base-neutral-default);
}
.dark .circular-diagram__tooltip {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}
.dark .circular-diagram__legend-label {
color: var(--text-base-neutral-secondary);
}
.dark .circular-diagram__legend-value {
color: var(--text-base-neutral-default);
}
/* === components/comment.css === */
/**
* Comment
* Componente de discussão com avatar, autor, timestamp, conteúdo e ações.
* @layer components
* @since 0.2.0
*/
/* ============================================
COMMENT LIST
============================================ */
.comment-list {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ============================================
COMMENT BASE
============================================ */
.comment {
display: flex;
gap: 12px;
align-items: flex-start;
}
.comment__avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
}
.comment__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder quando não tem imagem */
.comment__avatar--placeholder {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-secondary);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
}
/* ============================================
BODY
============================================ */
.comment__body {
flex: 1;
min-width: 0;
}
.comment__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.comment__author {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--text-base-neutral-default);
}
.comment__time {
font-family: var(--font-body);
font-size: 12px;
line-height: 1.3;
color: var(--text-base-neutral-secondary);
}
.comment__content {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--text-base-neutral-default);
margin: 0;
word-wrap: break-word;
}
/* ============================================
AÇÕES
============================================ */
.comment__actions {
display: flex;
gap: 12px;
margin-top: 6px;
}
.comment__actions-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
background: none;
border: none;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: 1;
color: var(--text-base-neutral-secondary);
cursor: pointer;
transition: color var(--transition-fast, 150ms) ease;
}
.comment__actions-item:hover {
color: var(--text-base-brand-default);
}
.comment__actions-item svg {
width: 12px;
height: 12px;
}
/* ============================================
ÁREA DE RESPOSTA
============================================ */
.comment__reply {
margin-top: 12px;
}
.comment__reply textarea {
width: 100%;
min-height: 56px;
padding: 8px 12px;
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-sm, 4px);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: var(--text-base-neutral-default);
background: var(--surface-base-neutral-container-default, #ffffff);
resize: vertical;
outline: none;
box-sizing: border-box;
}
.comment__reply textarea:focus {
border-color: var(--border-base-brand-default, #3E68FB);
}
.comment__reply-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
/* ============================================
COMENTÁRIOS FILHOS (aninhamento)
============================================ */
.comment__children {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
margin-left: 20px;
padding-left: 20px;
border-left: 2px solid var(--border-base-neutral-default);
}
/* ============================================
MODIFICADOR: HIGHLIGHTED
============================================ */
.comment--highlighted {
padding: 12px;
border-radius: var(--radius-sm, 4px);
background-color: var(--surface-base-alert-container-warning);
}
/* ============================================
MODIFICADOR: EDITING
============================================ */
.comment--editing .comment__content {
display: none;
}
.comment__edit-field {
display: none;
}
.comment--editing .comment__edit-field {
display: block;
margin-top: 4px;
}
.comment__edit-field textarea {
width: 100%;
min-height: 56px;
padding: 8px 12px;
border: 1px solid var(--border-base-brand-default, #3E68FB);
border-radius: var(--radius-sm, 4px);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--text-base-neutral-default);
background: var(--surface-base-neutral-container-default, #ffffff);
resize: vertical;
outline: none;
box-sizing: border-box;
}
.comment__edit-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
/* ============================================
RESPONSIVO
============================================ */
@media (max-width: 640px) {
.comment__children {
margin-left: 12px;
padding-left: 12px;
}
.comment__header {
flex-wrap: wrap;
}
}
/* ============================================
DARK MODE
============================================ */
.dark .comment__author,
[data-theme="dark"] .comment__author {
color: var(--text-base-neutral-default);
}
.dark .comment__time,
[data-theme="dark"] .comment__time {
color: var(--text-base-neutral-secondary);
}
.dark .comment__content,
[data-theme="dark"] .comment__content {
color: var(--text-base-neutral-default);
}
.dark .comment__actions-item,
[data-theme="dark"] .comment__actions-item {
color: var(--text-base-neutral-secondary);
}
.dark .comment__actions-item:hover,
[data-theme="dark"] .comment__actions-item:hover {
color: var(--text-base-brand-default);
}
.dark .comment__children,
[data-theme="dark"] .comment__children {
border-left-color: var(--border-base-neutral-default);
}
.dark .comment__reply textarea,
.dark .comment__edit-field textarea,
[data-theme="dark"] .comment__reply textarea,
[data-theme="dark"] .comment__edit-field textarea {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-default);
}
.dark .comment__reply textarea:focus,
.dark .comment__edit-field textarea:focus,
[data-theme="dark"] .comment__reply textarea:focus,
[data-theme="dark"] .comment__edit-field textarea:focus {
border-color: var(--border-base-brand-default);
}
.dark .comment--highlighted,
[data-theme="dark"] .comment--highlighted {
background-color: var(--surface-base-alert-container-warning);
}
.dark .comment__avatar--placeholder,
[data-theme="dark"] .comment__avatar--placeholder {
background-color: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-secondary);
}
/* === components/detail-tabs.css === */
/**
* Design System - Detail Modal with Sidebar Tabs
*
* Layout de modal de detalhamento com abas laterais
* Baseado nas especificações do Figma (detalhar-sidebar-white.css e detalhar-sidebar-dark.css)
*
* @version 2.0.0
* @date 2025-01-02
* @author SIDASP Design System Team
*
* Figma Specs (Light Mode):
* - Modal: 1200px x 680px, border-radius 8px, background #F6F6F9
* - Sidebar: 272px width, background #12151F, padding 20px, gap 40px
* - Title: Space Grotesk 500 20px/30px, color #F6F6F9
* - Subtitle: Inter 400 14px/24px, color #7A839F
* - Tab active: height 40px, background rgba(246, 246, 249, 0.1), border-radius 8px
* - Tab inactive: height 48px, background transparent
* - Tab label active: Inter 500 14px/24px, color #F6F6F9
* - Tab label inactive: Inter 500 14px/24px, color #7A839F
* - Arrow icon: 20x20px, visible only on active tab
* - Close button: 16x16px, color #7A839F
*
* Figma Specs (Dark Mode):
* - Sidebar: 200px width, background #2A2F41, padding 20px 20px 50px
* - Title: color #E0E2EB
* - Subtitle: color #A2A8B9
* - Tab label active: color #E0E2EB
* - Tab label inactive: color #A2A8B9
*/
/* ==========================================================================
CSS VARIABLES - Tokens do Figma
========================================================================== */
:root {
/* Light mode colors */
--detail-sidebar-bg: #12151F;
--detail-sidebar-width: 272px;
--detail-content-bg: #F6F6F9;
--detail-title-color: #F6F6F9;
--detail-subtitle-color: #7A839F;
--detail-tab-active-bg: rgba(246, 246, 249, 0.1);
--detail-tab-inactive-bg: transparent;
--detail-tab-label-active: #F6F6F9;
--detail-tab-label-inactive: #7A839F;
--detail-tab-active-height: 40px;
--detail-tab-inactive-height: 48px;
--detail-close-color: #7A839F;
--detail-close-hover: #12151F;
}
/* Dark mode tokens */
html.dark,
html.dark-mode,
[data-theme="dark"] {
--detail-sidebar-bg: #2A2F41;
--detail-sidebar-width: 200px;
--detail-content-bg: #1D2333;
--detail-title-color: #E0E2EB;
--detail-subtitle-color: #A2A8B9;
--detail-tab-label-active: #E0E2EB;
--detail-tab-label-inactive: #A2A8B9;
--detail-close-color: #A2A8B9;
--detail-close-hover: #E0E2EB;
}
/* ==========================================================================
MODAL CONTAINER - Layout base
========================================================================== */
/* Ocultar boxDetalhar quando não está dentro de um dialog */
#boxDetalhar {
display: none;
}
/* Mostrar apenas quando está dentro de um ui-dialog jQuery */
.ui-dialog #boxDetalhar {
display: flex !important;
flex-direction: row !important;
min-width: 900px;
min-height: 500px;
overflow: hidden;
border-radius: 8px;
background: var(--detail-content-bg);
}
/* ==========================================================================
SIDEBAR - Container lateral com abas (Figma specs)
========================================================================== */
#boxDetalhar .left-detalhar,
#boxDetalhar .left {
/* Figma: Layout automático - flex column */
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
/* Figma: padding 20px, gap 40px */
padding: 20px !important;
gap: 40px !important;
/* Figma: width 272px (light mode) */
width: var(--detail-sidebar-width) !important;
min-width: var(--detail-sidebar-width) !important;
flex-shrink: 0 !important;
height: 100% !important;
/* Figma: background #12151F (light mode) */
background: var(--detail-sidebar-bg) !important;
/* Border radius apenas nos cantos esquerdos */
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
/* ==========================================================================
SIDEBAR HEADER - Título e subtítulo (Figma specs)
========================================================================== */
.detail-sidebar-header {
/* Figma: Layout automático - flex column, gap 4px */
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
gap: 4px !important;
/* Figma: width 232px (272px - 40px padding) */
width: 100% !important;
flex-shrink: 0 !important;
text-align: left !important;
background: transparent !important;
}
.detail-sidebar-title,
#boxDetalhar .detail-sidebar-title {
width: 100% !important;
/* Figma: Tipografia/H2 - Space Grotesk 500 20px/30px */
font-family: 'Space Grotesk', sans-serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 20px !important;
line-height: 30px !important;
/* Figma: color #F6F6F9 (light mode) */
color: var(--detail-title-color) !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
}
.detail-sidebar-subtitle,
#boxDetalhar .detail-sidebar-subtitle {
width: 100% !important;
/* Figma: Tipografia/Paragraph 04 - Inter 400 14px/24px */
font-family: 'Inter', sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 24px !important;
/* Figma: color #7A839F (light mode) */
color: var(--detail-subtitle-color) !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
}
/* ==========================================================================
TABS CONTAINER - Lista de abas verticais (Figma: Itens)
========================================================================== */
.detail-tabs,
#boxDetalhar .tabsDetalhar,
.tabsDetalhar,
#sidebarTabs,
#boxDetalhar .mdl-tabs__tab-bar,
#boxDetalhar .mdl-tabs nav.mdl-tabs__tab-bar,
#boxDetalhar .mdl-tabs > .mdl-tabs__tab-bar {
/* Figma: Layout automático - flex column */
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
margin: 0 !important;
/* Figma: width 232px */
width: 100% !important;
list-style: none !important;
gap: 0 !important;
flex: 1 !important;
overflow-y: auto !important;
/* Reset borders */
border: none !important;
border-bottom: none !important;
}
/* ==========================================================================
TAB ITEM - Estilo base das abas (Figma: Item inativo)
========================================================================== */
.detail-tabs li,
.tabsDetalhar li,
#sidebarTabs li,
.detail-sidebar-tab,
.detail-tab-item,
#boxDetalhar .mdl-tabs__tab-bar a.mdl-tabs__tab,
#boxDetalhar .mdl-tabs__tab {
/* Figma: Layout automático - flex row, center, padding 8px 12px, gap 12px */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important; /* Label à esquerda */
padding: 8px 12px !important;
padding-right: 36px !important; /* Espaço para o chevron absoluto */
gap: 12px !important;
/* Figma: width 232px, height 48px (inativo) */
width: 100% !important;
height: var(--detail-tab-inactive-height) !important;
min-height: var(--detail-tab-inactive-height) !important;
/* Figma: background transparent (inativo), border-radius 8px */
background: var(--detail-tab-inactive-bg) !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.15s ease, height 0.15s ease !important;
box-sizing: border-box !important;
margin: 0 !important;
float: none !important;
list-style: none !important;
/* Reset MDL styles */
border: none !important;
text-transform: none !important;
/* Posicionamento para chevron absoluto */
position: relative !important;
}
/* Tab item hover */
.detail-tabs li:hover,
.tabsDetalhar li:hover,
#sidebarTabs li:hover,
.detail-sidebar-tab:hover,
.detail-tab-item:hover,
#boxDetalhar .mdl-tabs__tab:hover {
background: rgba(246, 246, 249, 0.05) !important;
}
/* ==========================================================================
TAB ITEM ACTIVE - Aba selecionada (Figma: Item ativo)
========================================================================== */
.detail-tabs li.active,
.detail-tabs li.ativa,
.detail-tabs li.is-active,
.tabsDetalhar li.active,
.tabsDetalhar li.ativa,
#sidebarTabs li.active,
#sidebarTabs li.ativa,
#sidebarTabs li.is-active,
.detail-sidebar-tab.is-active,
.detail-tab-item.active,
.detail-tab-item.ativa,
.tabsDetalhar .ativa,
#boxDetalhar .mdl-tabs__tab.is-active,
#boxDetalhar .mdl-tabs__tab-bar a.is-active {
/* Figma: height 40px (ativo) */
height: var(--detail-tab-active-height) !important;
min-height: var(--detail-tab-active-height) !important;
/* Figma: background rgba(246, 246, 249, 0.1) (ativo) */
background: var(--detail-tab-active-bg) !important;
border-radius: 8px !important;
}
/* ==========================================================================
TAB LABEL - Texto das abas (Figma: Tab label)
========================================================================== */
.detail-tabs li a,
.detail-tabs li span,
.tabsDetalhar li a,
.tabsDetalhar li span,
#sidebarTabs li a,
#sidebarTabs li span,
.detail-sidebar-tab__label,
.detail-tab-label,
#boxDetalhar .mdl-tabs__tab {
/* Figma: flex-grow 1 */
flex: 1 !important;
/* Figma: Tipografia/Paragraph 03 - Inter 500 14px/24px */
font-family: 'Inter', sans-serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 24px !important;
/* Figma: color #7A839F (inativo) */
color: var(--detail-tab-label-inactive) !important;
text-decoration: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
width: auto !important;
height: auto !important;
cursor: pointer !important;
/* Texto em uma única linha */
white-space: nowrap !important;
}
/* Tab label active - Figma: color #F6F6F9 */
.detail-tabs li.active a,
.detail-tabs li.active span,
.detail-tabs li.ativa a,
.detail-tabs li.ativa span,
.detail-tabs li.is-active a,
.detail-tabs li.is-active span,
.tabsDetalhar li.active a,
.tabsDetalhar li.active span,
.tabsDetalhar li.ativa a,
.tabsDetalhar li.ativa span,
#sidebarTabs li.active a,
#sidebarTabs li.active span,
#sidebarTabs li.ativa a,
#sidebarTabs li.ativa span,
#sidebarTabs li.is-active span,
.detail-sidebar-tab.is-active span,
.detail-sidebar-tab.is-active .detail-sidebar-tab__label,
.tabsDetalhar .ativa span,
.detail-tab-label.active,
#boxDetalhar .mdl-tabs__tab.is-active,
#boxDetalhar .mdl-tabs__tab-bar a.is-active {
color: var(--detail-tab-label-active) !important;
}
/* ==========================================================================
TAB ARROW ICON - Seta do item ativo (Figma: Angle-right)
========================================================================== */
/* Base: hidden by default (para tabs legadas que não usam JS) */
/* NOTA: .detail-sidebar-tab usa SVG inline via JS, não precisa de ::after */
.detail-tab-arrow,
.detail-tabs li:not(.detail-sidebar-tab)::after,
.tabsDetalhar li:not(.detail-sidebar-tab)::after,
#sidebarTabs li:not(.detail-sidebar-tab)::after {
/* Figma: Angle-right 20x20px */
content: '' !important;
width: 20px !important;
height: 20px !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
/* Chevron usando SVG inline */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F6F6F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
/* Show arrow only on active tab (para tabs legadas) */
.detail-tabs li:not(.detail-sidebar-tab).active::after,
.detail-tabs li:not(.detail-sidebar-tab).ativa::after,
.detail-tabs li:not(.detail-sidebar-tab).is-active::after,
.tabsDetalhar li:not(.detail-sidebar-tab).ativa::after,
.tabsDetalhar li:not(.detail-sidebar-tab).active::after,
#sidebarTabs li:not(.detail-sidebar-tab).ativa::after,
#sidebarTabs li:not(.detail-sidebar-tab).active::after,
#sidebarTabs li:not(.detail-sidebar-tab).is-active::after {
display: flex !important;
}
/* Desabilitar ::after para .detail-sidebar-tab (usa SVG inline via JS) */
.detail-sidebar-tab::after {
display: none !important;
content: none !important;
}
/* Arrow icon dentro do sidebar tab (via JS) - SVG inline */
.detail-sidebar-tab__arrow {
/* Posição absoluta no final direito da tab */
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--detail-tab-label-active);
}
/* SVG dentro do arrow - tamanho fixo */
.detail-sidebar-tab__arrow svg {
width: 8px;
height: 12px;
flex-shrink: 0;
}
.detail-sidebar-tab.is-active .detail-sidebar-tab__arrow {
display: flex;
}
/* ==========================================================================
CONTENT AREA - Área de conteúdo à direita
========================================================================== */
#boxDetalhar .right {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
padding: 20px !important;
overflow: auto !important;
/* Figma: background #F6F6F9 (light mode) */
background: var(--detail-content-bg) !important;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ==========================================================================
CLOSE BUTTON - Botão de fechar (Figma specs)
========================================================================== */
.detail-close,
#boxDetalhar .detail-close {
/* Figma: position absolute, 16x16px, left 1164px, top 20px */
position: absolute !important;
top: 20px !important;
right: 20px !important;
width: 16px !important;
height: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 10010 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.detail-close i,
.detail-close .material-icons,
.detail-close .mdi {
/* Figma: 16px, color #7A839F */
font-size: 16px !important;
color: var(--detail-close-color) !important;
transition: color 0.15s ease !important;
}
.detail-close:hover i,
.detail-close:hover .material-icons,
.detail-close:hover .mdi {
color: var(--detail-close-hover) !important;
}
/* ==========================================================================
LEGACY COMPATIBILITY - Estilos antigos das abas
========================================================================== */
/* Reset estilos antigos de abas horizontais */
.tabsDetalhar,
#sidebarTabs {
flex-wrap: nowrap !important;
border-bottom: none !important;
}
/* Esconder abas antigas de formato horizontal */
#boxDetalhar .ContentControl .abas,
#boxDetalhar .ContentControl #header {
display: none !important;
}
/* Estilos antigos .aba e .ativa - sobrescrever */
.tabsDetalhar .aba,
.tabsDetalhar .ativa,
#sidebarTabs .aba,
#sidebarTabs .ativa {
width: 100% !important;
height: auto !important;
margin: 0 !important;
background: transparent !important;
text-align: left !important;
padding: 8px 12px !important;
}
.tabsDetalhar .ativa,
#sidebarTabs .ativa {
background: var(--detail-tab-active-bg) !important;
}
/* ==========================================================================
FLOWBITE MODAL INTEGRATION
========================================================================== */
/* Container do modal Flowbite - wrapper externo (primeira div filha)
IMPORTANTE: Precisa sobrescrever classes Tailwind max-w-* */
div[id^="flowbite-dialog-"]:has(#boxDetalhar) > div.relative {
/* Figma: Modal 1200px x 680px */
width: 1200px !important;
max-width: 1200px !important;
min-width: 900px !important;
height: 680px !important;
max-height: 90vh !important;
}
/* Fallback: sobrescrever qualquer classe max-w-* do Tailwind */
div[id^="flowbite-dialog-"]:has(#boxDetalhar) > div[class*="max-w-"] {
width: 1200px !important;
max-width: 1200px !important;
min-width: 900px !important;
height: 680px !important;
max-height: 90vh !important;
}
/* Modal body - container interno */
div[id^="flowbite-dialog-"]:has(#boxDetalhar) .ds-fk-modal-body {
width: 100% !important;
height: 100% !important;
min-height: 600px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
/* Content area - onde está o boxDetalhar */
div[id^="flowbite-dialog-"]:has(#boxDetalhar) .ds-fk-modal-content {
overflow: hidden !important;
border-radius: 8px !important;
width: 100% !important;
height: 100% !important;
min-height: 600px !important;
display: flex !important;
flex-direction: row !important;
flex: 1 !important;
}
/* boxDetalhar dentro do modal Flowbite */
div[id^="flowbite-dialog-"]:has(#boxDetalhar) #boxDetalhar {
border-radius: 8px !important;
display: flex !important;
flex-direction: row !important;
width: 100% !important;
height: 100% !important;
min-height: 600px !important;
overflow: hidden !important;
flex: 1 !important;
}
/* Sidebar no modal Flowbite - CRÍTICO: altura 100% do container */
div[id^="flowbite-dialog-"]:has(#boxDetalhar) #boxDetalhar .left-detalhar,
div[id^="flowbite-dialog-"]:has(#boxDetalhar) #boxDetalhar .left,
div[id^="flowbite-dialog-"]:has(#boxDetalhar) .left-detalhar,
div[id^="flowbite-dialog-"]:has(#boxDetalhar) .left {
width: var(--detail-sidebar-width) !important;
min-width: var(--detail-sidebar-width) !important;
height: 100% !important;
min-height: 600px !important;
flex-shrink: 0 !important;
background: var(--detail-sidebar-bg) !important;
align-self: stretch !important;
}
/* Área de conteúdo à direita no modal Flowbite */
div[id^="flowbite-dialog-"]:has(#boxDetalhar) #boxDetalhar .right,
div[id^="flowbite-dialog-"]:has(#boxDetalhar) .right {
flex: 1 !important;
height: 100% !important;
min-height: 600px !important;
overflow: auto !important;
align-self: stretch !important;
}
/* ==========================================================================
RESPONSIVE - Ajustes para telas menores
========================================================================== */
@media (max-width: 1024px) {
:root {
--detail-sidebar-width: 220px;
}
}
@media (max-width: 768px) {
:root {
--detail-sidebar-width: 180px;
}
.detail-sidebar-title,
#boxDetalhar .detail-sidebar-title {
font-size: 16px !important;
line-height: 24px !important;
}
.detail-sidebar-subtitle,
#boxDetalhar .detail-sidebar-subtitle {
font-size: 12px !important;
line-height: 20px !important;
}
}
/* === components/drawer-confirm.css === */
/**
* ============================================================================
* DRAWER CONFIRM - DESIGN SYSTEM SIDASP
* ============================================================================
*
* Estilos para drawers que funcionam como modais de confirmação.
* Aplica cores e estilos similares aos modais do tipo "confirm" para
* manter consistência visual.
*
* Usado em: Funcionalidades v2 com type: "drawer" e renderAction
*
* @version 1.0.0
* @author SIDASP Design System
* @date 2026-01-07
*/
/* ============================================================================
DRAWER CONFIRM - CORES DO MODAL
============================================================================ */
/**
* Aplica cores do modal confirm aos formulários dentro do drawer
*/
.drawer.drawer-confirm .drawer__body {
background: var(--color-bg-primary, #FFFFFF);
}
/**
* Títulos e textos com cores do modal
*/
.drawer.drawer-confirm .drawer__body h3,
.drawer.drawer-confirm .drawer__body h4 {
font-size: 18px;
font-weight: 600;
color: var(--color-neutral-800);
margin: 0 0 20px 0;
line-height: 1.4;
}
/**
* Labels de formulário com cores do modal
*/
.drawer.drawer-confirm .drawer__body label,
.drawer.drawer-confirm .drawer__body .form-label,
.drawer.drawer-confirm .drawer__body .input-label {
font-size: 14px;
font-weight: 500;
color: var(--color-neutral-800);
}
/**
* Inputs e textareas com cores do modal
*/
.drawer.drawer-confirm .drawer__body input[type="text"],
.drawer.drawer-confirm .drawer__body input[type="email"],
.drawer.drawer-confirm .drawer__body input[type="number"],
.drawer.drawer-confirm .drawer__body input[type="tel"],
.drawer.drawer-confirm .drawer__body input[type="url"],
.drawer.drawer-confirm .drawer__body input[type="password"],
.drawer.drawer-confirm .drawer__body textarea,
.drawer.drawer-confirm .drawer__body select,
.drawer.drawer-confirm .drawer__body .input,
.drawer.drawer-confirm .drawer__body .select-native {
background: var(--color-text-light);
border: 1px solid var(--color-border-light);
color: var(--color-neutral-800);
}
.drawer.drawer-confirm .drawer__body input[type="text"]:focus,
.drawer.drawer-confirm .drawer__body input[type="email"]:focus,
.drawer.drawer-confirm .drawer__body input[type="number"]:focus,
.drawer.drawer-confirm .drawer__body input[type="tel"]:focus,
.drawer.drawer-confirm .drawer__body input[type="url"]:focus,
.drawer.drawer-confirm .drawer__body input[type="password"]:focus,
.drawer.drawer-confirm .drawer__body textarea:focus,
.drawer.drawer-confirm .drawer__body select:focus,
.drawer.drawer-confirm .drawer__body .input:focus,
.drawer.drawer-confirm .drawer__body .select-native:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.1);
}
/* ============================================================================
FOOTER COM CORES DO MODAL CONFIRM
============================================================================ */
/**
* Footer do drawer com cores do modal
*/
.drawer.drawer-confirm .drawer__footer {
background: var(--color-text-light);
border-top: 1px solid var(--color-border-light);
padding: 16px 24px;
}
/**
* Botões do footer com estilos do modal confirm
*/
.drawer.drawer-confirm .drawer__footer button {
font-size: 14px;
font-weight: 500;
padding: 10px 20px;
border-radius: 8px;
transition: all 0.2s ease;
}
/**
* Botão Cancelar - estilo outline como no modal
*/
.drawer.drawer-confirm .drawer__footer button.btn-outline,
.drawer.drawer-confirm .drawer__footer button[data-drawer-close] {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.drawer.drawer-confirm .drawer__footer button.btn-outline:hover,
.drawer.drawer-confirm .drawer__footer button[data-drawer-close]:hover {
background: var(--color-bg-secondary);
border-color: var(--color-border);
color: var(--color-text-primary);
}
/**
* Botão Confirmar - estilo primary como no modal
*/
.drawer.drawer-confirm .drawer__footer button.btn-primary,
.drawer.drawer-confirm .drawer__footer button[data-drawer-submit] {
background: var(--color-primary);
border: 1px solid var(--color-primary);
color: var(--color-text-light);
}
.drawer.drawer-confirm .drawer__footer button.btn-primary:hover,
.drawer.drawer-confirm .drawer__footer button[data-drawer-submit]:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.drawer.drawer-confirm .drawer__footer button.btn-primary:active,
.drawer.drawer-confirm .drawer__footer button[data-drawer-submit]:active {
transform: scale(0.98);
}
/* ============================================================================
FORM GROUPS - ESPAÇAMENTO CONSISTENTE
============================================================================ */
/**
* Espaçamento de form groups como no modal
*/
.drawer.drawer-confirm .drawer__body .form-group,
.drawer.drawer-confirm .drawer__body .input-group,
.drawer.drawer-confirm .drawer__body .mdl-textfield {
margin-bottom: 20px;
}
.drawer.drawer-confirm .drawer__body .form-group:last-child,
.drawer.drawer-confirm .drawer__body .input-group:last-child,
.drawer.drawer-confirm .drawer__body .mdl-textfield:last-child {
margin-bottom: 0;
}
/* ============================================================================
HELPER TEXT
============================================================================ */
/**
* Textos de ajuda com cores do modal
*/
.drawer.drawer-confirm .drawer__body .form-text,
.drawer.drawer-confirm .drawer__body .input-helper,
.drawer.drawer-confirm .drawer__body .help-text {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 4px;
}
/* ============================================================================
MENSAGENS DE ERRO
============================================================================ */
/**
* Mensagens de erro com cores do modal
*/
.drawer.drawer-confirm .drawer__body .error,
.drawer.drawer-confirm .drawer__body .invalid-feedback,
.drawer.drawer-confirm .drawer__body .input-error {
font-size: 13px;
color: var(--color-danger);
margin-top: 4px;
}
.drawer.drawer-confirm .drawer__body input.error,
.drawer.drawer-confirm .drawer__body textarea.error,
.drawer.drawer-confirm .drawer__body select.error,
.drawer.drawer-confirm .drawer__body .input.is-invalid {
border-color: var(--color-danger);
}
/* ============================================================================
CAMPOS OBRIGATÓRIOS
============================================================================ */
/**
* Marcador de campo obrigatório
*/
.drawer.drawer-confirm .drawer__body label.required::after,
.drawer.drawer-confirm .drawer__body .form-label.required::after,
.drawer.drawer-confirm .drawer__body .input-label-required::after {
content: ' *';
color: var(--color-danger);
}
/* ============================================================================
COMPATIBILIDADE COM MDL (Material Design Lite)
============================================================================ */
/**
* Suporte a campos MDL ainda não migrados
*/
.drawer.drawer-confirm .drawer__body .mdl-textfield__input {
background: var(--color-text-light);
border: 1px solid var(--color-border-light);
color: var(--color-neutral-800);
padding: 10px 12px;
border-radius: 6px;
}
.drawer.drawer-confirm .drawer__body .mdl-textfield__label {
color: var(--color-text-secondary);
}
.drawer.drawer-confirm .drawer__body .mdl-textfield.is-focused .mdl-textfield__label,
.drawer.drawer-confirm .drawer__body .mdl-textfield.is-dirty .mdl-textfield__label {
color: var(--color-primary);
}
/* ============================================================================
RESPONSIVO
============================================================================ */
@media (max-width: 640px) {
.drawer.drawer-confirm .drawer__footer {
flex-direction: column;
gap: 12px;
}
.drawer.drawer-confirm .drawer__footer button {
width: 100%;
}
}
/* ============================================================================
DARK MODE (OPCIONAL)
============================================================================ */
.dark .drawer.drawer-confirm .drawer__body,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body,
body.dark-mode .drawer.drawer-confirm .drawer__body {
background: var(--color-bg-dark);
}
.dark .drawer.drawer-confirm .drawer__body h3,
.dark .drawer.drawer-confirm .drawer__body h4,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body h3,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body h4,
body.dark-mode .drawer.drawer-confirm .drawer__body h3,
body.dark-mode .drawer.drawer-confirm .drawer__body h4 {
color: var(--color-text-light);
}
.dark .drawer.drawer-confirm .drawer__body input,
.dark .drawer.drawer-confirm .drawer__body textarea,
.dark .drawer.drawer-confirm .drawer__body select,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body input,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body textarea,
[data-theme="dark"] .drawer.drawer-confirm .drawer__body select,
body.dark-mode .drawer.drawer-confirm .drawer__body input,
body.dark-mode .drawer.drawer-confirm .drawer__body textarea,
body.dark-mode .drawer.drawer-confirm .drawer__body select {
background: var(--color-bg-secondary);
border-color: var(--color-border);
color: var(--color-text-light);
}
.dark .drawer.drawer-confirm .drawer__footer,
[data-theme="dark"] .drawer.drawer-confirm .drawer__footer,
body.dark-mode .drawer.drawer-confirm .drawer__footer {
background: var(--color-bg-secondary);
border-top-color: var(--color-border);
}
/* === components/drawer.css === */
/**
* ============================================================================
* DRAWER - DESIGN SYSTEM SIDASP
* ============================================================================
*
* Componente de painel lateral deslizante reutilizável.
* Usado para painéis de edição, notificações, detalhes, etc.
*
* Baseado no Figma UI Kit - Drawer Component
* @see /home/kennedy/.claude/plans/staged-coalescing-lobster.md
*
* @version 1.0.0
* @author SIDASP Design System
*/
/* ============================================================================
CSS CUSTOM PROPERTIES
============================================================================ */
.drawer {
--drawer-width: 520px;
--drawer-bg: var(--color-background, #FFFFFF); /* Branco, mesma cor do container do inserir stepper */
--drawer-border-color: var(--color-border-light, #ECEDF2);
--drawer-shadow: -4px 0 24px rgba(18, 21, 31, 0.15);
--drawer-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--drawer-header-padding: var(--spacing-xl, 24px);
--drawer-body-padding: var(--spacing-xl, 24px);
--drawer-footer-padding: var(--spacing-lg, 16px) var(--spacing-xl, 24px);
--drawer-footer-bg: var(--color-background, #FFFFFF); /* Branco, mesma cor do container do inserir stepper */
}
/* ============================================================================
BACKDROP
============================================================================ */
.drawer-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(18, 21, 31, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity var(--drawer-transition), visibility var(--drawer-transition);
}
.drawer-backdrop.is-active {
opacity: 1;
visibility: visible;
}
/* ============================================================================
DRAWER CONTAINER
============================================================================ */
.drawer {
position: fixed;
top: 0;
right: 0;
width: var(--drawer-width);
max-width: 100%;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile */
display: flex;
flex-direction: column;
background: var(--drawer-bg);
box-shadow: var(--drawer-shadow);
z-index: 1001;
transform: translateX(100%);
transition: transform var(--drawer-transition);
}
.drawer.is-active {
transform: translateX(0);
}
/* ============================================================================
SIZE VARIANTS
============================================================================ */
.drawer--sm { --drawer-width: 400px; }
.drawer--md { --drawer-width: 520px; }
.drawer--lg { --drawer-width: 700px; }
.drawer--xl { --drawer-width: 900px; }
.drawer--full { --drawer-width: 100%; }
/* Drawer 400px (sm) - Botões empilhados verticalmente ocupando 100% da largura */
.drawer--sm .drawer__footer {
flex-direction: column !important;
align-items: stretch !important; /* Garante que os botões ocupem toda a largura */
}
.drawer--sm .drawer__footer .drawer__button {
width: 100% !important;
}
/* ============================================================================
HEADER
============================================================================ */
.drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--drawer-header-padding);
border-bottom: 1px solid var(--drawer-border-color);
flex-shrink: 0;
}
.drawer__title {
font-family: var(--font-heading, 'Space Grotesk', sans-serif);
font-size: var(--font-size-h2, 20px);
font-weight: 600;
color: var(--color-text-primary, #12151F);
margin: 0;
line-height: 1.4;
}
.drawer__subtitle {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
color: var(--color-text-muted, #7A839F);
margin: 4px 0 0 0;
}
.drawer__header-content {
flex: 1;
min-width: 0;
}
.drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-left: var(--spacing-md, 12px);
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-md, 8px);
color: var(--color-text-muted, #7A839F);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.drawer__close:hover {
background: var(--color-bg-secondary, #F3F4F6);
color: var(--color-text-primary, #12151F);
}
.drawer__close:focus {
outline: 2px solid var(--color-primary, #3E68FB);
outline-offset: 2px;
}
.drawer__close:active {
transform: scale(0.95);
}
.drawer__close i,
.drawer__close .mdi {
font-size: 24px;
}
.drawer__close:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* Loading do autocomplete no botão de fechar */
.drawer__close--loading {
position: relative;
}
.drawer__close--loading .input-search-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-300);
border-top-color: var(--color-accent-300);
border-radius: 50%;
animation: drawer-input-search-spinner 0.6s linear infinite;
display: block !important; /* Força exibição mesmo com display: none do input-search.css */
z-index: 1;
pointer-events: none;
opacity: 1; /* Garante que está visível */
}
/* Dark mode para loading no botão de fechar */
.dark .drawer__close--loading .input-search-loading,
[data-theme="dark"] .drawer__close--loading .input-search-loading {
border-color: var(--color-neutral-600);
border-top-color: var(--color-accent-300);
}
/* Animação do spinner do autocomplete (reutilizada do input-search) */
/* Nota: Esta animação sobrescreve a do input-search.css para funcionar no contexto do drawer */
@keyframes input-search-spinner {
to {
transform: translateY(-50%) rotate(360deg);
}
}
/* Garante que a animação funcione mesmo se input-search.css não estiver carregado */
@keyframes drawer-input-search-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ============================================================================
BODY
============================================================================ */
.drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--drawer-body-padding);
}
/* Custom scrollbar */
.drawer__body::-webkit-scrollbar {
width: 6px;
}
.drawer__body::-webkit-scrollbar-track {
background: transparent;
}
.drawer__body::-webkit-scrollbar-thumb {
background: var(--color-border, #CED3E2);
border-radius: 3px;
}
.drawer__body::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted, #7A839F);
}
/* Firefox scrollbar */
.drawer__body {
scrollbar-width: thin;
scrollbar-color: var(--color-border, #CED3E2) transparent;
}
/* ============================================================================
FOOTER
============================================================================ */
.drawer__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-md, 12px);
padding: var(--drawer-footer-padding);
border-top: 1px solid var(--drawer-border-color);
background: var(--drawer-footer-bg);
flex-shrink: 0;
}
/* Footer alignment variants */
.drawer__footer--start {
justify-content: flex-start;
}
.drawer__footer--center {
justify-content: center;
}
.drawer__footer--between {
justify-content: space-between;
}
/* ============================================================================
BUTTONS
============================================================================ */
.drawer__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm, 8px);
height: 44px;
padding: 0 20px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 600;
line-height: 20px;
border-radius: var(--radius-md, 8px);
border: none;
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
white-space: nowrap;
user-select: none;
outline: none;
}
.drawer__button:focus-visible {
outline: 2px solid var(--color-primary, #3E68FB);
outline-offset: 2px;
}
.drawer__button:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Botão Salvar (Primary) */
.drawer__button--save {
background-color: var(--color-neutral-800, #12151F);
color: var(--color-text-light, #FFFFFF);
border: 1px solid var(--color-neutral-800, #12151F);
}
.drawer__button--save:hover {
background-color: var(--color-neutral-700, #1E2432);
border-color: var(--color-neutral-700, #1E2432);
}
.drawer__button--save:active {
background-color: var(--color-neutral-700, #1E2432);
border-color: var(--color-neutral-700, #1E2432);
transform: scale(0.98);
}
/* Botão Cancelar (Outline Light) */
.drawer__button--cancel {
background-color: transparent;
color: var(--color-text-primary, #12151F);
border: 1px solid var(--color-border, #CED3E2);
}
.drawer__button--cancel:hover {
background-color: var(--color-bg-secondary, #F9FAFB);
border-color: var(--color-border-hover, #B8BFC8);
}
.drawer__button--cancel:active {
background-color: var(--color-bg-tertiary, #F3F4F6);
border-color: var(--color-border-hover, #B8BFC8);
transform: scale(0.98);
}
/* Dark Mode - Botões */
.dark .drawer__button--save,
[data-theme="dark"] .drawer__button--save,
body.dark-mode .drawer__button--save {
background-color: var(--color-neutral-700, #1E2432);
color: var(--color-text-light, #FFFFFF);
border-color: var(--color-neutral-700, #1E2432);
}
.dark .drawer__button--save:hover,
[data-theme="dark"] .drawer__button--save:hover,
body.dark-mode .drawer__button--save:hover {
background-color: var(--color-neutral-600, #2A3142);
border-color: var(--color-neutral-600, #2A3142);
}
.dark .drawer__button--cancel,
[data-theme="dark"] .drawer__button--cancel,
body.dark-mode .drawer__button--cancel {
background-color: transparent;
color: var(--color-text-primary, #E5E7EB);
border-color: var(--color-border, #212533);
}
.dark .drawer__button--cancel:hover,
[data-theme="dark"] .drawer__button--cancel:hover,
body.dark-mode .drawer__button--cancel:hover {
background-color: var(--color-bg-tertiary, #1E2432);
border-color: var(--color-border-hover, #2A3142);
}
/* ============================================================================
CONTENT SECTIONS (for structured content)
============================================================================ */
.drawer__section {
margin-bottom: var(--spacing-xl, 24px);
}
.drawer__section:last-child {
margin-bottom: 0;
}
.drawer__section-title {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: 600;
color: var(--color-text-primary, #12151F);
margin: 0 0 var(--spacing-md, 12px) 0;
}
/* ============================================================================
FORM INSIDE DRAWER
============================================================================ */
.drawer__form {
display: flex;
flex-direction: column;
gap: var(--spacing-lg, 20px);
}
.drawer__form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
.drawer__form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg, 20px);
}
.drawer__form-row--3 {
grid-template-columns: repeat(3, 1fr);
}
.drawer__label {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
}
.drawer__label--required::after {
content: ' *';
color: var(--color-danger, #C90A0A);
}
/* ============================================================================
ERROR DISPLAY
============================================================================ */
.drawer__errors {
padding: var(--spacing-md, 12px);
background: rgba(201, 10, 10, 0.08);
border: 1px solid var(--color-danger, #C90A0A);
border-radius: var(--radius-md, 8px);
margin-bottom: var(--spacing-lg, 20px);
}
.drawer__errors ul {
margin: 0;
padding-left: var(--spacing-lg, 20px);
}
.drawer__errors li {
font-size: var(--font-size-p4, 13px);
color: var(--color-danger, #C90A0A);
margin-bottom: var(--spacing-xs, 4px);
}
.drawer__errors li:last-child {
margin-bottom: 0;
}
/* ============================================================================
LOADING STATE
============================================================================ */
.drawer--loading {
pointer-events: none;
}
.drawer--loading .drawer__body {
position: relative;
}
.drawer--loading .drawer__body::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.drawer__loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 4px solid var(--color-border-light, #ECEDF2);
border-top-color: var(--color-primary, #3E68FB);
border-radius: 50%;
animation: drawer-spinner 0.8s linear infinite;
z-index: 1;
}
@keyframes drawer-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ============================================================================
EMPTY STATE
============================================================================ */
.drawer__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-3xl, 48px) var(--spacing-xl, 24px);
text-align: center;
}
.drawer__empty-icon {
font-size: 48px;
color: var(--color-text-muted, #7A839F);
margin-bottom: var(--spacing-lg, 16px);
}
.drawer__empty-title {
font-size: var(--font-size-p2, 16px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
margin: 0 0 var(--spacing-sm, 8px) 0;
}
.drawer__empty-text {
font-size: var(--font-size-p4, 13px);
color: var(--color-text-muted, #7A839F);
margin: 0;
}
/* ============================================================================
DARK MODE
============================================================================ */
.dark .drawer-backdrop,
[data-theme="dark"] .drawer-backdrop,
body.dark-mode .drawer-backdrop {
background: rgba(0, 0, 0, 0.7);
}
.dark .drawer,
[data-theme="dark"] .drawer,
body.dark-mode .drawer {
--drawer-bg: #10141D;
--drawer-border-color: #212533;
--drawer-footer-bg: #161B26;
background: #10141D;
}
.dark .drawer__title,
[data-theme="dark"] .drawer__title,
body.dark-mode .drawer__title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .drawer__subtitle,
[data-theme="dark"] .drawer__subtitle,
body.dark-mode .drawer__subtitle {
color: var(--color-text-muted, #9CA3AF);
}
.dark .drawer__close,
[data-theme="dark"] .drawer__close,
body.dark-mode .drawer__close {
color: var(--color-text-muted, #9CA3AF);
}
.dark .drawer__close:hover,
[data-theme="dark"] .drawer__close:hover,
body.dark-mode .drawer__close:hover {
background: var(--color-bg-tertiary, #1E2432);
color: var(--color-text-primary, #E5E7EB);
}
.dark .drawer__section-title,
[data-theme="dark"] .drawer__section-title,
body.dark-mode .drawer__section-title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .drawer__label,
[data-theme="dark"] .drawer__label,
body.dark-mode .drawer__label {
color: var(--color-text-primary, #E5E7EB);
}
.dark .drawer--loading .drawer__body::after,
[data-theme="dark"] .drawer--loading .drawer__body::after,
body.dark-mode .drawer--loading .drawer__body::after {
background: rgba(16, 20, 29, 0.8);
}
.dark .drawer__empty-title,
[data-theme="dark"] .drawer__empty-title,
body.dark-mode .drawer__empty-title {
color: var(--color-text-primary, #E5E7EB);
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 640px) {
.drawer {
max-width: 100%;
--drawer-width: 100%;
}
.drawer__header {
padding: var(--spacing-lg, 16px);
}
.drawer__body {
padding: var(--spacing-lg, 16px);
}
.drawer__footer {
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
flex-direction: column;
}
.drawer__footer > * {
width: 100%;
}
.drawer__form-row,
.drawer__form-row--3 {
grid-template-columns: 1fr;
}
}
/* ============================================================================
ACCESSIBILITY
============================================================================ */
@media (prefers-reduced-motion: reduce) {
.drawer-backdrop,
.drawer,
.drawer__close {
animation: none !important;
transition: none !important;
}
.drawer-backdrop.is-active {
opacity: 1;
}
.drawer.is-active {
transform: translateX(0);
}
}
/* Focus visible for keyboard navigation */
.drawer__close:focus-visible {
outline: 2px solid var(--color-primary, #3E68FB);
outline-offset: 2px;
}
/* High contrast mode */
@media (prefers-contrast: high) {
.drawer {
border-left: 2px solid var(--color-border, #CED3E2);
}
.drawer__header,
.drawer__footer {
border-color: var(--color-border, #CED3E2);
}
}
/* ============================================================================
UTILITIES
============================================================================ */
/* Prevent body scroll when drawer is open */
body.drawer-open {
overflow: hidden;
}
/* No header variant */
.drawer--no-header .drawer__header {
display: none;
}
/* No footer variant */
.drawer--no-footer .drawer__footer {
display: none;
}
/* No padding variant */
.drawer--no-padding .drawer__body {
padding: 0;
}
/* ============================================================================
PRINT
============================================================================ */
@media print {
.drawer-backdrop,
.drawer {
display: none !important;
}
}
/* === components/dropdown.css === */
/**
* Dropdown
*
* Painel flutuante reutilizável para menus, selects e autocomplete.
* Sem trigger — cada componente que usa cuida do seu gatilho.
* Usa tokens overlay para cores. Dark mode automático.
*
* SPECS FIGMA:
* - Min-width: 200px, max-height: 240px
* - Border: 1px solid --border-overlay-neutral-default
* - Radius: 6px (--radius-default)
* - Shadow: 0 4px 6px rgba(0,0,0,0.09)
* - Gap do trigger: 4px
* - Item: 48px (padrão), 56px (com avatar)
* - Padding item: 12px 16px, gap 12px
*
* @version 3.0.0
*/
/* ============================================================
MENU (painel flutuante)
============================================================ */
.dropdown-menu {
position: absolute;
z-index: var(--z-dropdown, 1000);
min-width: 200px;
max-height: 240px;
border: 1px solid var(--border-overlay-neutral-default);
border-radius: var(--radius-default);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.09);
display: none;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
.dropdown-menu.is-open {
display: flex;
}
/* ============================================================
LISTA DE ITENS (scroll interno)
============================================================ */
.dropdown-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
/* Scrollbar nativa oculta — usar custom-scroll via JS */
scrollbar-width: none;
-ms-overflow-style: none;
}
.dropdown-list::-webkit-scrollbar {
display: none;
}
/* ============================================================
ITEM
============================================================ */
.dropdown-item {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
min-height: 48px;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-secondary);
background: var(--surface-overlay-neutral-container-default);
border: none;
cursor: pointer;
text-decoration: none;
text-align: left;
width: 100%;
box-sizing: border-box;
transition: background var(--transition-fast),
color var(--transition-fast);
}
.dropdown-item:hover,
.dropdown-item.is-highlighted {
background: var(--surface-overlay-neutral-container-hover);
color: var(--text-overlay-neutral-default);
}
.dropdown-item:focus-visible {
outline: 2px solid var(--border-base-brand-default);
outline-offset: -2px;
}
/* ============================================================
ITEM — ÍCONE
============================================================ */
.dropdown-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--icon-overlay-neutral-secondary);
}
.dropdown-item-icon svg {
width: 18px;
height: 18px;
}
.dropdown-item:hover .dropdown-item-icon {
color: var(--icon-overlay-neutral-default);
}
/* ============================================================
ITEM — TEXTO E SUPORTE
============================================================ */
.dropdown-item-content {
display: flex;
align-items: baseline;
gap: var(--spacing-3);
flex: 1;
min-width: 0;
}
.dropdown-item-label {
flex-shrink: 0;
white-space: nowrap;
}
.dropdown-item-support {
font-size: var(--font-size-p6);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p6);
color: var(--text-overlay-neutral-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* ============================================================
ITEM — AVATAR
============================================================ */
.dropdown-item-avatar {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
flex-shrink: 0;
object-fit: cover;
}
.dropdown-item--avatar {
min-height: 56px;
}
/* ============================================================
ITEM — DESTRUTIVO
============================================================ */
.dropdown-item--danger {
color: var(--text-overlay-error-default);
}
.dropdown-item--danger .dropdown-item-icon {
color: var(--icon-overlay-error-default);
}
.dropdown-item--danger:hover {
background: var(--surface-overlay-alert-container-error);
color: var(--text-overlay-error-default);
}
.dropdown-item--danger:hover .dropdown-item-icon {
color: var(--icon-overlay-error-default);
}
/* ============================================================
ITEM — DISABLED
============================================================ */
.dropdown-item:disabled,
.dropdown-item.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
DIVISOR
============================================================ */
.dropdown-divider {
height: 0;
padding: var(--spacing-1) var(--spacing-2);
background: var(--surface-overlay-neutral-container-default);
}
.dropdown-divider::after {
content: '';
display: block;
height: 1px;
background: var(--border-overlay-neutral-default);
}
/* ============================================================
LOADING
============================================================ */
.dropdown-loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-4);
min-height: 48px;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-subtle);
background: var(--surface-overlay-neutral-container-default);
cursor: default;
user-select: none;
}
.dropdown-loading-spinner {
width: 16px;
height: 16px;
border: 2px solid var(--border-overlay-neutral-default);
border-top-color: var(--text-overlay-neutral-secondary);
border-radius: var(--radius-full);
animation: dropdown-spin 0.6s linear infinite;
flex-shrink: 0;
}
@keyframes dropdown-spin {
to { transform: rotate(360deg); }
}
/* ============================================================
VAZIO (sem resultados)
============================================================ */
.dropdown-empty {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-4);
min-height: 48px;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-subtle);
background: var(--surface-overlay-neutral-container-default);
cursor: default;
user-select: none;
}
/* ============================================================
HEADER (título de seção)
============================================================ */
.dropdown-header {
display: flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-4);
min-height: 48px;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-default);
background: var(--surface-overlay-neutral-container-default);
cursor: default;
user-select: none;
}
/* ============================================================
ITEM — CHECKBOX / RADIO (usa componentes existentes)
============================================================ */
.dropdown-item .checkbox,
.dropdown-item .radio {
pointer-events: none;
margin: 0;
}
.dropdown-item .checkbox-label,
.dropdown-item .radio-label {
font-weight: var(--font-weight-medium);
}
/* ============================================================
POSICIONAMENTO
============================================================ */
/* Bottom (padrão) */
.dropdown-menu--bottom {
top: calc(100% + 4px);
left: 0;
}
/* Top */
.dropdown-menu--top {
bottom: calc(100% + 4px);
left: 0;
}
/* Bottom-right (alinhado à direita) */
.dropdown-menu--bottom-right {
top: calc(100% + 4px);
right: 0;
}
/* Top-right */
.dropdown-menu--top-right {
bottom: calc(100% + 4px);
right: 0;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.dropdown-menu {
display: none !important;
}
}
/* === components/dropzone.css === */
/**
* Dropzone
*
* Área de upload de arquivos com drag-and-drop.
* Dois estados: vazio (padrão) e preenchido (com lista de arquivos).
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Borda: 1px dashed --border-base-neutral-strong, dash [4,4]
* - Radius: 6px
* - Padding: 32px
* - Gap interno: 20px
* - Ícone link: 32x32 circle, accent-300
* - Título: p3 medium, default
* - Descrição: p5 regular, secondary
* - Botão: outlined small
* - Arquivo: padding 12px, borda solid subtle
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.dropzone-group {
display: flex;
flex-direction: column;
width: 100%;
}
.dropzone-group .dropzone-label {
margin-bottom: var(--spacing-3);
}
/* ============================================================
LABEL
============================================================ */
.dropzone-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
}
.dropzone-label-required::after {
content: '*';
color: var(--text-base-error-secondary);
margin-left: 2px;
}
/* ============================================================
ÁREA DE DROP
============================================================ */
.dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-5);
padding: var(--spacing-7);
background: var(--surface-base-neutral-container-default);
border: 1px dashed var(--border-base-neutral-strong);
border-radius: var(--radius-default);
cursor: pointer;
transition: background var(--transition-fast),
border-color var(--transition-fast);
box-sizing: border-box;
}
/* Com arquivos: radius só em cima */
.dropzone-group.has-files .dropzone {
border-radius: var(--radius-default) var(--radius-default) 0 0;
border-bottom: none;
}
/* Drag over */
.dropzone.is-drag-over {
background: var(--surface-base-neutral-container-hover);
}
/* ============================================================
CONTEÚDO (ícone + textos)
============================================================ */
.dropzone-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.dropzone-content .dropzone-icon {
margin-bottom: var(--spacing-3);
}
/* Ícone circular */
.dropzone-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
border: 1px solid var(--border-base-neutral-default);
}
.dropzone-icon svg {
width: 16px;
height: 16px;
color: var(--accent-300);
}
/* Textos */
.dropzone-title {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
text-align: center;
}
.dropzone-description {
font-family: var(--font-body);
font-size: var(--font-size-p5);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p5);
color: var(--text-base-neutral-secondary);
text-align: center;
}
/* Input file oculto */
.dropzone-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
LISTA DE ARQUIVOS
============================================================ */
.dropzone-files {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
padding: 0 var(--spacing-3) var(--spacing-3);
background: var(--surface-base-neutral-container-default);
border: 1px dashed var(--border-base-neutral-strong);
border-top: none;
border-radius: 0 0 var(--radius-default) var(--radius-default);
box-sizing: border-box;
}
/* ============================================================
ITEM DE ARQUIVO
============================================================ */
.dropzone-file {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-3);
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-default);
box-sizing: border-box;
}
.dropzone-file-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.dropzone-file-name {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropzone-file-size {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-subtle);
}
/* Botão remover (usa .btn .btn-outlined .btn-icon .btn-sm) */
.dropzone-file .btn {
flex-shrink: 0;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.dropzone {
border-style: solid;
}
}
/* === components/empty-state.css === */
/**
* Empty State
* Componente para exibição de estados vazios com ícone, título, descrição e ação.
* @layer components
* @since 0.2.0
*/
/* ============================================
BASE
============================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 24px;
gap: 12px;
}
/* ============================================
ELEMENTOS
============================================ */
.empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 4px;
color: var(--icon-base-neutral-subtle, #B0B8CC);
}
.empty-state__icon svg {
width: 48px;
height: 48px;
}
.empty-state__title {
margin: 0;
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--text-base-neutral-default);
}
.empty-state__description {
margin: 0;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--text-base-neutral-secondary);
max-width: 400px;
}
.empty-state__action {
margin-top: 8px;
}
/* ============================================
VARIANTE: COMPACT
Para uso dentro de cards, tabelas e seções.
============================================ */
.empty-state--compact {
padding: 24px 16px;
gap: 8px;
}
.empty-state--compact .empty-state__icon {
width: 48px;
height: 48px;
margin-bottom: 0;
}
.empty-state--compact .empty-state__icon svg {
width: 32px;
height: 32px;
}
.empty-state--compact .empty-state__title {
font-size: 16px;
}
.empty-state--compact .empty-state__description {
font-size: 13px;
}
/* ============================================
VARIANTE: LARGE
Para uso em página inteira.
============================================ */
.empty-state--large {
padding: 80px 32px;
gap: 16px;
}
.empty-state--large .empty-state__icon {
width: 96px;
height: 96px;
margin-bottom: 8px;
}
.empty-state--large .empty-state__icon svg {
width: 72px;
height: 72px;
}
.empty-state--large .empty-state__title {
font-size: 24px;
}
.empty-state--large .empty-state__description {
font-size: 15px;
max-width: 480px;
}
/* ============================================
DARK MODE
============================================ */
.dark .empty-state__icon,
[data-theme="dark"] .empty-state__icon {
color: var(--icon-base-neutral-subtle);
}
.dark .empty-state__title,
[data-theme="dark"] .empty-state__title {
color: var(--text-base-neutral-default);
}
.dark .empty-state__description,
[data-theme="dark"] .empty-state__description {
color: var(--text-base-neutral-secondary);
}
/* === components/feedback.css === */
/**
* Feedback
*
* Tela de feedback após ação do usuário.
* 3 estados: loading (progresso circular), sucesso, erro.
* Animações: reticências pulsantes, draw do check/X, shake no erro.
* Dark mode automático via tokens semânticos.
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER (fullscreen)
============================================================ */
.feedback {
position: fixed;
inset: 0;
z-index: var(--z-modal, 1060);
display: none;
align-items: center;
justify-content: center;
background: var(--surface-base-neutral-page-default);
}
.feedback.is-open {
display: flex;
}
/* ============================================================
CONTENT
============================================================ */
.feedback-content {
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
}
.feedback-content--loading {
gap: 32px;
}
.feedback-content--result {
gap: 56px;
}
.feedback-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
/* ============================================================
PROGRESS CIRCLE (loading)
============================================================ */
.feedback-progress {
position: relative;
width: 80px;
height: 80px;
}
.feedback-progress svg.feedback-ring {
width: 80px;
height: 80px;
transform: rotate(-90deg);
}
.feedback-ring-bg {
fill: none;
stroke: var(--border-base-neutral-default);
stroke-width: 3;
}
.feedback-ring-fill {
fill: none;
stroke: var(--accent-300);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 226;
stroke-dashoffset: 226;
transition: stroke-dashoffset 0.3s ease;
}
.feedback-progress-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
color: var(--icon-base-neutral-default);
}
.feedback-progress-icon svg {
width: 32px;
height: 32px;
}
/* ============================================================
RESULT CIRCLE (sucesso/erro)
============================================================ */
.feedback-result-icon {
position: relative;
width: 80px;
height: 80px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
animation: feedback-circle-in 0.4s ease-out;
}
.feedback-result-icon--success {
background: var(--icon-base-success-default);
}
.feedback-result-icon--error {
background: var(--icon-base-error-default);
}
.feedback-result-icon svg {
width: 32px;
height: 32px;
color: var(--surface-base-neutral-page-default);
}
/* Draw animation for check/X */
.feedback-result-icon svg path,
.feedback-result-icon svg circle {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: feedback-draw 0.6s ease-out 0.3s forwards;
}
/* ============================================================
TEXT
============================================================ */
.feedback-text {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-2);
width: 100%;
}
.feedback-title {
font-family: var(--font-display);
font-size: var(--font-size-h2);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-h2);
color: var(--text-base-neutral-default);
text-align: center;
}
.feedback-description {
font-family: var(--font-body);
font-size: var(--font-size-p2);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p2);
color: var(--text-base-neutral-subtle);
text-align: center;
}
.feedback-content--result .feedback-description {
color: var(--text-base-neutral-secondary);
}
/* ============================================================
RETICÊNCIAS ANIMADAS
============================================================ */
.feedback-dots::after {
content: '';
animation: feedback-dots 1.5s steps(4, end) infinite;
}
@keyframes feedback-dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
/* ============================================================
BADGE
============================================================ */
.feedback-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
animation: feedback-fade-in 0.3s ease-out;
}
.feedback-badge svg {
width: 16px;
height: 16px;
}
.feedback-badge--success {
background: var(--surface-base-alert-container-success);
color: var(--text-base-success-default);
}
.feedback-badge--success svg {
color: var(--icon-base-success-default);
}
.feedback-badge--error {
background: var(--surface-base-alert-container-error);
color: var(--text-base-error-default);
}
.feedback-badge--error svg {
color: var(--icon-base-error-default);
}
/* ============================================================
BOTÕES
============================================================ */
.feedback-buttons {
display: flex;
gap: 20px;
width: 100%;
}
.feedback-buttons .btn {
flex: 1;
}
/* Variante com 1 botão */
.feedback-buttons--single {
justify-content: center;
}
.feedback-buttons--single .btn {
flex: 0 0 auto;
min-width: 180px;
}
/* ============================================================
ANIMAÇÕES
============================================================ */
@keyframes feedback-circle-in {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes feedback-draw {
to { stroke-dashoffset: 0; }
}
@keyframes feedback-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes feedback-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.feedback-result-icon--error {
animation: feedback-circle-in 0.4s ease-out, feedback-shake 0.5s ease-out 0.7s;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.feedback { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.feedback-result-icon,
.feedback-result-icon svg path,
.feedback-result-icon svg circle,
.feedback-badge {
animation: none;
}
.feedback-ring-fill { transition: none; }
.feedback-dots::after { animation: none; content: '...'; }
}
/* === components/flag.css === */
/**
* Flag
* Notificação persistente com ações. Permanece até dismiss manual.
* Diferente do Toast (auto-dismiss), o Flag requer ação do usuário.
* @layer components
* @since 0.2.0
*/
/* ============================================
BASE
============================================ */
.flag {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
max-width: 400px;
padding: 16px;
background: var(--surface-base-neutral-container-default, #ffffff);
border: 1px solid var(--border-base-neutral-default);
border-left: 4px solid var(--border-base-neutral-default);
border-radius: var(--radius-md, 8px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
animation: flagSlideIn 300ms ease forwards;
}
/* ============================================
ELEMENTOS
============================================ */
.flag__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
}
.flag__icon svg {
width: 20px;
height: 20px;
}
.flag__body {
flex: 1;
min-width: 0;
}
.flag__title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: var(--text-base-neutral-default);
margin: 0;
}
.flag__description {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: var(--text-base-neutral-secondary);
margin: 4px 0 0;
}
.flag__actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
.flag__actions a,
.flag__actions button {
background: none;
border: none;
padding: 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--text-base-brand-default);
cursor: pointer;
text-decoration: none;
transition: opacity var(--transition-fast, 150ms) ease;
}
.flag__actions a:hover,
.flag__actions button:hover {
opacity: 0.8;
}
.flag__dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
padding: 0;
margin: -4px -4px -4px 0;
background: transparent;
border: none;
border-radius: var(--radius-sm, 4px);
cursor: pointer;
color: var(--icon-base-neutral-default);
transition: background var(--transition-fast, 150ms) ease;
}
.flag__dismiss:hover {
background: var(--surface-base-neutral-container-emphasis);
}
.flag__dismiss::before {
content: "";
display: block;
width: 12px;
height: 12px;
background: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
}
/* ============================================
VARIANTES
============================================ */
.flag--success {
border-left-color: var(--surface-base-success-default, #16a34a);
}
.flag--success .flag__icon {
color: var(--icon-base-success-default, #16a34a);
}
.flag--warning {
border-left-color: var(--surface-base-warning-default, #d97706);
}
.flag--warning .flag__icon {
color: var(--icon-base-warning-default, #d97706);
}
.flag--error {
border-left-color: var(--surface-base-error-default, #dc2626);
}
.flag--error .flag__icon {
color: var(--icon-base-error-default, #dc2626);
}
.flag--info {
border-left-color: var(--surface-base-brand-default, #3E68FB);
}
.flag--info .flag__icon {
color: var(--text-base-brand-default, #3E68FB);
}
/* ============================================
FLAG GROUP (container empilhado)
============================================ */
.flag-group {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 1300;
display: flex;
flex-direction: column-reverse;
gap: 12px;
max-width: 400px;
}
/* ============================================
ANIMAÇÕES
============================================ */
@keyframes flagSlideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.flag.is-dismissing {
animation: flagSlideOut 200ms ease forwards;
}
@keyframes flagSlideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-20px);
}
}
/* ============================================
RESPONSIVO
============================================ */
@media (max-width: 640px) {
.flag-group {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
}
.flag {
max-width: none;
}
}
/* ============================================
DARK MODE
============================================ */
.dark .flag,
[data-theme="dark"] .flag {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark .flag__title,
[data-theme="dark"] .flag__title {
color: var(--text-base-neutral-default);
}
.dark .flag__description,
[data-theme="dark"] .flag__description {
color: var(--text-base-neutral-secondary);
}
/* === components/floating-label.css === */
/**
* Floating Label
* Labels que flutuam acima do input ao focar ou preencher.
* CSS puro via :placeholder-shown + :focus — sem JavaScript.
* @layer components
* @since 0.2.0
*/
/* ============================================
CONTAINER
============================================ */
.floating-label {
position: relative;
width: 100%;
}
/* ============================================
INPUT DENTRO DO FLOATING LABEL
============================================ */
.floating-label > .input,
.floating-label > .select,
.floating-label > textarea.input {
padding-top: 24px;
padding-bottom: 8px;
height: auto;
min-height: 56px;
}
/* Placeholder transparente — necessário para :placeholder-shown funcionar */
.floating-label > .input::placeholder,
.floating-label > textarea.input::placeholder {
color: transparent;
}
/* ============================================
LABEL
============================================ */
.floating-label > label {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
font-family: var(--font-body);
font-size: 16px;
font-weight: var(--font-weight-regular, 400);
line-height: 1;
color: var(--color-neutral-500, #6b7280);
pointer-events: none;
transition: all var(--transition-fast, 150ms) ease;
transform-origin: left center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 32px);
}
/* Textarea: label posiciona pelo top fixo (não usa translateY) */
.floating-label:has(> textarea) > label {
top: 18px;
transform: none;
}
/* ============================================
LABEL FLUTUANTE (ATIVO)
Input focado ou com valor preenchido
============================================ */
/* Quando o input tem foco */
.floating-label > .input:focus ~ label,
.floating-label > textarea.input:focus ~ label,
/* Quando o input tem valor (placeholder não está visível) */
.floating-label > .input:not(:placeholder-shown) ~ label,
.floating-label > textarea.input:not(:placeholder-shown) ~ label {
top: 8px;
transform: none;
font-size: 12px;
font-weight: var(--font-weight-medium, 500);
color: var(--color-primary, #3E68FB);
}
/* Quando tem valor mas NÃO tem foco, cor neutra */
.floating-label > .input:not(:placeholder-shown):not(:focus) ~ label,
.floating-label > textarea.input:not(:placeholder-shown):not(:focus) ~ label {
color: var(--text-base-neutral-secondary, #6b7280);
}
/* Textarea flutuante */
.floating-label:has(> textarea) > .input:focus ~ label,
.floating-label:has(> textarea) > .input:not(:placeholder-shown) ~ label {
top: 6px;
}
/* ============================================
SELECT
Label sempre flutuante (select não tem placeholder-shown)
============================================ */
.floating-label > .select ~ label,
.floating-label > select ~ label {
top: 8px;
transform: none;
font-size: 12px;
font-weight: var(--font-weight-medium, 500);
color: var(--text-base-neutral-secondary, #6b7280);
}
.floating-label > .select:focus ~ label,
.floating-label > select:focus ~ label {
color: var(--color-primary, #3E68FB);
}
/* ============================================
ESTADOS
============================================ */
/* Erro */
.floating-label.has-error > .input:focus ~ label,
.floating-label.has-error > .input:not(:placeholder-shown) ~ label {
color: var(--color-danger, #dc2626);
}
/* Sucesso */
.floating-label.has-success > .input:focus ~ label,
.floating-label.has-success > .input:not(:placeholder-shown) ~ label {
color: var(--color-success, #16a34a);
}
/* Disabled */
.floating-label > .input:disabled ~ label {
color: var(--color-neutral-400, #9ca3af);
cursor: not-allowed;
}
/* Readonly */
.floating-label > .input:read-only ~ label {
color: var(--text-base-neutral-secondary, #6b7280);
}
/* ============================================
TAMANHOS
============================================ */
/* Pequeno — input 48px */
.floating-label--sm > .input,
.floating-label--sm > textarea.input {
padding-top: 20px;
padding-bottom: 4px;
min-height: 48px;
}
.floating-label--sm > label {
font-size: 14px;
left: 12px;
max-width: calc(100% - 24px);
}
.floating-label--sm > .input:focus ~ label,
.floating-label--sm > .input:not(:placeholder-shown) ~ label {
top: 6px;
font-size: 11px;
}
/* Grande — input 64px */
.floating-label--lg > .input,
.floating-label--lg > textarea.input {
padding-top: 28px;
padding-bottom: 12px;
min-height: 64px;
}
.floating-label--lg > label {
font-size: 18px;
left: 20px;
max-width: calc(100% - 40px);
}
.floating-label--lg > .input:focus ~ label,
.floating-label--lg > .input:not(:placeholder-shown) ~ label {
top: 10px;
font-size: 12px;
}
/* ============================================
INDICADOR OBRIGATÓRIO
============================================ */
.floating-label > label.input-label-required::after {
content: ' *';
color: var(--color-danger, #dc2626);
}
/* ============================================
COM HELPER TEXT
============================================ */
/* Wrapper para floating-label + helper text */
.floating-label-group {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
/* ============================================
DARK MODE
============================================ */
.dark .floating-label > label,
[data-theme="dark"] .floating-label > label {
color: var(--color-neutral-500);
}
.dark .floating-label > .input:focus ~ label,
[data-theme="dark"] .floating-label > .input:focus ~ label {
color: var(--color-primary);
}
.dark .floating-label > .input:not(:placeholder-shown):not(:focus) ~ label,
[data-theme="dark"] .floating-label > .input:not(:placeholder-shown):not(:focus) ~ label {
color: var(--text-base-neutral-secondary);
}
.dark .floating-label > .input:disabled ~ label,
[data-theme="dark"] .floating-label > .input:disabled ~ label {
color: var(--color-neutral-600);
}
.dark .floating-label.has-error > .input:focus ~ label,
.dark .floating-label.has-error > .input:not(:placeholder-shown) ~ label,
[data-theme="dark"] .floating-label.has-error > .input:focus ~ label,
[data-theme="dark"] .floating-label.has-error > .input:not(:placeholder-shown) ~ label {
color: var(--color-red-300, #fca5a5);
}
.dark .floating-label.has-success > .input:focus ~ label,
.dark .floating-label.has-success > .input:not(:placeholder-shown) ~ label,
[data-theme="dark"] .floating-label.has-success > .input:focus ~ label,
[data-theme="dark"] .floating-label.has-success > .input:not(:placeholder-shown) ~ label {
color: var(--color-green-300, #86efac);
}
/* === components/funnel-chart.css === */
/**
* Funnel Chart
*
* Gráfico de funil SVG com estágios proporcionais, conversão entre etapas,
* painel de métricas lateral e animação de entrada staggered.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.funnel-chart {
width: 100%;
}
.funnel-chart__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Content layout */
.funnel-chart__content {
display: flex;
flex-direction: row;
gap: 16px;
}
/* SVG wrapper */
.funnel-chart__svg-wrapper {
flex: 1;
display: flex;
justify-content: center;
}
/* SVG element */
.funnel-chart__svg {
width: 100%;
height: auto;
}
/* Stage polygon/path */
.funnel-chart__stage {
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
}
.funnel-chart__stage:hover {
opacity: 0.85;
}
/* Stage label (name) */
.funnel-chart__stage-label {
font-size: 13px;
font-weight: 500;
fill: var(--text-base-neutral-default);
}
/* Stage value */
.funnel-chart__stage-value {
font-size: 14px;
font-weight: 700;
fill: var(--text-base-neutral-default);
}
/* Stage percentage */
.funnel-chart__stage-percent {
font-size: 11px;
fill: var(--text-base-neutral-subtle);
}
/* Conversion rate between stages */
.funnel-chart__conversion {
font-size: 11px;
color: var(--text-base-neutral-subtle);
display: flex;
align-items: center;
gap: 4px;
}
.funnel-chart__conversion-arrow {
display: inline-flex;
align-items: center;
}
/* Metrics side panel */
.funnel-chart__metrics {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 200px;
padding-left: 24px;
border-left: 1px solid var(--border-base-neutral-default);
}
/* Individual metric */
.funnel-chart__metric {
display: flex;
flex-direction: column;
}
.funnel-chart__metric-label {
font-size: 12px;
color: var(--text-base-neutral-secondary);
}
.funnel-chart__metric-value {
font-size: 16px;
font-weight: 700;
color: var(--text-base-neutral-default);
}
/* Tooltip */
.funnel-chart__tooltip {
position: absolute;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
color: var(--text-base-neutral-default);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 10;
}
.funnel-chart__tooltip--visible {
opacity: 1;
}
/* Legend */
.funnel-chart__legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.funnel-chart__legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-base-neutral-secondary);
}
.funnel-chart__legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
/* Estado vazio */
.funnel-chart__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
ANIMATION
======================================================================== */
@keyframes funnelSlide {
from {
opacity: 0;
transform: scaleX(0.3);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
.funnel-chart__stage--animated {
animation: funnelSlide 0.5s ease forwards;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .funnel-chart__tooltip {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
.dark .funnel-chart__metrics {
border-left-color: var(--border-base-neutral-default);
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.funnel-chart__content {
flex-direction: column;
}
.funnel-chart__metrics {
min-width: 100%;
padding-left: 0;
padding-top: 16px;
border-left: none;
border-top: 1px solid var(--border-base-neutral-default);
}
}
/* === components/gantt-chart.css === */
/**
* Gantt Chart
*
* Gráfico de Gantt com grid de 12 meses, barras horizontais por projeto/fase
* e linha de hoje. Suporte a agrupamento por projeto e múltiplas fases.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.gantt-chart {
width: 100%;
}
.gantt-chart__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Scroll wrapper */
.gantt-chart__scroll-wrapper {
overflow-x: auto;
}
.gantt-chart__scroll-wrapper::-webkit-scrollbar {
height: 6px;
}
.gantt-chart__scroll-wrapper::-webkit-scrollbar-track {
background: var(--surface-base-neutral-container-default);
border-radius: 3px;
}
.gantt-chart__scroll-wrapper::-webkit-scrollbar-thumb {
background: var(--border-base-neutral-default);
border-radius: 3px;
}
.gantt-chart__scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--border-base-neutral-strong);
}
/* Grid principal */
.gantt-chart__grid {
min-width: 800px;
position: relative;
}
/* Header — meses */
.gantt-chart__header {
display: grid;
grid-template-columns: 180px repeat(12, 1fr);
border-bottom: 2px solid var(--border-base-neutral-default);
}
.gantt-chart__header-label {
padding: 8px 12px;
}
.gantt-chart__header-month {
text-align: center;
font-size: 12px;
font-weight: 600;
padding: 8px 4px;
color: var(--text-base-neutral-secondary);
}
/* Header — trimestres (linha opcional acima dos meses) */
.gantt-chart__header-quarters {
display: grid;
grid-template-columns: 180px repeat(4, 3fr);
border-bottom: 1px solid var(--border-base-neutral-default);
}
.gantt-chart__header-quarter {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
padding: 4px;
color: var(--text-base-neutral-subtle);
background: var(--surface-base-neutral-container-default);
}
.gantt-chart__header-quarter:first-child {
background: transparent;
}
/* Body — área de linhas */
.gantt-chart__body {
position: relative;
}
/* Row — uma linha por projeto */
.gantt-chart__row {
display: grid;
grid-template-columns: 180px repeat(12, 1fr);
min-height: 40px;
align-items: center;
border-bottom: 1px solid var(--border-base-neutral-subtle, var(--border-base-neutral-default));
transition: background-color 0.15s;
}
.gantt-chart__row:hover {
background: var(--surface-base-neutral-container-emphasis, rgba(0, 0, 0, 0.03));
}
/* Label do projeto (primeira coluna, sticky) */
.gantt-chart__row-label {
font-size: 13px;
font-weight: 500;
padding: 8px 12px;
position: sticky;
left: 0;
background: var(--surface-base-neutral-page-default);
z-index: 1;
white-space: nowrap;
color: var(--text-base-neutral-default);
}
.gantt-chart__row:hover .gantt-chart__row-label {
background: var(--surface-base-neutral-container-emphasis, rgba(0, 0, 0, 0.03));
}
/* Área das barras (grid 12 colunas, ocupa colunas 2–13) */
.gantt-chart__row-bars {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column: 2 / -1;
position: relative;
height: 28px;
}
/* Barra individual */
.gantt-chart__bar {
position: absolute;
height: 24px;
border-radius: 4px;
top: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 500;
color: #fff;
transition: transform 0.2s;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 6px;
}
.gantt-chart__bar:hover {
transform: scaleY(1.15);
z-index: 1;
}
/* Variantes de fase */
.gantt-chart__bar--planning {
background: #3B82F6;
}
.gantt-chart__bar--execution {
background: #22C55E;
}
.gantt-chart__bar--closing {
background: #FBBF24;
color: #713f12;
}
/* Label dentro da barra */
.gantt-chart__bar-label {
font-size: 10px;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Linha de hoje */
.gantt-chart__today-line {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--red-400, #f87171);
z-index: 2;
pointer-events: none;
}
.gantt-chart__today-line::before {
content: 'Hoje';
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 600;
color: var(--red-400, #f87171);
white-space: nowrap;
}
/* Legenda */
.gantt-chart__legend {
display: flex;
gap: 16px;
margin-top: 16px;
font-size: 12px;
color: var(--text-base-neutral-secondary);
}
.gantt-chart__legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.gantt-chart__legend-dot {
width: 12px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
}
.gantt-chart__legend-dot--planning {
background: #3B82F6;
}
.gantt-chart__legend-dot--execution {
background: #22C55E;
}
.gantt-chart__legend-dot--closing {
background: #FBBF24;
}
/* Estado vazio */
.gantt-chart__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .gantt-chart__row-label {
background: var(--surface-base-neutral-page-default);
}
.dark .gantt-chart__row:hover .gantt-chart__row-label {
background: var(--surface-base-neutral-container-emphasis, rgba(255, 255, 255, 0.05));
}
.dark .gantt-chart__row:hover {
background: var(--surface-base-neutral-container-emphasis, rgba(255, 255, 255, 0.05));
}
.dark .gantt-chart__header-quarter {
background: var(--surface-base-neutral-container-default);
}
.dark .gantt-chart__header-quarter:first-child {
background: transparent;
}
.dark .gantt-chart__bar--planning {
background: rgba(59, 130, 246, 0.85);
}
.dark .gantt-chart__bar--execution {
background: rgba(34, 197, 94, 0.85);
}
.dark .gantt-chart__bar--closing {
background: rgba(251, 191, 36, 0.85);
color: #fef3c7;
}
.dark .gantt-chart__today-line {
background: var(--red-400, #f87171);
}
.dark .gantt-chart__today-line::before {
color: var(--red-400, #f87171);
}
/* === components/heatmap.css === */
/**
* Heatmap Regional
*
* Matriz de dados com gradiente de cores por intensidade (regiões x períodos).
*
* @layer components
* @since 0.2.0
*/
/* Container */
.heatmap {
width: 100%;
}
.heatmap__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Scroll wrapper */
.heatmap__scroll-wrapper {
overflow-x: auto;
}
.heatmap__scroll-wrapper::-webkit-scrollbar {
height: 6px;
}
.heatmap__scroll-wrapper::-webkit-scrollbar-track {
background: var(--surface-base-neutral-container-default);
border-radius: 3px;
}
.heatmap__scroll-wrapper::-webkit-scrollbar-thumb {
background: var(--border-base-neutral-default);
border-radius: 3px;
}
/* Table */
.heatmap__table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
.heatmap__table th,
.heatmap__table td {
padding: 8px 12px;
text-align: center;
font-size: 13px;
}
/* Header */
.heatmap__header {
background: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-secondary);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--border-base-neutral-default);
}
/* Row label (primeira coluna) */
.heatmap__row-label {
position: sticky;
left: 0;
z-index: 1;
background: var(--surface-base-neutral-page-default);
font-weight: 600;
color: var(--text-base-neutral-default);
text-align: left !important;
white-space: nowrap;
border-right: 1px solid var(--border-base-neutral-default);
}
/* Célula de dados */
.heatmap__cell {
transition: transform 0.15s, box-shadow 0.15s;
cursor: default;
position: relative;
font-weight: 500;
border-radius: 2px;
}
.heatmap__cell:hover {
transform: scale(1.05);
box-shadow: 0 0 0 2px var(--border-base-neutral-strong);
z-index: 1;
}
/* Intensidade: 10 níveis (0=neutro → 9=máximo) */
.heatmap__cell--intensity-0 {
background: var(--neutral-100);
color: var(--neutral-500);
}
.heatmap__cell--intensity-1 {
background: #dcfce7;
color: #166534;
}
.heatmap__cell--intensity-2 {
background: #bbf7d0;
color: #166534;
}
.heatmap__cell--intensity-3 {
background: #86efac;
color: #14532d;
}
.heatmap__cell--intensity-4 {
background: #fef08a;
color: #713f12;
}
.heatmap__cell--intensity-5 {
background: #fde047;
color: #713f12;
}
.heatmap__cell--intensity-6 {
background: #fdba74;
color: #7c2d12;
}
.heatmap__cell--intensity-7 {
background: #fb923c;
color: #7c2d12;
}
.heatmap__cell--intensity-8 {
background: #f87171;
color: #7f1d1d;
}
.heatmap__cell--intensity-9 {
background: #ef4444;
color: #fff;
}
/* Legenda */
.heatmap__legend {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 12px;
color: var(--text-base-neutral-subtle);
}
.heatmap__legend-label {
flex-shrink: 0;
}
.heatmap__legend-bar {
flex: 1;
max-width: 300px;
height: 12px;
border-radius: 6px;
background: linear-gradient(
to right,
#dcfce7,
#86efac,
#fef08a,
#fdba74,
#fb923c,
#f87171,
#ef4444
);
}
/* Estado vazio */
.heatmap__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .heatmap__header {
background: var(--surface-base-neutral-container-default);
}
.dark .heatmap__row-label {
background: var(--surface-base-neutral-page-default);
}
.dark .heatmap__cell--intensity-0 {
background: var(--neutral-700);
color: var(--neutral-400);
}
.dark .heatmap__cell--intensity-1 {
background: rgba(34, 197, 94, 0.15);
color: #86efac;
}
.dark .heatmap__cell--intensity-2 {
background: rgba(34, 197, 94, 0.25);
color: #86efac;
}
.dark .heatmap__cell--intensity-3 {
background: rgba(34, 197, 94, 0.35);
color: #bbf7d0;
}
.dark .heatmap__cell--intensity-4 {
background: rgba(234, 179, 8, 0.2);
color: #fef08a;
}
.dark .heatmap__cell--intensity-5 {
background: rgba(234, 179, 8, 0.35);
color: #fde047;
}
.dark .heatmap__cell--intensity-6 {
background: rgba(249, 115, 22, 0.3);
color: #fdba74;
}
.dark .heatmap__cell--intensity-7 {
background: rgba(249, 115, 22, 0.45);
color: #fb923c;
}
.dark .heatmap__cell--intensity-8 {
background: rgba(239, 68, 68, 0.4);
color: #fca5a5;
}
.dark .heatmap__cell--intensity-9 {
background: rgba(239, 68, 68, 0.6);
color: #fff;
}
.dark .heatmap__legend-bar {
opacity: 0.8;
}
/* === components/icon.css === */
/**
* Design System - Ícones IPE
*
* Componente de ícones baseado em fonte customizada (Ipe-Icons)
* Mantém compatibilidade com classes existentes (.ipe-*)
*
* @version 1.0.0
* @date 2025-11-04
* @migrado de iconsIpeWeb.css
*/
@font-face {
font-family: "Ipe-Icons";
src: url("/fonts/Ipe-Icons.eot?4nclcg");
src: url("/fonts/Ipe-Icons.eot?4nclcg#iefix") format("embedded-opentype"),
url("/fonts/Ipe-Icons.ttf?4nclcg") format("truetype"),
url("/fonts/Ipe-Icons.woff?4nclcg") format("woff"),
url("/fonts/Ipe-Icons.svg?4nclcg#Ipe-Icons") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="ipe-"],
[class*=" ipe-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "Ipe-Icons" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ipe-abelha-contornada:before {
content: "\e900";
}
.ipe-abelha-preenchida:before {
content: "\e901";
}
.ipe-camera-contornada:before {
content: "\e902";
}
.ipe-camera-preenchida:before {
content: "\e903";
}
.ipe-carangueijo-contornado:before {
content: "\e904";
}
.ipe-carangueijo-preenchido:before {
content: "\e905";
}
.ipe-cavalo-contornado:before {
content: "\e906";
}
.ipe-cavalo-preenchido:before {
content: "\e907";
}
.ipe-ema-contornada:before {
content: "\e908";
}
.ipe-ema-preenchida:before {
content: "\e909";
}
.ipe-galinha-contornada:before {
content: "\e90a";
}
.ipe-galinha-preenchida:before {
content: "\e90b";
}
.ipe-linkedin:before {
content: "\e90c";
}
.ipe-molusco-contornado:before {
content: "\e90d";
}
.ipe-molusco-preenchido:before {
content: "\e90e";
}
.ipe-ovelha-contornada:before {
content: "\e90f";
}
.ipe-ovelha-preenchida:before {
content: "\e910";
}
.ipe-peixe-contornado:before {
content: "\e911";
}
.ipe-peixe-preenchido:before {
content: "\e912";
}
.ipe-peru-contornado:before {
content: "\e913";
}
.ipe-peru-preenchido:before {
content: "\e914";
}
.ipe-pinterest:before {
content: "\e915";
}
.ipe-porco-contornado:before {
content: "\e916";
}
.ipe-porco-preenchido:before {
content: "\e917";
}
.ipe-slack:before {
content: "\e918";
}
.ipe-telegram:before {
content: "\e919";
}
.ipe-twitter:before {
content: "\e91a";
}
.ipe-whatsapp:before {
content: "\e91b";
}
.ipe-youtube:before {
content: "\e91c";
}
.ipe-alerta-contornado:before {
content: "\e91d";
}
.ipe-alerta-preenchido:before {
content: "\e91e";
}
.ipe-apple:before {
content: "\e91f";
}
.ipe-atualizar:before {
content: "\e920";
}
.ipe-aviao-contornado:before {
content: "\e921";
}
.ipe-aviao-contornado-2:before {
content: "\e922";
}
.ipe-aviao-preenchido:before {
content: "\e923";
}
.ipe-aviao-preenchido-2:before {
content: "\e924";
}
.ipe-bandeira-contornada:before {
content: "\e925";
}
.ipe-bandeira-preenchida:before {
content: "\e926";
}
.ipe-behance:before {
content: "\e927";
}
.ipe-bloquear:before {
content: "\e928";
}
.ipe-bluetooth:before {
content: "\e929";
}
.ipe-boi-contornado:before {
content: "\e92a";
}
.ipe-boi-preenchido:before {
content: "\e92b";
}
.ipe-broto-contornado:before {
content: "\e92c";
}
.ipe-broto-preenchido:before {
content: "\e92d";
}
.ipe-cadeado-contornado-aberto:before {
content: "\e92e";
}
.ipe-cadeado-contornado-fechado:before {
content: "\e92f";
}
.ipe-cadeado-preenchido-aberto:before {
content: "\e930";
}
.ipe-cadeado-preenchido-fechado:before {
content: "\e931";
}
.ipe-caixa-contornada:before {
content: "\e932";
}
.ipe-caixa-preenchida:before {
content: "\e933";
}
.ipe-calendario-contornado:before {
content: "\e934";
}
.ipe-calendario-preenchido:before {
content: "\e935";
}
.ipe-camadas-contornadas:before {
content: "\e936";
}
.ipe-camadas-preenchidas:before {
content: "\e937";
}
.ipe-caminhao-contornado:before {
content: "\e938";
}
.ipe-caminhao-contornado-2:before {
content: "\e939";
}
.ipe-caminhao-contornado-3:before {
content: "\e93a";
}
.ipe-caminhao-preenchido:before {
content: "\e93b";
}
.ipe-caminhao-preenchido-2:before {
content: "\e93c";
}
.ipe-caminhao-preenchido-3:before {
content: "\e93d";
}
.ipe-carro-contornado:before {
content: "\e93e";
}
.ipe-carro-preenchido:before {
content: "\e93f";
}
.ipe-carteira-contornada:before {
content: "\e940";
}
.ipe-carteira-contornada-2:before {
content: "\e941";
}
.ipe-carteira-preenchida:before {
content: "\e942";
}
.ipe-carteira-preenchida-2:before {
content: "\e943";
}
.ipe-casa-contornada:before {
content: "\e944";
}
.ipe-casa-preenchida:before {
content: "\e945";
}
.ipe-cavalete-contornado:before {
content: "\e946";
}
.ipe-cavalete-preenchido:before {
content: "\e947";
}
.ipe-cerca-contornada:before {
content: "\e948";
}
.ipe-cerca-preenchida:before {
content: "\e949";
}
.ipe-check:before {
content: "\e94a";
}
.ipe-check-contornado-circular:before {
content: "\e94b";
}
.ipe-check-contornado-quadrado:before {
content: "\e94c";
}
.ipe-check-preenchido-circular:before {
content: "\e94d";
}
.ipe-check-preenchido-quadrado:before {
content: "\e94e";
}
.ipe-chevron-alto:before {
content: "\e94f";
}
.ipe-chevron-baixo:before {
content: "\e950";
}
.ipe-chevron-contornado-circular-alto:before {
content: "\e951";
}
.ipe-chevron-contornado-circular-baixo:before {
content: "\e952";
}
.ipe-chevron-contornado-circular-direita:before {
content: "\e953";
}
.ipe-chevron-contornado-circular-esquerda:before {
content: "\e954";
}
.ipe-chevron-contornado-quadrado-alto:before {
content: "\e955";
}
.ipe-chevron-contornado-quadrado-baixo:before {
content: "\e956";
}
.ipe-chevron-contornado-quadrado-direita:before {
content: "\e957";
}
.ipe-chevron-contornado-quadrado-esquerda:before {
content: "\e958";
}
.ipe-chevron-direita:before {
content: "\e959";
}
.ipe-chevron-esquerda:before {
content: "\e95a";
}
.ipe-chevron-preenchido-circular-alto:before {
content: "\e95b";
}
.ipe-chevron-preenchido-circular-baixo:before {
content: "\e95c";
}
.ipe-chevron-preenchido-circular-direita:before {
content: "\e95d";
}
.ipe-chevron-preenchido-circular-esquerda:before {
content: "\e95e";
}
.ipe-chevron-preenchido-quadrado-alto:before {
content: "\e95f";
}
.ipe-chevron-preenchido-quadrado-baixo:before {
content: "\e960";
}
.ipe-chevron-preenchido-quadrado-direita:before {
content: "\e961";
}
.ipe-chevron-preenchido-quadrado-esquerda:before {
content: "\e962";
}
.ipe-cifrao-contornado-circular:before {
content: "\e963";
}
.ipe-cifrao-contornado-quadrado:before {
content: "\e964";
}
.ipe-cifrao-preenchido-circular:before {
content: "\e965";
}
.ipe-cifrao-preenchido-quadrado:before {
content: "\e966";
}
.ipe-clipe:before {
content: "\e967";
}
.ipe-codigo:before {
content: "\e968";
}
.ipe-codorna-contornada:before {
content: "\e969";
}
.ipe-codorna-preenchida:before {
content: "\e96a";
}
.ipe-comentario-contornado:before {
content: "\e96b";
}
.ipe-comentario-contornado-2:before {
content: "\e96c";
}
.ipe-comentario-contornado-exclamacao:before {
content: "\e96d";
}
.ipe-comentario-contornado-exclamacao-2:before {
content: "\e96e";
}
.ipe-comentario-contornado-info:before {
content: "\e96f";
}
.ipe-comentario-contornado-info-2:before {
content: "\e970";
}
.ipe-comentario-contornado-linhas:before {
content: "\e971";
}
.ipe-comentario-contornado-linhas-2:before {
content: "\e972";
}
.ipe-comentario-contornado-pontos:before {
content: "\e973";
}
.ipe-comentario-contornado-pontos-2:before {
content: "\e974";
}
.ipe-comentario-preenchido:before {
content: "\e975";
}
.ipe-comentario-preenchido-2:before {
content: "\e976";
}
.ipe-comentario-preenchido-exclamacao:before {
content: "\e977";
}
.ipe-comentario-preenchido-exclamacao-2:before {
content: "\e978";
}
.ipe-comentario-preenchido-info:before {
content: "\e979";
}
.ipe-comentario-preenchido-info-2:before {
content: "\e97a";
}
.ipe-comentario-preenchido-linhas:before {
content: "\e97b";
}
.ipe-comentario-preenchido-linhas-2:before {
content: "\e97c";
}
.ipe-comentario-preenchido-pontos:before {
content: "\e97d";
}
.ipe-comentario-preenchido-pontos-2:before {
content: "\e97e";
}
.ipe-compartilhar:before {
content: "\e97f";
}
.ipe-computador-contornado:before {
content: "\e980";
}
.ipe-computador-preenchido:before {
content: "\e981";
}
.ipe-discord:before {
content: "\e982";
}
.ipe-divisao:before {
content: "\e983";
}
.ipe-divisao-contornado-circular:before {
content: "\e984";
}
.ipe-divisao-contornado-quadrado:before {
content: "\e985";
}
.ipe-divisao-preenchido-circular:before {
content: "\e986";
}
.ipe-divisao-preenchido-quadrado:before {
content: "\e987";
}
.ipe-download-contornado:before {
content: "\e988";
}
.ipe-download-preenchido:before {
content: "\e989";
}
.ipe-e-mail-contornado:before {
content: "\e98a";
}
.ipe-e-mail-preenchido:before {
content: "\e98b";
}
.ipe-engrenagem-contornada:before {
content: "\e98c";
}
.ipe-engrenagem-preenchida:before {
content: "\e98d";
}
.ipe-entrar-contornado:before {
content: "\e98e";
}
.ipe-entrar-preenchido:before {
content: "\e98f";
}
.ipe-escudo-contornado-exclamacao:before {
content: "\e990";
}
.ipe-escudo-preenchido-exclamacao:before {
content: "\e991";
}
.ipe-facebook:before {
content: "\e992";
}
.ipe-ferramentas-contornada:before {
content: "\e993";
}
.ipe-ferramentas-preenchida:before {
content: "\e994";
}
.ipe-frasco-contornado:before {
content: "\e995";
}
.ipe-frasco-preenchido:before {
content: "\e996";
}
.ipe-github:before {
content: "\e997";
}
.ipe-globo:before {
content: "\e998";
}
.ipe-google:before {
content: "\e999";
}
.ipe-headset-preenchido:before {
content: "\e99a";
}
.ipe-igual:before {
content: "\e99b";
}
.ipe-igual-contornado-circular:before {
content: "\e99c";
}
.ipe-igual-contornado-circular-1:before {
content: "\e99d";
}
.ipe-igual-contornado-quadrado:before {
content: "\e99e";
}
.ipe-igual-contornado-quadrado-1:before {
content: "\e99f";
}
.ipe-impressora-contornada:before {
content: "\e9a0";
}
.ipe-impressora-preenchida:before {
content: "\e9a1";
}
.ipe-info:before {
content: "\e9a2";
}
.ipe-info-contornado-circular:before {
content: "\e9a3";
}
.ipe-info-contornado-quadrado:before {
content: "\e9a4";
}
.ipe-info-preenchido-circular:before {
content: "\e9a5";
}
.ipe-info-preenchido-quadrado:before {
content: "\e9a6";
}
.ipe-instagram:before {
content: "\e9a7";
}
.ipe-interrogacao:before {
content: "\e9a8";
}
.ipe-interrogacao-contornado-circular:before {
content: "\e9a9";
}
.ipe-interrogacao-contornado-quadrado:before {
content: "\e9aa";
}
.ipe-interrogacao-preenchido-circular:before {
content: "\e9ab";
}
.ipe-interrogacao-preenchido-quadrado:before {
content: "\e9ac";
}
.ipe-lapis-contornado:before {
content: "\e9ad";
}
.ipe-lapis-preenchido:before {
content: "\e9ae";
}
.ipe-lista-contornada:before {
content: "\e9af";
}
.ipe-livro-contornado:before {
content: "\e9b0";
}
.ipe-livro-preenchido:before {
content: "\e9b1";
}
.ipe-lixo-contornado:before {
content: "\e9b2";
}
.ipe-lixo-preenchido:before {
content: "\e9b3";
}
.ipe-localizacao-contornada:before {
content: "\e9b4";
}
.ipe-localizacao-preenchida:before {
content: "\e9b5";
}
.ipe-lupa:before {
content: "\e9b6";
}
.ipe-lupa-exclamacao:before {
content: "\e9b7";
}
.ipe-lupa-mais:before {
content: "\e9b8";
}
.ipe-mais:before {
content: "\e9b9";
}
.ipe-mais-contornado-circular:before {
content: "\e9ba";
}
.ipe-mais-contornado-quadrado:before {
content: "\e9bb";
}
.ipe-mais-preenchido-circular:before {
content: "\e9bc";
}
.ipe-mais-preenchido-quadrado:before {
content: "\e9bd";
}
.ipe-maleta-contornada:before {
content: "\e9be";
}
.ipe-maleta-preenchida:before {
content: "\e9bf";
}
.ipe-mapa-contornado:before {
content: "\e9c0";
}
.ipe-mapa-preenchido:before {
content: "\e9c1";
}
.ipe-marcador-contornado:before {
content: "\e9c2";
}
.ipe-marcador-preenchido:before {
content: "\e9c3";
}
.ipe-maximizar:before {
content: "\e9c4";
}
.ipe-medalha-contornada:before {
content: "\e9c5";
}
.ipe-medalha-preenchida:before {
content: "\e9c6";
}
.ipe-megafone-contornado:before {
content: "\e9c7";
}
.ipe-megafone-preenchido:before {
content: "\e9c8";
}
.ipe-menos:before {
content: "\e9c9";
}
.ipe-menos-contornado-circular:before {
content: "\e9ca";
}
.ipe-menos-contornado-quadrado:before {
content: "\e9cb";
}
.ipe-menos-preenchido-circular:before {
content: "\e9cc";
}
.ipe-menos-preenchido-quadrado:before {
content: "\e9cd";
}
.ipe-microfone-contornado:before {
content: "\e9ce";
}
.ipe-microfone-preenchido:before {
content: "\e9cf";
}
.ipe-minimizar:before {
content: "\e9d0";
}
.ipe-monitor-contornado:before {
content: "\e9d1";
}
.ipe-monitor-contornado-grafico:before {
content: "\e9d2";
}
.ipe-monitor-contornado-texto:before {
content: "\e9d3";
}
.ipe-monitor-preenchido:before {
content: "\e9d4";
}
.ipe-monitor-preenchido-grafico:before {
content: "\e9d5";
}
.ipe-monitor-preenchido-texto:before {
content: "\e9d6";
}
.ipe-nota-fiscal-contornada:before {
content: "\e9d7";
}
.ipe-nota-fiscal-preenchida:before {
content: "\e9d8";
}
.ipe-nuvem-contornada:before {
content: "\e9d9";
}
.ipe-nuvem-contornada-download:before {
content: "\e9da";
}
.ipe-nuvem-contornada-upload:before {
content: "\e9db";
}
.ipe-nuvem-preenchida:before {
content: "\e9dc";
}
.ipe-nuvem-preenchida-download:before {
content: "\e9dd";
}
.ipe-nuvem-preenchida-upload:before {
content: "\e9de";
}
.ipe-olho-contornado:before {
content: "\e9df";
}
.ipe-olho-contornado-desativado:before {
content: "\e9e0";
}
.ipe-olho-preenchido:before {
content: "\e9e1";
}
.ipe-olho-preenchido-desativado:before {
content: "\e9e2";
}
.ipe-ordenacao:before {
content: "\e9e3";
}
.ipe-pagina-check-contornada:before {
content: "\e9e4";
}
.ipe-pagina-check-preenchida:before {
content: "\e9e5";
}
.ipe-pagina-contornada:before {
content: "\e9e6";
}
.ipe-pagina-lista-contornada:before {
content: "\e9e7";
}
.ipe-pagina-lista-preenchida:before {
content: "\e9e8";
}
.ipe-pagina-mais-contornada:before {
content: "\e9e9";
}
.ipe-pagina-mais-preenchida:before {
content: "\e9ea";
}
.ipe-pagina-menos-contornada:before {
content: "\e9eb";
}
.ipe-pagina-menos-preenchida:before {
content: "\e9ec";
}
.ipe-pagina-preenchida:before {
content: "\e9ed";
}
.ipe-pagina-texto-contornada:before {
content: "\e9ee";
}
.ipe-pagina-texto-preenchida:before {
content: "\e9ef";
}
.ipe-pagina-x-contornada:before {
content: "\e9f0";
}
.ipe-pagina-x-preenchida:before {
content: "\e9f1";
}
.ipe-pasta-contornada:before {
content: "\e9f2";
}
.ipe-pasta-contornada-mais:before {
content: "\e9f3";
}
.ipe-pasta-contornada-menos:before {
content: "\e9f4";
}
.ipe-pasta-preenchida:before {
content: "\e9f5";
}
.ipe-pasta-preenchida-mais:before {
content: "\e9f6";
}
.ipe-pasta-preenchida-menos:before {
content: "\e9f7";
}
.ipe-pato-contornado:before {
content: "\e9f8";
}
.ipe-pato-preenchido:before {
content: "\e9f9";
}
.ipe-pessoa-contornada:before {
content: "\e9fa";
}
.ipe-pessoa-contornada-2:before {
content: "\e9fb";
}
.ipe-pessoa-contornada-check:before {
content: "\e9fc";
}
.ipe-pessoa-contornada-mais:before {
content: "\e9fd";
}
.ipe-pessoa-contornada-menos:before {
content: "\e9fe";
}
.ipe-pessoa-contornada-texto:before {
content: "\e9ff";
}
.ipe-pessoa-contornada-x:before {
content: "\ea00";
}
.ipe-pessoa-preenchida:before {
content: "\ea01";
}
.ipe-pessoa-preenchida-2:before {
content: "\ea02";
}
.ipe-pessoa-preenchida-check:before {
content: "\ea03";
}
.ipe-pessoa-preenchida-mais:before {
content: "\ea04";
}
.ipe-pessoa-preenchida-menos:before {
content: "\ea05";
}
.ipe-pessoa-preenchida-texto:before {
content: "\ea06";
}
.ipe-pessoa-preenchida-x:before {
content: "\ea07";
}
.ipe-planta-contornada:before {
content: "\ea08";
}
.ipe-planta-preenchida:before {
content: "\ea09";
}
.ipe-polegar-alto-contornado:before {
content: "\ea0a";
}
.ipe-polegar-alto-preenchido:before {
content: "\ea0b";
}
.ipe-polegar-baixo-contornado:before {
content: "\ea0c";
}
.ipe-polegar-baixo-preenchido:before {
content: "\ea0d";
}
.ipe-prancheta-contornada:before {
content: "\ea0e";
}
.ipe-prancheta-contornada-check:before {
content: "\ea0f";
}
.ipe-prancheta-contornada-check-1:before {
content: "\ea10";
}
.ipe-prancheta-contornada-grafico:before {
content: "\ea11";
}
.ipe-prancheta-contornada-mais:before {
content: "\ea12";
}
.ipe-prancheta-contornada-menos:before {
content: "\ea13";
}
.ipe-prancheta-contornada-texto:before {
content: "\ea14";
}
.ipe-prancheta-contornada-x:before {
content: "\ea15";
}
.ipe-prancheta-preenchida:before {
content: "\ea16";
}
.ipe-prancheta-preenchida-grafico:before {
content: "\ea17";
}
.ipe-prancheta-preenchida-mais:before {
content: "\ea18";
}
.ipe-prancheta-preenchida-menos:before {
content: "\ea19";
}
.ipe-prancheta-preenchida-texto:before {
content: "\ea1a";
}
.ipe-prancheta-preenchida-x:before {
content: "\ea1b";
}
.ipe-relogio-contornado:before {
content: "\ea1c";
}
.ipe-relogio-preenchido:before {
content: "\ea1d";
}
.ipe-repetir:before {
content: "\ea1e";
}
.ipe-sair-contornado:before {
content: "\ea1f";
}
.ipe-sair-preenchido:before {
content: "\ea20";
}
.ipe-seringa-contornada:before {
content: "\ea21";
}
.ipe-seringa-preenchida:before {
content: "\ea22";
}
.ipe-seta-alto:before {
content: "\ea23";
}
.ipe-seta-baixo:before {
content: "\ea24";
}
.ipe-seta-contornada-circular-alto:before {
content: "\ea25";
}
.ipe-seta-contornada-circular-baixo:before {
content: "\ea26";
}
.ipe-seta-contornada-circular-direita:before {
content: "\ea27";
}
.ipe-seta-contornada-circular-esquerda:before {
content: "\ea28";
}
.ipe-seta-contornada-quadrada-alto:before {
content: "\ea29";
}
.ipe-seta-contornada-quadrada-baixo:before {
content: "\ea2a";
}
.ipe-seta-contornada-quadrada-direita:before {
content: "\ea2b";
}
.ipe-seta-contornada-quadrada-esquerda:before {
content: "\ea2c";
}
.ipe-seta-direita:before {
content: "\ea2d";
}
.ipe-seta-esquerda:before {
content: "\ea2e";
}
.ipe-seta-preenchida-circular-alto:before {
content: "\ea2f";
}
.ipe-seta-preenchida-circular-baixo:before {
content: "\ea30";
}
.ipe-seta-preenchida-circular-direita:before {
content: "\ea31";
}
.ipe-seta-preenchida-circular-esquerda:before {
content: "\ea32";
}
.ipe-seta-preenchida-quadrada-alto:before {
content: "\ea33";
}
.ipe-seta-preenchida-quadrada-baixo:before {
content: "\ea34";
}
.ipe-seta-preenchida-quadrada-direita:before {
content: "\ea35";
}
.ipe-seta-preenchida-quadrada-esquerda:before {
content: "\ea36";
}
.ipe-sino-contornado:before {
content: "\ea37";
}
.ipe-sino-preenchido:before {
content: "\ea38";
}
.ipe-switch:before {
content: "\ea39";
}
.ipe-telefone-contornado:before {
content: "\ea3a";
}
.ipe-telefone-preenchido:before {
content: "\ea3b";
}
.ipe-texto-contornado:before {
content: "\ea3c";
}
.ipe-texto-preenchido:before {
content: "\ea3d";
}
.ipe-texto-preenchido-1:before {
content: "\ea3e";
}
.ipe-tres-pontos-horizontal:before {
content: "\ea3f";
}
.ipe-tres-pontos-vertical:before {
content: "\ea40";
}
.ipe-upload-contornado:before {
content: "\ea41";
}
.ipe-upload-preenchido:before {
content: "\ea42";
}
.ipe-vinculo:before {
content: "\ea43";
}
.ipe-x:before {
content: "\ea44";
}
.ipe-x-contornado-circular:before {
content: "\ea45";
}
.ipe-x-contornado-quadrado:before {
content: "\ea46";
}
.ipe-x-preenchido-circular:before {
content: "\ea47";
}
.ipe-x-preenchido-quadrado:before {
content: "\ea48";
}
/* === components/info-card-v2.css === */
/**
* InfoCard v2.0 - Estilos para componente declarativo e dinamico
*
* Este CSS complementa o info-card.css existente adicionando:
* - Container para renderizacao dinamica
* - Estados de loading (skeleton)
* - Estados de erro
* - Animacoes de transicao
* - Grid responsivo no body
*
* @version 2.0.0
* @see /home/kennedy/ia/doc/arquitetura/architected_frontend/info-card/
*/
/* ============================================================
CONTAINER
============================================================ */
.info-card-v2-container {
transition: all 0.3s ease;
min-height: 0;
}
.info-card-v2-container.is-loading {
min-height: 120px;
}
.info-card-v2-container.has-content {
animation: infoCardFadeIn 0.3s ease;
}
@keyframes infoCardFadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
INFO CARD V2 BASE
============================================================ */
.info-card-v2 {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: var(--radius-lg, 8px);
background-color: var(--color-surface, #ffffff);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.info-card-v2__header {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
padding: var(--spacing-md, 16px);
background-color: var(--color-surface-elevated, #f8fafc);
border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.info-card-v2__icon {
font-size: 24px;
color: var(--color-primary, #3F68FB);
}
.info-card-v2__title-group {
flex: 1;
min-width: 0;
}
.info-card-v2__title {
margin: 0;
font-size: var(--font-size-lg, 18px);
font-weight: 600;
color: var(--color-text, #1e293b);
line-height: 1.3;
}
.info-card-v2__subtitle {
margin: 4px 0 0 0;
font-size: var(--font-size-sm, 14px);
color: var(--color-text-muted, #64748b);
}
/* ============================================================
INFO CARD V2 BODY
============================================================ */
.info-card-v2__body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md, 16px);
padding: var(--spacing-md, 16px);
}
.info-card-v2__item {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-card-v2__item label,
.info-card-v2__label {
display: block;
font-size: var(--font-size-xs, 12px);
font-weight: 500;
color: var(--color-text-muted, #64748b);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-card-v2__item span,
.info-card-v2__value {
font-size: var(--font-size-base, 14px);
font-weight: 500;
color: var(--color-text, #1e293b);
}
/* ============================================================
VARIANTES DE TIPO
============================================================ */
/* Propriedade */
.info-card-v2.--propriedade .info-card-v2__header {
background-color: var(--color-primary-50, #eff6ff);
border-bottom-color: var(--color-primary-100, #dbeafe);
}
.info-card-v2.--propriedade .info-card-v2__icon {
color: var(--color-primary, #3F68FB);
}
/* Produtor / Pessoa */
.info-card-v2.--produtor .info-card-v2__header,
.info-card-v2.--pessoa .info-card-v2__header {
background-color: var(--color-gray-100, #f1f5f9);
border-bottom-color: var(--color-gray-200, #e2e8f0);
}
.info-card-v2.--produtor .info-card-v2__icon,
.info-card-v2.--pessoa .info-card-v2__icon {
color: var(--color-gray-600, #475569);
}
/* Empresa */
.info-card-v2.--empresa .info-card-v2__header {
background-color: var(--color-purple-50, #faf5ff);
border-bottom-color: var(--color-purple-100, #f3e8ff);
}
.info-card-v2.--empresa .info-card-v2__icon {
color: var(--color-purple-600, #9333ea);
}
/* Exploracao */
.info-card-v2.--exploracao .info-card-v2__header {
background-color: var(--color-success-50, #f0fdf4);
border-bottom-color: var(--color-success-100, #dcfce7);
}
.info-card-v2.--exploracao .info-card-v2__icon {
color: var(--color-success, #47B881);
}
/* Veiculo */
.info-card-v2.--veiculo .info-card-v2__header {
background-color: var(--color-info-50, #eff6ff);
border-bottom-color: var(--color-info-100, #dbeafe);
}
.info-card-v2.--veiculo .info-card-v2__icon {
color: var(--color-info, #3B82F6);
}
/* Animal */
.info-card-v2.--animal .info-card-v2__header {
background-color: var(--color-warning-50, #fffbeb);
border-bottom-color: var(--color-warning-100, #fef3c7);
}
.info-card-v2.--animal .info-card-v2__icon {
color: var(--color-warning, #F59E0B);
}
/* Veterinario */
.info-card-v2.--veterinario .info-card-v2__header {
background-color: var(--color-teal-50, #f0fdfa);
border-bottom-color: var(--color-teal-100, #ccfbf1);
}
.info-card-v2.--veterinario .info-card-v2__icon {
color: var(--color-teal-600, #0d9488);
}
/* ============================================================
ESTADO DE LOADING (SKELETON)
============================================================ */
.info-card-v2.is-loading {
pointer-events: none;
}
.info-card-v2.is-loading .info-card-v2__header {
background-color: var(--color-gray-100, #f1f5f9);
}
.skeleton-line {
height: 16px;
background: linear-gradient(90deg,
var(--color-gray-200, #e2e8f0) 25%,
var(--color-gray-100, #f1f5f9) 50%,
var(--color-gray-200, #e2e8f0) 75%
);
background-size: 200% 100%;
animation: skeletonShimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes skeletonShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ============================================================
ESTADO DE ERRO
============================================================ */
.info-card-v2.is-error {
border-color: var(--color-error-200, #fecaca);
background-color: var(--color-error-50, #fef2f2);
}
.info-card-v2.is-error .info-card-v2__header {
background-color: var(--color-error-100, #fee2e2);
border-bottom-color: var(--color-error-200, #fecaca);
}
.info-card-v2.is-error .info-card-v2__icon {
color: var(--color-error, #dc2626);
}
.info-card-v2.is-error .info-card-v2__title {
color: var(--color-error, #dc2626);
}
.info-card-v2__error-message {
margin: 0;
color: var(--color-error-700, #b91c1c);
font-size: var(--font-size-sm, 14px);
}
/* ============================================================
BADGES
============================================================ */
.info-card-v2__badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
font-size: var(--font-size-xs, 12px);
font-weight: 600;
border-radius: var(--radius-full, 9999px);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-card-v2__badge.--active,
.info-card-v2__badge.--success {
background-color: var(--color-success-100, #dcfce7);
color: var(--color-success-700, #15803d);
}
.info-card-v2__badge.--inactive,
.info-card-v2__badge.--error {
background-color: var(--color-error-100, #fee2e2);
color: var(--color-error-700, #b91c1c);
}
.info-card-v2__badge.--warning,
.info-card-v2__badge.--pending {
background-color: var(--color-warning-100, #fef3c7);
color: var(--color-warning-700, #a16207);
}
.info-card-v2__badge.--info {
background-color: var(--color-info-100, #dbeafe);
color: var(--color-info-700, #1d4ed8);
}
/* ============================================================
ACOES (BOTOES)
============================================================ */
.info-card-v2__actions {
display: flex;
gap: var(--spacing-xs, 4px);
margin-left: auto;
}
.info-card-v2__actions .btn {
padding: 6px 12px;
font-size: var(--font-size-sm, 14px);
}
/* ============================================================
WRAPPER (QUANDO TEM LABEL)
============================================================ */
.info-card-wrapper {
margin-bottom: var(--spacing-md, 16px);
}
.info-card-label {
display: block;
margin-bottom: var(--spacing-xs, 8px);
font-size: var(--font-size-sm, 14px);
font-weight: 500;
color: var(--color-text-muted, #64748b);
}
/* ============================================================
RESPONSIVIDADE
============================================================ */
@media (max-width: 768px) {
.info-card-v2__body {
grid-template-columns: 1fr;
}
.info-card-v2__header {
flex-wrap: wrap;
}
.info-card-v2__actions {
width: 100%;
margin-top: var(--spacing-sm, 8px);
justify-content: flex-end;
}
}
@media (max-width: 480px) {
.info-card-v2__header {
flex-direction: column;
align-items: flex-start;
}
.info-card-v2__title {
font-size: var(--font-size-base, 14px);
}
}
/* ============================================================
DARK MODE
============================================================ */
.dark .info-card-v2,
.info-card-v2.--dark {
background-color: var(--color-dark-surface, #1e293b);
border-color: var(--color-dark-border, #334155);
}
.dark .info-card-v2__header,
.info-card-v2.--dark .info-card-v2__header {
background-color: var(--color-dark-surface-elevated, #0f172a);
border-bottom-color: var(--color-dark-border, #334155);
}
.dark .info-card-v2__title,
.info-card-v2.--dark .info-card-v2__title {
color: var(--color-dark-text, #f1f5f9);
}
.dark .info-card-v2__item span,
.info-card-v2.--dark .info-card-v2__value {
color: var(--color-dark-text, #f1f5f9);
}
.dark .info-card-v2__item label,
.info-card-v2.--dark .info-card-v2__label {
color: var(--color-dark-text-muted, #94a3b8);
}
.dark .skeleton-line {
background: linear-gradient(90deg,
var(--color-dark-gray-700, #334155) 25%,
var(--color-dark-gray-600, #475569) 50%,
var(--color-dark-gray-700, #334155) 75%
);
background-size: 200% 100%;
}
/* === components/info-card.css === */
/**
* INFO CARD COMPONENT
*
* Componente de cards de informação com suporte a:
* - Tipos: Propriedade, Produtor/Pessoa, Exploração, Veículo, etc
* - Badge de status (Ativo/Inativo)
* - Seção expansível/colapsável
* - Com ícones personalizados
* - Dark mode completo
* - Acessibilidade WCAG 2.1 AA
* - Estrutura extensível para novos tipos
*
* Baseado no Design System Figma - Gales
* @version 1.0.0
* @date 2025-11-04
*/
/* ============================================
BASE INFO CARD STRUCTURE
============================================ */
.info-card {
/* Layout */
display: flex;
flex-direction: column;
width: 100%;
max-width: 852px;
/* Appearance */
background: var(--color-neutral-50, var(--color-neutral-100));
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
/* Animation */
transition: all var(--transition-normal, 200ms ease-in-out);
}
.info-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* ============================================
CARD HEADER
============================================ */
.info-card__header {
/* Layout */
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
height: 116px;
/* Appearance */
background: var(--info-card-header-bg, var(--color-neutral-800));
color: var(--info-card-header-color, var(--color-neutral-100));
}
/* Header Content (Left Side) */
.info-card__header-content {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.info-card__header-title {
/* Layout */
display: flex;
align-items: center;
gap: 8px;
/* Typography */
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: inherit;
margin: 0;
}
.info-card__header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 20px;
}
.info-card__header-subtitle {
/* Typography - Nome/Descrição */
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-neutral-400);
margin: 0;
}
.info-card__header-code {
/* Typography - Código/Identificador */
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-neutral-400);
margin: 0;
}
/* Header Actions (Right Side) */
.info-card__header-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* ============================================
CARD BODY
============================================ */
.info-card__body {
/* Layout */
padding: 16px;
min-height: 172px;
/* Appearance */
background: var(--color-neutral-300);
color: var(--color-neutral-600);
/* Animation */
max-height: 800px;
opacity: 1;
transition: max-height var(--transition-normal, 300ms ease-in-out),
opacity var(--transition-fast, 200ms ease-in-out),
padding var(--transition-normal, 300ms ease-in-out);
}
/* Collapsed State */
.info-card__body.is-collapsed {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.info-card__body-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.info-card__body-item {
/* Typography - Baseado no Figma */
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-neutral-600);
}
.info-card__body-label {
font-weight: 400;
color: var(--color-neutral-600);
margin-right: 4px;
}
.info-card__body-value {
font-weight: 400;
color: var(--color-neutral-600);
}
/* ============================================
STATUS BADGE
============================================ */
.info-card__badge {
/* Layout - Baseado no Figma */
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
height: 36px;
gap: 8px;
/* Typography */
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 24px;
text-transform: none;
/* Appearance */
border-radius: 8px;
/* Animation */
transition: all var(--transition-fast, 150ms ease-in-out);
}
/* Active Badge - Cores exatas do Figma */
.info-card__badge--active {
background: var(--color-green-100);
color: #1A2E00;
}
/* Inactive Badge */
.info-card__badge--inactive {
background: var(--color-error-bg, #FDDEDE);
color: var(--color-error-text, #A52D1D);
}
/* Warning Badge */
.info-card__badge--warning {
background: var(--color-warning-bg, #FEF3C7);
color: var(--color-warning-text, #92400E);
}
/* Info Badge */
.info-card__badge--info {
background: var(--color-info-bg, #DBEAFE);
color: var(--color-info-text, #1E40AF);
}
/* ============================================
TOGGLE BUTTON (Expand/Collapse)
============================================ */
.info-card__toggle {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
/* Appearance */
background: transparent;
border: none;
border-radius: 4px;
color: var(--color-neutral-300, var(--color-neutral-400));
cursor: pointer;
/* Animation */
transition: all var(--transition-fast, 150ms ease-in-out);
}
.info-card__toggle:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--color-neutral-50, var(--color-neutral-100));
}
.info-card__toggle:focus {
outline: 2px solid var(--color-primary, var(--color-accent-300));
outline-offset: 2px;
}
.info-card__toggle-icon {
display: inline-flex;
font-size: 20px;
transition: transform var(--transition-fast, 150ms ease-in-out);
}
/* Rotated icon when expanded */
.info-card__toggle.is-expanded .info-card__toggle-icon {
transform: rotate(180deg);
}
/* ============================================
CARD TYPE VARIANTS
============================================ */
/* Propriedade (Property) */
.info-card--propriedade .info-card__header {
background: var(--color-primary, var(--color-accent-300));
}
/* Pessoa/Produtor (Person/Producer) */
.info-card--pessoa .info-card__header {
background: var(--color-secondary, var(--color-neutral-600));
}
/* Exploração (Farm) */
.info-card--exploracao .info-card__header {
background: var(--color-success, #47B881);
}
/* Veículo (Vehicle) */
.info-card--veiculo .info-card__header {
background: var(--color-info, #3B82F6);
}
/* Empresa (Company) */
.info-card--empresa .info-card__header {
background: var(--color-purple, #8B5CF6);
}
/* Animal */
.info-card--animal .info-card__header {
background: var(--color-orange, #F59E0B);
}
/* ============================================
DARK MODE
============================================ */
.dark .info-card,
.info-card--dark {
background: var(--color-neutral-900, var(--color-neutral-800));
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.dark .info-card:hover,
.info-card--dark:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dark .info-card__header,
.info-card--dark .info-card__header {
background: var(--color-neutral-800, #1A1D29);
color: var(--color-neutral-50, var(--color-neutral-100));
}
.dark .info-card__body,
.info-card--dark .info-card__body {
background: var(--color-neutral-850, #1E2130);
color: var(--color-neutral-200, var(--color-neutral-400));
}
.dark .info-card__body-item,
.info-card--dark .info-card__body-item {
color: var(--color-neutral-300, var(--color-neutral-400));
}
.dark .info-card__badge--active,
.info-card--dark .info-card__badge--active {
background: rgba(71, 184, 129, 0.2);
color: var(--color-success, #47B881);
}
.dark .info-card__badge--inactive,
.info-card--dark .info-card__badge--inactive {
background: rgba(220, 38, 38, 0.2);
color: var(--color-error, #DC2626);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.info-card {
max-width: 100%;
}
.info-card__header {
min-height: 100px;
padding: 16px 20px;
}
.info-card__body {
min-height: auto;
padding: 16px 20px;
}
.info-card__header-actions {
flex-direction: column;
gap: 8px;
}
.info-card__header-code {
font-size: 16px;
}
.info-card__header-subtitle {
font-size: 14px;
}
}
@media (max-width: 480px) {
.info-card__header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.info-card__header-actions {
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.info-card__body-list {
gap: 10px;
}
.info-card__body-item {
font-size: 13px;
}
}
/* ============================================
ACCESSIBILITY
============================================ */
/* Focus states */
.info-card:focus-within {
outline: 2px solid var(--color-primary, var(--color-accent-300));
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.info-card,
.info-card__body,
.info-card__toggle,
.info-card__toggle-icon,
.info-card__badge {
transition: none;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.info-card {
border: 2px solid currentColor;
}
.info-card__header {
border-bottom: 2px solid currentColor;
}
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
.info-card {
box-shadow: none;
border: 1px solid #000;
page-break-inside: avoid;
}
.info-card__body {
max-height: none !important;
opacity: 1 !important;
overflow: visible !important;
}
.info-card__toggle {
display: none;
}
}
/* ============================================
UTILITY CLASSES
============================================ */
/* Compact variant */
.info-card--compact .info-card__header {
min-height: 80px;
padding: 12px 20px;
}
.info-card--compact .info-card__body {
min-height: auto;
padding: 12px 20px;
}
/* Full width variant */
.info-card--full {
max-width: 100%;
}
/* No shadow variant */
.info-card--flat {
box-shadow: none;
border: 1px solid var(--color-neutral-300, var(--color-neutral-400));
}
/* Always expanded */
.info-card--always-expanded .info-card__body {
max-height: none;
}
.info-card--always-expanded .info-card__toggle {
display: none;
}
/* ============================================
TABS COMPONENT (dentro do info-card)
============================================ */
.info-card__tabs {
display: flex;
flex-direction: column;
gap: 16px;
}
.info-card__tabs-nav {
display: flex;
gap: 0;
border-bottom: 1px solid var(--color-neutral-400, #C8CDDB);
margin-bottom: 8px;
}
.info-card__tab {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
min-height: 40px;
/* Typography */
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-transform: uppercase;
white-space: nowrap;
/* Appearance */
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-neutral-500, #6B7280);
cursor: pointer;
/* Animation */
transition: all var(--transition-fast, 150ms ease-in-out);
}
.info-card__tab:hover {
color: var(--color-primary, var(--color-accent-300));
background: rgba(63, 104, 251, 0.05);
}
.info-card__tab:focus {
outline: 2px solid var(--color-primary, var(--color-accent-300));
outline-offset: -2px;
}
.info-card__tab.is-active {
color: var(--color-primary, var(--color-accent-300));
border-bottom-color: var(--color-primary, var(--color-accent-300));
}
.info-card__tabs-content {
min-height: 100px;
}
.info-card__tab-panel {
display: none;
opacity: 0;
transition: opacity var(--transition-fast, 150ms ease-in-out);
}
.info-card__tab-panel.is-active {
display: block;
opacity: 1;
}
/* Dark mode tabs */
.dark .info-card__tabs-nav {
border-bottom-color: var(--color-neutral-600, #4B5563);
}
.dark .info-card__tab {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .info-card__tab:hover {
color: var(--color-primary-light, #60A5FA);
background: rgba(96, 165, 250, 0.1);
}
.dark .info-card__tab.is-active {
color: var(--color-primary-light, #60A5FA);
border-bottom-color: var(--color-primary-light, #60A5FA);
}
/* ============================================
TABLE (dentro do info-card)
============================================ */
.info-card__table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 13px;
}
.info-card__table thead {
background: var(--color-neutral-400, #C8CDDB);
}
.info-card__table th {
padding: 10px 12px;
text-align: left;
font-weight: 600;
color: var(--color-neutral-700, #374151);
border-bottom: 1px solid var(--color-neutral-400, #D1D5DB);
}
.info-card__table td {
padding: 10px 12px;
color: var(--color-neutral-600, #4B5563);
border-bottom: 1px solid var(--color-neutral-300, #E5E7EB);
}
.info-card__table tbody tr:hover {
background: rgba(63, 104, 251, 0.05);
}
.info-card__table tbody tr:last-child td {
border-bottom: none;
}
/* Dark mode table */
.dark .info-card__table thead {
background: var(--color-neutral-700, #374151);
}
.dark .info-card__table th {
color: var(--color-neutral-200, #E5E7EB);
border-bottom-color: var(--color-neutral-600, #4B5563);
}
.dark .info-card__table td {
color: var(--color-neutral-300, #D1D5DB);
border-bottom-color: var(--color-neutral-700, #374151);
}
.dark .info-card__table tbody tr:hover {
background: rgba(96, 165, 250, 0.1);
}
/* ============================================
EMPTY STATE (dentro do info-card)
============================================ */
.info-card__empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 16px;
text-align: center;
color: var(--color-neutral-500, #6B7280);
}
.info-card__empty-state i,
.info-card__empty-state .material-icons {
font-size: 48px;
margin-bottom: 12px;
opacity: 0.5;
}
.info-card__empty-state p {
margin: 0;
font-size: 14px;
line-height: 20px;
}
/* Dark mode empty state */
.dark .info-card__empty-state {
color: var(--color-neutral-400, #9CA3AF);
}
/* ============================================
ALERT (dentro do info-card)
============================================ */
.info-card__alert {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
margin-bottom: 12px;
border-radius: 6px;
font-size: 13px;
line-height: 20px;
}
.info-card__alert--info {
background: var(--color-info-bg, #DBEAFE);
color: var(--color-info-text, #1E40AF);
}
.info-card__alert--warning {
background: var(--color-warning-bg, #FEF3C7);
color: var(--color-warning-text, #92400E);
}
.info-card__alert--success {
background: var(--color-success-bg, #D1FAE5);
color: var(--color-success-text, #065F46);
}
.info-card__alert--error {
background: var(--color-error-bg, #FEE2E2);
color: var(--color-error-text, #991B1B);
}
/* Dark mode alerts */
.dark .info-card__alert--info {
background: rgba(59, 130, 246, 0.2);
color: #93C5FD;
}
.dark .info-card__alert--warning {
background: rgba(245, 158, 11, 0.2);
color: #FCD34D;
}
.dark .info-card__alert--success {
background: rgba(34, 197, 94, 0.2);
color: #86EFAC;
}
.dark .info-card__alert--error {
background: rgba(239, 68, 68, 0.2);
color: #FCA5A5;
}
/* ============================================
RESPONSIVE TABS
============================================ */
@media (max-width: 768px) {
.info-card__tabs-nav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.info-card__tab {
padding: 8px 12px;
font-size: 12px;
}
.info-card__table {
font-size: 12px;
}
.info-card__table th,
.info-card__table td {
padding: 8px 10px;
}
}
@media (max-width: 480px) {
.info-card__tabs-nav {
gap: 0;
}
.info-card__tab {
flex: 1;
padding: 8px 8px;
font-size: 11px;
}
.info-card__table {
display: block;
overflow-x: auto;
}
}
/* === components/inline-edit.css === */
/**
* Inline Edit
* Campo que alterna entre modo leitura e modo edição com um clique.
* @layer components
* @since 0.2.0
*/
/* ============================================
BASE
============================================ */
.inline-edit {
position: relative;
display: inline-flex;
align-items: center;
min-width: 120px;
}
/* ============================================
MODO LEITURA
============================================ */
.inline-edit__read {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: var(--radius-sm, 4px);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--text-base-neutral-default);
cursor: pointer;
transition: background var(--transition-fast, 150ms) ease,
border-color var(--transition-fast, 150ms) ease;
}
.inline-edit__read:hover {
background: var(--surface-base-neutral-container-emphasis, #f3f4f6);
border-color: var(--border-base-neutral-default);
}
.inline-edit__edit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 14px;
height: 14px;
opacity: 0;
color: var(--icon-base-neutral-default);
transition: opacity var(--transition-fast, 150ms) ease;
}
.inline-edit__edit-icon svg {
width: 14px;
height: 14px;
}
.inline-edit__read:hover .inline-edit__edit-icon {
opacity: 1;
}
/* ============================================
MODO EDIÇÃO
============================================ */
.inline-edit__field {
display: none;
width: 100%;
}
.inline-edit__field input,
.inline-edit__field textarea {
width: 100%;
padding: 6px 8px;
border: 2px solid var(--border-base-brand-default, #3E68FB);
border-radius: var(--radius-sm, 4px);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--text-base-neutral-default);
background: var(--surface-base-neutral-container-default, #ffffff);
outline: none;
box-sizing: border-box;
}
.inline-edit__field textarea {
min-height: 60px;
resize: vertical;
}
.inline-edit__actions {
display: flex;
gap: 4px;
margin-top: 4px;
}
.inline-edit__actions button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-sm, 4px);
cursor: pointer;
background: var(--surface-base-neutral-container-default, #ffffff);
color: var(--icon-base-neutral-default);
transition: background var(--transition-fast, 150ms) ease,
color var(--transition-fast, 150ms) ease;
}
.inline-edit__actions button:hover {
background: var(--surface-base-neutral-container-emphasis);
}
.inline-edit__actions button svg {
width: 14px;
height: 14px;
}
.inline-edit__actions .inline-edit__confirm {
background: var(--surface-base-brand-default, #3E68FB);
border-color: var(--surface-base-brand-default, #3E68FB);
color: #ffffff;
}
.inline-edit__actions .inline-edit__confirm:hover {
opacity: 0.9;
background: var(--surface-base-brand-default, #3E68FB);
}
/* ============================================
ESTADO: EDITING
============================================ */
.inline-edit--editing .inline-edit__read {
display: none;
}
.inline-edit--editing .inline-edit__field {
display: block;
}
/* ============================================
ESTADO: ERROR
============================================ */
.inline-edit--error .inline-edit__field input,
.inline-edit--error .inline-edit__field textarea {
border-color: var(--border-base-error-default, #dc2626);
}
/* ============================================
ESTADO: DISABLED
============================================ */
.inline-edit--disabled .inline-edit__read {
cursor: default;
opacity: 0.5;
}
.inline-edit--disabled .inline-edit__read:hover {
background: transparent;
border-color: transparent;
}
.inline-edit--disabled .inline-edit__read:hover .inline-edit__edit-icon {
opacity: 0;
}
/* ============================================
VARIANTE: COMPACT
Sem botões de ação (Enter confirma, Esc cancela).
============================================ */
.inline-edit--compact .inline-edit__actions {
display: none;
}
/* ============================================
DARK MODE
============================================ */
.dark .inline-edit__read,
[data-theme="dark"] .inline-edit__read {
color: var(--text-base-neutral-default);
}
.dark .inline-edit__read:hover,
[data-theme="dark"] .inline-edit__read:hover {
background: var(--surface-base-neutral-container-emphasis);
border-color: var(--border-base-neutral-default);
}
.dark .inline-edit__field input,
.dark .inline-edit__field textarea,
[data-theme="dark"] .inline-edit__field input,
[data-theme="dark"] .inline-edit__field textarea {
color: var(--text-base-neutral-default);
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-brand-default);
}
.dark .inline-edit__actions button,
[data-theme="dark"] .inline-edit__actions button {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
color: var(--icon-base-neutral-default);
}
.dark .inline-edit__actions button:hover,
[data-theme="dark"] .inline-edit__actions button:hover {
background: var(--surface-base-neutral-container-emphasis);
}
/* === components/inline-message.css === */
/**
* Inline Message
* Alerta contextual inline para feedback dentro de seções e formulários.
* Mais sutil e compacto que o Alert (full-width).
* @layer components
* @since 0.2.0
*/
/* ============================================
BASE
============================================ */
.inline-message {
display: inline-flex;
align-items: flex-start;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
}
/* ============================================
ELEMENTOS
============================================ */
.inline-message__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 2px;
}
.inline-message__icon::before {
content: "";
display: block;
width: 16px;
height: 16px;
background: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
}
.inline-message__text {
color: inherit;
}
.inline-message__title {
font-weight: 600;
}
.inline-message__link {
font-weight: 600;
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.inline-message__link:hover {
opacity: 0.8;
}
/* ============================================
VARIANTE: INFO
============================================ */
.inline-message--info {
color: var(--text-base-brand-default, #3E68FB);
}
.inline-message--info .inline-message__icon::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M8 7v4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.5' r='.75' fill='currentColor'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M8 7v4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.5' r='.75' fill='currentColor'/%3E%3C/svg%3E");
}
/* ============================================
VARIANTE: WARNING
============================================ */
.inline-message--warning {
color: var(--text-base-warning-default, #d97706);
}
.inline-message--warning .inline-message__icon::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.134 1.5a1 1 0 0 1 1.732 0l6.062 10.5A1 1 0 0 1 14.062 13.5H1.938a1 1 0 0 1-.866-1.5L7.134 1.5z' fill='none' stroke='currentColor' stroke-width='1.2'/%3E%3Cpath d='M8 5.5v3' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='10.5' r='.75' fill='currentColor'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.134 1.5a1 1 0 0 1 1.732 0l6.062 10.5A1 1 0 0 1 14.062 13.5H1.938a1 1 0 0 1-.866-1.5L7.134 1.5z' fill='none' stroke='currentColor' stroke-width='1.2'/%3E%3Cpath d='M8 5.5v3' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='10.5' r='.75' fill='currentColor'/%3E%3C/svg%3E");
}
/* ============================================
VARIANTE: ERROR
============================================ */
.inline-message--error {
color: var(--text-base-error-default, #dc2626);
}
.inline-message--error .inline-message__icon::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ============================================
VARIANTE: SUCCESS
============================================ */
.inline-message--success {
color: var(--text-base-success-default, #16a34a);
}
.inline-message--success .inline-message__icon::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ============================================
MODIFICADOR: BLOCK
Full-width com fundo sutil e padding.
============================================ */
.inline-message--block {
display: flex;
width: 100%;
padding: 10px 12px;
border-radius: var(--radius-sm, 4px);
}
.inline-message--block.inline-message--info {
background-color: var(--surface-base-brand-container, rgba(62, 104, 251, 0.08));
}
.inline-message--block.inline-message--warning {
background-color: var(--surface-base-alert-container-warning);
}
.inline-message--block.inline-message--error {
background-color: var(--surface-base-alert-container-error);
}
.inline-message--block.inline-message--success {
background-color: var(--surface-base-alert-container-success);
}
/* ============================================
DARK MODE
============================================ */
.dark .inline-message--info,
[data-theme="dark"] .inline-message--info {
color: var(--text-base-brand-default);
}
.dark .inline-message--warning,
[data-theme="dark"] .inline-message--warning {
color: var(--text-base-warning-default);
}
.dark .inline-message--error,
[data-theme="dark"] .inline-message--error {
color: var(--text-base-error-default);
}
.dark .inline-message--success,
[data-theme="dark"] .inline-message--success {
color: var(--text-base-success-default);
}
/* === components/input-date-range.css === */
/**
* INPUT DATE RANGE COMPONENT
*
* Componente de seletor de intervalo de datas (Date Ranger / Double Calendar)
* Utiliza Flatpickr com mode: 'range' e exibe dois calendarios lado a lado.
*
* Caracteristicas:
* - Dois calendarios lado a lado para visualizacao clara
* - Dois campos hidden para valores individuais (data inicial e final)
* - Integracao nativa com FormRenderer
* - Suporte a dark mode
* - Responsivo
* - Acessibilidade WCAG 2.1 AA
*
* Uso:
*
*
* @version 1.0.0
* @date 2025-12-24
*/
/* ============================================
BASE STYLES
============================================ */
.input-date-range-group {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.input-date-range-label {
display: flex;
align-items: center;
gap: var(--spacing-xs, 6px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: var(--color-text-primary, var(--color-neutral-800));
margin: 0;
}
.input-date-range-label-required {
color: var(--color-danger, var(--color-red-400));
font-size: 14px;
}
.input-date-range-container {
position: relative;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.input-date-range {
width: 100%;
height: 44px;
min-width: 280px; /* Espaco para exibir "DD/MM/YYYY ate DD/MM/YYYY" */
padding: 10px 44px 10px 16px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-text-primary, var(--color-neutral-800));
background-color: var(--color-text-light);
border: 1px solid var(--color-neutral-400);
border-radius: var(--radius-md, 8px);
outline: none;
transition: all var(--transition-base, 200ms ease-in-out);
cursor: pointer;
box-sizing: border-box;
}
.input-date-range::placeholder {
color: var(--color-neutral-500);
}
/* ============================================
ICONE
============================================ */
.input-date-range-icon {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-neutral-600, var(--color-neutral-500));
pointer-events: none;
transition: color var(--transition-fast, 100ms ease-in-out);
}
.input-date-range-icon i {
font-size: 18px;
line-height: 1;
}
/* ============================================
ESTADOS
============================================ */
/* Hover */
.input-date-range:hover:not(:disabled):not(:focus):not(.input-date-range-error) {
border-color: var(--color-neutral-500);
}
.input-date-range:hover:not(:disabled) ~ .input-date-range-icon {
color: var(--color-neutral-700, var(--color-neutral-600));
}
/* Focus */
.input-date-range:focus {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
}
.input-date-range:focus ~ .input-date-range-icon {
color: var(--color-accent-300);
}
/* Error */
.input-date-range.input-date-range-error {
border-color: var(--color-danger, var(--color-red-400));
background-color: rgba(232, 58, 48, 0.02);
}
.input-date-range.input-date-range-error:focus {
border-color: var(--color-danger, var(--color-red-400));
box-shadow: 0 0 0 3px rgba(232, 58, 48, 0.1);
}
.input-date-range.input-date-range-error ~ .input-date-range-icon {
color: var(--color-danger, var(--color-red-400));
}
/* Disabled */
.input-date-range:disabled {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
opacity: 0.6;
}
.input-date-range:disabled ~ .input-date-range-icon {
color: var(--color-neutral-500);
}
/* ============================================
FLATPICKR DOUBLE CALENDAR CUSTOMIZATION
============================================ */
/* Container principal com dois calendarios */
.flatpickr-calendar.showMonths {
width: auto !important;
}
/* Ajusta largura quando ha 2 meses */
.flatpickr-calendar.arrowTop.arrowLeft {
width: auto;
}
/* Container dos meses */
.flatpickr-months {
display: flex;
justify-content: space-between;
}
/* Wrapper dos dias para dois meses */
.flatpickr-innerContainer {
display: flex;
flex-wrap: nowrap;
}
/* Cada bloco de mes */
.flatpickr-rContainer {
width: auto;
}
/* Separador visual entre os dois calendarios */
.flatpickr-calendar .flatpickr-rContainer + .flatpickr-rContainer {
border-left: 1px solid var(--color-neutral-300, #E0E0E0);
padding-left: 16px;
margin-left: 16px;
}
/* Estilos especificos para date range */
.flatpickr-day.startRange {
border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px) !important;
}
.flatpickr-day.endRange {
border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0 !important;
}
.flatpickr-day.startRange.endRange {
border-radius: var(--radius-md, 8px) !important;
}
.flatpickr-day.inRange {
background: rgba(63, 104, 251, 0.1);
border-color: transparent;
box-shadow: none;
border-radius: 0;
}
.flatpickr-day.inRange:hover {
background: rgba(63, 104, 251, 0.2);
border-color: transparent;
}
/* Corrige o visual quando mesma data para inicio e fim */
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
background: var(--color-primary, var(--color-accent-300));
border-color: var(--color-primary, var(--color-accent-300));
color: white;
}
/* ============================================
HELPER E ERROR MESSAGES
============================================ */
.input-date-range-helper {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: var(--spacing-xs, 6px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 12px;
line-height: 16px;
color: var(--color-neutral-600, var(--color-neutral-500));
}
.input-date-range-error-message {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: var(--spacing-xs, 6px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 12px;
line-height: 16px;
color: var(--color-danger, var(--color-red-400));
font-weight: 500;
}
/* ============================================
DARK MODE
============================================ */
.dark .input-date-range-label,
[data-theme="dark"] .input-date-range-label {
color: var(--color-text-primary-dark, var(--color-neutral-300));
}
.dark .input-date-range,
[data-theme="dark"] .input-date-range {
background-color: var(--color-neutral-700);
border-color: var(--color-neutral-600);
color: var(--color-neutral-300);
}
.dark .input-date-range::placeholder,
[data-theme="dark"] .input-date-range::placeholder {
color: var(--color-neutral-500);
}
.dark .input-date-range:hover:not(:disabled):not(:focus):not(.input-date-range-error),
[data-theme="dark"] .input-date-range:hover:not(:disabled):not(:focus):not(.input-date-range-error) {
border-color: var(--color-neutral-500);
}
.dark .input-date-range:focus,
[data-theme="dark"] .input-date-range:focus {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.15);
}
.dark .input-date-range.input-date-range-error,
[data-theme="dark"] .input-date-range.input-date-range-error {
border-color: #FF5449;
background-color: rgba(255, 84, 73, 0.05);
}
.dark .input-date-range:disabled,
[data-theme="dark"] .input-date-range:disabled {
background-color: var(--color-neutral-800);
border-color: var(--color-neutral-700);
color: var(--color-neutral-500);
}
.dark .input-date-range-icon,
[data-theme="dark"] .input-date-range-icon {
color: var(--color-neutral-400);
}
.dark .input-date-range:focus ~ .input-date-range-icon,
[data-theme="dark"] .input-date-range:focus ~ .input-date-range-icon {
color: var(--color-accent-300);
}
.dark .input-date-range-helper,
[data-theme="dark"] .input-date-range-helper {
color: var(--color-neutral-400);
}
.dark .input-date-range-error-message,
[data-theme="dark"] .input-date-range-error-message {
color: #FF5449;
}
/* Dark mode para dois calendarios */
.dark .flatpickr-calendar .flatpickr-rContainer + .flatpickr-rContainer,
[data-theme="dark"] .flatpickr-calendar .flatpickr-rContainer + .flatpickr-rContainer {
border-left-color: var(--color-neutral-600);
}
.dark .flatpickr-day.inRange,
[data-theme="dark"] .flatpickr-day.inRange {
background: rgba(77, 145, 245, 0.15);
}
.dark .flatpickr-day.inRange:hover,
[data-theme="dark"] .flatpickr-day.inRange:hover {
background: rgba(77, 145, 245, 0.25);
}
/* ============================================
TAMANHOS
============================================ */
/* Small */
.input-date-range-sm {
height: 36px;
min-width: 250px;
padding: 8px 40px 8px 12px;
font-size: 14px;
line-height: 20px;
}
.input-date-range-sm ~ .input-date-range-icon {
right: 12px;
width: 18px;
height: 18px;
}
.input-date-range-sm ~ .input-date-range-icon i {
font-size: 16px;
}
/* Large */
.input-date-range-lg {
height: 52px;
min-width: 320px;
padding: 14px 48px 14px 16px;
font-size: 16px;
line-height: 24px;
}
.input-date-range-lg ~ .input-date-range-icon {
right: 16px;
width: 22px;
height: 22px;
}
.input-date-range-lg ~ .input-date-range-icon i {
font-size: 20px;
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.input-date-range {
font-size: 16px; /* Evita zoom no iOS */
min-width: 200px;
}
/* Em telas pequenas, mostra um calendario apenas */
.flatpickr-calendar.showMonths {
width: auto !important;
}
.flatpickr-innerContainer {
flex-wrap: wrap;
}
.flatpickr-calendar .flatpickr-rContainer + .flatpickr-rContainer {
border-left: none;
border-top: 1px solid var(--color-neutral-300, #E0E0E0);
padding-left: 0;
margin-left: 0;
padding-top: 16px;
margin-top: 16px;
}
}
@media (max-width: 480px) {
.input-date-range {
min-width: 100%;
}
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
.input-date-range {
border: 1px solid #000;
background: #fff;
color: #000;
}
.input-date-range-icon {
display: none;
}
.flatpickr-calendar {
display: none;
}
}
/* ============================================
INTEGRACAO COM FORM-SEARCH (SIDEBAR)
============================================ */
/* Estilos quando dentro do formulario de pesquisa */
.ds-form-search .input-date-range-container {
width: 100%;
}
.ds-form-search .input-date-range {
width: 100%;
min-width: 0;
}
/* Ajusta o grupo dentro do form-group do MDL */
.ds-form-search .mdl-textfield .input-date-range-group,
.form-group .input-date-range-group {
width: 100%;
}
/* === components/input-date.css === */
/**
* Input Date
*
* Campo de data com calendário dropdown.
* Duas variantes: data única e período (range).
* Reutiliza a base do .input para o campo.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Campo: mesma base do input (40px, radius 6px, padding 12px)
* - Ícone calendário: 18x18, à direita
* - Calendário: 300px (data) / 600px (período)
* - Dia: ~39x32px, selected em accent-300
* - Footer: cancelar + aplicar
* - Gap campo→calendário: 4px
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.date-group {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* ============================================================
LABEL
============================================================ */
.date-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
margin: 0 0 var(--spacing-2) 0;
}
.date-label-required::after {
content: '*';
color: var(--text-base-error-secondary);
margin-left: 2px;
}
/* ============================================================
CAMPO (trigger)
============================================================ */
.date-container {
position: relative;
width: 100%;
}
.date-field {
display: flex;
align-items: center;
gap: var(--spacing-3);
width: 100%;
height: 40px;
padding: 0 var(--spacing-3);
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: 40px;
color: var(--text-base-neutral-default);
background-color: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-default);
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--transition-fast),
border-color var(--transition-fast);
}
.date-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
padding: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
caret-color: transparent;
}
.date-input:focus {
caret-color: var(--text-base-neutral-default);
}
.date-input::placeholder {
color: var(--text-base-neutral-subtle);
opacity: 1;
}
.date-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--icon-base-neutral-default);
margin-left: auto;
cursor: pointer;
border: none;
background: none;
padding: 0;
}
.date-icon svg {
width: 18px;
height: 18px;
}
/* ============================================================
ESTADOS DO CAMPO
============================================================ */
.date-field:hover:not(.is-disabled) {
background-color: var(--surface-base-neutral-container-hover);
}
.date-group.is-open .date-field {
border-color: var(--border-base-neutral-strong);
}
.date-field.is-disabled {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--border-base-neutral-subtle);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
.date-field.is-disabled .date-icon {
color: var(--icon-base-neutral-subtle);
}
/* ============================================================
ERRO
============================================================ */
.date-group.has-error .date-field {
border-color: var(--border-base-error-default);
color: var(--text-base-error-default);
}
.date-group.has-error .date-icon {
color: var(--icon-base-error-secondary);
}
.date-helper {
font-family: var(--font-body);
font-size: var(--font-size-p6);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p6);
color: var(--text-base-neutral-default);
margin: var(--spacing-1) 0 0 0;
}
.date-group.has-error .date-helper {
color: var(--text-base-error-default);
}
/* ============================================================
CALENDÁRIO (dropdown)
============================================================ */
.date-calendar {
position: absolute;
top: calc(100% + 4px);
left: 0;
width: 100%;
z-index: var(--z-dropdown, 1000);
border: 1px solid var(--border-overlay-neutral-default);
border-radius: var(--radius-default);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.09);
display: none;
flex-direction: column;
box-sizing: border-box;
}
.date-group.is-open .date-calendar {
display: flex;
}
/* ============================================================
CALENDÁRIO — BODY
============================================================ */
.date-calendar-body {
display: flex;
flex-shrink: 0;
border-radius: var(--radius-default) var(--radius-default) 0 0;
overflow: hidden;
}
.date-calendar-month {
flex: 1;
min-width: 0;
padding: var(--spacing-3);
display: flex;
flex-direction: column;
gap: var(--spacing-3);
background: var(--surface-overlay-neutral-container-default);
box-sizing: border-box;
}
/* ============================================================
CALENDÁRIO — NAVEGAÇÃO
============================================================ */
.date-calendar-nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 24px;
}
.date-calendar-nav-title {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-default);
user-select: none;
}
.date-calendar-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
background: none;
border-radius: var(--radius-default);
color: var(--icon-overlay-neutral-default);
cursor: pointer;
padding: 0;
transition: background var(--transition-fast);
}
.date-calendar-nav-btn:hover {
background: var(--surface-overlay-neutral-container-hover);
}
.date-calendar-nav-btn svg {
width: 12px;
height: 12px;
}
/* ============================================================
CALENDÁRIO — DIAS DA SEMANA
============================================================ */
.date-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
height: 32px;
}
.date-calendar-weekday {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-default);
user-select: none;
}
/* ============================================================
CALENDÁRIO — GRID DE DIAS
============================================================ */
.date-calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 32px;
}
.date-calendar-day {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-overlay-neutral-default);
cursor: pointer;
user-select: none;
border: none;
background: none;
padding: 0;
transition: background var(--transition-fast);
}
.date-calendar-day:hover {
background: var(--surface-overlay-neutral-container-hover);
border-radius: var(--radius-default);
}
/* Dia de outro mês */
.date-calendar-day--other {
color: var(--text-overlay-neutral-subtle);
font-weight: var(--font-weight-regular);
}
/* Dia selecionado */
.date-calendar-day.is-selected {
background: var(--accent-300);
color: var(--text-base-neutral-white);
border-radius: var(--radius-default);
}
/* Range: dia entre início e fim */
.date-calendar-day.is-in-range {
background: var(--surface-overlay-neutral-container-hover);
border-radius: 0;
}
/* Range: dia início ou fim */
.date-calendar-day.is-range-start,
.date-calendar-day.is-range-end {
background: var(--accent-300);
color: var(--text-base-neutral-white);
border-radius: var(--radius-default);
}
/* Hoje */
.date-calendar-day.is-today {
font-weight: var(--font-weight-bold);
}
/* ============================================================
CALENDÁRIO — FOOTER
============================================================ */
.date-calendar-footer {
display: flex;
gap: var(--spacing-3);
padding: var(--spacing-3);
background: var(--surface-overlay-neutral-container-default);
border-top: 1px solid var(--border-overlay-neutral-default);
border-radius: 0 0 var(--radius-default) var(--radius-default);
flex-shrink: 0;
}
.date-calendar-btn {
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
border-radius: var(--radius-default);
cursor: pointer;
border: none;
transition: background var(--transition-fast),
border-color var(--transition-fast);
}
.date-calendar-btn--cancel {
background: transparent;
border: 1px solid var(--border-overlay-neutral-default);
color: var(--text-overlay-neutral-default);
}
.date-calendar-btn--cancel:hover {
background: var(--surface-overlay-neutral-container-hover);
}
.date-calendar-btn--apply {
background: var(--accent-300);
color: var(--text-base-neutral-white);
}
.date-calendar-btn--apply:hover {
opacity: 0.9;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.date-calendar {
display: none !important;
}
}
/* === components/input-icon-picker.css === */
/**
* Design System - Input Icon Picker Component
*
* Campo de seleção de ícones com funcionalidades:
* - Pesquisa/filtro por nome
* - Grid de ícones organizados por categoria
* - Preview do ícone selecionado
* - Integração com sprite SVG do Design System
*
* @version 1.0.0
* @date 2025-12-09
*/
/* ============================================================
INPUT ICON PICKER - CONTAINER PRINCIPAL
============================================================ */
.input-icon-picker {
position: relative;
width: 100%;
box-sizing: border-box;
}
.input-icon-picker-label {
display: block;
margin-bottom: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.input-icon-picker-label-required::after {
content: '*';
color: var(--color-danger);
margin-left: 4px;
}
/* ============================================================
TRIGGER (CAMPO QUE ABRE O PICKER)
============================================================ */
.input-icon-picker-trigger {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 44px;
padding: 8px 16px;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
border: 1px solid var(--color-neutral-400);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
box-sizing: border-box;
}
.input-icon-picker-trigger:hover {
border-color: var(--color-neutral-600);
}
.input-icon-picker-trigger:focus {
outline: none;
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
}
.input-icon-picker-trigger.disabled {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
border-color: var(--color-neutral-300);
}
/* Ícone selecionado no trigger */
.input-icon-picker-preview {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--color-neutral-100);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.input-icon-picker-preview svg {
width: 20px;
height: 20px;
color: var(--color-text-primary);
}
.input-icon-picker-preview--empty {
background: transparent;
border: 1px dashed var(--color-neutral-400);
}
.input-icon-picker-preview--empty svg {
color: var(--color-neutral-400);
}
/* Texto no trigger */
.input-icon-picker-text {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.input-icon-picker-text--placeholder {
color: var(--color-neutral-500);
}
/* Chevron do trigger */
.input-icon-picker-chevron {
width: 20px;
height: 20px;
color: var(--color-neutral-500);
transition: transform var(--transition-fast);
flex-shrink: 0;
}
.input-icon-picker.open .input-icon-picker-chevron {
transform: rotate(180deg);
}
/* ============================================================
DROPDOWN
============================================================ */
.input-icon-picker-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown, 1000);
display: none;
max-height: 420px;
overflow: hidden;
}
.input-icon-picker-dropdown.open {
display: flex;
flex-direction: column;
animation: icon-picker-dropdown-fade 0.2s ease-out;
}
@keyframes icon-picker-dropdown-fade {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
CAMPO DE BUSCA
============================================================ */
.input-icon-picker-search-wrapper {
padding: 12px;
border-bottom: 1px solid var(--color-border-light);
flex-shrink: 0;
}
.input-icon-picker-search {
width: 100%;
height: 40px;
padding: 8px 12px 8px 40px;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-primary);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-md);
transition: all var(--transition-base);
outline: none;
box-sizing: border-box;
}
.input-icon-picker-search::placeholder {
color: var(--color-neutral-500);
}
.input-icon-picker-search:focus {
background-color: var(--color-bg-primary);
border-color: var(--color-accent-300);
box-shadow: 0 0 0 2px rgba(63, 104, 251, 0.1);
}
.input-icon-picker-search-icon {
position: absolute;
top: 50%;
left: 24px;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--color-neutral-500);
pointer-events: none;
}
/* ============================================================
GRID DE ICONES
============================================================ */
.input-icon-picker-content {
flex: 1;
overflow-y: auto;
padding: 8px;
}
/* Categoria */
.input-icon-picker-category {
margin-bottom: 16px;
}
.input-icon-picker-category:last-child {
margin-bottom: 8px;
}
.input-icon-picker-category-header {
padding: 8px 8px 12px 8px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-600);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Grid de ícones */
.input-icon-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
gap: 4px;
}
/* Item de ícone */
.input-icon-picker-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 4px;
min-height: 56px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.input-icon-picker-item:hover {
background: var(--color-neutral-100);
border-color: var(--color-neutral-300);
}
.input-icon-picker-item:focus {
outline: none;
background: var(--color-neutral-100);
border-color: var(--color-accent-300);
box-shadow: 0 0 0 2px rgba(63, 104, 251, 0.1);
}
.input-icon-picker-item.selected {
background: var(--color-accent-100);
border-color: var(--color-accent-300);
}
.input-icon-picker-item.selected .input-icon-picker-item-icon {
color: var(--color-accent-400);
}
/* Ícone no item */
.input-icon-picker-item-icon {
width: 24px;
height: 24px;
color: var(--color-text-primary);
}
/* Nome do ícone no item */
.input-icon-picker-item-name {
font-size: 9px;
color: var(--color-neutral-600);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
line-height: 1.2;
}
/* ============================================================
ESTADO VAZIO
============================================================ */
.input-icon-picker-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 16px;
color: var(--color-neutral-500);
}
.input-icon-picker-empty-icon {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
}
.input-icon-picker-empty-text {
font-size: 14px;
text-align: center;
}
/* ============================================================
FOOTER DO DROPDOWN
============================================================ */
.input-icon-picker-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-top: 1px solid var(--color-border-light);
background: var(--color-neutral-50);
flex-shrink: 0;
}
.input-icon-picker-count {
font-size: 12px;
color: var(--color-neutral-600);
}
.input-icon-picker-clear {
font-size: 12px;
color: var(--color-primary);
background: transparent;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}
.input-icon-picker-clear:hover {
background: var(--color-neutral-200);
}
/* ============================================================
CAMPO HIDDEN
============================================================ */
.input-icon-picker-value {
display: none;
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-icon-picker-trigger,
[data-theme="dark"] .input-icon-picker-trigger {
color: var(--color-neutral-300);
background-color: var(--color-neutral-700);
border-color: var(--color-neutral-600);
}
.dark .input-icon-picker-trigger:hover,
[data-theme="dark"] .input-icon-picker-trigger:hover {
border-color: #525E7F;
}
.dark .input-icon-picker-trigger:focus,
[data-theme="dark"] .input-icon-picker-trigger:focus {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.15);
}
.dark .input-icon-picker-preview,
[data-theme="dark"] .input-icon-picker-preview {
background: var(--color-neutral-600);
}
.dark .input-icon-picker-preview svg,
[data-theme="dark"] .input-icon-picker-preview svg {
color: var(--color-neutral-300);
}
.dark .input-icon-picker-dropdown,
[data-theme="dark"] .input-icon-picker-dropdown {
background: var(--color-neutral-700);
border-color: var(--color-neutral-600);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dark .input-icon-picker-search-wrapper,
[data-theme="dark"] .input-icon-picker-search-wrapper {
border-bottom-color: var(--color-neutral-600);
}
.dark .input-icon-picker-search,
[data-theme="dark"] .input-icon-picker-search {
background-color: var(--color-neutral-800);
border-color: var(--color-neutral-600);
color: var(--color-neutral-300);
}
.dark .input-icon-picker-search:focus,
[data-theme="dark"] .input-icon-picker-search:focus {
background-color: var(--color-neutral-700);
border-color: var(--color-accent-300);
}
.dark .input-icon-picker-category-header,
[data-theme="dark"] .input-icon-picker-category-header {
color: var(--color-neutral-400);
}
.dark .input-icon-picker-item:hover,
[data-theme="dark"] .input-icon-picker-item:hover {
background: var(--color-neutral-600);
border-color: var(--color-neutral-500);
}
.dark .input-icon-picker-item.selected,
[data-theme="dark"] .input-icon-picker-item.selected {
background: rgba(77, 145, 245, 0.15);
border-color: var(--color-accent-300);
}
.dark .input-icon-picker-item-icon,
[data-theme="dark"] .input-icon-picker-item-icon {
color: var(--color-neutral-300);
}
.dark .input-icon-picker-item-name,
[data-theme="dark"] .input-icon-picker-item-name {
color: var(--color-neutral-400);
}
.dark .input-icon-picker-footer,
[data-theme="dark"] .input-icon-picker-footer {
background: var(--color-neutral-800);
border-top-color: var(--color-neutral-600);
}
.dark .input-icon-picker-label,
[data-theme="dark"] .input-icon-picker-label {
color: var(--color-neutral-300);
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-icon-picker-dropdown {
max-height: 350px;
}
.input-icon-picker-grid {
grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
gap: 2px;
}
.input-icon-picker-item {
min-height: 48px;
padding: 6px 2px;
}
.input-icon-picker-item-icon {
width: 20px;
height: 20px;
}
.input-icon-picker-item-name {
font-size: 8px;
}
}
/* ============================================================
VARIANTES
============================================================ */
/* Tamanho pequeno */
.input-icon-picker--sm .input-icon-picker-trigger {
height: 36px;
padding: 4px 12px;
font-size: 14px;
}
.input-icon-picker--sm .input-icon-picker-preview {
width: 24px;
height: 24px;
}
.input-icon-picker--sm .input-icon-picker-preview svg {
width: 16px;
height: 16px;
}
/* Tamanho grande */
.input-icon-picker--lg .input-icon-picker-trigger {
height: 52px;
padding: 10px 20px;
font-size: 18px;
}
.input-icon-picker--lg .input-icon-picker-preview {
width: 36px;
height: 36px;
}
.input-icon-picker--lg .input-icon-picker-preview svg {
width: 24px;
height: 24px;
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-icon-picker-trigger {
border-width: 2px;
}
.input-icon-picker-item.selected {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-icon-picker-dropdown,
.input-icon-picker-chevron {
animation: none;
transition: none;
}
}
/* Focus visible */
.input-icon-picker-trigger:focus-visible,
.input-icon-picker-item:focus-visible,
.input-icon-picker-search:focus-visible {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
}
/* === components/input-search.css === */
/**
* Input Search
*
* Campo de pesquisa com autocomplete via dropdown.
* Reutiliza a base do .input para o campo.
* Usa o dropdown e scroll customizados.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Campo: mesma base do input (40px, radius 6px, padding 12px)
* - Ícone de busca: 18x18, à esquerda
* - Ícone de limpar: 16x16, à direita (visível em ativo/preenchido)
* - Dropdown: gap 4px do campo, mesma largura
* - Variantes dropdown: texto, texto+suporte, avatar+nome+cpf
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.input-search-group {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* ============================================================
LABEL
============================================================ */
.input-search-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
margin: 0 0 var(--spacing-2) 0;
}
.input-search-label-required::after {
content: '*';
color: var(--text-base-error-secondary);
margin-left: 2px;
}
/* ============================================================
CAMPO
============================================================ */
.input-search-container {
position: relative;
width: 100%;
}
.input-search-field {
display: flex;
align-items: center;
gap: var(--spacing-3);
width: 100%;
height: 40px;
padding: 0 var(--spacing-3);
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: 40px;
color: var(--text-base-neutral-default);
background-color: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-default);
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--transition-fast),
border-color var(--transition-fast);
}
/* ============================================================
ÍCONE DE BUSCA
============================================================ */
.input-search-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--icon-base-neutral-default);
}
.input-search-icon svg {
width: 18px;
height: 18px;
}
/* ============================================================
INPUT NATIVO (dentro do field)
============================================================ */
.input-search-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
padding: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
caret-color: transparent;
}
/* Quando tem suporte, input encolhe para hug */
.input-search-group.has-support .input-search-input {
flex: 0 0 auto;
width: auto;
}
.input-search-input::placeholder {
color: var(--text-base-neutral-subtle);
opacity: 1;
}
.input-search-input:focus {
caret-color: var(--text-base-neutral-default);
}
/* Texto de suporte no campo (preenchido) */
.input-search-support {
font-size: var(--font-size-p6);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p6);
color: var(--text-base-neutral-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* ============================================================
ÍCONE DE LIMPAR
============================================================ */
.input-search-clear {
display: none;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--icon-base-neutral-subtle);
cursor: pointer;
border: none;
background: none;
padding: 0;
transition: color var(--transition-fast);
}
.input-search-clear svg {
width: 16px;
height: 16px;
}
.input-search-clear:hover {
color: var(--icon-base-neutral-default);
}
/* Visível quando campo tem valor */
.input-search-group.has-value .input-search-clear {
display: flex;
}
/* ============================================================
ESTADOS
============================================================ */
/* Hover */
.input-search-field:hover:not(.is-disabled) {
background-color: var(--surface-base-neutral-container-hover);
}
/* Focus / Ativo */
.input-search-group.is-active .input-search-field {
background-color: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-strong);
}
/* Disabled */
.input-search-field.is-disabled {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--border-base-neutral-subtle);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
.input-search-field.is-disabled .input-search-icon {
color: var(--icon-base-neutral-subtle);
}
.input-search-field.is-disabled .input-search-input {
cursor: not-allowed;
}
/* ============================================================
ERRO
============================================================ */
.input-search-group.has-error .input-search-field {
border-color: var(--border-base-error-default);
color: var(--text-base-error-default);
}
.input-search-group.has-error .input-search-icon {
color: var(--icon-base-error-secondary);
}
.input-search-group.has-error .input-search-input {
color: var(--text-base-error-default);
}
/* ============================================================
HELPER TEXT
============================================================ */
.input-search-helper {
font-family: var(--font-body);
font-size: var(--font-size-p6);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p6);
color: var(--text-base-neutral-default);
margin: var(--spacing-1) 0 0 0;
}
.input-search-group.has-error .input-search-helper {
color: var(--text-base-error-default);
}
/* ============================================================
DROPDOWN (posicionamento)
============================================================ */
.input-search-container .dropdown-menu {
width: 100%;
top: calc(100% + 4px);
left: 0;
}
/* ============================================================
LOADING (spinner no lugar do X)
============================================================ */
.input-search-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid var(--border-base-neutral-default);
border-top-color: var(--text-base-neutral-default);
border-radius: var(--radius-full);
animation: input-search-spin 0.6s linear infinite;
flex-shrink: 0;
}
@keyframes input-search-spin {
to { transform: rotate(360deg); }
}
.input-search-group.is-loading .input-search-spinner {
display: flex;
}
.input-search-group.is-loading .input-search-clear {
display: none !important;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.input-search-container .dropdown-menu {
display: none !important;
}
}
/* === components/input-tag.css === */
/**
* Design System - Input Tag Component
*
* Campo de seleção de etiquetas/tags com funcionalidades:
* - Pesquisa com autocomplete
* - Sugestões agrupadas (Recentes, Favoritos, Categorias)
* - Tags selecionadas com cores dinâmicas
* - Botão de remover tag
* - Link para adicionar nova tag
* - Suporte a múltiplas seleções
*
* @version 1.0.0
* @date 2025-12-08
*/
/* ============================================================
INPUT TAG - CONTAINER PRINCIPAL
============================================================ */
.input-tag-container {
position: relative;
width: 100%;
box-sizing: border-box;
}
.input-tag-label {
display: block;
margin-bottom: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.input-tag-label-required::after {
content: '*';
color: var(--color-danger);
margin-left: 4px;
}
/* ============================================================
CAMPO DE BUSCA
============================================================ */
.input-tag-search-wrapper {
position: relative;
width: 100%;
}
.input-tag-search {
width: 100%;
height: 44px;
padding: 10px 44px 10px 44px;
font-family: var(--font-body);
font-size: 16px;
font-weight: var(--font-weight-regular);
line-height: 24px;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
border: 1px solid var(--color-neutral-400);
border-radius: var(--radius-md);
transition: all var(--transition-base);
outline: none;
box-sizing: border-box;
}
.input-tag-search::placeholder {
color: var(--color-neutral-500);
}
.input-tag-search:hover:not(:disabled) {
border-color: var(--color-neutral-600);
}
.input-tag-search:focus:not(:disabled) {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
}
.input-tag-search:disabled {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
border-color: var(--color-neutral-300);
}
/* Icone de busca */
.input-tag-search-icon {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-500);
font-size: 18px;
pointer-events: none;
z-index: 1;
}
.input-tag-search:focus ~ .input-tag-search-icon {
color: var(--color-accent-300);
}
/* ============================================================
DROPDOWN DE SUGESTOES
============================================================ */
.input-tag-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
max-height: 400px;
overflow-y: auto;
z-index: var(--z-dropdown, 1000);
display: none;
}
.input-tag-dropdown.open {
display: block;
animation: input-tag-dropdown-fade 0.2s ease-out;
}
@keyframes input-tag-dropdown-fade {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
SECOES DO DROPDOWN
============================================================ */
.input-tag-section {
padding: 12px 0;
border-bottom: 1px solid var(--color-border-light);
}
.input-tag-section:last-child {
border-bottom: none;
}
.input-tag-section-header {
padding: 0 16px 8px 16px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-600);
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--color-neutral-100);
}
/* ============================================================
ITEMS DE TAG NO DROPDOWN
============================================================ */
.input-tag-items {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 16px;
}
.input-tag-item {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
color: #fff;
background-color: var(--color-primary);
border: none;
border-radius: 16px;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.input-tag-item:hover {
filter: brightness(0.9);
transform: translateY(-1px);
}
.input-tag-item:active {
transform: translateY(0);
}
/* Tags de categoria (outline/neutral) */
.input-tag-item--category {
background-color: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-border);
}
.input-tag-item--category:hover {
background-color: var(--color-neutral-100);
border-color: var(--color-neutral-500);
filter: none;
}
/* Tag favorita (com estrela) */
.input-tag-item--favorite::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC857'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* Tag selecionada/disabled no dropdown */
.input-tag-item--selected {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
LINK ADICIONAR NOVA TAG
============================================================ */
.input-tag-add-link {
display: block;
padding: 12px 16px;
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-decoration: none;
border-top: 1px solid var(--color-border-light);
transition: background var(--transition-fast);
}
.input-tag-add-link:hover {
background: var(--color-neutral-100);
text-decoration: none;
}
.input-tag-add-link i {
margin-right: 8px;
}
/* ============================================================
AREA DE TAGS SELECIONADAS
============================================================ */
.input-tag-selected {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
padding: 12px;
min-height: 48px;
background: var(--color-neutral-50);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
}
.input-tag-selected:empty {
display: none;
}
/* Tag selecionada */
.input-tag-selected-item {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 8px 0 12px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
color: #fff;
border-radius: 16px;
white-space: nowrap;
animation: input-tag-item-appear 0.2s ease-out;
}
@keyframes input-tag-item-appear {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Icone da tag */
.input-tag-selected-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
.input-tag-selected-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Texto da tag */
.input-tag-selected-text {
flex: 1;
}
/* Botao remover */
.input-tag-selected-remove {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: inherit;
cursor: pointer;
transition: background var(--transition-fast);
}
.input-tag-selected-remove:hover {
background: rgba(255, 255, 255, 0.4);
}
.input-tag-selected-remove i {
font-size: 14px;
line-height: 1;
}
/* Animacao de remocao */
.input-tag-selected-item.removing {
animation: input-tag-item-remove 0.2s ease-out forwards;
}
@keyframes input-tag-item-remove {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.8);
}
}
/* ============================================================
CAMPO HIDDEN PARA VALORES
============================================================ */
.input-tag-values {
display: none;
}
/* ============================================================
ESTADO EMPTY
============================================================ */
.input-tag-empty {
padding: 32px 16px;
text-align: center;
color: var(--color-neutral-500);
}
.input-tag-empty-icon {
font-size: 32px;
margin-bottom: 8px;
opacity: 0.5;
}
.input-tag-empty-text {
font-size: 14px;
}
/* ============================================================
ESTADO LOADING
============================================================ */
.input-tag-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.input-tag-spinner {
width: 24px;
height: 24px;
border: 2px solid var(--color-neutral-300);
border-top-color: var(--color-accent-300);
border-radius: 50%;
animation: input-tag-spin 0.6s linear infinite;
}
@keyframes input-tag-spin {
to { transform: rotate(360deg); }
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-tag-search,
[data-theme="dark"] .input-tag-search {
color: var(--color-neutral-300);
background-color: var(--color-neutral-700);
border-color: var(--color-neutral-600);
}
.dark .input-tag-search::placeholder,
[data-theme="dark"] .input-tag-search::placeholder {
color: var(--color-neutral-500);
}
.dark .input-tag-search:hover:not(:disabled),
[data-theme="dark"] .input-tag-search:hover:not(:disabled) {
border-color: #525E7F;
}
.dark .input-tag-search:focus:not(:disabled),
[data-theme="dark"] .input-tag-search:focus:not(:disabled) {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.15);
}
.dark .input-tag-dropdown,
[data-theme="dark"] .input-tag-dropdown {
background: var(--color-neutral-700);
border-color: var(--color-neutral-600);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dark .input-tag-section-header,
[data-theme="dark"] .input-tag-section-header {
background: var(--color-neutral-800);
color: var(--color-neutral-400);
}
.dark .input-tag-section,
[data-theme="dark"] .input-tag-section {
border-bottom-color: var(--color-neutral-600);
}
.dark .input-tag-item--category,
[data-theme="dark"] .input-tag-item--category {
color: var(--color-neutral-300);
border-color: var(--color-neutral-600);
}
.dark .input-tag-item--category:hover,
[data-theme="dark"] .input-tag-item--category:hover {
background-color: var(--color-neutral-600);
border-color: var(--color-neutral-500);
}
.dark .input-tag-add-link,
[data-theme="dark"] .input-tag-add-link {
color: #4D91F5;
border-top-color: var(--color-neutral-600);
}
.dark .input-tag-add-link:hover,
[data-theme="dark"] .input-tag-add-link:hover {
background: var(--color-neutral-600);
}
.dark .input-tag-selected,
[data-theme="dark"] .input-tag-selected {
background: var(--color-neutral-800);
border-color: var(--color-neutral-600);
}
.dark .input-tag-label,
[data-theme="dark"] .input-tag-label {
color: var(--color-neutral-300);
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-tag-dropdown {
max-height: 300px;
}
.input-tag-items {
gap: 6px;
}
.input-tag-item {
font-size: 13px;
height: 28px;
padding: 0 10px;
}
.input-tag-selected-item {
font-size: 13px;
height: 28px;
}
}
/* ============================================================
VARIANTES
============================================================ */
/* Tamanho pequeno */
.input-tag-container--sm .input-tag-search {
height: 36px;
padding: 6px 40px;
font-size: 14px;
}
.input-tag-container--sm .input-tag-item {
height: 26px;
font-size: 12px;
padding: 0 10px;
}
.input-tag-container--sm .input-tag-selected-item {
height: 26px;
font-size: 12px;
}
/* Tamanho grande */
.input-tag-container--lg .input-tag-search {
height: 52px;
padding: 14px 52px;
font-size: 18px;
}
.input-tag-container--lg .input-tag-item {
height: 36px;
font-size: 15px;
padding: 0 14px;
}
.input-tag-container--lg .input-tag-selected-item {
height: 36px;
font-size: 15px;
}
/* Full width */
.input-tag-container--full {
width: 100%;
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-tag-search {
border-width: 2px;
}
.input-tag-item,
.input-tag-selected-item {
border: 2px solid currentColor;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-tag-dropdown,
.input-tag-selected-item,
.input-tag-item {
animation: none;
transition: none;
}
}
/* Focus visible */
.input-tag-item:focus-visible,
.input-tag-selected-remove:focus-visible {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
}
/* === components/input.css === */
/**
* Input
*
* Campo de entrada de texto e textarea.
* Dark mode automático via tokens semânticos.
*
* @version 2.0.0
*/
/* ============================================================
INPUT GROUP - WRAPPER
============================================================ */
.input-group {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
min-width: 0;
box-sizing: border-box;
position: static;
}
/* ============================================================
LABEL
============================================================ */
.input-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
margin: 0 0 var(--spacing-2) 0;
}
.input-label-required::after {
content: '*';
color: var(--text-base-error-secondary);
margin-left: 2px;
}
/* ============================================================
INPUT CONTAINER - POSICIONA ÍCONE
============================================================ */
.input-container {
position: relative;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* ============================================================
INPUT FIELD
============================================================ */
.input,
.input-group .input {
width: 100%;
height: 40px;
padding: 0 var(--spacing-3);
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: 40px;
color: var(--text-base-neutral-default);
caret-color: transparent;
background-color: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-default);
transition: background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.input::placeholder {
color: var(--text-base-neutral-subtle);
opacity: 1;
}
/* ============================================================
ESTADOS
============================================================ */
/* Hover */
.input:hover:not(:disabled):not(:focus) {
background-color: var(--surface-base-neutral-container-hover);
}
/* Focus */
.input:focus:not(:disabled) {
border-color: var(--border-base-neutral-strong);
caret-color: var(--text-base-neutral-default);
}
/* Disabled */
.input:disabled {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--border-base-neutral-subtle);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
.input:disabled::placeholder {
color: var(--text-base-neutral-subtle);
}
/* ============================================================
ERRO
============================================================ */
.input-group.has-error .input {
border-color: var(--border-base-error-default);
color: var(--text-base-error-default);
}
.input-group.has-error .input:focus {
border-color: var(--border-base-error-default);
}
.input-group.has-error .input-icon {
color: var(--icon-base-error-secondary);
}
/* ============================================================
ÍCONE
============================================================ */
.input-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-base-neutral-default);
pointer-events: none;
}
.input-icon svg {
width: 18px;
height: 18px;
}
.input-icon-right {
right: var(--spacing-3);
}
.input-has-icon-right {
padding-right: calc(var(--spacing-3) + 18px + var(--spacing-3));
}
/* ============================================================
HELPER TEXT
============================================================ */
.input-helper {
font-family: var(--font-body);
font-size: var(--font-size-p6);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p6);
color: var(--text-base-neutral-default);
margin: var(--spacing-1) 0 0 0;
}
.input-group.has-error .input-helper {
color: var(--text-base-error-default);
}
/* ============================================================
TEXTAREA
============================================================ */
textarea.input {
height: auto;
min-height: 200px;
resize: vertical;
padding: var(--spacing-3);
line-height: var(--line-height-p3);
}
/* ============================================================
READONLY
============================================================ */
.input[readonly] {
cursor: default;
}
/* ============================================================
AUTOFILL OVERRIDE
============================================================ */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--surface-base-neutral-container-default) inset;
-webkit-text-fill-color: var(--text-base-neutral-default);
transition: background-color 5000s ease-in-out 0s;
}
/* === components/instruction-box.css === */
/**
* INSTRUCTION BOX COMPONENT
*
* Caixa de instruções/dicas para orientar o usuário em formulários,
* especialmente na sidebar direita do stepper.
*
* Variantes: info (padrão), success, warning, error
* Suporte: Dark mode, responsividade, acessibilidade WCAG 2.1 AA
*
* Tokens semânticos utilizados (referência Arenito):
* - Surface: --color-success-light, --color-warning-light, --color-danger-light
* - Text: --color-text-primary, --color-success-dark, --color-warning-dark, --color-danger-dark
* - Border: --color-accent-200, --color-success, --color-warning, --color-danger
* - Icon: --color-accent-300, --color-success, --color-warning-icon, --color-danger
*
* @version 1.0.0
* @date 2026-03-13
*/
/* ============================================
BASE STRUCTURE
============================================ */
.instruction-box {
/* Layout */
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
/* Sizing */
width: 100%;
padding: var(--spacing-lg, 20px);
/* Appearance */
border-radius: var(--radius-md, 8px);
border: 1px solid var(--color-accent-200, #7391FC);
/* Arenito futuro: --surface-base-alert-container-info */
background-color: #EEF3FE;
/* Typography */
font-family: var(--font-body, 'Inter', sans-serif);
/* Position — sticky por padrão na sidebar */
position: sticky;
top: var(--spacing-xl, 24px);
}
/* ============================================
ELEMENTOS INTERNOS
============================================ */
/* Título */
.instruction-box__title {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p1, 16px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p1, 26px);
/* Arenito futuro: --text-base-brand-default ou similar info */
color: var(--color-accent-400, #2441A8);
margin: 0 0 var(--spacing-xs, 4px) 0;
}
/* Ícone antes do título (opcional) */
.instruction-box__title i {
margin-right: var(--spacing-xs, 4px);
font-size: 18px;
vertical-align: middle;
/* Arenito futuro: --icon-base-brand-default */
color: var(--color-accent-300, #3F68FB);
}
/* Texto introdutório */
.instruction-box__intro {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
font-weight: var(--font-weight-regular, 400);
/* Arenito futuro: --text-base-neutral-secondary */
color: var(--color-accent-400, #2441A8);
margin: 0 0 var(--spacing-sm, 8px) 0;
}
/* Lista de dicas */
.instruction-box__tips {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
.instruction-box__tips li {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p5, 13px);
line-height: var(--line-height-p5, 22px);
font-weight: var(--font-weight-regular, 400);
color: var(--color-accent-400, #2441A8);
padding-left: 20px;
position: relative;
}
.instruction-box__tips li::before {
content: '\2713'; /* ✓ checkmark */
position: absolute;
left: 0;
/* Arenito futuro: --icon-base-brand-default */
color: var(--color-accent-300, #3F68FB);
font-weight: var(--font-weight-bold, 700);
}
/* Negrito e ênfase dentro de tips */
.instruction-box__tips li strong,
.instruction-box__tips li b {
font-weight: var(--font-weight-medium, 500);
color: inherit;
}
/* Links dentro de tips */
.instruction-box__tips li a {
color: inherit;
font-weight: var(--font-weight-medium, 500);
text-decoration: underline;
text-underline-offset: 2px;
}
.instruction-box__tips li a:hover {
text-decoration: none;
}
/* ============================================
VARIANTE: SUCCESS (Green)
============================================ */
.instruction-box--success {
/* Arenito: --surface-base-alert-container-success */
background-color: var(--color-success-light, #DDE4D2);
border-color: var(--color-success, #519000);
}
.instruction-box--success .instruction-box__title {
color: var(--color-success-dark, #2D470A);
}
.instruction-box--success .instruction-box__title i {
color: var(--color-success, #519000);
}
.instruction-box--success .instruction-box__intro {
color: var(--color-success-dark, #2D470A);
}
.instruction-box--success .instruction-box__tips li {
color: var(--color-success-dark, #2D470A);
}
.instruction-box--success .instruction-box__tips li::before {
color: var(--color-success, #519000);
}
/* ============================================
VARIANTE: WARNING (Yellow)
============================================ */
.instruction-box--warning {
/* Arenito: --surface-base-alert-container-warning */
background-color: var(--color-warning-light, #F0E5C1);
border-color: var(--color-warning, #E9BD00);
}
.instruction-box--warning .instruction-box__title {
color: var(--color-warning-dark, #3B2E02);
}
.instruction-box--warning .instruction-box__title i {
color: var(--color-warning-icon, #9F7C04);
}
.instruction-box--warning .instruction-box__intro {
color: var(--color-warning-dark, #3B2E02);
}
.instruction-box--warning .instruction-box__tips li {
color: var(--color-warning-dark, #3B2E02);
}
.instruction-box--warning .instruction-box__tips li::before {
color: var(--color-warning-icon, #9F7C04);
}
/* ============================================
VARIANTE: ERROR (Red)
============================================ */
.instruction-box--error {
/* Arenito: --surface-base-alert-container-error */
background-color: var(--color-danger-light, #F9E1E1);
border-color: var(--color-danger, #C90A0A);
}
.instruction-box--error .instruction-box__title {
color: var(--color-danger-dark, #970707);
}
.instruction-box--error .instruction-box__title i {
color: var(--color-danger, #C90A0A);
}
.instruction-box--error .instruction-box__intro {
color: var(--color-danger-dark, #970707);
}
.instruction-box--error .instruction-box__tips li {
color: var(--color-danger-dark, #970707);
}
.instruction-box--error .instruction-box__tips li::before {
color: var(--color-danger, #C90A0A);
}
/* ============================================
VARIANTE: COMPACT (menos padding)
============================================ */
.instruction-box--compact {
padding: var(--spacing-md, 16px);
gap: var(--spacing-xs, 4px);
}
.instruction-box--compact .instruction-box__title {
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
}
.instruction-box--compact .instruction-box__tips li {
font-size: var(--font-size-p6, 12px);
line-height: var(--line-height-p6, 22px);
}
/* ============================================
MODIFICADOR: Sem sticky
============================================ */
.instruction-box--static {
position: static;
}
/* ============================================
DARK MODE
============================================ */
/* Info (padrão) Dark */
.dark .instruction-box,
[data-theme="dark"] .instruction-box {
background-color: rgba(77, 145, 245, 0.1);
border-color: rgba(77, 145, 245, 0.3);
}
.dark .instruction-box__title,
[data-theme="dark"] .instruction-box__title {
color: #B3D4FF;
}
.dark .instruction-box__title i,
[data-theme="dark"] .instruction-box__title i {
color: #4D91F5;
}
.dark .instruction-box__intro,
[data-theme="dark"] .instruction-box__intro {
color: #8CAFFA;
}
.dark .instruction-box__tips li,
[data-theme="dark"] .instruction-box__tips li {
color: #8CAFFA;
}
.dark .instruction-box__tips li::before,
[data-theme="dark"] .instruction-box__tips li::before {
color: #4D91F5;
}
.dark .instruction-box__tips li strong,
.dark .instruction-box__tips li b,
[data-theme="dark"] .instruction-box__tips li strong,
[data-theme="dark"] .instruction-box__tips li b {
color: #B3D4FF;
}
/* Success Dark */
.dark .instruction-box--success,
[data-theme="dark"] .instruction-box--success {
background-color: var(--color-success-light, #1B2C2B);
border-color: var(--color-success, #519000);
}
.dark .instruction-box--success .instruction-box__title,
[data-theme="dark"] .instruction-box--success .instruction-box__title {
color: var(--color-success-dark, #B3D684);
}
.dark .instruction-box--success .instruction-box__title i,
[data-theme="dark"] .instruction-box--success .instruction-box__title i {
color: var(--color-success, #519000);
}
.dark .instruction-box--success .instruction-box__intro,
.dark .instruction-box--success .instruction-box__tips li,
[data-theme="dark"] .instruction-box--success .instruction-box__intro,
[data-theme="dark"] .instruction-box--success .instruction-box__tips li {
color: var(--color-success-dark, #B3D684);
}
.dark .instruction-box--success .instruction-box__tips li::before,
[data-theme="dark"] .instruction-box--success .instruction-box__tips li::before {
color: var(--color-success, #519000);
}
/* Warning Dark */
.dark .instruction-box--warning,
[data-theme="dark"] .instruction-box--warning {
background-color: var(--color-warning-light, #242622);
border-color: var(--color-warning, #E9BD00);
}
.dark .instruction-box--warning .instruction-box__title,
[data-theme="dark"] .instruction-box--warning .instruction-box__title {
color: var(--color-warning-dark, #EFD371);
}
.dark .instruction-box--warning .instruction-box__title i,
[data-theme="dark"] .instruction-box--warning .instruction-box__title i {
color: var(--color-warning, #E9BD00);
}
.dark .instruction-box--warning .instruction-box__intro,
.dark .instruction-box--warning .instruction-box__tips li,
[data-theme="dark"] .instruction-box--warning .instruction-box__intro,
[data-theme="dark"] .instruction-box--warning .instruction-box__tips li {
color: var(--color-warning-dark, #EFD371);
}
.dark .instruction-box--warning .instruction-box__tips li::before,
[data-theme="dark"] .instruction-box--warning .instruction-box__tips li::before {
color: var(--color-warning, #E9BD00);
}
/* Error Dark */
.dark .instruction-box--error,
[data-theme="dark"] .instruction-box--error {
background-color: rgba(204, 39, 39, 0.1);
border-color: var(--color-danger, #CC2727);
}
.dark .instruction-box--error .instruction-box__title,
[data-theme="dark"] .instruction-box--error .instruction-box__title {
color: var(--color-danger-dark, #F49999);
}
.dark .instruction-box--error .instruction-box__title i,
[data-theme="dark"] .instruction-box--error .instruction-box__title i {
color: var(--color-danger, #CC2727);
}
.dark .instruction-box--error .instruction-box__intro,
.dark .instruction-box--error .instruction-box__tips li,
[data-theme="dark"] .instruction-box--error .instruction-box__intro,
[data-theme="dark"] .instruction-box--error .instruction-box__tips li {
color: var(--color-danger-dark, #F49999);
}
.dark .instruction-box--error .instruction-box__tips li::before,
[data-theme="dark"] .instruction-box--error .instruction-box__tips li::before {
color: var(--color-danger, #CC2727);
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.instruction-box {
position: static;
padding: var(--spacing-md, 16px);
}
.instruction-box__title {
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
}
.instruction-box__intro {
font-size: var(--font-size-p5, 12px);
line-height: var(--line-height-p5, 22px);
}
.instruction-box__tips li {
font-size: var(--font-size-p6, 12px);
line-height: var(--line-height-p6, 22px);
}
}
/* ============================================
ACESSIBILIDADE
============================================ */
/* High Contrast Mode */
@media (prefers-contrast: high) {
.instruction-box {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.instruction-box {
transition: none;
}
}
/* ============================================
PRINT
============================================ */
@media print {
.instruction-box {
position: static;
border: 1px solid #000;
background: #fff !important;
color: #000 !important;
page-break-inside: avoid;
}
.instruction-box__title,
.instruction-box__intro,
.instruction-box__tips li {
color: #000 !important;
}
.instruction-box__tips li::before {
color: #000 !important;
}
}
/* === components/journey-map.css === */
/**
* Journey Map
*
* Mapa de jornada com N estágios em colunas coloridas e itens com ícones.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.journey-map {
width: 100%;
}
.journey-map__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Grid de estágios */
.journey-map__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
position: relative;
}
/* Estágio individual */
.journey-map__stage {
border-top: 4px solid var(--stage-color, var(--border-base-neutral-default));
background: var(--surface-base-neutral-container-default);
border-radius: 0 0 8px 8px;
overflow: hidden;
}
/* Header do estágio */
.journey-map__stage-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: color-mix(in srgb, var(--stage-color, #999) 8%, transparent);
}
.journey-map__stage-label {
font-size: 14px;
font-weight: 600;
color: var(--text-base-neutral-default);
}
.journey-map__stage-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 9999px;
font-size: 12px;
font-weight: 600;
background: color-mix(in srgb, var(--stage-color, #999) 15%, transparent);
color: var(--text-base-neutral-default);
}
/* Lista de itens */
.journey-map__stage-items {
padding: 8px 16px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Item individual */
.journey-map__item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
transition: background-color 0.15s;
}
.journey-map__item:hover {
background: var(--surface-base-neutral-container-emphasis);
}
/* Ícone do item */
.journey-map__item-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--stage-color, var(--text-base-neutral-subtle));
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.journey-map__item-icon svg {
width: 20px;
height: 20px;
}
/* Texto do item */
.journey-map__item-text {
flex: 1;
min-width: 0;
}
.journey-map__item-label {
font-size: 13px;
font-weight: 500;
color: var(--text-base-neutral-default);
line-height: 1.4;
}
.journey-map__item-description {
font-size: 12px;
color: var(--text-base-neutral-subtle);
line-height: 1.4;
margin-top: 2px;
}
/* Conector entre estágios */
.journey-map__connector {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-base-neutral-subtle);
font-size: 20px;
padding: 0 4px;
align-self: center;
}
/* Estado vazio */
.journey-map__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .journey-map__stage {
background: var(--surface-base-neutral-container-default);
}
.dark .journey-map__stage-header {
background: color-mix(in srgb, var(--stage-color, #999) 12%, transparent);
}
.dark .journey-map__stage-count {
background: color-mix(in srgb, var(--stage-color, #999) 20%, transparent);
}
.dark .journey-map__item:hover {
background: var(--surface-base-neutral-container-emphasis);
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.journey-map__grid {
grid-template-columns: 1fr;
}
/* Conectores viram verticais */
.journey-map__connector {
transform: rotate(90deg);
padding: 4px 0;
}
}
/* === components/kanban-board.css === */
/**
* Kanban Board
*
* Board drag-and-drop com colunas, cards com progress bars, labels coloridas,
* avatares e status borders. Suporte a toggle de view, drag-over state e
* scroll horizontal de colunas.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.kanban-board {
width: 100%;
}
.kanban-board__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* ========================================================================
TOOLBAR
======================================================================== */
.kanban-board__toolbar {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 12px;
}
/* View toggle group */
.kanban-board__view-toggle {
display: flex;
gap: 4px;
background: var(--surface-base-neutral-container-default);
border-radius: 8px;
padding: 4px;
}
.kanban-board__view-toggle-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
font-family: var(--font-body);
cursor: pointer;
background: transparent;
color: var(--text-base-neutral-secondary);
transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.kanban-board__view-toggle-btn--active {
background: var(--surface-base-neutral-page-default);
color: var(--text-base-neutral-default);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* ========================================================================
COLUMNS
======================================================================== */
.kanban-board__columns {
display: flex;
gap: 16px;
overflow-x: auto;
min-height: 400px;
padding-bottom: 8px;
}
.kanban-board__columns::-webkit-scrollbar {
height: 6px;
}
.kanban-board__columns::-webkit-scrollbar-track {
background: var(--surface-base-neutral-container-default);
border-radius: 3px;
}
.kanban-board__columns::-webkit-scrollbar-thumb {
background: var(--border-base-neutral-default);
border-radius: 3px;
}
/* Single column */
.kanban-board__column {
flex: 0 0 280px;
background: var(--surface-base-neutral-container-default);
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
}
/* Column header */
.kanban-board__column-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.kanban-board__column-title {
font-size: 14px;
font-weight: 600;
color: var(--text-base-neutral-default);
}
.kanban-board__column-count {
background: var(--border-base-neutral-default);
border-radius: 9999px;
font-size: 12px;
padding: 2px 8px;
font-weight: 500;
color: var(--text-base-neutral-secondary);
}
/* Column body */
.kanban-board__column-body {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-height: 100px;
border-radius: 6px;
transition: background-color 0.15s, outline-color 0.15s;
}
/* Drop target highlight */
.kanban-board__column-body--drag-over {
outline: 2px dashed var(--accent-300);
background: rgba(63, 104, 251, 0.06);
}
/* ========================================================================
CARD
======================================================================== */
.kanban-board__card {
background: var(--surface-base-neutral-page-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 6px;
padding: 12px;
cursor: grab;
transition: box-shadow 0.15s, transform 0.15s;
}
.kanban-board__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Dragging state */
.kanban-board__card--dragging {
opacity: 0.5;
transform: scale(1.02);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* Minimal view variant */
.kanban-board__card--minimal {
padding: 8px;
}
/* Card title */
.kanban-board__card-title {
font-size: 14px;
font-weight: 500;
color: var(--text-base-neutral-default);
margin: 0 0 4px;
}
/* Card description */
.kanban-board__card-description {
font-size: 12px;
color: var(--text-base-neutral-secondary);
margin: 0 0 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Progress bar container */
.kanban-board__card-progress {
height: 4px;
border-radius: 2px;
background: var(--neutral-200);
margin-bottom: 8px;
overflow: hidden;
}
/* Progress bar fill */
.kanban-board__card-progress-bar {
height: 100%;
border-radius: 2px;
transition: width 0.3s;
}
/* Labels */
.kanban-board__card-labels {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
}
.kanban-board__card-label {
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
}
/* Card footer */
.kanban-board__card-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: var(--text-base-neutral-secondary);
}
/* Avatar */
.kanban-board__card-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-300);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
}
/* ========================================================================
STATUS BORDER (colored left border)
======================================================================== */
.kanban-board__card-status-border {
border-left: 3px solid transparent;
}
.kanban-board__card-status-border--backlog {
border-color: var(--neutral-500);
}
.kanban-board__card-status-border--doing {
border-color: var(--accent-300);
}
.kanban-board__card-status-border--review {
border-color: #F59E0B;
}
.kanban-board__card-status-border--done {
border-color: #10B981;
}
/* ========================================================================
EMPTY STATES
======================================================================== */
.kanban-board__empty-column {
text-align: center;
color: var(--text-base-neutral-secondary);
padding: 24px;
font-size: 13px;
}
.kanban-board__empty {
text-align: center;
color: var(--text-base-neutral-secondary);
padding: 48px;
font-size: 14px;
border: 2px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .kanban-board__view-toggle {
background: var(--surface-base-neutral-container-default);
}
.dark .kanban-board__view-toggle-btn--active {
background: var(--surface-base-neutral-page-default);
color: var(--text-base-neutral-default);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
}
.dark .kanban-board__column {
background: var(--surface-base-neutral-container-default);
}
.dark .kanban-board__column-count {
background: var(--border-base-neutral-default);
color: var(--text-base-neutral-secondary);
}
.dark .kanban-board__card {
background: var(--surface-base-neutral-page-default);
border-color: var(--border-base-neutral-default);
}
.dark .kanban-board__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
.dark .kanban-board__card--dragging {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.dark .kanban-board__column-body--drag-over {
outline-color: var(--accent-300);
background: rgba(63, 104, 251, 0.1);
}
.dark .kanban-board__card-progress {
background: var(--neutral-700);
}
.dark .kanban-board__columns::-webkit-scrollbar-track {
background: var(--surface-base-neutral-container-default);
}
.dark .kanban-board__columns::-webkit-scrollbar-thumb {
background: var(--border-base-neutral-default);
}
/* === components/list-group.css === */
/**
* List Group
* Listas estilizadas com suporte a items ativos, desabilitados, clicáveis,
* cores contextuais, badges, ícones e layout horizontal.
* @layer components
* @since 0.2.0
*/
/* ============================================
CONTAINER
============================================ */
.list-group {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
border-radius: var(--radius-md, 8px);
overflow: hidden;
}
/* ============================================
ITEM
============================================ */
.list-group__item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--text-base-neutral-default);
background: var(--surface-base-neutral-container-default, #fff);
border: 1px solid var(--border-base-neutral-default, #e5e7eb);
text-decoration: none;
}
/* Borda compartilhada entre items */
.list-group__item + .list-group__item {
margin-top: -1px;
}
/* Primeiro e último item: radius */
.list-group__item:first-child {
border-top-left-radius: var(--radius-md, 8px);
border-top-right-radius: var(--radius-md, 8px);
}
.list-group__item:last-child {
border-bottom-left-radius: var(--radius-md, 8px);
border-bottom-right-radius: var(--radius-md, 8px);
}
/* ============================================
ITEM CLICÁVEL (ACTION)
============================================ */
.list-group__item--action {
cursor: pointer;
transition: background var(--transition-fast, 150ms) ease,
color var(--transition-fast, 150ms) ease;
}
.list-group__item--action:hover {
background: var(--surface-base-neutral-container-hover, #f9fafb);
z-index: 1;
position: relative;
}
.list-group__item--action:active {
background: var(--surface-base-neutral-container-emphasis, #f3f4f6);
}
/* ============================================
ESTADOS
============================================ */
/* Ativo */
.list-group__item--active {
background: var(--surface-base-brand-container-low, #e8eeff);
color: var(--text-base-brand-default, #3E68FB);
border-color: var(--border-base-brand-default, #3E68FB);
z-index: 2;
position: relative;
font-weight: var(--font-weight-medium, 500);
}
/* Desabilitado */
.list-group__item--disabled,
.list-group__item:disabled {
color: var(--text-base-neutral-subtle, #9ca3af);
background: var(--surface-base-neutral-container-default, #fff);
pointer-events: none;
opacity: 0.6;
}
/* ============================================
CORES CONTEXTUAIS
============================================ */
.list-group__item--success {
color: var(--text-base-success-default, #166534);
background: var(--surface-base-success-container-low, #f0fdf4);
}
.list-group__item--success.list-group__item--action:hover {
background: var(--surface-base-success-container-medium, #dcfce7);
}
.list-group__item--warning {
color: var(--text-base-warning-default, #854d0e);
background: var(--surface-base-warning-container-low, #fefce8);
}
.list-group__item--warning.list-group__item--action:hover {
background: var(--surface-base-warning-container-medium, #fef9c3);
}
.list-group__item--danger {
color: var(--text-base-error-default, #991b1b);
background: var(--surface-base-error-container-low, #fef2f2);
}
.list-group__item--danger.list-group__item--action:hover {
background: var(--surface-base-error-container-medium, #fee2e2);
}
.list-group__item--info {
color: var(--text-base-brand-default, #1e40af);
background: var(--surface-base-brand-container-low, #eff6ff);
}
.list-group__item--info.list-group__item--action:hover {
background: var(--surface-base-brand-container-medium, #dbeafe);
}
/* ============================================
CONTEÚDO RICO
============================================ */
/* Ícone à esquerda */
.list-group__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--icon-base-neutral-default, #7A839F);
}
.list-group__item--active .list-group__icon {
color: var(--text-base-brand-default, #3E68FB);
}
/* Conteúdo principal (ocupa espaço restante) */
.list-group__content {
flex: 1;
min-width: 0;
}
.list-group__title {
font-weight: var(--font-weight-medium, 500);
margin: 0;
}
.list-group__text {
font-size: 13px;
color: var(--text-base-neutral-secondary, #6b7280);
margin: 2px 0 0;
}
/* Badge à direita */
.list-group__item .badge {
flex-shrink: 0;
margin-left: auto;
}
/* ============================================
FLUSH (SEM BORDAS EXTERNAS)
============================================ */
.list-group--flush {
border-radius: 0;
}
.list-group--flush > .list-group__item {
border-left: 0;
border-right: 0;
border-radius: 0;
}
.list-group--flush > .list-group__item:first-child {
border-top: 0;
}
.list-group--flush > .list-group__item:last-child {
border-bottom: 0;
}
/* ============================================
HORIZONTAL
============================================ */
.list-group--horizontal {
flex-direction: row;
}
.list-group--horizontal > .list-group__item {
border-radius: 0;
}
.list-group--horizontal > .list-group__item + .list-group__item {
margin-top: 0;
margin-left: -1px;
}
.list-group--horizontal > .list-group__item:first-child {
border-top-left-radius: var(--radius-md, 8px);
border-bottom-left-radius: var(--radius-md, 8px);
border-top-right-radius: 0;
}
.list-group--horizontal > .list-group__item:last-child {
border-top-right-radius: var(--radius-md, 8px);
border-bottom-right-radius: var(--radius-md, 8px);
border-bottom-left-radius: 0;
}
/* ============================================
BORDERED (SEPARADOR MAIS SUTIL)
============================================ */
.list-group--bordered > .list-group__item {
border-left: 3px solid transparent;
}
.list-group--bordered > .list-group__item--active {
border-left-color: var(--border-base-brand-default, #3E68FB);
}
.list-group--bordered > .list-group__item--success {
border-left-color: var(--border-base-success-default, #16a34a);
}
.list-group--bordered > .list-group__item--warning {
border-left-color: var(--border-base-warning-default, #ca8a04);
}
.list-group--bordered > .list-group__item--danger {
border-left-color: var(--border-base-error-default, #dc2626);
}
/* ============================================
DARK MODE
============================================ */
.dark .list-group__item,
[data-theme="dark"] .list-group__item {
background: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-default);
border-color: var(--border-base-neutral-default);
}
.dark .list-group__item--action:hover,
[data-theme="dark"] .list-group__item--action:hover {
background: var(--surface-base-neutral-container-hover);
}
.dark .list-group__item--active,
[data-theme="dark"] .list-group__item--active {
background: var(--surface-base-brand-container-low);
color: var(--text-base-brand-default);
border-color: var(--border-base-brand-default);
}
.dark .list-group__item--disabled,
[data-theme="dark"] .list-group__item--disabled {
color: var(--text-base-neutral-subtle);
}
.dark .list-group__text,
[data-theme="dark"] .list-group__text {
color: var(--text-base-neutral-secondary);
}
.dark .list-group__icon,
[data-theme="dark"] .list-group__icon {
color: var(--icon-base-neutral-default);
}
.dark .list-group__item--success,
[data-theme="dark"] .list-group__item--success {
background: var(--surface-base-success-container-low);
color: var(--text-base-success-default);
}
.dark .list-group__item--warning,
[data-theme="dark"] .list-group__item--warning {
background: var(--surface-base-warning-container-low);
color: var(--text-base-warning-default);
}
.dark .list-group__item--danger,
[data-theme="dark"] .list-group__item--danger {
background: var(--surface-base-error-container-low);
color: var(--text-base-error-default);
}
.dark .list-group__item--info,
[data-theme="dark"] .list-group__item--info {
background: var(--surface-base-brand-container-low);
color: var(--text-base-brand-default);
}
/* === components/listar.css === */
/**
* Design System - Componente Listar (Layout de Listagem)
*
* Layout de listagem com sidebar esquerdo contendo as abas de navegação
* (Pesquisar/Listagem) e área principal de conteúdo à direita.
*
* IMPORTANTE: Usa variáveis CSS do Design System para suporte a light/dark mode.
* As cores são definidas em variables.css e colors.css
*
* Estrutura:
* .listing-layout
* ├── .listing-layout__sidebar (Abas: Pesquisar/Listagem)
* ├── .listing-layout__content (Área principal)
* │ ├── .listing-layout__breadcrumb
* │ └── .listing-layout__main
* └── .listing-layout__footer (Botões de ação)
*
* NOTAS SOBRE !important:
* Este componente usa !important em alguns seletores para sobrescrever estilos
* de CSS legado. Os conflitos identificados são:
* - tabs.css: Define border-bottom em .tabs-button que afeta buttons genéricos
* - breadcrumb.css: Define estilos de lista que conflitam com o novo layout
* - emergency-overrides.css: Aplica estilos via [class*="panel-"] e [class*="card-"]
* - styleAgrodefesa.css: Estilos legados em formulários e containers
*
* TODO: Remover !important quando os CSS legados forem refatorados
*
* @version 1.1.0
* @date 2025-12-11
* @figma https://www.figma.com/design/sXxwnANEp9rOHdnThR3jan/UI-KIT?node-id=5706-1573
*/
/* ============================================================
LAYOUT PRINCIPAL - Container Fixo
============================================================ */
/* Remove scrollbar do body quando layout de listagem está ativo */
body:has(.listing-layout) {
overflow: hidden;
}
.listing-layout {
position: fixed;
top: 64px; /* Altura do header principal */
left: 0;
right: 0;
bottom: 0;
background: transparent;
overflow: hidden;
display: flex;
flex-direction: row;
}
/* ============================================================
SIDEBAR ESQUERDO - Abas de Navegação
============================================================ */
.listing-layout__sidebar {
position: relative;
width: 290px;
min-width: 290px;
height: 100%;
background: var(--color-bg-tertiary, #ECEDF2);
border-right: 1px solid var(--color-border, #CED3E2);
padding: 24px 20px 0px 72px; /* padding-bottom: 0 conforme Figma */
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden; /* Sem scrollbar - texto quebra linha se necessário */
box-sizing: border-box;
}
/* Dark mode - Sidebar */
/* Sidebar deve ter cor mais escura que o content para criar hierarquia visual */
/* Sidebar: #10141D (--color-bg-primary) | Content: #141926 | Inputs: #1D2333 */
.dark .listing-layout__sidebar,
.dark-mode .listing-layout__sidebar,
[data-theme="dark"] .listing-layout__sidebar {
background: var(--color-bg-primary, #10141D);
border-right-color: var(--color-border, #2A2F41);
}
/* Nota: Sidebar sem scrollbar - textos longos quebram linha */
/* ============================================================
ABAS/TABS DO SIDEBAR
============================================================
Conforme Figma (sidebar_light.css e sidebar_dark.css):
Light Mode:
- Tab inativo: bg #ECEDF2 (mesmo do sidebar), texto #394360, chevron hidden
- Tab ativo: bg rgba(206, 211, 226, 0.4), texto #12151F, chevron visible #12151F
Dark Mode:
- Tab inativo: bg #10141D (mesmo do sidebar), texto #BFC3CF, chevron hidden
- Tab ativo: bg #1D2333, texto #E0E2EB, chevron visible #E0E2EB
============================================================ */
/* Aumenta especificidade para evitar conflito com tabs.css (.tabs-button) */
.listing-layout .listing-layout__sidebar .listing-layout__tab,
.listing-layout__tab[type="button"],
button.listing-layout__tab {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: background var(--transition-fast, 150ms ease-in-out);
background: var(--color-bg-tertiary, #ECEDF2); /* Mesma cor do sidebar - Light */
border: none;
border-bottom: none;
width: 100%;
text-align: left;
}
.listing-layout__tab:hover {
background: rgba(206, 211, 226, 0.5);
}
/* Tab ativo - Light Mode */
.listing-layout__tab--active {
background: rgba(206, 211, 226, 0.4) !important;
}
.listing-layout__tab--active:hover {
background: rgba(206, 211, 226, 0.5) !important;
}
/* Dark mode - Tabs
Especificidade aumentada para sobrescrever o seletor base:
.listing-layout .listing-layout__sidebar .listing-layout__tab */
.dark .listing-layout .listing-layout__sidebar .listing-layout__tab,
.dark .listing-layout__tab[type="button"],
.dark button.listing-layout__tab,
.dark-mode .listing-layout .listing-layout__sidebar .listing-layout__tab,
[data-theme="dark"] .listing-layout .listing-layout__sidebar .listing-layout__tab {
background: var(--color-bg-primary, #10141D); /* Mesma cor do sidebar - Dark */
}
.dark .listing-layout__tab:hover,
.dark-mode .listing-layout__tab:hover,
[data-theme="dark"] .listing-layout__tab:hover {
background: rgba(29, 35, 51, 0.7); /* #1D2333 com transparência */
}
/* Tab ativo - Dark Mode */
.dark .listing-layout__tab--active,
.dark-mode .listing-layout__tab--active,
[data-theme="dark"] .listing-layout__tab--active {
background: var(--color-neutral-700, #1D2333) !important;
}
.dark .listing-layout__tab--active:hover,
.dark-mode .listing-layout__tab--active:hover,
[data-theme="dark"] .listing-layout__tab--active:hover {
background: var(--color-neutral-700, #1D2333) !important;
}
/* Texto das tabs - Light Mode */
.listing-layout__tab-text {
flex: 1;
font-family: var(--font-body, 'Inter'), sans-serif;
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-secondary, #394360); /* Tab inativo - Light */
margin: 0;
word-wrap: break-word; /* Permite quebra de linha em textos longos */
overflow-wrap: break-word;
}
/* Tab ativo - texto mais escuro - Light Mode */
.listing-layout__tab--active .listing-layout__tab-text {
color: var(--color-text-primary, #12151F);
}
/* Dark mode - Texto das tabs */
.dark .listing-layout__tab-text,
.dark-mode .listing-layout__tab-text,
[data-theme="dark"] .listing-layout__tab-text {
color: var(--color-neutral-400, #BFC3CF); /* Tab inativo - Dark conforme Figma */
}
.dark .listing-layout__tab--active .listing-layout__tab-text,
.dark-mode .listing-layout__tab--active .listing-layout__tab-text,
[data-theme="dark"] .listing-layout__tab--active .listing-layout__tab-text {
color: var(--color-neutral-300, #E0E2EB); /* Tab ativo - Dark conforme Figma */
}
/* ============================================================
CHEVRON - Ícone de seta na tab
============================================================
Conforme Figma:
- Tab inativo: chevron hidden (display: none)
- Tab ativo: chevron visible
O chevron deve aparecer APENAS no item ativo.
============================================================ */
.listing-layout__tab-icon {
width: 12px;
height: 12px;
display: none; /* Hidden por padrão (tab inativo) */
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Chevron visível apenas no tab ativo */
.listing-layout__tab--active .listing-layout__tab-icon {
display: flex;
}
.listing-layout__tab-icon svg {
width: 8px;
height: 12px;
color: var(--color-text-primary, #12151F); /* Light mode - usado pelo currentColor */
}
/* Dark mode - Ícone chevron */
.dark .listing-layout__tab-icon svg,
.dark-mode .listing-layout__tab-icon svg,
[data-theme="dark"] .listing-layout__tab-icon svg {
color: var(--color-neutral-300, #E0E2EB); /* Dark mode conforme Figma */
}
/* ============================================================
ÁREA DE CONTEÚDO PRINCIPAL
============================================================ */
.listing-layout__content {
flex: 1;
display: flex;
flex-direction: column;
background: var(--white, #FFFFFF);
overflow: hidden;
position: relative;
}
/* Dark mode - Content */
/* Cor mais clara que o body para criar "card" visual conforme Figma */
.dark .listing-layout__content,
.dark-mode .listing-layout__content,
[data-theme="dark"] .listing-layout__content {
background: var(--color-neutral-750, #141926);
}
/* ============================================================
BREADCRUMB
============================================================ */
.listing-layout__breadcrumb {
padding: 16px 72px 8px 56px; /* Reduzido para otimizar espaço vertical */
background: transparent;
border-bottom: none;
flex-shrink: 0;
box-sizing: border-box;
}
/* Dark mode - Breadcrumb */
.dark .listing-layout__breadcrumb,
.dark-mode .listing-layout__breadcrumb,
[data-theme="dark"] .listing-layout__breadcrumb {
border-bottom: none;
}
/*
* Breadcrumb visibility overrides
* !important necessário: breadcrumb.css e styleAgrodefesa.css podem esconder elementos
* com display:none ou visibility:hidden em determinados contextos
*/
.listing-layout__breadcrumb,
.listing-layout__breadcrumb .noprint,
.listing-layout__breadcrumb .breadcrumb-list {
display: block !important;
visibility: visible !important;
}
/*
* Breadcrumb container width
* !important necessário: .mdl-cell do Material Design Lite define width em grid
*/
.listing-layout__breadcrumb .noprint,
.listing-layout__breadcrumb .agr-menu-fixo,
.listing-layout__breadcrumb nav,
.listing-layout__breadcrumb .mdl-cell {
display: block !important;
width: 100% !important;
}
/*
* Breadcrumb list flexbox
* !important necessário: breadcrumb.css define display:block e flex-direction diferentes
*/
.listing-layout__breadcrumb-list,
.listing-layout__breadcrumb .breadcrumb-list {
display: flex !important;
flex-wrap: nowrap !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
white-space: nowrap !important;
}
/*
* Breadcrumb items inline
* !important necessário: breadcrumb.css define display:block em li
*/
.listing-layout__breadcrumb-list li,
.listing-layout__breadcrumb .breadcrumb-list li,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/*
* Links e spans inline
* !important necessário: styleAgrodefesa.css pode definir display:block
*/
.listing-layout__breadcrumb-list li a,
.listing-layout__breadcrumb-list li span,
.listing-layout__breadcrumb .breadcrumb-list li a,
.listing-layout__breadcrumb .breadcrumb-list li span,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item a,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item span {
display: inline !important;
white-space: nowrap !important;
}
/*
* Chevron separador entre itens
* !important necessário: breadcrumb.css usa background-image para ícone SVG
*/
.listing-layout__breadcrumb-list li:not(:last-child)::after,
.listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item:not(:last-child)::after {
content: '>' !important;
background-image: none !important;
width: auto !important;
height: auto !important;
color: var(--color-text-muted, #7A839F) !important;
font-size: 14px !important;
margin-left: 8px !important;
opacity: 1 !important;
}
/*
* Breadcrumb link/span typography
* !important necessário: estilos globais de links podem sobrescrever cor
*/
.listing-layout__breadcrumb-list li a,
.listing-layout__breadcrumb-list li span,
.listing-layout__breadcrumb .breadcrumb-list li a,
.listing-layout__breadcrumb .breadcrumb-list li span {
font-family: var(--font-body, 'Inter'), sans-serif;
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-muted, #7A839F) !important;
text-decoration: none !important;
transition: color var(--transition-fast, 150ms ease-in-out);
}
.listing-layout__breadcrumb-list li a:hover,
.listing-layout__breadcrumb .breadcrumb-list li a:hover {
color: var(--color-text-secondary, #394360) !important;
text-decoration: none !important;
}
.listing-layout__breadcrumb-list li:last-child a,
.listing-layout__breadcrumb-list li:last-child span,
.listing-layout__breadcrumb .breadcrumb-list li:last-child a,
.listing-layout__breadcrumb .breadcrumb-list li:last-child span {
color: var(--color-text-primary, #12151F) !important;
font-weight: var(--font-weight-semibold, 600);
}
/* Dark mode - Breadcrumb text */
.dark .listing-layout__breadcrumb-list li:not(:last-child)::after,
.dark-mode .listing-layout__breadcrumb-list li:not(:last-child)::after,
[data-theme="dark"] .listing-layout__breadcrumb-list li:not(:last-child)::after,
.dark .listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after {
color: var(--color-neutral-500, #6B7280);
}
.dark .listing-layout__breadcrumb-list li a,
.dark .listing-layout__breadcrumb-list li span,
.dark-mode .listing-layout__breadcrumb-list li a,
.dark-mode .listing-layout__breadcrumb-list li span,
[data-theme="dark"] .listing-layout__breadcrumb-list li a,
[data-theme="dark"] .listing-layout__breadcrumb-list li span,
.dark .listing-layout__breadcrumb .breadcrumb-list li a,
.dark .listing-layout__breadcrumb .breadcrumb-list li span,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li a,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li span,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li a,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li span {
color: var(--color-neutral-500, #6B7280) !important;
}
.dark .listing-layout__breadcrumb-list li a:hover,
.dark-mode .listing-layout__breadcrumb-list li a:hover,
[data-theme="dark"] .listing-layout__breadcrumb-list li a:hover,
.dark .listing-layout__breadcrumb .breadcrumb-list li a:hover,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li a:hover,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li a:hover {
color: var(--color-neutral-400, #9CA3AF) !important;
}
.dark .listing-layout__breadcrumb-list li:last-child a,
.dark .listing-layout__breadcrumb-list li:last-child span,
.dark-mode .listing-layout__breadcrumb-list li:last-child a,
.dark-mode .listing-layout__breadcrumb-list li:last-child span,
[data-theme="dark"] .listing-layout__breadcrumb-list li:last-child a,
[data-theme="dark"] .listing-layout__breadcrumb-list li:last-child span,
.dark .listing-layout__breadcrumb .breadcrumb-list li:last-child a,
.dark .listing-layout__breadcrumb .breadcrumb-list li:last-child span,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li:last-child a,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li:last-child span,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li:last-child a,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li:last-child span {
color: var(--color-text-primary, #E0E2EB) !important;
}
/* ============================================================
ÁREA PRINCIPAL (Conteúdo Scrollável)
============================================================ */
.listing-layout__main {
flex: 1;
padding: 16px 72px 16px 56px; /* Reduzido de 24px para 16px - otimiza espaço vertical */
overflow-y: auto;
overflow-x: hidden;
}
/* Scrollbar personalizado para main */
.listing-layout__main::-webkit-scrollbar {
width: 4px;
}
.listing-layout__main::-webkit-scrollbar-track {
background: transparent;
}
.listing-layout__main::-webkit-scrollbar-thumb {
background: var(--color-border, #CED3E2);
border-radius: 2px;
}
.listing-layout__main::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-500, #7A839F);
}
/* Dark mode - Scrollbar main */
.dark .listing-layout__main::-webkit-scrollbar-thumb,
.dark-mode .listing-layout__main::-webkit-scrollbar-thumb,
[data-theme="dark"] .listing-layout__main::-webkit-scrollbar-thumb {
background: var(--color-neutral-700, #1D2333);
}
/* ============================================================
PAINÉIS DE CONTEÚDO (Pesquisar/Listagem)
============================================================ */
.listing-layout__panel {
display: none;
width: 100%;
height: 100%;
overflow-x: hidden; /* Evita scroll horizontal de elementos internos */
}
.listing-layout__panel--active {
display: block;
}
/* ============================================================
FORMULÁRIO DE PESQUISA
============================================================ */
.listing-layout__search-form {
display: flex;
flex-direction: column;
height: 100%;
}
.listing-layout__search-title {
font-family: var(--font-heading, 'Space Grotesk'), sans-serif;
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-h2, 20px);
line-height: var(--line-height-h2, 30px);
color: var(--color-text-primary, #12151F);
margin: 0 0 24px 0;
text-transform: capitalize;
}
/* Dark mode - Search title */
.dark .listing-layout__search-title,
.dark-mode .listing-layout__search-title,
[data-theme="dark"] .listing-layout__search-title {
color: var(--color-text-primary, #E0E2EB);
}
.listing-layout__search-fields {
flex: 1;
overflow-y: auto;
overflow-x: hidden; /* Evita scrollbar horizontal */
}
/* ============================================================
FOOTER - Botões de Ação
============================================================ */
.listing-layout__footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 20px;
padding: 16px 72px;
background: transparent; /* Herda a cor do elemento pai (content area) */
border-top: none; /* Removido - sem separador visual */
flex-shrink: 0;
/* Fixa o footer na parte inferior quando dentro de container scrollável */
position: sticky;
bottom: 0;
z-index: 10;
}
/* Dark mode - Footer */
.dark .listing-layout__footer,
.dark-mode .listing-layout__footer,
[data-theme="dark"] .listing-layout__footer {
background: transparent; /* Herda a cor do elemento pai (content area) */
border-top: none;
}
/* Botões do footer */
.listing-layout__btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 10px;
gap: 10px;
width: 180px;
height: 40px;
border-radius: 6px;
font-family: var(--font-body, 'Inter'), sans-serif;
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease-in-out);
border: none;
}
/* Botão outline (Limpar) */
.listing-layout__btn--outline {
background: transparent;
border: 1px solid var(--color-border, #CED3E2);
color: var(--color-text-primary, #12151F);
}
.listing-layout__btn--outline:hover {
background: var(--color-bg-tertiary, #ECEDF2);
border-color: var(--color-neutral-500, #7A839F);
}
/* Dark mode - Botão outline */
.dark .listing-layout__btn--outline,
.dark-mode .listing-layout__btn--outline,
[data-theme="dark"] .listing-layout__btn--outline {
border-color: var(--color-border, #2A2F41);
color: var(--color-text-primary, #E0E2EB);
}
.dark .listing-layout__btn--outline:hover,
.dark-mode .listing-layout__btn--outline:hover,
[data-theme="dark"] .listing-layout__btn--outline:hover {
background: var(--color-neutral-700, #1D2333);
border-color: var(--color-neutral-600, #2A2F41);
}
/* Botão primary (Pesquisar) */
.listing-layout__btn--primary {
background: var(--color-primary-hover, #C90A0A);
color: var(--red-100, #F9E1E1);
}
.listing-layout__btn--primary:hover {
background: var(--color-primary, #970707);
}
/* Dark mode - Botão primary */
.dark .listing-layout__btn--primary,
.dark-mode .listing-layout__btn--primary,
[data-theme="dark"] .listing-layout__btn--primary {
background: var(--color-primary-hover, #C90A0A);
color: var(--red-100, #F9E1E1);
}
.dark .listing-layout__btn--primary:hover,
.dark-mode .listing-layout__btn--primary:hover,
[data-theme="dark"] .listing-layout__btn--primary:hover {
background: var(--color-primary, #970707);
}
/* ============================================================
TABS EXTRAS (Dashboard) - Indicadores, Geo, etc.
============================================================ */
.listing-layout__tab-divider {
width: 100%;
height: 1px;
background: var(--color-border, #CED3E2);
margin: 8px 0;
}
/* Dark mode - Divider */
.dark .listing-layout__tab-divider,
.dark-mode .listing-layout__tab-divider,
[data-theme="dark"] .listing-layout__tab-divider {
background: var(--color-border, #2A2F41);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
.listing-layout__sidebar {
width: 240px;
min-width: 240px;
padding-left: 40px;
}
.listing-layout__main {
padding: 24px 40px 24px 32px;
}
.listing-layout__breadcrumb {
padding: 24px 40px 12px 32px;
}
.listing-layout__footer {
padding: 24px 40px;
}
}
@media (max-width: 1024px) {
.listing-layout__sidebar {
width: 200px;
min-width: 200px;
padding: 16px 12px 16px 24px;
}
.listing-layout__footer {
padding: 20px 24px;
}
.listing-layout__btn {
width: 140px;
}
}
@media (max-width: 768px) {
.listing-layout {
flex-direction: column;
}
.listing-layout__sidebar {
width: 100%;
min-width: 100%;
height: auto;
flex-direction: row;
padding: 12px 16px;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
border-right: none;
border-bottom: 1px solid var(--color-border, #CED3E2);
}
.listing-layout__tab {
white-space: nowrap;
flex-shrink: 0;
}
.listing-layout__content {
flex: 1;
overflow: auto;
}
.listing-layout__main {
padding: 16px;
}
.listing-layout__breadcrumb {
padding: 16px;
}
.listing-layout__footer {
flex-direction: column;
gap: 12px;
padding: 16px;
}
.listing-layout__btn {
width: 100%;
}
}
/* ============================================================
COMPATIBILIDADE COM CLASSES EXISTENTES
Nota: Alguns !important são necessários para sobrescrever estilos legados
de styleAgrodefesa.css e outros arquivos CSS antigos.
============================================================ */
/* Esconde tabs antigas quando novo layout está ativo */
/* !important necessário: tabs antigas podem ter display definido inline */
.listing-layout .listing-tabs-container,
.listing-layout .listing-tabs,
body .listing-layout .listing-tabs-container,
body .listing-layout .listing-tabs {
display: none !important;
}
/* Ajusta conteúdo existente */
.listing-layout #caixaListar,
body .listing-layout #caixaListar {
width: 100%;
}
/* !important necessário: .caixaConteudo tem margin definido em styleAgrodefesa.css */
.listing-layout .caixaConteudo,
body .listing-layout .caixaConteudo {
margin-block-start: 0 !important;
}
.listing-layout #boxPesquisar,
body .listing-layout #boxPesquisar {
padding: 0;
}
/* !important necessário: #formPesquisar pode ter padding de estilos legados */
/* Exceção: quando tem .ds-form-search, usa o padding do design system */
.listing-layout #formPesquisar:not(.ds-form-search),
body .listing-layout #formPesquisar:not(.ds-form-search) {
padding: 0 !important;
}
.listing-layout #divEdicao,
body .listing-layout #divEdicao {
background: transparent;
border-radius: 0;
margin: 0;
}
/* !important necessário: .search-box-size tem background em estilos legados */
.listing-layout .search-box-size,
body .listing-layout .search-box-size {
background: transparent !important;
}
/* === components/loader-clock.css === */
/**
* Loader Clock - Design System
*
* Componente de loading com relogio animado.
* Adaptavel para dark/light mode usando variaveis CSS do Design System.
*
* Estrutura:
* - Relogio analogico com ponteiros de hora, minuto e segundo
* - Animacao contínua dos ponteiros
* - Titulo principal e subtitulo
*
* @version 1.0.0
* @date 2026-02-03
*/
/* ==========================================================================
Loader Clock - Variables
========================================================================== */
.loader-clock {
--loader-clock-primary: var(--color-primary, #970707);
--loader-clock-bg: var(--color-bg-tertiary, #212121);
--loader-clock-face: var(--color-primary, #e53935);
--loader-clock-shadow: rgba(0, 0, 0, 0.3);
--loader-clock-number: var(--color-bg-tertiary, #212121);
--loader-clock-pointer-sec: var(--color-primary, #e53935);
--loader-clock-pointer-min: #fff;
--loader-clock-pointer-hour: var(--color-bg-tertiary, #212121);
/* Animation times */
--loader-clock-sec-time: 10s;
--loader-clock-min-time: 60s;
--loader-clock-hour-time: 20s;
}
/* ==========================================================================
Loader Clock - Container Principal
========================================================================== */
.loader-clock {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-lg, 20px);
padding: var(--spacing-2xl, 32px);
text-align: center;
}
/* Variante centralizada em tela cheia */
.loader-clock--fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-bg-secondary, #F6F6F9);
z-index: var(--z-modal, 1050);
}
/* Variante para uso dentro de modal/backdrop */
.loader-clock--modal {
padding: var(--spacing-3xl, 40px) var(--spacing-2xl, 32px);
background: var(--color-bg-primary, #FFFFFF);
border-radius: var(--radius-lg, 12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
}
/* ==========================================================================
Loader Clock - Clock Container
========================================================================== */
.loader-clock__clock {
height: 120px;
width: 120px;
min-height: 120px;
min-width: 120px;
padding: 5px;
background-color: var(--loader-clock-bg);
box-shadow: 3px 0 6px 1px var(--loader-clock-shadow);
border-radius: 50%;
position: relative;
}
/* Tamanhos */
.loader-clock--sm .loader-clock__clock {
height: 80px;
width: 80px;
min-height: 80px;
min-width: 80px;
padding: 3px;
}
.loader-clock--lg .loader-clock__clock {
height: 160px;
width: 160px;
min-height: 160px;
min-width: 160px;
padding: 7px;
}
/* ==========================================================================
Loader Clock - Clock Face (Centro)
========================================================================== */
.loader-clock__face {
height: 100%;
width: 100%;
background-color: var(--loader-clock-face);
border-radius: 50%;
box-shadow: 1px 0 3px 0 var(--loader-clock-shadow);
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-template-columns: repeat(7, 1fr);
grid-template-areas:
". . . n12 . . ."
". . n11 . n1 . ."
". n10 . . . n2 ."
"n9 . . . . . n3"
". n8 . . . n4 ."
". . n7 . n5 . ."
". . . n6 . . .";
}
/* ==========================================================================
Loader Clock - Numbers
========================================================================== */
.loader-clock__number {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 8px;
font-weight: var(--font-weight-medium, 500);
color: var(--loader-clock-number);
line-height: 1;
align-self: center;
justify-self: center;
}
.loader-clock--sm .loader-clock__number {
font-size: 6px;
}
.loader-clock--lg .loader-clock__number {
font-size: 10px;
}
.loader-clock__number--1 { grid-area: n1; justify-self: end; align-self: start; }
.loader-clock__number--2 { grid-area: n2; justify-self: end; align-self: start; }
.loader-clock__number--3 { grid-area: n3; justify-self: start; }
.loader-clock__number--4 { grid-area: n4; justify-self: end; align-self: end; }
.loader-clock__number--5 { grid-area: n5; justify-self: end; align-self: end; }
.loader-clock__number--6 { grid-area: n6; align-self: start; }
.loader-clock__number--7 { grid-area: n7; justify-self: start; align-self: end; }
.loader-clock__number--8 { grid-area: n8; justify-self: start; align-self: end; }
.loader-clock__number--9 { grid-area: n9; justify-self: end; }
.loader-clock__number--10 { grid-area: n10; justify-self: start; align-self: start; }
.loader-clock__number--11 { grid-area: n11; justify-self: start; align-self: start; }
.loader-clock__number--12 { grid-area: n12; align-self: end; }
/* ==========================================================================
Loader Clock - Pointers Container (Top Layer)
========================================================================== */
.loader-clock__pointers {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
Loader Clock - Hour Pointer Container
========================================================================== */
.loader-clock__hours-container {
position: relative;
height: 100%;
width: 100%;
z-index: 1;
filter: drop-shadow(1px 0 3px var(--loader-clock-shadow));
}
.loader-clock__hours-pointer {
height: 100%;
width: 100%;
border-radius: 50%;
background-color: var(--loader-clock-pointer-hour);
clip-path: polygon(
-10% -10%,
32% -10%,
50% 50%,
68% -10%,
110% -10%,
110% 110%,
-10% 110%
);
animation: loader-clock-rotate var(--loader-clock-hour-time) infinite linear;
}
/* ==========================================================================
Loader Clock - Sec/Min Container (Centro)
========================================================================== */
.loader-clock__sec-min-container {
height: 12px;
width: 12px;
background-color: var(--loader-clock-bg);
box-shadow: 0 1px 4px 1px var(--loader-clock-shadow);
border-radius: 50%;
position: absolute;
z-index: 2;
}
.loader-clock--sm .loader-clock__sec-min-container {
height: 8px;
width: 8px;
}
.loader-clock--lg .loader-clock__sec-min-container {
height: 16px;
width: 16px;
}
/* ==========================================================================
Loader Clock - Second Pointer
========================================================================== */
.loader-clock__sec-container {
height: 100%;
width: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
animation: loader-clock-sec var(--loader-clock-sec-time) infinite linear;
}
.loader-clock__sec-pointer {
position: absolute;
bottom: -16px;
height: 55px;
width: 1px;
border-radius: 1px;
background-color: var(--loader-clock-pointer-sec);
box-shadow: 0 1px 4px 1px var(--loader-clock-shadow);
z-index: 0;
}
.loader-clock--sm .loader-clock__sec-pointer {
height: 35px;
bottom: -12px;
}
.loader-clock--lg .loader-clock__sec-pointer {
height: 70px;
bottom: -20px;
}
/* Centro do ponteiro de segundos */
.loader-clock__sec-container::before {
content: "";
position: absolute;
height: 2px;
width: 2px;
border-radius: 50%;
background-color: var(--loader-clock-bg);
z-index: 2;
}
.loader-clock__sec-container::after {
content: "";
position: absolute;
height: 5px;
width: 5px;
border: 1px solid var(--loader-clock-pointer-sec);
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
.loader-clock--sm .loader-clock__sec-container::after {
height: 4px;
width: 4px;
}
.loader-clock--lg .loader-clock__sec-container::after {
height: 6px;
width: 6px;
}
/* ==========================================================================
Loader Clock - Minute Pointer
========================================================================== */
.loader-clock__min-container {
height: 100%;
width: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
animation: loader-clock-rotate var(--loader-clock-min-time) infinite linear;
}
.loader-clock__min-pointer {
position: absolute;
bottom: -6px;
height: 40px;
width: 1px;
border-radius: 1px;
background-color: var(--loader-clock-pointer-min);
box-shadow: 1px 1px 3px 1px var(--loader-clock-shadow);
z-index: 0;
}
.loader-clock--sm .loader-clock__min-pointer {
height: 25px;
bottom: -4px;
}
.loader-clock--lg .loader-clock__min-pointer {
height: 50px;
bottom: -8px;
}
/* ==========================================================================
Loader Clock - Animations
========================================================================== */
@keyframes loader-clock-sec {
0% {
transform: rotateZ(0deg);
}
90% {
transform: rotateZ(360deg);
}
100% {
transform: rotateZ(0deg);
}
}
@keyframes loader-clock-rotate {
to {
transform: rotateZ(360deg);
}
}
/* ==========================================================================
Loader Clock - Content (Textos)
========================================================================== */
.loader-clock__content {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 4px);
}
.loader-clock__title {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p1, 16px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p1, 26px);
color: var(--color-text-primary, #12151F);
margin: 0;
}
.loader-clock__subtitle {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-secondary, #394360);
margin: 0;
}
/* ==========================================================================
Loader Clock - Variantes de Cor
========================================================================== */
.loader-clock--success {
--loader-clock-face: var(--color-success, #519000);
--loader-clock-pointer-sec: var(--color-success, #519000);
}
.loader-clock--info {
--loader-clock-face: var(--color-accent-300, #3E68FB);
--loader-clock-pointer-sec: var(--color-accent-300, #3E68FB);
}
.loader-clock--warning {
--loader-clock-face: var(--color-warning, #E9BD00);
--loader-clock-pointer-sec: var(--color-warning, #E9BD00);
}
.loader-clock--danger {
--loader-clock-face: var(--color-danger, #C90A0A);
--loader-clock-pointer-sec: var(--color-danger, #C90A0A);
}
/* ==========================================================================
Dark Mode - Classe explicita
========================================================================== */
html.dark .loader-clock,
html.dark-mode .loader-clock,
html[data-theme="dark"] .loader-clock,
body.dark .loader-clock,
body.dark-mode .loader-clock,
body[data-theme="dark"] .loader-clock,
.dark .loader-clock,
.dark-mode .loader-clock,
[data-theme="dark"] .loader-clock {
--loader-clock-bg: var(--color-bg-tertiary, #1D2333);
--loader-clock-number: #fff;
--loader-clock-pointer-hour: var(--color-bg-tertiary, #1D2333);
}
html.dark .loader-clock--fullscreen,
html.dark-mode .loader-clock--fullscreen,
html[data-theme="dark"] .loader-clock--fullscreen,
body.dark .loader-clock--fullscreen,
body.dark-mode .loader-clock--fullscreen,
body[data-theme="dark"] .loader-clock--fullscreen,
.dark .loader-clock--fullscreen,
.dark-mode .loader-clock--fullscreen,
[data-theme="dark"] .loader-clock--fullscreen {
background: var(--color-bg-primary, #10141D);
}
html.dark .loader-clock--modal,
html.dark-mode .loader-clock--modal,
html[data-theme="dark"] .loader-clock--modal,
body.dark .loader-clock--modal,
body.dark-mode .loader-clock--modal,
body[data-theme="dark"] .loader-clock--modal,
.dark .loader-clock--modal,
.dark-mode .loader-clock--modal,
[data-theme="dark"] .loader-clock--modal {
background: var(--color-bg-secondary, #1D2333);
}
html.dark .loader-clock__title,
html.dark-mode .loader-clock__title,
html[data-theme="dark"] .loader-clock__title,
body.dark .loader-clock__title,
body.dark-mode .loader-clock__title,
body[data-theme="dark"] .loader-clock__title,
.dark .loader-clock__title,
.dark-mode .loader-clock__title,
[data-theme="dark"] .loader-clock__title {
color: var(--color-text-primary, #E0E2EB);
}
html.dark .loader-clock__subtitle,
html.dark-mode .loader-clock__subtitle,
html[data-theme="dark"] .loader-clock__subtitle,
body.dark .loader-clock__subtitle,
body.dark-mode .loader-clock__subtitle,
body[data-theme="dark"] .loader-clock__subtitle,
.dark .loader-clock__subtitle,
.dark-mode .loader-clock__subtitle,
[data-theme="dark"] .loader-clock__subtitle {
color: var(--color-text-secondary, #A2A8B9);
}
/* ==========================================================================
Dark Mode - Media Query
========================================================================== */
@media (prefers-color-scheme: dark) {
.loader-clock {
--loader-clock-bg: var(--color-bg-tertiary, #1D2333);
--loader-clock-number: #fff;
--loader-clock-pointer-hour: var(--color-bg-tertiary, #1D2333);
}
.loader-clock--fullscreen {
background: var(--color-bg-primary, #10141D);
}
.loader-clock__title {
color: var(--color-text-primary, #E0E2EB);
}
.loader-clock__subtitle {
color: var(--color-text-secondary, #A2A8B9);
}
}
/* ==========================================================================
Loader Clock - Fade Animations
========================================================================== */
.loader-clock--fade-in {
animation: loader-clock-fade-in 0.2s ease-out;
}
.loader-clock--fade-out {
animation: loader-clock-fade-out 0.2s ease-out forwards;
}
@keyframes loader-clock-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes loader-clock-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* ==========================================================================
Loader Clock - States
========================================================================== */
.loader-clock[data-loading="true"] {
display: flex;
}
.loader-clock[data-loading="false"] {
display: none;
}
/* === components/loader.css === */
/**
* Loader - Design System
*
* Componente de loading com spinner circular e icone central.
* Adaptavel para dark/light mode usando variaveis CSS do Design System.
*
* Estrutura:
* - Circulo com icone no centro
* - Arco de progresso animado (cor primaria do sistema)
* - Titulo principal e subtitulo
*
* @version 1.0.0
* @date 2026-02-02
* @figma Baseado no design exportado do Figma
*/
/* ==========================================================================
Loader - Container Principal
========================================================================== */
.loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-lg, 20px);
padding: var(--spacing-2xl, 32px);
text-align: center;
}
/* Variante centralizada em tela cheia */
.loader--fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-bg-secondary, #F6F6F9);
z-index: var(--z-modal, 1050);
}
/* Variante para uso dentro de modal/backdrop */
.loader--modal {
padding: var(--spacing-3xl, 40px) var(--spacing-2xl, 32px);
background: var(--color-bg-primary, #FFFFFF);
border-radius: var(--radius-lg, 12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
/* Centralização garantida */
margin: auto;
position: relative;
}
/* ==========================================================================
Loader - Spinner Container
========================================================================== */
.loader__spinner {
position: relative;
width: 96px;
height: 96px;
}
/* Tamanhos */
.loader--sm .loader__spinner {
width: 64px;
height: 64px;
}
.loader--lg .loader__spinner {
width: 128px;
height: 128px;
}
/* ==========================================================================
Loader - Ring (Circulo de fundo + Arco animado)
========================================================================== */
.loader__ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.loader__ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
/* Track - Circulo de fundo */
.loader__ring-track {
fill: none;
stroke: var(--color-border, #CED3E2);
stroke-width: 4;
}
/* Arc - Arco de progresso animado */
.loader__ring-arc {
fill: none;
stroke: var(--color-primary, #970707);
stroke-width: 4;
stroke-linecap: round;
/* Circunferencia = 2 * PI * raio (44) = ~276.46 */
stroke-dasharray: 276.46;
/* Mostra apenas 25% do circulo */
stroke-dashoffset: 207.35;
animation: loader-spin 1.2s linear infinite;
transform-origin: center;
}
@keyframes loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ==========================================================================
Loader - Icon Container
========================================================================== */
.loader__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-tertiary, #ECEDF2);
border-radius: var(--radius-full, 9999px);
}
/* Tamanhos do icone */
.loader--sm .loader__icon {
width: 40px;
height: 40px;
}
.loader--lg .loader__icon {
width: 72px;
height: 72px;
}
/* Icone interno */
.loader__icon svg,
.loader__icon i,
.loader__icon img {
width: 24px;
height: 24px;
color: var(--color-text-secondary, #394360);
}
.loader--sm .loader__icon svg,
.loader--sm .loader__icon i,
.loader--sm .loader__icon img {
width: 18px;
height: 18px;
}
.loader--lg .loader__icon svg,
.loader--lg .loader__icon i,
.loader--lg .loader__icon img {
width: 32px;
height: 32px;
}
/* ==========================================================================
Loader - Hourglass Animated Icon
========================================================================== */
.loader__hourglass {
width: 24px;
height: 24px;
position: relative;
}
.loader--sm .loader__hourglass {
width: 18px;
height: 18px;
}
.loader--lg .loader__hourglass {
width: 32px;
height: 32px;
}
/* Estrutura da ampulheta */
.loader__hourglass-frame {
fill: none;
stroke: var(--color-text-secondary, #394360);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Areia - cor */
.loader__hourglass-sand {
fill: var(--color-primary, #970707);
}
/* Areia superior - diminui */
.loader__hourglass-sand-top {
transform-origin: center top;
animation: loader-sand-top 1.2s linear infinite;
}
@keyframes loader-sand-top {
0% {
transform: scaleY(1);
opacity: 1;
}
90% {
transform: scaleY(0);
opacity: 1;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
/* Areia inferior - aumenta */
.loader__hourglass-sand-bottom {
transform-origin: center bottom;
animation: loader-sand-bottom 1.2s linear infinite;
}
@keyframes loader-sand-bottom {
0% {
transform: scaleY(0);
}
10% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
/* Stream de areia caindo */
.loader__hourglass-stream {
fill: none;
stroke: var(--color-primary, #970707);
animation: loader-sand-stream 1.2s linear infinite;
}
@keyframes loader-sand-stream {
0%, 5% {
opacity: 0;
}
10% {
opacity: 1;
}
85% {
opacity: 1;
}
90%, 100% {
opacity: 0;
}
}
/* Variantes de cor para ampulheta */
.loader--success .loader__hourglass-sand {
fill: var(--color-success, #519000);
}
.loader--success .loader__hourglass-stream {
stroke: var(--color-success, #519000);
}
.loader--info .loader__hourglass-sand {
fill: var(--color-accent-300, #3E68FB);
}
.loader--info .loader__hourglass-stream {
stroke: var(--color-accent-300, #3E68FB);
}
.loader--warning .loader__hourglass-sand {
fill: var(--color-warning, #E9BD00);
}
.loader--warning .loader__hourglass-stream {
stroke: var(--color-warning, #E9BD00);
}
.loader--danger .loader__hourglass-sand {
fill: var(--color-danger, #C90A0A);
}
.loader--danger .loader__hourglass-stream {
stroke: var(--color-danger, #C90A0A);
}
/* ==========================================================================
Loader - Content (Textos)
========================================================================== */
.loader__content {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 4px);
}
/* Titulo principal */
.loader__title {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p1, 16px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p1, 26px);
color: var(--color-text-primary, #12151F);
margin: 0;
}
/* Subtitulo */
.loader__subtitle {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-secondary, #394360);
margin: 0;
}
/* ==========================================================================
Loader - Variantes de Cor
========================================================================== */
/* Success (Verde) */
.loader--success .loader__ring-arc {
stroke: var(--color-success, #519000);
}
/* Info (Azul) */
.loader--info .loader__ring-arc {
stroke: var(--color-accent-300, #3E68FB);
}
/* Warning (Amarelo) */
.loader--warning .loader__ring-arc {
stroke: var(--color-warning, #E9BD00);
}
/* Danger (Vermelho) */
.loader--danger .loader__ring-arc {
stroke: var(--color-danger, #C90A0A);
}
/* ==========================================================================
Loader - Progress Mode (Arco com porcentagem fixa)
========================================================================== */
.loader--progress .loader__ring-arc {
animation: none;
transition: stroke-dashoffset 0.3s ease;
}
/* ==========================================================================
Dark Mode - Classe explicita
========================================================================== */
html.dark .loader--fullscreen,
html.dark-mode .loader--fullscreen,
html[data-theme="dark"] .loader--fullscreen,
body.dark .loader--fullscreen,
body.dark-mode .loader--fullscreen,
body[data-theme="dark"] .loader--fullscreen,
.dark .loader--fullscreen,
.dark-mode .loader--fullscreen,
[data-theme="dark"] .loader--fullscreen {
background: var(--color-bg-primary, #10141D);
}
/* Loader Modal - Dark */
html.dark .loader--modal,
html.dark-mode .loader--modal,
html[data-theme="dark"] .loader--modal,
body.dark .loader--modal,
body.dark-mode .loader--modal,
body[data-theme="dark"] .loader--modal,
.dark .loader--modal,
.dark-mode .loader--modal,
[data-theme="dark"] .loader--modal {
background: var(--color-bg-secondary, #1D2333);
}
/* Ring Track - Dark */
html.dark .loader__ring-track,
html.dark-mode .loader__ring-track,
html[data-theme="dark"] .loader__ring-track,
body.dark .loader__ring-track,
body.dark-mode .loader__ring-track,
body[data-theme="dark"] .loader__ring-track,
.dark .loader__ring-track,
.dark-mode .loader__ring-track,
[data-theme="dark"] .loader__ring-track {
stroke: var(--color-border, #2A2F41);
}
/* Icon Container - Dark */
html.dark .loader__icon,
html.dark-mode .loader__icon,
html[data-theme="dark"] .loader__icon,
body.dark .loader__icon,
body.dark-mode .loader__icon,
body[data-theme="dark"] .loader__icon,
.dark .loader__icon,
.dark-mode .loader__icon,
[data-theme="dark"] .loader__icon {
background: var(--color-bg-tertiary, #1D2333);
}
/* Icon - Dark */
html.dark .loader__icon svg,
html.dark .loader__icon i,
html.dark-mode .loader__icon svg,
html.dark-mode .loader__icon i,
html[data-theme="dark"] .loader__icon svg,
html[data-theme="dark"] .loader__icon i,
body.dark .loader__icon svg,
body.dark .loader__icon i,
body.dark-mode .loader__icon svg,
body.dark-mode .loader__icon i,
body[data-theme="dark"] .loader__icon svg,
body[data-theme="dark"] .loader__icon i,
.dark .loader__icon svg,
.dark .loader__icon i,
.dark-mode .loader__icon svg,
.dark-mode .loader__icon i,
[data-theme="dark"] .loader__icon svg,
[data-theme="dark"] .loader__icon i {
color: var(--color-text-secondary, #A2A8B9);
}
/* Title - Dark */
html.dark .loader__title,
html.dark-mode .loader__title,
html[data-theme="dark"] .loader__title,
body.dark .loader__title,
body.dark-mode .loader__title,
body[data-theme="dark"] .loader__title,
.dark .loader__title,
.dark-mode .loader__title,
[data-theme="dark"] .loader__title {
color: var(--color-text-primary, #E0E2EB);
}
/* Subtitle - Dark */
html.dark .loader__subtitle,
html.dark-mode .loader__subtitle,
html[data-theme="dark"] .loader__subtitle,
body.dark .loader__subtitle,
body.dark-mode .loader__subtitle,
body[data-theme="dark"] .loader__subtitle,
.dark .loader__subtitle,
.dark-mode .loader__subtitle,
[data-theme="dark"] .loader__subtitle {
color: var(--color-text-secondary, #A2A8B9);
}
/* ==========================================================================
Dark Mode - Media Query (prefers-color-scheme)
========================================================================== */
@media (prefers-color-scheme: dark) {
.loader--fullscreen {
background: var(--color-bg-primary, #10141D);
}
.loader__ring-track {
stroke: var(--color-border, #2A2F41);
}
.loader__icon {
background: var(--color-bg-tertiary, #1D2333);
}
.loader__icon svg,
.loader__icon i {
color: var(--color-text-secondary, #A2A8B9);
}
.loader__title {
color: var(--color-text-primary, #E0E2EB);
}
.loader__subtitle {
color: var(--color-text-secondary, #A2A8B9);
}
}
/* ==========================================================================
Loader - Uso com Modal
Quando usado dentro de .modal ou .modal-loading
========================================================================== */
.modal .loader,
.modal-loading .loader {
padding: 0;
}
/* ==========================================================================
Loader - JavaScript Helper Classes
========================================================================== */
/* Estado de loading ativo */
.loader[data-loading="true"] {
display: flex;
}
.loader[data-loading="false"] {
display: none;
}
/* Fade in/out animations */
.loader--fade-in {
animation: loader-fade-in 0.2s ease-out;
}
.loader--fade-out {
animation: loader-fade-out 0.2s ease-out forwards;
}
@keyframes loader-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes loader-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* === components/mind-map.css === */
/**
* Mind Map
*
* Mapa mental com nó central radial, ramos de categoria e folhas.
* Integra com ReactFlow como canvas, com controles de zoom/pan
* e badges de expand/collapse em nós de categoria.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.mind-map {
width: 100%;
height: 500px;
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
overflow: hidden;
position: relative;
background: var(--surface-base-neutral-page-default);
}
/* Title overlay */
.mind-map__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
position: absolute;
top: 12px;
left: 16px;
z-index: 1;
color: var(--text-base-neutral-default);
margin: 0;
}
/* ReactFlow canvas */
.mind-map__canvas {
width: 100%;
height: 100%;
}
/* ========================================================================
NODES
======================================================================== */
/* Base node */
.mind-map__node {
border-radius: 8px;
padding: 8px 16px;
border: 2px solid var(--border-base-neutral-default);
font-size: 13px;
font-weight: 500;
font-family: var(--font-body);
cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s;
background: var(--surface-base-neutral-page-default);
color: var(--text-base-neutral-default);
position: relative;
}
.mind-map__node:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transform: scale(1.05);
}
/* Root node — circular central */
.mind-map__node--root {
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-300);
color: #fff;
font-size: 14px;
font-weight: 700;
border-color: var(--accent-300);
text-align: center;
padding: 12px;
line-height: 1.2;
}
.mind-map__node--root:hover {
box-shadow: 0 4px 16px rgba(63, 104, 251, 0.3);
}
/* Category node — level 1 */
.mind-map__node--category {
background: var(--surface-base-neutral-page-default);
font-weight: 600;
font-size: 13px;
padding: 8px 14px;
}
/* Collapsed category */
.mind-map__node--category[data-collapsed="true"] {
opacity: 0.8;
}
/* Leaf node — level 2 */
.mind-map__node--leaf {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
font-size: 12px;
font-weight: 400;
padding: 6px 12px;
}
/* ========================================================================
EDGES
======================================================================== */
.mind-map__edge {
stroke-width: 2;
}
.mind-map__edge--category {
stroke-width: 3;
}
.mind-map__edge--leaf {
stroke-width: 1.5;
stroke-dasharray: 4;
}
/* ========================================================================
ZOOM CONTROLS
======================================================================== */
.mind-map__controls {
position: absolute;
bottom: 12px;
left: 12px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 1;
}
.mind-map__control-btn {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border-base-neutral-default);
background: var(--surface-base-neutral-page-default);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--text-base-neutral-default);
transition: background-color 0.15s;
}
.mind-map__control-btn:hover {
background: var(--surface-base-neutral-container-default);
}
/* ========================================================================
BADGE (expand/collapse on category nodes)
======================================================================== */
.mind-map__badge {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent-300);
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--surface-base-neutral-page-default);
}
/* ========================================================================
EMPTY STATE
======================================================================== */
.mind-map__empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--text-base-neutral-secondary);
font-size: 14px;
border: 2px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .mind-map {
background: var(--surface-base-neutral-page-default);
border-color: var(--border-base-neutral-default);
}
.dark .mind-map__node {
background: var(--surface-base-neutral-page-default);
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-default);
}
.dark .mind-map__node:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.dark .mind-map__node--root {
background: var(--accent-300);
border-color: var(--accent-300);
color: #fff;
}
.dark .mind-map__node--root:hover {
box-shadow: 0 4px 16px rgba(71, 109, 245, 0.4);
}
.dark .mind-map__node--category {
background: var(--surface-base-neutral-page-default);
}
.dark .mind-map__node--leaf {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .mind-map__control-btn {
background: var(--surface-base-neutral-page-default);
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-default);
}
.dark .mind-map__control-btn:hover {
background: var(--surface-base-neutral-container-default);
}
.dark .mind-map__badge {
border-color: var(--surface-base-neutral-page-default);
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.mind-map {
height: 400px;
}
}
/* === components/modal.css === */
/**
* Modal / Dialog
*
* Componente de janelas modais e diálogos
* Baseado nas especificações do Figma - Design System SIDASP
*
* @version 1.0.0
* @date 2025-10-31
*/
/* ============================================================
BASE MODAL
============================================================ */
/**
* Backdrop (fundo escurecido)
*/
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
margin: 0;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-backdrop.active {
opacity: 1;
visibility: visible;
}
/**
* Container do modal
*/
.modal {
position: relative;
background: var(--color-text-light);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
transform: scale(0.9) translateY(20px);
opacity: 0;
transition: all 0.3s ease;
}
.modal-backdrop.active .modal {
transform: scale(1) translateY(0);
opacity: 1;
}
/**
* Header do modal
*/
.modal-header {
padding: 24px 24px 16px 24px;
border-bottom: 1px solid var(--color-border-light);
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-shrink: 0;
}
.modal-header-content {
flex: 1;
}
.modal-title {
font-size: 20px;
font-weight: 600;
color: var(--color-neutral-800);
margin: 0;
line-height: 1.4;
}
.modal-subtitle {
font-size: 14px;
color: var(--color-text-secondary);
margin: 4px 0 0 0;
}
.modal-close {
flex-shrink: 0;
width: 32px;
height: 32px;
padding: 0;
margin-left: 16px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-close:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--color-neutral-800);
}
.modal-close:active {
transform: scale(0.95);
}
.modal-close .material-icons {
font-size: 20px;
}
/**
* Body do modal
*/
.modal-body {
padding: 24px;
overflow-y: auto;
flex: 1;
color: var(--color-text-secondary);
font-size: 14px;
line-height: 1.6;
}
/**
* Footer do modal
*/
.modal-footer {
padding: 16px 24px 24px 24px;
border-top: 1px solid var(--color-border-light);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex-shrink: 0;
}
.modal-footer-start {
justify-content: flex-start;
}
.modal-footer-center {
justify-content: center;
}
.modal-footer-between {
justify-content: space-between;
}
/* ============================================================
MODAL ALERT (Modais de Alerta)
============================================================ */
/**
* Modal Alert - Estrutura específica para alertas
*/
.modal-alert {
max-width: 440px;
text-align: center;
}
.modal-alert .modal-header {
border-bottom: none;
padding: 32px 32px 0 32px;
flex-direction: column;
align-items: center;
}
.modal-alert .modal-close {
position: absolute;
top: 16px;
right: 16px;
margin: 0;
}
.modal-alert .modal-body {
padding: 16px 32px 24px 32px;
text-align: center;
}
.modal-alert .modal-footer {
border-top: none;
padding: 0 32px 32px 32px;
justify-content: center;
flex-direction: column;
gap: 12px;
}
/**
* Ícone do alert
*/
.modal-alert-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto;
flex-shrink: 0;
}
.modal-alert-icon .material-icons {
font-size: 32px;
}
/**
* Título do alert
*/
.modal-alert .modal-title {
font-size: 22px;
font-weight: 600;
color: var(--color-neutral-800);
margin: 0 0 12px 0;
}
/**
* Texto do alert
*/
.modal-alert-text {
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0;
}
/**
* Botões do alert - largura total
*/
.modal-alert .modal-footer button {
width: 100%;
justify-content: center;
}
/* ============================================================
VARIANTES DE ALERT
============================================================ */
/**
* Alert Padrão / Info (Azul)
*/
.modal-alert-default .modal-alert-icon,
.modal-alert-info .modal-alert-icon {
background: rgba(62, 104, 251, 0.1); /* RGBA of --color-primary (#3E68FB) */
color: var(--color-primary);
}
/**
* Alert Sucesso (Verde)
*/
.modal-alert-success .modal-alert-icon {
background: var(--color-success-light);
color: var(--color-success);
}
/**
* Alert Atenção / Warning (Amarelo)
*/
.modal-alert-warning .modal-alert-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
/**
* Alert Erro / Danger (Vermelho)
*/
.modal-alert-error .modal-alert-icon,
.modal-alert-danger .modal-alert-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
/* ============================================================
MODAL SIZES
============================================================ */
.modal-sm {
max-width: 400px;
}
.modal-md {
max-width: 500px;
}
.modal-lg {
max-width: 700px;
}
.modal-xl {
max-width: 900px;
}
.modal-fullscreen {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
}
/* ============================================================
MODAL SEM HEADER/FOOTER
============================================================ */
.modal-no-header .modal-header {
display: none;
}
.modal-no-footer .modal-footer {
display: none;
}
.modal-no-padding .modal-body {
padding: 0;
}
/* ============================================================
MODAL COM SCROLL
============================================================ */
.modal-body-scroll {
overflow-y: auto;
max-height: 400px;
}
.modal-body-scroll::-webkit-scrollbar {
width: 6px;
}
.modal-body-scroll::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
.modal-body-scroll::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}
.modal-body-scroll::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
/* ============================================================
MODAL COM IMAGEM
============================================================ */
.modal-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 12px 12px 0 0;
}
.modal-with-image .modal-header {
padding-top: 16px;
}
/* ============================================================
MODAL CONFIRMAÇÃO
============================================================ */
.modal-confirm {
max-width: 440px;
}
.modal-confirm .modal-footer {
flex-direction: row;
}
.modal-confirm .modal-footer button {
flex: 1;
}
/* ============================================================
MODAL LOADING
============================================================ */
.modal-loading {
position: relative;
pointer-events: none;
}
.modal-loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
}
.modal-loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 4px solid var(--color-border-light);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: modal-spinner 0.8s linear infinite;
z-index: 1;
}
@keyframes modal-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ============================================================
MODAL DARK MODE
============================================================ */
.modal-dark {
background: var(--color-bg-dark);
color: var(--color-neutral-300);
}
.modal-dark .modal-header {
border-bottom-color: var(--color-neutral-700);
}
.modal-dark .modal-title {
color: var(--color-text-light);
}
.modal-dark .modal-subtitle,
.modal-dark .modal-body,
.modal-dark .modal-alert-text {
color: var(--color-neutral-400);
}
.modal-dark .modal-footer {
border-top-color: var(--color-neutral-700);
}
.modal-dark .modal-close {
color: var(--color-neutral-400);
}
.modal-dark .modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-light);
}
/* ============================================================
ANIMAÇÕES ALTERNATIVAS
============================================================ */
.modal-fade-in .modal {
animation: modal-fade-in 0.3s ease;
}
@keyframes modal-fade-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modal-slide-down .modal {
animation: modal-slide-down 0.3s ease;
}
@keyframes modal-slide-down {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-slide-up .modal {
animation: modal-slide-up 0.3s ease;
}
@keyframes modal-slide-up {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
MODAL STACK (Múltiplos Modais)
============================================================ */
.modal-backdrop[data-modal-level="2"] {
z-index: 1060;
background: rgba(0, 0, 0, 0.6);
}
.modal-backdrop[data-modal-level="3"] {
z-index: 1070;
background: rgba(0, 0, 0, 0.7);
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.modal {
max-width: calc(100% - 32px);
margin: 16px;
}
.modal-fullscreen-mobile {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
margin: 0;
}
.modal-header {
padding: 20px 20px 12px 20px;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 12px 20px 20px 20px;
flex-direction: column;
}
.modal-footer button {
width: 100%;
}
.modal-alert .modal-header {
padding: 24px 24px 0 24px;
}
.modal-alert .modal-body {
padding: 16px 24px 20px 24px;
}
.modal-alert .modal-footer {
padding: 0 24px 24px 24px;
}
.modal-alert-icon {
width: 56px;
height: 56px;
margin-bottom: 16px;
}
.modal-alert-icon .material-icons {
font-size: 28px;
}
.modal-alert .modal-title {
font-size: 20px;
}
.modal-lg,
.modal-xl {
max-width: calc(100% - 32px);
}
}
@media (max-width: 480px) {
.modal-backdrop {
padding: 0;
}
.modal {
max-width: 100%;
width: 100%;
border-radius: 16px 16px 0 0;
margin: auto 0 0 0;
max-height: 95vh;
}
.modal-alert .modal-alert-icon {
width: 48px;
height: 48px;
}
.modal-alert .modal-alert-icon .material-icons {
font-size: 24px;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
.modal-close:focus {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.modal-backdrop,
.modal,
.modal-close {
animation: none !important;
transition: none !important;
}
.modal-backdrop.active .modal {
transform: none;
}
}
/* Trap focus dentro do modal */
.modal-backdrop.active {
isolation: isolate;
}
/* ============================================================
ESTADOS ESPECIAIS
============================================================ */
.modal-no-backdrop {
background: transparent;
backdrop-filter: none;
}
.modal-static .modal {
animation: modal-shake 0.3s ease;
}
@keyframes modal-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* ============================================================
UTILITÁRIOS
============================================================ */
/* Previne scroll do body quando modal está aberto */
body.modal-open {
overflow: hidden;
position: relative;
}
/* Remove padding do body em mobile */
@media (max-width: 480px) {
body.modal-open {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
}
/* ============================================================
MODAL COM FORMULÁRIO
============================================================ */
.modal-form .modal-body {
padding: 24px;
}
.modal-form .form-group {
margin-bottom: 20px;
}
.modal-form .form-group:last-child {
margin-bottom: 0;
}
/* ============================================================
MODAL COM LISTA
============================================================ */
.modal-list {
list-style: none;
padding: 0;
margin: 0;
}
.modal-list-item {
padding: 12px 16px;
border-bottom: 1px solid #E5E7EB;
cursor: pointer;
transition: background 0.2s ease;
}
.modal-list-item:hover {
background: #F8F9FB;
}
.modal-list-item:last-child {
border-bottom: none;
}
.modal-list-item.active {
background: #EEF3FF;
color: var(--color-accent-300);
}
/* ============================================================
MODAL COM TABS
============================================================ */
.modal-tabs {
display: flex;
gap: 8px;
padding: 16px 24px 0 24px;
border-bottom: 1px solid #E5E7EB;
}
.modal-tab {
padding: 12px 16px;
background: transparent;
border: none;
color: #5A6478;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s ease;
}
.modal-tab:hover {
color: var(--color-neutral-800);
}
.modal-tab.active {
color: var(--color-accent-300);
border-bottom-color: var(--color-accent-300);
}
/* ============================================================
IMPRESSÃO
============================================================ */
@media print {
.modal-backdrop {
display: none;
}
}
/* === components/navbar.css === */
/**
* Navbar
*
* Barra de navegação principal. Background escuro fixo.
* Duas variantes: Default (sistema) e News (portal de notícias).
* Botões condicionais: inserir (rotinas), download/print (relatórios).
* Dropdown de ajuda com overlay escuro.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Altura: 96px
* - Padding lateral: 72px
* - Background: --surface-base-neutral-container-default-on-black
* - Ícones/texto: --icon-base-neutral-white / --text-base-neutral-white
* - Botões: 40x40, radius 6px, borda --border-base-neutral-on-black
* - Menu/inserir: bg --accent-300
* - Gap esquerdo: 40px, gap direito: 20px
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 96px;
padding: 0 72px;
background: var(--surface-base-neutral-container-default-on-black);
box-sizing: border-box;
position: relative;
z-index: var(--z-dropdown, 1000);
}
/* ============================================================
SEÇÃO ESQUERDA (menu + logo)
============================================================ */
.navbar-left {
display: flex;
align-items: center;
gap: 40px;
}
/* Botão menu (usa .btn .btn-filled .btn-icon) */
/* Logo */
.navbar-logo {
display: flex;
align-items: center;
gap: 4px;
height: 30px;
flex-shrink: 0;
}
.navbar-logo svg,
.navbar-logo img {
height: 30px;
width: auto;
}
.navbar-logo-dot {
width: 6px;
height: 6px;
background: var(--accent-300);
flex-shrink: 0;
}
/* ============================================================
SEÇÃO DIREITA (ações + notificação + ajuda + avatar)
============================================================ */
.navbar-right {
display: flex;
align-items: center;
gap: 20px;
}
/* ============================================================
BOTÕES — sobrescreve cores dos componentes .btn para on-black
============================================================ */
.navbar .btn-outlined {
border-color: var(--border-base-neutral-on-black);
color: var(--icon-base-neutral-white);
}
.navbar .btn-outlined:hover {
background: var(--surface-base-neutral-container-hover-on-black);
border-color: var(--border-base-neutral-on-black);
}
.navbar .navbar-insert-btn {
width: 180px;
}
/* Avatar na navbar */
.navbar .avatar {
cursor: pointer;
flex-shrink: 0;
}
/* ============================================================
DROPDOWN AJUDA (overlay on-black)
============================================================ */
.navbar-help-wrapper {
position: relative;
}
.navbar-help-dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: var(--z-dropdown, 1000);
min-width: 200px;
padding-top: 8px;
display: none;
flex-direction: column;
}
.navbar-help-dropdown-content {
border: 1px solid var(--border-overlay-neutral-on-black);
border-radius: var(--radius-default);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.09);
overflow: hidden;
display: flex;
flex-direction: column;
}
.navbar-help-wrapper:hover .navbar-help-dropdown,
.navbar-help-dropdown.is-open {
display: flex;
}
.navbar-help-item {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
min-height: 48px;
background: var(--surface-overlay-neutral-container-default-on-black);
color: var(--text-overlay-neutral-white);
border: none;
cursor: pointer;
text-decoration: none;
width: 100%;
box-sizing: border-box;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
transition: background var(--transition-fast);
}
.navbar-help-item:hover {
background: var(--surface-overlay-neutral-container-hover-on-black);
}
.navbar-help-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ============================================================
VARIANTE NEWS (simplificada — logo centralizada)
============================================================ */
.navbar--news .navbar-left {
flex: 0 0 auto;
}
.navbar--news .navbar-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* ============================================================
PRINT
============================================================ */
@media print {
.navbar {
display: none !important;
}
}
/* === components/okr-dashboard.css === */
/**
* OKR Dashboard
*
* Grid de cards de objetivos com barras de progresso e key results.
* BEM naming, dark mode, semantic CSS vars.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.okr-dashboard {
width: 100%;
}
.okr-dashboard__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Grid responsivo */
.okr-dashboard__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
/* Card individual */
.okr-dashboard__card {
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
padding: 20px;
transition: box-shadow 0.2s, border-color 0.2s;
}
.okr-dashboard__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: var(--border-base-neutral-strong);
}
/* Header do card */
.okr-dashboard__card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
}
.okr-dashboard__objective {
font-size: 15px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0;
line-height: 1.4;
}
/* Indicator badge */
.okr-dashboard__indicator {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
font-weight: 500;
line-height: 1.6;
white-space: nowrap;
flex-shrink: 0;
}
.okr-dashboard__indicator--success {
background: var(--surface-base-alert-container-success);
color: var(--text-base-success-default);
}
.okr-dashboard__indicator--warning {
background: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
.okr-dashboard__indicator--error {
background: var(--surface-base-alert-container-error);
color: var(--text-base-error-default);
}
/* Progress label */
.okr-dashboard__progress-label {
font-size: 13px;
font-weight: 600;
color: var(--text-base-neutral-default);
text-align: right;
margin-bottom: 4px;
}
/* Progress bar wrapper */
.okr-dashboard__progress {
width: 100%;
height: 8px;
background: var(--neutral-100, var(--color-neutral-100));
border-radius: 4px;
overflow: hidden;
margin-bottom: 16px;
}
/* Progress bar fill */
.okr-dashboard__progress-bar {
height: 100%;
border-radius: 4px;
transition: width 0.8s ease;
}
.okr-dashboard__progress-bar--success {
background: var(--color-green-500, #22c55e);
}
.okr-dashboard__progress-bar--warning {
background: var(--color-yellow-500, #eab308);
}
.okr-dashboard__progress-bar--error {
background: var(--color-red-500, #ef4444);
}
/* Key Results list */
.okr-dashboard__kr-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Key Result item */
.okr-dashboard__kr {
display: flex;
flex-direction: column;
gap: 4px;
}
.okr-dashboard__kr-text {
font-size: 13px;
color: var(--text-base-neutral-secondary);
line-height: 1.4;
}
.okr-dashboard__kr-value {
font-size: 12px;
color: var(--text-base-neutral-subtle);
text-align: right;
}
/* Mini progress bar for KR */
.okr-dashboard__kr-progress {
width: 100%;
height: 4px;
background: var(--neutral-200, var(--color-neutral-200));
border-radius: 2px;
overflow: hidden;
}
.okr-dashboard__kr-bar {
height: 100%;
border-radius: 2px;
background: var(--border-base-brand-default);
transition: width 0.6s ease;
}
/* Estado vazio */
.okr-dashboard__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
ANIMATION
======================================================================== */
@keyframes progressGrow {
from {
width: 0;
}
to {
width: var(--target-width);
}
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .okr-dashboard__card {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .okr-dashboard__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
.dark .okr-dashboard__progress {
background: var(--neutral-700, var(--color-neutral-700));
}
.dark .okr-dashboard__kr-progress {
background: var(--neutral-700, var(--color-neutral-700));
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.okr-dashboard__grid {
grid-template-columns: 1fr;
}
}
/* === components/pagination.css === */
/**
* PAGINATION COMPONENT
*
* Componente de navegação por páginas com suporte a:
* - Números de página
* - Botões Previous/Next
* - Informações de total
* - Variantes: Default, Compact, Simple
* - Estados: Default, Active, Disabled
* - Dark mode completo
* - Acessibilidade WCAG 2.1 AA (ARIA, keyboard navigation)
*
* Baseado no Design System Figma - SIDASP
* @version 1.0.0
* @date 2025-01-27
*/
/* ============================================================
BASE PAGINATION STRUCTURE
============================================================ */
/**
* Container principal da paginação
*/
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs, 4px);
flex-wrap: wrap;
width: 100%;
}
/**
* Lista de páginas
*/
.pagination-list {
display: flex;
align-items: center;
gap: var(--spacing-xs, 4px);
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
/**
* Item da paginação (número ou botão)
*/
.pagination-item {
display: flex;
align-items: center;
justify-content: center;
}
/**
* Link/botão da página
*/
.pagination-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--spacing-sm, 8px);
/* Tipografia */
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p3, 20px);
color: var(--color-text-primary, var(--color-neutral-800));
text-decoration: none;
/* Aparência */
background: var(--color-bg-primary, var(--color-bg-primary));
border: 1px solid var(--color-border, var(--color-neutral-400));
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
user-select: none;
}
.pagination-link:hover:not(:disabled):not(.pagination-link--disabled):not(.pagination-link--active) {
background: var(--color-bg-secondary, var(--color-neutral-100));
border-color: var(--color-neutral-500, var(--color-neutral-500));
color: var(--color-text-primary, var(--color-neutral-800));
}
.pagination-link:focus-visible {
outline: 2px solid var(--color-accent-300, var(--color-accent-300));
outline-offset: 2px;
}
/**
* Ícone nos botões Previous/Next
*/
.pagination-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 16px;
line-height: 1;
}
/* ============================================================
ESTADOS
============================================================ */
/**
* Active (Página atual)
*/
.pagination-link--active {
background: var(--color-neutral-800, var(--color-neutral-800));
border-color: var(--color-neutral-800, var(--color-neutral-800));
color: var(--color-text-light, var(--color-text-light));
font-weight: var(--font-weight-semibold, 600);
cursor: default;
pointer-events: none;
}
.pagination-link--active:hover {
background: var(--color-neutral-800, var(--color-neutral-800));
border-color: var(--color-neutral-800, var(--color-neutral-800));
color: var(--color-text-light, var(--color-text-light));
}
/**
* Disabled
*/
.pagination-link--disabled,
.pagination-link:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.pagination-link--disabled:hover,
.pagination-link:disabled:hover {
background: var(--color-bg-primary, var(--color-bg-primary));
border-color: var(--color-border, var(--color-neutral-400));
color: var(--color-text-primary, var(--color-neutral-800));
}
/**
* Ellipsis (reticências)
*/
.pagination-ellipsis {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--spacing-sm, 8px);
color: var(--color-text-secondary, var(--color-neutral-600));
font-size: var(--font-size-p3, 14px);
user-select: none;
}
/* ============================================================
BOTÕES PREVIOUS/NEXT
============================================================ */
.pagination-prev,
.pagination-next {
display: flex;
align-items: center;
gap: var(--spacing-xs, 4px);
}
.pagination-prev .pagination-link,
.pagination-next .pagination-link {
padding: 0 var(--spacing-md, 16px);
}
/* ============================================================
INFORMAÇÕES DE TOTAL
============================================================ */
.pagination-info {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
padding: 0 var(--spacing-md, 16px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p3, 20px);
color: var(--color-text-secondary, var(--color-neutral-600));
white-space: nowrap;
}
.pagination-info-label {
color: var(--color-text-secondary, var(--color-neutral-600));
}
.pagination-info-value {
color: var(--color-text-primary, var(--color-neutral-800));
font-weight: var(--font-weight-medium, 500);
}
/* ============================================================
VARIANTES - COMPACT
============================================================ */
.pagination--compact .pagination-link {
min-width: 32px;
height: 32px;
padding: 0 var(--spacing-xs, 4px);
font-size: var(--font-size-p4, 14px);
}
.pagination--compact .pagination-ellipsis {
min-width: 32px;
height: 32px;
font-size: var(--font-size-p4, 14px);
}
/* ============================================================
VARIANTES - SIMPLE (Apenas Prev/Next)
============================================================ */
.pagination--simple {
justify-content: flex-start;
}
.pagination--simple .pagination-list {
display: none;
}
/* ============================================================
VARIANTES - ALIGNMENT
============================================================ */
.pagination--left {
justify-content: flex-start;
}
.pagination--right {
justify-content: flex-end;
}
.pagination--center {
justify-content: center;
}
/* ============================================================
TAMANHOS
============================================================ */
.pagination--sm .pagination-link {
min-width: 32px;
height: 32px;
padding: 0 var(--spacing-xs, 4px);
font-size: var(--font-size-p4, 14px);
}
.pagination--sm .pagination-ellipsis {
min-width: 32px;
height: 32px;
font-size: var(--font-size-p4, 14px);
}
.pagination--lg .pagination-link {
min-width: 48px;
height: 48px;
padding: 0 var(--spacing-md, 16px);
font-size: var(--font-size-p2, 16px);
}
.pagination--lg .pagination-ellipsis {
min-width: 48px;
height: 48px;
font-size: var(--font-size-p2, 16px);
}
/* ============================================================
DARK MODE
============================================================ */
.dark .pagination-link,
.dark-mode .pagination-link,
[data-theme="dark"] .pagination-link {
background: var(--color-bg-secondary, var(--color-bg-secondary));
border-color: var(--color-border-dark, var(--color-neutral-700));
color: var(--color-text-primary, var(--color-text-primary));
}
.dark .pagination-link:hover:not(:disabled):not(.pagination-link--disabled):not(.pagination-link--active),
.dark-mode .pagination-link:hover:not(:disabled):not(.pagination-link--disabled):not(.pagination-link--active),
[data-theme="dark"] .pagination-link:hover:not(:disabled):not(.pagination-link--disabled):not(.pagination-link--active) {
background: var(--color-bg-tertiary, var(--color-bg-tertiary));
border-color: var(--color-neutral-600, var(--color-neutral-600));
}
.dark .pagination-link--active,
.dark-mode .pagination-link--active,
[data-theme="dark"] .pagination-link--active {
background: var(--color-neutral-300, var(--color-neutral-300));
border-color: var(--color-neutral-300, var(--color-neutral-300));
color: var(--color-neutral-800, var(--color-neutral-800));
}
.dark .pagination-ellipsis,
.dark-mode .pagination-ellipsis,
[data-theme="dark"] .pagination-ellipsis {
color: var(--color-text-secondary, var(--color-text-secondary));
}
.dark .pagination-info,
.dark-mode .pagination-info,
[data-theme="dark"] .pagination-info {
color: var(--color-text-secondary, var(--color-text-secondary));
}
.dark .pagination-info-value,
.dark-mode .pagination-info-value,
[data-theme="dark"] .pagination-info-value {
color: var(--color-text-primary, var(--color-text-primary));
}
/* ============================================================
RESPONSIVIDADE
============================================================ */
@media (max-width: 768px) {
.pagination {
gap: var(--spacing-xs, 4px);
}
.pagination-link {
min-width: 36px;
height: 36px;
padding: 0 var(--spacing-xs, 4px);
font-size: var(--font-size-p4, 14px);
}
.pagination-info {
display: none; /* Esconder info em mobile se necessário */
}
.pagination--show-info-mobile .pagination-info {
display: flex;
}
}
/* ============================================================
ANIMAÇÕES
============================================================ */
@keyframes paginationFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.pagination-link {
animation: paginationFadeIn 0.2s ease-out;
}
/* === components/pesquisar.css === */
/**
* CSS para Layout Pesquisar Configurável
*
* Estilos para formulários de pesquisa gerados via JSON.
*
* Classes principais:
* - .form-pesquisar: Container do formulário
* - .form-pesquisar--configurable: Modificador para layout JSON
* - .pesquisar-container: Container com instruções
* - .pesquisar-form-fields: Área dos campos
* - .pesquisar-instructions: Painel de instruções lateral
* - .pesquisar-actions: Botões de ação
*
* @since 1.0.0
*/
/* ==========================================================================
Form Container
========================================================================== */
.form-pesquisar {
width: 100%;
}
.form-pesquisar--configurable {
max-width: 1200px;
}
/* ==========================================================================
Layout com Instruções
========================================================================== */
.pesquisar-container.with-instructions {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--spacing-lg, 24px);
}
@media (max-width: 992px) {
.pesquisar-container.with-instructions {
grid-template-columns: 1fr;
}
.pesquisar-instructions {
order: -1;
}
}
/* ==========================================================================
Campos do Formulário
========================================================================== */
.pesquisar-form-fields {
display: grid;
gap: var(--spacing-md, 16px);
}
/* Base para todos os layouts de colunas */
.form-fields[class*="layout-"] {
display: grid;
gap: var(--spacing-md, 16px);
}
/* Layout 1 coluna */
.form-fields.layout-1col {
grid-template-columns: 1fr;
}
/* Layout 2 colunas */
.form-fields.layout-2col {
grid-template-columns: repeat(2, 1fr);
}
/* Layout 3 colunas */
.form-fields.layout-3col {
grid-template-columns: repeat(3, 1fr);
}
/* Layout 4 colunas */
.form-fields.layout-4col {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.form-fields.layout-2col,
.form-fields.layout-3col,
.form-fields.layout-4col {
grid-template-columns: 1fr;
}
}
@media (max-width: 992px) and (min-width: 769px) {
.form-fields.layout-3col,
.form-fields.layout-4col {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
Campo Individual
========================================================================== */
/* Padronização de espaçamento label-input para todos os tipos de campo */
.form-fields[class*="layout-"] > .form-group,
.form-fields[class*="layout-"] > .input-group,
.form-fields[class*="layout-"] > .select-group {
margin-bottom: 0; /* Remove margin-bottom pois o grid gap já cuida do espaçamento */
}
/* Remove o gap do flexbox do input-group para evitar duplo espaçamento */
/* !important necessário: override de estilos base que podem vir de múltiplas fontes */
.form-fields[class*="layout-"] > .input-group {
gap: 0 !important;
}
/* Padroniza gap entre label e input (8px para todos) */
.form-fields[class*="layout-"] > .input-group .input-label,
.form-fields[class*="layout-"] > .select-group > label {
margin-bottom: 8px;
}
/* Remove margin do select-group que pode ter estilos próprios */
/* !important necessário: override de estilos base que podem vir de múltiplas fontes */
.form-fields[class*="layout-"] > .select-group {
display: flex;
flex-direction: column;
gap: 0 !important;
}
.form-field {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 4px);
}
.form-field.full-width {
grid-column: 1 / -1;
}
.form-field.half-width {
grid-column: span 1;
}
.form-field__label {
font-size: var(--font-size-sm, 14px);
font-weight: 500;
color: var(--color-text-secondary, #666);
}
.form-field__label .required {
color: var(--color-danger, #dc3545);
margin-left: 2px;
}
.form-field__input {
width: 100%;
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
border: 1px solid var(--color-border, #ddd);
border-radius: var(--border-radius, 4px);
font-size: var(--font-size-base, 16px);
transition: border-color 0.2s ease;
}
.form-field__input:focus {
outline: none;
border-color: var(--color-primary, #007bff);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.form-field__input:disabled {
background-color: var(--color-bg-disabled, #f5f5f5);
cursor: not-allowed;
}
.form-field__hint {
font-size: var(--font-size-xs, 12px);
color: var(--color-text-muted, #999);
}
/* ==========================================================================
Tipos Específicos de Campo
========================================================================== */
/* Select */
.form-field__input--select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
/* Textarea */
.form-field__input--textarea {
min-height: 100px;
resize: vertical;
}
/* Checkbox / Radio */
.form-field--checkbox,
.form-field--radio {
flex-direction: row;
align-items: center;
gap: var(--spacing-sm, 8px);
}
.form-field--checkbox .form-field__label,
.form-field--radio .form-field__label {
order: 2;
margin: 0;
}
.form-field__input--checkbox,
.form-field__input--radio {
width: auto;
margin: 0;
}
/* Date Field */
.form-field--date .form-field__input {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
/* FK Field (placeholder) */
.fk-field-placeholder {
border-style: dashed;
}
/* ==========================================================================
Painel de Instruções
========================================================================== */
.pesquisar-instructions,
.instructions-panel {
background: var(--color-bg-light, #f8f9fa);
border: 1px solid var(--color-border, #ddd);
border-radius: var(--border-radius, 4px);
padding: var(--spacing-md, 16px);
}
.instructions-panel h4 {
margin: 0 0 var(--spacing-sm, 8px) 0;
font-size: var(--font-size-base, 16px);
color: var(--color-text-primary, #333);
}
.instructions-panel p {
margin: 0 0 var(--spacing-sm, 8px) 0;
font-size: var(--font-size-sm, 14px);
color: var(--color-text-secondary, #666);
}
.instructions-panel ul {
margin: 0 0 var(--spacing-sm, 8px) 0;
padding-left: var(--spacing-lg, 24px);
}
.instructions-panel li {
font-size: var(--font-size-sm, 14px);
color: var(--color-text-secondary, #666);
margin-bottom: var(--spacing-xs, 4px);
}
.instructions-panel .required-note {
margin-top: var(--spacing-md, 16px);
padding-top: var(--spacing-sm, 8px);
border-top: 1px solid var(--color-border, #ddd);
font-size: var(--font-size-xs, 12px);
color: var(--color-text-muted, #999);
}
/* ==========================================================================
Botões de Ação
========================================================================== */
.pesquisar-actions {
margin-top: var(--spacing-lg, 24px);
padding-top: var(--spacing-md, 16px);
border-top: 1px solid var(--color-border, #ddd);
}
.pesquisar-actions .controls {
display: flex;
gap: var(--spacing-sm, 8px);
flex-wrap: wrap;
}
.pesquisar-actions .btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs, 4px);
padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
border: none;
border-radius: var(--border-radius, 4px);
font-size: var(--font-size-base, 16px);
cursor: pointer;
transition: background-color 0.2s ease;
}
.pesquisar-actions .btn-primary {
background-color: var(--color-primary, #007bff);
color: white;
}
.pesquisar-actions .btn-primary:hover {
background-color: var(--color-primary-dark, #0056b3);
}
.pesquisar-actions .btn-secondary {
background-color: var(--color-secondary, #6c757d);
color: white;
}
.pesquisar-actions .btn-secondary:hover {
background-color: var(--color-secondary-dark, #545b62);
}
/* ==========================================================================
Estados e Feedback
========================================================================== */
.form-field--error .form-field__input {
border-color: var(--color-danger, #dc3545);
}
.form-field--error .form-field__hint {
color: var(--color-danger, #dc3545);
}
/* Loading state */
.form-pesquisar--loading {
opacity: 0.7;
pointer-events: none;
}
.form-pesquisar--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 2px solid var(--color-primary, #007bff);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* === components/popup.css === */
/**
* Popup
* Overlay flutuante leve posicionado relativo a um trigger.
* Diferente do Modal (bloqueante) e Tooltip (passivo), suporta conteúdo interativo.
* @layer components
* @since 0.2.0
*/
/* ============================================
BASE
============================================ */
.popup {
position: absolute;
z-index: 1100;
display: none;
max-width: 320px;
background: var(--surface-base-neutral-container-default, #ffffff);
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-md, 8px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
opacity: 0;
transform: scale(0.95);
transition: opacity var(--transition-fast, 150ms) ease,
transform var(--transition-fast, 150ms) ease;
}
.popup.is-open {
display: block;
opacity: 1;
transform: scale(1);
}
/* ============================================
ELEMENTOS
============================================ */
.popup__content {
padding: 16px;
}
.popup__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-base-neutral-default);
}
.popup__title {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0;
}
.popup__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-sm, 4px);
cursor: pointer;
color: var(--icon-base-neutral-default);
transition: background var(--transition-fast, 150ms) ease;
}
.popup__close:hover {
background: var(--surface-base-neutral-container-emphasis);
}
.popup__close::before {
content: "";
display: block;
width: 12px;
height: 12px;
background: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
}
.popup__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--border-base-neutral-default);
}
/* ============================================
ARROW
============================================ */
.popup__arrow {
position: absolute;
width: 12px;
height: 12px;
background: var(--surface-base-neutral-container-default, #ffffff);
border: 1px solid var(--border-base-neutral-default);
transform: rotate(45deg);
}
.popup--top .popup__arrow {
bottom: -7px;
left: 50%;
margin-left: -6px;
border-top: none;
border-left: none;
}
.popup--bottom .popup__arrow {
top: -7px;
left: 50%;
margin-left: -6px;
border-bottom: none;
border-right: none;
}
.popup--left .popup__arrow {
right: -7px;
top: 50%;
margin-top: -6px;
border-bottom: none;
border-left: none;
}
.popup--right .popup__arrow {
left: -7px;
top: 50%;
margin-top: -6px;
border-top: none;
border-right: none;
}
/* ============================================
TAMANHOS
============================================ */
.popup--sm {
max-width: 240px;
}
.popup--lg {
max-width: 480px;
}
/* ============================================
WRAPPER (posiciona trigger + popup)
============================================ */
.popup-wrapper {
position: relative;
display: inline-flex;
}
/* ============================================
DARK MODE
============================================ */
.dark .popup,
[data-theme="dark"] .popup {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.dark .popup__arrow,
[data-theme="dark"] .popup__arrow {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .popup__header,
[data-theme="dark"] .popup__header {
border-bottom-color: var(--border-base-neutral-default);
}
.dark .popup__footer,
[data-theme="dark"] .popup__footer {
border-top-color: var(--border-base-neutral-default);
}
/* === components/progress-tracker.css === */
/**
* Progress Tracker
* Barra horizontal de etapas com status individual (completa, atual, pendente, erro).
* Diferente do Stepper (vertical/wizard), é focado em exibição de progresso de processos.
* @layer components
* @since 0.2.0
*/
/* ============================================
BASE
============================================ */
.progress-tracker {
display: flex;
align-items: flex-start;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
counter-reset: step;
}
/* ============================================
STEP
============================================ */
.progress-tracker__step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
text-align: center;
counter-increment: step;
}
/* Connector line between steps */
.progress-tracker__step + .progress-tracker__step::before {
content: "";
position: absolute;
top: 15px;
left: calc(-50% + 20px);
right: calc(50% + 20px);
height: 2px;
background-color: var(--border-base-neutral-default, #d1d5db);
}
/* ============================================
MARKER
============================================ */
.progress-tracker__marker {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
z-index: 1;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
background-color: var(--surface-base-neutral-container-default, #ffffff);
border: 2px solid var(--border-base-neutral-default, #d1d5db);
color: var(--text-base-neutral-secondary);
transition: background var(--transition-fast, 150ms) ease,
border-color var(--transition-fast, 150ms) ease,
color var(--transition-fast, 150ms) ease;
}
.progress-tracker__marker svg {
width: 16px;
height: 16px;
}
/* ============================================
LABEL
============================================ */
.progress-tracker__label {
margin-top: 8px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
color: var(--text-base-neutral-secondary);
max-width: 100px;
}
/* ============================================
STATUS: COMPLETED
============================================ */
.progress-tracker__step--completed .progress-tracker__marker {
background-color: var(--surface-base-success-default, #16a34a);
border-color: var(--surface-base-success-default, #16a34a);
color: #ffffff;
}
.progress-tracker__step--completed + .progress-tracker__step::before {
background-color: var(--surface-base-success-default, #16a34a);
}
.progress-tracker__step--completed .progress-tracker__label {
color: var(--text-base-neutral-default);
}
/* ============================================
STATUS: CURRENT
============================================ */
.progress-tracker__step--current .progress-tracker__marker {
background-color: var(--surface-base-neutral-container-default, #ffffff);
border-color: var(--surface-base-brand-default, #3E68FB);
border-width: 3px;
color: var(--text-base-brand-default, #3E68FB);
}
.progress-tracker__step--current .progress-tracker__label {
color: var(--text-base-brand-default, #3E68FB);
font-weight: 600;
}
/* ============================================
STATUS: ERROR
============================================ */
.progress-tracker__step--error .progress-tracker__marker {
background-color: var(--surface-base-error-default, #dc2626);
border-color: var(--surface-base-error-default, #dc2626);
color: #ffffff;
}
.progress-tracker__step--error .progress-tracker__label {
color: var(--text-base-error-default);
}
/* ============================================
STATUS: DISABLED
============================================ */
.progress-tracker__step--disabled {
opacity: 0.4;
pointer-events: none;
}
/* ============================================
VARIANTE: COMPACT (sem labels)
============================================ */
.progress-tracker--compact .progress-tracker__label {
display: none;
}
.progress-tracker--compact .progress-tracker__marker {
width: 24px;
height: 24px;
font-size: 11px;
}
.progress-tracker--compact .progress-tracker__marker svg {
width: 12px;
height: 12px;
}
.progress-tracker--compact .progress-tracker__step + .progress-tracker__step::before {
top: 11px;
left: calc(-50% + 16px);
right: calc(50% + 16px);
}
/* ============================================
VARIANTE: SM
============================================ */
.progress-tracker--sm .progress-tracker__marker {
width: 24px;
height: 24px;
font-size: 11px;
}
.progress-tracker--sm .progress-tracker__marker svg {
width: 12px;
height: 12px;
}
.progress-tracker--sm .progress-tracker__step + .progress-tracker__step::before {
top: 11px;
left: calc(-50% + 16px);
right: calc(50% + 16px);
}
.progress-tracker--sm .progress-tracker__label {
font-size: 11px;
}
/* ============================================
RESPONSIVO
============================================ */
@media (max-width: 640px) {
.progress-tracker {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.progress-tracker__step {
flex-direction: row;
align-items: center;
gap: 12px;
text-align: left;
width: 100%;
padding: 8px 0;
}
.progress-tracker__step + .progress-tracker__step::before {
display: none;
}
.progress-tracker__label {
margin-top: 0;
max-width: none;
}
}
/* ============================================
DARK MODE
============================================ */
.dark .progress-tracker__marker,
[data-theme="dark"] .progress-tracker__marker {
background-color: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-secondary);
}
.dark .progress-tracker__step + .progress-tracker__step::before,
[data-theme="dark"] .progress-tracker__step + .progress-tracker__step::before {
background-color: var(--border-base-neutral-default);
}
.dark .progress-tracker__step--completed .progress-tracker__marker,
[data-theme="dark"] .progress-tracker__step--completed .progress-tracker__marker {
background-color: var(--surface-base-success-default);
border-color: var(--surface-base-success-default);
}
.dark .progress-tracker__step--completed + .progress-tracker__step::before,
[data-theme="dark"] .progress-tracker__step--completed + .progress-tracker__step::before {
background-color: var(--surface-base-success-default);
}
.dark .progress-tracker__step--current .progress-tracker__marker,
[data-theme="dark"] .progress-tracker__step--current .progress-tracker__marker {
border-color: var(--surface-base-brand-default);
color: var(--text-base-brand-default);
}
.dark .progress-tracker__step--error .progress-tracker__marker,
[data-theme="dark"] .progress-tracker__step--error .progress-tracker__marker {
background-color: var(--surface-base-error-default);
border-color: var(--surface-base-error-default);
}
/* === components/progress.css === */
/**
* PROGRESS BAR COMPONENT
*
* Componente de barra de progresso com suporte a:
* - Linear e circular
* - Com/sem label
* - Estados: default, success, warning, error
* - Animações suaves
* - Dark mode completo
* - Acessibilidade WCAG 2.1 AA
*
* Baseado no Design System Figma - SIDASP
* @version 1.0.0
* @date 2025-01-27
*/
/* ============================================================
BASE PROGRESS STRUCTURE
============================================================ */
/**
* Container da barra de progresso
*/
.progress {
position: relative;
width: 100%;
height: 8px;
background: var(--color-neutral-200, var(--color-neutral-200));
border-radius: var(--radius-full, 9999px);
overflow: hidden;
}
/**
* Barra de progresso (fill)
*/
.progress-bar {
height: 100%;
background: var(--color-accent-300, var(--color-accent-300));
border-radius: var(--radius-full, 9999px);
transition: width var(--transition-base, 200ms ease-in-out);
position: relative;
overflow: hidden;
}
/**
* Label do progresso
*/
.progress-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-xs, 4px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p4, 20px);
color: var(--color-text-primary, var(--color-neutral-800));
}
.progress-label-text {
flex: 1;
}
.progress-label-value {
margin-left: var(--spacing-sm, 8px);
color: var(--color-text-secondary, var(--color-neutral-600));
font-weight: var(--font-weight-semibold, 600);
}
/* ============================================================
TAMANHOS
============================================================ */
.progress--sm {
height: 4px;
}
.progress--lg {
height: 12px;
}
.progress--xl {
height: 16px;
}
/* ============================================================
ESTADOS
============================================================ */
.progress-bar--success {
background: var(--color-green-500, var(--color-green-500));
}
.progress-bar--warning {
background: var(--color-yellow-500, var(--color-yellow-500));
}
.progress-bar--error {
background: var(--color-red-500, var(--color-red-500));
}
/* ============================================================
ANIMAÇÃO
============================================================ */
.progress-bar--animated {
animation: progressAnimation 1.5s ease-in-out infinite;
}
@keyframes progressAnimation {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.progress-bar--striped {
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-size: 1rem 1rem;
}
.progress-bar--striped.progress-bar--animated {
animation: progressStriped 1s linear infinite;
}
@keyframes progressStriped {
0% {
background-position: 1rem 0;
}
100% {
background-position: 0 0;
}
}
/* ============================================================
CIRCULAR PROGRESS
============================================================ */
.progress-circular {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
}
.progress-circular svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.progress-circular-track {
fill: none;
stroke: var(--color-neutral-200, var(--color-neutral-200));
stroke-width: 4;
}
.progress-circular-bar {
fill: none;
stroke: var(--color-accent-300, var(--color-accent-300));
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dashoffset var(--transition-base, 200ms ease-in-out);
}
.progress-circular-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-primary, var(--color-neutral-800));
}
.progress-circular--sm {
width: 48px;
height: 48px;
}
.progress-circular--sm .progress-circular-text {
font-size: var(--font-size-p4, 14px);
}
.progress-circular--lg {
width: 80px;
height: 80px;
}
.progress-circular--lg .progress-circular-text {
font-size: var(--font-size-p2, 16px);
}
/* ============================================================
DARK MODE
============================================================ */
.dark .progress,
.dark-mode .progress,
[data-theme="dark"] .progress {
background: var(--color-neutral-700, var(--color-neutral-700));
}
.dark .progress-circular-track,
.dark-mode .progress-circular-track,
[data-theme="dark"] .progress-circular-track {
stroke: var(--color-neutral-700, var(--color-neutral-700));
}
/* === components/radio.css === */
/**
* RADIO COMPONENT
*
* Controle de selecao unica.
* Estados: default, hover, selected, disabled, disabled+selected
*
* Baseado no Figma — Controls / Radio
* @version 2.0.0
* @date 2026-03-17
*/
/* ============================================
STRUCTURE
============================================ */
.radio {
display: inline-flex;
align-items: center;
gap: var(--spacing-3);
cursor: pointer;
user-select: none;
}
.radio-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* ============================================
CIRCLE
============================================ */
.radio-circle {
position: relative;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--border-base-neutral-strong);
border-radius: var(--radius-full);
transition: all var(--transition-base);
}
/* Dot interno */
.radio-dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background-color: transparent;
transition: background-color var(--transition-base);
}
/* ============================================
LABEL
============================================ */
.radio-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--spacing-6);
color: var(--text-base-neutral-default);
cursor: pointer;
}
/* ============================================
HOVER
============================================ */
.radio:hover .radio-circle {
background-color: var(--surface-base-neutral-container-deep);
}
/* ============================================
SELECTED
============================================ */
.radio-input:checked + .radio-circle {
border-color: var(--border-base-brand-default);
}
.radio-input:checked + .radio-circle .radio-dot {
background-color: var(--surface-base-brand-container-medium);
}
/* ============================================
DISABLED
============================================ */
.radio-input:disabled + .radio-circle {
border-color: var(--border-base-neutral-default);
cursor: not-allowed;
}
.radio-input:disabled + .radio-circle .radio-dot {
background-color: transparent;
}
.radio-input:disabled ~ .radio-label {
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
.radio:has(.radio-input:disabled) {
cursor: not-allowed;
}
/* Disabled + Selected */
.radio-input:disabled:checked + .radio-circle {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--border-base-neutral-default);
}
.radio-input:disabled:checked + .radio-circle .radio-dot {
background-color: var(--text-base-neutral-subtle);
}
/* Disabled nao reage a hover */
.radio:has(.radio-input:disabled):hover .radio-circle {
background-color: transparent;
}
.radio:has(.radio-input:disabled:checked):hover .radio-circle {
background-color: var(--surface-base-neutral-container-emphasis);
}
/* ============================================
FOCUS
============================================ */
.radio-input:focus-visible + .radio-circle {
outline: 2px solid var(--border-base-brand-default);
outline-offset: 2px;
}
/* ============================================
ANIMATION
============================================ */
@keyframes radio-select {
0% { transform: scale(0); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.radio-input:checked + .radio-circle .radio-dot {
animation: radio-select var(--transition-base);
}
/* ============================================
ACCESSIBILITY
============================================ */
@media (prefers-reduced-motion: reduce) {
.radio-circle,
.radio-dot {
transition: none;
animation: none;
}
}
@media (prefers-contrast: high) {
.radio-circle {
border-width: 2px;
}
.radio-input:focus-visible + .radio-circle {
outline: 3px solid;
outline-offset: 2px;
}
}
@media print {
.radio-circle {
border: 1px solid #000;
}
.radio-input:checked + .radio-circle .radio-dot {
background: #000;
}
}
/* === components/report.css === */
/**
* Componente de Relatório - Substituindo VReport
*
* Componente moderno para relatórios HTML com cabeçalho/rodapé
* que se repetem automaticamente na impressão.
*
* Substitui: /public/js/vreport/VReport_screen.css e VReport_print.css
*
* Uso:
*
* Conteúdo do relatório
*
*/
/* ============================================
VISUALIZAÇÃO NA TELA
============================================ */
.report-header {
position: relative;
top: 0;
}
.report-footer {
/* Footer raramente usado, mantido para compatibilidade */
}
.report-content {
position: relative;
padding: 0;
}
.report-content-inner {
position: relative;
}
/* Suporte para IDs legados (retrocompatibilidade) */
#_VReportHeader {
position: relative;
top: 0;
}
#_VReportFooter {
/* Footer raramente usado */
}
#_VReportContent {
position: relative;
padding: 0;
}
#_VReportContentClient {
position: relative;
}
/* ============================================
IMPRESSÃO
============================================ */
@media print {
/* Header fixo que repete em todas as páginas */
.report-header,
#_VReportHeader {
display: table-header-group;
}
/* Footer fixo (se usado) */
.report-footer,
#_VReportFooter {
position: fixed;
top: 0;
right: 0 !important;
}
/* Conteúdo principal */
.report-content,
#_VReportContent {
position: relative;
padding: 0;
mso-paper-source: 0; /* Microsoft Office */
}
.report-content-inner,
#_VReportContentClient {
position: relative;
}
/* Garantir que thead/tfoot sejam repetidos */
thead {
display: table-header-group;
margin: 0;
padding: 0;
}
tfoot {
display: table-footer-group;
margin: 0;
padding: 0;
}
/* Evitar quebra de página dentro de elementos importantes */
.no-page-break {
page-break-inside: avoid;
}
/* Forçar quebra de página antes */
.page-break-before {
page-break-before: always;
}
/* Forçar quebra de página depois */
.page-break-after {
page-break-after: always;
}
}
/* ============================================
UTILITÁRIOS DE RELATÓRIO
============================================ */
/* Container do relatório */
.report-container {
background: var(--surface-base-neutral-container-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--spacing-2);
}
/* Preview do relatório */
.report-preview {
position: relative;
}
/* Orientação paisagem */
.report-landscape {
/* Aplicar orientação via CSS @page se necessário */
}
/* Orientação retrato */
.report-portrait {
/* Padrão */
}
/* Esconder elementos na impressão */
@media print {
.no-print,
.noprint {
display: none !important;
}
}
/* Mostrar apenas na impressão */
.print-only {
display: none;
}
@media print {
.print-only {
display: block;
}
}
/* ============================================
CABEÇALHO DE RELATÓRIO
============================================ */
.report-header-table {
width: 100%;
border-collapse: collapse;
}
.report-header-logo {
width: 230px;
vertical-align: middle;
}
.report-header-title {
text-align: center;
vertical-align: middle;
}
.report-title {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0;
}
.report-subtitle {
font-size: 0.875rem;
color: #6b7280;
margin: 0.25rem 0;
}
/* ============================================
RODAPÉ DE RELATÓRIO
============================================ */
.report-footer-info {
margin-top: 10px;
margin-bottom: 5px;
font-size: 0.875rem;
}
.report-footer-info strong {
font-weight: 600;
}
/* ============================================
CACHE WARNING
============================================ */
.report-cache-warning {
background: var(--surface-base-alert-container-warning);
border: 1px solid var(--yellow-200);
border-radius: var(--radius-lg);
padding: var(--spacing-4);
margin-block: var(--spacing-4);
font-size: 0.875rem;
color: var(--text-base-warning-default);
}
@media print {
.report-cache-warning {
display: none !important;
}
}
/* === components/resumo.css === */
/**
* Componente: Resumo
* Design System SIDASP (SIDAGO v5)
* Versao: 2.0.0
*
* Exibe dados em formato read-only organizados em secoes.
* Usado em: Steppers (ultima etapa), Detalhar, Compartilhamento.
*
* Funcionalidades:
* - Secoes com titulo e acao opcional (Editar etapa)
* - Linha separadora vertical entre labels e valores
* - Inline validation com destaque de erros
* - Area de alertas/erros no topo
* - Suporte a compartilhamento (data-share-*)
* - Dark mode completo
* - Responsividade mobile
*/
/* ==========================================================================
Container Principal
========================================================================== */
.resumo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 32px);
width: 100%;
max-width: 630px;
}
/* Variantes de largura */
.resumo--full-width {
max-width: none;
}
.resumo--compact {
gap: var(--spacing-lg, 24px);
}
/* Modo somente leitura (sem botoes de acao) */
.resumo--readonly .resumo__action {
display: none;
}
/* ==========================================================================
Area de Alertas/Erros
========================================================================== */
.resumo__alerts {
width: 100%;
margin-bottom: var(--spacing-md, 16px);
}
.resumo__alerts .alert {
margin-bottom: 0;
}
.resumo__error-list {
margin: var(--spacing-sm, 12px) 0 0 0;
padding: 0;
list-style: none;
}
.resumo__error-list li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-xs, 4px);
padding: var(--spacing-xs, 4px) 0;
font-family: var(--font-family-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 14px);
line-height: 1.5;
}
.resumo__error-list li::before {
content: "\2022";
color: var(--color-danger, #DC2626);
font-weight: bold;
margin-right: var(--spacing-xs, 4px);
}
.resumo__error-list .error-field {
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-primary, #12151F);
}
.resumo__error-list .error-message {
color: var(--color-danger, #DC2626);
}
.resumo__error-list .error-fix-link {
margin-left: auto;
color: var(--color-primary, #4361EE);
font-size: var(--font-size-p4, 14px);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.resumo__error-list .error-fix-link:hover {
text-decoration: underline;
}
/* ==========================================================================
Secao
========================================================================== */
.resumo__section {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm, 12px);
width: 100%;
}
/* Secao com borda inferior (legado - para compatibilidade) */
.resumo__section--bordered {
border-bottom: 1px solid var(--color-border, #CED3E2);
padding-bottom: var(--spacing-lg, 24px);
}
.resumo__section--bordered:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* ==========================================================================
Header da Secao (Titulo + Acao)
========================================================================== */
.resumo__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-sm, 12px);
width: 100%;
min-height: 32px;
}
.resumo__title {
margin: 0;
font-family: var(--font-family-body, 'Inter', sans-serif);
font-style: normal;
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p3, 14px);
line-height: 24px;
color: var(--color-text-primary, #12151F);
}
/* Variante: titulo maior (para uso em detalhar) */
.resumo__title--large {
font-family: var(--font-family-title, 'Space Grotesk', sans-serif);
font-size: var(--font-size-h4, 18px);
}
/* Botao "Editar etapa" */
.resumo__action {
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--spacing-xs, 8px);
padding: var(--spacing-xs, 4px) var(--spacing-sm, 12px);
background: transparent;
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-sm, 6px);
cursor: pointer;
transition: all 0.2s ease;
}
.resumo__action:hover {
background-color: var(--color-bg-hover, #F4F5F7);
border-color: var(--color-border-hover, #9CA3AF);
}
.resumo__action:focus {
outline: 2px solid var(--color-primary, #4361EE);
outline-offset: 2px;
}
.resumo__action:focus:not(:focus-visible) {
outline: none;
}
.resumo__action-icon {
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.resumo__action-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
/* Icone de lapis padrao */
.resumo__action-icon--edit::before {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
}
.resumo__action-label {
font-family: var(--font-family-body, 'Inter', sans-serif);
font-style: normal;
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p3, 14px);
line-height: 24px;
color: var(--color-text-primary, #12151F);
}
/* ==========================================================================
Conteudo da Secao (Separador + Grid)
========================================================================== */
.resumo__content {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--spacing-md, 20px);
width: 100%;
}
/* Linha Separadora Vertical */
.resumo__separator {
width: 1px;
min-height: 100%;
background-color: var(--color-border, #CED3E2);
flex-shrink: 0;
align-self: stretch;
}
/* ==========================================================================
Grid de Items
========================================================================== */
.resumo__grid {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 16px);
flex: 1;
}
/* Variante: Grid CSS (duas colunas) - legado */
.resumo__grid--table {
display: grid;
grid-template-columns: 140px 1fr;
column-gap: var(--spacing-xl, 32px);
row-gap: var(--spacing-md, 16px);
align-items: baseline;
}
.resumo__grid--wide-labels {
grid-template-columns: 180px 1fr;
}
.resumo__grid--narrow-labels {
grid-template-columns: 100px 1fr;
}
/* ==========================================================================
Item (Label + Valor)
========================================================================== */
.resumo__item {
display: flex;
flex-direction: row;
align-items: baseline;
gap: var(--spacing-3xl, 80px);
width: 100%;
}
.resumo__item-label {
width: 140px;
flex-shrink: 0;
font-family: var(--font-family-body, 'Inter', sans-serif);
font-style: normal;
font-weight: var(--font-weight-regular, 400);
font-size: var(--font-size-p4, 14px);
line-height: 24px;
color: var(--color-text-secondary, #394360);
}
.resumo__item-value {
flex: 1;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--spacing-xs, 4px);
font-family: var(--font-family-body, 'Inter', sans-serif);
font-style: normal;
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p3, 14px);
line-height: 24px;
color: var(--color-text-primary, #12151F);
word-break: break-word;
}
/* ==========================================================================
Estados dos Items
========================================================================== */
/* Item vazio */
.resumo__item--empty .resumo__item-value,
.resumo__item-value--empty {
color: var(--color-text-muted, #6B7280);
font-weight: var(--font-weight-regular, 400);
}
/* Item destacado */
.resumo__item--highlight .resumo__item-value,
.resumo__item-value--highlight {
color: var(--color-success, #059669);
font-weight: var(--font-weight-semibold, 600);
}
/* Item com warning */
.resumo__item--warning .resumo__item-value,
.resumo__item-value--warning {
color: var(--color-warning, #D97706);
font-weight: var(--font-weight-semibold, 600);
}
/* Item com danger */
.resumo__item--danger .resumo__item-value,
.resumo__item-value--danger {
color: var(--color-danger, #DC2626);
font-weight: var(--font-weight-semibold, 600);
}
/* Item com erro de validacao */
.resumo__item--error {
position: relative;
padding-left: var(--spacing-sm, 12px);
margin-left: calc(-1 * var(--spacing-sm, 12px));
padding-top: var(--spacing-xs, 4px);
padding-bottom: var(--spacing-xs, 4px);
border-left: 3px solid var(--color-danger, #DC2626);
background-color: var(--color-danger-bg, #FEF2F2);
border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.resumo__item--error .resumo__item-value {
color: var(--color-danger, #DC2626);
font-weight: var(--font-weight-medium, 500);
}
/* Link/botao para corrigir erro */
.resumo__item-fix {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs, 4px);
margin-left: var(--spacing-sm, 12px);
padding: 0;
background: none;
border: none;
font-family: var(--font-family-body, 'Inter', sans-serif);
font-size: var(--font-size-small, 12px);
color: var(--color-primary, #4361EE);
text-decoration: underline;
cursor: pointer;
white-space: nowrap;
}
.resumo__item-fix:hover {
color: var(--color-primary-dark, #3651D4);
}
/* Campo obrigatorio (asterisco) */
.resumo__item--required .resumo__item-label::after {
content: " *";
color: var(--color-danger, #DC2626);
}
/* Valor com badge/status inline */
.resumo__item-value .badge,
.resumo__item-value .status-badge {
vertical-align: middle;
}
/* ==========================================================================
Rodape (Acoes globais)
========================================================================== */
.resumo__footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-md, 16px);
width: 100%;
margin-top: var(--spacing-lg, 24px);
padding-top: var(--spacing-lg, 24px);
border-top: 1px solid var(--color-border, #CED3E2);
}
.resumo__footer--start {
justify-content: flex-start;
}
.resumo__footer--center {
justify-content: center;
}
.resumo__footer--between {
justify-content: space-between;
}
/* ==========================================================================
Dark Mode
========================================================================== */
body.dark-mode .resumo__title,
[data-theme="dark"] .resumo__title {
color: var(--color-text-primary-dark, #E0E2EB);
}
body.dark-mode .resumo__item-label,
[data-theme="dark"] .resumo__item-label {
color: var(--color-text-secondary-dark, #BFC3CF);
}
body.dark-mode .resumo__item-value,
[data-theme="dark"] .resumo__item-value {
color: var(--color-text-primary-dark, #E0E2EB);
}
body.dark-mode .resumo__action,
[data-theme="dark"] .resumo__action {
border-color: var(--color-border-dark, #2A2F41);
}
body.dark-mode .resumo__action-label,
[data-theme="dark"] .resumo__action-label {
color: var(--color-text-primary-dark, #E0E2EB);
}
body.dark-mode .resumo__action:hover,
[data-theme="dark"] .resumo__action:hover {
background-color: var(--color-bg-hover-dark, #1E2235);
border-color: var(--color-border-hover-dark, #3D4663);
}
body.dark-mode .resumo__separator,
[data-theme="dark"] .resumo__separator {
background-color: var(--color-border-dark, #2A2F41);
}
body.dark-mode .resumo__section--bordered,
[data-theme="dark"] .resumo__section--bordered {
border-bottom-color: var(--color-border-dark, #2A2F41);
}
body.dark-mode .resumo__footer,
[data-theme="dark"] .resumo__footer {
border-top-color: var(--color-border-dark, #2A2F41);
}
body.dark-mode .resumo__item--empty .resumo__item-value,
body.dark-mode .resumo__item-value--empty,
[data-theme="dark"] .resumo__item--empty .resumo__item-value,
[data-theme="dark"] .resumo__item-value--empty {
color: var(--color-text-muted-dark, #6B7280);
}
body.dark-mode .resumo__item--error,
[data-theme="dark"] .resumo__item--error {
background-color: rgba(220, 38, 38, 0.15);
}
body.dark-mode .resumo__error-list .error-field,
[data-theme="dark"] .resumo__error-list .error-field {
color: var(--color-text-primary-dark, #E0E2EB);
}
body.dark-mode .resumo__error-list .error-fix-link,
[data-theme="dark"] .resumo__error-list .error-fix-link {
color: var(--color-primary-light, #818CF8);
}
/* ==========================================================================
Responsividade
========================================================================== */
@media (max-width: 768px) {
.resumo {
max-width: 100%;
}
.resumo__content {
flex-direction: column;
gap: var(--spacing-sm, 12px);
}
.resumo__separator {
display: none;
}
.resumo__item {
flex-direction: column;
gap: var(--spacing-xs, 4px);
}
.resumo__item-label {
width: 100%;
font-size: var(--font-size-p5, 12px);
color: var(--color-text-muted, #6B7280);
}
.resumo__item-value {
width: 100%;
margin-bottom: var(--spacing-sm, 12px);
}
.resumo__header {
flex-wrap: wrap;
}
.resumo__action {
padding: var(--spacing-xs, 4px) var(--spacing-xs, 8px);
}
.resumo__action-label {
display: none;
}
.resumo__action-icon {
width: 18px;
height: 18px;
}
.resumo__footer {
flex-direction: column;
}
.resumo__footer .btn {
width: 100%;
}
.resumo__grid--table {
grid-template-columns: 1fr;
row-gap: var(--spacing-xs, 8px);
}
.resumo__error-list li {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs, 4px);
}
.resumo__error-list .error-fix-link {
margin-left: 0;
margin-top: var(--spacing-xs, 4px);
}
}
/* ==========================================================================
Animacoes
========================================================================== */
@keyframes resumo-error-pulse {
0% {
background-color: var(--color-danger-bg, #FEF2F2);
}
50% {
background-color: var(--color-danger-light, #FECACA);
}
100% {
background-color: var(--color-danger-bg, #FEF2F2);
}
}
.resumo__item--error-animate {
animation: resumo-error-pulse 0.5s ease-in-out 2;
}
/* Transicao suave ao adicionar/remover erro */
.resumo__item {
transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* ==========================================================================
Print
========================================================================== */
@media print {
.resumo__action {
display: none;
}
.resumo__item-fix {
display: none;
}
.resumo__alerts {
break-inside: avoid;
}
.resumo__section {
break-inside: avoid;
}
.resumo__footer {
display: none;
}
}
/* === components/sankey-diagram.css === */
/**
* Sankey Diagram
*
* Diagrama de Sankey com nós em colunas e links Bézier proporcionais ao valor.
* BEM naming, dark mode, semantic CSS vars.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.sankey-diagram {
width: 100%;
position: relative;
}
.sankey-diagram__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* SVG wrapper */
.sankey-diagram__svg-wrapper {
overflow: visible;
}
/* SVG responsivo */
.sankey-diagram__svg {
width: 100%;
height: auto;
display: block;
}
/* Node rectangle */
.sankey-diagram__node-rect {
rx: 4;
stroke: var(--border-base-neutral-default);
stroke-width: 1;
transition: opacity 0.2s;
}
/* Node label */
.sankey-diagram__node-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
fill: var(--text-base-neutral-default);
pointer-events: none;
}
/* Node value text */
.sankey-diagram__node-value {
font-family: var(--font-body);
font-size: 11px;
fill: var(--text-base-neutral-subtle);
pointer-events: none;
}
/* Link path (Bézier band) */
.sankey-diagram__link {
fill-opacity: 0.3;
stroke: none;
transition: fill-opacity 0.2s;
cursor: pointer;
}
.sankey-diagram__link:hover {
fill-opacity: 0.6;
}
/* Tooltip */
.sankey-diagram__tooltip {
position: absolute;
padding: 8px 12px;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
font-size: 13px;
color: var(--text-base-neutral-default);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 10;
white-space: nowrap;
}
.sankey-diagram__tooltip--visible {
opacity: 1;
}
/* Legenda */
.sankey-diagram__legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
.sankey-diagram__legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-base-neutral-secondary);
}
.sankey-diagram__legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
/* Estado vazio */
.sankey-diagram__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
ANIMATION
======================================================================== */
@keyframes flowDraw {
from {
stroke-dashoffset: var(--dash-length);
}
to {
stroke-dashoffset: 0;
}
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .sankey-diagram__node-rect {
stroke: var(--border-base-neutral-default);
}
.dark .sankey-diagram__node-label {
fill: var(--text-base-neutral-default);
}
.dark .sankey-diagram__node-value {
fill: var(--text-base-neutral-subtle);
}
.dark .sankey-diagram__tooltip {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}
.dark .sankey-diagram__link {
fill-opacity: 0.25;
}
.dark .sankey-diagram__link:hover {
fill-opacity: 0.5;
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.sankey-diagram__svg-wrapper {
min-width: 600px;
overflow-x: auto;
}
}
/* === components/scrollbar.css === */
/**
* Scrollbar
*
* Scrollbar customizada via CSS + JS.
* Esconde a barra nativa e usa um indicador visual de 2px.
* Oculta por padrão, aparece ao passar o mouse.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Thumb: 2px, caps arredondados
* - Track: transparente
* - Margin-right: 6px
* - Default: --border-base-neutral-default
* - Active: --border-base-neutral-strong
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.custom-scroll {
position: relative;
overflow: hidden;
}
.custom-scroll__inner {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
/* Esconder scrollbar nativa */
scrollbar-width: none;
-ms-overflow-style: none;
}
.custom-scroll__inner::-webkit-scrollbar {
display: none;
}
/* ============================================================
THUMB (indicador visual)
============================================================ */
.custom-scroll__thumb {
position: absolute;
top: 0;
right: 6px;
width: 2px;
border-radius: 9999px;
background: var(--border-base-neutral-default);
opacity: 0;
transition: opacity var(--transition-fast, 150ms),
background var(--transition-fast, 150ms);
pointer-events: none;
z-index: 1;
min-height: 20px;
}
/* Visível e clicável no hover do container */
.custom-scroll:hover .custom-scroll__thumb {
opacity: 1;
pointer-events: auto;
}
/* Hover/active no thumb */
.custom-scroll__thumb:hover,
.custom-scroll__thumb:active,
.custom-scroll__thumb.is-dragging {
background: var(--border-base-neutral-strong);
}
/* Mantém visível durante drag (mesmo se mouse sair do container) */
.custom-scroll__thumb.is-dragging {
opacity: 1;
pointer-events: auto;
}
/* Área de clique expandida (2px é muito fino para arrastar) */
.custom-scroll__thumb::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -6px;
right: -6px;
}
/* ============================================================
HORIZONTAL
============================================================ */
.custom-scroll--horizontal .custom-scroll__inner {
overflow-x: auto;
overflow-y: hidden;
}
.custom-scroll--horizontal .custom-scroll__thumb {
top: auto;
right: auto;
bottom: 6px;
left: 0;
width: auto;
height: 2px;
min-height: unset;
min-width: 20px;
}
/* Área de clique expandida para horizontal */
.custom-scroll--horizontal .custom-scroll__thumb::before {
top: -6px;
bottom: -6px;
left: 0;
right: 0;
}
/* ============================================================
DIREÇÃO
============================================================ */
.scroll-y .custom-scroll__inner {
overflow-y: auto;
overflow-x: hidden;
}
.scroll-x .custom-scroll__inner {
overflow-x: auto;
overflow-y: hidden;
}
/* ============================================================
ESCONDER
============================================================ */
.scroll-hidden {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroll-hidden::-webkit-scrollbar {
display: none;
}
/* ============================================================
TOUCH DEVICES
============================================================ */
@media (hover: none) and (pointer: coarse) {
.custom-scroll__inner {
-webkit-overflow-scrolling: touch;
}
.custom-scroll__thumb {
display: none;
}
}
/* ============================================================
PRINT
============================================================ */
@media print {
.custom-scroll,
.custom-scroll__inner {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
.custom-scroll__thumb {
display: none !important;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
@media (prefers-reduced-motion: reduce) {
.custom-scroll__inner {
scroll-behavior: auto;
}
.custom-scroll__thumb {
transition: none;
}
}
@media (forced-colors: active) {
.custom-scroll__thumb {
background: ButtonText;
}
}
/* === components/select.css === */
/**
* Select
*
* Campo de seleção única e múltipla.
* Reutiliza a base do .input para o campo.
* Usa o dropdown e scroll customizados.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Campo: mesma base do input (40px, radius 6px, padding 12px)
* - Chevron: 16x16, right 12px
* - Chip: 26px height, radius 4px, padding 2px 6px, gap 8px
* - Chip "+N": mesma altura, mostra overflow
* - Dropdown: gap 4px do campo
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.select-group {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* ============================================================
LABEL
============================================================ */
.select-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
margin: 0 0 var(--spacing-2) 0;
}
.select-label-required::after {
content: '*';
color: var(--text-base-error-secondary);
margin-left: 2px;
}
/* ============================================================
CAMPO (trigger)
============================================================ */
.select-trigger {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-3);
width: 100%;
height: 40px;
padding: 0 var(--spacing-3);
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-regular);
line-height: 40px;
color: var(--text-base-neutral-default);
caret-color: transparent;
background-color: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: var(--radius-default);
cursor: pointer;
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--transition-fast),
border-color var(--transition-fast);
}
/* Placeholder */
.select-placeholder {
color: var(--text-base-neutral-subtle);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Valor selecionado */
.select-value {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Chevron */
.select-chevron {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--icon-base-neutral-default);
transition: transform var(--transition-fast);
margin-left: auto;
}
.select-chevron svg {
width: 16px;
height: 16px;
}
.select-group.is-open .select-chevron {
transform: rotate(180deg);
}
/* ============================================================
ESTADOS DO CAMPO
============================================================ */
/* Hover */
.select-trigger:hover:not(.is-disabled) {
background-color: var(--surface-base-neutral-container-hover);
}
/* Focus / Open */
.select-group.is-open .select-trigger {
border-color: var(--border-base-neutral-strong);
}
/* Disabled */
.select-trigger.is-disabled {
background-color: var(--surface-base-neutral-container-emphasis);
border-color: var(--border-base-neutral-subtle);
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
.select-trigger.is-disabled .select-chevron {
color: var(--icon-base-neutral-subtle);
}
/* ============================================================
ERRO
============================================================ */
.select-group.has-error .select-trigger {
border-color: var(--border-base-error-default);
color: var(--text-base-error-default);
}
.select-group.has-error .select-chevron {
color: var(--icon-base-error-secondary);
}
.select-group.has-error .select-value {
color: var(--text-base-error-default);
}
/* ============================================================
HELPER TEXT
============================================================ */
.select-helper {
font-family: var(--font-body);
font-size: var(--font-size-p6);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p6);
color: var(--text-base-neutral-default);
margin: var(--spacing-1) 0 0 0;
}
.select-group.has-error .select-helper {
color: var(--text-base-error-default);
}
/* ============================================================
DROPDOWN (posicionamento)
============================================================ */
.select-container {
position: relative;
width: 100%;
}
.select-container .dropdown-menu {
width: 100%;
top: calc(100% + 4px);
left: 0;
}
/* ============================================================
CHIPS (multi-select)
============================================================ */
.select-chips {
display: flex;
align-items: center;
gap: var(--spacing-2);
flex: 1;
min-width: 0;
overflow: hidden;
}
.select-chip {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 2px 6px;
border-radius: 4px;
background: var(--surface-base-neutral-container-emphasis);
flex-shrink: 0;
font-family: var(--font-body);
font-size: var(--font-size-p5);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p5);
color: var(--text-base-neutral-default);
white-space: nowrap;
}
.select-chip-close {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
cursor: pointer;
color: var(--icon-base-neutral-subtle);
flex-shrink: 0;
border: none;
background: none;
padding: 0;
}
.select-chip-close svg {
width: 12px;
height: 12px;
}
.select-chip-close:hover {
color: var(--icon-base-neutral-default);
}
/* Chip de overflow (+N) */
.select-chip--overflow {
background: var(--surface-base-neutral-container-emphasis);
min-width: 26px;
justify-content: center;
padding: 2px 6px;
}
/* Multi-select trigger com chips */
.select-trigger--multi {
height: auto;
min-height: 40px;
padding: 6px var(--spacing-3);
line-height: var(--line-height-p3);
}
/* ============================================================
PRINT
============================================================ */
@media print {
.select-container .dropdown-menu {
display: none !important;
}
}
/* === components/selection-card.css === */
/**
* SELECTION CARD
*
* Cards selecionaveis para escolha unica de opcoes (radio visual).
*
* Layouts: horizontal (max 4 cards) e vertical (sem limite)
* Variantes: padrao (icone + titulo) e com subtitulo
* Estados: default, hover, selecionado, desativado
* Dark mode automatico via variaveis semanticas
*
* Estrutura HTML:
* fieldset.selection-card-group
* legend.selection-card-label
* .selection-card-options
* label.selection-card
* input.selection-card-input[type="radio"]
* .selection-card-icon > svg
* .selection-card-text
* .selection-card-title
* .selection-card-subtitle (opcional)
*
* @version 2.0.0
*/
/* ============================================================
GROUP
============================================================ */
.selection-card-group {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
padding: 0;
border: none;
margin: 0;
}
/* Label do grupo */
.selection-card-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: var(--text-base-neutral-default);
padding: 0;
float: left;
width: 100%;
}
.selection-card-label-required::after {
content: '*';
color: var(--text-base-error-secondary);
margin-left: 2px;
}
/* ============================================================
OPTIONS CONTAINER
============================================================ */
.selection-card-options {
display: flex;
flex-direction: row;
gap: 12px;
width: 100%;
}
/* Vertical */
.selection-card-group--vertical .selection-card-options {
flex-direction: column;
}
/* ============================================================
CARD
============================================================ */
.selection-card {
display: flex;
flex-direction: column;
gap: 32px;
flex: 1;
min-width: 0;
padding: 12px;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: border-color 150ms ease;
position: relative;
}
/* ============================================================
INPUT HIDDEN
============================================================ */
.selection-card-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
ICON
============================================================ */
.selection-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text-base-neutral-secondary);
transition: color 150ms ease;
}
.selection-card-icon svg {
width: 18px;
height: 18px;
}
/* ============================================================
TEXT
============================================================ */
.selection-card-text {
display: flex;
flex-direction: column;
}
.selection-card-title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: var(--text-base-neutral-secondary);
transition: color 150ms ease;
}
.selection-card-subtitle {
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
line-height: 22px;
color: var(--text-base-neutral-subtle);
transition: color 150ms ease;
}
/* ============================================================
HOVER
============================================================ */
.selection-card:hover:not(:has(.selection-card-input:disabled)):not(:has(.selection-card-input:checked)) {
border-color: var(--border-base-neutral-strong);
}
.selection-card:hover:not(:has(.selection-card-input:disabled)):not(:has(.selection-card-input:checked)) .selection-card-icon {
color: var(--text-base-neutral-default);
}
.selection-card:hover:not(:has(.selection-card-input:disabled)):not(:has(.selection-card-input:checked)) .selection-card-title {
color: var(--text-base-neutral-default);
}
/* ============================================================
SELECTED
============================================================ */
.selection-card:has(.selection-card-input:checked) {
border-color: var(--border-base-brand-default);
}
.selection-card:has(.selection-card-input:checked) .selection-card-icon {
color: var(--icon-base-brand-secondary);
}
.selection-card:has(.selection-card-input:checked) .selection-card-title {
color: var(--text-base-neutral-default);
}
/* ============================================================
DISABLED
============================================================ */
.selection-card:has(.selection-card-input:disabled) {
background: var(--surface-base-neutral-container-emphasis);
border-color: var(--surface-base-neutral-container-emphasis);
cursor: not-allowed;
}
.selection-card:has(.selection-card-input:disabled) .selection-card-icon {
color: var(--text-base-neutral-subtle);
}
.selection-card:has(.selection-card-input:disabled) .selection-card-title {
color: var(--text-base-neutral-subtle);
}
.selection-card:has(.selection-card-input:disabled) .selection-card-subtitle {
color: var(--text-base-neutral-subtle);
}
/* ============================================================
FOCUS
============================================================ */
.selection-card:has(.selection-card-input:focus-visible) {
outline: 2px solid var(--border-base-brand-default);
outline-offset: 2px;
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.selection-card-options {
flex-direction: column;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
@media (prefers-reduced-motion: reduce) {
.selection-card,
.selection-card-icon,
.selection-card-title,
.selection-card-subtitle {
transition: none;
}
}
@media (forced-colors: active) {
.selection-card {
border-color: ButtonText;
}
.selection-card:has(.selection-card-input:checked) {
border-color: Highlight;
border-width: 2px;
}
.selection-card:has(.selection-card-input:focus-visible) {
outline-color: Highlight;
}
}
/* === components/sidebar-tabs.css === */
/**
* Sidebar Tabs Component
*
* Componente unificado de sidebar com tabs para navegação lateral.
* Suporta dois temas: listing (listar-dashboard) e detail (modal detalhar).
*
* @version 1.0.0
* @date 2026-01-03
*/
/* ==========================================================================
CSS VARIABLES - Tokens configuráveis
========================================================================== */
:root {
/* Dimensões base */
--sidebar-width: 290px;
--sidebar-padding: 24px 20px 0 72px;
--sidebar-gap: 8px;
/* Tab dimensions */
--sidebar-tab-height: 48px;
--sidebar-tab-active-height: 40px;
--sidebar-tab-padding: 12px 16px;
--sidebar-tab-radius: 8px;
--sidebar-tab-gap: 8px;
/* Tema Listing (Light) */
--sidebar-listing-bg: var(--color-bg-tertiary, #ECEDF2);
--sidebar-listing-tab-bg: transparent;
--sidebar-listing-tab-active-bg: rgba(206, 211, 226, 0.4);
--sidebar-listing-text: var(--color-text-secondary, #394360);
--sidebar-listing-text-active: var(--color-text-primary, #12151F);
/* Tema Detail (Dark sidebar) */
--sidebar-detail-bg: #12151F;
--sidebar-detail-tab-bg: transparent;
--sidebar-detail-tab-active-bg: rgba(246, 246, 249, 0.1);
--sidebar-detail-text: #7A839F;
--sidebar-detail-text-active: #F6F6F9;
--sidebar-detail-width: 272px;
}
/* Dark mode overrides */
html.dark,
[data-theme="dark"] {
--sidebar-listing-bg: var(--color-bg-primary, #10141D);
--sidebar-listing-tab-active-bg: #1D2333;
--sidebar-listing-text: #BFC3CF;
--sidebar-listing-text-active: #E0E2EB;
--sidebar-detail-bg: #2A2F41;
--sidebar-detail-width: 200px;
--sidebar-detail-text: #A2A8B9;
--sidebar-detail-text-active: #E0E2EB;
}
/* ==========================================================================
BASE COMPONENT
========================================================================== */
.sidebar-tabs {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.sidebar-tabs__nav {
display: flex;
flex-direction: column;
gap: var(--sidebar-gap);
list-style: none;
padding: 0;
margin: 0;
flex: 1;
overflow-y: auto;
}
/* ==========================================================================
TEMA: LISTING
========================================================================== */
.sidebar-tabs--listing {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
padding: var(--sidebar-padding);
background: var(--sidebar-listing-bg);
border-right: 1px solid var(--color-border, #CED3E2);
}
.sidebar-tabs--listing .sidebar-tabs__tab {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: var(--sidebar-tab-height);
padding: var(--sidebar-tab-padding);
background: var(--sidebar-listing-tab-bg);
border: none;
border-radius: var(--sidebar-tab-radius);
cursor: pointer;
transition: all 0.2s ease;
}
.sidebar-tabs--listing .sidebar-tabs__label {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: var(--sidebar-listing-text);
flex: 1;
text-align: left;
}
.sidebar-tabs--listing .sidebar-tabs__arrow {
width: 8px;
height: 12px;
opacity: 0;
transition: opacity 0.2s ease;
}
.sidebar-tabs--listing .sidebar-tabs__arrow svg {
width: 100%;
height: 100%;
stroke: var(--sidebar-listing-text-active);
}
/* Tab active - Listing */
.sidebar-tabs--listing .sidebar-tabs__tab--active {
background: var(--sidebar-listing-tab-active-bg);
}
.sidebar-tabs--listing .sidebar-tabs__tab--active .sidebar-tabs__label {
color: var(--sidebar-listing-text-active);
}
.sidebar-tabs--listing .sidebar-tabs__tab--active .sidebar-tabs__arrow {
opacity: 1;
}
/* Hover - Listing */
.sidebar-tabs--listing .sidebar-tabs__tab:hover:not(.sidebar-tabs__tab--active) {
background: rgba(206, 211, 226, 0.2);
}
/* ==========================================================================
TEMA: DETAIL (Modal)
========================================================================== */
.sidebar-tabs--detail {
width: var(--sidebar-detail-width);
min-width: var(--sidebar-detail-width);
padding: 20px;
gap: 40px;
background: var(--sidebar-detail-bg);
border-radius: 8px 0 0 8px;
}
.sidebar-tabs--detail .sidebar-tabs__header {
display: flex;
flex-direction: column;
gap: 4px;
flex-shrink: 0;
}
.sidebar-tabs--detail .sidebar-tabs__title {
font-family: 'Space Grotesk', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 30px;
color: var(--sidebar-detail-text-active);
margin: 0;
}
.sidebar-tabs--detail .sidebar-tabs__subtitle {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--sidebar-detail-text);
margin: 0;
}
.sidebar-tabs--detail .sidebar-tabs__tab {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: var(--sidebar-tab-height);
padding: 8px 12px;
background: var(--sidebar-detail-tab-bg);
border: none;
border-radius: var(--sidebar-tab-radius);
cursor: pointer;
transition: all 0.15s ease;
}
.sidebar-tabs--detail .sidebar-tabs__label {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: var(--sidebar-detail-text);
flex: 1;
text-align: left;
}
.sidebar-tabs--detail .sidebar-tabs__arrow {
width: 20px;
height: 20px;
display: none;
}
.sidebar-tabs--detail .sidebar-tabs__arrow svg {
width: 100%;
height: 100%;
stroke: var(--sidebar-detail-text-active);
}
/* Tab active - Detail */
.sidebar-tabs--detail .sidebar-tabs__tab--active {
height: var(--sidebar-tab-active-height);
background: var(--sidebar-detail-tab-active-bg);
}
.sidebar-tabs--detail .sidebar-tabs__tab--active .sidebar-tabs__label {
color: var(--sidebar-detail-text-active);
}
.sidebar-tabs--detail .sidebar-tabs__tab--active .sidebar-tabs__arrow {
display: flex;
}
/* Hover - Detail */
.sidebar-tabs--detail .sidebar-tabs__tab:hover:not(.sidebar-tabs__tab--active) {
background: rgba(246, 246, 249, 0.05);
}
/* Footer icon */
.sidebar-tabs--detail .sidebar-tabs__footer {
display: flex;
justify-content: center;
align-items: center;
margin-top: auto;
flex-shrink: 0;
}
.sidebar-tabs--detail .sidebar-tabs__footer-icon i {
font-size: 80px;
color: var(--color-neutral-700, #394360);
opacity: 0.3;
}
/* === components/sidebar.css === */
/**
* SIDEBAR
*
* Menu lateral de navegação com módulos expansíveis.
* Apenas um módulo pode ficar aberto por vez.
*
* Estrutura: back button (opcional) + lista de módulos com subitens.
* Dark mode automático via tokens semânticos.
*
* @version 2.0.0
* @date 2026-03-25
* @source Figma > UI Kit > Sidebar
*/
/* ============================================
CONTAINER
============================================ */
.sidebar {
display: flex;
flex-direction: column;
width: 340px;
height: 100%;
padding: var(--spacing-6, 24px) 0 var(--spacing-6, 24px) var(--spacing-6, 24px);
gap: var(--spacing-2, 8px);
background: var(--surface-base-neutral-container-default);
overflow: hidden;
}
/* ============================================
BOTÃO VOLTAR
============================================ */
.sidebar-back {
display: inline-flex;
align-items: center;
gap: var(--spacing-2, 8px);
padding: var(--spacing-1, 4px) var(--spacing-6, 24px) var(--spacing-1, 4px) 0;
background: none;
border: none;
cursor: pointer;
color: var(--text-base-neutral-secondary);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p3, 24px);
transition: color var(--transition-fast, 150ms ease-in-out);
}
.sidebar-back:hover {
color: var(--text-base-neutral-default);
}
.sidebar-back svg {
width: 16px;
height: 16px;
}
/* ============================================
NAVEGAÇÃO (lista de módulos)
============================================ */
.sidebar-nav {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 8px);
padding-right: var(--spacing-6, 24px);
}
/* ============================================
MÓDULO (header + subitens)
============================================ */
.sidebar-module {
display: flex;
flex-direction: column;
}
/* ============================================
HEADER DO MÓDULO (ícone + label + chevron)
============================================ */
.sidebar-module-header {
display: flex;
align-items: center;
gap: var(--spacing-3, 12px);
height: 40px;
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
border-radius: var(--radius-default, 6px);
background: transparent;
border: none;
cursor: pointer;
width: 100%;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p3, 24px);
color: var(--text-base-neutral-secondary);
transition: background var(--transition-fast, 150ms ease-in-out),
color var(--transition-fast, 150ms ease-in-out);
}
.sidebar-module-header:hover {
background: var(--surface-base-neutral-container-hover);
color: var(--text-base-neutral-default);
}
.sidebar-module-header:hover .sidebar-module-icon {
color: var(--icon-base-neutral-default);
}
.sidebar-module-header:hover .sidebar-module-chevron {
opacity: 1;
}
/* Header ativo (módulo expandido) */
.sidebar-module.is-open .sidebar-module-header {
background: var(--surface-base-neutral-container-hover);
color: var(--text-base-neutral-default);
}
.sidebar-module.is-open .sidebar-module-icon {
color: var(--surface-base-brand-container-medium);
}
.sidebar-module.is-open .sidebar-module-chevron {
opacity: 1;
transform: rotate(180deg);
}
/* ============================================
ÍCONE DO MÓDULO
============================================ */
.sidebar-module-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--icon-base-neutral-secondary);
transition: color var(--transition-fast, 150ms ease-in-out);
}
.sidebar-module-icon svg {
width: 18px;
height: 18px;
}
/* ============================================
LABEL DO MÓDULO
============================================ */
.sidebar-module-label {
flex: 1;
text-align: left;
}
/* ============================================
CHEVRON
============================================ */
.sidebar-module-chevron {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0;
color: var(--icon-base-neutral-subtle);
transition: opacity var(--transition-fast, 150ms ease-in-out),
transform var(--transition-fast, 150ms ease-in-out);
}
.sidebar-module-chevron svg {
width: 16px;
height: 16px;
}
/* ============================================
SUBITENS (expandível)
============================================ */
.sidebar-module-items {
display: none;
flex-direction: row;
gap: var(--spacing-5, 20px);
padding-left: var(--spacing-5, 20px);
margin-top: var(--spacing-3, 12px);
}
.sidebar-module.is-open .sidebar-module-items {
display: flex;
}
/* Linha vertical */
.sidebar-module-line {
width: 1px;
flex-shrink: 0;
background: var(--border-base-neutral-default);
}
/* Lista de subitens */
.sidebar-module-list {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
/* ============================================
SUBITEM
============================================ */
.sidebar-module-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
border-radius: var(--radius-default, 6px);
color: var(--text-base-neutral-secondary);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p3, 24px);
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast, 150ms ease-in-out),
color var(--transition-fast, 150ms ease-in-out);
}
.sidebar-module-item:hover {
background: var(--surface-base-neutral-container-hover);
color: var(--text-base-neutral-default);
}
.sidebar-module-item:hover .sidebar-item-arrow {
opacity: 1;
}
.sidebar-module-item.is-active {
background: var(--surface-base-neutral-container-hover);
color: var(--text-base-neutral-default);
}
.sidebar-module-item.is-active .sidebar-item-arrow {
opacity: 1;
}
/* Seta direita do subitem */
.sidebar-item-arrow {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0;
color: var(--icon-base-neutral-subtle);
transition: opacity var(--transition-fast, 150ms ease-in-out);
}
.sidebar-item-arrow svg {
width: 16px;
height: 16px;
}
/* === components/simple-table.css === */
/**
* Simple Table
*
* Lista key-value com borda esquerda accent.
* Label (p4 regular) + Value (p3 medium).
* 4 variantes: padrão, com botão, com badge, com descrição.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Row padding: 12px top/bottom, 20px left
* - Row left border: 1px --border-base-neutral-default
* - Label: p4 regular, --text-base-neutral-secondary, largura pelo conteúdo
* - Value: p3 medium, --text-base-neutral-default
* - Gap label-value: 56px (fixo, definido pela maior label)
* - Título: p3 medium, margin-bottom 12px
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER
============================================================ */
.simple-table {
display: flex;
flex-direction: column;
width: 100%;
}
/* ============================================================
HEADER (título + botão opcional)
============================================================ */
.simple-table-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
margin-bottom: var(--spacing-3);
}
.simple-table-title {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
margin-bottom: var(--spacing-3);
}
/* Dentro do header, o margin é controlado pelo header */
.simple-table-header .simple-table-title {
margin-bottom: 0;
}
/* ============================================================
ROWS
============================================================ */
.simple-table-body {
display: flex;
flex-direction: column;
}
.simple-table-row {
display: flex;
align-items: center;
padding: var(--spacing-3) 0 var(--spacing-3) 20px;
border-left: 1px solid var(--border-base-neutral-default);
gap: 56px;
}
/* ============================================================
LABEL
============================================================ */
.simple-table-label {
font-family: var(--font-body);
font-size: var(--font-size-p4);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p4);
color: var(--text-base-neutral-secondary);
white-space: nowrap;
flex-shrink: 0;
width: 140px;
}
/* ============================================================
VALUE
============================================================ */
.simple-table-value {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-default);
flex: 1;
min-width: 0;
}
/* ============================================================
VALUE — COM DESCRIÇÃO
============================================================ */
.simple-table-value-group {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.simple-table-description {
font-family: var(--font-body);
font-size: var(--font-size-p4);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p4);
color: var(--text-base-neutral-secondary);
}
/* ============================================================
PRINT
============================================================ */
@media print {
.simple-table-row {
border-left-color: #000;
}
}
/* === components/skeleton.css === */
/**
* SKELETON LOADER COMPONENT
*
* Componente de placeholder de carregamento com suporte a:
* - Texto, imagem, botão, card
* - Animações de shimmer
* - Tamanhos variados
* - Dark mode completo
* - Acessibilidade WCAG 2.1 AA
*
* Baseado no Design System Figma - SIDASP
* @version 1.0.0
* @date 2025-01-27
*/
/* ============================================================
BASE SKELETON STRUCTURE
============================================================ */
/**
* Container do skeleton
*/
.skeleton {
display: inline-block;
position: relative;
overflow: hidden;
background: var(--color-neutral-200, var(--color-neutral-200));
border-radius: var(--radius-md, 8px);
/* Animação shimmer */
animation: skeletonShimmer 1.5s ease-in-out infinite;
}
/**
* Animação shimmer
*/
@keyframes skeletonShimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skeleton::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: skeletonShimmer 1.5s ease-in-out infinite;
}
/* ============================================================
VARIANTES
============================================================ */
/**
* Skeleton de texto
*/
.skeleton-text {
height: 16px;
border-radius: var(--radius-sm, 6px);
}
.skeleton-text--sm {
height: 12px;
}
.skeleton-text--lg {
height: 20px;
}
/**
* Skeleton de título
*/
.skeleton-title {
height: 24px;
border-radius: var(--radius-sm, 6px);
margin-bottom: var(--spacing-sm, 8px);
}
.skeleton-title--sm {
height: 20px;
}
.skeleton-title--lg {
height: 32px;
}
/**
* Skeleton de imagem
*/
.skeleton-image {
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius-md, 8px);
}
.skeleton-image--circle {
border-radius: 50%;
}
/**
* Skeleton de botão
*/
.skeleton-button {
height: 40px;
border-radius: var(--radius-md, 8px);
width: 120px;
}
.skeleton-button--sm {
height: 32px;
width: 100px;
}
.skeleton-button--lg {
height: 48px;
width: 160px;
}
/**
* Skeleton de card
*/
.skeleton-card {
padding: var(--spacing-lg, 20px);
border-radius: var(--radius-lg, 12px);
background: var(--color-bg-primary, var(--color-bg-primary));
border: 1px solid var(--color-border, var(--color-neutral-400));
}
.skeleton-card-header {
display: flex;
align-items: center;
gap: var(--spacing-md, 16px);
margin-bottom: var(--spacing-md, 16px);
}
.skeleton-card-body {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
.skeleton-card-footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm, 8px);
margin-top: var(--spacing-md, 16px);
}
/**
* Skeleton de avatar
*/
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.skeleton-avatar--sm {
width: 32px;
height: 32px;
}
.skeleton-avatar--lg {
width: 56px;
height: 56px;
}
/* ============================================================
GRUPOS DE SKELETON
============================================================ */
.skeleton-group {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
.skeleton-group--horizontal {
flex-direction: row;
align-items: center;
}
/* ============================================================
DARK MODE
============================================================ */
.dark .skeleton,
.dark-mode .skeleton,
[data-theme="dark"] .skeleton {
background: var(--color-neutral-700, var(--color-neutral-700));
}
.dark .skeleton::after,
.dark-mode .skeleton::after,
[data-theme="dark"] .skeleton::after {
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
}
.dark .skeleton-card,
.dark-mode .skeleton-card,
[data-theme="dark"] .skeleton-card {
background: var(--color-bg-secondary, var(--color-bg-secondary));
border-color: var(--color-border-dark, var(--color-neutral-700));
}
/* === components/slider.css === */
/**
* SLIDER / RANGE COMPONENT
*
* Componente de controle deslizante (slider/range) com suporte a:
* - Single e range (dois valores)
* - Com/sem labels
* - Tamanhos: sm, md, lg
* - Estados: default, disabled
* - Dark mode completo
* - Acessibilidade WCAG 2.1 AA (ARIA, keyboard navigation)
*
* Baseado no Design System Figma - SIDASP
* @version 1.0.0
* @date 2025-01-27
*/
/* ============================================================
BASE SLIDER STRUCTURE
============================================================ */
/**
* Container do slider
*/
.slider {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
/**
* Input range (nativo, estilizado)
*/
.slider-input {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-neutral-200, var(--color-neutral-200));
border-radius: var(--radius-full, 9999px);
outline: none;
cursor: pointer;
}
/* Webkit (Chrome, Safari) */
.slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--color-accent-300, var(--color-accent-300));
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform var(--transition-base, 200ms ease-in-out);
}
.slider-input::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.slider-input::-webkit-slider-thumb:active {
transform: scale(1.2);
}
/* Firefox */
.slider-input::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--color-accent-300, var(--color-accent-300));
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform var(--transition-base, 200ms ease-in-out);
}
.slider-input::-moz-range-thumb:hover {
transform: scale(1.1);
}
.slider-input::-moz-range-thumb:active {
transform: scale(1.2);
}
.slider-input::-moz-range-track {
background: var(--color-neutral-200, var(--color-neutral-200));
border-radius: var(--radius-full, 9999px);
height: 6px;
}
/* Track preenchido (Webkit) */
.slider-input::-webkit-slider-runnable-track {
height: 6px;
background: var(--color-neutral-200, var(--color-neutral-200));
border-radius: var(--radius-full, 9999px);
}
/* Disabled */
.slider-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.slider-input:disabled::-webkit-slider-thumb,
.slider-input:disabled::-moz-range-thumb {
cursor: not-allowed;
}
/* Focus */
.slider-input:focus-visible {
outline: 2px solid var(--color-accent-300, var(--color-accent-300));
outline-offset: 4px;
border-radius: var(--radius-full, 9999px);
}
/**
* Labels do slider
*/
.slider-labels {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 14px);
color: var(--color-text-secondary, var(--color-neutral-600));
}
.slider-label {
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-primary, var(--color-neutral-800));
}
.slider-value {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-accent-300, var(--color-accent-300));
}
.slider-min,
.slider-max {
font-size: var(--font-size-p4, 14px);
}
/* ============================================================
TAMANHOS
============================================================ */
.slider--sm .slider-input {
height: 4px;
}
.slider--sm .slider-input::-webkit-slider-thumb,
.slider--sm .slider-input::-moz-range-thumb {
width: 16px;
height: 16px;
}
.slider--lg .slider-input {
height: 8px;
}
.slider--lg .slider-input::-webkit-slider-thumb,
.slider--lg .slider-input::-moz-range-thumb {
width: 24px;
height: 24px;
}
/* ============================================================
VARIANTES
============================================================ */
.slider--success .slider-input::-webkit-slider-thumb,
.slider--success .slider-input::-moz-range-thumb {
background: var(--color-green-500, var(--color-green-500));
}
.slider--warning .slider-input::-webkit-slider-thumb,
.slider--warning .slider-input::-moz-range-thumb {
background: var(--color-yellow-500, var(--color-yellow-500));
}
.slider--error .slider-input::-webkit-slider-thumb,
.slider--error .slider-input::-moz-range-thumb {
background: var(--color-red-500, var(--color-red-500));
}
/* ============================================================
DARK MODE
============================================================ */
.dark .slider-input,
.dark-mode .slider-input,
[data-theme="dark"] .slider-input {
background: var(--color-neutral-700, var(--color-neutral-700));
}
.dark .slider-input::-webkit-slider-runnable-track,
.dark-mode .slider-input::-webkit-slider-runnable-track,
[data-theme="dark"] .slider-input::-webkit-slider-runnable-track {
background: var(--color-neutral-700, var(--color-neutral-700));
}
.dark .slider-input::-moz-range-track,
.dark-mode .slider-input::-moz-range-track,
[data-theme="dark"] .slider-input::-moz-range-track {
background: var(--color-neutral-700, var(--color-neutral-700));
}
.dark .slider-label,
.dark-mode .slider-label,
[data-theme="dark"] .slider-label {
color: var(--color-text-primary, var(--color-text-primary));
}
.dark .slider-min,
.dark-mode .slider-min,
[data-theme="dark"] .slider-min,
.dark .slider-max,
.dark-mode .slider-max,
[data-theme="dark"] .slider-max {
color: var(--color-text-secondary, var(--color-text-secondary));
}
/* === components/stepper.css === */
/**
* Stepper (Wizard / Progress Steps)
*
* Componente de navegação por etapas/passos
* Baseado nas especificações do Figma - Design System SIDASP
*
* @version 1.0.0
* @date 2025-10-31
*/
/* ============================================================
BASE STEPPER
============================================================ */
/**
* Container principal do stepper
*/
.stepper {
display: flex;
flex-direction: row;
width: 100%;
position: relative;
}
/**
* Lista de steps
*/
.stepper-list {
display: flex;
flex-direction: column;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
/**
* Item individual (step)
*/
.stepper-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
position: relative;
transition: all 0.3s ease;
}
.stepper-item:first-child {
padding-top: 0;
}
.stepper-item:last-child {
padding-bottom: 0;
}
/**
* Linha conectora entre steps
*/
.stepper-item::before {
content: '';
position: absolute;
left: 20px;
top: 52px;
bottom: -16px;
width: 2px;
background: #E5E7EB;
transition: background 0.3s ease;
}
.stepper-item:last-child::before {
display: none;
}
/**
* Ícone do step
*/
.stepper-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #E5E7EB;
color: #8D95A8;
font-size: 20px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.stepper-icon .material-icons {
font-size: 20px;
}
/**
* Conteúdo do step (título + descrição)
*/
.stepper-content {
flex: 1;
padding-top: 4px;
}
.stepper-title {
font-size: 16px;
font-weight: 600;
color: #5A6478;
margin: 0 0 4px 0;
line-height: 1.4;
transition: color 0.3s ease;
}
.stepper-description {
font-size: 14px;
color: #8D95A8;
margin: 0;
line-height: 1.5;
transition: color 0.3s ease;
}
/* ============================================================
ESTADOS DO STEP
============================================================ */
/**
* Step Ativo (atual)
*/
.stepper-item.active .stepper-icon {
background: var(--color-accent-300);
color: var(--color-text-light);
box-shadow: 0 2px 8px rgba(63, 104, 251, 0.3);
}
.stepper-item.active .stepper-title {
color: var(--color-neutral-800);
font-weight: 600;
}
.stepper-item.active .stepper-description {
color: #5A6478;
}
.stepper-item.active::before {
background: #E5E7EB;
}
/**
* Step Completo (concluído)
*/
.stepper-item.completed .stepper-icon {
background: #47B881;
color: var(--color-text-light);
}
.stepper-item.completed .stepper-title {
color: var(--color-neutral-800);
}
.stepper-item.completed .stepper-description {
color: #5A6478;
}
.stepper-item.completed::before {
background: #47B881;
}
/**
* Step com Erro
*/
.stepper-item.error .stepper-icon {
background: #DC2626;
color: var(--color-text-light);
}
.stepper-item.error .stepper-title {
color: #DC2626;
}
.stepper-item.error .stepper-description {
color: #DC2626;
}
.stepper-item.error::before {
background: #DC2626;
}
/**
* Step Desabilitado
*/
.stepper-item.disabled {
opacity: 0.5;
pointer-events: none;
}
.stepper-item.disabled .stepper-icon {
background: #F8F9FB;
color: var(--color-neutral-400);
}
.stepper-item.disabled .stepper-title,
.stepper-item.disabled .stepper-description {
color: var(--color-neutral-400);
}
/* ============================================================
STEPPER CLICÁVEL
============================================================ */
.stepper-clickable .stepper-item {
cursor: pointer;
}
.stepper-clickable .stepper-item:not(.disabled):hover .stepper-icon {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.stepper-clickable .stepper-item:not(.disabled):hover .stepper-title {
color: var(--color-accent-300);
}
.stepper-clickable .stepper-item:not(.disabled):active .stepper-icon {
transform: scale(0.98);
}
/* ============================================================
STEPPER HORIZONTAL
============================================================ */
.stepper-horizontal {
flex-direction: row;
}
.stepper-horizontal .stepper-list {
flex-direction: row;
align-items: flex-start;
width: 100%;
}
.stepper-horizontal .stepper-item {
flex: 1;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 16px;
position: relative;
}
.stepper-horizontal .stepper-item::before {
left: 50%;
right: -50%;
top: 20px;
bottom: auto;
width: calc(100% - 40px);
height: 2px;
transform: translateX(20px);
}
.stepper-horizontal .stepper-item:last-child::before {
display: none;
}
.stepper-horizontal .stepper-content {
padding-top: 12px;
}
.stepper-horizontal .stepper-title {
text-align: center;
}
.stepper-horizontal .stepper-description {
text-align: center;
}
/* ============================================================
STEPPER COM NÚMEROS
============================================================ */
.stepper-numbered .stepper-icon {
font-size: 16px;
font-weight: 600;
}
/* ============================================================
STEPPER SIZES
============================================================ */
.stepper-sm .stepper-icon {
width: 32px;
height: 32px;
border-radius: 6px;
}
.stepper-sm .stepper-icon .material-icons {
font-size: 16px;
}
.stepper-sm .stepper-title {
font-size: 14px;
}
.stepper-sm .stepper-description {
font-size: 12px;
}
.stepper-sm .stepper-item::before {
left: 16px;
}
.stepper-lg .stepper-icon {
width: 48px;
height: 48px;
border-radius: 10px;
}
.stepper-lg .stepper-icon .material-icons {
font-size: 24px;
}
.stepper-lg .stepper-title {
font-size: 18px;
}
.stepper-lg .stepper-description {
font-size: 16px;
}
.stepper-lg .stepper-item::before {
left: 24px;
}
/* ============================================================
STEPPER COMPACT (Sem descrição)
============================================================ */
.stepper-compact .stepper-description {
display: none;
}
.stepper-compact .stepper-item {
padding: 12px 0;
}
/* ============================================================
STEPPER COM BADGE DE STATUS
============================================================ */
.stepper-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
margin-left: 8px;
}
.stepper-badge-pending {
background: #F8F9FB;
color: #5A6478;
}
.stepper-badge-progress {
background: #EEF3FF;
color: var(--color-accent-300);
}
.stepper-badge-completed {
background: #E8F5EE;
color: #47B881;
}
.stepper-badge-error {
background: #FEE2E2;
color: #DC2626;
}
/* ============================================================
STEPPER DARK MODE
============================================================ */
.stepper-dark,
.dark .stepper {
color: #E5E7EB;
}
.stepper-dark .stepper-item::before,
.dark .stepper-item::before {
background: var(--color-neutral-700);
}
.stepper-dark .stepper-icon,
.dark .stepper-icon {
background: var(--color-neutral-700);
color: #707896;
}
.stepper-dark .stepper-title,
.dark .stepper-title {
color: var(--color-neutral-400);
}
.stepper-dark .stepper-description,
.dark .stepper-description {
color: #707896;
}
.stepper-dark .stepper-item.active .stepper-title,
.dark .stepper-item.active .stepper-title {
color: var(--color-text-light);
}
.stepper-dark .stepper-item.active .stepper-description,
.dark .stepper-item.active .stepper-description {
color: var(--color-neutral-400);
}
.stepper-dark .stepper-item.completed .stepper-title,
.dark .stepper-item.completed .stepper-title {
color: var(--color-text-light);
}
.stepper-dark .stepper-item.completed .stepper-description,
.dark .stepper-item.completed .stepper-description {
color: var(--color-neutral-400);
}
.stepper-dark .stepper-item.disabled .stepper-icon,
.dark .stepper-item.disabled .stepper-icon {
background: #1A1D29;
color: #3E4354;
}
/* ============================================================
STEPPER COM CARD
============================================================ */
.stepper-card {
background: var(--color-text-light);
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 24px;
}
.stepper-dark.stepper-card,
.dark .stepper-card {
background: #1A1D29;
border-color: var(--color-neutral-700);
}
/* ============================================================
STEPPER COM HEADER
============================================================ */
.stepper-header {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #E5E7EB;
}
.stepper-dark .stepper-header,
.dark .stepper-header {
border-bottom-color: var(--color-neutral-700);
}
.stepper-header-title {
font-size: 20px;
font-weight: 600;
color: var(--color-neutral-800);
margin: 0 0 4px 0;
}
.stepper-dark .stepper-header-title,
.dark .stepper-header-title {
color: var(--color-text-light);
}
.stepper-header-subtitle {
font-size: 14px;
color: #5A6478;
margin: 0;
}
.stepper-dark .stepper-header-subtitle,
.dark .stepper-header-subtitle {
color: var(--color-neutral-400);
}
/* ============================================================
STEPPER COM BOTÕES DE NAVEGAÇÃO
============================================================ */
.stepper-navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid #E5E7EB;
}
.stepper-dark .stepper-navigation,
.dark .stepper-navigation {
border-top-color: var(--color-neutral-700);
}
.stepper-nav-left {
display: flex;
gap: 12px;
}
.stepper-nav-right {
display: flex;
gap: 12px;
margin-left: auto;
}
/* ============================================================
STEPPER PROGRESS BAR
============================================================ */
.stepper-progress {
height: 6px;
background: #E5E7EB;
border-radius: 3px;
margin-bottom: 24px;
overflow: hidden;
}
.stepper-dark .stepper-progress,
.dark .stepper-progress {
background: var(--color-neutral-700);
}
.stepper-progress-bar {
height: 100%;
background: var(--color-accent-300);
border-radius: 3px;
transition: width 0.3s ease;
}
.stepper-progress-text {
font-size: 14px;
color: #5A6478;
text-align: center;
margin-bottom: 12px;
font-weight: 500;
}
.stepper-dark .stepper-progress-text,
.dark .stepper-progress-text {
color: var(--color-neutral-400);
}
/* ============================================================
STEPPER COM ÍCONES CUSTOMIZADOS
============================================================ */
.stepper-item[data-icon]::after {
content: attr(data-icon);
}
/* ============================================================
ANIMAÇÕES
============================================================ */
@keyframes stepper-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stepper-animated .stepper-item {
animation: stepper-fade-in 0.3s ease forwards;
}
.stepper-animated .stepper-item:nth-child(1) { animation-delay: 0s; }
.stepper-animated .stepper-item:nth-child(2) { animation-delay: 0.05s; }
.stepper-animated .stepper-item:nth-child(3) { animation-delay: 0.1s; }
.stepper-animated .stepper-item:nth-child(4) { animation-delay: 0.15s; }
.stepper-animated .stepper-item:nth-child(5) { animation-delay: 0.2s; }
.stepper-animated .stepper-item:nth-child(6) { animation-delay: 0.25s; }
.stepper-animated .stepper-item:nth-child(7) { animation-delay: 0.3s; }
.stepper-animated .stepper-item:nth-child(8) { animation-delay: 0.35s; }
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.stepper-horizontal {
flex-direction: column;
}
.stepper-horizontal .stepper-list {
flex-direction: column;
}
.stepper-horizontal .stepper-item {
flex-direction: row;
align-items: flex-start;
text-align: left;
padding: 16px 0;
}
.stepper-horizontal .stepper-item::before {
left: 20px;
right: auto;
top: 52px;
bottom: -16px;
width: 2px;
height: auto;
transform: none;
}
.stepper-horizontal .stepper-content {
padding-top: 4px;
}
.stepper-horizontal .stepper-title,
.stepper-horizontal .stepper-description {
text-align: left;
}
.stepper-navigation {
flex-direction: column;
}
.stepper-nav-left,
.stepper-nav-right {
width: 100%;
flex-direction: column;
}
.stepper-nav-left button,
.stepper-nav-right button {
width: 100%;
}
}
@media (max-width: 480px) {
.stepper-item {
gap: 12px;
}
.stepper-icon {
width: 36px;
height: 36px;
}
.stepper-icon .material-icons {
font-size: 18px;
}
.stepper-title {
font-size: 15px;
}
.stepper-description {
font-size: 13px;
}
.stepper-item::before {
left: 18px;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
.stepper-item:focus {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
.stepper-item,
.stepper-icon,
.stepper-progress-bar {
animation: none !important;
transition: none !important;
}
}
/* Screen reader only */
.stepper-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ============================================================
IMPRESSÃO
============================================================ */
@media print {
.stepper-navigation {
display: none;
}
.stepper-item::before {
background: #000 !important;
}
}
/* === components/strategic-matrix.css === */
/**
* Strategic Matrix
*
* Matriz de programas x objetivos com barras de contribuição coloridas
* e cabeçalhos rotacionados. Suporte a scroll horizontal, sticky labels,
* animação de entrada e dark mode.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.strategic-matrix {
width: 100%;
}
.strategic-matrix__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Scroll wrapper */
.strategic-matrix__scroll-wrapper {
overflow-x: auto;
}
.strategic-matrix__scroll-wrapper::-webkit-scrollbar {
height: 6px;
}
.strategic-matrix__scroll-wrapper::-webkit-scrollbar-track {
background: var(--surface-base-neutral-container-default);
border-radius: 3px;
}
.strategic-matrix__scroll-wrapper::-webkit-scrollbar-thumb {
background: var(--border-base-neutral-default);
border-radius: 3px;
}
/* Table */
.strategic-matrix__table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
.strategic-matrix__table th,
.strategic-matrix__table td {
padding: 10px 12px;
}
/* Header */
.strategic-matrix__header {
background: var(--surface-base-neutral-container-default);
font-size: 12px;
font-weight: 600;
color: var(--text-base-neutral-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--border-base-neutral-default);
text-align: center;
}
/* Rotated header variant */
.strategic-matrix__header--rotated {
writing-mode: vertical-lr;
transform: rotate(180deg);
white-space: nowrap;
height: 120px;
vertical-align: bottom;
}
/* Row label (first column, sticky) */
.strategic-matrix__row-label {
position: sticky;
left: 0;
z-index: 1;
background: var(--surface-base-neutral-page-default);
font-weight: 600;
font-size: 13px;
color: var(--text-base-neutral-default);
text-align: left;
white-space: nowrap;
border-right: 1px solid var(--border-base-neutral-default);
}
/* Data cell */
.strategic-matrix__cell {
vertical-align: middle;
}
/* Bar wrapper */
.strategic-matrix__bar-wrapper {
height: 24px;
background: var(--surface-base-neutral-container-default);
border-radius: 4px;
overflow: hidden;
position: relative;
min-width: 80px;
}
/* Bar fill */
.strategic-matrix__bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 6px;
width: 0;
}
.strategic-matrix__bar--animated {
animation: barExpand 0.6s ease forwards;
}
/* Bar value label */
.strategic-matrix__bar-value {
font-size: 11px;
font-weight: 600;
color: var(--white);
}
/* Contribution level: high (>70%) */
.strategic-matrix__bar--high {
background: var(--green-400);
}
/* Contribution level: medium (40-70%) */
.strategic-matrix__bar--medium {
background: var(--yellow-400);
}
/* Contribution level: low (<40%) */
.strategic-matrix__bar--low {
background: var(--red-400);
}
/* Row hover */
.strategic-matrix__row:hover {
background: var(--surface-base-neutral-container-emphasis);
}
.strategic-matrix__row:hover .strategic-matrix__row-label {
background: var(--surface-base-neutral-container-emphasis);
}
/* Empty state */
.strategic-matrix__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* Keyframes */
@keyframes barExpand {
from {
width: 0;
}
to {
width: var(--bar-width);
}
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .strategic-matrix__header {
background: var(--surface-base-neutral-container-default);
}
.dark .strategic-matrix__row-label {
background: var(--surface-base-neutral-page-default);
}
.dark .strategic-matrix__row:hover .strategic-matrix__row-label {
background: var(--surface-base-neutral-container-emphasis);
}
.dark .strategic-matrix__bar--high {
background: rgba(179, 214, 132, 0.7);
}
.dark .strategic-matrix__bar--medium {
background: rgba(239, 211, 113, 0.7);
}
.dark .strategic-matrix__bar--low {
background: rgba(244, 153, 153, 0.7);
}
.dark .strategic-matrix__bar-value {
color: var(--neutral-800);
}
/* === components/switch.css === */
/**
* SWITCH COMPONENT
*
* Controle de alternancia (on/off).
* Estados: default, hover, active (on), disabled, disabled+active
*
* Baseado no Figma — Controls / Switch
* @version 2.0.0
* @date 2026-03-17
*/
/* ============================================
STRUCTURE
============================================ */
.switch {
display: inline-flex;
align-items: center;
gap: var(--spacing-3);
cursor: pointer;
user-select: none;
}
.switch-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* ============================================
LABEL (antes do track)
============================================ */
.switch-label {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--spacing-6);
color: var(--text-base-neutral-default);
cursor: pointer;
}
/* ============================================
TRACK
============================================ */
.switch-track {
position: relative;
display: inline-flex;
align-items: center;
width: 40px;
height: 20px;
background-color: var(--surface-base-neutral-container-emphasis);
border-radius: var(--radius-full);
transition: background-color var(--transition-base);
flex-shrink: 0;
}
/* ============================================
THUMB
============================================ */
.switch-thumb {
position: absolute;
left: 2px;
width: 16px;
height: 16px;
background-color: var(--icon-base-neutral-secondary);
border-radius: var(--radius-full);
transition: all var(--transition-base);
}
/* ============================================
HOVER (off)
============================================ */
.switch:hover .switch-thumb {
background-color: var(--icon-base-neutral-default);
}
/* ============================================
ACTIVE (on)
============================================ */
.switch-input:checked + .switch-label + .switch-track,
.switch-input:checked + .switch-track {
background-color: var(--surface-base-brand-container-medium);
}
.switch-input:checked + .switch-label + .switch-track .switch-thumb,
.switch-input:checked + .switch-track .switch-thumb {
background-color: var(--icon-base-neutral-white);
transform: translateX(20px);
}
/* ============================================
DISABLED (off)
============================================ */
.switch-input:disabled + .switch-label + .switch-track,
.switch-input:disabled + .switch-track {
cursor: not-allowed;
}
.switch-input:disabled + .switch-label + .switch-track .switch-thumb,
.switch-input:disabled + .switch-track .switch-thumb {
background-color: var(--icon-base-neutral-subtle);
}
.switch-input:disabled ~ .switch-label {
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
.switch:has(.switch-input:disabled) {
cursor: not-allowed;
}
/* Disabled nao reage a hover */
.switch:has(.switch-input:disabled):hover .switch-thumb {
background-color: var(--icon-base-neutral-subtle);
}
/* ============================================
DISABLED + ACTIVE (on)
============================================ */
.switch-input:disabled:checked + .switch-label + .switch-track,
.switch-input:disabled:checked + .switch-track {
background-color: var(--surface-base-neutral-container-emphasis);
}
.switch-input:disabled:checked + .switch-label + .switch-track .switch-thumb,
.switch-input:disabled:checked + .switch-track .switch-thumb {
background-color: var(--icon-base-neutral-subtle);
transform: translateX(20px);
}
/* ============================================
FOCUS
============================================ */
.switch-input:focus-visible + .switch-label + .switch-track,
.switch-input:focus-visible + .switch-track {
outline: 2px solid var(--border-base-brand-default);
outline-offset: 2px;
}
/* ============================================
ANIMATION
============================================ */
@media (prefers-reduced-motion: reduce) {
.switch-track,
.switch-thumb {
transition: none;
}
}
@media (prefers-contrast: high) {
.switch-track {
border: 2px solid;
}
.switch-input:focus-visible + .switch-label + .switch-track,
.switch-input:focus-visible + .switch-track {
outline: 3px solid;
outline-offset: 2px;
}
}
@media print {
.switch-track {
border: 1px solid #000;
background: #fff;
}
.switch-thumb {
background: #000;
}
.switch-input:checked + .switch-label + .switch-track,
.switch-input:checked + .switch-track {
background: #000;
}
.switch-input:checked + .switch-label + .switch-track .switch-thumb,
.switch-input:checked + .switch-track .switch-thumb {
background: #fff;
}
}
/* === components/table.css === */
/**
* TABLE / DATAGRID COMPONENT
*
* Componente de tabela de dados com suporte a:
* - Cabeçalho fixo (sticky header)
* - Ordenação (sorting)
* - Seleção de linhas
* - Responsivo (scroll horizontal em mobile)
* - Estados: Default, Hover, Selected, Disabled
* - Variantes: Default, Striped, Bordered, Compact
* - Dark mode completo
* - Acessibilidade WCAG 2.1 AA (ARIA, keyboard navigation)
*
* Baseado no Design System Figma - SIDASP
* @version 1.0.0
* @date 2025-01-27
*/
/* ============================================================
BASE TABLE STRUCTURE
============================================================ */
/**
* Container da tabela (wrapper para scroll)
*/
.table-container {
position: relative;
width: 100%;
overflow-x: auto;
overflow-y: visible;
border: 1px solid var(--color-border, var(--color-neutral-400));
border-radius: var(--radius-lg, 12px);
background: var(--color-bg-primary, var(--color-bg-primary));
}
/**
* Tabela principal
*/
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: var(--color-bg-primary, var(--color-bg-primary));
font-family: var(--font-body, 'Inter', sans-serif);
}
/**
* Cabeçalho da tabela
*/
.table thead {
background: var(--color-bg-secondary, var(--color-neutral-100));
position: relative;
}
.table thead th {
padding: var(--spacing-md, 16px) var(--spacing-lg, 20px);
text-align: left;
/* Tipografia */
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-semibold, 600);
line-height: var(--line-height-p3, 20px);
color: var(--color-text-primary, var(--color-neutral-800));
white-space: nowrap;
/* Aparência */
border-bottom: 2px solid var(--color-border, var(--color-neutral-400));
user-select: none;
}
/**
* Sticky header (cabeçalho fixo)
*/
.table--sticky-header thead {
position: sticky;
top: 0;
z-index: 10;
}
.table--sticky-header thead th {
background: var(--color-bg-secondary, var(--color-neutral-100));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/**
* Células do cabeçalho com ordenação
*/
.table th[data-sortable] {
cursor: pointer;
user-select: none;
position: relative;
padding-right: var(--spacing-xl, 24px);
transition: background var(--transition-base, 200ms ease-in-out);
}
.table th[data-sortable]:hover {
background: var(--color-neutral-200, var(--color-neutral-200));
}
.table th[data-sortable]:focus-visible {
outline: 2px solid var(--color-accent-300, var(--color-accent-300));
outline-offset: -2px;
}
/**
* Ícone de ordenação
*/
.table-sort-icon {
position: absolute;
right: var(--spacing-sm, 8px);
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 12px;
color: var(--color-text-secondary, var(--color-neutral-600));
opacity: 0.5;
transition: opacity var(--transition-base, 200ms ease-in-out);
}
.table th[data-sortable]:hover .table-sort-icon,
.table th[data-sortable][aria-sort] .table-sort-icon {
opacity: 1;
}
.table th[data-sortable][aria-sort="ascending"] .table-sort-icon::before {
content: '▲';
color: var(--color-accent-300, var(--color-accent-300));
}
.table th[data-sortable][aria-sort="descending"] .table-sort-icon::before {
content: '▼';
color: var(--color-accent-300, var(--color-accent-300));
}
.table th[data-sortable]:not([aria-sort]) .table-sort-icon::before {
content: '⇅';
}
/**
* Corpo da tabela
*/
.table tbody {
background: var(--color-bg-primary, var(--color-bg-primary));
}
.table tbody tr {
border-bottom: 1px solid var(--color-border-light, var(--color-neutral-300));
transition: background var(--transition-base, 200ms ease-in-out);
}
.table tbody tr:last-child {
border-bottom: none;
}
/**
* Células do corpo
*/
.table td {
padding: var(--spacing-md, 16px) var(--spacing-lg, 20px);
/* Tipografia */
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p3, 20px);
color: var(--color-text-primary, var(--color-neutral-800));
}
/* ============================================================
ESTADOS
============================================================ */
/**
* Hover
*/
.table tbody tr:hover:not(.table-row--disabled):not(.table-row--selected) {
background: var(--color-bg-secondary, var(--color-neutral-100));
}
/**
* Selected (selecionado)
*/
.table-row--selected {
background: var(--color-accent-100, var(--color-accent-100)) !important;
}
.table-row--selected td {
color: var(--color-accent-600, var(--color-accent-600));
}
/**
* Disabled
*/
.table-row--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.table-row--disabled:hover {
background: transparent;
}
/**
* Focus (navegação por teclado)
*/
.table tbody tr:focus-visible {
outline: 2px solid var(--color-accent-300, var(--color-accent-300));
outline-offset: -2px;
}
/* ============================================================
VARIANTES - STRIPED
============================================================ */
.table--striped tbody tr:nth-child(even) {
background: var(--color-bg-secondary, var(--color-neutral-100));
}
.table--striped tbody tr:nth-child(even):hover:not(.table-row--disabled):not(.table-row--selected) {
background: var(--color-neutral-200, var(--color-neutral-200));
}
/* ============================================================
VARIANTES - BORDERED
============================================================ */
.table--bordered {
border: 1px solid var(--color-border, var(--color-neutral-400));
}
.table--bordered th,
.table--bordered td {
border: 1px solid var(--color-border-light, var(--color-neutral-300));
}
.table--bordered thead th {
border-bottom: 2px solid var(--color-border, var(--color-neutral-400));
}
/* ============================================================
VARIANTES - COMPACT
============================================================ */
.table--compact th,
.table--compact td {
padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
font-size: var(--font-size-p4, 14px);
line-height: var(--line-height-p4, 20px);
}
/* ============================================================
SELEÇÃO DE LINHAS
============================================================ */
.table-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--color-accent-300, var(--color-accent-300));
}
.table th.table-cell--checkbox,
.table td.table-cell--checkbox {
width: 48px;
text-align: center;
padding: var(--spacing-md, 16px) var(--spacing-sm, 8px);
}
/* ============================================================
AÇÕES NA LINHA
============================================================ */
.table-cell--actions {
width: 120px;
text-align: right;
white-space: nowrap;
}
.table-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-xs, 4px);
}
/* ============================================================
ESTADOS VAZIOS
============================================================ */
.table-empty {
padding: var(--spacing-2xl, 32px);
text-align: center;
color: var(--color-text-secondary, var(--color-neutral-600));
}
.table-empty-icon {
font-size: 48px;
margin-bottom: var(--spacing-md, 16px);
opacity: 0.5;
}
.table-empty-message {
font-size: var(--font-size-p2, 16px);
font-weight: var(--font-weight-medium, 500);
margin-bottom: var(--spacing-xs, 4px);
}
.table-empty-description {
font-size: var(--font-size-p3, 14px);
color: var(--color-text-secondary, var(--color-neutral-600));
}
/* ============================================================
LOADING STATE
============================================================ */
.table-loading {
padding: var(--spacing-2xl, 32px);
text-align: center;
color: var(--color-text-secondary, var(--color-neutral-600));
}
.table-loading-spinner {
display: inline-block;
width: 32px;
height: 32px;
border: 3px solid var(--color-neutral-300, var(--color-neutral-300));
border-top-color: var(--color-accent-300, var(--color-accent-300));
border-radius: 50%;
animation: tableSpinner 0.8s linear infinite;
}
@keyframes tableSpinner {
to {
transform: rotate(360deg);
}
}
/* ============================================================
TAMANHOS
============================================================ */
.table--sm th,
.table--sm td {
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
font-size: var(--font-size-p4, 14px);
}
.table--lg th,
.table--lg td {
padding: var(--spacing-lg, 20px) var(--spacing-xl, 24px);
font-size: var(--font-size-p2, 16px);
}
/* ============================================================
DARK MODE
============================================================ */
.dark .table-container,
.dark-mode .table-container,
[data-theme="dark"] .table-container {
border-color: var(--color-border-dark, var(--color-neutral-700));
background: var(--color-bg-secondary, var(--color-bg-secondary));
}
.dark .table thead,
.dark-mode .table thead,
[data-theme="dark"] .table thead {
background: var(--color-bg-tertiary, var(--color-bg-tertiary));
}
.dark .table thead th,
.dark-mode .table thead th,
[data-theme="dark"] .table thead th {
color: var(--color-text-primary, var(--color-text-primary));
border-bottom-color: var(--color-border-dark, var(--color-neutral-700));
}
.dark .table--sticky-header thead th,
.dark-mode .table--sticky-header thead th,
[data-theme="dark"] .table--sticky-header thead th {
background: var(--color-bg-tertiary, var(--color-bg-tertiary));
}
.dark .table tbody,
.dark-mode .table tbody,
[data-theme="dark"] .table tbody {
background: var(--color-bg-secondary, var(--color-bg-secondary));
}
.dark .table tbody tr,
.dark-mode .table tbody tr,
[data-theme="dark"] .table tbody tr {
border-bottom-color: var(--color-border-dark, var(--color-neutral-700));
}
.dark .table tbody tr:hover:not(.table-row--disabled):not(.table-row--selected),
.dark-mode .table tbody tr:hover:not(.table-row--disabled):not(.table-row--selected),
[data-theme="dark"] .table tbody tr:hover:not(.table-row--disabled):not(.table-row--selected) {
background: var(--color-bg-tertiary, var(--color-bg-tertiary));
}
.dark .table-row--selected,
.dark-mode .table-row--selected,
[data-theme="dark"] .table-row--selected {
background: var(--color-accent-500, var(--color-accent-500)) !important;
}
.dark .table-row--selected td,
.dark-mode .table-row--selected td,
[data-theme="dark"] .table-row--selected td {
color: var(--color-text-light, var(--color-text-light));
}
.dark .table td,
.dark-mode .table td,
[data-theme="dark"] .table td {
color: var(--color-text-primary, var(--color-text-primary));
}
.dark .table--striped tbody tr:nth-child(even),
.dark-mode .table--striped tbody tr:nth-child(even),
[data-theme="dark"] .table--striped tbody tr:nth-child(even) {
background: var(--color-bg-tertiary, var(--color-bg-tertiary));
}
.dark .table--bordered th,
.dark-mode .table--bordered th,
[data-theme="dark"] .table--bordered th,
.dark .table--bordered td,
.dark-mode .table--bordered td,
[data-theme="dark"] .table--bordered td {
border-color: var(--color-border-dark, var(--color-neutral-700));
}
/* ============================================================
RESPONSIVIDADE
============================================================ */
@media (max-width: 768px) {
.table-container {
border-radius: var(--radius-md, 8px);
}
.table th,
.table td {
padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
font-size: var(--font-size-p4, 14px);
}
/* Esconder colunas menos importantes em mobile */
.table-cell--hide-mobile {
display: none;
}
/* Layout de cards em mobile (opcional) */
.table--mobile-cards {
display: block;
}
.table--mobile-cards thead {
display: none;
}
.table--mobile-cards tbody,
.table--mobile-cards tr,
.table--mobile-cards td {
display: block;
}
.table--mobile-cards tr {
margin-bottom: var(--spacing-md, 16px);
border: 1px solid var(--color-border, var(--color-neutral-400));
border-radius: var(--radius-md, 8px);
padding: var(--spacing-md, 16px);
}
.table--mobile-cards td {
border: none;
padding: var(--spacing-xs, 4px) 0;
}
.table--mobile-cards td::before {
content: attr(data-label) ': ';
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-secondary, var(--color-neutral-600));
}
}
/* ============================================================
TABELA SIMPLES (RESUMO)
============================================================ */
.table-simple {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--table-simple-gap, 12px);
width: 100%;
}
.table-simple__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md, 16px);
width: 100%;
}
.table-simple__title {
margin: 0;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-primary, #12151F);
}
.table-simple__action {
flex-shrink: 0;
}
.table-simple__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
}
.table-simple__row {
display: flex;
align-items: flex-start;
gap: var(--table-simple-row-gap, 56px);
width: 100%;
min-height: 72px;
padding: 12px 0 12px 20px;
border-left: 1px solid var(--table-simple-border, var(--color-border, #CED3E2));
box-sizing: border-box;
}
.table-simple__label {
width: var(--table-simple-label-width, 140px);
flex: 0 0 var(--table-simple-label-width, 140px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p4, 24px);
color: var(--color-text-secondary, #394360);
}
.table-simple__value {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
min-width: 0;
flex: 1;
}
.table-simple__value-text {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-primary, #12151F);
}
.table-simple__value-description {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p4, 24px);
color: var(--color-text-secondary, #394360);
}
.table-simple__badges {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm, 8px);
margin-top: var(--spacing-xs, 4px);
}
/* ============================================================
TABELA SIMPLES - DARK MODE
============================================================ */
.dark .table-simple__row,
.dark-mode .table-simple__row,
[data-theme="dark"] .table-simple__row {
border-left-color: var(--color-border, #2A2F41);
}
/* ============================================================
TABELA SIMPLES - RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.table-simple__row {
gap: var(--spacing-lg, 20px);
padding-left: var(--spacing-md, 16px);
flex-direction: column;
}
.table-simple__label {
width: 100%;
flex: 0 0 auto;
}
}
/* === components/tabs.css === */
/**
* Tabs
*
* Navegação por abas. Horizontal e vertical.
* Horizontal: container pill com tabs internas.
* Vertical: sidebar com 4 variantes (padrão, divisor, título, rolagem).
* Dark mode automático via tokens semânticos.
*
* CORES (invertidas entre modos):
* - Ativa: light=container-default, dark=container-emphasis
* - Inativa: light=container-deep, dark=container-deep
* - Hover: light=container-emphasis, dark=container-default
*
* @version 3.0.0
*/
/* ============================================================
HORIZONTAL — CONTAINER
============================================================ */
.tabs-horizontal {
display: inline-flex;
align-items: center;
height: 44px;
padding: var(--spacing-2);
gap: var(--spacing-2);
border-radius: var(--radius-default);
background: var(--surface-base-neutral-container-deep);
box-sizing: border-box;
}
.dark .tabs-horizontal,
[data-theme="dark"] .tabs-horizontal {
background: var(--surface-base-neutral-container-deep);
}
/* ============================================================
HORIZONTAL — TAB ITEM
============================================================ */
.tab-h {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 var(--spacing-3);
border-radius: var(--radius-default);
border: none;
background: transparent;
cursor: pointer;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-secondary);
white-space: nowrap;
transition: background var(--transition-fast),
color var(--transition-fast);
flex: 1;
}
.tab-h:hover:not(.is-active):not(:disabled) {
background: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-default);
}
.dark .tab-h:hover:not(.is-active):not(:disabled),
[data-theme="dark"] .tab-h:hover:not(.is-active):not(:disabled) {
background: var(--surface-base-neutral-container-default);
}
/* Ativa */
.tab-h.is-active {
background: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-default);
border-radius: 4px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
}
.dark .tab-h.is-active,
[data-theme="dark"] .tab-h.is-active {
background: var(--surface-base-neutral-container-emphasis);
}
/* Desativada */
.tab-h:disabled,
.tab-h.is-disabled {
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
/* ============================================================
VERTICAL — CONTAINER
============================================================ */
.tabs-vertical {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
padding: var(--spacing-6) 20px var(--spacing-6) 72px;
background: var(--surface-base-neutral-container-deep);
border-right: 1px solid var(--border-base-neutral-default);
box-sizing: border-box;
}
.dark .tabs-vertical,
[data-theme="dark"] .tabs-vertical {
background: var(--surface-base-neutral-container-deep);
}
/* ============================================================
VERTICAL — TAB ITEM
============================================================ */
.tab-v {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--radius-default);
border: none;
background: transparent;
cursor: pointer;
width: 100%;
text-align: left;
box-sizing: border-box;
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background var(--transition-fast),
color var(--transition-fast);
}
.tab-v-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Chevron (visível em ativa e hover) */
.tab-v-chevron {
display: none;
width: 12px;
height: 12px;
flex-shrink: 0;
color: inherit;
}
.tab-v-chevron svg {
width: 12px;
height: 12px;
}
.tab-v:hover .tab-v-chevron,
.tab-v.is-active .tab-v-chevron {
display: flex;
}
/* Hover */
.tab-v:hover:not(.is-active):not(:disabled):not(.is-disabled) {
background: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-default);
}
.dark .tab-v:hover:not(.is-active):not(:disabled):not(.is-disabled),
[data-theme="dark"] .tab-v:hover:not(.is-active):not(:disabled):not(.is-disabled) {
background: var(--surface-base-neutral-container-default);
}
/* Ativa */
.tab-v.is-active {
background: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-default);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
}
.dark .tab-v.is-active,
[data-theme="dark"] .tab-v.is-active {
background: var(--surface-base-neutral-container-emphasis);
}
/* Desativada */
.tab-v:disabled,
.tab-v.is-disabled {
color: var(--text-base-neutral-subtle);
cursor: not-allowed;
}
/* ============================================================
VERTICAL — DIVISOR
============================================================ */
.tabs-divider {
padding: var(--spacing-1) var(--spacing-2);
}
.tabs-divider::after {
content: '';
display: block;
height: 1px;
background: var(--border-base-neutral-default);
}
/* ============================================================
VERTICAL — TÍTULO DE CATEGORIA
============================================================ */
.tabs-category {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
.tabs-category + .tabs-category {
margin-top: var(--spacing-3);
}
.tabs-category-title {
font-family: var(--font-body);
font-size: var(--font-size-p5);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-p5);
color: var(--text-base-neutral-subtle);
padding: 0 var(--spacing-3);
}
/* ============================================================
VERTICAL — COM ROLAGEM (usa custom-scroll)
============================================================ */
.tabs-vertical--scroll {
overflow: hidden;
position: relative;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.tab-h.is-active,
.tab-v.is-active {
box-shadow: none;
border: 1px solid #000;
}
}
/* === components/textarea.css === */
/**
* TEXTAREA COMPONENT
*
* Componente de área de texto com suporte a:
* - Auto-resize (cresce conforme o conteúdo)
* - Contador de caracteres
* - Estados (default, hover, focus, error, disabled, readonly)
* - Tamanhos (sm, md, lg)
* - Dark mode
* - Acessibilidade WCAG 2.1 AA
*
* @version 1.0.0
* @date 2025-10-30
*/
/* ============================================
BASE TEXTAREA
============================================ */
.textarea-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 6px);
width: 100%;
position: relative;
}
.textarea-label {
display: flex;
align-items: center;
gap: var(--spacing-xs, 6px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: var(--color-text-primary, var(--color-neutral-800));
margin: 0;
}
.textarea-label-required {
color: var(--color-danger, var(--color-red-400));
font-size: 14px;
}
.textarea-container {
position: relative;
width: 100%;
}
.textarea {
width: 100%;
min-height: 88px; /* ~4 linhas */
padding: 10px 16px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-text-primary, var(--color-neutral-800));
background-color: var(--color-text-light);
border: 1px solid var(--color-neutral-400, var(--color-neutral-400));
border-radius: var(--radius-md, 8px);
outline: none;
transition: all var(--transition-base, 200ms ease-in-out);
resize: vertical; /* Permite resize manual vertical */
box-sizing: border-box;
}
.textarea::placeholder {
color: var(--color-neutral-500, var(--color-neutral-500));
}
.textarea::-webkit-scrollbar {
width: 8px;
}
.textarea::-webkit-scrollbar-track {
background: var(--color-neutral-100, var(--color-neutral-100));
border-radius: 4px;
}
.textarea::-webkit-scrollbar-thumb {
background: var(--color-neutral-400, var(--color-neutral-400));
border-radius: 4px;
}
.textarea::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-500, var(--color-neutral-500));
}
/* ============================================
ESTADOS
============================================ */
/* Hover */
.textarea:hover:not(:disabled):not(:focus):not(.textarea-error) {
border-color: var(--color-neutral-500, var(--color-neutral-500));
}
/* Focus */
.textarea:focus {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
}
/* Error */
.textarea.textarea-error {
border-color: var(--color-danger, var(--color-red-400));
background-color: rgba(232, 58, 48, 0.02);
}
.textarea.textarea-error:focus {
border-color: var(--color-danger, var(--color-red-400));
box-shadow: 0 0 0 3px rgba(232, 58, 48, 0.1);
}
/* Disabled */
.textarea:disabled {
background-color: var(--color-neutral-100, var(--color-neutral-100));
color: var(--color-neutral-500, var(--color-neutral-500));
cursor: not-allowed;
opacity: 0.6;
}
/* Readonly */
.textarea:read-only {
background-color: var(--color-neutral-50, #FAFBFC);
cursor: default;
}
.textarea:read-only:focus {
border-color: var(--color-neutral-400, var(--color-neutral-400));
box-shadow: none;
}
/* ============================================
TAMANHOS
============================================ */
/* Small - 3 linhas (~72px) */
.textarea-sm {
min-height: 72px;
padding: 8px 12px;
font-size: 14px;
line-height: 20px;
}
/* Medium (default) - 4 linhas (~88px) */
.textarea-md {
min-height: 88px;
padding: 10px 16px;
font-size: 16px;
line-height: 24px;
}
/* Large - 6 linhas (~132px) */
.textarea-lg {
min-height: 132px;
padding: 12px 16px;
font-size: 16px;
line-height: 24px;
}
/* ============================================
AUTO-RESIZE
============================================ */
.textarea-auto-resize {
resize: none; /* Desabilita resize manual */
overflow: hidden;
min-height: 88px;
max-height: 400px; /* Altura máxima antes de scroll */
}
.textarea-auto-resize.textarea-sm {
min-height: 72px;
}
.textarea-auto-resize.textarea-lg {
min-height: 132px;
}
/* ============================================
CONTADOR DE CARACTERES
============================================ */
.textarea-counter-container {
position: relative;
}
.textarea-counter {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--spacing-xs, 6px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 12px;
line-height: 16px;
color: var(--color-neutral-600, var(--color-neutral-500));
}
.textarea-counter-text {
color: var(--color-neutral-600, var(--color-neutral-500));
}
.textarea-counter-numbers {
font-weight: 500;
color: var(--color-neutral-700, var(--color-neutral-600));
}
/* Contador próximo do limite (80%) */
.textarea-counter-numbers.textarea-counter-warning {
color: #FF9500; /* Laranja */
}
/* Contador no limite ou acima */
.textarea-counter-numbers.textarea-counter-danger {
color: var(--color-danger, var(--color-red-400));
font-weight: 600;
}
/* ============================================
HELPER TEXT
============================================ */
.textarea-helper {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: var(--spacing-xs, 6px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 12px;
line-height: 16px;
color: var(--color-neutral-600, var(--color-neutral-500));
}
.textarea-helper-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.textarea-helper-text {
flex: 1;
}
/* ============================================
ERROR MESSAGE
============================================ */
.textarea-error-message {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: var(--spacing-xs, 6px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 12px;
line-height: 16px;
color: var(--color-danger, var(--color-red-400));
font-weight: 500;
}
.textarea-error-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 1px;
}
/* ============================================
LOADING STATE
============================================ */
.textarea-loading {
position: relative;
}
.textarea-loading::after {
content: '';
position: absolute;
top: 10px;
right: 10px;
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-300, var(--color-neutral-300));
border-top-color: var(--color-primary, var(--color-accent-300));
border-radius: 50%;
animation: textarea-spinner 0.6s linear infinite;
}
@keyframes textarea-spinner {
to {
transform: rotate(360deg);
}
}
/* ============================================
VARIAÇÕES ESPECIAIS
============================================ */
/* Textarea com borda mais espessa */
.textarea-thick {
border-width: 2px;
padding: 9px 15px; /* Ajusta padding para compensar borda */
}
/* Textarea sem resize */
.textarea-no-resize {
resize: none;
}
/* Textarea com scroll sempre visível */
.textarea-scroll-always {
overflow-y: scroll;
}
/* ============================================
DARK MODE
============================================ */
.dark .textarea-label,
[data-theme="dark"] .textarea-label {
color: var(--color-text-primary-dark, var(--color-neutral-300));
}
.dark .textarea,
[data-theme="dark"] .textarea {
background-color: var(--color-neutral-700);
border-color: var(--color-neutral-600);
color: var(--color-neutral-300);
}
.dark .textarea::placeholder,
[data-theme="dark"] .textarea::placeholder {
color: var(--color-neutral-500);
}
.dark .textarea:hover:not(:disabled):not(:focus):not(.textarea-error),
[data-theme="dark"] .textarea:hover:not(:disabled):not(:focus):not(.textarea-error) {
border-color: var(--color-neutral-500);
}
.dark .textarea:focus,
[data-theme="dark"] .textarea:focus {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.15);
}
.dark .textarea.textarea-error,
[data-theme="dark"] .textarea.textarea-error {
border-color: #FF5449;
background-color: rgba(255, 84, 73, 0.05);
}
.dark .textarea.textarea-error:focus,
[data-theme="dark"] .textarea.textarea-error:focus {
box-shadow: 0 0 0 3px rgba(255, 84, 73, 0.15);
}
.dark .textarea:disabled,
[data-theme="dark"] .textarea:disabled {
background-color: var(--color-neutral-800);
border-color: var(--color-neutral-700);
color: var(--color-neutral-500);
}
.dark .textarea:read-only,
[data-theme="dark"] .textarea:read-only {
background-color: #171A26;
border-color: var(--color-neutral-600);
}
/* Scrollbar Dark Mode */
.dark .textarea::-webkit-scrollbar-track,
[data-theme="dark"] .textarea::-webkit-scrollbar-track {
background: var(--color-neutral-800);
}
.dark .textarea::-webkit-scrollbar-thumb,
[data-theme="dark"] .textarea::-webkit-scrollbar-thumb {
background: var(--color-neutral-600);
}
.dark .textarea::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .textarea::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-500);
}
/* Helper text Dark Mode */
.dark .textarea-helper,
[data-theme="dark"] .textarea-helper {
color: var(--color-neutral-400);
}
/* Counter Dark Mode */
.dark .textarea-counter-text,
[data-theme="dark"] .textarea-counter-text {
color: var(--color-neutral-400);
}
.dark .textarea-counter-numbers,
[data-theme="dark"] .textarea-counter-numbers {
color: var(--color-neutral-400);
}
/* Error message Dark Mode */
.dark .textarea-error-message,
[data-theme="dark"] .textarea-error-message {
color: #FF5449;
}
/* Loading Dark Mode */
.dark .textarea-loading::after,
[data-theme="dark"] .textarea-loading::after {
border-color: var(--color-neutral-600);
border-top-color: var(--color-accent-300);
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.textarea {
font-size: 16px; /* Evita zoom no iOS */
}
.textarea-sm {
font-size: 14px;
}
.textarea-auto-resize {
max-height: 300px; /* Reduz altura máxima em mobile */
}
}
/* ============================================
ESTADOS DE VALIDAÇÃO
============================================ */
/* Success (opcional) */
.textarea-success {
border-color: var(--color-success, var(--color-green-300));
}
.textarea-success:focus {
border-color: var(--color-success, var(--color-green-300));
box-shadow: 0 0 0 3px rgba(81, 144, 0, 0.1);
}
.dark .textarea-success,
[data-theme="dark"] .textarea-success {
border-color: #6DB300;
}
.dark .textarea-success:focus,
[data-theme="dark"] .textarea-success:focus {
box-shadow: 0 0 0 3px rgba(109, 179, 0, 0.15);
}
/* ============================================
UTILITIES
============================================ */
/* Remove aparência de resize */
.textarea-no-resize-handle {
resize: none;
}
/* Força resize horizontal também */
.textarea-resize-both {
resize: both;
}
/* Força apenas vertical */
.textarea-resize-vertical {
resize: vertical;
}
/* Força apenas horizontal */
.textarea-resize-horizontal {
resize: horizontal;
}
/* Fonte monospace (para código) */
.textarea-monospace {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
line-height: 20px;
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
.textarea {
border: 1px solid #000;
background: #fff;
color: #000;
}
.textarea-counter,
.textarea-helper {
display: none;
}
}
/* === components/timeline-card-grid.css === */
/**
* Timeline Card Grid
*
* Grid de cards para contexto de timeline com status badges.
* Variante do card-grid com suporte a datas, status e responsáveis.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.timeline-card-grid {
width: 100%;
}
.timeline-card-grid__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
}
/* Grid responsivo */
.timeline-card-grid__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
/* Card individual */
.timeline-card-grid__card {
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
padding: 16px;
transition: box-shadow 0.2s, border-color 0.2s;
}
.timeline-card-grid__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: var(--border-base-neutral-strong);
}
/* Header do card */
.timeline-card-grid__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.timeline-card-grid__card-title {
font-size: 14px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0;
line-height: 1.4;
}
.timeline-card-grid__date {
font-size: 12px;
color: var(--text-base-neutral-subtle);
white-space: nowrap;
flex-shrink: 0;
}
/* Status badge */
.timeline-card-grid__status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
font-weight: 500;
line-height: 1.6;
margin-bottom: 8px;
}
.timeline-card-grid__status--completed {
background: var(--surface-base-alert-container-success);
color: var(--text-base-success-default);
}
.timeline-card-grid__status--pending {
background: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
.timeline-card-grid__status--error {
background: var(--surface-base-alert-container-error);
color: var(--text-base-error-default);
}
.timeline-card-grid__status--warning {
background: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
/* Body */
.timeline-card-grid__body {
font-size: 13px;
line-height: 1.5;
color: var(--text-base-neutral-secondary);
margin-bottom: 12px;
}
/* Footer */
.timeline-card-grid__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--border-base-neutral-subtle);
font-size: 12px;
color: var(--text-base-neutral-subtle);
}
.timeline-card-grid__responsible {
display: flex;
align-items: center;
gap: 4px;
}
.timeline-card-grid__responsible::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border-base-brand-default);
}
/* Attachments */
.timeline-card-grid__attachments {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.timeline-card-grid__attachment-link {
font-size: 12px;
color: var(--text-base-brand-default);
text-decoration: none;
}
.timeline-card-grid__attachment-link:hover {
text-decoration: underline;
}
/* Estado vazio */
.timeline-card-grid__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* Grid 2 colunas forçado */
.timeline-card-grid--cols-2 .timeline-card-grid__grid {
grid-template-columns: repeat(2, 1fr);
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .timeline-card-grid__card {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .timeline-card-grid__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.timeline-card-grid__grid {
grid-template-columns: 1fr;
}
.timeline-card-grid--cols-2 .timeline-card-grid__grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.timeline-card-grid__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* === components/timeline-center.css === */
/**
* Timeline Center
*
* Timeline vertical com linha central e conteúdo alternado esquerda/direita.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.timeline-center {
width: 100%;
position: relative;
padding: 0 16px;
}
.timeline-center__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 24px;
text-align: center;
}
/* Linha vertical central */
.timeline-center__line {
position: absolute;
left: 50%;
top: 60px;
bottom: 0;
width: 2px;
background: var(--border-base-neutral-default);
transform: translateX(-50%);
}
/* Lista de itens */
.timeline-center__items {
position: relative;
z-index: 1;
}
/* Item individual */
.timeline-center__item {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
position: relative;
}
/* Itens alternados */
.timeline-center__item:nth-child(odd) {
flex-direction: row;
}
.timeline-center__item:nth-child(even) {
flex-direction: row-reverse;
}
/* Lado do conteúdo (cada lado ocupa ~45%) */
.timeline-center__content {
width: 45%;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
padding: 16px;
position: relative;
transition: box-shadow 0.2s;
}
.timeline-center__content:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Seta do card apontando para a linha central */
.timeline-center__item:nth-child(odd) .timeline-center__content::after {
content: '';
position: absolute;
right: -8px;
top: 16px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid var(--border-base-neutral-default);
}
.timeline-center__item:nth-child(even) .timeline-center__content::after {
content: '';
position: absolute;
left: -8px;
top: 16px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid var(--border-base-neutral-default);
}
/* Dot central */
.timeline-center__dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid var(--border-base-neutral-default);
background: var(--surface-base-neutral-page-default);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 14px;
z-index: 2;
flex-shrink: 0;
}
.timeline-center__dot--completed {
border-color: var(--border-base-success-default);
background: var(--surface-base-alert-container-success);
}
.timeline-center__dot--pending {
border-color: var(--border-base-warning-default);
background: var(--surface-base-alert-container-warning);
}
.timeline-center__dot--error {
border-color: var(--border-base-error-default);
background: var(--surface-base-alert-container-error);
}
.timeline-center__dot--warning {
border-color: var(--border-base-warning-default);
background: var(--surface-base-alert-container-warning);
}
/* Conteúdo do card */
.timeline-center__content-title {
font-size: 14px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 4px;
}
.timeline-center__content-body {
font-size: 13px;
line-height: 1.5;
color: var(--text-base-neutral-secondary);
margin: 0 0 8px;
}
.timeline-center__content-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--text-base-neutral-subtle);
}
.timeline-center__date {
font-size: 12px;
color: var(--text-base-neutral-subtle);
}
/* Estado vazio */
.timeline-center__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .timeline-center__content {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .timeline-center__content:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
.dark .timeline-center__dot {
background: var(--surface-base-neutral-page-default);
}
.dark .timeline-center__line {
background: var(--border-base-neutral-default);
}
/* ========================================================================
RESPONSIVO — Em mobile, coluna única à esquerda
======================================================================== */
@media (max-width: 768px) {
.timeline-center__line {
left: 16px;
}
.timeline-center__item,
.timeline-center__item:nth-child(odd),
.timeline-center__item:nth-child(even) {
flex-direction: row;
padding-left: 40px;
}
.timeline-center__content {
width: 100%;
}
.timeline-center__dot {
left: 16px;
transform: translateX(-50%);
}
/* Remove setas alternadas, só seta à esquerda */
.timeline-center__item:nth-child(even) .timeline-center__content::after {
border-right: none;
left: auto;
right: -8px;
border-left: 8px solid var(--border-base-neutral-default);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.timeline-center__item:nth-child(odd) .timeline-center__content::after,
.timeline-center__item:nth-child(even) .timeline-center__content::after {
content: '';
position: absolute;
left: -8px;
right: auto;
top: 16px;
border-left: none;
border-right: 8px solid var(--border-base-neutral-default);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
}
/* === components/timeline-horizontal.css === */
/**
* Timeline Horizontal
*
* Timeline horizontal com dots conectados, cards e scroll nativo.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.timeline-horizontal {
width: 100%;
}
.timeline-horizontal__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 24px;
}
/* Track com scroll horizontal */
.timeline-horizontal__track {
display: flex;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 16px 0 24px;
position: relative;
}
/* Linha conectora via pseudo-element no track */
.timeline-horizontal__track::before {
content: '';
position: absolute;
top: 28px;
left: 24px;
right: 24px;
height: 2px;
background: var(--border-base-neutral-default);
z-index: 0;
}
/* Item individual */
.timeline-horizontal__item {
flex: 0 0 280px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
padding: 0 8px;
}
/* Dot indicador */
.timeline-horizontal__dot {
width: 24px;
height: 24px;
border-radius: 50%;
border: 3px solid var(--border-base-neutral-default);
background: var(--surface-base-neutral-page-default);
margin-bottom: 12px;
flex-shrink: 0;
position: relative;
z-index: 2;
transition: transform 0.2s, border-color 0.2s;
}
.timeline-horizontal__item:hover .timeline-horizontal__dot {
transform: scale(1.15);
}
.timeline-horizontal__dot--completed {
border-color: var(--border-base-success-default);
background: var(--surface-base-alert-container-success);
}
.timeline-horizontal__dot--pending {
border-color: var(--border-base-warning-default);
background: var(--surface-base-alert-container-warning);
}
.timeline-horizontal__dot--error {
border-color: var(--border-base-error-default);
background: var(--surface-base-alert-container-error);
}
.timeline-horizontal__dot--warning {
border-color: var(--border-base-warning-default);
background: var(--surface-base-alert-container-warning);
}
/* Card de conteúdo */
.timeline-horizontal__card {
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
padding: 12px;
width: 100%;
text-align: center;
transition: box-shadow 0.2s;
}
.timeline-horizontal__item:hover .timeline-horizontal__card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.timeline-horizontal__card-title {
font-size: 13px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 4px;
}
.timeline-horizontal__date {
font-size: 11px;
color: var(--text-base-neutral-subtle);
margin-bottom: 6px;
}
.timeline-horizontal__description {
font-size: 12px;
line-height: 1.4;
color: var(--text-base-neutral-secondary);
margin: 0;
}
/* Estado vazio */
.timeline-horizontal__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* Scrollbar estilizada */
.timeline-horizontal__track::-webkit-scrollbar {
height: 6px;
}
.timeline-horizontal__track::-webkit-scrollbar-track {
background: var(--surface-base-neutral-container-default);
border-radius: 3px;
}
.timeline-horizontal__track::-webkit-scrollbar-thumb {
background: var(--border-base-neutral-default);
border-radius: 3px;
}
.timeline-horizontal__track::-webkit-scrollbar-thumb:hover {
background: var(--border-base-neutral-strong);
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .timeline-horizontal__track::before {
background: var(--border-base-neutral-default);
}
.dark .timeline-horizontal__dot {
background: var(--surface-base-neutral-page-default);
}
.dark .timeline-horizontal__card {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .timeline-horizontal__item:hover .timeline-horizontal__card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
/* === components/toast.css === */
/**
* Toast
*
* Notificação temporária compacta (snackbar).
* Background invertido: escuro no light, levemente mais claro no dark.
* Posição: bottom-center, auto-dismiss em 4 segundos.
* Dark mode automático via tokens semânticos.
*
* SPECS FIGMA:
* - Padding: 8px 12px
* - Gap ícone-texto: 8px
* - Radius: 6px
* - Shadow: 0 4px 6px rgba(0,0,0,0.09)
* - Light bg: --surface-base-neutral-container-default-on-black
* - Dark bg: --surface-base-neutral-container-hover
* - Texto: p3 medium, --text-base-neutral-white
* - Ícone: 18x18, --icon-base-neutral-white
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER (posicionamento na tela)
============================================================ */
.toast-container {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-tooltip, 1070);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-2);
pointer-events: none;
}
/* ============================================================
TOAST
============================================================ */
.toast {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-3);
background: var(--surface-base-neutral-container-default-on-black);
border-radius: var(--radius-default);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.09);
pointer-events: auto;
animation: toast-in 0.3s ease-out;
}
.toast.is-leaving {
animation: toast-out 0.3s ease-in forwards;
}
/* ============================================================
DARK MODE — background específico
============================================================ */
.dark .toast,
[data-theme="dark"] .toast {
background: var(--surface-base-neutral-container-emphasis);
}
/* ============================================================
ÍCONE
============================================================ */
.toast-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text-base-neutral-white);
}
.toast-icon svg {
width: 18px;
height: 18px;
}
/* ============================================================
TEXTO
============================================================ */
.toast-text {
font-family: var(--font-body);
font-size: var(--font-size-p3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p3);
color: var(--text-base-neutral-white);
white-space: nowrap;
}
/* ============================================================
ANIMAÇÕES
============================================================ */
@keyframes toast-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes toast-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(12px);
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
@media (prefers-reduced-motion: reduce) {
.toast,
.toast.is-leaving {
animation: none;
}
}
/* ============================================================
PRINT
============================================================ */
@media print {
.toast-container {
display: none !important;
}
}
/* === components/toggle-card.css === */
/**
* Design System - Toggle Card Component
*
* Card unico que alterna entre estados ativo/inativo ao clicar.
* Ideal para campos booleanos de habilitacao/desabilitacao.
*
* Estados:
* - Inativo: borda neutra, texto "Nao Habilitado"
* - Ativo: borda destacada (cor principal), texto "Habilitado"
*
* @version 1.0.0
* @date 2025-02-28
*/
/* ============================================================
TOGGLE CARD - WRAPPER
============================================================ */
.toggle-card-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
/* ============================================================
TOGGLE CARD - CARD PRINCIPAL
============================================================ */
.toggle-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
width: 100%;
padding: 16px 20px;
background: var(--color-bg-secondary, #F6F6F9);
border: 2px solid var(--color-neutral-300, #D0D3DD);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
box-sizing: border-box;
}
.toggle-card:hover {
border-color: var(--color-neutral-400, #7A839F);
background: var(--color-neutral-100, #ECEDF2);
}
.toggle-card:focus {
outline: none;
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.15);
}
/* Estado Ativo */
.toggle-card--active {
border-color: var(--color-accent-400, #3F68FB);
background: var(--color-accent-50, rgba(63, 104, 251, 0.05));
}
.toggle-card--active:hover {
border-color: var(--color-accent-500, #2952E5);
background: var(--color-accent-100, rgba(63, 104, 251, 0.1));
}
/* Estado Desabilitado */
.toggle-card--disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--color-neutral-100, #ECEDF2);
}
.toggle-card--disabled:hover {
border-color: var(--color-neutral-300, #D0D3DD);
background: var(--color-neutral-100, #ECEDF2);
}
/* ============================================================
TOGGLE CARD - ICONE
============================================================ */
.toggle-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
transition: all 0.2s ease;
}
.toggle-card-icon i {
font-size: 24px;
transition: all 0.2s ease;
}
/* Icone inativo */
.toggle-card-icon--active {
display: none;
}
.toggle-card-icon--inactive {
display: block;
color: var(--color-neutral-500, #5A6385);
}
/* Icone ativo */
.toggle-card--active .toggle-card-icon--active {
display: block;
color: var(--color-accent-400, #3F68FB);
}
.toggle-card--active .toggle-card-icon--inactive {
display: none;
}
/* Background do icone */
.toggle-card-icon {
background: var(--color-neutral-200, #E0E2EB);
}
.toggle-card--active .toggle-card-icon {
background: var(--color-accent-100, rgba(63, 104, 251, 0.15));
}
/* ============================================================
TOGGLE CARD - CONTEUDO (TITULO E ESTADO)
============================================================ */
.toggle-card-content {
display: flex !important;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0; /* Permite texto truncar se necessário */
}
.toggle-card-title {
display: block !important;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--font-weight-medium, 500);
line-height: 1.4;
color: var(--color-text-primary, #141926);
}
/* Estado (Habilitado / Nao Habilitado) */
.toggle-card-state {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--font-weight-normal, 400);
line-height: 1.3;
}
.toggle-card-state--active {
display: none !important;
color: var(--color-accent-400, #3F68FB);
}
.toggle-card-state--inactive {
display: block !important;
color: var(--color-neutral-500, #5A6385);
}
/* Quando ativo */
.toggle-card--active .toggle-card-state--active {
display: block !important;
}
.toggle-card--active .toggle-card-state--inactive {
display: none !important;
}
/* ============================================================
TOGGLE CARD - HELPER E ERRO
============================================================ */
.toggle-card-helper {
font-family: var(--font-body);
font-size: 12px;
color: var(--color-neutral-500, #5A6385);
line-height: 1.4;
}
.toggle-card-error {
font-family: var(--font-body);
font-size: 12px;
color: var(--color-danger, #EF4444);
line-height: 1.4;
}
/* ============================================================
GRID DE TOGGLE CARDS (MULTIPLOS CARDS)
============================================================ */
.toggle-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.toggle-card-grid .toggle-card-wrapper {
margin-bottom: 0;
}
/* ============================================================
DARK MODE
Suporta múltiplos seletores: .dark (Tailwind), .dark-mode (Design System),
[data-theme="dark"], html.dark, body.dark
============================================================ */
/* Card base em dark mode */
.dark .toggle-card,
.dark-mode .toggle-card,
[data-theme="dark"] .toggle-card,
html.dark .toggle-card,
body.dark .toggle-card {
background: #1F2937 !important;
border-color: #4B5563 !important;
}
.dark .toggle-card:hover,
.dark-mode .toggle-card:hover,
[data-theme="dark"] .toggle-card:hover,
html.dark .toggle-card:hover,
body.dark .toggle-card:hover {
background: #374151 !important;
border-color: #6B7280 !important;
}
.dark .toggle-card--active,
.dark-mode .toggle-card--active,
[data-theme="dark"] .toggle-card--active,
html.dark .toggle-card--active,
body.dark .toggle-card--active {
background: rgba(63, 104, 251, 0.15) !important;
border-color: #3F68FB !important;
}
/* TÍTULO - CRÍTICO: deve ser visível em fundo escuro */
.dark .toggle-card-title,
.dark-mode .toggle-card-title,
[data-theme="dark"] .toggle-card-title,
html.dark .toggle-card-title,
body.dark .toggle-card-title {
color: #F3F4F6 !important;
}
/* Título dentro de card ativo */
.dark .toggle-card--active .toggle-card-title,
.dark-mode .toggle-card--active .toggle-card-title,
[data-theme="dark"] .toggle-card--active .toggle-card-title,
html.dark .toggle-card--active .toggle-card-title,
body.dark .toggle-card--active .toggle-card-title {
color: #FFFFFF !important;
}
/* Estado label - inativo */
.dark .toggle-card-state--inactive,
.dark-mode .toggle-card-state--inactive,
[data-theme="dark"] .toggle-card-state--inactive,
html.dark .toggle-card-state--inactive,
body.dark .toggle-card-state--inactive {
color: #9CA3AF !important;
}
/* Estado label - ativo */
.dark .toggle-card-state--active,
.dark-mode .toggle-card-state--active,
[data-theme="dark"] .toggle-card-state--active,
html.dark .toggle-card-state--active,
body.dark .toggle-card-state--active {
color: #93C5FD !important;
}
/* Ícone background */
.dark .toggle-card-icon,
.dark-mode .toggle-card-icon,
[data-theme="dark"] .toggle-card-icon,
html.dark .toggle-card-icon,
body.dark .toggle-card-icon {
background: #374151 !important;
}
/* Ícone cor inativa */
.dark .toggle-card-icon--inactive,
.dark-mode .toggle-card-icon--inactive,
[data-theme="dark"] .toggle-card-icon--inactive,
html.dark .toggle-card-icon--inactive,
body.dark .toggle-card-icon--inactive {
color: #9CA3AF !important;
}
/* Ícone cor ativa */
.dark .toggle-card-icon--active,
.dark-mode .toggle-card-icon--active,
[data-theme="dark"] .toggle-card-icon--active,
html.dark .toggle-card-icon--active,
body.dark .toggle-card-icon--active {
color: #60A5FA !important;
}
/* Ícone background quando card ativo */
.dark .toggle-card--active .toggle-card-icon,
.dark-mode .toggle-card--active .toggle-card-icon,
[data-theme="dark"] .toggle-card--active .toggle-card-icon,
html.dark .toggle-card--active .toggle-card-icon,
body.dark .toggle-card--active .toggle-card-icon {
background: rgba(63, 104, 251, 0.25) !important;
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.toggle-card {
padding: 14px 16px;
}
.toggle-card-icon {
width: 36px;
height: 36px;
}
.toggle-card-icon i {
font-size: 20px;
}
.toggle-card-title {
font-size: 14px;
}
.toggle-card-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* High Contrast Mode */
@media (prefers-contrast: high) {
.toggle-card {
border-width: 3px;
}
.toggle-card--active {
border-color: var(--color-accent-500);
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.toggle-card,
.toggle-card-icon,
.toggle-card-icon i {
transition: none;
}
}
/* Focus visible */
.toggle-card:focus-visible {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
}
/* ============================================================
TOGGLE CARD DRAWER CONTENT
Estilos para o conteudo do drawer quando useDrawer: true
============================================================ */
/* Garante que o drawer body contenha o conteúdo em altura total */
.drawer__body:has(.toggle-card-drawer-content) {
display: flex;
flex-direction: column;
}
.toggle-card-drawer-content {
display: flex;
flex-direction: column;
gap: 24px;
padding: 8px 0;
flex: 1;
min-height: 0;
}
/* Empurra os botões para o rodapé do drawer */
.toggle-card-drawer-content .modal-alert-actions {
margin-top: auto;
padding-top: 24px;
border-top: 1px solid var(--color-border-light, #ECEDF2);
padding-bottom: 8px;
}
/* Lista de status (novo formato) */
.toggle-card-drawer-status-list {
list-style: disc;
margin: 0;
padding: 0 0 0 20px;
font-size: 14px;
line-height: 1.6;
color: var(--color-text-primary, #141926);
}
.toggle-card-drawer-status-list li {
margin-bottom: 4px;
}
.toggle-card-drawer-status-list strong {
font-weight: 600;
color: var(--color-text-primary, #141926);
}
/* Icones nos botoes modal-alert dentro do drawer */
.toggle-card-drawer-content .modal-alert-actions button i {
margin-right: 8px;
font-size: 18px;
}
/* DEPRECATED: formato antigo de status como botao - mantido para compatibilidade */
.toggle-card-drawer-status {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--color-neutral-100, #F3F4F6);
border-radius: 8px;
}
.toggle-card-drawer-status-label {
font-size: 14px;
color: var(--color-neutral-600, #5A6385);
}
.toggle-card-drawer-status-value {
font-size: 14px;
font-weight: 600;
color: var(--color-neutral-600, #5A6385);
padding: 4px 12px;
background: var(--color-neutral-200, #E0E2EB);
border-radius: 4px;
}
.toggle-card-drawer-status-value.is-active {
color: var(--color-accent-600, #2952E5);
background: var(--color-accent-100, rgba(63, 104, 251, 0.15));
}
.toggle-card-drawer-info {
font-size: 14px;
color: var(--color-neutral-600, #5A6385);
line-height: 1.6;
}
.toggle-card-drawer-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.toggle-card-drawer-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 24px;
border: 2px solid var(--color-neutral-300, #D0D3DD);
border-radius: 8px;
background: var(--color-bg-primary, #FFFFFF);
font-size: 16px;
font-weight: 500;
color: var(--color-text-primary, #12151F);
cursor: pointer;
transition: all 0.2s ease;
}
.toggle-card-drawer-btn i {
font-size: 24px;
}
.toggle-card-drawer-btn:hover {
background: var(--color-neutral-100, #F3F4F6);
}
.toggle-card-drawer-btn--inactive:hover {
border-color: var(--color-danger, #EF4444);
background: var(--color-danger-50, #FEF2F2);
color: var(--color-danger-700, #B91C1C);
}
.toggle-card-drawer-btn--inactive:hover i {
color: var(--color-danger, #EF4444);
}
.toggle-card-drawer-btn--active:hover {
border-color: var(--color-accent-400, #3F68FB);
background: var(--color-accent-50, rgba(63, 104, 251, 0.05));
color: var(--color-accent-600, #2952E5);
}
.toggle-card-drawer-btn--active:hover i {
color: var(--color-accent-400, #3F68FB);
}
/* Dark mode para drawer */
/* Lista de status - dark mode */
.dark .toggle-card-drawer-status-list,
[data-theme="dark"] .toggle-card-drawer-status-list,
.dark-mode .toggle-card-drawer-status-list,
html.dark .toggle-card-drawer-status-list,
body.dark .toggle-card-drawer-status-list {
color: var(--color-neutral-200, #E5E7EB);
}
.dark .toggle-card-drawer-status-list strong,
[data-theme="dark"] .toggle-card-drawer-status-list strong,
.dark-mode .toggle-card-drawer-status-list strong,
html.dark .toggle-card-drawer-status-list strong,
body.dark .toggle-card-drawer-status-list strong {
color: var(--color-neutral-100, #F3F4F6);
}
/* Borda dos botões em dark mode */
.dark .toggle-card-drawer-content .modal-alert-actions,
[data-theme="dark"] .toggle-card-drawer-content .modal-alert-actions,
.dark-mode .toggle-card-drawer-content .modal-alert-actions,
html.dark .toggle-card-drawer-content .modal-alert-actions,
body.dark .toggle-card-drawer-content .modal-alert-actions {
border-top-color: var(--color-neutral-700, #374151);
}
/* DEPRECATED: formato antigo de status */
.dark .toggle-card-drawer-status,
[data-theme="dark"] .toggle-card-drawer-status,
.dark-mode .toggle-card-drawer-status {
background: var(--color-neutral-800, #1F2937);
}
.dark .toggle-card-drawer-status-label,
[data-theme="dark"] .toggle-card-drawer-status-label,
.dark-mode .toggle-card-drawer-status-label {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .toggle-card-drawer-status-value,
[data-theme="dark"] .toggle-card-drawer-status-value,
.dark-mode .toggle-card-drawer-status-value {
background: var(--color-neutral-700, #374151);
color: var(--color-neutral-300, #D1D5DB);
}
.dark .toggle-card-drawer-info,
[data-theme="dark"] .toggle-card-drawer-info,
.dark-mode .toggle-card-drawer-info {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .toggle-card-drawer-btn,
[data-theme="dark"] .toggle-card-drawer-btn,
.dark-mode .toggle-card-drawer-btn {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-200, #E5E7EB);
}
.dark .toggle-card-drawer-btn:hover,
[data-theme="dark"] .toggle-card-drawer-btn:hover,
.dark-mode .toggle-card-drawer-btn:hover {
background: var(--color-neutral-700, #374151);
}
/* ============================================================
TOGGLE CARD DRAWER - CAMPOS DE FORMULÁRIO
Estilos para drawers com campos adicionais (drawerFields)
============================================================ */
/* Container de campos no drawer */
.toggle-card-drawer-fields {
display: flex;
flex-direction: column;
gap: 20px;
padding: 8px 0;
}
/* Campo individual */
.toggle-card-drawer-field {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Label do campo */
.toggle-card-drawer-field-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-primary, #141926);
line-height: 1.4;
}
.toggle-card-drawer-field-label .required {
color: var(--color-danger, #EF4444);
margin-left: 2px;
}
/* Wrapper do input (para posicionamento do autocomplete) */
.toggle-card-drawer-field-input-wrapper {
position: relative;
}
/* Input de texto no drawer */
.toggle-card-drawer-input {
width: 100%;
padding: 12px 16px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
color: var(--color-text-primary, #141926);
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-neutral-300, #D0D3DD);
border-radius: 6px;
transition: all 0.2s ease;
box-sizing: border-box;
}
.toggle-card-drawer-input:focus {
outline: none;
border-color: var(--color-accent-400, #3F68FB);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.15);
}
.toggle-card-drawer-input::placeholder {
color: var(--color-neutral-400, #7A839F);
}
/* Helper text do campo */
.toggle-card-drawer-field-helper {
font-family: var(--font-body);
font-size: 12px;
color: var(--color-neutral-500, #5A6385);
line-height: 1.4;
}
/* Dropdown do autocomplete */
.toggle-card-autocomplete-dropdown {
position: absolute;
left: 0;
right: 0;
top: 100%;
margin-top: 4px;
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-neutral-300, #D0D3DD);
border-radius: 6px;
max-height: 200px;
overflow-y: auto;
z-index: 10000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.toggle-card-autocomplete-item {
padding: 12px 16px;
font-size: 14px;
color: var(--color-text-primary, #141926);
cursor: pointer;
border-bottom: 1px solid var(--color-neutral-100, #ECEDF2);
transition: background-color 0.15s ease;
}
.toggle-card-autocomplete-item:last-child {
border-bottom: none;
}
.toggle-card-autocomplete-item:hover {
background-color: var(--color-neutral-100, #F3F4F6);
}
/* Drawer com campos - ajuste de layout */
.toggle-card-drawer-content--with-fields {
gap: 16px;
}
.toggle-card-drawer-content--with-fields .toggle-card-drawer-fields {
flex: 1;
overflow-y: auto;
}
/* ============================================================
DARK MODE - CAMPOS DO DRAWER
============================================================ */
.dark .toggle-card-drawer-field-label,
[data-theme="dark"] .toggle-card-drawer-field-label,
.dark-mode .toggle-card-drawer-field-label,
html.dark .toggle-card-drawer-field-label,
body.dark .toggle-card-drawer-field-label {
color: var(--color-neutral-200, #E5E7EB);
}
.dark .toggle-card-drawer-input,
[data-theme="dark"] .toggle-card-drawer-input,
.dark-mode .toggle-card-drawer-input,
html.dark .toggle-card-drawer-input,
body.dark .toggle-card-drawer-input {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-100, #F3F4F6);
}
.dark .toggle-card-drawer-input:focus,
[data-theme="dark"] .toggle-card-drawer-input:focus,
.dark-mode .toggle-card-drawer-input:focus,
html.dark .toggle-card-drawer-input:focus,
body.dark .toggle-card-drawer-input:focus {
border-color: var(--color-accent-400, #3F68FB);
}
.dark .toggle-card-drawer-input::placeholder,
[data-theme="dark"] .toggle-card-drawer-input::placeholder,
.dark-mode .toggle-card-drawer-input::placeholder,
html.dark .toggle-card-drawer-input::placeholder,
body.dark .toggle-card-drawer-input::placeholder {
color: var(--color-neutral-500, #6B7280);
}
.dark .toggle-card-drawer-field-helper,
[data-theme="dark"] .toggle-card-drawer-field-helper,
.dark-mode .toggle-card-drawer-field-helper,
html.dark .toggle-card-drawer-field-helper,
body.dark .toggle-card-drawer-field-helper {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .toggle-card-autocomplete-dropdown,
[data-theme="dark"] .toggle-card-autocomplete-dropdown,
.dark-mode .toggle-card-autocomplete-dropdown,
html.dark .toggle-card-autocomplete-dropdown,
body.dark .toggle-card-autocomplete-dropdown {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-600, #4B5563);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark .toggle-card-autocomplete-item,
[data-theme="dark"] .toggle-card-autocomplete-item,
.dark-mode .toggle-card-autocomplete-item,
html.dark .toggle-card-autocomplete-item,
body.dark .toggle-card-autocomplete-item {
color: var(--color-neutral-100, #F3F4F6);
border-bottom-color: var(--color-neutral-700, #374151);
}
.dark .toggle-card-autocomplete-item:hover,
[data-theme="dark"] .toggle-card-autocomplete-item:hover,
.dark-mode .toggle-card-autocomplete-item:hover,
html.dark .toggle-card-autocomplete-item:hover,
body.dark .toggle-card-autocomplete-item:hover {
background-color: var(--color-neutral-700, #374151);
}
/* === components/tooltip.css === */
/**
* Tooltip
*
* Dica visual que aparece ao passar o mouse sobre um elemento.
* Background invertido (mesmo padrão do toast).
* 4 posições: top, bottom, left, right.
* Variantes: texto e com ícone.
* Dark mode automático.
*
* SPECS FIGMA:
* - Padding: 4px 8px
* - Gap ícone-texto: 8px
* - Radius: 6px
* - Texto: p5 medium (12px)
* - Ícone: 16x16
* - Arrow: 8x4 (horizontal) / 4x8 (vertical)
* - Light bg: --neutral-800 (#12151F)
* - Dark bg: --neutral-300 (#1D2333)
*
* @version 3.0.0
*/
/* ============================================================
CONTAINER (wrapper do trigger + tooltip)
============================================================ */
.tooltip-wrapper {
position: relative;
display: inline-flex;
}
/* ============================================================
TOOLTIP
============================================================ */
.tooltip {
position: absolute;
z-index: var(--z-tooltip, 1070);
display: none;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-1) var(--spacing-2);
background: var(--surface-base-neutral-container-default-on-black);
border-radius: var(--radius-default);
white-space: nowrap;
pointer-events: none;
}
.tooltip-wrapper:hover .tooltip {
display: flex;
}
/* ============================================================
DARK MODE
============================================================ */
.dark .tooltip,
[data-theme="dark"] .tooltip {
background: var(--surface-base-neutral-container-emphasis);
}
/* ============================================================
TEXTO
============================================================ */
.tooltip-text {
font-family: var(--font-body);
font-size: var(--font-size-p5);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-p5);
color: var(--text-base-neutral-white);
}
/* ============================================================
ÍCONE
============================================================ */
.tooltip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--text-base-neutral-white);
}
.tooltip-icon svg {
width: 16px;
height: 16px;
}
/* ============================================================
ARROW (setinha)
============================================================ */
.tooltip::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
}
/* ============================================================
POSIÇÕES
============================================================ */
/* Top (tooltip acima, arrow aponta pra baixo) */
.tooltip--top {
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
.tooltip--top::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 4px 4px 0 4px;
border-top-color: var(--surface-base-neutral-container-default-on-black);
}
.dark .tooltip--top::after,
[data-theme="dark"] .tooltip--top::after {
border-top-color: var(--surface-base-neutral-container-emphasis);
}
/* Bottom (tooltip abaixo, arrow aponta pra cima) */
.tooltip--bottom {
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
.tooltip--bottom::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 0 4px 4px 4px;
border-bottom-color: var(--surface-base-neutral-container-default-on-black);
}
.dark .tooltip--bottom::after,
[data-theme="dark"] .tooltip--bottom::after {
border-bottom-color: var(--surface-base-neutral-container-emphasis);
}
/* Left (tooltip à esquerda, arrow aponta pra direita) */
.tooltip--left {
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
}
.tooltip--left::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-width: 4px 0 4px 4px;
border-left-color: var(--surface-base-neutral-container-default-on-black);
}
.dark .tooltip--left::after,
[data-theme="dark"] .tooltip--left::after {
border-left-color: var(--surface-base-neutral-container-emphasis);
}
/* Right (tooltip à direita, arrow aponta pra esquerda) */
.tooltip--right {
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
}
.tooltip--right::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-width: 4px 4px 4px 0;
border-right-color: var(--surface-base-neutral-container-default-on-black);
}
.dark .tooltip--right::after,
[data-theme="dark"] .tooltip--right::after {
border-right-color: var(--surface-base-neutral-container-emphasis);
}
/* ============================================================
PRINT
============================================================ */
@media print {
.tooltip {
display: none !important;
}
}
/* === components/tree.css === */
/**
* TREE COMPONENT
*
* Componente de arvore hierarquica com suporte a:
* - Checkboxes para selecao multipla
* - Expand/collapse de nos
* - Modos de selecao (1: unico, 2: multiplo filhos, 3: multiplo com pais)
* - Icones customizaveis (pasta/pagina)
* - Dark mode via variaveis semanticas
* - Acessibilidade WCAG 2.1 AA (ARIA, keyboard navigation)
*
* Substitui FancyTree por implementacao nativa do Design System
*
* @version 1.0.0
* @date 2026-03-02
*/
/* ============================================================
1. CONTAINER PRINCIPAL
============================================================ */
.ds-tree {
display: flex;
flex-direction: column;
width: 100%;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-primary);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px);
overflow: hidden;
}
/**
* Container com scroll interno
* Altura configuravel via style ou classe
*/
.ds-tree-scroll {
overflow-y: auto;
overflow-x: hidden;
padding: var(--spacing-sm, 8px);
}
/* Altura padrao 250px, pode ser sobrescrita inline */
.ds-tree-scroll {
max-height: 250px;
}
/* Variantes de altura */
.ds-tree--height-sm .ds-tree-scroll { max-height: 150px; }
.ds-tree--height-md .ds-tree-scroll { max-height: 250px; }
.ds-tree--height-lg .ds-tree-scroll { max-height: 400px; }
.ds-tree--height-xl .ds-tree-scroll { max-height: 600px; }
.ds-tree--height-auto .ds-tree-scroll { max-height: none; }
/* ============================================================
2. HEADER (titulo opcional)
============================================================ */
.ds-tree-header {
display: flex;
align-items: center;
gap: var(--spacing-md, 16px);
padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border);
}
.ds-tree-title {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-p4, 24px);
color: var(--color-text-primary);
flex: 1;
}
.ds-tree-actions {
display: flex;
gap: var(--spacing-xs, 4px);
}
.ds-tree-action {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
font-size: var(--font-size-p5, 12px);
color: var(--color-primary);
background: transparent;
border: none;
border-radius: var(--radius-sm, 4px);
cursor: pointer;
transition: background var(--transition-fast, 150ms ease-in-out);
}
.ds-tree-action:hover {
background: rgba(62, 104, 251, 0.08);
}
/* ============================================================
3. NO DA ARVORE
============================================================ */
.ds-tree-node {
display: flex;
flex-direction: column;
width: 100%;
}
/**
* Header do no (linha clicavel)
* Layout: [toggle] [checkbox] [icon] [label]
*/
.ds-tree-node-header {
display: flex;
align-items: center;
gap: var(--spacing-xs, 4px);
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
border-radius: var(--radius-sm, 4px);
cursor: pointer;
transition: background var(--transition-fast, 150ms ease-in-out);
user-select: none;
}
.ds-tree-node-header:hover {
background: var(--color-bg-tertiary);
}
.ds-tree-node-header:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
/* ============================================================
4. TOGGLE (seta expand/collapse)
============================================================ */
.ds-tree-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-text-secondary);
transition: transform var(--transition-fast, 150ms ease-in-out);
}
.ds-tree-toggle::before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform var(--transition-fast, 150ms ease-in-out);
}
/* Rotaciona quando expandido */
.ds-tree-node--expanded > .ds-tree-node-header .ds-tree-toggle::before {
transform: rotate(90deg);
}
/* Esconde toggle para nos folha */
.ds-tree-node--leaf .ds-tree-toggle {
visibility: hidden;
}
/* ============================================================
5. CHECKBOX
============================================================ */
.ds-tree-checkbox {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.ds-tree-checkbox input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.ds-tree-checkbox-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: var(--color-bg-secondary);
border: 2px solid var(--color-border);
border-radius: var(--radius-sm, 4px);
transition: all var(--transition-fast, 150ms ease-in-out);
}
.ds-tree-checkbox-icon {
display: none;
width: 10px;
height: 10px;
color: var(--white, #FFFFFF);
}
/* Checkmark SVG inline */
.ds-tree-checkbox-icon::before {
content: '';
display: block;
width: 10px;
height: 8px;
background: currentColor;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
/* Estados do checkbox */
.ds-tree-checkbox:hover .ds-tree-checkbox-box {
border-color: var(--color-text-secondary);
}
.ds-tree-checkbox input:checked + .ds-tree-checkbox-box {
background: var(--color-primary);
border-color: var(--color-primary);
}
.ds-tree-checkbox input:checked + .ds-tree-checkbox-box .ds-tree-checkbox-icon {
display: flex;
}
/* Indeterminate (pai com filhos parcialmente selecionados) */
.ds-tree-checkbox input:indeterminate + .ds-tree-checkbox-box {
background: var(--color-primary);
border-color: var(--color-primary);
}
.ds-tree-checkbox input:indeterminate + .ds-tree-checkbox-box .ds-tree-checkbox-icon {
display: flex;
}
.ds-tree-checkbox input:indeterminate + .ds-tree-checkbox-box .ds-tree-checkbox-icon::before {
width: 8px;
height: 2px;
background: currentColor;
clip-path: none;
border-radius: 1px;
}
/* Focus */
.ds-tree-checkbox input:focus-visible + .ds-tree-checkbox-box {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ============================================================
6. ICONE DO NO
============================================================ */
/* Icone desabilitado por padrao - checkbox direto no label */
.ds-tree-icon {
display: none;
/* display: flex; */
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--color-text-secondary);
font-size: 14px;
}
/* Icones IPE para pasta */
.ds-tree-node--folder > .ds-tree-node-header .ds-tree-icon::before {
font-family: 'Ipe-Icons' !important;
content: '\e9f5'; /* ipe-pasta-preenchida */
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ds-tree-node--folder.ds-tree-node--expanded > .ds-tree-node-header .ds-tree-icon::before {
content: '\e9f2'; /* ipe-pasta-contornada (aberta) */
}
/* Icone IPE para folha/pagina */
.ds-tree-node--leaf > .ds-tree-node-header .ds-tree-icon::before {
font-family: 'Ipe-Icons' !important;
content: '\e9e6'; /* ipe-pagina-contornada */
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
7. LABEL DO NO
============================================================ */
.ds-tree-label {
flex: 1;
min-width: 0;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Label do no selecionado - mantemos igual ao nao selecionado */
/* .ds-tree-node--selected > .ds-tree-node-header .ds-tree-label {
font-weight: var(--font-weight-medium, 500);
color: var(--color-primary);
} */
/* ============================================================
8. FILHOS (container aninhado)
============================================================ */
.ds-tree-children {
display: none;
flex-direction: column;
padding-left: var(--spacing-lg, 20px);
margin-left: 9px; /* Alinha com o centro do toggle */
border-left: 1px solid var(--color-border-light);
}
.ds-tree-node--expanded > .ds-tree-children {
display: flex;
}
/* ============================================================
9. ESTADOS
============================================================ */
/* No desabilitado */
.ds-tree-node--disabled {
opacity: 0.5;
pointer-events: none;
}
.ds-tree-node--disabled .ds-tree-checkbox-box {
background: var(--color-bg-tertiary);
border-color: var(--color-border);
cursor: not-allowed;
}
/* No carregando */
.ds-tree-node--loading > .ds-tree-node-header .ds-tree-toggle::before {
border: none;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--color-border);
border-top-color: var(--color-primary);
animation: ds-tree-spin 0.8s linear infinite;
}
@keyframes ds-tree-spin {
to { transform: rotate(360deg); }
}
/* No com erro */
.ds-tree-node--error > .ds-tree-node-header {
background: var(--color-danger-light);
}
.ds-tree-node--error > .ds-tree-node-header .ds-tree-label {
color: var(--color-danger);
}
/* ============================================================
10. VARIANTE SEM CHECKBOX
============================================================ */
.ds-tree--no-checkbox .ds-tree-checkbox {
display: none;
}
/* ============================================================
11. VARIANTE COMPACTA
============================================================ */
.ds-tree--compact .ds-tree-node-header {
padding: 2px var(--spacing-xs, 4px);
}
.ds-tree--compact .ds-tree-label {
font-size: var(--font-size-p5, 12px);
line-height: var(--line-height-p5, 22px);
}
.ds-tree--compact .ds-tree-checkbox-box {
width: 16px;
height: 16px;
}
.ds-tree--compact .ds-tree-icon {
width: 16px;
height: 16px;
font-size: 12px;
}
.ds-tree--compact .ds-tree-children {
padding-left: var(--spacing-md, 16px);
margin-left: 7px;
}
/* ============================================================
12. DARK MODE
============================================================ */
.dark .ds-tree,
[data-theme="dark"] .ds-tree {
background: var(--color-bg-secondary);
border-color: var(--color-border);
}
.dark .ds-tree-header,
[data-theme="dark"] .ds-tree-header {
background: var(--color-bg-dark);
border-color: var(--color-border);
}
.dark .ds-tree-title,
[data-theme="dark"] .ds-tree-title {
color: var(--color-text-light);
}
.dark .ds-tree-node-header:hover,
[data-theme="dark"] .ds-tree-node-header:hover {
background: rgba(255, 255, 255, 0.05);
}
.dark .ds-tree-checkbox-box,
[data-theme="dark"] .ds-tree-checkbox-box {
background: var(--color-bg-dark);
border-color: var(--color-border);
}
.dark .ds-tree-checkbox input:checked + .ds-tree-checkbox-box,
[data-theme="dark"] .ds-tree-checkbox input:checked + .ds-tree-checkbox-box {
background: var(--color-primary);
border-color: var(--color-primary);
}
.dark .ds-tree-label,
[data-theme="dark"] .ds-tree-label {
color: var(--color-text-light);
}
.dark .ds-tree-toggle,
.dark .ds-tree-icon,
[data-theme="dark"] .ds-tree-toggle,
[data-theme="dark"] .ds-tree-icon {
color: var(--color-text-muted);
}
.dark .ds-tree-children,
[data-theme="dark"] .ds-tree-children {
border-color: var(--color-border);
}
/* ============================================================
13. RESPONSIVIDADE
============================================================ */
@media (max-width: 768px) {
.ds-tree-scroll {
padding: var(--spacing-xs, 4px);
}
.ds-tree-node-header {
padding: var(--spacing-sm, 8px) var(--spacing-xs, 4px);
}
.ds-tree-label {
font-size: var(--font-size-p3, 14px);
}
/* Touch targets maiores em mobile */
.ds-tree-checkbox-box {
width: 22px;
height: 22px;
}
.ds-tree-toggle {
width: 24px;
height: 24px;
}
}
/* ============================================================
14. ACESSIBILIDADE
============================================================ */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.ds-tree-toggle::before,
.ds-tree-checkbox-box,
.ds-tree-node-header {
transition: none;
}
.ds-tree-node--loading > .ds-tree-node-header .ds-tree-toggle::before {
animation: none;
}
}
/* High contrast */
@media (forced-colors: active) {
.ds-tree {
border: 2px solid ButtonText;
}
.ds-tree-checkbox-box {
border: 2px solid ButtonText;
}
.ds-tree-checkbox input:checked + .ds-tree-checkbox-box {
background: Highlight;
border-color: Highlight;
}
.ds-tree-node-header:focus-visible {
outline: 3px solid Highlight;
}
}
/* ============================================================
15. PRINT STYLES
============================================================ */
@media print {
.ds-tree {
border: 1px solid #000;
background: #fff;
}
.ds-tree-children {
display: flex !important; /* Expande tudo para impressao */
}
.ds-tree-toggle {
display: none;
}
.ds-tree-checkbox-box {
border: 1px solid #000;
background: #fff;
}
.ds-tree-checkbox input:checked + .ds-tree-checkbox-box::after {
content: '\2713';
color: #000;
font-size: 12px;
}
}
/* ============================================================
16. ANIMACOES
============================================================ */
@keyframes ds-tree-expand {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ds-tree-node--expanded > .ds-tree-children {
animation: ds-tree-expand 0.2s ease-out;
}
/* ============================================================
17. SCROLLBAR CUSTOMIZADA
============================================================ */
.ds-tree-scroll::-webkit-scrollbar {
width: 6px;
}
.ds-tree-scroll::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
border-radius: 3px;
}
.ds-tree-scroll::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}
.ds-tree-scroll::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
/* Firefox */
.ds-tree-scroll {
scrollbar-width: thin;
scrollbar-color: var(--color-border) var(--color-bg-tertiary);
}
/* === components/venn-diagram.css === */
/**
* Venn Diagram
*
* Diagrama de Venn com N círculos SVG sobrepostos, blend modes e hover.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.venn-diagram {
width: 100%;
position: relative;
}
.venn-diagram__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 16px;
text-align: center;
}
/* SVG responsivo */
.venn-diagram__svg {
width: 100%;
height: auto;
display: block;
}
/* Círculo */
.venn-diagram__circle {
mix-blend-mode: multiply;
transition: opacity 0.3s, transform 0.3s;
cursor: pointer;
transform-origin: center;
}
.venn-diagram__circle:hover {
opacity: 0.85;
transform: scale(1.05);
}
/* Label dentro do SVG */
.venn-diagram__label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
fill: var(--text-base-neutral-default);
pointer-events: none;
text-anchor: middle;
dominant-baseline: central;
}
/* Valor numérico */
.venn-diagram__value {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
fill: var(--text-base-neutral-default);
pointer-events: none;
text-anchor: middle;
dominant-baseline: central;
}
/* Tooltip */
.venn-diagram__tooltip {
position: absolute;
padding: 8px 12px;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
font-size: 12px;
color: var(--text-base-neutral-default);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 10;
max-width: 240px;
white-space: normal;
}
.venn-diagram__tooltip--visible {
opacity: 1;
}
.venn-diagram__tooltip-title {
font-weight: 600;
margin-bottom: 2px;
}
.venn-diagram__tooltip-desc {
color: var(--text-base-neutral-secondary);
line-height: 1.4;
}
/* Legenda */
.venn-diagram__legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 20px;
}
.venn-diagram__legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-base-neutral-secondary);
}
.venn-diagram__legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
/* Estado vazio */
.venn-diagram__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .venn-diagram__circle {
mix-blend-mode: screen;
}
.dark .venn-diagram__label {
fill: var(--text-base-neutral-default);
}
.dark .venn-diagram__value {
fill: var(--text-base-neutral-default);
}
.dark .venn-diagram__tooltip {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}
/* === components/workflow-diagram.css === */
/**
* Workflow Diagram
*
* Editor de fluxo com nós circulares tipados (start, process, decision, end),
* arestas rotuladas, toolbar de ações, painel lateral de propriedades e minimap.
* Integra com ReactFlow como canvas.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.workflow-diagram {
width: 100%;
height: 600px;
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--surface-base-neutral-page-default);
}
/* ========================================================================
TOOLBAR
======================================================================== */
.workflow-diagram__toolbar {
display: flex;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--border-base-neutral-default);
align-items: center;
background: var(--surface-base-neutral-container-default);
}
.workflow-diagram__toolbar-btn {
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
font-family: var(--font-body);
border: 1px solid var(--border-base-neutral-default);
cursor: pointer;
background: transparent;
color: var(--text-base-neutral-default);
transition: background-color 0.15s, border-color 0.15s;
}
.workflow-diagram__toolbar-btn:hover {
background: var(--surface-base-neutral-container-emphasis);
}
/* Primary variant */
.workflow-diagram__toolbar-btn--primary {
background: var(--accent-300);
color: #fff;
border-color: var(--accent-300);
}
.workflow-diagram__toolbar-btn--primary:hover {
filter: brightness(1.1);
}
/* Vertical separator */
.workflow-diagram__toolbar-separator {
width: 1px;
height: 24px;
background: var(--border-base-neutral-default);
flex-shrink: 0;
}
/* ========================================================================
BODY
======================================================================== */
.workflow-diagram__body {
display: flex;
flex: 1;
overflow: hidden;
}
/* ReactFlow canvas area */
.workflow-diagram__canvas {
flex: 1;
position: relative;
}
/* ========================================================================
SIDE PANEL (propriedades)
======================================================================== */
.workflow-diagram__panel {
width: 280px;
border-left: 1px solid var(--border-base-neutral-default);
padding: 16px;
overflow-y: auto;
background: var(--surface-base-neutral-container-default);
display: flex;
flex-direction: column;
gap: 12px;
}
.workflow-diagram__panel-title {
font-size: 14px;
font-weight: 600;
margin: 0;
color: var(--text-base-neutral-default);
}
.workflow-diagram__panel-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.workflow-diagram__panel-label {
font-size: 12px;
color: var(--text-base-neutral-secondary);
font-weight: 500;
}
.workflow-diagram__panel-input {
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--border-base-neutral-default);
font-size: 13px;
font-family: var(--font-body);
background: var(--surface-base-neutral-page-default);
color: var(--text-base-neutral-default);
transition: border-color 0.15s, box-shadow 0.15s;
}
.workflow-diagram__panel-input:focus {
outline: none;
border-color: var(--accent-300);
box-shadow: 0 0 0 2px var(--accent-100);
}
/* ========================================================================
NODES
======================================================================== */
.workflow-diagram__node {
border-radius: 50%;
width: 60px;
height: 60px;
border: 2px solid var(--border-base-neutral-default);
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-base-neutral-page-default);
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
}
.workflow-diagram__node:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transform: scale(1.05);
}
/* Start node — green */
.workflow-diagram__node--start {
border-color: #10B981;
background: #ECFDF5;
}
/* Process node — blue/accent */
.workflow-diagram__node--process {
border-color: var(--accent-300);
background: var(--accent-100);
}
/* Decision node — diamond (rotated square) */
.workflow-diagram__node--decision {
border-radius: 0;
transform: rotate(45deg);
border-color: #F59E0B;
background: #FFFBEB;
}
.workflow-diagram__node--decision:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transform: rotate(45deg) scale(1.05);
}
/* Counter-rotate inner content */
.workflow-diagram__node--decision .workflow-diagram__node-label {
transform: rotate(-45deg);
}
/* End node — red */
.workflow-diagram__node--end {
border-color: #EF4444;
background: #FEF2F2;
}
/* Node label */
.workflow-diagram__node-label {
font-size: 11px;
font-family: var(--font-body);
text-align: center;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-base-neutral-default);
}
/* ========================================================================
EDGES
======================================================================== */
.workflow-diagram__edge-label {
font-size: 10px;
font-family: var(--font-body);
background: var(--surface-base-neutral-page-default);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border-base-neutral-default);
color: var(--text-base-neutral-secondary);
}
/* ========================================================================
MINIMAP
======================================================================== */
.workflow-diagram__minimap {
position: absolute;
bottom: 8px;
right: 8px;
border: 1px solid var(--border-base-neutral-default);
border-radius: 4px;
overflow: hidden;
}
/* ========================================================================
EMPTY STATE
======================================================================== */
.workflow-diagram__empty {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
color: var(--text-base-neutral-secondary);
font-size: 14px;
border: 2px dashed var(--border-base-neutral-default);
border-radius: 8px;
margin: 16px;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .workflow-diagram {
background: var(--surface-base-neutral-page-default);
border-color: var(--border-base-neutral-default);
}
.dark .workflow-diagram__toolbar {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .workflow-diagram__toolbar-btn {
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-default);
}
.dark .workflow-diagram__toolbar-btn:hover {
background: var(--surface-base-neutral-container-emphasis);
}
.dark .workflow-diagram__panel {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .workflow-diagram__panel-input {
background: var(--surface-base-neutral-page-default);
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-default);
}
.dark .workflow-diagram__node {
background: var(--surface-base-neutral-page-default);
}
.dark .workflow-diagram__node:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.dark .workflow-diagram__node--start {
border-color: #10B981;
background: #064E3B;
}
.dark .workflow-diagram__node--process {
border-color: var(--accent-300);
background: var(--accent-100);
}
.dark .workflow-diagram__node--decision {
border-color: #F59E0B;
background: #78350F;
}
.dark .workflow-diagram__node--end {
border-color: #EF4444;
background: #7F1D1D;
}
.dark .workflow-diagram__edge-label {
background: var(--surface-base-neutral-page-default);
border-color: var(--border-base-neutral-default);
color: var(--text-base-neutral-secondary);
}
.dark .workflow-diagram__minimap {
border-color: var(--border-base-neutral-default);
}
/* ========================================================================
RESPONSIVO
======================================================================== */
@media (max-width: 768px) {
.workflow-diagram {
height: 400px;
}
.workflow-diagram__panel {
display: none;
}
}
/* === components/zigzag-flow.css === */
/**
* Zigzag Flow
*
* Timeline alternada com layout zigzag, animações de entrada staggered
* e status badges. Linha central vertical com dots de status.
*
* @layer components
* @since 0.2.0
*/
/* Container */
.zigzag-flow {
width: 100%;
position: relative;
}
.zigzag-flow__title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 24px;
}
/* Items wrapper com linha vertical central */
.zigzag-flow__items {
position: relative;
}
.zigzag-flow__items::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-base-neutral-default);
transform: translateX(-50%);
}
/* Item individual */
.zigzag-flow__item {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
position: relative;
opacity: 0;
}
/* Alternância zigzag */
.zigzag-flow__item:nth-child(odd) {
flex-direction: row;
}
.zigzag-flow__item:nth-child(even) {
flex-direction: row-reverse;
}
/* Conector diagonal entre itens */
.zigzag-flow__connector {
display: none;
}
.zigzag-flow__item::after {
content: '';
position: absolute;
top: 24px;
width: calc(5% - 2px);
height: 2px;
background: var(--border-base-neutral-default);
z-index: 1;
}
.zigzag-flow__item:nth-child(odd)::after {
left: 45%;
}
.zigzag-flow__item:nth-child(even)::after {
right: 45%;
}
/* Dot central na linha vertical */
.zigzag-flow__dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid var(--border-base-neutral-default);
background: var(--surface-base-neutral-page-default);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 14px;
z-index: 2;
flex-shrink: 0;
}
.zigzag-flow__dot--completed {
border-color: var(--border-base-success-default);
background: var(--surface-base-alert-container-success);
}
.zigzag-flow__dot--pending {
border-color: var(--border-base-warning-default);
background: var(--surface-base-alert-container-warning);
}
.zigzag-flow__dot--error {
border-color: var(--border-base-error-default);
background: var(--surface-base-alert-container-error);
}
.zigzag-flow__dot--warning {
border-color: var(--border-base-warning-default);
background: var(--surface-base-alert-container-warning);
}
/* Card */
.zigzag-flow__card {
width: 45%;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 8px;
padding: 16px;
transition: box-shadow 0.2s, border-color 0.2s;
}
.zigzag-flow__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: var(--border-base-neutral-strong);
}
/* Conteúdo do card */
.zigzag-flow__card-title {
font-size: 14px;
font-weight: 600;
color: var(--text-base-neutral-default);
margin: 0 0 4px;
}
.zigzag-flow__card-body {
font-size: 13px;
line-height: 1.5;
color: var(--text-base-neutral-secondary);
margin: 0 0 8px;
}
.zigzag-flow__card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--text-base-neutral-subtle);
}
/* Status badge */
.zigzag-flow__status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
font-weight: 500;
line-height: 1.6;
margin-bottom: 8px;
}
.zigzag-flow__status--completed {
background: var(--surface-base-alert-container-success);
color: var(--text-base-success-default);
}
.zigzag-flow__status--pending {
background: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
.zigzag-flow__status--error {
background: var(--surface-base-alert-container-error);
color: var(--text-base-error-default);
}
.zigzag-flow__status--warning {
background: var(--surface-base-alert-container-warning);
color: var(--text-base-warning-default);
}
/* Attachments */
.zigzag-flow__attachments {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.zigzag-flow__attachment-link {
font-size: 12px;
color: var(--text-base-brand-default);
text-decoration: none;
}
.zigzag-flow__attachment-link:hover {
text-decoration: underline;
}
/* Estado vazio */
.zigzag-flow__empty {
text-align: center;
padding: 48px 24px;
color: var(--text-base-neutral-subtle);
font-size: 14px;
border: 1px dashed var(--border-base-neutral-default);
border-radius: 8px;
}
/* ========================================================================
ANIMAÇÃO — Staggered fade in
======================================================================== */
@keyframes zigzagFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.zigzag-flow__item--animated {
animation: zigzagFadeIn 0.5s ease forwards;
}
/* ========================================================================
DARK MODE
======================================================================== */
.dark .zigzag-flow__card {
background: var(--surface-base-neutral-container-default);
border-color: var(--border-base-neutral-default);
}
.dark .zigzag-flow__card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
.dark .zigzag-flow__dot {
background: var(--surface-base-neutral-page-default);
}
.dark .zigzag-flow__items::before {
background: var(--border-base-neutral-default);
}
/* ========================================================================
RESPONSIVO — Em mobile, coluna única à esquerda
======================================================================== */
@media (max-width: 768px) {
.zigzag-flow__items::before {
left: 16px;
}
.zigzag-flow__item,
.zigzag-flow__item:nth-child(odd),
.zigzag-flow__item:nth-child(even) {
flex-direction: row;
padding-left: 40px;
}
.zigzag-flow__item::after {
display: none;
}
.zigzag-flow__card {
width: 100%;
}
.zigzag-flow__dot {
left: 16px;
transform: translateX(-50%);
}
}
/* === extensions/acoes-quantidade.css === */
/**
* ACOES QUANTIDADE COMPONENT
*
* Componente "slave" que sincroniza com multiselect-categorizado.
* Exibe as acoes selecionadas com campo de quantidade.
*
* Estrutura:
* .acoes-quantidade
* .aq-header
* .aq-body
* .aq-empty
* .aq-items
* .aq-item
* .aq-footer
*
* @version 1.0.0
* @date 2026-03-11
* @requires multiselect-categorizado.js (para sincronizacao)
*/
/* ============================================
CONTAINER PRINCIPAL
============================================ */
.acoes-quantidade {
display: flex;
flex-direction: column;
background: var(--color-text-light, #fff);
border: 1px solid var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-md, 8px);
overflow: hidden;
font-family: var(--font-body, 'Inter', sans-serif);
}
/* ============================================
HEADER
============================================ */
.aq-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
background: var(--color-neutral-50, #F6F6F9);
border-bottom: 1px solid var(--color-neutral-300, #E0E2EB);
}
.aq-label {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary, #1A1D26);
}
/* ============================================
BODY
============================================ */
.aq-body {
flex: 1;
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
/* Scrollbar customizada */
.aq-body::-webkit-scrollbar {
width: 8px;
}
.aq-body::-webkit-scrollbar-track {
background: var(--color-neutral-100, #F0F1F5);
}
.aq-body::-webkit-scrollbar-thumb {
background: var(--color-neutral-400, #C8CDDB);
border-radius: 4px;
}
.aq-body::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-500, #9CA3AF);
}
/* ============================================
ESTADO VAZIO
============================================ */
.aq-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xl, 32px);
text-align: center;
min-height: 200px;
}
.aq-empty-icon {
font-size: 40px;
opacity: 0.4;
margin-bottom: var(--spacing-md, 12px);
color: var(--color-neutral-500, #9CA3AF);
}
.aq-empty-icon i {
font-size: 40px;
}
.aq-empty-text {
font-size: 14px;
font-weight: 500;
color: var(--color-neutral-600, #6B7280);
margin-bottom: var(--spacing-xs, 4px);
}
.aq-empty-hint {
font-size: 12px;
color: var(--color-neutral-500, #9CA3AF);
}
/* ============================================
LISTA DE ITEMS
============================================ */
.aq-items {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
}
/* ============================================
ITEM INDIVIDUAL
============================================ */
.aq-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md, 12px);
padding: var(--spacing-md, 12px);
background: var(--color-neutral-50, #F6F6F9);
border: 1px solid var(--color-neutral-200, #E5E7EB);
border-radius: var(--radius-sm, 4px);
transition: all var(--transition-fast, 150ms ease);
}
.aq-item:hover {
background: var(--color-neutral-100, #F0F1F5);
border-color: var(--color-neutral-300, #D1D5DB);
}
.aq-item:focus-within {
border-color: var(--color-accent-300, #3E68FB);
box-shadow: 0 0 0 2px rgba(62, 104, 251, 0.1);
}
/* ============================================
LABEL DO ITEM
============================================ */
.aq-item-label {
flex: 1;
font-size: 14px;
color: var(--color-text-primary, #1A1D26);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Categoria badge (opcional) */
.aq-item-category {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-neutral-500, #9CA3AF);
margin-top: var(--spacing-xs, 4px);
}
/* ============================================
CONTROLES DO ITEM
============================================ */
.aq-item-controls {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
flex-shrink: 0;
}
/* Input de quantidade */
.aq-item-qty {
width: 64px;
height: 32px;
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
background: var(--color-text-light, #fff);
border: 1px solid var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-sm, 4px);
font-size: 14px;
font-weight: 500;
text-align: center;
color: var(--color-text-primary, #1A1D26);
transition: all var(--transition-fast, 150ms ease);
-moz-appearance: textfield;
}
.aq-item-qty::-webkit-outer-spin-button,
.aq-item-qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.aq-item-qty:hover {
border-color: var(--color-neutral-500, #9CA3AF);
}
.aq-item-qty:focus {
outline: none;
border-color: var(--color-accent-300, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.15);
}
/* Quantidade zero */
.aq-item-qty.qty-zero,
.aq-item-qty[value="0"] {
color: var(--color-neutral-500, #9CA3AF);
font-style: italic;
}
/* Botao remover */
.aq-item-remove {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-sm, 4px);
color: var(--color-neutral-500, #9CA3AF);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
opacity: 0.6;
}
.aq-item-remove:hover {
background: rgba(232, 58, 48, 0.1);
color: var(--color-danger, #E83A30);
opacity: 1;
}
.aq-item-remove i {
font-size: 16px;
}
/* ============================================
FOOTER
============================================ */
.aq-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
background: var(--color-neutral-50, #F6F6F9);
border-top: 1px solid var(--color-neutral-300, #E0E2EB);
}
.aq-summary {
font-size: 13px;
color: var(--color-neutral-600, #6B7280);
}
.aq-count,
.aq-total {
font-weight: 600;
color: var(--color-accent-300, #3E68FB);
}
/* ============================================
ESTADOS
============================================ */
/* Estado de erro */
.acoes-quantidade.aq-error {
border-color: var(--color-danger, #E83A30);
}
.acoes-quantidade.aq-error .aq-header {
background: rgba(232, 58, 48, 0.05);
}
.aq-error-message {
padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
font-size: 12px;
color: var(--color-danger, #E83A30);
background: rgba(232, 58, 48, 0.05);
}
/* Estado desabilitado */
.acoes-quantidade.aq-disabled {
opacity: 0.6;
pointer-events: none;
}
/* Estado sincronizando */
.acoes-quantidade.aq-syncing .aq-items {
opacity: 0.5;
pointer-events: none;
}
/* ============================================
DARK MODE
============================================ */
.dark .acoes-quantidade,
[data-theme="dark"] .acoes-quantidade {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-600, #4B5563);
}
.dark .aq-header,
[data-theme="dark"] .aq-header {
background: var(--color-neutral-700, #374151);
border-bottom-color: var(--color-neutral-600, #4B5563);
}
.dark .aq-label,
[data-theme="dark"] .aq-label {
color: var(--color-neutral-200, #E5E7EB);
}
.dark .aq-empty-icon,
[data-theme="dark"] .aq-empty-icon {
color: var(--color-neutral-500, #6B7280);
}
.dark .aq-empty-text,
[data-theme="dark"] .aq-empty-text {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .aq-item,
[data-theme="dark"] .aq-item {
background: var(--color-neutral-700, #374151);
border-color: var(--color-neutral-600, #4B5563);
}
.dark .aq-item:hover,
[data-theme="dark"] .aq-item:hover {
background: var(--color-neutral-600, #4B5563);
}
.dark .aq-item-label,
[data-theme="dark"] .aq-item-label {
color: var(--color-neutral-200, #E5E7EB);
}
.dark .aq-item-qty,
[data-theme="dark"] .aq-item-qty {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-500, #6B7280);
color: var(--color-neutral-200, #E5E7EB);
}
.dark .aq-footer,
[data-theme="dark"] .aq-footer {
background: var(--color-neutral-700, #374151);
border-top-color: var(--color-neutral-600, #4B5563);
}
.dark .aq-summary,
[data-theme="dark"] .aq-summary {
color: var(--color-neutral-400, #9CA3AF);
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.aq-body {
max-height: 300px;
}
.aq-item {
padding: var(--spacing-sm, 8px);
}
.aq-item-label {
font-size: 13px;
}
.aq-item-qty {
width: 56px;
}
}
@media (max-width: 480px) {
.aq-item {
flex-wrap: wrap;
}
.aq-item-label {
width: 100%;
margin-bottom: var(--spacing-xs, 4px);
}
.aq-item-controls {
width: 100%;
justify-content: flex-end;
}
}
/* ============================================
ANIMACOES
============================================ */
@keyframes aq-item-enter {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes aq-item-exit {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(10px);
height: 0;
padding: 0;
margin: 0;
border: 0;
}
}
.aq-item.entering {
animation: aq-item-enter 0.2s ease-out;
}
.aq-item.exiting {
animation: aq-item-exit 0.2s ease-out forwards;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.acoes-quantidade,
.acoes-quantidade * {
transition: none !important;
animation: none !important;
}
}
/* === extensions/chat-ia.css === */
/**
* Componente Chat IA - Sistema SIDASP
* Dropdown de assistente IA integrado na navbar.
* Suporta uso standalone (CSS) e React Island (chat-ia).
*
* @layer extensions
* @since 1.0.0
* @updated 2026-03-15
*/
/* ========== CHAT IA WRAPPER ========== */
/* Botao do Chat - Integrado com a navbar */
.ia-chat-btn {
background: transparent;
border: none;
cursor: pointer;
outline: none;
position: relative;
}
.ia-chat-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.ia-chat-btn.active {
background: rgba(255, 255, 255, 0.15);
}
/* Icone SVG do Chat */
.ia-chat-icon {
flex-shrink: 0;
}
/* Animacao da seta quando ativo */
.ia-chat-btn.active .ia-arrow {
transform: rotate(180deg);
}
/* Responsivo - ocultar label em telas pequenas */
@media (max-width: 768px) {
.ia-label {
display: none;
}
}
/* ========== DROPDOWN DO CHAT ========== */
.ia-chat-dropdown {
position: fixed;
top: 60px;
right: 20px;
width: 400px;
height: 560px;
background: var(--surface-base-neutral-container-default);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 9999;
animation: ia-slideDown 0.2s ease-out;
}
.ia-chat-dropdown.active {
display: flex;
}
/* Container da React Island (dentro do dropdown ou standalone) */
.ia-chat-island {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
@keyframes ia-slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========== HEADER DO CHAT ========== */
.ia-chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
background: var(--accent-300);
color: var(--text-base-neutral-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.ia-chat-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.ia-chat-title {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
}
.ia-chat-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
opacity: 0.9;
}
.status-dot {
width: 6px;
height: 6px;
background: var(--green-400);
border-radius: 50%;
animation: ia-pulse 2s infinite;
}
@keyframes ia-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.ia-chat-close {
background: transparent;
border: none;
color: var(--text-base-neutral-white);
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background var(--transition-fast);
}
.ia-chat-close:hover {
background: rgba(255, 255, 255, 0.15);
}
/* ========== AREA DE MENSAGENS ========== */
.ia-chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
background: var(--surface-base-neutral-page-default);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.ia-chat-messages::-webkit-scrollbar {
width: 6px;
}
.ia-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.ia-chat-messages::-webkit-scrollbar-thumb {
background: var(--neutral-400);
border-radius: 3px;
}
/* ========== MENSAGEM ========== */
.msg {
display: flex;
gap: 8px;
align-items: flex-end;
max-width: 85%;
}
.msg-ia {
align-self: flex-start;
}
.msg-user {
align-self: flex-end;
flex-direction: row-reverse;
}
.msg-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-base-neutral-container-emphasis);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.msg-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.msg-bubble {
padding: 10px 14px;
border-radius: 12px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
word-wrap: break-word;
white-space: pre-wrap;
}
.msg-ia .msg-bubble {
background: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-default);
border: 1px solid var(--border-base-neutral-default);
border-bottom-left-radius: 4px;
}
.msg-user .msg-bubble {
background: var(--accent-300);
color: var(--text-base-neutral-white);
border-bottom-right-radius: 4px;
}
.msg-bubble ul {
margin: 8px 0 0 18px;
padding: 0;
}
.msg-bubble li {
margin: 4px 0;
}
/* Bubble de erro */
.msg-bubble--error {
background: var(--surface-base-error-subtle, var(--red-100)) !important;
color: var(--text-base-error-default) !important;
border-color: var(--border-base-error-default, var(--red-200)) !important;
}
/* Bubble de sistema */
.msg-bubble--system {
background: var(--surface-base-neutral-container-emphasis) !important;
color: var(--text-base-neutral-secondary) !important;
font-size: 12px;
font-style: italic;
}
/* Cursor de streaming (pisca) */
.msg-cursor {
animation: ia-blink 0.8s step-end infinite;
opacity: 0.7;
margin-left: 1px;
}
@keyframes ia-blink {
0%, 100% { opacity: 0.7; }
50% { opacity: 0; }
}
/* Metadata da mensagem */
.msg-meta {
display: flex;
align-items: center;
gap: 8px;
}
.msg-time {
font-size: 10px;
color: var(--text-base-neutral-subtle);
padding: 0 4px;
}
.msg-user .msg-time {
text-align: right;
}
/* Botao retry */
.msg-retry {
background: none;
border: none;
color: var(--accent-300);
font-size: 11px;
cursor: pointer;
padding: 0;
font-family: var(--font-body);
text-decoration: underline;
}
.msg-retry:hover {
color: var(--accent-400);
}
/* ========== SUGESTOES ========== */
.ia-chat-suggestions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px;
background: var(--surface-base-neutral-container-default);
border-top: 1px solid var(--border-base-neutral-default);
}
.ia-chat-suggestion {
background: var(--surface-base-neutral-container-emphasis);
color: var(--text-base-neutral-default);
border: 1px solid var(--border-base-neutral-default);
border-radius: 16px;
padding: 6px 12px;
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
transition: all var(--transition-fast);
}
.ia-chat-suggestion:hover {
background: var(--accent-100);
border-color: var(--accent-300);
color: var(--accent-400);
}
/* ========== INPUT ========== */
.ia-chat-input {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px;
background: var(--surface-base-neutral-container-default);
border-top: 1px solid var(--border-base-neutral-default);
flex-shrink: 0;
}
.ia-chat-textarea,
#iaChatInput {
flex: 1;
border: 1px solid var(--border-base-neutral-default);
border-radius: 20px;
padding: 10px 16px;
font-size: 13px;
font-family: var(--font-body);
resize: none;
outline: none;
transition: border var(--transition-fast);
max-height: 100px;
line-height: 1.4;
background: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-default);
}
.ia-chat-textarea:focus,
#iaChatInput:focus {
border-color: var(--accent-300);
}
.ia-chat-textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ia-chat-send {
width: 40px;
height: 40px;
border: none;
background: var(--accent-300);
color: var(--text-base-neutral-white);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.ia-chat-send:hover:not(:disabled) {
background: var(--accent-400);
transform: scale(1.05);
}
.ia-chat-send:active:not(:disabled) {
transform: scale(0.95);
}
.ia-chat-send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ========== SCROLL TO BOTTOM ========== */
.ia-chat-scroll-btn {
position: sticky;
bottom: 8px;
align-self: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-base-neutral-container-default);
border: 1px solid var(--border-base-neutral-default);
color: var(--text-base-neutral-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transition: all var(--transition-fast);
z-index: 1;
}
.ia-chat-scroll-btn:hover {
background: var(--accent-100);
border-color: var(--accent-300);
color: var(--accent-300);
}
/* ========== TYPING INDICATOR ========== */
.typing-dots {
display: flex;
gap: 4px;
padding: 8px 0;
}
.typing-dots span {
width: 8px;
height: 8px;
background: var(--text-base-neutral-subtle);
border-radius: 50%;
animation: ia-typingAnimation 1.4s infinite;
}
.typing-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes ia-typingAnimation {
0%, 60%, 100% {
opacity: 0.3;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-4px);
}
}
/* ========== RESPONSIVO ========== */
@media (max-width: 768px) {
.ia-chat-dropdown {
width: 100vw;
height: 100vh;
top: 0;
right: 0;
left: 0;
border-radius: 0;
}
.ia-label {
display: none;
}
.ia-chat-btn {
padding: 0.5rem;
}
}
/* ========== DARK MODE ========== */
.dark .ia-chat-header {
background: var(--accent-400);
}
.dark .ia-chat-scroll-btn {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* === extensions/documento-badge.css === */
/**
* ============================================================
* DOCUMENTO BADGE - CPF/CNPJ Tag Component
* ============================================================
* Componente de badge para exibir CPF e CNPJ em listagens
* com ícone, formatação e estilo consistente com o Design System
*/
/* Container principal do badge */
.documento-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Roboto Mono', monospace;
transition: all 0.2s ease;
}
/* Ícone do badge */
.documento-badge__icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
/* Texto/número do documento */
.documento-badge__text {
letter-spacing: 0.3px;
}
/* ============================================================
VARIANTES - CPF
============================================================ */
.documento-badge--cpf {
background-color: #E3F2FD; /* Blue 50 */
color: #1565C0; /* Blue 800 */
border: 1px solid #90CAF9; /* Blue 200 */
}
.documento-badge--cpf .documento-badge__icon {
color: #1976D2; /* Blue 700 */
}
/* ============================================================
VARIANTES - CNPJ
============================================================ */
.documento-badge--cnpj {
background-color: #F3E5F5; /* Purple 50 */
color: #6A1B9A; /* Purple 800 */
border: 1px solid #CE93D8; /* Purple 200 */
}
.documento-badge--cnpj .documento-badge__icon {
color: #7B1FA2; /* Purple 700 */
}
/* ============================================================
VARIANTE - Genérico (quando não se sabe o tipo)
============================================================ */
.documento-badge--generic {
background-color: #F5F5F5; /* Grey 100 */
color: #424242; /* Grey 800 */
border: 1px solid #E0E0E0; /* Grey 300 */
}
.documento-badge--generic .documento-badge__icon {
color: #616161; /* Grey 700 */
}
/* ============================================================
DARK MODE
============================================================ */
/* CPF - Dark Mode */
html.dark .documento-badge--cpf,
html.dark-mode .documento-badge--cpf,
html[data-theme="dark"] .documento-badge--cpf {
background-color: rgba(33, 150, 243, 0.15); /* Blue 500 com opacity */
color: #90CAF9; /* Blue 200 */
border-color: rgba(33, 150, 243, 0.3);
}
html.dark .documento-badge--cpf .documento-badge__icon,
html.dark-mode .documento-badge--cpf .documento-badge__icon,
html[data-theme="dark"] .documento-badge--cpf .documento-badge__icon {
color: #64B5F6; /* Blue 300 */
}
/* CNPJ - Dark Mode */
html.dark .documento-badge--cnpj,
html.dark-mode .documento-badge--cnpj,
html[data-theme="dark"] .documento-badge--cnpj {
background-color: rgba(156, 39, 176, 0.15); /* Purple 500 com opacity */
color: #CE93D8; /* Purple 200 */
border-color: rgba(156, 39, 176, 0.3);
}
html.dark .documento-badge--cnpj .documento-badge__icon,
html.dark-mode .documento-badge--cnpj .documento-badge__icon,
html[data-theme="dark"] .documento-badge--cnpj .documento-badge__icon {
color: #BA68C8; /* Purple 300 */
}
/* Genérico - Dark Mode */
html.dark .documento-badge--generic,
html.dark-mode .documento-badge--generic,
html[data-theme="dark"] .documento-badge--generic {
background-color: rgba(158, 158, 158, 0.15); /* Grey 500 com opacity */
color: #E0E0E0; /* Grey 300 */
border-color: rgba(158, 158, 158, 0.3);
}
html.dark .documento-badge--generic .documento-badge__icon,
html.dark-mode .documento-badge--generic .documento-badge__icon,
html[data-theme="dark"] .documento-badge--generic .documento-badge__icon {
color: #BDBDBD; /* Grey 400 */
}
/* ============================================================
HOVER STATES
============================================================ */
.documento-badge:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* CPF Hover */
.documento-badge--cpf:hover {
background-color: #BBDEFB; /* Blue 100 */
border-color: #64B5F6; /* Blue 300 */
}
/* CNPJ Hover */
.documento-badge--cnpj:hover {
background-color: #E1BEE7; /* Purple 100 */
border-color: #BA68C8; /* Purple 300 */
}
/* Genérico Hover */
.documento-badge--generic:hover {
background-color: #EEEEEE; /* Grey 200 */
border-color: #BDBDBD; /* Grey 400 */
}
/* Dark Mode Hover States */
html.dark .documento-badge:hover,
html.dark-mode .documento-badge:hover,
html[data-theme="dark"] .documento-badge:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* ============================================================
TAMANHOS
============================================================ */
/* Small */
.documento-badge--sm {
padding: 2px 8px;
font-size: 12px;
gap: 4px;
}
.documento-badge--sm .documento-badge__icon {
font-size: 14px;
}
/* Large */
.documento-badge--lg {
padding: 6px 16px;
font-size: 14px;
gap: 8px;
}
.documento-badge--lg .documento-badge__icon {
font-size: 18px;
}
/* ============================================================
RESPONSIVIDADE
============================================================ */
@media (max-width: 640px) {
.documento-badge {
font-size: 12px;
padding: 3px 10px;
}
.documento-badge__icon {
font-size: 14px;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* Foco para navegação por teclado */
.documento-badge:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* Modo de alto contraste */
@media (prefers-contrast: high) {
.documento-badge {
border-width: 2px;
}
}
/* Animações reduzidas */
@media (prefers-reduced-motion: reduce) {
.documento-badge {
transition: none;
}
.documento-badge:hover {
transform: none;
}
}
/* === extensions/dropdown-gis.css === */
/**
* Dropdown GIS - Design System
*
* Estilos especificos para o drawer de camadas do mapa OpenLayers.
* REUTILIZA o componente Drawer existente (drawer.css + drawer.js).
* Este arquivo contem APENAS os estilos especificos para:
* - Categorias de camadas
* - Itens de camada
* - Checkbox customizado para camadas
*
* Estrutura HTML (dentro do drawer__body):
*
*
* Uso:
* Drawer.create({
* id: 'gis-layers-drawer',
* title: 'Camadas',
* subtitle: 'Selecione as camadas para visualizacao',
* size: 'sm',
* content: '...
',
* footer: ''
* });
*
* @version 2.0.0
* @date 2026-01-02
* @depends drawer.css, drawer.js
*/
/* ==========================================================================
GIS LAYER CATEGORY
========================================================================== */
.gis-layer-category {
margin-bottom: var(--spacing-xl, 24px);
}
.gis-layer-category:last-child {
margin-bottom: 0;
}
.gis-layer-category__title {
margin: 0 0 var(--spacing-md, 16px) 0;
font-family: var(--font-body, 'Inter', sans-serif);
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p5, 12px);
line-height: var(--line-height-p5, 22px);
color: var(--color-text-muted, #7A839F);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gis-layer-category__items {
display: flex;
flex-direction: column;
gap: var(--spacing-lg, 20px);
}
/* ==========================================================================
GIS LAYER ITEM
========================================================================== */
.gis-layer-item {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0 var(--spacing-lg, 20px) 0;
gap: var(--spacing-lg, 20px);
border-bottom: 1px solid var(--color-border, #CED3E2);
}
.gis-layer-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.gis-layer-item__content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
flex: 1;
min-width: 0;
}
.gis-layer-item__title {
margin: 0;
font-family: var(--font-body, 'Inter', sans-serif);
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p3, 14px);
line-height: var(--line-height-p3, 24px);
color: var(--color-text-primary, #12151F);
}
.gis-layer-item__description {
margin: 0;
font-family: var(--font-body, 'Inter', sans-serif);
font-weight: var(--font-weight-regular, 400);
font-size: var(--font-size-p4, 14px);
line-height: var(--line-height-p4, 24px);
color: var(--color-text-secondary, #394360);
}
/* ==========================================================================
GIS LAYER CHECKBOX (customizado)
========================================================================== */
.gis-layer-item__checkbox {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.gis-layer-item__checkbox input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 1;
margin: 0;
}
.gis-layer-item__checkbox-visual {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--color-bg-secondary, #F6F6F9);
border: 2px solid var(--color-text-muted, #7A839F);
border-radius: 4px;
transition: all var(--transition-fast, 150ms);
}
/* Estado checked */
.gis-layer-item__checkbox input:checked + .gis-layer-item__checkbox-visual {
background: var(--color-primary, #970707);
border-color: var(--color-primary, #970707);
}
.gis-layer-item__checkbox input:checked + .gis-layer-item__checkbox-visual::after {
content: '';
width: 10px;
height: 10px;
background: white;
border-radius: 2px;
}
/* Estado hover */
.gis-layer-item__checkbox:hover .gis-layer-item__checkbox-visual {
border-color: var(--color-primary, #970707);
}
/* Estado focus */
.gis-layer-item__checkbox input:focus + .gis-layer-item__checkbox-visual {
box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(151, 7, 7, 0.15));
}
/* Estado disabled */
.gis-layer-item__checkbox input:disabled + .gis-layer-item__checkbox-visual {
background: var(--color-bg-tertiary, #ECEDF2);
border-color: var(--color-border, #CED3E2);
cursor: not-allowed;
}
/* ==========================================================================
DARK MODE
========================================================================== */
.dark .gis-layer-category__title,
[data-theme="dark"] .gis-layer-category__title {
color: var(--color-text-muted, #7A839F);
}
.dark .gis-layer-item,
[data-theme="dark"] .gis-layer-item {
border-bottom-color: var(--color-border, #2A2F41);
}
.dark .gis-layer-item__title,
[data-theme="dark"] .gis-layer-item__title {
color: var(--color-text-primary, #E0E2EB);
}
.dark .gis-layer-item__description,
[data-theme="dark"] .gis-layer-item__description {
color: var(--color-text-secondary, #A2A8B9);
}
.dark .gis-layer-item__checkbox-visual,
[data-theme="dark"] .gis-layer-item__checkbox-visual {
background: var(--color-bg-tertiary, #1D2333);
border-color: var(--color-text-muted, #7A839F);
}
.dark .gis-layer-item__checkbox input:checked + .gis-layer-item__checkbox-visual,
[data-theme="dark"] .gis-layer-item__checkbox input:checked + .gis-layer-item__checkbox-visual {
background: var(--color-primary, #970707);
border-color: var(--color-primary, #970707);
}
.dark .gis-layer-item__checkbox input:disabled + .gis-layer-item__checkbox-visual,
[data-theme="dark"] .gis-layer-item__checkbox input:disabled + .gis-layer-item__checkbox-visual {
background: var(--color-bg-secondary, #141926);
border-color: var(--color-border, #2A2F41);
}
/* ==========================================================================
LAYER COUNT BADGE (opcional)
========================================================================== */
.gis-layer-item__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 20px;
padding: 0 6px;
background: var(--color-bg-tertiary, #ECEDF2);
border-radius: 10px;
font-family: var(--font-body, 'Inter', sans-serif);
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-p5, 12px);
color: var(--color-text-muted, #7A839F);
margin-left: var(--spacing-sm, 8px);
}
.dark .gis-layer-item__count,
[data-theme="dark"] .gis-layer-item__count {
background: var(--color-bg-secondary, #141926);
color: var(--color-text-muted, #7A839F);
}
/* === extensions/dropdown-operacoes.css === */
/**
* Dropdown de Operações - Design System Figma
*
* Estilos para o dropdown de operações na listagem, baseado nas
* especificações do Figma (dropdown_menu_light.css e dropdown_menu_dark.css)
*
* @package GALES Design System
* @since 2025-12-11
*/
/* ==========================================================================
DROPDOWN CONTAINER
========================================================================== */
.operacao-items {
box-sizing: border-box !important;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 5px !important;
position: absolute;
/* CORREÇÃO v2: width max-content força expansão ao tamanho do maior item */
width: max-content !important;
min-width: 200px !important;
max-width: 400px !important;
right: 0;
top: 100%;
margin-top: 4px;
/* Light mode - default (Figma specs) */
background: #F6F6F9 !important;
border: 1px solid #CED3E2 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.09) !important;
border-radius: 6px !important;
z-index: 9999 !important;
}
/* Esconder por padrão */
.operacao-items.hidden {
display: none !important;
}
/* Mostrar quando ativo */
.operacao-items.show {
display: flex !important;
}
/* ==========================================================================
DROPDOWN CONTAINER - INNER
========================================================================== */
.operacao-items-container {
width: 100%;
}
.operacao-items-container ul,
.operacao-items .mdl-list {
list-style: none;
margin: 0;
padding: 0;
width: 100% !important;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* ==========================================================================
MENU ITEM - BASE STYLES
========================================================================== */
.operacao-items .mdl-menu__item,
.operacao-items .mdl-list__item {
display: flex !important;
flex-direction: row;
align-items: center;
padding: 8px 12px !important;
gap: 12px;
/* CORREÇÃO: width 100% para adaptar ao container, white-space nowrap para não quebrar texto */
width: 100% !important;
min-height: 40px !important;
height: auto !important;
white-space: nowrap !important;
/* Light mode (Figma specs) */
background: #F6F6F9 !important;
cursor: pointer;
transition: background-color 0.15s ease, border-radius 0.15s ease;
/* Reset MDL/Flowbite styles */
position: relative !important;
overflow: visible !important;
opacity: 1 !important;
transform: none !important;
border: none !important;
margin: 0 !important;
min-width: unset !important;
box-shadow: none !important;
}
/* Hover state */
.operacao-items .mdl-menu__item:hover,
.operacao-items .mdl-list__item:hover {
background: #ECEDF2 !important;
border-radius: 6px !important;
}
/* Icon hover state - Figma specs */
.operacao-items .mdl-menu__item:hover .icone-ipe,
.operacao-items .mdl-menu__item:hover .mdi,
.operacao-items .mdl-menu__item:hover .material-icons,
.operacao-items .mdl-list__item:hover .icone-ipe,
.operacao-items .mdl-list__item:hover .mdi,
.operacao-items .mdl-list__item:hover .material-icons {
color: #12151F !important;
}
/* ==========================================================================
MENU ITEM - CONTENT
========================================================================== */
.operacao-items .mdl-list__item-primary-content {
display: flex !important;
flex-direction: row;
align-items: center !important;
gap: 12px !important;
flex: 1;
}
/* Icon container */
.operacao-items .icone-ipe,
.operacao-items .mdi,
.operacao-items .material-icons {
width: 18px;
height: 18px;
font-size: 18px !important;
line-height: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* Light mode - icon color */
color: #394360 !important;
}
/* Text label */
.operacao-items .mdl-list__item-primary-content p {
margin: 0 !important;
padding: 0;
width: auto;
flex: 1;
/* Tipografia/P3 - Figma */
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
/* Light mode - text color */
color: #394360 !important;
}
/* ==========================================================================
DIVIDER (se houver separadores)
========================================================================== */
.operacao-items hr,
.operacao-items .divider {
/* CORREÇÃO: width 100% para adaptar ao container */
width: calc(100% - 10px);
height: 0px;
border: none;
border-top: 1px solid #CED3E2;
margin: 4px 5px;
}
/* ==========================================================================
DARK MODE
========================================================================== */
[data-theme="dark"] .operacao-items,
html.dark .operacao-items,
html.dark-mode .operacao-items {
background: #141926 !important;
border: 1px solid #2A2F41 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2) !important;
}
/* Menu items - dark mode */
[data-theme="dark"] .operacao-items .mdl-menu__item,
[data-theme="dark"] .operacao-items .mdl-list__item,
html.dark .operacao-items .mdl-menu__item,
html.dark .operacao-items .mdl-list__item,
html.dark-mode .operacao-items .mdl-menu__item,
html.dark-mode .operacao-items .mdl-list__item {
background: #141926 !important;
}
/* Hover - dark mode */
[data-theme="dark"] .operacao-items .mdl-menu__item:hover,
[data-theme="dark"] .operacao-items .mdl-list__item:hover,
html.dark .operacao-items .mdl-menu__item:hover,
html.dark .operacao-items .mdl-list__item:hover,
html.dark-mode .operacao-items .mdl-menu__item:hover,
html.dark-mode .operacao-items .mdl-list__item:hover {
background: #212533 !important;
}
/* Icons - dark mode */
[data-theme="dark"] .operacao-items .icone-ipe,
[data-theme="dark"] .operacao-items .mdi,
[data-theme="dark"] .operacao-items .material-icons,
html.dark .operacao-items .icone-ipe,
html.dark .operacao-items .mdi,
html.dark .operacao-items .material-icons,
html.dark-mode .operacao-items .icone-ipe,
html.dark-mode .operacao-items .mdi,
html.dark-mode .operacao-items .material-icons {
color: #A2A8B9 !important;
}
/* Text - dark mode */
[data-theme="dark"] .operacao-items .mdl-list__item-primary-content p,
html.dark .operacao-items .mdl-list__item-primary-content p,
html.dark-mode .operacao-items .mdl-list__item-primary-content p {
color: #BFC3CF !important;
}
/* Divider - dark mode */
[data-theme="dark"] .operacao-items hr,
[data-theme="dark"] .operacao-items .divider,
html.dark .operacao-items hr,
html.dark .operacao-items .divider,
html.dark-mode .operacao-items hr,
html.dark-mode .operacao-items .divider {
border-top-color: #2A2F41;
}
/* ==========================================================================
BOTÃO DE OPERAÇÕES (três pontos)
========================================================================== */
.div-operacao {
position: relative;
display: inline-flex;
align-items: center;
}
.operacao-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 1px solid #CED3E2;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.operacao-button:hover {
background: #ECEDF2;
}
.operacao-button .material-icons {
font-size: 20px;
color: #12151F;
}
/* Dark mode - botão */
[data-theme="dark"] .operacao-button,
html.dark .operacao-button,
html.dark-mode .operacao-button {
border-color: rgba(224, 226, 235, 0.16);
}
[data-theme="dark"] .operacao-button:hover,
html.dark .operacao-button:hover,
html.dark-mode .operacao-button:hover {
background: rgba(224, 226, 235, 0.08);
}
[data-theme="dark"] .operacao-button .material-icons,
html.dark .operacao-button .material-icons,
html.dark-mode .operacao-button .material-icons {
color: #E0E2EB;
}
/* ==========================================================================
BOTÃO DETALHAR (visível fora do dropdown)
========================================================================== */
.listagem-operacao {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.listagem-operacao .icone-listagem {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 1px solid #CED3E2;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.listagem-operacao .icone-listagem:hover {
background: #ECEDF2;
}
.listagem-operacao .icone-listagem .icone-ipe {
font-size: 18px;
color: #394360;
}
/* Dark mode - botão detalhar */
[data-theme="dark"] .listagem-operacao .icone-listagem,
html.dark .listagem-operacao .icone-listagem,
html.dark-mode .listagem-operacao .icone-listagem {
border-color: rgba(224, 226, 235, 0.16);
}
[data-theme="dark"] .listagem-operacao .icone-listagem:hover,
html.dark .listagem-operacao .icone-listagem:hover,
html.dark-mode .listagem-operacao .icone-listagem:hover {
background: rgba(224, 226, 235, 0.08);
}
[data-theme="dark"] .listagem-operacao .icone-listagem .icone-ipe,
html.dark .listagem-operacao .icone-listagem .icone-ipe,
html.dark-mode .listagem-operacao .icone-listagem .icone-ipe {
color: #A2A8B9;
}
/* === extensions/fk-dark-modal.css === */
/* ============================================================================
MODAIS FLOWBITE - TEMA DARK
Aplica dark theme aos modais Flowbite usados pelos FKs
========================================================================== */
/* Modal container background */
html.dark div[id^="flowbite-dialog-"] .bg-white,
html.dark-mode div[id^="flowbite-dialog-"] .bg-white,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .bg-white {
background-color: var(--color-bg-primary, #10141D) !important;
}
/* Modal header */
html.dark div[id^="flowbite-dialog-"] .border-b,
html.dark-mode div[id^="flowbite-dialog-"] .border-b,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .border-b {
border-color: var(--color-border, #212533) !important;
}
/* Modal title */
html.dark div[id^="flowbite-dialog-"] h3,
html.dark-mode div[id^="flowbite-dialog-"] h3,
html[data-theme="dark"] div[id^="flowbite-dialog-"] h3 {
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
/* Close button */
html.dark div[id^="flowbite-dialog-"] button[data-modal-hide],
html.dark-mode div[id^="flowbite-dialog-"] button[data-modal-hide],
html[data-theme="dark"] div[id^="flowbite-dialog-"] button[data-modal-hide] {
color: var(--color-text-secondary, #858CA3) !important;
}
html.dark div[id^="flowbite-dialog-"] button[data-modal-hide]:hover,
html.dark-mode div[id^="flowbite-dialog-"] button[data-modal-hide]:hover,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button[data-modal-hide]:hover {
background-color: var(--color-bg-secondary, var(--color-neutral-800)) !important;
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
/* Modal content area */
html.dark div[id^="flowbite-dialog-"] .space-y-4,
html.dark-mode div[id^="flowbite-dialog-"] .space-y-4,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .space-y-4 {
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
/* Inputs, selects, textareas */
html.dark div[id^="flowbite-dialog-"] input[type="text"],
html.dark div[id^="flowbite-dialog-"] input[type="email"],
html.dark div[id^="flowbite-dialog-"] input[type="tel"],
html.dark div[id^="flowbite-dialog-"] input[type="number"],
html.dark div[id^="flowbite-dialog-"] input[type="date"],
html.dark div[id^="flowbite-dialog-"] select,
html.dark div[id^="flowbite-dialog-"] textarea,
html.dark-mode div[id^="flowbite-dialog-"] input[type="text"],
html.dark-mode div[id^="flowbite-dialog-"] input[type="email"],
html.dark-mode div[id^="flowbite-dialog-"] input[type="tel"],
html.dark-mode div[id^="flowbite-dialog-"] input[type="number"],
html.dark-mode div[id^="flowbite-dialog-"] input[type="date"],
html.dark-mode div[id^="flowbite-dialog-"] select,
html.dark-mode div[id^="flowbite-dialog-"] textarea,
html[data-theme="dark"] div[id^="flowbite-dialog-"] input[type="text"],
html[data-theme="dark"] div[id^="flowbite-dialog-"] input[type="email"],
html[data-theme="dark"] div[id^="flowbite-dialog-"] input[type="tel"],
html[data-theme="dark"] div[id^="flowbite-dialog-"] input[type="number"],
html[data-theme="dark"] div[id^="flowbite-dialog-"] input[type="date"],
html[data-theme="dark"] div[id^="flowbite-dialog-"] select,
html[data-theme="dark"] div[id^="flowbite-dialog-"] textarea {
background-color: var(--color-bg-secondary, var(--color-neutral-800)) !important;
border-color: var(--color-border, #212533) !important;
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
html.dark div[id^="flowbite-dialog-"] input:focus,
html.dark div[id^="flowbite-dialog-"] select:focus,
html.dark div[id^="flowbite-dialog-"] textarea:focus,
html.dark-mode div[id^="flowbite-dialog-"] input:focus,
html.dark-mode div[id^="flowbite-dialog-"] select:focus,
html.dark-mode div[id^="flowbite-dialog-"] textarea:focus,
html[data-theme="dark"] div[id^="flowbite-dialog-"] input:focus,
html[data-theme="dark"] div[id^="flowbite-dialog-"] select:focus,
html[data-theme="dark"] div[id^="flowbite-dialog-"] textarea:focus {
border-color: var(--color-primary, var(--color-accent-300)) !important;
}
/* Labels */
html.dark div[id^="flowbite-dialog-"] label,
html.dark-mode div[id^="flowbite-dialog-"] label,
html[data-theme="dark"] div[id^="flowbite-dialog-"] label {
color: var(--color-text-secondary, #858CA3) !important;
}
/* Modal footer */
html.dark div[id^="flowbite-dialog-"] .border-t,
html.dark-mode div[id^="flowbite-dialog-"] .border-t,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .border-t {
border-color: var(--color-border, #212533) !important;
}
/* Botão primário */
html.dark div[id^="flowbite-dialog-"] button.bg-blue-700,
html.dark div[id^="flowbite-dialog-"] button.bg-blue-600,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-blue-700,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-blue-600,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-blue-700,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-blue-600 {
background-color: var(--color-primary, var(--color-accent-300)) !important;
}
html.dark div[id^="flowbite-dialog-"] button.bg-blue-700:hover,
html.dark div[id^="flowbite-dialog-"] button.bg-blue-600:hover,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-blue-700:hover,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-blue-600:hover,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-blue-700:hover,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-blue-600:hover {
background-color: var(--color-primary-hover, #013251) !important;
}
/* Botão secundário */
html.dark div[id^="flowbite-dialog-"] button.bg-white,
html.dark div[id^="flowbite-dialog-"] button.bg-gray-800,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-white,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-gray-800,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-white,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-gray-800 {
background-color: var(--color-bg-secondary, var(--color-neutral-800)) !important;
border-color: var(--color-border, #212533) !important;
color: var(--color-text-secondary, #858CA3) !important;
}
html.dark div[id^="flowbite-dialog-"] button.bg-white:hover,
html.dark div[id^="flowbite-dialog-"] button.bg-gray-800:hover,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-white:hover,
html.dark-mode div[id^="flowbite-dialog-"] button.bg-gray-800:hover,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-white:hover,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button.bg-gray-800:hover {
background-color: var(--color-bg-tertiary, var(--color-neutral-700)) !important;
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
/* Paragrafos e textos gerais */
html.dark div[id^="flowbite-dialog-"] p,
html.dark div[id^="flowbite-dialog-"] span,
html.dark div[id^="flowbite-dialog-"] div,
html.dark-mode div[id^="flowbite-dialog-"] p,
html.dark-mode div[id^="flowbite-dialog-"] span,
html.dark-mode div[id^="flowbite-dialog-"] div,
html[data-theme="dark"] div[id^="flowbite-dialog-"] p,
html[data-theme="dark"] div[id^="flowbite-dialog-"] span,
html[data-theme="dark"] div[id^="flowbite-dialog-"] div {
color: inherit;
}
/* === extensions/fk-modal.css === */
/**
* ============================================================================
* FK MODAL - DESIGN SYSTEM SIDASP
* ============================================================================
*
* Estilos para o modal FK usando variáveis CSS do design system
* Baseado nas especificações do Figma
*
* @version 1.0.0
* @date 2025-01-XX
*/
/* ============================================================================
MODAL CONTAINER (Flowbite Dialog)
============================================================================ */
/* Backdrop */
div[id^="flowbite-dialog-"] {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Modal Body Container */
div[id^="flowbite-dialog-"] .bg-white,
div[id^="flowbite-dialog-"] .ds-fk-modal-body {
background-color: #FFFFFF !important;
border-radius: var(--radius-lg, 12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* ============================================================================
MODAL HEADER
============================================================================ */
/* Header Container */
div[id^="flowbite-dialog-"] .border-b,
div[id^="flowbite-dialog-"] .ds-fk-modal-header {
border-bottom: 1px solid var(--color-border-light, var(--neutral-300)) !important;
padding: var(--spacing-lg, 16px) var(--spacing-xl, 24px);
}
/* Modal Title */
div[id^="flowbite-dialog-"] h3,
div[id^="flowbite-dialog-"] .ds-fk-modal-title {
color: var(--color-text-primary, var(--neutral-800)) !important;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
margin: 0;
}
/* ============================================================================
CLOSE BUTTON (X)
============================================================================ */
/* Close Button Base */
div[id^="flowbite-dialog-"] button[data-modal-hide],
div[id^="flowbite-dialog-"] .ds-fk-modal-close {
color: var(--color-text-muted, var(--neutral-500)) !important;
background-color: transparent !important;
border: none !important;
border-radius: var(--radius-md, 8px);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
/* Close Button Hover */
div[id^="flowbite-dialog-"] button[data-modal-hide]:hover,
div[id^="flowbite-dialog-"] .ds-fk-modal-close:hover {
background-color: var(--color-bg-secondary, var(--neutral-100)) !important;
color: var(--color-text-primary, var(--neutral-800)) !important;
}
/* ============================================================================
MODAL CONTENT AREA
============================================================================ */
/* Content Area */
div[id^="flowbite-dialog-"] .space-y-4,
div[id^="flowbite-dialog-"] .p-4,
div[id^="flowbite-dialog-"] .p-5,
div[id^="flowbite-dialog-"] .ds-fk-modal-content {
color: var(--color-text-primary, var(--neutral-800)) !important;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* ============================================================================
MODAL FOOTER
============================================================================ */
/* Footer Container */
div[id^="flowbite-dialog-"] .border-t,
div[id^="flowbite-dialog-"] .ds-fk-modal-footer {
border-top: 1px solid var(--color-border-light, var(--neutral-300)) !important;
padding: var(--spacing-lg, 16px) var(--spacing-xl, 24px);
background-color: transparent;
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
/* ============================================================================
SCROLLABLE CONTENT HELPERS
============================================================================ */
div[id^="flowbite-dialog-"] .ds-fk-modal-body {
display: flex;
flex-direction: column;
max-height: calc(100vh - 80px);
overflow: hidden;
}
div[id^="flowbite-dialog-"] .fk-produto-modal__scroll {
flex: 1 1 auto;
max-height: calc(100vh - 220px);
overflow-y: auto;
padding-right: 16px;
padding-left: 2px;
padding-bottom: 32px;
}
@media (max-width: 768px) {
div[id^="flowbite-dialog-"] .fk-produto-modal__scroll {
max-height: calc(100vh - 180px);
padding-right: 0;
}
}
div[id^="flowbite-dialog-"] > div.relative.p-4.w-full.max-w-5xl.max-h-full {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
max-height: none !important;
padding: 2rem 1rem;
}
/* ============================================================================
DARK MODE
============================================================================ */
html.dark div[id^="flowbite-dialog-"] .bg-white,
html.dark-mode div[id^="flowbite-dialog-"] .bg-white,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .bg-white {
background-color: var(--color-bg-primary, var(--neutral-800)) !important;
}
html.dark div[id^="flowbite-dialog-"] .border-b,
html.dark-mode div[id^="flowbite-dialog-"] .border-b,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .border-b {
border-bottom-color: var(--color-border-light, var(--neutral-650)) !important;
}
html.dark div[id^="flowbite-dialog-"] h3,
html.dark-mode div[id^="flowbite-dialog-"] h3,
html[data-theme="dark"] div[id^="flowbite-dialog-"] h3 {
color: var(--color-text-primary, var(--neutral-300)) !important;
}
html.dark div[id^="flowbite-dialog-"] button[data-modal-hide],
html.dark-mode div[id^="flowbite-dialog-"] button[data-modal-hide],
html[data-theme="dark"] div[id^="flowbite-dialog-"] button[data-modal-hide] {
color: var(--color-text-secondary, var(--neutral-450)) !important;
}
html.dark div[id^="flowbite-dialog-"] button[data-modal-hide]:hover,
html.dark-mode div[id^="flowbite-dialog-"] button[data-modal-hide]:hover,
html[data-theme="dark"] div[id^="flowbite-dialog-"] button[data-modal-hide]:hover {
background-color: var(--color-bg-secondary, var(--neutral-750)) !important;
color: var(--color-text-primary, var(--neutral-300)) !important;
}
html.dark div[id^="flowbite-dialog-"] .space-y-4,
html.dark-mode div[id^="flowbite-dialog-"] .space-y-4,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .space-y-4,
html.dark div[id^="flowbite-dialog-"] .p-4,
html.dark-mode div[id^="flowbite-dialog-"] .p-4,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .p-4,
html.dark div[id^="flowbite-dialog-"] .p-5,
html.dark-mode div[id^="flowbite-dialog-"] .p-5,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .p-5 {
color: var(--color-text-primary, var(--neutral-300)) !important;
}
html.dark div[id^="flowbite-dialog-"] .border-t,
html.dark-mode div[id^="flowbite-dialog-"] .border-t,
html[data-theme="dark"] div[id^="flowbite-dialog-"] .border-t {
border-top-color: var(--color-border-light, var(--neutral-650)) !important;
}
/* ============================================================================
MODAIS DE PESQUISA (Listas com Tabela)
============================================================================ */
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"],
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- {
background-color: var(--color-text-light, #FFFFFF);
border-radius: 16px;
overflow-y: auto;
overflow-x: hidden;
max-height: calc(85vh - 140px);
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] table,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] colgroup col,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- colgroup col {
width: auto !important;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] colgroup col:last-child,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- colgroup col:last-child {
width: 12% !important;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] thead,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- thead {
background-color: var(--neutral-100, #F3F4F6);
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] thead th,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- thead th {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 0.95rem 1.5rem;
border-bottom: 1px solid var(--neutral-200, #E5E7EB);
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] thead th:first-child,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- thead th:first-child {
border-top-left-radius: 12px;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] thead th:last-child,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- thead th:last-child {
border-top-right-radius: 12px;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] tbody tr,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- tbody tr {
border-bottom: 1px solid var(--neutral-150, #EDF0F5);
transition: background-color 0.2s ease;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] tbody tr:last-child,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- tbody tr:last-child {
border-bottom: none;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] tbody tr:hover,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- tbody tr:hover {
background-color: var(--neutral-050, #F9FAFB);
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] td,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- td {
padding: 0.95rem 1.5rem;
font-size: 0.9375rem;
color: var(--color-text-primary, var(--neutral-800));
vertical-align: middle;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] td .text-blue-150,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- td .text-blue-150 {
font-size: 0.875rem;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] td .truncate,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- td .truncate {
max-width: 260px;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] td:first-child,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- td:first-child {
padding-left: 1.8rem;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] td:last-child,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- td:last-child {
padding-right: 1.8rem;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] a[class^="selecionar_"],
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] a[class*=" selecionar_"],
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- a[class^="selecionar_"],
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- a[class*=" selecionar_"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
height: 36px;
padding: 0 1.5rem;
border-radius: 999px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
background-color: var(--neutral-900, #111827);
color: #FFFFFF !important;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] a[class^="selecionar_"]:hover,
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] a[class*=" selecionar_"]:hover,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- a[class^="selecionar_"]:hover,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- a[class*=" selecionar_"]:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
}
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] a[class^="selecionar_"]:focus-visible,
div[id^="flowbite-dialog-"] div[id^="boxPesquisar-"] a[class*=" selecionar_"]:focus-visible,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- a[class^="selecionar_"]:focus-visible,
.ui-dialog:has(#boxPesquisar-) #boxPesquisar- a[class*=" selecionar_"]:focus-visible {
outline: 2px solid var(--primary-300, #9F9DFD);
outline-offset: 3px;
}
div[id^="flowbite-dialog-"]:has(div[id^="boxPesquisar-"]) .ds-fk-modal-footer {
justify-content: flex-end;
gap: 0.75rem;
}
.ui-dialog:has(#boxPesquisar-) .ui-dialog-buttonpane {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--neutral-200, #E5E7EB);
background-color: transparent;
}
/* ============================================================================
PRODUTO MODAL LAYOUT
============================================================================ */
.fk-produto-layout {
gap: 1.5rem;
}
@media (max-width: 1200px) {
.fk-produto-layout {
display: block;
}
.fk-produto-layout .mdl-cell {
width: 100% !important;
max-width: 100% !important;
}
}
/* === extensions/fk-v2-panel.css === */
/**
* ============================================================================
* FK V2 PANEL - PAINEL DESLIZANTE
* ============================================================================
*
* Painel lateral que desliza da direita sobrepondo o sidebar
* Contém o formulário de adicionar/editar FK
*
* @version 2.0.0
* @author SIDASP Design System
* @see /public/doc/architect/fk/evolucao_componente_fk/PROJETO_FK_V2_SIDEBAR.md
*/
/* ============================================================================
BACKDROP
============================================================================ */
.fk-v2-panel-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(18, 21, 31, 0.5) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fk-v2-panel-backdrop.is-active {
opacity: 1;
visibility: visible;
}
/* ============================================================================
PAINEL PRINCIPAL
============================================================================ */
.fk-v2-panel {
position: fixed;
top: 0;
right: 0;
width: var(--fk-panel-width, 520px);
max-width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
background: #FFFFFF;
box-shadow: -4px 0 24px rgba(18, 21, 31, 0.15);
z-index: 1001;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fk-v2-panel.is-active {
transform: translateX(0);
}
/* Larguras pré-definidas para conveniência */
.fk-v2-panel--sm { --fk-panel-width: 400px; }
.fk-v2-panel--md { --fk-panel-width: 520px; }
.fk-v2-panel--lg { --fk-panel-width: 700px; }
.fk-v2-panel--xl { --fk-panel-width: 900px; }
.fk-v2-panel--full { --fk-panel-width: 100%; }
/* ============================================================================
HEADER DO PAINEL
============================================================================ */
.fk-v2-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-xl, 24px);
border-bottom: 1px solid var(--color-border-light, #ECEDF2);
flex-shrink: 0;
}
.fk-v2-panel__title {
font-family: var(--font-heading, 'Space Grotesk', sans-serif);
font-size: var(--font-size-h2, 20px);
font-weight: 600;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.fk-v2-panel__close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
border-radius: var(--radius-md, 8px);
color: var(--color-text-muted, #7A839F);
cursor: pointer;
transition: all 0.2s ease;
}
.fk-v2-panel__close:hover {
background: var(--color-bg-secondary, #F3F4F6);
color: var(--color-text-primary, #12151F);
}
.fk-v2-panel__close i {
font-size: 24px;
}
/* ============================================================================
CONTEÚDO DO PAINEL
============================================================================ */
.fk-v2-panel__body {
flex: 1;
overflow-y: auto;
padding: var(--spacing-xl, 24px);
}
/* Scrollbar customizado */
.fk-v2-panel__body::-webkit-scrollbar {
width: 6px;
}
.fk-v2-panel__body::-webkit-scrollbar-track {
background: transparent;
}
.fk-v2-panel__body::-webkit-scrollbar-thumb {
background: var(--color-border, #CED3E2);
border-radius: 3px;
}
.fk-v2-panel__body::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted, #7A839F);
}
/* ============================================================================
FOOTER DO PAINEL
============================================================================ */
.fk-v2-panel__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-md, 12px);
padding: var(--spacing-lg, 16px) var(--spacing-xl, 24px);
border-top: 1px solid var(--color-border-light, #ECEDF2);
background: var(--color-bg-secondary, #F9FAFB);
flex-shrink: 0;
}
/* ============================================================================
FORMULÁRIO DENTRO DO PAINEL
============================================================================ */
.fk-v2-panel__form {
display: flex;
flex-direction: column;
gap: var(--spacing-lg, 20px);
}
.fk-v2-panel__form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
.fk-v2-panel__form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg, 20px);
}
.fk-v2-panel__form-row--3 {
grid-template-columns: repeat(3, 1fr);
}
.fk-v2-panel__label {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
}
.fk-v2-panel__label--required::after {
content: ' *';
color: var(--color-danger, #C90A0A);
}
/* ============================================================================
ÁREA DE ERROS
============================================================================ */
.fk-v2-panel__errors {
padding: var(--spacing-md, 12px);
background: rgba(201, 10, 10, 0.08);
border: 1px solid var(--color-danger, #C90A0A);
border-radius: var(--radius-md, 8px);
margin-bottom: var(--spacing-lg, 20px);
}
.fk-v2-panel__errors ul {
margin: 0;
padding-left: var(--spacing-lg, 20px);
}
.fk-v2-panel__errors li {
font-size: var(--font-size-p4, 13px);
color: var(--color-danger, #C90A0A);
margin-bottom: var(--spacing-xs, 4px);
}
.fk-v2-panel__errors li:last-child {
margin-bottom: 0;
}
/* ============================================================================
SELETOR DE TIPO (Cards de seleção)
============================================================================ */
.fk-v2-type-selector {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md, 12px);
}
.fk-v2-type-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--spacing-md, 12px);
min-width: 100px;
background: var(--color-bg-primary, #FFFFFF);
border: 2px solid var(--color-border, #CED3E2);
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all 0.2s ease;
}
.fk-v2-type-card:hover {
border-color: var(--color-primary, #3E68FB);
}
.fk-v2-type-card.is-selected {
border-color: var(--color-primary, #3E68FB);
background: rgba(62, 104, 251, 0.05);
}
.fk-v2-type-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: var(--spacing-sm, 8px);
color: var(--color-text-muted, #7A839F);
}
.fk-v2-type-card.is-selected .fk-v2-type-card__icon {
color: var(--color-primary, #3E68FB);
}
.fk-v2-type-card__icon i {
font-size: 24px;
}
.fk-v2-type-card__label {
font-size: var(--font-size-p5, 12px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
}
/* Input hidden dentro do card */
.fk-v2-type-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* ============================================================================
ÁREA DE UPLOAD
============================================================================ */
.fk-v2-upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-2xl, 32px);
border: 2px dashed var(--color-border, #CED3E2);
border-radius: var(--radius-md, 8px);
background: var(--color-bg-secondary, #F9FAFB);
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}
.fk-v2-upload-area:hover,
.fk-v2-upload-area.is-dragover {
border-color: var(--color-primary, #3E68FB);
background: rgba(62, 104, 251, 0.05);
}
.fk-v2-upload-area__icon {
font-size: 32px;
color: var(--color-text-muted, #7A839F);
margin-bottom: var(--spacing-md, 12px);
}
.fk-v2-upload-area__title {
font-size: var(--font-size-p3, 14px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
margin-bottom: var(--spacing-xs, 4px);
}
.fk-v2-upload-area__hint {
font-size: var(--font-size-p5, 12px);
color: var(--color-text-muted, #7A839F);
margin-bottom: var(--spacing-md, 12px);
}
.fk-v2-upload-area__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-sm, 6px);
font-size: var(--font-size-p4, 13px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
cursor: pointer;
transition: all 0.2s ease;
}
.fk-v2-upload-area__btn:hover {
border-color: var(--color-primary, #3E68FB);
color: var(--color-primary, #3E68FB);
}
/* Lista de arquivos */
.fk-v2-upload-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
margin-top: var(--spacing-md, 12px);
width: 100%;
}
.fk-v2-upload-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md, 12px);
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-sm, 6px);
}
.fk-v2-upload-item__info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.fk-v2-upload-item__name {
font-size: var(--font-size-p3, 14px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fk-v2-upload-item__size {
font-size: var(--font-size-p5, 12px);
color: var(--color-text-muted, #7A839F);
}
.fk-v2-upload-item__remove {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
border-radius: var(--radius-sm, 6px);
color: var(--color-danger, #C90A0A);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
margin-left: var(--spacing-sm, 8px);
}
.fk-v2-upload-item__remove:hover {
background: rgba(201, 10, 10, 0.1);
}
/* ============================================================================
DARK MODE
============================================================================ */
.dark .fk-v2-panel-backdrop,
[data-theme="dark"] .fk-v2-panel-backdrop {
background: rgba(0, 0, 0, 0.7);
}
.dark .fk-v2-panel,
[data-theme="dark"] .fk-v2-panel {
background: var(--color-bg-primary, #10141D);
}
.dark .fk-v2-panel__header,
[data-theme="dark"] .fk-v2-panel__header {
border-bottom-color: var(--color-border, #212533);
}
.dark .fk-v2-panel__title,
[data-theme="dark"] .fk-v2-panel__title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-v2-panel__close:hover,
[data-theme="dark"] .fk-v2-panel__close:hover {
background: var(--color-bg-tertiary, #1E2432);
}
.dark .fk-v2-panel__footer,
[data-theme="dark"] .fk-v2-panel__footer {
background: var(--color-bg-tertiary, #161B26);
border-top-color: var(--color-border, #212533);
}
.dark .fk-v2-panel__label,
[data-theme="dark"] .fk-v2-panel__label {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-v2-type-card,
[data-theme="dark"] .fk-v2-type-card {
background: var(--color-bg-secondary, #161B26);
border-color: var(--color-border, #212533);
}
.dark .fk-v2-type-card__label,
[data-theme="dark"] .fk-v2-type-card__label {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-v2-upload-area,
[data-theme="dark"] .fk-v2-upload-area {
background: var(--color-bg-secondary, #161B26);
border-color: var(--color-border, #212533);
}
.dark .fk-v2-upload-area__title,
[data-theme="dark"] .fk-v2-upload-area__title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-v2-upload-area__btn,
[data-theme="dark"] .fk-v2-upload-area__btn {
background: var(--color-bg-tertiary, #1E2432);
border-color: var(--color-border, #212533);
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-v2-upload-item,
[data-theme="dark"] .fk-v2-upload-item {
background: var(--color-bg-tertiary, #1E2432);
border-color: var(--color-border, #212533);
}
.dark .fk-v2-upload-item__name,
[data-theme="dark"] .fk-v2-upload-item__name {
color: var(--color-text-primary, #E5E7EB);
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 640px) {
.fk-v2-panel {
max-width: 100%;
}
.fk-v2-panel__header {
padding: var(--spacing-lg, 16px);
}
.fk-v2-panel__body {
padding: var(--spacing-lg, 16px);
}
.fk-v2-panel__footer {
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
}
.fk-v2-panel__form-row {
grid-template-columns: 1fr;
}
.fk-v2-panel__form-row--3 {
grid-template-columns: 1fr;
}
.fk-v2-type-selector {
flex-direction: column;
}
.fk-v2-type-card {
width: 100%;
flex-direction: row;
align-items: center;
}
.fk-v2-type-card__icon {
margin-bottom: 0;
margin-right: var(--spacing-md, 12px);
}
}
/* === extensions/fk-v2.css === */
/**
* ============================================================================
* FK V2 COMPONENT - DESIGN SYSTEM SIDASP
* ============================================================================
*
* Novo componente FK para renderização no Sidebar Right
* Substitui progressivamente o FK legado baseado em modal
*
* Design baseado no Figma: /public/tmp/fk/fk.svg e container_fk.svg
*
* @version 2.1.0
* @author SIDASP Design System
* @see /public/doc/architect/fk/evolucao_componente_fk/PROJETO_FK_V2_SIDEBAR.md
*/
/* ============================================================================
FK TRIGGER V2 - Estado Vazio (baseado em fk.svg do Figma)
============================================================================
Container: 332x74px, border 1px #CED3E2, border-radius 6px
Layout: flex row, padding 12px, gap 12px
- Esquerda: Título (14px Inter medium #12151F) + Badge contador
- Direita: Botão + (40x40px, border 1px #CED3E2, radius 6px)
============================================================================ */
.fk-trigger-v2 {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px;
gap: 12px;
width: 100%;
min-height: 74px;
max-width: 100%;
background: transparent; /* Mesma cor do container */
border: 1px solid var(--color-border, var(--neutral-400, #CED3E2));
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
.fk-trigger-v2:hover {
border-color: var(--color-neutral-600, #394360);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.fk-v2-disabled .fk-trigger-v2,
.fk-v2-disabled .fk-card-v2__add-btn {
cursor: not-allowed;
pointer-events: none;
}
/* Desfoque visual apenas nas FKs não selecionadas */
.fk-v2-blurred .fk-trigger-v2,
.fk-v2-blurred .fk-card-v2__add-btn {
opacity: 0.5;
}
.fk-v2-disabled .fk-trigger-v2:hover,
.fk-v2-disabled .fk-card-v2__add-btn:hover {
border-color: var(--color-border, var(--neutral-400, #CED3E2));
box-shadow: none;
}
/* FK selecionada desabilitada (sem desfoque visual) */
.fk-v2-selected-disabled .fk-trigger-v2,
.fk-v2-selected-disabled .fk-card-v2__add-btn {
opacity: 1;
}
.fk-trigger-v2__content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 4px;
width: 256px;
min-width: 0;
max-width: 100%;
height: auto;
min-height: 50px;
flex: 1 1 auto;
order: 0;
}
/* Título do trigger */
.fk-trigger-v2__title {
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-regular);
line-height: 24px;
color: #12151F;
margin: 0;
}
/* Badge de contagem - Figma: 41x28px, bg #E6E8EF, radius 100px */
.fk-trigger-v2__count {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 16px;
min-width: 41px;
height: 28px;
background: var(--color-neutral-100, #E6E8EF);
border-radius: 100px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 24px;
color: #7A839F;
}
/* Oculta badge quando vazio ({{count}} ou 0) */
.fk-trigger-v2__count:empty,
.fk-trigger-v2__count[data-count="0"] {
display: none;
}
/* Hint/descrição - Helper acima do título (mesma cor do helper do input) */
.fk-trigger-v2__hint {
width: 100%;
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: 22px;
color: var(--color-neutral-500, #7A839F); /* Mesma cor do helper dos outros componentes */
margin: 0;
display: block;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
/* Oculta hint quando está vazio (sem texto) */
.fk-trigger-v2__hint:empty {
display: none;
}
/* Garante que hint com conteúdo seja exibido */
.fk-trigger-v2__hint:not(:empty) {
display: block !important;
}
.fk-trigger-v2__button {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* padding: 14px; */
gap: 10px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
background: transparent;
border: 1px solid var(--color-border, var(--neutral-400, #CED3E2));
border-radius: 6px;
color: var(--color-text-primary, var(--neutral-800, #12151F));
cursor: pointer;
transition: all 0.2s ease;
flex: none;
order: 1;
flex-grow: 0;
}
.fk-trigger-v2__button:hover {
background: var(--color-bg-tertiary, var(--neutral-300, #ECEDF2));
border-color: var(--color-neutral-600, #394360);
}
.fk-trigger-v2__button:active {
transform: scale(0.95);
}
/* Loading no botão da FK */
.fk-trigger-v2__button--loading {
position: relative;
pointer-events: none;
}
.fk-trigger-v2__button--loading .input-search-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-300);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: drawer-input-search-spinner 0.6s linear infinite;
display: block !important;
z-index: 1;
pointer-events: none;
opacity: 1;
}
.fk-card-v2__add-btn--loading {
position: relative;
pointer-events: none;
}
.fk-card-v2__add-btn--loading .input-search-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-300);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: drawer-input-search-spinner 0.6s linear infinite;
display: block !important;
z-index: 1;
pointer-events: none;
opacity: 1;
}
/* Dark mode para loading nos botões */
.dark .fk-trigger-v2__button--loading .input-search-loading,
[data-theme="dark"] .fk-trigger-v2__button--loading .input-search-loading,
.dark .fk-card-v2__add-btn--loading .input-search-loading,
[data-theme="dark"] .fk-card-v2__add-btn--loading .input-search-loading {
border-color: var(--color-neutral-600);
border-top-color: var(--color-primary);
}
.fk-trigger-v2__button i {
width: 18px;
height: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 0; /* Remove tamanho padrão do ícone */
}
/* Ícone de mais (+) usando pseudo-elementos - baseado no FKComponent.css */
.fk-trigger-v2__button i.mdi-plus {
position: relative;
width: 18.05px;
height: 18.05px;
}
.fk-trigger-v2__button i.mdi-plus::before,
.fk-trigger-v2__button i.mdi-plus::after {
content: '';
position: absolute;
background: var(--color-text-primary, var(--neutral-800, #12151F));
border-radius: 1px;
}
.fk-trigger-v2__button i.mdi-plus::before {
width: 16.41px;
height: 2px;
left: 0.82px;
top: 8.41px;
}
.fk-trigger-v2__button i.mdi-plus::after {
width: 2px;
height: 16.41px;
left: 8.41px;
top: 0.82px;
}
/* ============================================================================
FK CARD V2 - Estado com Dados (baseado em container_fk.svg do Figma)
============================================================================
Container: flex column, gap 16px
- Header: mesmo layout do trigger (332x74px)
- Lista de fichas: com border-left
============================================================================ */
.fk-card-v2 {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0;
gap: 16px;
width: 100%;
}
/* Helper no card (mesmo estilo do trigger) - Oculto quando FK está preenchida */
.fk-card-v2 .fk-trigger-v2__hint {
display: none !important;
}
.dark .fk-card-v2 .fk-trigger-v2__hint,
[data-theme="dark"] .fk-card-v2 .fk-trigger-v2__hint {
color: var(--color-neutral-400, #9CA3AF);
}
/* Header do Card - mesmo design do trigger FK */
.fk-card-v2__header {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px;
gap: 12px;
width: 100%;
min-height: 74px;
background: transparent; /* Mesma cor do container */
border: 1px solid var(--color-border, var(--neutral-400, #CED3E2));
border-radius: 6px;
}
.fk-card-v2__header-left {
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
gap: 12px;
flex: 1;
min-width: 0;
}
.fk-card-v2__title {
font-family: var(--font-body);
font-size: 16px;
font-weight: var(--font-weight-regular);
line-height: 24px;
color: #12151F;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
/* Badge de contagem - Figma: 41x28px, bg #E6E8EF, radius 100px */
.fk-card-v2__count {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 16px;
min-width: 41px;
height: 28px;
background: var(--color-neutral-300, #E6E8EF);
border-radius: 100px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 24px;
color: #394360;
}
/* Botão adicionar - Figma: 40x40px */
.fk-card-v2__add-btn {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 14px;
gap: 10px;
width: 40px;
height: 40px;
background: transparent;
border: 1px solid #CED3E2;
border-radius: 6px;
color: #12151F;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.fk-card-v2__add-btn:hover {
background: var(--color-primary, #3E68FB) !important;
border-color: var(--color-primary, #3E68FB) !important;
color: var(--color-text-light, #FFFFFF) !important;
transform: scale(1.05);
}
.fk-card-v2__add-btn i {
font-size: 18px;
}
.fk-card-v2__list {
display: flex;
flex-direction: column;
width: 100%;
gap: 16px;
}
/* ============================================================================
FK FICHA V2 - Item Individual (Address Container do Figma)
============================================================================
Estrutura do Figma:
- Container: border-left 1px #CED3E2, padding-left 12px, gap 8px
- Address Info: título + botão opções (3 pontos)
- Address Details: tipo endereço + município/UF (com ícones)
============================================================================ */
.fk-ficha-v2 {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 0 0 12px;
gap: 8px;
width: 100%;
max-width: 100%;
border-left: 1px solid #CED3E2;
transition: background 0.2s ease;
}
/* Linha superior: título + botão menu */
.fk-ficha-v2__header {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 12px;
width: 100%;
min-height: 28px;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}
/* Título precisa ocupar espaço disponível */
.fk-ficha-v2__header .fk-ficha-v2__primary {
flex: 1 1 auto;
order: 0;
min-width: 0;
}
.fk-ficha-v2__content {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
/* Título principal - usa mesmas fontes do autocomplete */
.fk-ficha-v2__primary {
font-family: var(--font-body);
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 22px;
color: #12151F;
margin: 0;
flex: 1 1 auto;
order: 0;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
display: block;
}
/* Container dos detalhes (tipo + localização) */
.fk-ficha-v2__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0;
gap: 4px;
width: 100%;
}
/* Oculta meta quando vazio */
.fk-ficha-v2__meta:empty,
.fk-ficha-v2__meta:has(.fk-ficha-v2__meta-item:only-child:empty),
.fk-ficha-v2__meta:has(.fk-ficha-v2__meta-item:only-child:not(:has-text)) {
display: none;
}
/* Cada linha de meta (ícone + texto) - usa mesmas fontes do autocomplete */
.fk-ficha-v2__meta-item {
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
gap: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #7A839F;
min-width: 0;
flex-wrap: wrap;
}
.fk-ficha-v2__meta-item i {
flex-shrink: 0;
}
.fk-ficha-v2__meta-item span {
min-width: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Oculta meta item quando vazio */
.fk-ficha-v2__meta-item:empty,
.fk-ficha-v2__meta-item:not(:has-text) {
display: none;
}
/* Ícones dos meta items - Figma: 12x12px, cor #394360 */
.fk-ficha-v2__meta-item i {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
font-size: 12px;
color: #394360;
flex-shrink: 0;
}
.fk-ficha-v2__actions {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 10px;
width: 32px;
height: 32px;
background: transparent;
flex: none;
order: 1;
flex-grow: 0;
position: relative;
border-radius: 6px;
transition: background 0.2s ease;
}
.fk-ficha-v2__actions:hover {
background: var(--color-neutral-300, #ECEDF2);
}
/* Botão 3 pontos - aumentado */
.fk-ficha-v2__menu-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0;
gap: 10px;
width: 24px;
height: 24px;
background: transparent;
border: none;
border-radius: 0;
color: #394360;
cursor: pointer;
transition: all 0.2s ease;
flex: none;
order: 0;
flex-grow: 0;
position: relative;
}
.fk-ficha-v2__menu-btn i {
font-size: 24px;
width: 24px;
height: 24px;
}
.fk-ficha-v2__menu-btn:hover {
background: transparent;
color: #12151F;
}
/* ============================================================================
DROPDOWN MENU
============================================================================ */
.fk-v2-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
min-width: 180px;
background: #FFFFFF;
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-md, 8px);
box-shadow: 0 4px 16px rgba(18, 21, 31, 0.12);
padding: var(--spacing-xs, 4px);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s ease;
}
.fk-v2-dropdown-menu.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.fk-v2-dropdown-menu__item {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
width: 100%;
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
background: transparent;
border: none;
border-radius: var(--radius-sm, 6px);
font-size: var(--font-size-p4, 13px);
color: var(--color-text-secondary, #7A839F);
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.fk-v2-dropdown-menu__item:hover {
background: var(--color-neutral-300, #E6E8EF);
border-radius: var(--radius-sm, 6px);
}
.fk-v2-dropdown-menu__item i {
font-size: 16px;
color: var(--color-text-muted, #7A839F);
}
.fk-v2-dropdown-menu__item--danger {
color: var(--color-danger, #C90A0A);
}
.fk-v2-dropdown-menu__item--danger i {
color: var(--color-danger, #C90A0A);
}
.fk-v2-dropdown-menu__item--danger:hover {
background: rgba(201, 10, 10, 0.08);
border-radius: var(--radius-sm, 6px);
}
/* ============================================================================
CONTAINER
============================================================================ */
.fk-v2-container {
margin-bottom: var(--spacing-lg, 20px);
}
.fk-v2-container:last-child {
margin-bottom: 0;
}
/* ============================================================================
DARK MODE
============================================================================ */
.dark .fk-trigger-v2,
[data-theme="dark"] .fk-trigger-v2 {
background: transparent; /* Mesma cor do container */
border-color: var(--color-border, var(--neutral-600, #2A2F41));
}
.dark .fk-trigger-v2__title,
[data-theme="dark"] .fk-trigger-v2__title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-trigger-v2__hint,
[data-theme="dark"] .fk-trigger-v2__hint {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .fk-trigger-v2__count,
[data-theme="dark"] .fk-trigger-v2__count {
background: var(--color-neutral-100, #E6E8EF);
color: var(--color-text-primary);
}
.dark .fk-trigger-v2__button,
[data-theme="dark"] .fk-trigger-v2__button {
background: transparent;
border-color: var(--color-border, var(--neutral-600, #2A2F41));
color: var(--color-text-primary, var(--neutral-100, #F6F6F9));
}
.dark .fk-trigger-v2__button:hover,
[data-theme="dark"] .fk-trigger-v2__button:hover {
background: var(--color-bg-tertiary, var(--neutral-700, #374151));
border-color: var(--color-neutral-500, #7A839F);
}
.dark .fk-trigger-v2__button i.mdi-plus::before,
.dark .fk-trigger-v2__button i.mdi-plus::after,
[data-theme="dark"] .fk-trigger-v2__button i.mdi-plus::before,
[data-theme="dark"] .fk-trigger-v2__button i.mdi-plus::after {
background: var(--color-text-primary, var(--neutral-100, #F6F6F9));
}
.dark .fk-card-v2__header,
[data-theme="dark"] .fk-card-v2__header {
background: transparent; /* Mesma cor do container */
border-color: var(--color-border, var(--neutral-600, #2A2F41));
}
.dark .fk-card-v2__title,
[data-theme="dark"] .fk-card-v2__title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-card-v2__count,
[data-theme="dark"] .fk-card-v2__count {
background: var(--color-neutral-100, #E6E8EF);
color: var(--color-text-primary);
}
.dark .fk-card-v2__add-btn,
[data-theme="dark"] .fk-card-v2__add-btn {
border-color: var(--color-border, #212533);
color: var(--color-text-primary, #E5E7EB);
}
/* Ficha - border-left no dark mode */
.dark .fk-ficha-v2,
[data-theme="dark"] .fk-ficha-v2 {
border-left-color: var(--color-border, #212533);
}
.dark .fk-ficha-v2__primary,
[data-theme="dark"] .fk-ficha-v2__primary {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-ficha-v2__meta-item,
[data-theme="dark"] .fk-ficha-v2__meta-item {
color: var(--color-text-muted, #9CA3AF);
}
.dark .fk-ficha-v2__meta-item i,
[data-theme="dark"] .fk-ficha-v2__meta-item i {
color: var(--color-text-muted, #9CA3AF);
}
.dark .fk-ficha-v2__menu-btn,
[data-theme="dark"] .fk-ficha-v2__menu-btn {
background: transparent;
color: var(--color-text-muted, #9CA3AF);
}
.dark .fk-ficha-v2__menu-btn:hover,
[data-theme="dark"] .fk-ficha-v2__menu-btn:hover {
background: transparent;
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-ficha-v2__actions:hover,
[data-theme="dark"] .fk-ficha-v2__actions:hover {
background: var(--color-neutral-300, #374151);
}
.dark .fk-v2-dropdown-menu,
[data-theme="dark"] .fk-v2-dropdown-menu {
background: var(--color-bg-secondary, #161B26);
border-color: var(--color-border, #212533);
}
.dark .fk-v2-dropdown-menu__item,
[data-theme="dark"] .fk-v2-dropdown-menu__item {
color: var(--color-text-primary, #E5E7EB);
}
.dark .fk-v2-dropdown-menu__item:hover,
[data-theme="dark"] .fk-v2-dropdown-menu__item:hover {
background: var(--color-bg-tertiary, #1E2432);
border-radius: var(--radius-sm, 6px);
}
/* ============================================================================
RESPONSIVE
============================================================================ */
/* Tablets e telas médias (até 1024px) */
@media (max-width: 1024px) {
.fk-trigger-v2__content {
width: auto;
max-width: calc(100% - 60px);
}
.fk-trigger-v2__title {
font-size: 13px;
line-height: 20px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.fk-card-v2__title {
font-size: 14px;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
.fk-ficha-v2 {
flex-wrap: wrap;
}
.fk-ficha-v2__content {
flex: 1 1 auto;
min-width: 0;
}
.fk-ficha-v2__actions {
flex-shrink: 0;
}
}
/* Tablets pequenos (até 768px) */
@media (max-width: 768px) {
.fk-trigger-v2 {
padding: 10px;
gap: 10px;
}
.fk-trigger-v2__content {
gap: 3px;
}
.fk-trigger-v2__title {
font-size: 13px;
}
.fk-trigger-v2__count {
padding: 4px 12px;
min-width: 36px;
height: 26px;
font-size: 12px;
}
.fk-trigger-v2__button {
width: 38px;
height: 38px;
padding: 12px;
flex-shrink: 0;
}
.fk-card-v2__header {
padding: 10px;
gap: 10px;
}
.fk-card-v2__title {
font-size: 14px;
}
.fk-card-v2__count {
padding: 4px 12px;
min-width: 36px;
height: 26px;
font-size: 12px;
}
.fk-card-v2__add-btn {
width: 38px;
height: 38px;
padding: 12px;
flex-shrink: 0;
}
.fk-ficha-v2 {
padding: 0 0 0 10px;
gap: 8px;
}
.fk-ficha-v2__header {
flex-wrap: wrap;
gap: 8px;
}
.fk-ficha-v2__content {
flex: 1 1 100%;
min-width: 0;
}
.fk-ficha-v2__primary {
font-size: 13px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.fk-ficha-v2__meta {
flex-wrap: wrap;
gap: 8px;
}
.fk-ficha-v2__meta-item {
font-size: 12px;
gap: 4px;
}
.fk-ficha-v2__actions {
width: 30px;
height: 30px;
flex-shrink: 0;
}
.fk-ficha-v2__menu-btn {
width: 20px;
height: 20px;
}
.fk-v2-dropdown-menu {
min-width: 160px;
}
}
/* Mobile (até 640px) */
@media (max-width: 640px) {
.fk-trigger-v2 {
padding: 8px;
min-height: 60px;
gap: 8px;
flex-wrap: wrap;
}
.fk-trigger-v2__content {
width: 100%;
flex: 1 1 100%;
order: 1;
}
.fk-trigger-v2__button {
width: 36px;
height: 36px;
padding: 10px;
order: 2;
flex-shrink: 0;
}
.fk-trigger-v2__title {
font-size: 12px;
line-height: 18px;
}
.fk-trigger-v2__count {
padding: 2px 10px;
min-width: 32px;
height: 24px;
font-size: 11px;
}
.fk-card-v2__header {
padding: 8px;
min-height: 60px;
gap: 8px;
flex-wrap: wrap;
}
.fk-card-v2__header-left {
flex: 1 1 100%;
order: 1;
}
.fk-card-v2__title {
font-size: 13px;
white-space: normal;
}
.fk-card-v2__count {
padding: 2px 10px;
min-width: 32px;
height: 24px;
font-size: 11px;
}
.fk-card-v2__add-btn {
width: 36px;
height: 36px;
padding: 10px;
order: 2;
flex-shrink: 0;
}
.fk-card-v2__list {
gap: 12px;
}
.fk-ficha-v2 {
padding: 0 0 0 8px;
gap: 6px;
flex-direction: column;
}
.fk-ficha-v2__header {
width: 100%;
flex-wrap: wrap;
gap: 6px;
}
.fk-ficha-v2__content {
width: 100%;
flex: 1 1 100%;
}
.fk-ficha-v2__primary {
font-size: 13px;
line-height: 18px;
}
.fk-ficha-v2__meta {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.fk-ficha-v2__meta-item {
font-size: 12px;
gap: 4px;
}
.fk-ficha-v2__actions {
width: 28px;
height: 28px;
align-self: flex-end;
flex-shrink: 0;
}
.fk-ficha-v2__menu-btn {
width: 18px;
height: 18px;
}
.fk-ficha-v2__menu-btn i {
font-size: 18px;
}
.fk-v2-dropdown-menu {
min-width: 140px;
right: 0;
left: auto;
}
}
/* Mobile pequeno (até 480px) */
@media (max-width: 480px) {
.fk-trigger-v2 {
padding: 6px;
min-height: 56px;
}
.fk-trigger-v2__content {
gap: 2px;
}
.fk-trigger-v2__title {
font-size: 11px;
line-height: 16px;
}
.fk-trigger-v2__button {
width: 32px;
height: 32px;
padding: 8px;
}
.fk-card-v2__header {
padding: 6px;
min-height: 56px;
}
.fk-card-v2__title {
font-size: 12px;
}
.fk-card-v2__add-btn {
width: 32px;
height: 32px;
padding: 8px;
}
.fk-ficha-v2 {
padding: 0 0 0 6px;
}
.fk-ficha-v2__primary {
font-size: 12px;
}
.fk-ficha-v2__meta-item {
font-size: 11px;
}
.fk-ficha-v2__actions {
width: 26px;
height: 26px;
}
.fk-v2-dropdown-menu {
min-width: 120px;
}
}
/* === extensions/fk.css === */
/**
* ============================================================================
* FK COMPONENT - DESIGN SYSTEM SIDASP
* ============================================================================
*
* Componente moderno para gerenciamento de Foreign Keys (FKs)
* Layout flexível que ocupa 100% do espaço disponível
*
* ESTRUTURA:
* - Coluna única que se adapta ao container
* - O controle de largura é feito externamente via grid na construção da tela
* - Estado inicial: vazio (sem itens adicionados)
* - Estado com itens: mostra fichas dos elementos adicionados
*
* @version 2.0.0
* @author SIDASP Design System
*/
/* ============================================================================
CONTAINER PRINCIPAL
========================================================================== */
.fk-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
margin: 2rem 0;
}
/* ============================================================================
FK TRIGGER CARD (Botões para adicionar FKs)
========================================================================== */
.fk-trigger {
position: relative;
display: flex;
flex-direction: column;
padding: 1.25rem;
background: var(--color-bg-primary, var(--color-text-light));
border: 1px solid var(--color-border, #E5E7EB);
border-radius: 8px;
transition: all 0.2s ease;
}
.fk-trigger:hover {
border-color: var(--color-border-hover, #D1D5DB);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.fk-trigger__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.fk-trigger__title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-primary, #111827);
margin: 0;
}
.fk-trigger__description {
font-size: 0.875rem;
color: var(--color-text-secondary, #6B7280);
line-height: 1.5;
margin: 0 0 1rem 0;
}
.fk-trigger__button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: 1.5px solid var(--color-border, #E5E7EB);
border-radius: 6px;
color: var(--color-text-secondary, #6B7280);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.fk-trigger__button:hover {
background: var(--color-primary, var(--color-accent-300));
border-color: var(--color-primary, var(--color-accent-300));
color: var(--color-text-light);
transform: scale(1.05);
}
.fk-trigger__button:active {
transform: scale(0.95);
}
.fk-trigger__button i {
font-size: 1.25rem;
}
/* Container de fichas dentro do trigger */
.fk-trigger__items {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border, #E5E7EB);
}
/* Oculta o separador quando não há fichas */
.fk-trigger__items:empty {
display: none;
}
/* ============================================================================
FK FICHA ITEM (Dados adicionados)
========================================================================== */
.fk-ficha {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1rem 1.25rem;
background: var(--color-bg-primary, var(--color-text-light));
border: 1px solid var(--color-border, #E5E7EB);
border-radius: 6px;
transition: all 0.2s ease;
}
.fk-ficha:hover {
border-color: var(--color-border-hover, #D1D5DB);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.fk-ficha__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.fk-ficha__primary {
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-primary, #111827);
margin: 0;
}
.fk-ficha__secondary {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #6B7280);
}
.fk-ficha__secondary i {
font-size: 0.875rem;
}
.fk-ficha__tertiary {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-tertiary, #9CA3AF);
}
.fk-ficha__tertiary i {
font-size: 0.875rem;
}
.fk-ficha__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: 1rem;
}
.fk-ficha__menu-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--color-text-tertiary, #9CA3AF);
cursor: pointer;
transition: all 0.2s ease;
}
.fk-ficha__menu-button:hover {
background: var(--color-bg-secondary, #F3F4F6);
color: var(--color-text-secondary, #6B7280);
}
.fk-ficha__menu-button i {
font-size: 1.25rem;
}
/* ============================================================================
FK DROPDOWN MENU
========================================================================== */
.fk-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 0.25rem;
min-width: 160px;
padding: 0.5rem;
background: var(--color-bg-primary, var(--color-text-light));
border: 1px solid var(--color-border, #E5E7EB);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s ease;
}
.fk-dropdown-menu--active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.fk-dropdown-menu__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
background: transparent;
border: none;
border-radius: 6px;
width: 100%;
text-align: left;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary, #111827);
cursor: pointer;
transition: all 0.15s ease;
}
.fk-dropdown-menu__item:hover {
background: var(--color-bg-secondary, #F3F4F6);
}
.fk-dropdown-menu__item--danger:hover {
background: #FEE2E2;
color: #DC2626;
}
.fk-dropdown-menu__item i {
font-size: 1.125rem;
color: var(--color-text-secondary, #6B7280);
}
.fk-dropdown-menu__item--danger i {
color: #DC2626;
}
/* ============================================================================
EMPTY STATE (Quando não há fichas - oculto por padrão)
========================================================================== */
/* Empty state completamente oculto - FK deve aparecer limpo quando vazio */
.fk-empty-state {
display: none !important;
}
/* ============================================================================
DARK MODE
========================================================================== */
.dark .fk-trigger {
background: var(--color-bg-primary, var(--color-neutral-700));
border-color: var(--color-border, var(--color-neutral-600));
}
.dark .fk-trigger:hover {
border-color: var(--color-border-hover, #4A5575);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dark .fk-trigger__title {
color: var(--color-text-primary, #F3F4F6);
}
.dark .fk-trigger__description {
color: var(--color-text-secondary, #9CA3AF);
}
.dark .fk-trigger__button {
border-color: var(--color-border, var(--color-neutral-600));
color: var(--color-text-secondary, #9CA3AF);
}
.dark .fk-trigger__button:hover {
background: var(--color-primary, var(--color-accent-300));
border-color: var(--color-primary, var(--color-accent-300));
color: var(--color-text-light);
}
.dark .fk-trigger__items {
border-top-color: var(--color-border, var(--color-neutral-600));
}
.dark .fk-ficha {
background: var(--color-bg-primary, var(--color-neutral-700));
border-color: var(--color-border, var(--color-neutral-600));
}
.dark .fk-ficha:hover {
border-color: var(--color-border-hover, #4A5575);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dark .fk-ficha__primary {
color: var(--color-text-primary, #F3F4F6);
}
.dark .fk-ficha__secondary {
color: var(--color-text-secondary, #9CA3AF);
}
.dark .fk-ficha__tertiary {
color: var(--color-text-tertiary, #6B7280);
}
.dark .fk-ficha__menu-button:hover {
background: var(--color-bg-secondary, #2A2D3A);
color: var(--color-text-secondary, #9CA3AF);
}
.dark .fk-dropdown-menu {
background: var(--color-bg-primary, var(--color-neutral-700));
border-color: var(--color-border, var(--color-neutral-600));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dark .fk-dropdown-menu__item {
color: var(--color-text-primary, #F3F4F6);
}
.dark .fk-dropdown-menu__item:hover {
background: var(--color-bg-secondary, #2A2D3A);
}
.dark .fk-dropdown-menu__item--danger:hover {
background: rgba(220, 38, 38, 0.2);
color: #F87171;
}
/* ============================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.fk-container {
gap: 1rem;
margin: 1rem 0;
}
.fk-trigger {
padding: 1rem;
}
.fk-ficha {
padding: 0.875rem 1rem;
}
}
/* ============================================================================
UTILITIES
========================================================================== */
.fk-hidden {
display: none !important;
}
.fk-loading {
opacity: 0.5;
pointer-events: none;
}
.fk-disabled {
opacity: 0.4;
cursor: not-allowed !important;
}
/* ============================================================================
MODAIS LEGADOS - TEMA DARK
Aplica dark theme aos modais jQuery UI usados pelos FKs
========================================================================== */
/* Estilos do dark mode para modais jQuery UI */
html.dark .ui-dialog,
html.dark-mode .ui-dialog,
html[data-theme="dark"] .ui-dialog {
background-color: var(--color-bg-primary, #10141D) !important;
border: 1px solid var(--color-border, #212533) !important;
box-shadow: var(--shadow-xl) !important;
}
html.dark .ui-dialog .ui-dialog-titlebar,
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html[data-theme="dark"] .ui-dialog .ui-dialog-titlebar {
background-color: var(--color-bg-tertiary, var(--color-neutral-700)) !important;
border-bottom: 1px solid var(--color-border, #212533) !important;
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
html.dark .ui-dialog .ui-dialog-title,
html.dark-mode .ui-dialog .ui-dialog-title,
html[data-theme="dark"] .ui-dialog .ui-dialog-title {
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
html.dark .ui-dialog .ui-dialog-titlebar-close,
html.dark-mode .ui-dialog .ui-dialog-titlebar-close,
html[data-theme="dark"] .ui-dialog .ui-dialog-titlebar-close {
background-color: transparent !important;
border: none !important;
}
html.dark .ui-dialog .ui-dialog-titlebar-close:hover,
html.dark-mode .ui-dialog .ui-dialog-titlebar-close:hover,
html[data-theme="dark"] .ui-dialog .ui-dialog-titlebar-close:hover {
background-color: var(--color-bg-secondary, var(--color-neutral-800)) !important;
}
html.dark .ui-dialog .ui-dialog-titlebar-close .ui-icon,
html.dark-mode .ui-dialog .ui-dialog-titlebar-close .ui-icon,
html[data-theme="dark"] .ui-dialog .ui-dialog-titlebar-close .ui-icon {
filter: brightness(0) invert(1);
}
html.dark .ui-dialog .ui-dialog-content,
html.dark-mode .ui-dialog .ui-dialog-content,
html[data-theme="dark"] .ui-dialog .ui-dialog-content {
background-color: var(--color-bg-primary, #10141D) !important;
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
html.dark .ui-dialog input[type="text"],
html.dark .ui-dialog input[type="email"],
html.dark .ui-dialog input[type="tel"],
html.dark .ui-dialog input[type="number"],
html.dark .ui-dialog input[type="date"],
html.dark .ui-dialog select,
html.dark .ui-dialog textarea,
html.dark-mode .ui-dialog input[type="text"],
html.dark-mode .ui-dialog input[type="email"],
html.dark-mode .ui-dialog input[type="tel"],
html.dark-mode .ui-dialog input[type="number"],
html.dark-mode .ui-dialog input[type="date"],
html.dark-mode .ui-dialog select,
html.dark-mode .ui-dialog textarea,
html[data-theme="dark"] .ui-dialog input[type="text"],
html[data-theme="dark"] .ui-dialog input[type="email"],
html[data-theme="dark"] .ui-dialog input[type="tel"],
html[data-theme="dark"] .ui-dialog input[type="number"],
html[data-theme="dark"] .ui-dialog input[type="date"],
html[data-theme="dark"] .ui-dialog select,
html[data-theme="dark"] .ui-dialog textarea {
background-color: var(--color-bg-secondary, var(--color-neutral-800)) !important;
border: 1px solid var(--color-border, #212533) !important;
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
html.dark .ui-dialog input:focus,
html.dark .ui-dialog select:focus,
html.dark .ui-dialog textarea:focus,
html.dark-mode .ui-dialog input:focus,
html.dark-mode .ui-dialog select:focus,
html.dark-mode .ui-dialog textarea:focus,
html[data-theme="dark"] .ui-dialog input:focus,
html[data-theme="dark"] .ui-dialog select:focus,
html[data-theme="dark"] .ui-dialog textarea:focus {
border-color: var(--color-primary, var(--color-accent-300)) !important;
outline: none !important;
}
html.dark .ui-dialog label,
html.dark-mode .ui-dialog label,
html[data-theme="dark"] .ui-dialog label {
color: var(--color-text-secondary, #858CA3) !important;
}
html.dark .ui-dialog .ui-dialog-buttonpane,
html.dark-mode .ui-dialog .ui-dialog-buttonpane,
html[data-theme="dark"] .ui-dialog .ui-dialog-buttonpane {
background-color: var(--color-bg-tertiary, var(--color-neutral-700)) !important;
border-top: 1px solid var(--color-border, #212533) !important;
}
html.dark .ui-dialog .ui-dialog-buttonset button,
html.dark-mode .ui-dialog .ui-dialog-buttonset button,
html[data-theme="dark"] .ui-dialog .ui-dialog-buttonset button {
background-color: var(--color-primary, var(--color-accent-300)) !important;
border: 1px solid var(--color-primary, var(--color-accent-300)) !important;
color: white !important;
padding: 0.5rem 1rem !important;
border-radius: var(--radius-md, 8px) !important;
cursor: pointer !important;
transition: var(--transition-fast) !important;
}
html.dark .ui-dialog .ui-dialog-buttonset button:hover,
html.dark-mode .ui-dialog .ui-dialog-buttonset button:hover,
html[data-theme="dark"] .ui-dialog .ui-dialog-buttonset button:hover {
background-color: var(--color-primary-hover, #013251) !important;
}
html.dark .ui-dialog .ui-dialog-buttonset button:last-child,
html.dark-mode .ui-dialog .ui-dialog-buttonset button:last-child,
html[data-theme="dark"] .ui-dialog .ui-dialog-buttonset button:last-child {
background-color: var(--color-bg-secondary, var(--color-neutral-800)) !important;
border-color: var(--color-border, #212533) !important;
}
html.dark .ui-dialog .ui-dialog-buttonset button:last-child:hover,
html.dark-mode .ui-dialog .ui-dialog-buttonset button:last-child:hover,
html[data-theme="dark"] .ui-dialog .ui-dialog-buttonset button:last-child:hover {
background-color: var(--color-bg-tertiary, var(--color-neutral-700)) !important;
}
html.dark .ui-dialog table,
html.dark-mode .ui-dialog table,
html[data-theme="dark"] .ui-dialog table {
color: var(--color-text-primary, var(--color-neutral-300)) !important;
}
html.dark .ui-dialog table th,
html.dark-mode .ui-dialog table th,
html[data-theme="dark"] .ui-dialog table th {
background-color: var(--color-bg-tertiary, var(--color-neutral-700)) !important;
color: var(--color-text-secondary, #858CA3) !important;
border-color: var(--color-border, #212533) !important;
}
html.dark .ui-dialog table td,
html.dark-mode .ui-dialog table td,
html[data-theme="dark"] .ui-dialog table td {
border-color: var(--color-border, #212533) !important;
}
html.dark .ui-widget-overlay,
html.dark-mode .ui-widget-overlay,
html[data-theme="dark"] .ui-widget-overlay {
background-color: rgba(0, 0, 0, 0.75) !important;
opacity: 1 !important;
}
/* === extensions/gales-autosave.css === */
/**
* GALES Auto-Save CSS
* Estilos para o indicador de auto-save e lista de rascunhos
*
* @version 1.0.0
*/
/* =============================================================================
INDICADOR DE STATUS
============================================================================= */
.gales-autosave-indicator {
position: fixed;
bottom: var(--spacing-4, 1rem);
right: var(--spacing-4, 1rem);
display: flex;
align-items: center;
gap: var(--spacing-2, 0.5rem);
padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
background: var(--color-gray-100, #f3f4f6);
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-md, 0.375rem);
font-size: var(--text-sm, 0.875rem);
color: var(--color-gray-700, #374151);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
z-index: 9999;
transition: all 0.3s ease;
}
.gales-autosave-icon {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-gray-400, #9ca3af);
}
/* Status: Salvando */
.gales-autosave-saving .gales-autosave-icon {
background: var(--color-warning-500, #f59e0b);
animation: gales-autosave-pulse 1s infinite;
}
/* Status: Salvo */
.gales-autosave-saved .gales-autosave-icon {
background: var(--color-success-500, #10b981);
}
.gales-autosave-saved {
border-color: var(--color-success-300, #6ee7b7);
background: var(--color-success-50, #ecfdf5);
color: var(--color-success-700, #047857);
}
/* Status: Erro */
.gales-autosave-error .gales-autosave-icon {
background: var(--color-danger-500, #ef4444);
}
.gales-autosave-error {
border-color: var(--color-danger-300, #fca5a5);
background: var(--color-danger-50, #fef2f2);
color: var(--color-danger-700, #b91c1c);
}
@keyframes gales-autosave-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* =============================================================================
LISTA DE RASCUNHOS (MODAL)
============================================================================= */
.gales-drafts-list {
max-height: 400px;
overflow-y: auto;
}
.gales-draft-item {
display: flex;
align-items: center;
gap: var(--spacing-3, 0.75rem);
padding: var(--spacing-3, 0.75rem);
border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.gales-draft-item:last-child {
border-bottom: none;
}
.gales-draft-item:hover {
background: var(--color-gray-50, #f9fafb);
}
.gales-draft-preview {
flex: 1;
font-size: var(--text-sm, 0.875rem);
color: var(--color-gray-700, #374151);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gales-draft-timestamp {
font-size: var(--text-xs, 0.75rem);
color: var(--color-gray-500, #6b7280);
white-space: nowrap;
}
.gales-draft-actions {
display: flex;
gap: var(--spacing-1, 0.25rem);
}
.gales-draft-actions .btn {
padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
font-size: var(--text-xs, 0.75rem);
}
/* =============================================================================
RESPONSIVIDADE
============================================================================= */
@media (max-width: 640px) {
.gales-autosave-indicator {
bottom: var(--spacing-2, 0.5rem);
right: var(--spacing-2, 0.5rem);
padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
font-size: var(--text-xs, 0.75rem);
}
.gales-autosave-icon {
width: 8px;
height: 8px;
}
.gales-draft-item {
flex-wrap: wrap;
}
.gales-draft-preview {
width: 100%;
margin-bottom: var(--spacing-2, 0.5rem);
}
.gales-draft-timestamp {
flex: 1;
}
}
/* =============================================================================
DARK MODE (se suportado)
============================================================================= */
@media (prefers-color-scheme: dark) {
.gales-autosave-indicator {
background: var(--color-gray-800, #1f2937);
border-color: var(--color-gray-600, #4b5563);
color: var(--color-gray-200, #e5e7eb);
}
.gales-autosave-saved {
background: var(--color-success-900, #064e3b);
border-color: var(--color-success-700, #047857);
color: var(--color-success-200, #a7f3d0);
}
.gales-autosave-error {
background: var(--color-danger-900, #7f1d1d);
border-color: var(--color-danger-700, #b91c1c);
color: var(--color-danger-200, #fecaca);
}
.gales-draft-item:hover {
background: var(--color-gray-700, #374151);
}
}
/* === extensions/gales-clipboard.css === */
/**
* Smart Clipboard SIDASP - Estilos CSS
*
* Integrado com o Design System do SIDASP/GALES.
* Usa variáveis CSS do sistema para consistência visual.
*
* @author GALES Team
* @version 1.0.0
* @date Dezembro 2024
*/
/* ============================================================================
1. MENU DE CÓPIA (Copy Menu) - Usa componente Dropdown do Design System
============================================================================ */
/**
* O copy menu agora usa as classes .dropdown / .dropdown-menu do Design System.
* Apenas ajustes posicionais são necessários aqui, pois o dropdown é renderizado
* com position:absolute no body (fora de um container relativo).
*/
.sidasp-clipboard-copy-menu {
/* O wrapper já recebe position:absolute via JS */
display: block;
}
.sidasp-clipboard-copy-menu .dropdown-menu {
/* Sempre visível quando o wrapper está no DOM (controlado por dropdown--open) */
position: static;
margin-top: 0;
min-width: auto;
max-width: none;
}
.sidasp-clipboard-copy-menu .dropdown-menu-icon svg {
display: block;
}
/* ============================================================================
2. FEEDBACK DE CÓPIA - Migrado para Toast do Design System (toast.css/toast.js)
============================================================================ */
/* ============================================================================
3. MODAL DE CONFIRMAÇÃO (SmartPaste Modal)
Agora usa o componente Modal do Design System (modal.css / modal.js)
via window.modalAlert() — nenhum CSS customizado necessário.
============================================================================ */
/* ============================================================================
4. LOADING
============================================================================ */
.sidasp-smartpaste-loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10002;
display: flex;
align-items: center;
gap: var(--spacing-md, 12px);
background: var(--color-surface, #ffffff);
border-radius: var(--border-radius-md, 8px);
box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
padding: var(--spacing-lg, 20px) var(--spacing-xl, 24px);
opacity: 0;
transition: opacity 0.2s ease-out;
}
.sidasp-smartpaste-loading.show {
opacity: 1;
}
.sidasp-smartpaste-spinner {
width: 24px;
height: 24px;
border: 3px solid var(--color-border, #e0e0e0);
border-top-color: var(--color-primary, #1976d2);
border-radius: 50%;
animation: sidasp-spin 0.8s linear infinite;
}
.sidasp-smartpaste-loading span {
font-size: var(--font-size-sm, 14px);
color: var(--color-text-secondary, #666);
}
@keyframes sidasp-spin {
to { transform: rotate(360deg); }
}
/* ============================================================================
6. LISTA DE RESULTADOS
============================================================================ */
.sidasp-smartpaste-results {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10002;
background: var(--color-surface, #ffffff);
border-radius: var(--border-radius-lg, 12px);
box-shadow: var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.2));
max-width: 500px;
width: 90%;
max-height: 70vh;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.sidasp-smartpaste-results.show {
opacity: 1;
}
.sidasp-smartpaste-results-header {
display: flex;
align-items: center;
gap: var(--spacing-md, 12px);
padding: var(--spacing-md, 16px) var(--spacing-lg, 20px);
border-bottom: 1px solid var(--color-border, #e0e0e0);
}
.sidasp-smartpaste-results-header h4 {
flex: 1;
margin: 0;
font-size: var(--font-size-md, 16px);
font-weight: 600;
color: var(--color-text-primary, #333);
}
.sidasp-smartpaste-results-count {
font-size: var(--font-size-xs, 12px);
color: var(--color-text-tertiary, #999);
}
.sidasp-smartpaste-results-list {
flex: 1;
overflow-y: auto;
padding: var(--spacing-sm, 8px);
}
.sidasp-smartpaste-result-item {
padding: var(--spacing-md, 12px) var(--spacing-md, 16px);
border: 1px solid var(--color-border, #e0e0e0);
border-radius: var(--border-radius-sm, 6px);
margin-bottom: var(--spacing-sm, 8px);
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
.sidasp-smartpaste-result-item:last-child {
margin-bottom: 0;
}
.sidasp-smartpaste-result-item:hover {
background: var(--color-surface-hover, #f5f5f5);
border-color: var(--color-primary, #1976d2);
}
.sidasp-smartpaste-result-item:active {
transform: scale(0.98);
}
.sidasp-smartpaste-result-title {
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--color-text-primary, #333);
margin-bottom: var(--spacing-xs, 4px);
}
.sidasp-smartpaste-result-subtitle {
font-size: var(--font-size-xs, 12px);
color: var(--color-text-secondary, #666);
}
/* ============================================================================
7. ESTADO VAZIO (No Results)
============================================================================ */
.sidasp-smartpaste-empty {
padding: var(--spacing-xl, 32px);
text-align: center;
}
.sidasp-smartpaste-empty svg {
color: var(--color-border, #ccc);
margin-bottom: var(--spacing-md, 16px);
}
.sidasp-smartpaste-empty p {
margin: 0;
font-size: var(--font-size-sm, 14px);
color: var(--color-text-tertiary, #999);
}
/* ============================================================================
8. RESPONSIVIDADE
============================================================================ */
@media (max-width: 600px) {
.sidasp-smartpaste-results {
width: 95%;
max-width: none;
max-height: 80vh;
}
}
/* ============================================================================
9. ACESSIBILIDADE
============================================================================ */
/* Focus visible para navegação por teclado */
.sidasp-clipboard-menu-btn:focus-visible,
.sidasp-smartpaste-result-item:focus-visible {
outline: 2px solid var(--color-primary, #1976d2);
outline-offset: 2px;
}
/* Reduzir movimento para usuários que preferem */
@media (prefers-reduced-motion: reduce) {
.sidasp-clipboard-menu,
.sidasp-smartpaste-results,
.sidasp-smartpaste-loading {
transition: none;
}
.sidasp-smartpaste-spinner {
animation: none;
}
}
/* ============================================================================
10. UTILITÁRIOS
============================================================================ */
/* Classe para ocultar elementos */
.sidasp-clipboard-hidden {
display: none !important;
}
/* Classe para desabilitar interação */
.sidasp-clipboard-disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
/* === extensions/gis-feature-bar.css === */
/**
* GIS Feature Bar - Barra flutuante inferior do mapa
*
* Componente genérico que aparece ao clicar em uma feature no mapa.
* Exibe informações resumidas e ações (detalhar, operações).
*
* @component gis-feature-bar
* @version 2.0.0
* @author Claude Code
*
* Cores extraídas do Figma UI Kit:
* - Background: #141926
* - Border: #2A2F41
* - Label text: #A2A8B9
* - Value text: #E0E2EB
* - Icon: #E0E2EB
*/
/* ===== Container Principal ===== */
.gis-feature-bar {
display: none;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 24px;
position: absolute;
left: 56px;
right: 56px;
bottom: 56px;
height: 100px;
background: #141926;
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 100;
animation: gis-feature-bar-slide-up 0.3s ease-out;
}
.gis-feature-bar.visible {
display: flex;
}
@keyframes gis-feature-bar-slide-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== Área de Informações (Esquerda) ===== */
.gis-feature-bar__info {
display: flex;
flex-direction: row;
align-items: center;
gap: 80px;
flex: 1;
overflow: hidden;
}
/* Bloco de texto (label + valor) */
.gis-feature-bar__field {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.gis-feature-bar__label {
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #A2A8B9;
white-space: nowrap;
}
.gis-feature-bar__value {
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #E0E2EB;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* ===== Área de Operações (Direita) ===== */
.gis-feature-bar__actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
/* Botão de ação - estilo contornado (padrão do Figma) */
.gis-feature-bar__btn {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 14px;
gap: 10px;
width: 40px;
height: 40px;
background: transparent;
border: 1px solid #2A2F41;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.gis-feature-bar__btn:hover {
background: rgba(71, 109, 245, 0.1);
border-color: #476DF5;
}
.gis-feature-bar__btn:active {
background: rgba(71, 109, 245, 0.2);
}
.gis-feature-bar__btn i,
.gis-feature-bar__btn .material-icons {
font-size: 18px;
color: #E0E2EB;
}
/* ===== Dropdown de Operações ===== */
.gis-feature-bar__dropdown {
position: relative;
}
.gis-feature-bar__dropdown-menu {
display: none;
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 8px;
min-width: 200px;
padding: 8px 0;
background: #1D2333;
border: 1px solid #2A2F41;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 110;
}
.gis-feature-bar__dropdown.open .gis-feature-bar__dropdown-menu {
display: block;
animation: gis-dropdown-fade-in 0.15s ease-out;
}
@keyframes gis-dropdown-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.gis-feature-bar__dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
width: 100%;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
transition: background 0.15s ease;
}
.gis-feature-bar__dropdown-item:hover {
background: rgba(71, 109, 245, 0.1);
}
.gis-feature-bar__dropdown-item i,
.gis-feature-bar__dropdown-item .material-icons {
font-size: 18px;
color: #A2A8B9;
}
.gis-feature-bar__dropdown-item span {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #E0E2EB;
}
.gis-feature-bar__dropdown-divider {
height: 1px;
margin: 8px 0;
background: #2A2F41;
}
/* ===== Responsividade ===== */
@media (max-width: 768px) {
.gis-feature-bar {
left: 16px;
right: 16px;
bottom: 16px;
padding: 16px;
height: auto;
min-height: 100px;
flex-direction: column;
gap: 16px;
}
.gis-feature-bar__info {
width: 100%;
gap: 24px;
flex-wrap: wrap;
}
.gis-feature-bar__field {
flex: 1;
min-width: 120px;
}
.gis-feature-bar__value {
max-width: 100%;
}
.gis-feature-bar__actions {
width: 100%;
justify-content: flex-end;
}
}
/* === extensions/input-city-multi.css === */
/**
* Design System - Input City Multi Component
*
* Campo de seleção multipla de municipios com checkbox.
* - Lista de opcoes com checkboxes
* - Pesquisa/filtro por nome do municipio
* - Filtro por estado (opcional)
* - Pre-carrega municipios do estado padrao do sistema
*
* @version 1.0.0
* @date 2025-02-27
*/
/* ============================================================
INPUT CITY MULTI - CONTAINER PRINCIPAL
============================================================ */
.input-city-multi {
position: relative;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4px;
}
.input-city-multi-label {
display: block;
height: 24px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 24px;
color: var(--color-text-primary);
}
.input-city-multi-label-required::after {
content: '*';
color: var(--color-danger);
margin-left: 4px;
}
/* ============================================================
TRIGGER (CAMPO QUE ABRE O DROPDOWN)
============================================================ */
.input-city-multi-trigger {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
height: 40px;
padding: 12px;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-primary);
background-color: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-neutral-400, #7A839F);
border-radius: 6px;
cursor: pointer;
transition: all var(--transition-base);
box-sizing: border-box;
}
.input-city-multi-trigger:hover {
border-color: var(--color-neutral-600, #394360);
}
.input-city-multi-trigger:focus {
outline: none;
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
}
.input-city-multi-trigger.disabled {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
border-color: var(--color-neutral-300);
}
.input-city-multi-trigger.open {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Texto do trigger */
.input-city-multi-text {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-normal);
line-height: 24px;
}
.input-city-multi-text--placeholder {
color: var(--color-neutral-500);
}
/* Badge de contagem */
.input-city-multi-count-badge {
display: none;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
font-size: 12px;
font-weight: var(--font-weight-semibold);
color: var(--color-bg-primary);
background: var(--color-accent-400);
border-radius: 12px;
}
.input-city-multi.has-value .input-city-multi-count-badge {
display: flex;
}
/* Chevron do trigger */
.input-city-multi-chevron {
width: 12px;
height: 12px;
color: var(--color-text-primary);
transition: transform var(--transition-fast);
flex-shrink: 0;
}
.input-city-multi.open .input-city-multi-chevron {
transform: rotate(180deg);
}
/* Botao de limpar */
.input-city-multi-clear {
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
background: transparent;
border: none;
color: var(--color-neutral-500);
cursor: pointer;
border-radius: 50%;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.input-city-multi-clear:hover {
color: var(--color-danger);
background: var(--color-danger-100, rgba(239, 68, 68, 0.1));
}
.input-city-multi.has-value .input-city-multi-clear {
display: flex;
}
/* ============================================================
DROPDOWN / OPCOES
============================================================ */
.input-city-multi-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-neutral-400, #7A839F);
border-top: none;
border-radius: 0 0 6px 6px;
box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown, 1000);
display: none;
flex-direction: column;
max-height: 340px;
overflow: hidden;
}
.input-city-multi-dropdown.open {
display: flex;
animation: input-city-multi-dropdown-fade 0.2s ease-out;
}
@keyframes input-city-multi-dropdown-fade {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
CAMPO DE BUSCA
============================================================ */
.input-city-multi-search-wrapper {
position: relative;
padding: 12px;
border-bottom: 1px solid var(--color-border-light);
flex-shrink: 0;
}
.input-city-multi-search {
width: 100%;
height: 40px;
padding: 8px 12px 8px 40px !important;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
border: 1px solid var(--color-neutral-300);
border-radius: 6px;
transition: all var(--transition-base);
outline: none;
box-sizing: border-box;
}
.input-city-multi-search::placeholder {
color: var(--color-neutral-500);
}
.input-city-multi-search:focus {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 2px rgba(63, 104, 251, 0.1);
}
.input-city-multi-search-icon {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--color-neutral-500);
pointer-events: none;
z-index: 10;
}
/* ============================================================
LISTA DE MUNICIPIOS
============================================================ */
.input-city-multi-list {
flex: 1;
overflow-y: auto;
padding: 0;
}
/* Item de municipio */
.input-city-multi-item {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 16px;
gap: 8px;
cursor: pointer;
transition: background var(--transition-fast);
height: 48px;
box-sizing: border-box;
}
.input-city-multi-item:hover {
background: var(--color-neutral-200, #ECEDF2);
}
.input-city-multi-item:focus {
outline: none;
background: var(--color-neutral-200, #ECEDF2);
}
.input-city-multi-item.highlighted {
background: var(--color-neutral-200, #ECEDF2);
}
/* ============================================================
CHECKBOX
============================================================ */
.input-city-multi-checkbox {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
flex: none;
}
.input-city-multi-checkbox-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
background: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-neutral-400, #7A839F);
border-radius: 4px;
flex-shrink: 0;
transition: all var(--transition-fast);
box-sizing: border-box;
}
.input-city-multi-item:hover .input-city-multi-checkbox-container {
border-color: var(--color-neutral-600, #394360);
}
.input-city-multi-item.selected .input-city-multi-checkbox-container {
background: var(--color-accent-400);
border-color: var(--color-accent-400);
}
/* Icone de check */
.input-city-multi-check {
display: none;
width: 12px;
height: 12px;
color: var(--color-bg-primary);
}
.input-city-multi-item.selected .input-city-multi-check {
display: block;
}
/* Label do checkbox */
.input-city-multi-item-name {
flex: 1;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 24px;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* UF Badge no item */
.input-city-multi-item-uf {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
padding: 2px 8px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-600);
background: var(--color-neutral-200);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
/* Highlight do texto pesquisado */
.input-city-multi-item-name mark {
background: var(--color-warning-100, #FEF3C7);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
/* ============================================================
LOADING
============================================================ */
.input-city-multi-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--color-neutral-500);
}
.input-city-multi-loading-spinner {
width: 24px;
height: 24px;
border: 2px solid var(--color-neutral-300);
border-top-color: var(--color-accent-400);
border-radius: 50%;
animation: input-city-multi-spin 0.8s linear infinite;
margin-bottom: 12px;
}
@keyframes input-city-multi-spin {
to {
transform: rotate(360deg);
}
}
.input-city-multi-loading-text {
font-size: 14px;
}
/* ============================================================
ESTADO VAZIO
============================================================ */
.input-city-multi-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--color-neutral-500);
}
.input-city-multi-empty-icon {
width: 40px;
height: 40px;
margin-bottom: 12px;
opacity: 0.5;
}
.input-city-multi-empty-text {
font-size: 14px;
text-align: center;
}
/* ============================================================
FOOTER DO DROPDOWN
============================================================ */
.input-city-multi-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
border-top: 1px solid var(--color-border-light);
background: var(--color-neutral-50);
flex-shrink: 0;
}
.input-city-multi-footer-count {
font-size: 12px;
color: var(--color-neutral-600);
}
.input-city-multi-footer-actions {
display: flex;
gap: 8px;
}
.input-city-multi-btn {
padding: 4px 12px;
font-size: 12px;
font-weight: var(--font-weight-medium);
border-radius: 4px;
cursor: pointer;
transition: all var(--transition-fast);
}
.input-city-multi-btn--select-all {
color: var(--color-accent-400);
background: transparent;
border: 1px solid var(--color-accent-400);
}
.input-city-multi-btn--select-all:hover {
background: var(--color-accent-100);
}
.input-city-multi-btn--clear {
color: var(--color-neutral-600);
background: transparent;
border: 1px solid var(--color-neutral-400);
}
.input-city-multi-btn--clear:hover {
background: var(--color-neutral-200);
}
/* ============================================================
TAGS DE SELECIONADOS (ABAIXO DO TRIGGER)
============================================================ */
.input-city-multi-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
}
.input-city-multi-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
font-size: 12px;
font-weight: var(--font-weight-medium);
color: var(--color-accent-400);
background: var(--color-accent-100);
border-radius: 4px;
}
.input-city-multi-tag-remove {
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
padding: 0;
background: transparent;
border: none;
color: var(--color-accent-400);
cursor: pointer;
border-radius: 50%;
transition: all var(--transition-fast);
}
.input-city-multi-tag-remove:hover {
color: var(--color-danger);
background: rgba(239, 68, 68, 0.1);
}
.input-city-multi-tag-remove svg {
width: 10px;
height: 10px;
}
/* ============================================================
CAMPO HIDDEN
============================================================ */
.input-city-multi-value {
display: none;
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-city-multi-label,
[data-theme="dark"] .input-city-multi-label {
color: var(--color-neutral-300, #E0E2EB);
}
.dark .input-city-multi-trigger,
[data-theme="dark"] .input-city-multi-trigger {
color: var(--color-neutral-300, #E0E2EB);
background-color: var(--color-neutral-800, #141926);
border-color: rgba(162, 168, 185, 0.2);
}
.dark .input-city-multi-trigger:hover,
[data-theme="dark"] .input-city-multi-trigger:hover {
border-color: #2A2F41;
}
.dark .input-city-multi-trigger:focus,
.dark .input-city-multi-trigger.open,
[data-theme="dark"] .input-city-multi-trigger:focus,
[data-theme="dark"] .input-city-multi-trigger.open {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.15);
}
.dark .input-city-multi-text,
[data-theme="dark"] .input-city-multi-text {
color: var(--color-neutral-300, #E0E2EB);
}
.dark .input-city-multi-chevron,
[data-theme="dark"] .input-city-multi-chevron {
color: var(--color-neutral-300, #E0E2EB);
}
.dark .input-city-multi-dropdown,
[data-theme="dark"] .input-city-multi-dropdown {
background: var(--color-neutral-800, #141926);
border-color: rgba(162, 168, 185, 0.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dark .input-city-multi-search-wrapper,
[data-theme="dark"] .input-city-multi-search-wrapper {
border-bottom-color: rgba(162, 168, 185, 0.2);
}
.dark .input-city-multi-search,
[data-theme="dark"] .input-city-multi-search {
background-color: var(--color-neutral-800, #141926);
border-color: rgba(162, 168, 185, 0.2);
color: var(--color-neutral-300, #E0E2EB);
}
.dark .input-city-multi-search:focus,
[data-theme="dark"] .input-city-multi-search:focus {
border-color: var(--color-accent-300);
}
.dark .input-city-multi-item:hover,
.dark .input-city-multi-item.highlighted,
[data-theme="dark"] .input-city-multi-item:hover,
[data-theme="dark"] .input-city-multi-item.highlighted {
background: var(--color-neutral-700, #212533);
}
.dark .input-city-multi-checkbox-container,
[data-theme="dark"] .input-city-multi-checkbox-container {
background: var(--color-neutral-800, #141926);
border-color: rgba(162, 168, 185, 0.2);
}
.dark .input-city-multi-item:hover .input-city-multi-checkbox-container,
[data-theme="dark"] .input-city-multi-item:hover .input-city-multi-checkbox-container {
border-color: #2A2F41;
}
.dark .input-city-multi-item-name,
[data-theme="dark"] .input-city-multi-item-name {
color: var(--color-neutral-300, #E0E2EB);
}
.dark .input-city-multi-item-uf,
[data-theme="dark"] .input-city-multi-item-uf {
color: var(--color-neutral-400);
background: var(--color-neutral-700);
}
.dark .input-city-multi-footer,
[data-theme="dark"] .input-city-multi-footer {
background: var(--color-neutral-900, #0D1017);
border-top-color: rgba(162, 168, 185, 0.2);
}
.dark .input-city-multi-tag,
[data-theme="dark"] .input-city-multi-tag {
background: rgba(77, 145, 245, 0.2);
color: var(--color-accent-300);
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-city-multi-dropdown {
max-height: 300px;
}
.input-city-multi-item {
padding: 14px 16px;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-city-multi-trigger {
border-width: 2px;
}
.input-city-multi-checkbox-container {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-city-multi-dropdown,
.input-city-multi-chevron,
.input-city-multi-loading-spinner {
animation: none;
transition: none;
}
}
/* Focus visible */
.input-city-multi-trigger:focus-visible,
.input-city-multi-item:focus-visible,
.input-city-multi-search:focus-visible {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
}
/* === extensions/input-city.css === */
/**
* Design System - Input City Component
*
* Campo de seleção de municípios com funcionalidades:
* - Pesquisa/filtro por nome do município
* - Exibição "UF - Município" ou só "Município"
* - Filtro por estado (opcional)
* - Autocomplete com dropdown
* - Integração com tabela comum.municipio
*
* @version 1.0.0
* @date 2025-12-09
*/
/* ============================================================
INPUT CITY - CONTAINER PRINCIPAL
============================================================ */
.input-city {
position: relative;
width: 100%;
box-sizing: border-box;
}
.input-city-label {
display: block;
margin-bottom: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.input-city-label-required::after {
content: '*';
color: var(--color-danger);
margin-left: 4px;
}
/* ============================================================
TRIGGER (CAMPO QUE ABRE O DROPDOWN)
============================================================ */
.input-city-trigger {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 44px;
padding: 8px 16px;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
border: 1px solid var(--color-neutral-400);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
box-sizing: border-box;
}
.input-city-trigger:hover {
border-color: var(--color-neutral-600);
}
.input-city-trigger:focus {
outline: none;
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
}
.input-city-trigger.disabled {
background-color: var(--color-neutral-100);
color: var(--color-neutral-500);
cursor: not-allowed;
border-color: var(--color-neutral-300);
}
.input-city-trigger.open {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(63, 104, 251, 0.1);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Ícone de localização */
.input-city-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-neutral-500);
flex-shrink: 0;
}
.input-city-icon svg {
width: 20px;
height: 20px;
}
/* Texto do trigger */
.input-city-text {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.input-city-text--placeholder {
color: var(--color-neutral-500);
}
/* UF Badge no trigger */
.input-city-uf {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
font-size: 12px;
font-weight: var(--font-weight-semibold);
color: var(--color-accent-400);
background: var(--color-accent-100);
border-radius: var(--radius-sm);
margin-right: 8px;
}
/* Chevron do trigger */
.input-city-chevron {
width: 20px;
height: 20px;
color: var(--color-neutral-500);
transition: transform var(--transition-fast);
flex-shrink: 0;
}
.input-city.open .input-city-chevron {
transform: rotate(180deg);
}
/* Botão de limpar */
.input-city-clear {
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
background: transparent;
border: none;
color: var(--color-neutral-500);
cursor: pointer;
border-radius: 50%;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.input-city-clear:hover {
color: var(--color-danger);
background: var(--color-danger-100, rgba(239, 68, 68, 0.1));
}
.input-city.has-value .input-city-clear {
display: flex;
}
.input-city.has-value .input-city-chevron {
display: none;
}
/* ============================================================
DROPDOWN
============================================================ */
.input-city-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-primary);
border: 1px solid var(--color-accent-300);
border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown, 1000);
display: none;
max-height: 350px;
overflow: hidden;
}
.input-city-dropdown.open {
display: flex;
flex-direction: column;
animation: input-city-dropdown-fade 0.2s ease-out;
}
@keyframes input-city-dropdown-fade {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
CAMPO DE BUSCA
============================================================ */
.input-city-search-wrapper {
position: relative;
padding: 12px;
border-bottom: 1px solid var(--color-border-light);
flex-shrink: 0;
}
.input-city-search {
width: 100%;
height: 40px;
padding: 8px 12px 8px 40px !important; /* padding-left para dar espaco ao icone */
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-primary);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-md);
transition: all var(--transition-base);
outline: none;
box-sizing: border-box;
}
.input-city-search::placeholder {
color: var(--color-neutral-500);
}
.input-city-search:focus {
background-color: var(--color-bg-primary);
border-color: var(--color-accent-300);
box-shadow: 0 0 0 2px rgba(63, 104, 251, 0.1);
}
.input-city-search-icon {
position: absolute;
top: 50%;
left: 20px; /* posicao dentro do wrapper */
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--color-neutral-500);
pointer-events: none;
z-index: 10; /* garantir que fique acima do input */
}
/* ============================================================
LISTA DE MUNICÍPIOS
============================================================ */
.input-city-list {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
/* Item de município */
.input-city-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
cursor: pointer;
transition: background var(--transition-fast);
}
.input-city-item:hover {
background: var(--color-neutral-100);
}
.input-city-item:focus {
outline: none;
background: var(--color-neutral-100);
}
.input-city-item.selected {
background: var(--color-accent-100);
}
.input-city-item.highlighted {
background: var(--color-neutral-100);
}
/* UF no item */
.input-city-item-uf {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
padding: 2px 8px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-600);
background: var(--color-neutral-200);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.input-city-item.selected .input-city-item-uf {
color: var(--color-accent-400);
background: var(--color-accent-200);
}
/* Nome do município no item */
.input-city-item-name {
flex: 1;
font-size: 14px;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Check no item selecionado */
.input-city-item-check {
width: 16px;
height: 16px;
color: var(--color-accent-400);
opacity: 0;
flex-shrink: 0;
}
.input-city-item.selected .input-city-item-check {
opacity: 1;
}
/* Highlight do texto pesquisado */
.input-city-item-name mark {
background: var(--color-warning-100, #FEF3C7);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
/* ============================================================
AGRUPAMENTO POR ESTADO
============================================================ */
.input-city-group {
margin-bottom: 8px;
}
.input-city-group:last-child {
margin-bottom: 0;
}
.input-city-group-header {
padding: 8px 16px 4px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-600);
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--color-neutral-50);
position: sticky;
top: 0;
z-index: 1;
}
/* ============================================================
LOADING
============================================================ */
.input-city-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--color-neutral-500);
}
.input-city-loading-spinner {
width: 24px;
height: 24px;
border: 2px solid var(--color-neutral-300);
border-top-color: var(--color-accent-400);
border-radius: 50%;
animation: input-city-spin 0.8s linear infinite;
margin-bottom: 12px;
}
@keyframes input-city-spin {
to {
transform: rotate(360deg);
}
}
.input-city-loading-text {
font-size: 14px;
}
/* ============================================================
ESTADO VAZIO
============================================================ */
.input-city-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--color-neutral-500);
}
.input-city-empty-icon {
width: 40px;
height: 40px;
margin-bottom: 12px;
opacity: 0.5;
}
.input-city-empty-text {
font-size: 14px;
text-align: center;
}
/* ============================================================
FOOTER DO DROPDOWN
============================================================ */
.input-city-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
border-top: 1px solid var(--color-border-light);
background: var(--color-neutral-50);
flex-shrink: 0;
}
.input-city-count {
font-size: 12px;
color: var(--color-neutral-600);
}
.input-city-filter-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 11px;
font-weight: var(--font-weight-medium);
color: var(--color-primary);
background: var(--color-primary-100, rgba(63, 104, 251, 0.1));
border-radius: var(--radius-sm);
}
/* ============================================================
CAMPO HIDDEN
============================================================ */
.input-city-value {
display: none;
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-city-trigger,
[data-theme="dark"] .input-city-trigger {
color: var(--color-neutral-300);
background-color: var(--color-neutral-700);
border-color: var(--color-neutral-600);
}
.dark .input-city-trigger:hover,
[data-theme="dark"] .input-city-trigger:hover {
border-color: #525E7F;
}
.dark .input-city-trigger:focus,
.dark .input-city-trigger.open,
[data-theme="dark"] .input-city-trigger:focus,
[data-theme="dark"] .input-city-trigger.open {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.15);
}
.dark .input-city-dropdown,
[data-theme="dark"] .input-city-dropdown {
background: var(--color-neutral-700);
border-color: var(--color-accent-300);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dark .input-city-search-wrapper,
[data-theme="dark"] .input-city-search-wrapper {
border-bottom-color: var(--color-neutral-600);
}
.dark .input-city-search,
[data-theme="dark"] .input-city-search {
background-color: var(--color-neutral-800);
border-color: var(--color-neutral-600);
color: var(--color-neutral-300);
}
.dark .input-city-search:focus,
[data-theme="dark"] .input-city-search:focus {
background-color: var(--color-neutral-700);
border-color: var(--color-accent-300);
}
.dark .input-city-item:hover,
.dark .input-city-item.highlighted,
[data-theme="dark"] .input-city-item:hover,
[data-theme="dark"] .input-city-item.highlighted {
background: var(--color-neutral-600);
}
.dark .input-city-item.selected,
[data-theme="dark"] .input-city-item.selected {
background: rgba(77, 145, 245, 0.15);
}
.dark .input-city-item-uf,
[data-theme="dark"] .input-city-item-uf {
color: var(--color-neutral-400);
background: var(--color-neutral-600);
}
.dark .input-city-item-name,
[data-theme="dark"] .input-city-item-name {
color: var(--color-neutral-300);
}
.dark .input-city-group-header,
[data-theme="dark"] .input-city-group-header {
background: var(--color-neutral-800);
color: var(--color-neutral-400);
}
.dark .input-city-footer,
[data-theme="dark"] .input-city-footer {
background: var(--color-neutral-800);
border-top-color: var(--color-neutral-600);
}
.dark .input-city-label,
[data-theme="dark"] .input-city-label {
color: var(--color-neutral-300);
}
.dark .input-city-uf,
[data-theme="dark"] .input-city-uf {
background: rgba(77, 145, 245, 0.2);
color: var(--color-accent-300);
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-city-dropdown {
max-height: 300px;
}
.input-city-item {
padding: 12px 16px;
}
.input-city-item-uf {
min-width: 28px;
font-size: 10px;
}
}
/* ============================================================
VARIANTES
============================================================ */
/* Tamanho pequeno */
.input-city--sm .input-city-trigger {
height: 36px;
padding: 4px 12px;
font-size: 14px;
}
.input-city--sm .input-city-icon svg,
.input-city--sm .input-city-chevron {
width: 16px;
height: 16px;
}
/* Tamanho grande */
.input-city--lg .input-city-trigger {
height: 52px;
padding: 10px 20px;
font-size: 18px;
}
/* Sem borda */
.input-city--borderless .input-city-trigger {
border: none;
background: var(--color-neutral-100);
}
.input-city--borderless .input-city-trigger:focus,
.input-city--borderless .input-city-trigger.open {
box-shadow: none;
background: var(--color-neutral-200);
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-city-trigger {
border-width: 2px;
}
.input-city-item.selected {
border-left: 3px solid var(--color-accent-400);
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-city-dropdown,
.input-city-chevron,
.input-city-loading-spinner {
animation: none;
transition: none;
}
}
/* Focus visible */
.input-city-trigger:focus-visible,
.input-city-item:focus-visible,
.input-city-search:focus-visible {
outline: 2px solid var(--color-accent-300);
outline-offset: 2px;
}
/* === extensions/input-empresa.css === */
/**
* Design System - Input Empresa Component
*
* Componente de busca de empresa/inscricao estadual com:
* - Título e subtítulo configuráveis
* - Campo de busca com ícone, autocomplete e botão limpar
* - Dropdown de resultados
* - Área de card para exibir empresa selecionada
* - Layouts horizontal (card à direita) e vertical (card abaixo)
* - Filtro por classificações (id_classificacao)
*
* Baseado no design Figma: Gales Design System
* @version 1.0.0
* @date 2025-12-24
*/
/* ============================================================
INPUT EMPRESA - CONTAINER PRINCIPAL
============================================================ */
.input-empresa {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
/* Layout horizontal: search à esquerda, card à direita */
.input-empresa--horizontal {
flex-direction: row;
align-items: flex-start;
gap: 32px;
}
/* ============================================================
ÁREAS PRINCIPAIS
============================================================ */
.input-empresa__search-area {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
max-width: 492px;
}
.input-empresa--horizontal .input-empresa__search-area {
flex: 0 0 auto;
min-width: 350px;
}
.input-empresa__card-area {
flex: 1;
min-width: 0;
}
.input-empresa--horizontal .input-empresa__card-area {
flex: 1;
}
/* Ocultar card quando não selecionado */
.input-empresa__card-area:empty {
display: none;
}
/* ============================================================
HEADER - TÍTULO E SUBTÍTULO
============================================================ */
.input-empresa__header {
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
width: 100%;
}
.input-empresa__title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.input-empresa__subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: var(--color-text-secondary, #394360);
margin: 0;
}
/* ============================================================
INPUT CONTAINER - CAMPO DE BUSCA
============================================================ */
.input-empresa__input-container {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
width: 100%;
position: relative;
}
.input-empresa__search-box {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 52px;
padding: 10px 14px;
background-color: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-sizing: border-box;
transition: all var(--transition-base, 200ms ease-in-out);
}
.input-empresa__search-box:hover {
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-empresa__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1);
}
/* Estado de erro */
.input-empresa__search-box--error {
border-color: var(--color-danger, #F17777);
}
.input-empresa__search-box--error:focus-within {
border-color: var(--color-danger, #F17777);
box-shadow: 0 0 0 3px rgba(241, 119, 119, 0.1);
}
/* Estado de loading */
.input-empresa__search-box--loading {
pointer-events: none;
opacity: 0.7;
}
/* ============================================================
ÍCONE DE BUSCA
============================================================ */
.input-empresa__icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-text-primary, #12151F);
}
.input-empresa__icon i,
.input-empresa__icon .material-icons {
font-size: 20px;
line-height: 1;
}
/* ============================================================
INPUT FIELD
============================================================ */
.input-empresa__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--color-text-primary, #12151F);
}
.input-empresa__input::placeholder {
color: var(--color-neutral-500, #7A839F);
}
/* ============================================================
BOTÃO LIMPAR INPUT (X)
============================================================ */
.input-empresa__clear {
display: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-text-tertiary, #7A839F);
transition: color var(--transition-fast, 150ms ease);
}
.input-empresa__clear:hover {
color: var(--color-danger, #C90A0A);
}
/* Mostrar quando input tem valor */
.input-empresa__input:not(:placeholder-shown) ~ .input-empresa__clear,
.input-empresa__clear--visible {
display: flex;
}
.input-empresa__clear i,
.input-empresa__clear .material-icons {
font-size: 18px;
line-height: 1;
}
/* ============================================================
SPINNER DE LOADING
============================================================ */
.input-empresa__spinner {
display: none;
width: 18px;
height: 18px;
border: 2px solid var(--color-neutral-300, #CED3E2);
border-top-color: var(--color-primary, #C90A0A);
border-radius: 50%;
animation: input-empresa-spin 0.6s linear infinite;
flex-shrink: 0;
}
.input-empresa__search-box--loading .input-empresa__spinner {
display: block;
}
.input-empresa__search-box--loading .input-empresa__clear {
display: none !important;
}
@keyframes input-empresa-spin {
to {
transform: rotate(360deg);
}
}
/* ============================================================
DROPDOWN DE RESULTADOS
============================================================ */
.input-empresa__dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 4px;
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.input-empresa__dropdown--visible {
display: block;
}
/* Item do dropdown */
.input-empresa__dropdown-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
cursor: pointer;
border-bottom: 1px solid var(--color-border-light, #E6E8EF);
transition: background-color var(--transition-fast, 150ms ease);
}
.input-empresa__dropdown-item:last-child {
border-bottom: none;
}
.input-empresa__dropdown-item:hover,
.input-empresa__dropdown-item--focused {
background: var(--color-bg-secondary, #F6F6F9);
}
.input-empresa__dropdown-item:active {
background: var(--color-bg-tertiary, #E6E8EF);
}
/* Nome da empresa no dropdown */
.input-empresa__dropdown-name {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-text-primary, #12151F);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Detalhes secundários (CPF/CNPJ, IE, classificação) */
.input-empresa__dropdown-details {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: var(--color-text-secondary, #394360);
}
.input-empresa__dropdown-details span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.input-empresa__dropdown-details span::before {
content: '•';
color: var(--color-neutral-400, #9CA3B9);
}
.input-empresa__dropdown-details span:first-child::before {
display: none;
}
/* Mensagem de nenhum resultado */
.input-empresa__dropdown-empty {
padding: 16px 14px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-text-tertiary, #7A839F);
text-align: center;
}
/* ============================================================
MENSAGEM DE VALIDAÇÃO/ERRO
============================================================ */
.input-empresa__message {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 20px;
margin: 0;
padding-left: 2px;
}
.input-empresa__message--error {
color: var(--color-danger-dark, #970707);
}
.input-empresa__message--success {
color: var(--color-success, #519000);
}
.input-empresa__message--info {
color: var(--color-text-secondary, #394360);
}
/* ============================================================
BOTÕES DE AÇÃO
============================================================ */
.input-empresa__actions {
display: flex;
gap: 20px;
width: 100%;
}
.input-empresa__btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 8px 10px;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
white-space: nowrap;
}
/* Botão Limpar (outline) */
.input-empresa__btn--limpar {
background: transparent;
border: 1px solid var(--color-border, #CED3E2);
color: var(--color-text-primary, #12151F);
}
.input-empresa__btn--limpar:hover {
background: var(--color-bg-secondary, #F6F6F9);
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-empresa__btn--limpar:active {
transform: scale(0.98);
}
/* Botão Pesquisar (filled - disabled por padrão) */
.input-empresa__btn--pesquisar {
background: var(--color-bg-tertiary, #E6E8EF);
border: none;
color: var(--color-text-muted, #7A839F);
}
.input-empresa__btn--pesquisar:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.input-empresa__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-300, #CED3E2);
color: var(--color-text-primary, #12151F);
cursor: pointer;
}
.input-empresa__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
.input-empresa__btn--pesquisar:not(:disabled):active {
transform: scale(0.98);
}
/* Estado de loading */
.input-empresa__btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.input-empresa__btn--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-400);
border-radius: 50%;
border-top-color: var(--color-primary, #C90A0A);
animation: input-empresa-spinner 0.6s linear infinite;
}
@keyframes input-empresa-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* Dark mode para botões */
.dark .input-empresa__btn--limpar,
[data-theme="dark"] .input-empresa__btn--limpar {
border-color: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-300, #D1D5DB);
}
.dark .input-empresa__btn--limpar:hover,
[data-theme="dark"] .input-empresa__btn--limpar:hover {
background: var(--color-neutral-700, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
.dark .input-empresa__btn--pesquisar,
[data-theme="dark"] .input-empresa__btn--pesquisar {
background: var(--color-neutral-700, #374151);
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-empresa__btn--pesquisar:not(:disabled),
[data-theme="dark"] .input-empresa__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-empresa__btn--pesquisar:not(:disabled):hover,
[data-theme="dark"] .input-empresa__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
/* ============================================================
INFO CARD AREA - EMPRESA SELECIONADA
============================================================ */
.input-empresa__card {
animation: input-empresa-card-appear 0.3s ease-out;
}
@keyframes input-empresa-card-appear {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Botão remover empresa selecionada */
.input-empresa__card-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 4px;
color: var(--color-neutral-300, #D1D5DB);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
}
.input-empresa__card-remove:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--color-neutral-100, #F3F4F6);
}
.input-empresa__card-remove i,
.input-empresa__card-remove .material-icons {
font-size: 18px;
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-empresa__title,
[data-theme="dark"] .input-empresa__title {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-empresa__subtitle,
[data-theme="dark"] .input-empresa__subtitle {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-empresa__search-box,
[data-theme="dark"] .input-empresa__search-box {
background-color: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-700, #374151);
}
.dark .input-empresa__search-box:hover,
[data-theme="dark"] .input-empresa__search-box:hover {
border-color: var(--color-neutral-600, #4B5563);
}
.dark .input-empresa__search-box:focus-within,
[data-theme="dark"] .input-empresa__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.15);
}
.dark .input-empresa__icon,
[data-theme="dark"] .input-empresa__icon {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-empresa__input,
[data-theme="dark"] .input-empresa__input {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-empresa__input::placeholder,
[data-theme="dark"] .input-empresa__input::placeholder {
color: var(--color-neutral-500, #6B7280);
}
.dark .input-empresa__clear,
[data-theme="dark"] .input-empresa__clear {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-empresa__clear:hover,
[data-theme="dark"] .input-empresa__clear:hover {
color: var(--color-danger, #EF4444);
}
/* Dropdown dark mode */
.dark .input-empresa__dropdown,
[data-theme="dark"] .input-empresa__dropdown {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-700, #374151);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.dark .input-empresa__dropdown-item,
[data-theme="dark"] .input-empresa__dropdown-item {
border-color: var(--color-neutral-700, #374151);
}
.dark .input-empresa__dropdown-item:hover,
.dark .input-empresa__dropdown-item--focused,
[data-theme="dark"] .input-empresa__dropdown-item:hover,
[data-theme="dark"] .input-empresa__dropdown-item--focused {
background: var(--color-neutral-700, #374151);
}
.dark .input-empresa__dropdown-name,
[data-theme="dark"] .input-empresa__dropdown-name {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-empresa__dropdown-details,
[data-theme="dark"] .input-empresa__dropdown-details {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-empresa__dropdown-empty,
[data-theme="dark"] .input-empresa__dropdown-empty {
color: var(--color-neutral-500, #6B7280);
}
/* ============================================================
VARIAÇÕES DE TAMANHO
============================================================ */
/* Tamanho compacto */
.input-empresa--compact .input-empresa__header {
gap: 4px;
}
.input-empresa--compact .input-empresa__title {
font-size: 18px;
line-height: 24px;
}
.input-empresa--compact .input-empresa__subtitle {
font-size: 13px;
line-height: 18px;
}
.input-empresa--compact .input-empresa__search-box {
height: 44px;
padding: 8px 12px;
}
.input-empresa--compact .input-empresa__input {
font-size: 14px;
}
/* Tamanho grande */
.input-empresa--large .input-empresa__title {
font-size: 28px;
line-height: 36px;
}
.input-empresa--large .input-empresa__search-box {
height: 60px;
padding: 14px 18px;
}
.input-empresa--large .input-empresa__input {
font-size: 18px;
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-empresa--horizontal {
flex-direction: column;
gap: 24px;
}
.input-empresa__search-area {
max-width: 100%;
}
.input-empresa--horizontal .input-empresa__search-area {
min-width: auto;
}
.input-empresa__title {
font-size: 20px;
line-height: 28px;
}
.input-empresa__search-box {
height: 48px;
}
.input-empresa__dropdown {
max-height: 250px;
}
}
@media (max-width: 480px) {
.input-empresa__dropdown-item {
padding: 10px 12px;
}
.input-empresa__dropdown-details {
flex-direction: column;
gap: 2px;
}
.input-empresa__dropdown-details span::before {
display: none;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* Focus visible */
.input-empresa__input:focus-visible {
outline: none;
}
.input-empresa__clear:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
border-radius: 2px;
}
.input-empresa__dropdown-item:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: -2px;
}
.input-empresa__card-remove:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-empresa__search-box {
border-width: 2px;
}
.input-empresa__dropdown {
border-width: 2px;
}
.input-empresa__dropdown-item {
border-bottom-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-empresa__search-box,
.input-empresa__clear,
.input-empresa__dropdown-item,
.input-empresa__card-remove {
transition: none;
}
.input-empresa__spinner {
animation: none;
}
.input-empresa__card {
animation: none;
}
}
/* ============================================================
ESTADOS ESPECIAIS
============================================================ */
/* Quando tem empresa selecionada */
.input-empresa--has-selection .input-empresa__search-area {
opacity: 0.6;
pointer-events: none;
}
.input-empresa--has-selection.input-empresa--allow-change .input-empresa__search-area {
opacity: 1;
pointer-events: auto;
}
/* Desabilitado */
.input-empresa--disabled {
opacity: 0.5;
pointer-events: none;
}
.input-empresa--disabled .input-empresa__search-box {
cursor: not-allowed;
}
/* === extensions/input-exploracao.css === */
/**
* Design System - Input Exploração Component
*
* Componente de busca de exploração agropecuária com:
* - Título e subtítulo centralizados
* - Campo de busca com ícone e botão limpar
* - Mensagem de validação/erro
* - Botões de ação (Limpar e Pesquisar)
* - Suporte a autocomplete com dropdown de resultados
* - Callback para seleção de exploração
* - Filtro opcional por propriedade (id_inscricaoestadual)
*
* Baseado no design Figma: Cadastros Agropecuários > Exploração
* @version 1.0.0
* @date 2025-12-31
*/
/* ============================================================
INPUT EXPLORAÇÃO - CONTAINER PRINCIPAL
============================================================ */
/* Wrapper de centralização para uso em layouts de formulário/grid */
.input-exploracao-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 400px;
padding: 40px 20px;
box-sizing: border-box;
}
/* Centralização em colunas de grid do FormRenderer */
.form-row .input-exploracao-wrapper,
.form-group .input-exploracao-wrapper {
grid-column: 1 / -1; /* Ocupa toda a largura disponível */
}
.input-exploracao {
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
width: 100%;
max-width: 492px;
margin: 0 auto;
}
/* ============================================================
HEADER - TÍTULO E SUBTÍTULO
============================================================ */
.input-exploracao__header {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
width: 100%;
}
.input-exploracao__title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 40px;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.input-exploracao__subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: var(--color-text-secondary, #394360);
margin: 0;
}
/* ============================================================
INPUT CONTAINER - CAMPO DE BUSCA
============================================================ */
.input-exploracao__input-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
position: relative;
}
.input-exploracao__search-box {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-sizing: border-box;
transition: all var(--transition-base, 200ms ease-in-out);
}
.input-exploracao__search-box:hover {
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-exploracao__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1);
}
/* Estado de erro */
.input-exploracao__search-box--error {
border-color: var(--color-danger, #F17777);
}
.input-exploracao__search-box--error:focus-within {
border-color: var(--color-danger, #F17777);
box-shadow: 0 0 0 3px rgba(241, 119, 119, 0.1);
}
/* ============================================================
ÍCONE DE BUSCA
============================================================ */
.input-exploracao__icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-text-primary, #12151F);
}
.input-exploracao__search-box--error .input-exploracao__icon {
color: var(--color-primary, #C90A0A);
}
.input-exploracao__icon i,
.input-exploracao__icon .material-icons {
font-size: 20px;
line-height: 1;
}
/* ============================================================
INPUT FIELD
============================================================ */
.input-exploracao__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: var(--color-text-primary, #12151F);
}
.input-exploracao__input::placeholder {
color: var(--color-neutral-500, #7A839F);
}
/* ============================================================
BOTÃO LIMPAR INPUT (X)
============================================================ */
.input-exploracao__clear {
display: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-text-primary, #12151F);
transition: color var(--transition-fast, 150ms ease);
}
.input-exploracao__clear:hover {
color: var(--color-danger, #C90A0A);
}
.input-exploracao__search-box--error .input-exploracao__clear {
color: var(--color-primary, #C90A0A);
}
/* Mostrar quando input tem valor */
.input-exploracao__input:not(:placeholder-shown) ~ .input-exploracao__clear,
.input-exploracao__clear--visible {
display: flex;
}
.input-exploracao__clear i,
.input-exploracao__clear .material-icons {
font-size: 18px;
line-height: 1;
}
/* ============================================================
DROPDOWN DE RESULTADOS (AUTOCOMPLETE)
============================================================ */
.input-exploracao__dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.input-exploracao__dropdown--visible {
display: block;
}
.input-exploracao__dropdown-item {
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid var(--color-border-light, #F0F0F0);
transition: background-color var(--transition-fast, 150ms ease);
}
.input-exploracao__dropdown-item:last-child {
border-bottom: none;
}
.input-exploracao__dropdown-item:hover,
.input-exploracao__dropdown-item--highlighted {
background-color: var(--color-bg-secondary, #F6F6F9);
}
.input-exploracao__dropdown-item-label {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-text-primary, #12151F);
margin-bottom: 4px;
}
.input-exploracao__dropdown-item-details {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: var(--color-text-secondary, #394360);
}
.input-exploracao__dropdown-empty {
padding: 16px;
text-align: center;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-text-secondary, #394360);
}
/* ============================================================
MENSAGEM DE VALIDAÇÃO/ERRO
============================================================ */
.input-exploracao__message {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
margin: 0;
}
.input-exploracao__message--error {
color: var(--color-danger-dark, #970707);
}
.input-exploracao__message--success {
color: var(--color-success, #519000);
}
.input-exploracao__message--info {
color: var(--color-text-secondary, #394360);
}
/* ============================================================
BOTÕES DE AÇÃO
============================================================ */
.input-exploracao__actions {
display: flex;
gap: 20px;
width: 100%;
}
.input-exploracao__btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 8px 10px;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
white-space: nowrap;
}
/* Botão Limpar (outline) */
.input-exploracao__btn--limpar {
background: transparent;
border: 1px solid var(--color-border, #CED3E2);
color: var(--color-text-primary, #12151F);
}
.input-exploracao__btn--limpar:hover {
background: var(--color-bg-secondary, #F6F6F9);
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-exploracao__btn--limpar:active {
transform: scale(0.98);
}
/* Botão Pesquisar (filled - disabled por padrão) */
.input-exploracao__btn--pesquisar {
background: var(--color-bg-tertiary, #E6E8EF);
border: none;
color: var(--color-text-muted, #7A839F);
}
.input-exploracao__btn--pesquisar:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.input-exploracao__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-300, #CED3E2);
color: var(--color-text-primary, #12151F);
cursor: pointer;
}
.input-exploracao__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
.input-exploracao__btn--pesquisar:not(:disabled):active {
transform: scale(0.98);
}
/* Estado de loading */
.input-exploracao__btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.input-exploracao__btn--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-400);
border-radius: 50%;
border-top-color: var(--color-primary, #C90A0A);
animation: input-exploracao-spinner 0.6s linear infinite;
}
@keyframes input-exploracao-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-exploracao__title,
[data-theme="dark"] .input-exploracao__title {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-exploracao__subtitle,
[data-theme="dark"] .input-exploracao__subtitle {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-exploracao__search-box,
[data-theme="dark"] .input-exploracao__search-box {
background-color: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-700, #374151);
}
.dark .input-exploracao__search-box:hover,
[data-theme="dark"] .input-exploracao__search-box:hover {
border-color: var(--color-neutral-600, #4B5563);
}
.dark .input-exploracao__search-box:focus-within,
[data-theme="dark"] .input-exploracao__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.15);
}
.dark .input-exploracao__icon,
[data-theme="dark"] .input-exploracao__icon {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-exploracao__input,
[data-theme="dark"] .input-exploracao__input {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-exploracao__input::placeholder,
[data-theme="dark"] .input-exploracao__input::placeholder {
color: var(--color-neutral-500, #6B7280);
}
.dark .input-exploracao__clear,
[data-theme="dark"] .input-exploracao__clear {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-exploracao__dropdown,
[data-theme="dark"] .input-exploracao__dropdown {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-700, #374151);
}
.dark .input-exploracao__dropdown-item,
[data-theme="dark"] .input-exploracao__dropdown-item {
border-bottom-color: var(--color-neutral-700, #374151);
}
.dark .input-exploracao__dropdown-item:hover,
.dark .input-exploracao__dropdown-item--highlighted,
[data-theme="dark"] .input-exploracao__dropdown-item:hover,
[data-theme="dark"] .input-exploracao__dropdown-item--highlighted {
background-color: var(--color-neutral-700, #374151);
}
.dark .input-exploracao__dropdown-item-label,
[data-theme="dark"] .input-exploracao__dropdown-item-label {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-exploracao__dropdown-item-details,
[data-theme="dark"] .input-exploracao__dropdown-item-details {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-exploracao__btn--limpar,
[data-theme="dark"] .input-exploracao__btn--limpar {
border-color: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-300, #D1D5DB);
}
.dark .input-exploracao__btn--limpar:hover,
[data-theme="dark"] .input-exploracao__btn--limpar:hover {
background: var(--color-neutral-700, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
.dark .input-exploracao__btn--pesquisar,
[data-theme="dark"] .input-exploracao__btn--pesquisar {
background: var(--color-neutral-700, #374151);
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-exploracao__btn--pesquisar:not(:disabled),
[data-theme="dark"] .input-exploracao__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-exploracao__btn--pesquisar:not(:disabled):hover,
[data-theme="dark"] .input-exploracao__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
/* ============================================================
VARIAÇÕES DE LAYOUT
============================================================ */
/* Layout em duas colunas (para usar com card ao lado) */
.input-exploracao--two-column {
max-width: 100%;
}
/* Versão compacta */
.input-exploracao--compact {
gap: 24px;
}
.input-exploracao--compact .input-exploracao__header {
gap: 8px;
}
.input-exploracao--compact .input-exploracao__title {
font-size: 24px;
line-height: 32px;
}
.input-exploracao--compact .input-exploracao__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-exploracao--compact .input-exploracao__search-box {
height: 52px;
padding: 10px 14px;
}
.input-exploracao--compact .input-exploracao__input {
font-size: 16px;
line-height: 24px;
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-exploracao {
max-width: 100%;
padding: 0 16px;
}
.input-exploracao__title {
font-size: 24px;
line-height: 32px;
}
.input-exploracao__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-exploracao__search-box {
height: 56px;
padding: 10px 14px;
}
.input-exploracao__input {
font-size: 16px;
line-height: 24px;
}
.input-exploracao__actions {
gap: 12px;
}
.input-exploracao__btn {
height: 44px; /* Área de toque adequada em mobile */
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* Focus visible */
.input-exploracao__input:focus-visible {
outline: none;
}
.input-exploracao__btn:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
}
.input-exploracao__clear:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
border-radius: 2px;
}
.input-exploracao__dropdown-item:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: -2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-exploracao__search-box {
border-width: 2px;
}
.input-exploracao__btn {
border-width: 2px;
}
.input-exploracao__dropdown {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-exploracao__search-box,
.input-exploracao__btn,
.input-exploracao__clear,
.input-exploracao__dropdown-item {
transition: none;
}
.input-exploracao__btn:active {
transform: none;
}
.input-exploracao__btn--loading::after {
animation: none;
}
}
/* ============================================================
DARK MODE - Media Query (prefers-color-scheme)
============================================================ */
@media (prefers-color-scheme: dark) {
.input-exploracao__title {
color: var(--color-text-primary, #F3F4F6);
}
.input-exploracao__subtitle {
color: var(--color-text-secondary, #9CA3AF);
}
.input-exploracao__search-box {
background-color: var(--color-bg-secondary, #1F2937);
border-color: var(--color-border, #374151);
}
.input-exploracao__search-box:hover {
border-color: var(--color-neutral-600, #4B5563);
}
.input-exploracao__icon {
color: var(--color-text-primary, #F3F4F6);
}
.input-exploracao__input {
color: var(--color-text-primary, #F3F4F6);
}
.input-exploracao__input::placeholder {
color: var(--color-text-muted, #6B7280);
}
.input-exploracao__clear {
color: var(--color-text-primary, #F3F4F6);
}
.input-exploracao__dropdown {
background: var(--color-bg-primary, #1F2937);
border-color: var(--color-border, #374151);
}
.input-exploracao__dropdown-item {
border-bottom-color: var(--color-border, #374151);
}
.input-exploracao__dropdown-item:hover,
.input-exploracao__dropdown-item--highlighted {
background-color: var(--color-bg-tertiary, #374151);
}
.input-exploracao__dropdown-item-label {
color: var(--color-text-primary, #F3F4F6);
}
.input-exploracao__dropdown-item-details {
color: var(--color-text-secondary, #9CA3AF);
}
.input-exploracao__btn--limpar {
border-color: var(--color-border, #4B5563);
color: var(--color-text-primary, #D1D5DB);
}
.input-exploracao__btn--limpar:hover {
background: var(--color-bg-tertiary, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
.input-exploracao__btn--pesquisar {
background: var(--color-bg-tertiary, #374151);
color: var(--color-text-muted, #9CA3AF);
}
.input-exploracao__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-600, #4B5563);
color: var(--color-text-primary, #F3F4F6);
}
}
/* === extensions/input-lotacao.css === */
/**
* Input Lotacao Component
*
* Componente de busca de lotacoes (unidades organizacionais) com autocomplete.
* Baseado no padrão input-city, adaptado para busca de lotacoes do sistema.
*
* Tipos de Lotacao:
* - 1: Sede
* - 2: Unidade Regional
* - 3: Unidade Local (UOL)
* - 4: Posto Fixo
* - 5: Coordenacao
* - 6: Diretoria
*
* SearchUrl padrao: /defesa-sanitaria-animal/lotacao/pesquisar-lotacao
*
* @package DesignSystem
* @since 1.0.0
*/
/* ==========================================================================
Container Principal
========================================================================== */
.input-lotacao {
position: relative;
width: 100%;
font-family: var(--font-family-base, 'Roboto', sans-serif);
}
.input-lotacao--disabled {
opacity: 0.6;
pointer-events: none;
}
/* ==========================================================================
Campo de Disparo (Trigger)
========================================================================== */
.input-lotacao-trigger {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 40px;
padding: 8px 36px 8px 12px;
background-color: var(--color-surface, #ffffff);
border: 1px solid var(--color-border, #e0e0e0);
border-radius: var(--border-radius, 4px);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-lotacao-trigger:hover {
border-color: var(--color-border-hover, #bdbdbd);
}
.input-lotacao-trigger:focus,
.input-lotacao-trigger:focus-within {
outline: none;
border-color: var(--color-primary, #1976d2);
box-shadow: 0 0 0 2px var(--color-primary-light, rgba(25, 118, 210, 0.2));
}
.input-lotacao-trigger--error {
border-color: var(--color-error, #d32f2f);
}
.input-lotacao-trigger--error:focus,
.input-lotacao-trigger--error:focus-within {
box-shadow: 0 0 0 2px var(--color-error-light, rgba(211, 47, 47, 0.2));
}
.input-lotacao-trigger--open {
border-color: var(--color-primary, #1976d2);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* ==========================================================================
Input de Busca
========================================================================== */
.input-lotacao-search {
flex: 1;
width: 100%;
min-width: 0;
padding: 0;
background: transparent;
border: none;
font-size: 14px;
font-family: inherit;
color: var(--color-text, #212121);
outline: none;
}
.input-lotacao-search::placeholder {
color: var(--color-text-hint, #9e9e9e);
}
.input-lotacao-search:disabled {
background: transparent;
cursor: not-allowed;
}
/* ==========================================================================
Valor Selecionado
========================================================================== */
.input-lotacao-value {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 14px;
color: var(--color-text, #212121);
overflow: hidden;
}
.input-lotacao-value__text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.input-lotacao-value__type {
flex-shrink: 0;
padding: 2px 6px;
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.1));
border-radius: 3px;
font-size: 11px;
font-weight: 500;
color: var(--color-primary, #1976d2);
text-transform: uppercase;
}
/* Cores por tipo de lotacao */
.input-lotacao-value__type--sede {
background-color: var(--color-info-light, rgba(2, 136, 209, 0.1));
color: var(--color-info, #0288d1);
}
.input-lotacao-value__type--regional {
background-color: var(--color-success-light, rgba(46, 125, 50, 0.1));
color: var(--color-success, #2e7d32);
}
.input-lotacao-value__type--local {
background-color: var(--color-warning-light, rgba(237, 108, 2, 0.1));
color: var(--color-warning, #ed6c02);
}
.input-lotacao-value__type--posto {
background-color: var(--color-secondary-light, rgba(156, 39, 176, 0.1));
color: var(--color-secondary, #9c27b0);
}
.input-lotacao-value__type--coordenacao {
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.1));
color: var(--color-primary, #1976d2);
}
.input-lotacao-value__type--diretoria {
background-color: var(--color-error-light, rgba(211, 47, 47, 0.1));
color: var(--color-error, #d32f2f);
}
/* ==========================================================================
Icones
========================================================================== */
.input-lotacao-icon {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--color-text-secondary, #757575);
pointer-events: none;
transition: transform 0.2s ease;
}
.input-lotacao-icon .material-icons {
font-size: 20px;
}
.input-lotacao-trigger--open .input-lotacao-icon {
transform: translateY(-50%) rotate(180deg);
}
/* Botao Limpar */
.input-lotacao-clear {
position: absolute;
right: 32px;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
background: var(--color-surface-variant, #f5f5f5);
border: none;
border-radius: 50%;
color: var(--color-text-secondary, #757575);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.input-lotacao-clear:hover {
background: var(--color-error-light, rgba(211, 47, 47, 0.1));
color: var(--color-error, #d32f2f);
}
.input-lotacao-clear .material-icons {
font-size: 14px;
}
.input-lotacao--has-value .input-lotacao-clear {
display: flex;
}
/* ==========================================================================
Dropdown
========================================================================== */
.input-lotacao-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--z-index-dropdown, 1000);
display: none;
max-height: 300px;
overflow-y: auto;
background-color: var(--color-surface, #ffffff);
border: 1px solid var(--color-primary, #1976d2);
border-top: none;
border-bottom-left-radius: var(--border-radius, 4px);
border-bottom-right-radius: var(--border-radius, 4px);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}
.input-lotacao-dropdown--open {
display: block;
}
/* Scrollbar customizada */
.input-lotacao-dropdown::-webkit-scrollbar {
width: 6px;
}
.input-lotacao-dropdown::-webkit-scrollbar-track {
background: var(--color-surface-variant, #f5f5f5);
}
.input-lotacao-dropdown::-webkit-scrollbar-thumb {
background: var(--color-border, #e0e0e0);
border-radius: 3px;
}
.input-lotacao-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--color-text-disabled, #bdbdbd);
}
/* ==========================================================================
Lista de Resultados
========================================================================== */
.input-lotacao-list {
list-style: none;
margin: 0;
padding: 0;
}
/* ==========================================================================
Item da Lista
========================================================================== */
.input-lotacao-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
cursor: pointer;
transition: background-color 0.15s ease;
border-bottom: 1px solid var(--color-border-light, #f0f0f0);
}
.input-lotacao-item:last-child {
border-bottom: none;
}
.input-lotacao-item:hover {
background-color: var(--color-surface-hover, #f5f5f5);
}
.input-lotacao-item--highlighted {
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.08));
}
.input-lotacao-item--selected {
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.12));
}
.input-lotacao-item--selected::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--color-primary, #1976d2);
}
/* Icone do Item */
.input-lotacao-item__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.1));
border-radius: 50%;
color: var(--color-primary, #1976d2);
}
.input-lotacao-item__icon .material-icons {
font-size: 18px;
}
/* Cores do icone por tipo */
.input-lotacao-item--sede .input-lotacao-item__icon {
background-color: var(--color-info-light, rgba(2, 136, 209, 0.1));
color: var(--color-info, #0288d1);
}
.input-lotacao-item--regional .input-lotacao-item__icon {
background-color: var(--color-success-light, rgba(46, 125, 50, 0.1));
color: var(--color-success, #2e7d32);
}
.input-lotacao-item--local .input-lotacao-item__icon {
background-color: var(--color-warning-light, rgba(237, 108, 2, 0.1));
color: var(--color-warning, #ed6c02);
}
.input-lotacao-item--posto .input-lotacao-item__icon {
background-color: var(--color-secondary-light, rgba(156, 39, 176, 0.1));
color: var(--color-secondary, #9c27b0);
}
.input-lotacao-item--coordenacao .input-lotacao-item__icon {
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.1));
color: var(--color-primary, #1976d2);
}
.input-lotacao-item--diretoria .input-lotacao-item__icon {
background-color: var(--color-error-light, rgba(211, 47, 47, 0.1));
color: var(--color-error, #d32f2f);
}
/* Conteudo do Item */
.input-lotacao-item__content {
flex: 1;
min-width: 0;
}
.input-lotacao-item__name {
font-size: 14px;
font-weight: 500;
color: var(--color-text, #212121);
margin: 0 0 2px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.input-lotacao-item__details {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 12px;
color: var(--color-text-secondary, #757575);
}
.input-lotacao-item__type {
display: inline-flex;
align-items: center;
gap: 4px;
}
.input-lotacao-item__type::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
}
.input-lotacao-item__hierarchy {
color: var(--color-text-hint, #9e9e9e);
}
/* Highlight de texto buscado */
.input-lotacao-highlight {
background-color: var(--color-warning-light, rgba(255, 193, 7, 0.3));
font-weight: 600;
border-radius: 2px;
padding: 0 1px;
}
/* ==========================================================================
Estados
========================================================================== */
/* Carregando */
.input-lotacao-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
color: var(--color-text-secondary, #757575);
font-size: 14px;
}
.input-lotacao-loading__spinner {
width: 20px;
height: 20px;
border: 2px solid var(--color-border, #e0e0e0);
border-top-color: var(--color-primary, #1976d2);
border-radius: 50%;
animation: input-lotacao-spin 0.8s linear infinite;
}
@keyframes input-lotacao-spin {
to {
transform: rotate(360deg);
}
}
/* Sem Resultados */
.input-lotacao-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 16px;
text-align: center;
color: var(--color-text-secondary, #757575);
}
.input-lotacao-empty__icon {
font-size: 32px;
color: var(--color-text-disabled, #bdbdbd);
}
.input-lotacao-empty__text {
font-size: 14px;
margin: 0;
}
.input-lotacao-empty__hint {
font-size: 12px;
color: var(--color-text-hint, #9e9e9e);
margin: 0;
}
/* Erro */
.input-lotacao-error {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background-color: var(--color-error-light, rgba(211, 47, 47, 0.08));
color: var(--color-error, #d32f2f);
font-size: 13px;
}
.input-lotacao-error__icon {
flex-shrink: 0;
}
.input-lotacao-error__icon .material-icons {
font-size: 18px;
}
/* ==========================================================================
Grupos (Agrupamento por Tipo)
========================================================================== */
.input-lotacao-group {
border-bottom: 1px solid var(--color-border-light, #f0f0f0);
}
.input-lotacao-group:last-child {
border-bottom: none;
}
.input-lotacao-group__header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background-color: var(--color-surface-variant, #fafafa);
font-size: 11px;
font-weight: 600;
color: var(--color-text-secondary, #757575);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.input-lotacao-group__count {
padding: 2px 6px;
background-color: var(--color-border, #e0e0e0);
border-radius: 10px;
font-size: 10px;
font-weight: 500;
}
/* ==========================================================================
Mensagem de Ajuda
========================================================================== */
.input-lotacao-help {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-hint, #9e9e9e);
}
.input-lotacao--error .input-lotacao-help {
color: var(--color-error, #d32f2f);
}
/* ==========================================================================
Variantes
========================================================================== */
/* Compacto */
.input-lotacao--compact .input-lotacao-trigger {
min-height: 32px;
padding: 4px 32px 4px 8px;
}
.input-lotacao--compact .input-lotacao-search {
font-size: 13px;
}
.input-lotacao--compact .input-lotacao-value {
font-size: 13px;
}
.input-lotacao--compact .input-lotacao-item {
padding: 8px;
gap: 8px;
}
.input-lotacao--compact .input-lotacao-item__icon {
width: 28px;
height: 28px;
}
.input-lotacao--compact .input-lotacao-item__icon .material-icons {
font-size: 14px;
}
.input-lotacao--compact .input-lotacao-item__name {
font-size: 13px;
}
.input-lotacao--compact .input-lotacao-item__details {
font-size: 11px;
}
/* Full Width */
.input-lotacao--full-width {
width: 100%;
}
/* Somente Leitura */
.input-lotacao--readonly .input-lotacao-trigger {
background-color: var(--color-surface-variant, #f5f5f5);
cursor: default;
}
.input-lotacao--readonly .input-lotacao-clear {
display: none !important;
}
/* ==========================================================================
Filtro por Tipo
========================================================================== */
.input-lotacao-filter {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border-light, #f0f0f0);
background-color: var(--color-surface-variant, #fafafa);
}
.input-lotacao-filter__chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background-color: var(--color-surface, #ffffff);
border: 1px solid var(--color-border, #e0e0e0);
border-radius: 16px;
font-size: 12px;
color: var(--color-text-secondary, #757575);
cursor: pointer;
transition: all 0.15s ease;
}
.input-lotacao-filter__chip:hover {
border-color: var(--color-primary, #1976d2);
color: var(--color-primary, #1976d2);
}
.input-lotacao-filter__chip--active {
background-color: var(--color-primary, #1976d2);
border-color: var(--color-primary, #1976d2);
color: var(--color-on-primary, #ffffff);
}
.input-lotacao-filter__chip--active:hover {
background-color: var(--color-primary-dark, #1565c0);
border-color: var(--color-primary-dark, #1565c0);
color: var(--color-on-primary, #ffffff);
}
/* ==========================================================================
Dark Mode
========================================================================== */
@media (prefers-color-scheme: dark) {
.input-lotacao-trigger {
background-color: var(--color-surface-dark, #1e1e1e);
border-color: var(--color-border-dark, #424242);
color: var(--color-text-dark, #e0e0e0);
}
.input-lotacao-search {
color: var(--color-text-dark, #e0e0e0);
}
.input-lotacao-search::placeholder {
color: var(--color-text-hint-dark, #757575);
}
.input-lotacao-dropdown {
background-color: var(--color-surface-dark, #1e1e1e);
border-color: var(--color-primary, #1976d2);
}
.input-lotacao-item:hover {
background-color: var(--color-surface-hover-dark, #2c2c2c);
}
.input-lotacao-item__name {
color: var(--color-text-dark, #e0e0e0);
}
.input-lotacao-item__details {
color: var(--color-text-secondary-dark, #9e9e9e);
}
.input-lotacao-group__header {
background-color: var(--color-surface-variant-dark, #2c2c2c);
color: var(--color-text-secondary-dark, #9e9e9e);
}
.input-lotacao-filter {
background-color: var(--color-surface-variant-dark, #2c2c2c);
}
.input-lotacao-filter__chip {
background-color: var(--color-surface-dark, #1e1e1e);
border-color: var(--color-border-dark, #424242);
color: var(--color-text-secondary-dark, #9e9e9e);
}
}
/* ==========================================================================
Responsividade
========================================================================== */
@media (max-width: 768px) {
.input-lotacao-dropdown {
max-height: 250px;
}
.input-lotacao-item {
padding: 10px;
}
.input-lotacao-item__icon {
width: 32px;
height: 32px;
}
.input-lotacao-filter {
gap: 6px;
padding: 6px 10px;
}
.input-lotacao-filter__chip {
padding: 3px 8px;
font-size: 11px;
}
}
@media (max-width: 480px) {
.input-lotacao-trigger {
min-height: 44px; /* Touch friendly */
}
.input-lotacao-item {
flex-direction: column;
gap: 8px;
}
.input-lotacao-item__icon {
align-self: flex-start;
}
}
/* ==========================================================================
Acessibilidade
========================================================================== */
.input-lotacao-trigger:focus-visible {
outline: 2px solid var(--color-primary, #1976d2);
outline-offset: 2px;
}
.input-lotacao-item:focus {
outline: none;
background-color: var(--color-primary-light, rgba(25, 118, 210, 0.12));
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-lotacao-trigger {
border-width: 2px;
}
.input-lotacao-item--highlighted {
outline: 2px solid var(--color-primary, #1976d2);
outline-offset: -2px;
}
.input-lotacao-value__type,
.input-lotacao-item__type {
border: 1px solid currentColor;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-lotacao-trigger,
.input-lotacao-icon,
.input-lotacao-item,
.input-lotacao-clear,
.input-lotacao-filter__chip {
transition: none;
}
.input-lotacao-loading__spinner {
animation: none;
}
}
/* ==========================================================================
Print
========================================================================== */
@media print {
.input-lotacao-dropdown {
display: none !important;
}
.input-lotacao-trigger {
border: 1px solid #000;
background: #fff;
}
.input-lotacao-icon,
.input-lotacao-clear {
display: none;
}
}
/* === extensions/input-produtor.css === */
/**
* Design System - Input Produtor Component
*
* Componente de busca de produtor/pessoa com:
* - Título e subtítulo centralizados
* - Campo de busca com ícone e botão limpar
* - Mensagem de validação/erro
* - Botões de ação (Limpar e Pesquisar)
*
* Baseado no design Figma: Cadastros Agropecuários > Pessoa > Informar documento
* @version 1.0.0
* @date 2025-12-22
*/
/* ============================================================
INPUT PRODUTOR - CONTAINER PRINCIPAL
============================================================ */
/* Wrapper de centralização para uso em layouts de formulário/grid */
.input-produtor-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 400px;
padding: 40px 20px;
box-sizing: border-box;
}
/* Centralização em colunas de grid do FormRenderer */
.form-row .input-produtor-wrapper,
.form-group .input-produtor-wrapper {
grid-column: 1 / -1; /* Ocupa toda a largura disponível */
}
.input-produtor {
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
width: 100%;
max-width: 492px;
margin: 0 auto;
}
/* ============================================================
HEADER - TÍTULO E SUBTÍTULO
============================================================ */
.input-produtor__header {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
width: 100%;
}
.input-produtor__title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 40px;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.input-produtor__subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: var(--color-text-secondary, #394360);
margin: 0;
}
/* ============================================================
INPUT CONTAINER - CAMPO DE BUSCA
============================================================ */
.input-produtor__input-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
}
.input-produtor__search-box {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-sizing: border-box;
transition: all var(--transition-base, 200ms ease-in-out);
}
.input-produtor__search-box:hover {
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-produtor__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1);
}
/* Estado de erro */
.input-produtor__search-box--error {
border-color: var(--color-danger, #F17777);
}
.input-produtor__search-box--error:focus-within {
border-color: var(--color-danger, #F17777);
box-shadow: 0 0 0 3px rgba(241, 119, 119, 0.1);
}
/* ============================================================
ÍCONE DE BUSCA
============================================================ */
.input-produtor__icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-text-primary, #12151F);
}
.input-produtor__search-box--error .input-produtor__icon {
color: var(--color-primary, #C90A0A);
}
.input-produtor__icon i,
.input-produtor__icon .material-icons {
font-size: 20px;
line-height: 1;
}
/* ============================================================
INPUT FIELD
============================================================ */
.input-produtor__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: var(--color-text-primary, #12151F);
}
.input-produtor__input::placeholder {
color: var(--color-neutral-500, #7A839F);
}
/* ============================================================
BOTÃO LIMPAR INPUT (X)
============================================================ */
.input-produtor__clear {
display: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-text-primary, #12151F);
transition: color var(--transition-fast, 150ms ease);
}
.input-produtor__clear:hover {
color: var(--color-danger, #C90A0A);
}
.input-produtor__search-box--error .input-produtor__clear {
color: var(--color-primary, #C90A0A);
}
/* Mostrar quando input tem valor */
.input-produtor__input:not(:placeholder-shown) ~ .input-produtor__clear,
.input-produtor__clear--visible {
display: flex;
}
.input-produtor__clear i,
.input-produtor__clear .material-icons {
font-size: 18px;
line-height: 1;
}
/* ============================================================
MENSAGEM DE VALIDAÇÃO/ERRO
============================================================ */
.input-produtor__message {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
margin: 0;
}
.input-produtor__message--error {
color: var(--color-danger-dark, #970707);
}
.input-produtor__message--success {
color: var(--color-success, #519000);
}
.input-produtor__message--info {
color: var(--color-text-secondary, #394360);
}
/* ============================================================
BOTÕES DE AÇÃO
============================================================ */
.input-produtor__actions {
display: flex;
gap: 20px;
width: 100%;
}
.input-produtor__btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 8px 10px;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
white-space: nowrap;
}
/* Botão Limpar (outline) */
.input-produtor__btn--limpar {
background: transparent;
border: 1px solid var(--color-border, #CED3E2);
color: var(--color-text-primary, #12151F);
}
.input-produtor__btn--limpar:hover {
background: var(--color-bg-secondary, #F6F6F9);
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-produtor__btn--limpar:active {
transform: scale(0.98);
}
/* Botão Pesquisar (filled - disabled por padrão) */
.input-produtor__btn--pesquisar {
background: var(--color-bg-tertiary, #E6E8EF);
border: none;
color: var(--color-text-muted, #7A839F);
}
.input-produtor__btn--pesquisar:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.input-produtor__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-300, #CED3E2);
color: var(--color-text-primary, #12151F);
cursor: pointer;
}
.input-produtor__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
.input-produtor__btn--pesquisar:not(:disabled):active {
transform: scale(0.98);
}
/* Estado de loading */
.input-produtor__btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.input-produtor__btn--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-400);
border-radius: 50%;
border-top-color: var(--color-primary, #C90A0A);
animation: input-produtor-spinner 0.6s linear infinite;
}
@keyframes input-produtor-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-produtor__title,
[data-theme="dark"] .input-produtor__title {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-produtor__subtitle,
[data-theme="dark"] .input-produtor__subtitle {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-produtor__search-box,
[data-theme="dark"] .input-produtor__search-box {
background-color: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-700, #374151);
}
.dark .input-produtor__search-box:hover,
[data-theme="dark"] .input-produtor__search-box:hover {
border-color: var(--color-neutral-600, #4B5563);
}
.dark .input-produtor__search-box:focus-within,
[data-theme="dark"] .input-produtor__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.15);
}
.dark .input-produtor__icon,
[data-theme="dark"] .input-produtor__icon {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-produtor__input,
[data-theme="dark"] .input-produtor__input {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-produtor__input::placeholder,
[data-theme="dark"] .input-produtor__input::placeholder {
color: var(--color-neutral-500, #6B7280);
}
.dark .input-produtor__clear,
[data-theme="dark"] .input-produtor__clear {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-produtor__btn--limpar,
[data-theme="dark"] .input-produtor__btn--limpar {
border-color: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-300, #D1D5DB);
}
.dark .input-produtor__btn--limpar:hover,
[data-theme="dark"] .input-produtor__btn--limpar:hover {
background: var(--color-neutral-700, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
.dark .input-produtor__btn--pesquisar,
[data-theme="dark"] .input-produtor__btn--pesquisar {
background: var(--color-neutral-700, #374151);
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-produtor__btn--pesquisar:not(:disabled),
[data-theme="dark"] .input-produtor__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-produtor__btn--pesquisar:not(:disabled):hover,
[data-theme="dark"] .input-produtor__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
/* ============================================================
VARIAÇÕES DE LAYOUT
============================================================ */
/* Layout em duas colunas (para usar com card ao lado) */
.input-produtor--two-column {
max-width: 100%;
}
/* Versão compacta */
.input-produtor--compact {
gap: 24px;
}
.input-produtor--compact .input-produtor__header {
gap: 8px;
}
.input-produtor--compact .input-produtor__title {
font-size: 24px;
line-height: 32px;
}
.input-produtor--compact .input-produtor__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-produtor--compact .input-produtor__search-box {
height: 52px;
padding: 10px 14px;
}
.input-produtor--compact .input-produtor__input {
font-size: 16px;
line-height: 24px;
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-produtor {
max-width: 100%;
padding: 0 16px;
}
.input-produtor__title {
font-size: 24px;
line-height: 32px;
}
.input-produtor__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-produtor__search-box {
height: 56px;
padding: 10px 14px;
}
.input-produtor__input {
font-size: 16px;
line-height: 24px;
}
.input-produtor__actions {
gap: 12px;
}
.input-produtor__btn {
height: 44px; /* Área de toque adequada em mobile */
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* Focus visible */
.input-produtor__input:focus-visible {
outline: none;
}
.input-produtor__btn:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
}
.input-produtor__clear:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
border-radius: 2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-produtor__search-box {
border-width: 2px;
}
.input-produtor__btn {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-produtor__search-box,
.input-produtor__btn,
.input-produtor__clear {
transition: none;
}
.input-produtor__btn:active {
transform: none;
}
.input-produtor__btn--loading::after {
animation: none;
}
}
/* === extensions/input-propriedade.css === */
/**
* Design System - Input Propriedade Component
*
* Componente de busca de propriedade com:
* - Título e subtítulo centralizados
* - Campo de busca com ícone e botão limpar
* - Mensagem de validação/erro
* - Botões de ação (Limpar e Pesquisar)
* - Suporte a autocomplete com dropdown de resultados
* - Callback para seleção de propriedade
*
* Baseado no design Figma: Cadastros Agropecuários > Propriedade
* @version 1.0.0
* @date 2025-12-31
*/
/* ============================================================
INPUT PROPRIEDADE - CONTAINER PRINCIPAL
============================================================ */
/* Wrapper de centralização para uso em layouts de formulário/grid */
.input-propriedade-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 400px;
padding: 40px 20px;
box-sizing: border-box;
}
/* Centralização em colunas de grid do FormRenderer */
.form-row .input-propriedade-wrapper,
.form-group .input-propriedade-wrapper {
grid-column: 1 / -1; /* Ocupa toda a largura disponível */
}
.input-propriedade {
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
width: 100%;
max-width: 492px;
margin: 0 auto;
}
/* ============================================================
HEADER - TÍTULO E SUBTÍTULO
============================================================ */
.input-propriedade__header {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
width: 100%;
}
.input-propriedade__title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 40px;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.input-propriedade__subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: var(--color-text-secondary, #394360);
margin: 0;
}
/* ============================================================
INPUT CONTAINER - CAMPO DE BUSCA
============================================================ */
.input-propriedade__input-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
position: relative;
}
.input-propriedade__search-box {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-sizing: border-box;
transition: all var(--transition-base, 200ms ease-in-out);
}
.input-propriedade__search-box:hover {
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-propriedade__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1);
}
/* Estado de erro */
.input-propriedade__search-box--error {
border-color: var(--color-danger, #F17777);
}
.input-propriedade__search-box--error:focus-within {
border-color: var(--color-danger, #F17777);
box-shadow: 0 0 0 3px rgba(241, 119, 119, 0.1);
}
/* ============================================================
ÍCONE DE BUSCA
============================================================ */
.input-propriedade__icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-text-primary, #12151F);
}
.input-propriedade__search-box--error .input-propriedade__icon {
color: var(--color-primary, #C90A0A);
}
.input-propriedade__icon i,
.input-propriedade__icon .material-icons {
font-size: 20px;
line-height: 1;
}
/* ============================================================
INPUT FIELD
============================================================ */
.input-propriedade__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: var(--color-text-primary, #12151F);
}
.input-propriedade__input::placeholder {
color: var(--color-neutral-500, #7A839F);
}
/* ============================================================
BOTÃO LIMPAR INPUT (X)
============================================================ */
.input-propriedade__clear {
display: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-text-primary, #12151F);
transition: color var(--transition-fast, 150ms ease);
}
.input-propriedade__clear:hover {
color: var(--color-danger, #C90A0A);
}
.input-propriedade__search-box--error .input-propriedade__clear {
color: var(--color-primary, #C90A0A);
}
/* Mostrar quando input tem valor */
.input-propriedade__input:not(:placeholder-shown) ~ .input-propriedade__clear,
.input-propriedade__clear--visible {
display: flex;
}
.input-propriedade__clear i,
.input-propriedade__clear .material-icons {
font-size: 18px;
line-height: 1;
}
/* ============================================================
DROPDOWN DE RESULTADOS (AUTOCOMPLETE)
============================================================ */
.input-propriedade__dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.input-propriedade__dropdown--visible {
display: block;
}
.input-propriedade__dropdown-item {
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid var(--color-border-light, #F0F0F0);
transition: background-color var(--transition-fast, 150ms ease);
}
.input-propriedade__dropdown-item:last-child {
border-bottom: none;
}
.input-propriedade__dropdown-item:hover,
.input-propriedade__dropdown-item--highlighted {
background-color: var(--color-bg-secondary, #F6F6F9);
}
.input-propriedade__dropdown-item-label {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-text-primary, #12151F);
margin-bottom: 4px;
}
.input-propriedade__dropdown-item-details {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: var(--color-text-secondary, #394360);
}
.input-propriedade__dropdown-empty {
padding: 16px;
text-align: center;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-text-secondary, #394360);
}
/* ============================================================
MENSAGEM DE VALIDAÇÃO/ERRO
============================================================ */
.input-propriedade__message {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
margin: 0;
}
.input-propriedade__message--error {
color: var(--color-danger-dark, #970707);
}
.input-propriedade__message--success {
color: var(--color-success, #519000);
}
.input-propriedade__message--info {
color: var(--color-text-secondary, #394360);
}
/* ============================================================
BOTÕES DE AÇÃO
============================================================ */
.input-propriedade__actions {
display: flex;
gap: 20px;
width: 100%;
}
.input-propriedade__btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 8px 10px;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
white-space: nowrap;
}
/* Botão Limpar (outline) */
.input-propriedade__btn--limpar {
background: transparent;
border: 1px solid var(--color-border, #CED3E2);
color: var(--color-text-primary, #12151F);
}
.input-propriedade__btn--limpar:hover {
background: var(--color-bg-secondary, #F6F6F9);
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-propriedade__btn--limpar:active {
transform: scale(0.98);
}
/* Botão Pesquisar (filled - disabled por padrão) */
.input-propriedade__btn--pesquisar {
background: var(--color-bg-tertiary, #E6E8EF);
border: none;
color: var(--color-text-muted, #7A839F);
}
.input-propriedade__btn--pesquisar:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.input-propriedade__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-300, #CED3E2);
color: var(--color-text-primary, #12151F);
cursor: pointer;
}
.input-propriedade__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
.input-propriedade__btn--pesquisar:not(:disabled):active {
transform: scale(0.98);
}
/* Estado de loading */
.input-propriedade__btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.input-propriedade__btn--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-400);
border-radius: 50%;
border-top-color: var(--color-primary, #C90A0A);
animation: input-propriedade-spinner 0.6s linear infinite;
}
@keyframes input-propriedade-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ============================================================
DARK MODE
Seletores compatíveis com: html.dark, html.dark-mode, html[data-theme="dark"]
============================================================ */
html.dark .input-propriedade__title,
html.dark-mode .input-propriedade__title,
html[data-theme="dark"] .input-propriedade__title {
color: var(--color-text-primary, #F3F4F6);
}
html.dark .input-propriedade__subtitle,
html.dark-mode .input-propriedade__subtitle,
html[data-theme="dark"] .input-propriedade__subtitle {
color: var(--color-text-secondary, #9CA3AF);
}
html.dark .input-propriedade__search-box,
html.dark-mode .input-propriedade__search-box,
html[data-theme="dark"] .input-propriedade__search-box {
background-color: var(--color-bg-secondary, #1F2937);
border-color: var(--color-border, #374151);
}
html.dark .input-propriedade__search-box:hover,
html.dark-mode .input-propriedade__search-box:hover,
html[data-theme="dark"] .input-propriedade__search-box:hover {
border-color: var(--color-neutral-600, #4B5563);
}
html.dark .input-propriedade__search-box:focus-within,
html.dark-mode .input-propriedade__search-box:focus-within,
html[data-theme="dark"] .input-propriedade__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.15);
}
html.dark .input-propriedade__icon,
html.dark-mode .input-propriedade__icon,
html[data-theme="dark"] .input-propriedade__icon {
color: var(--color-text-primary, #F3F4F6);
}
html.dark .input-propriedade__input,
html.dark-mode .input-propriedade__input,
html[data-theme="dark"] .input-propriedade__input {
color: var(--color-text-primary, #F3F4F6);
}
html.dark .input-propriedade__input::placeholder,
html.dark-mode .input-propriedade__input::placeholder,
html[data-theme="dark"] .input-propriedade__input::placeholder {
color: var(--color-text-muted, #6B7280);
}
html.dark .input-propriedade__clear,
html.dark-mode .input-propriedade__clear,
html[data-theme="dark"] .input-propriedade__clear {
color: var(--color-text-primary, #F3F4F6);
}
html.dark .input-propriedade__dropdown,
html.dark-mode .input-propriedade__dropdown,
html[data-theme="dark"] .input-propriedade__dropdown {
background: #1F2937 !important;
background-color: #1F2937 !important;
border-color: #374151 !important;
}
html.dark .input-propriedade__dropdown-item,
html.dark-mode .input-propriedade__dropdown-item,
html[data-theme="dark"] .input-propriedade__dropdown-item {
border-bottom-color: #374151 !important;
}
html.dark .input-propriedade__dropdown-item:hover,
html.dark .input-propriedade__dropdown-item--highlighted,
html.dark-mode .input-propriedade__dropdown-item:hover,
html.dark-mode .input-propriedade__dropdown-item--highlighted,
html[data-theme="dark"] .input-propriedade__dropdown-item:hover,
html[data-theme="dark"] .input-propriedade__dropdown-item--highlighted {
background-color: #374151 !important;
}
html.dark .input-propriedade__dropdown-item-label,
html.dark-mode .input-propriedade__dropdown-item-label,
html[data-theme="dark"] .input-propriedade__dropdown-item-label {
color: #F3F4F6 !important;
}
html.dark .input-propriedade__dropdown-item-details,
html.dark-mode .input-propriedade__dropdown-item-details,
html[data-theme="dark"] .input-propriedade__dropdown-item-details {
color: #9CA3AF !important;
}
html.dark .input-propriedade__dropdown-empty,
html.dark-mode .input-propriedade__dropdown-empty,
html[data-theme="dark"] .input-propriedade__dropdown-empty {
color: #9CA3AF !important;
}
html.dark .input-propriedade__btn--limpar,
html.dark-mode .input-propriedade__btn--limpar,
html[data-theme="dark"] .input-propriedade__btn--limpar {
border-color: var(--color-border, #4B5563);
color: var(--color-text-primary, #D1D5DB);
}
html.dark .input-propriedade__btn--limpar:hover,
html.dark-mode .input-propriedade__btn--limpar:hover,
html[data-theme="dark"] .input-propriedade__btn--limpar:hover {
background: var(--color-bg-tertiary, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
html.dark .input-propriedade__btn--pesquisar,
html.dark-mode .input-propriedade__btn--pesquisar,
html[data-theme="dark"] .input-propriedade__btn--pesquisar {
background: var(--color-bg-tertiary, #374151);
color: var(--color-text-muted, #9CA3AF);
}
html.dark .input-propriedade__btn--pesquisar:not(:disabled),
html.dark-mode .input-propriedade__btn--pesquisar:not(:disabled),
html[data-theme="dark"] .input-propriedade__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-600, #4B5563);
color: var(--color-text-primary, #F3F4F6);
}
html.dark .input-propriedade__btn--pesquisar:not(:disabled):hover,
html.dark-mode .input-propriedade__btn--pesquisar:not(:disabled):hover,
html[data-theme="dark"] .input-propriedade__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
/* ============================================================
INFO CARD - PROPRIEDADE SELECIONADA
============================================================ */
/* Card de resumo da propriedade selecionada */
.input-propriedade__result-card {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 492px;
margin: 24px auto 0;
padding: 20px;
background: var(--color-success-light, #E8F5E9);
border: 1px solid var(--color-success, #4CAF50);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Header do card */
.input-propriedade__result-header {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 24px;
color: var(--color-success-dark, #2E7D32);
}
.input-propriedade__result-header .material-icons {
font-size: 24px;
color: var(--color-success, #4CAF50);
}
/* Lista de informações */
.input-propriedade__result-list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.input-propriedade__result-list li {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: var(--color-text-primary, #12151F);
padding: 4px 0;
}
.input-propriedade__result-list li strong {
font-weight: 600;
color: var(--color-text-primary, #12151F);
margin-right: 8px;
}
/* Dark mode - Result Card */
html.dark .input-propriedade__result-card,
html.dark-mode .input-propriedade__result-card,
html[data-theme="dark"] .input-propriedade__result-card {
background: rgba(76, 175, 80, 0.1);
border-color: var(--color-success, #4CAF50);
}
html.dark .input-propriedade__result-header,
html.dark-mode .input-propriedade__result-header,
html[data-theme="dark"] .input-propriedade__result-header {
color: var(--color-success-light, #81C784);
}
html.dark .input-propriedade__result-list li,
html.dark-mode .input-propriedade__result-list li,
html[data-theme="dark"] .input-propriedade__result-list li {
color: var(--color-text-primary, #E8E8E8);
}
html.dark .input-propriedade__result-list li strong,
html.dark-mode .input-propriedade__result-list li strong,
html[data-theme="dark"] .input-propriedade__result-list li strong {
color: var(--color-text-primary, #FFFFFF);
}
/* Responsivo */
@media (max-width: 768px) {
.input-propriedade__result-card {
max-width: 100%;
margin: 16px 0 0;
padding: 16px;
}
.input-propriedade__result-header {
font-size: 16px;
line-height: 22px;
}
.input-propriedade__result-list li {
font-size: 13px;
line-height: 20px;
}
}
/* ============================================================
VARIAÇÕES DE LAYOUT
============================================================ */
/* Layout em duas colunas (para usar com card ao lado) */
.input-propriedade--two-column {
max-width: 100%;
}
/* Versão compacta */
.input-propriedade--compact {
gap: 24px;
}
.input-propriedade--compact .input-propriedade__header {
gap: 8px;
}
.input-propriedade--compact .input-propriedade__title {
font-size: 24px;
line-height: 32px;
}
.input-propriedade--compact .input-propriedade__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-propriedade--compact .input-propriedade__search-box {
height: 52px;
padding: 10px 14px;
}
.input-propriedade--compact .input-propriedade__input {
font-size: 16px;
line-height: 24px;
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-propriedade {
max-width: 100%;
padding: 0 16px;
}
.input-propriedade__title {
font-size: 24px;
line-height: 32px;
}
.input-propriedade__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-propriedade__search-box {
height: 56px;
padding: 10px 14px;
}
.input-propriedade__input {
font-size: 16px;
line-height: 24px;
}
.input-propriedade__actions {
gap: 12px;
}
.input-propriedade__btn {
height: 44px; /* Área de toque adequada em mobile */
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* Focus visible */
.input-propriedade__input:focus-visible {
outline: none;
}
.input-propriedade__btn:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
}
.input-propriedade__clear:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
border-radius: 2px;
}
.input-propriedade__dropdown-item:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: -2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-propriedade__search-box {
border-width: 2px;
}
.input-propriedade__btn {
border-width: 2px;
}
.input-propriedade__dropdown {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-propriedade__search-box,
.input-propriedade__btn,
.input-propriedade__clear,
.input-propriedade__dropdown-item {
transition: none;
}
.input-propriedade__btn:active {
transform: none;
}
.input-propriedade__btn--loading::after {
animation: none;
}
}
/* === extensions/input-veterinario.css === */
/**
* Design System - Input Veterinario Component
*
* Componente de busca de veterinário habilitado com:
* - Título e subtítulo centralizados
* - Campo de busca com ícone e botão limpar
* - Mensagem de validação/erro
* - Botões de ação (Limpar e Pesquisar)
* - Suporte a autocomplete com dropdown de resultados
* - Callback para seleção de veterinário
* - Suporte a múltiplos tipos de busca (básico, completo, brucelose, recebedor)
*
* Baseado no design Figma: Cadastros Agropecuários > Propriedade
* @version 1.0.0
* @date 2025-01-28
*/
/* ============================================================
INPUT VETERINARIO - CONTAINER PRINCIPAL
============================================================ */
/* Wrapper de centralização para uso em layouts de formulário/grid */
.input-veterinario-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 400px;
padding: 40px 20px;
box-sizing: border-box;
}
/* Centralização em colunas de grid do FormRenderer */
.form-row .input-veterinario-wrapper,
.form-group .input-veterinario-wrapper {
grid-column: 1 / -1; /* Ocupa toda a largura disponível */
}
.input-veterinario {
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
width: 100%;
max-width: 492px;
margin: 0 auto;
}
/* ============================================================
HEADER - TÍTULO E SUBTÍTULO
============================================================ */
.input-veterinario__header {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
width: 100%;
}
.input-veterinario__title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 40px;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.input-veterinario__subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: var(--color-text-secondary, #394360);
margin: 0;
}
/* ============================================================
INPUT CONTAINER - CAMPO DE BUSCA
============================================================ */
.input-veterinario__input-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
position: relative;
}
.input-veterinario__search-box {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: var(--color-bg-secondary, #F6F6F9);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-sizing: border-box;
transition: all var(--transition-base, 200ms ease-in-out);
}
.input-veterinario__search-box:hover {
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-veterinario__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1);
}
/* Estado de erro */
.input-veterinario__search-box--error {
border-color: var(--color-danger, #F17777);
}
.input-veterinario__search-box--error:focus-within {
border-color: var(--color-danger, #F17777);
box-shadow: 0 0 0 3px rgba(241, 119, 119, 0.1);
}
/* ============================================================
ÍCONE DE BUSCA
============================================================ */
.input-veterinario__icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-text-primary, #12151F);
}
.input-veterinario__search-box--error .input-veterinario__icon {
color: var(--color-primary, #C90A0A);
}
.input-veterinario__icon i,
.input-veterinario__icon .material-icons {
font-size: 20px;
line-height: 1;
}
/* ============================================================
INPUT FIELD
============================================================ */
.input-veterinario__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: var(--color-text-primary, #12151F);
}
.input-veterinario__input::placeholder {
color: var(--color-neutral-500, #7A839F);
}
/* ============================================================
BOTÃO LIMPAR INPUT (X)
============================================================ */
.input-veterinario__clear {
display: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-text-primary, #12151F);
transition: color var(--transition-fast, 150ms ease);
}
.input-veterinario__clear:hover {
color: var(--color-danger, #C90A0A);
}
.input-veterinario__search-box--error .input-veterinario__clear {
color: var(--color-primary, #C90A0A);
}
/* Mostrar quando input tem valor */
.input-veterinario__input:not(:placeholder-shown) ~ .input-veterinario__clear,
.input-veterinario__clear--visible {
display: flex;
}
.input-veterinario__clear i,
.input-veterinario__clear .material-icons {
font-size: 18px;
line-height: 1;
}
/* ============================================================
DROPDOWN DE RESULTADOS (AUTOCOMPLETE)
============================================================ */
.input-veterinario__dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.input-veterinario__dropdown--visible {
display: block;
}
.input-veterinario__dropdown-item {
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid var(--color-border-light, #F0F0F0);
transition: background-color var(--transition-fast, 150ms ease);
}
.input-veterinario__dropdown-item:last-child {
border-bottom: none;
}
.input-veterinario__dropdown-item:hover,
.input-veterinario__dropdown-item--highlighted {
background-color: var(--color-bg-secondary, #F6F6F9);
}
.input-veterinario__dropdown-item-label {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-text-primary, #12151F);
margin-bottom: 4px;
}
.input-veterinario__dropdown-item-details {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: var(--color-text-secondary, #394360);
}
.input-veterinario__dropdown-empty {
padding: 16px;
text-align: center;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-text-secondary, #394360);
}
/* ============================================================
MENSAGEM DE VALIDAÇÃO/ERRO
============================================================ */
.input-veterinario__message {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
margin: 0;
}
.input-veterinario__message--error {
color: var(--color-danger-dark, #970707);
}
.input-veterinario__message--success {
color: var(--color-success, #519000);
}
.input-veterinario__message--info {
color: var(--color-text-secondary, #394360);
}
/* ============================================================
BOTÕES DE AÇÃO
============================================================ */
.input-veterinario__actions {
display: flex;
gap: 20px;
width: 100%;
}
.input-veterinario__btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 8px 10px;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
white-space: nowrap;
}
/* Botão Limpar (outline) */
.input-veterinario__btn--limpar {
background: transparent;
border: 1px solid var(--color-border, #CED3E2);
color: var(--color-text-primary, #12151F);
}
.input-veterinario__btn--limpar:hover {
background: var(--color-bg-secondary, #F6F6F9);
border-color: var(--color-neutral-400, #9CA3B9);
}
.input-veterinario__btn--limpar:active {
transform: scale(0.98);
}
/* Botão Pesquisar (filled - disabled por padrão) */
.input-veterinario__btn--pesquisar {
background: var(--color-bg-tertiary, #E6E8EF);
border: none;
color: var(--color-text-muted, #7A839F);
}
.input-veterinario__btn--pesquisar:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.input-veterinario__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-300, #CED3E2);
color: var(--color-text-primary, #12151F);
cursor: pointer;
}
.input-veterinario__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
.input-veterinario__btn--pesquisar:not(:disabled):active {
transform: scale(0.98);
}
/* Estado de loading */
.input-veterinario__btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.input-veterinario__btn--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid var(--color-neutral-400);
border-radius: 50%;
border-top-color: var(--color-primary, #C90A0A);
animation: input-veterinario-spinner 0.6s linear infinite;
}
@keyframes input-veterinario-spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ============================================================
DARK MODE
============================================================ */
.dark .input-veterinario__title,
[data-theme="dark"] .input-veterinario__title {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-veterinario__subtitle,
[data-theme="dark"] .input-veterinario__subtitle {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-veterinario__search-box,
[data-theme="dark"] .input-veterinario__search-box {
background-color: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-700, #374151);
}
.dark .input-veterinario__search-box:hover,
[data-theme="dark"] .input-veterinario__search-box:hover {
border-color: var(--color-neutral-600, #4B5563);
}
.dark .input-veterinario__search-box:focus-within,
[data-theme="dark"] .input-veterinario__search-box:focus-within {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.15);
}
.dark .input-veterinario__icon,
[data-theme="dark"] .input-veterinario__icon {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-veterinario__input,
[data-theme="dark"] .input-veterinario__input {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-veterinario__input::placeholder,
[data-theme="dark"] .input-veterinario__input::placeholder {
color: var(--color-neutral-500, #6B7280);
}
.dark .input-veterinario__clear,
[data-theme="dark"] .input-veterinario__clear {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-veterinario__dropdown,
[data-theme="dark"] .input-veterinario__dropdown {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-700, #374151);
}
.dark .input-veterinario__dropdown-item,
[data-theme="dark"] .input-veterinario__dropdown-item {
border-bottom-color: var(--color-neutral-700, #374151);
}
.dark .input-veterinario__dropdown-item:hover,
.dark .input-veterinario__dropdown-item--highlighted,
[data-theme="dark"] .input-veterinario__dropdown-item:hover,
[data-theme="dark"] .input-veterinario__dropdown-item--highlighted {
background-color: var(--color-neutral-700, #374151);
}
.dark .input-veterinario__dropdown-item-label,
[data-theme="dark"] .input-veterinario__dropdown-item-label {
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-veterinario__dropdown-item-details,
[data-theme="dark"] .input-veterinario__dropdown-item-details {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-veterinario__btn--limpar,
[data-theme="dark"] .input-veterinario__btn--limpar {
border-color: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-300, #D1D5DB);
}
.dark .input-veterinario__btn--limpar:hover,
[data-theme="dark"] .input-veterinario__btn--limpar:hover {
background: var(--color-neutral-700, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
.dark .input-veterinario__btn--pesquisar,
[data-theme="dark"] .input-veterinario__btn--pesquisar {
background: var(--color-neutral-700, #374151);
color: var(--color-neutral-400, #9CA3AF);
}
.dark .input-veterinario__btn--pesquisar:not(:disabled),
[data-theme="dark"] .input-veterinario__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-100, #F3F4F6);
}
.dark .input-veterinario__btn--pesquisar:not(:disabled):hover,
[data-theme="dark"] .input-veterinario__btn--pesquisar:not(:disabled):hover {
background: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
/* ============================================================
VARIAÇÕES DE LAYOUT
============================================================ */
/* Layout em duas colunas (para usar com card ao lado) */
.input-veterinario--two-column {
max-width: 100%;
}
/* Versão compacta */
.input-veterinario--compact {
gap: 24px;
}
.input-veterinario--compact .input-veterinario__header {
gap: 8px;
}
.input-veterinario--compact .input-veterinario__title {
font-size: 24px;
line-height: 32px;
}
.input-veterinario--compact .input-veterinario__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-veterinario--compact .input-veterinario__search-box {
height: 52px;
padding: 10px 14px;
}
.input-veterinario--compact .input-veterinario__input {
font-size: 16px;
line-height: 24px;
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.input-veterinario {
max-width: 100%;
padding: 0 16px;
}
.input-veterinario__title {
font-size: 24px;
line-height: 32px;
}
.input-veterinario__subtitle {
font-size: 14px;
line-height: 22px;
}
.input-veterinario__search-box {
height: 56px;
padding: 10px 14px;
}
.input-veterinario__input {
font-size: 16px;
line-height: 24px;
}
.input-veterinario__actions {
gap: 12px;
}
.input-veterinario__btn {
height: 44px; /* Área de toque adequada em mobile */
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
/* Focus visible */
.input-veterinario__input:focus-visible {
outline: none;
}
.input-veterinario__btn:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
}
.input-veterinario__clear:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
border-radius: 2px;
}
.input-veterinario__dropdown-item:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: -2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.input-veterinario__search-box {
border-width: 2px;
}
.input-veterinario__btn {
border-width: 2px;
}
.input-veterinario__dropdown {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.input-veterinario__search-box,
.input-veterinario__btn,
.input-veterinario__clear,
.input-veterinario__dropdown-item {
transition: none;
}
.input-veterinario__btn:active {
transform: none;
}
.input-veterinario__btn--loading::after {
animation: none;
}
}
/* ============================================================
DARK MODE - Media Query (prefers-color-scheme)
============================================================ */
@media (prefers-color-scheme: dark) {
.input-veterinario__title {
color: var(--color-text-primary, #F3F4F6);
}
.input-veterinario__subtitle {
color: var(--color-text-secondary, #9CA3AF);
}
.input-veterinario__search-box {
background-color: var(--color-bg-secondary, #1F2937);
border-color: var(--color-border, #374151);
}
.input-veterinario__search-box:hover {
border-color: var(--color-neutral-600, #4B5563);
}
.input-veterinario__icon {
color: var(--color-text-primary, #F3F4F6);
}
.input-veterinario__input {
color: var(--color-text-primary, #F3F4F6);
}
.input-veterinario__input::placeholder {
color: var(--color-text-muted, #6B7280);
}
.input-veterinario__clear {
color: var(--color-text-primary, #F3F4F6);
}
.input-veterinario__dropdown {
background: var(--color-bg-primary, #1F2937);
border-color: var(--color-border, #374151);
}
.input-veterinario__dropdown-item {
border-bottom-color: var(--color-border, #374151);
}
.input-veterinario__dropdown-item:hover,
.input-veterinario__dropdown-item--highlighted {
background-color: var(--color-bg-tertiary, #374151);
}
.input-veterinario__dropdown-item-label {
color: var(--color-text-primary, #F3F4F6);
}
.input-veterinario__dropdown-item-details {
color: var(--color-text-secondary, #9CA3AF);
}
.input-veterinario__btn--limpar {
border-color: var(--color-border, #4B5563);
color: var(--color-text-primary, #D1D5DB);
}
.input-veterinario__btn--limpar:hover {
background: var(--color-bg-tertiary, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
.input-veterinario__btn--pesquisar {
background: var(--color-bg-tertiary, #374151);
color: var(--color-text-muted, #9CA3AF);
}
.input-veterinario__btn--pesquisar:not(:disabled) {
background: var(--color-neutral-600, #4B5563);
color: var(--color-text-primary, #F3F4F6);
}
}
/* === extensions/multiselect-categorizado.css === */
/**
* MULTISELECT CATEGORIZADO COMPONENT
*
* Componente de selecao multipla com agrupamento por categoria.
* Reutiliza classes de checkbox.css para os items individuais.
*
* Estrutura:
* .multiselect-categorizado
* .ms-header
* .ms-body
* .ms-category
* .ms-category-header
* .ms-category-items
* .ms-item (usa .checkbox-group interno)
* .ms-footer
*
* @version 1.0.0
* @date 2026-03-11
* @requires checkbox.css
*/
/* ============================================
CONTAINER PRINCIPAL
============================================ */
.multiselect-categorizado {
display: flex;
flex-direction: column;
background: var(--color-text-light, #fff);
border: 1px solid var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-md, 8px);
overflow: hidden;
font-family: var(--font-body, 'Inter', sans-serif);
}
/* ============================================
HEADER
============================================ */
.ms-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
background: var(--color-neutral-50, #F6F6F9);
border-bottom: 1px solid var(--color-neutral-300, #E0E2EB);
}
.ms-label {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary, #1A1D26);
}
.ms-toggle-btn {
display: flex;
align-items: center;
gap: var(--spacing-xs, 4px);
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
background: transparent;
border: 1px solid var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-sm, 4px);
font-size: 12px;
color: var(--color-neutral-600, #6B7280);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
}
.ms-toggle-btn:hover {
background: var(--color-neutral-100, #F0F1F5);
border-color: var(--color-neutral-500, #9CA3AF);
}
.ms-toggle-btn i {
font-size: 14px;
transition: transform var(--transition-fast, 150ms ease);
}
.ms-toggle-btn.collapsed i {
transform: rotate(-90deg);
}
/* ============================================
BODY (AREA DE SCROLL)
============================================ */
.ms-body {
flex: 1;
overflow-y: auto;
max-height: 400px;
min-height: 200px;
}
/* Scrollbar customizada */
.ms-body::-webkit-scrollbar {
width: 8px;
}
.ms-body::-webkit-scrollbar-track {
background: var(--color-neutral-100, #F0F1F5);
}
.ms-body::-webkit-scrollbar-thumb {
background: var(--color-neutral-400, #C8CDDB);
border-radius: 4px;
}
.ms-body::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-500, #9CA3AF);
}
/* ============================================
CATEGORIA
============================================ */
.ms-category {
border-bottom: 1px solid var(--color-neutral-200, #E5E7EB);
}
.ms-category:last-child {
border-bottom: none;
}
.ms-category-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
background: var(--color-neutral-100, #F0F1F5);
cursor: pointer;
user-select: none;
transition: background var(--transition-fast, 150ms ease);
}
.ms-category-header:hover {
background: var(--color-neutral-200, #E5E7EB);
}
.ms-category-label {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
flex: 1;
}
/* Checkbox da categoria (marcar todos) */
.ms-category-checkbox {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.ms-category-checkbox input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 1;
}
.ms-category-checkbox-box {
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
background: var(--color-text-light, #fff);
border: 2px solid var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-xs, 3px);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast, 150ms ease);
}
.ms-category-checkbox input:checked + .ms-category-checkbox-box {
background: var(--color-accent-300, #3E68FB);
border-color: var(--color-accent-300, #3E68FB);
}
.ms-category-checkbox input:checked + .ms-category-checkbox-box::after {
content: '';
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* Estado indeterminate (parcialmente selecionado) */
.ms-category-checkbox input:indeterminate + .ms-category-checkbox-box {
background: var(--color-accent-300, #3E68FB);
border-color: var(--color-accent-300, #3E68FB);
}
.ms-category-checkbox input:indeterminate + .ms-category-checkbox-box::after {
content: '';
width: 10px;
height: 2px;
background: var(--color-text-light, #fff);
border-radius: 1px;
}
.ms-category-icon {
font-size: 14px;
color: var(--color-accent-300, #3E68FB);
}
.ms-category-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary, #1A1D26);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ms-category-count {
font-size: 12px;
font-weight: 500;
color: var(--color-neutral-500, #9CA3AF);
margin-left: var(--spacing-xs, 4px);
}
/* Botao selecionar todos da categoria */
.ms-category-select-all {
font-size: 11px;
color: var(--color-accent-300, #3E68FB);
background: transparent;
border: none;
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
cursor: pointer;
border-radius: var(--radius-sm, 4px);
transition: background var(--transition-fast, 150ms ease);
}
.ms-category-select-all:hover {
background: rgba(62, 104, 251, 0.1);
}
/* ============================================
ITEMS DA CATEGORIA
============================================ */
.ms-category-items {
padding: var(--spacing-sm, 8px) 0;
}
.ms-category.collapsed .ms-category-items {
display: none;
}
.ms-item {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
padding-left: calc(var(--spacing-lg, 16px) + 26px); /* Indentado */
cursor: pointer;
transition: background var(--transition-fast, 150ms ease);
}
.ms-item:hover {
background: var(--color-neutral-50, #F6F6F9);
}
.ms-item-checkbox {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.ms-item-checkbox input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 1;
}
.ms-item-checkbox-box {
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
background: var(--color-text-light, #fff);
border: 2px solid var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-xs, 3px);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast, 150ms ease);
}
.ms-item-checkbox input:checked + .ms-item-checkbox-box {
background: var(--color-accent-300, #3E68FB);
border-color: var(--color-accent-300, #3E68FB);
}
.ms-item-checkbox input:checked + .ms-item-checkbox-box::after {
content: '';
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.ms-item-checkbox input:disabled + .ms-item-checkbox-box {
background: var(--color-neutral-200, #E5E7EB);
border-color: var(--color-neutral-300, #D1D5DB);
cursor: not-allowed;
}
.ms-item-label {
font-size: 14px;
color: var(--color-text-primary, #1A1D26);
flex: 1;
}
.ms-item.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ms-item.disabled .ms-item-label {
color: var(--color-neutral-500, #9CA3AF);
}
/* ============================================
FOOTER
============================================ */
.ms-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
background: var(--color-neutral-50, #F6F6F9);
border-top: 1px solid var(--color-neutral-300, #E0E2EB);
}
.ms-counter {
font-size: 13px;
color: var(--color-neutral-600, #6B7280);
}
.ms-counter-number {
font-weight: 600;
color: var(--color-accent-300, #3E68FB);
}
.ms-clear-btn {
font-size: 12px;
color: var(--color-neutral-500, #9CA3AF);
background: transparent;
border: none;
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
cursor: pointer;
border-radius: var(--radius-sm, 4px);
transition: all var(--transition-fast, 150ms ease);
}
.ms-clear-btn:hover {
color: var(--color-danger, #E83A30);
background: rgba(232, 58, 48, 0.1);
}
/* ============================================
ESTADOS
============================================ */
/* Estado de erro */
.multiselect-categorizado.ms-error {
border-color: var(--color-danger, #E83A30);
}
.multiselect-categorizado.ms-error .ms-header {
background: rgba(232, 58, 48, 0.05);
}
/* Estado desabilitado */
.multiselect-categorizado.ms-disabled {
opacity: 0.6;
pointer-events: none;
}
/* Estado vazio */
.ms-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xl, 32px);
text-align: center;
color: var(--color-neutral-500, #9CA3AF);
}
.ms-empty-icon {
font-size: 32px;
opacity: 0.5;
margin-bottom: var(--spacing-sm, 8px);
}
.ms-empty-text {
font-size: 14px;
}
/* ============================================
DARK MODE
============================================ */
.dark .multiselect-categorizado,
[data-theme="dark"] .multiselect-categorizado {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-600, #4B5563);
}
.dark .ms-header,
[data-theme="dark"] .ms-header {
background: var(--color-neutral-700, #374151);
border-bottom-color: var(--color-neutral-600, #4B5563);
}
.dark .ms-label,
[data-theme="dark"] .ms-label {
color: var(--color-neutral-200, #E5E7EB);
}
.dark .ms-category-header,
[data-theme="dark"] .ms-category-header {
background: var(--color-neutral-700, #374151);
}
.dark .ms-category-header:hover,
[data-theme="dark"] .ms-category-header:hover {
background: var(--color-neutral-600, #4B5563);
}
.dark .ms-category-name,
[data-theme="dark"] .ms-category-name {
color: var(--color-neutral-200, #E5E7EB);
}
.dark .ms-item:hover,
[data-theme="dark"] .ms-item:hover {
background: var(--color-neutral-700, #374151);
}
.dark .ms-item-label,
[data-theme="dark"] .ms-item-label {
color: var(--color-neutral-300, #D1D5DB);
}
.dark .ms-category-checkbox-box,
.dark .ms-item-checkbox-box,
[data-theme="dark"] .ms-category-checkbox-box,
[data-theme="dark"] .ms-item-checkbox-box {
background: var(--color-neutral-700, #374151);
border-color: var(--color-neutral-500, #6B7280);
}
.dark .ms-footer,
[data-theme="dark"] .ms-footer {
background: var(--color-neutral-700, #374151);
border-top-color: var(--color-neutral-600, #4B5563);
}
.dark .ms-counter,
[data-theme="dark"] .ms-counter {
color: var(--color-neutral-400, #9CA3AF);
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.ms-body {
max-height: 300px;
}
.ms-header {
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
}
.ms-category-header {
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
}
.ms-item {
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
padding-left: calc(var(--spacing-md, 12px) + 20px);
}
}
/* ============================================
ANIMACOES
============================================ */
@keyframes ms-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.multiselect-categorizado.ms-loading .ms-body {
animation: ms-pulse 1.5s ease-in-out infinite;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.multiselect-categorizado,
.multiselect-categorizado * {
transition: none !important;
animation: none !important;
}
}
/* === extensions/profile-drawer.css === */
/**
* ============================================================================
* PROFILE DRAWER - DESIGN SYSTEM SIDASP
* ============================================================================
*
* Estilos específicos para o drawer de perfil do usuário.
* Baseado no Figma: Camada Perfil
*
* @version 1.0.0
* @author SIDASP Design System
*/
/* ============================================================================
PROFILE DRAWER CONTAINER
============================================================================ */
.profile-drawer {
display: flex;
flex-direction: column;
height: 100%;
}
.profile-drawer__content {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
}
/* ============================================================================
USER HEADER (Avatar + Name + Badge)
============================================================================ */
.profile-drawer__user-header {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-lg, 16px) 0 var(--spacing-xl, 24px);
text-align: center;
}
.profile-drawer__avatar-container {
position: relative;
margin-bottom: var(--spacing-lg, 16px);
}
.profile-drawer__avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-border-light, #ECEDF2);
}
.profile-drawer__avatar-edit {
position: absolute;
bottom: 0;
right: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-neutral-800, #12151F);
border: 2px solid var(--color-background, #FFFFFF);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
}
.profile-drawer__avatar-edit:hover {
background: var(--color-neutral-700, #1E2432);
transform: scale(1.1);
}
.profile-drawer__avatar-edit i {
color: var(--color-text-light, #FFFFFF);
font-size: 12px;
}
.profile-drawer__user-name {
font-family: var(--font-heading, 'Space Grotesk', sans-serif);
font-size: var(--font-size-h2, 24px);
font-weight: 600;
color: var(--color-text-primary, #12151F);
margin: 0 0 var(--spacing-md, 12px) 0;
line-height: 1.3;
}
.profile-drawer__badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: var(--color-neutral-100, #F3F4F6);
border-radius: var(--radius-full, 999px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
font-weight: 500;
color: var(--color-text-secondary, #4B5563);
}
/* ============================================================================
MENU ITEMS
============================================================================ */
.profile-drawer__menu {
display: flex;
flex-direction: column;
gap: var(--spacing-lg, 16px);
padding: 0;
}
.profile-drawer__menu-item {
display: flex;
align-items: center;
gap: var(--spacing-md, 12px);
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
background: var(--color-background, #FFFFFF);
border: 1px solid var(--color-border-light, #ECEDF2);
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
width: 100%;
}
.profile-drawer__menu-item:hover {
background: var(--color-bg-secondary, #F9FAFB);
border-color: var(--color-border, #CED3E2);
}
.profile-drawer__menu-item:active {
background: var(--color-bg-tertiary, #F3F4F6);
}
.profile-drawer__menu-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--color-text-muted, #7A839F);
font-size: 18px;
}
.profile-drawer__menu-item-text {
flex: 1;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
font-weight: 400;
color: var(--color-text-primary, #12151F);
}
.profile-drawer__menu-item-chevron {
color: var(--color-text-muted, #7A839F);
font-size: 12px;
}
/* Danger variant (Sair do sistema) */
.profile-drawer__menu-item--danger:hover {
background: rgba(201, 10, 10, 0.08);
}
.profile-drawer__menu-item--danger .profile-drawer__menu-item-icon,
.profile-drawer__menu-item--danger .profile-drawer__menu-item-text {
color: var(--color-danger, #C90A0A);
}
/* ============================================================================
FOOTER
============================================================================ */
.profile-drawer__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs, 4px);
padding: var(--spacing-xl, 24px);
border-top: 1px solid var(--color-border-light, #ECEDF2);
margin-top: auto;
}
.profile-drawer__footer-text {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
color: var(--color-text-muted, #7A839F);
margin: 0;
}
.profile-drawer__footer-version {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
color: var(--color-text-muted, #7A839F);
margin: 0;
}
/* ============================================================================
SUB-SCREENS
============================================================================ */
.profile-drawer__screen {
display: none;
flex-direction: column;
height: 100%;
}
.profile-drawer__screen.is-active {
display: flex;
}
.profile-drawer__screen-header {
display: flex;
align-items: center;
gap: var(--spacing-md, 12px);
padding-bottom: var(--spacing-lg, 16px);
margin-bottom: var(--spacing-lg, 16px);
border-bottom: 1px solid var(--color-border-light, #ECEDF2);
}
.profile-drawer__back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
border-radius: var(--radius-md, 8px);
cursor: pointer;
color: var(--color-text-muted, #7A839F);
transition: all 0.2s ease;
}
.profile-drawer__back-btn:hover {
background: var(--color-bg-secondary, #F9FAFB);
color: var(--color-text-primary, #12151F);
}
.profile-drawer__screen-title {
font-family: var(--font-heading, 'Space Grotesk', sans-serif);
font-size: var(--font-size-h3, 18px);
font-weight: 600;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.profile-drawer__screen-content {
flex: 1;
overflow-y: auto;
}
/* ============================================================================
MINHA CONTA SCREEN - FIELD CARDS
============================================================================ */
.profile-drawer__fields {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 12px);
}
.profile-drawer__field {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 4px);
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
background: var(--color-bg-secondary, #F9FAFB);
border-radius: var(--radius-md, 8px);
}
.profile-drawer__field-label {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
font-weight: 500;
color: var(--color-text-muted, #7A839F);
margin: 0;
}
.profile-drawer__field-value {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
font-weight: 400;
color: var(--color-text-primary, #12151F);
margin: 0;
word-break: break-word;
}
.profile-drawer__field-value a {
color: var(--color-primary, #3E68FB);
text-decoration: none;
}
.profile-drawer__field-value a:hover {
text-decoration: underline;
}
/* ============================================================================
TROCAR PERFIL SCREEN
============================================================================ */
.profile-drawer__select-wrapper {
margin-bottom: var(--spacing-xl, 24px);
}
.profile-drawer__select-wrapper label {
display: block;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
margin-bottom: var(--spacing-sm, 8px);
}
.profile-drawer__select-wrapper select {
width: 100%;
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
color: var(--color-text-primary, #12151F);
background: var(--color-background, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all 0.2s ease;
}
.profile-drawer__select-wrapper select:hover {
border-color: var(--color-border-hover, #B8BFC8);
}
.profile-drawer__select-wrapper select:focus {
outline: none;
border-color: var(--color-primary, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.15);
}
.profile-drawer__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 12px);
margin-top: auto;
padding-top: var(--spacing-xl, 24px);
}
.profile-drawer__btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm, 8px);
width: 100%;
height: 44px;
padding: 0 var(--spacing-lg, 16px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
font-weight: 600;
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.profile-drawer__btn--primary {
background: var(--color-neutral-800, #12151F);
color: var(--color-text-light, #FFFFFF);
}
.profile-drawer__btn--primary:hover {
background: var(--color-neutral-700, #1E2432);
}
.profile-drawer__btn--primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.profile-drawer__btn--secondary {
background: transparent;
color: var(--color-text-primary, #12151F);
border: 1px solid var(--color-border, #CED3E2);
}
.profile-drawer__btn--secondary:hover {
background: var(--color-bg-secondary, #F9FAFB);
}
/* ============================================================================
LOGIN GOOGLE SCREEN
============================================================================ */
.profile-drawer__oauth-section {
padding: var(--spacing-lg, 16px);
background: var(--color-bg-secondary, #F9FAFB);
border-radius: var(--radius-md, 8px);
margin-bottom: var(--spacing-lg, 16px);
}
.profile-drawer__oauth-title {
font-family: var(--font-heading, 'Space Grotesk', sans-serif);
font-size: var(--font-size-h4, 16px);
font-weight: 600;
color: var(--color-text-primary, #12151F);
margin: 0 0 var(--spacing-md, 12px) 0;
}
.profile-drawer__oauth-description {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p3, 14px);
color: var(--color-text-muted, #7A839F);
margin: 0 0 var(--spacing-lg, 16px) 0;
line-height: 1.5;
}
.profile-drawer__oauth-user {
display: flex;
align-items: center;
gap: var(--spacing-md, 12px);
padding: var(--spacing-md, 12px);
background: var(--color-background, #FFFFFF);
border-radius: var(--radius-md, 8px);
margin-bottom: var(--spacing-md, 12px);
}
.profile-drawer__oauth-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.profile-drawer__oauth-info {
flex: 1;
min-width: 0;
}
.profile-drawer__oauth-name {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-drawer__oauth-email {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
color: var(--color-text-muted, #7A839F);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-drawer__btn--google {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm, 8px);
width: 100%;
height: 44px;
padding: 0 var(--spacing-lg, 16px);
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
font-weight: 500;
background: var(--color-background, #FFFFFF);
color: var(--color-text-primary, #12151F);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all 0.2s ease;
}
.profile-drawer__btn--google:hover {
background: var(--color-bg-secondary, #F9FAFB);
border-color: var(--color-border-hover, #B8BFC8);
}
.profile-drawer__btn--google svg {
width: 18px;
height: 18px;
}
.profile-drawer__btn--disconnect {
background: transparent;
color: var(--color-danger, #C90A0A);
border: 1px solid var(--color-danger, #C90A0A);
}
.profile-drawer__btn--disconnect:hover {
background: rgba(201, 10, 10, 0.08);
}
/* ============================================================================
IMPERSONAR SCREEN
============================================================================ */
.profile-drawer__search-wrapper {
position: relative;
margin-bottom: var(--spacing-lg, 16px);
}
.profile-drawer__search-input {
width: 100%;
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
padding-left: 44px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
color: var(--color-text-primary, #12151F);
background: var(--color-background, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-md, 8px);
transition: all 0.2s ease;
}
.profile-drawer__search-input:focus {
outline: none;
border-color: var(--color-primary, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.15);
}
.profile-drawer__search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted, #7A839F);
font-size: 18px;
pointer-events: none;
}
.profile-drawer__user-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
max-height: 400px;
overflow-y: auto;
}
.profile-drawer__user-item {
display: flex;
align-items: center;
gap: var(--spacing-md, 12px);
padding: var(--spacing-md, 12px);
background: var(--color-bg-secondary, #F9FAFB);
border-radius: var(--radius-md, 8px);
cursor: pointer;
transition: all 0.2s ease;
border: none;
width: 100%;
text-align: left;
}
.profile-drawer__user-item:hover {
background: var(--color-bg-tertiary, #F3F4F6);
}
.profile-drawer__user-item-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-neutral-300, #CED3E2);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted, #7A839F);
font-size: 18px;
flex-shrink: 0;
}
.profile-drawer__user-item-info {
flex: 1;
min-width: 0;
}
.profile-drawer__user-item-name {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p2, 16px);
font-weight: 500;
color: var(--color-text-primary, #12151F);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-drawer__user-item-detail {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
color: var(--color-text-muted, #7A839F);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-drawer__no-results {
text-align: center;
padding: var(--spacing-xl, 24px);
color: var(--color-text-muted, #7A839F);
font-size: var(--font-size-p3, 14px);
}
.profile-drawer__warning {
display: flex;
align-items: flex-start;
gap: var(--spacing-md, 12px);
padding: var(--spacing-md, 12px);
background: rgba(245, 158, 11, 0.1);
border: 1px solid var(--color-warning, #F59E0B);
border-radius: var(--radius-md, 8px);
margin-bottom: var(--spacing-lg, 16px);
}
.profile-drawer__warning-icon {
color: var(--color-warning, #F59E0B);
font-size: 18px;
flex-shrink: 0;
}
.profile-drawer__warning-text {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: var(--font-size-p4, 13px);
color: var(--color-text-primary, #12151F);
margin: 0;
line-height: 1.5;
}
/* ============================================================================
DARK MODE
============================================================================ */
.dark .profile-drawer__user-name,
[data-theme="dark"] .profile-drawer__user-name,
body.dark-mode .profile-drawer__user-name {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__badge,
[data-theme="dark"] .profile-drawer__badge,
body.dark-mode .profile-drawer__badge {
background: var(--color-neutral-700, #1E2432);
color: var(--color-text-secondary, #9CA3AF);
}
.dark .profile-drawer__menu-item,
[data-theme="dark"] .profile-drawer__menu-item,
body.dark-mode .profile-drawer__menu-item {
background: var(--color-bg-tertiary, #1E2432);
border-color: var(--color-border, #212533);
}
.dark .profile-drawer__menu-item:hover,
[data-theme="dark"] .profile-drawer__menu-item:hover,
body.dark-mode .profile-drawer__menu-item:hover {
background: var(--color-neutral-700, #2A3142);
border-color: var(--color-border-hover, #2A3142);
}
.dark .profile-drawer__menu-item-text,
[data-theme="dark"] .profile-drawer__menu-item-text,
body.dark-mode .profile-drawer__menu-item-text {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__footer,
[data-theme="dark"] .profile-drawer__footer,
body.dark-mode .profile-drawer__footer {
border-top-color: var(--color-border, #212533);
}
.dark .profile-drawer__field,
[data-theme="dark"] .profile-drawer__field,
body.dark-mode .profile-drawer__field {
background: var(--color-bg-tertiary, #1E2432);
}
.dark .profile-drawer__field-value,
[data-theme="dark"] .profile-drawer__field-value,
body.dark-mode .profile-drawer__field-value {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__screen-title,
[data-theme="dark"] .profile-drawer__screen-title,
body.dark-mode .profile-drawer__screen-title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__screen-header,
[data-theme="dark"] .profile-drawer__screen-header,
body.dark-mode .profile-drawer__screen-header {
border-bottom-color: var(--color-border, #212533);
}
/* Select (Trocar Perfil) */
.dark .profile-drawer__select-wrapper label,
[data-theme="dark"] .profile-drawer__select-wrapper label,
body.dark-mode .profile-drawer__select-wrapper label {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__select-wrapper select,
[data-theme="dark"] .profile-drawer__select-wrapper select,
body.dark-mode .profile-drawer__select-wrapper select {
background-color: var(--color-neutral-700, #1E2432);
border-color: var(--color-neutral-600, #374151);
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__select-wrapper select:hover,
[data-theme="dark"] .profile-drawer__select-wrapper select:hover,
body.dark-mode .profile-drawer__select-wrapper select:hover {
border-color: var(--color-neutral-500, #4B5563);
}
.dark .profile-drawer__select-wrapper select:focus,
[data-theme="dark"] .profile-drawer__select-wrapper select:focus,
body.dark-mode .profile-drawer__select-wrapper select:focus {
border-color: var(--color-primary, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.25);
}
.dark .profile-drawer__select-wrapper select option,
[data-theme="dark"] .profile-drawer__select-wrapper select option,
body.dark-mode .profile-drawer__select-wrapper select option {
background-color: var(--color-neutral-700, #1E2432);
color: var(--color-text-primary, #E5E7EB);
}
/* OAuth Section (Login Google) */
.dark .profile-drawer__oauth-section,
[data-theme="dark"] .profile-drawer__oauth-section,
body.dark-mode .profile-drawer__oauth-section {
background: var(--color-bg-tertiary, #1E2432);
}
.dark .profile-drawer__oauth-title,
[data-theme="dark"] .profile-drawer__oauth-title,
body.dark-mode .profile-drawer__oauth-title {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__oauth-description,
[data-theme="dark"] .profile-drawer__oauth-description,
body.dark-mode .profile-drawer__oauth-description {
color: var(--color-text-muted, #9CA3AF);
}
.dark .profile-drawer__oauth-user,
[data-theme="dark"] .profile-drawer__oauth-user,
body.dark-mode .profile-drawer__oauth-user {
background: var(--color-neutral-700, #374151);
}
.dark .profile-drawer__oauth-name,
[data-theme="dark"] .profile-drawer__oauth-name,
body.dark-mode .profile-drawer__oauth-name {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__oauth-email,
[data-theme="dark"] .profile-drawer__oauth-email,
body.dark-mode .profile-drawer__oauth-email {
color: var(--color-text-muted, #9CA3AF);
}
.dark .profile-drawer__btn--google,
[data-theme="dark"] .profile-drawer__btn--google,
body.dark-mode .profile-drawer__btn--google {
background: var(--color-neutral-700, #1E2432);
color: var(--color-text-primary, #E5E7EB);
border-color: var(--color-neutral-600, #374151);
}
.dark .profile-drawer__btn--google:hover,
[data-theme="dark"] .profile-drawer__btn--google:hover,
body.dark-mode .profile-drawer__btn--google:hover {
background: var(--color-neutral-600, #374151);
border-color: var(--color-neutral-500, #4B5563);
}
/* Search Input (Impersonar) */
.dark .profile-drawer__search-input,
[data-theme="dark"] .profile-drawer__search-input,
body.dark-mode .profile-drawer__search-input {
background: var(--color-neutral-700, #1E2432);
border-color: var(--color-neutral-600, #374151);
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__search-input::placeholder,
[data-theme="dark"] .profile-drawer__search-input::placeholder,
body.dark-mode .profile-drawer__search-input::placeholder {
color: var(--color-text-muted, #6B7280);
}
.dark .profile-drawer__search-input:focus,
[data-theme="dark"] .profile-drawer__search-input:focus,
body.dark-mode .profile-drawer__search-input:focus {
border-color: var(--color-primary, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.25);
}
/* User List (Impersonar) */
.dark .profile-drawer__user-item,
[data-theme="dark"] .profile-drawer__user-item,
body.dark-mode .profile-drawer__user-item {
background: var(--color-bg-tertiary, #1E2432);
}
.dark .profile-drawer__user-item:hover,
[data-theme="dark"] .profile-drawer__user-item:hover,
body.dark-mode .profile-drawer__user-item:hover {
background: var(--color-neutral-700, #374151);
}
.dark .profile-drawer__user-item-name,
[data-theme="dark"] .profile-drawer__user-item-name,
body.dark-mode .profile-drawer__user-item-name {
color: var(--color-text-primary, #E5E7EB);
}
.dark .profile-drawer__user-item-detail,
[data-theme="dark"] .profile-drawer__user-item-detail,
body.dark-mode .profile-drawer__user-item-detail {
color: var(--color-text-muted, #9CA3AF);
}
.dark .profile-drawer__user-item-avatar,
[data-theme="dark"] .profile-drawer__user-item-avatar,
body.dark-mode .profile-drawer__user-item-avatar {
background: var(--color-neutral-600, #374151);
color: var(--color-text-muted, #9CA3AF);
}
.dark .profile-drawer__no-results,
[data-theme="dark"] .profile-drawer__no-results,
body.dark-mode .profile-drawer__no-results {
color: var(--color-text-muted, #9CA3AF);
}
/* Warning (Impersonar) */
.dark .profile-drawer__warning,
[data-theme="dark"] .profile-drawer__warning,
body.dark-mode .profile-drawer__warning {
background: rgba(245, 158, 11, 0.15);
border-color: var(--color-warning, #F59E0B);
}
.dark .profile-drawer__warning-text,
[data-theme="dark"] .profile-drawer__warning-text,
body.dark-mode .profile-drawer__warning-text {
color: var(--color-text-primary, #E5E7EB);
}
/* Buttons */
.dark .profile-drawer__btn--secondary,
[data-theme="dark"] .profile-drawer__btn--secondary,
body.dark-mode .profile-drawer__btn--secondary {
background: transparent;
color: var(--color-text-primary, #E5E7EB);
border-color: var(--color-neutral-600, #374151);
}
.dark .profile-drawer__btn--secondary:hover,
[data-theme="dark"] .profile-drawer__btn--secondary:hover,
body.dark-mode .profile-drawer__btn--secondary:hover {
background: var(--color-neutral-700, #1E2432);
border-color: var(--color-neutral-500, #4B5563);
}
.dark .profile-drawer__btn--primary,
[data-theme="dark"] .profile-drawer__btn--primary,
body.dark-mode .profile-drawer__btn--primary {
background: var(--color-primary, #3E68FB);
color: #FFFFFF;
}
.dark .profile-drawer__btn--primary:hover,
[data-theme="dark"] .profile-drawer__btn--primary:hover,
body.dark-mode .profile-drawer__btn--primary:hover {
background: var(--color-primary-dark, #2D52D9);
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 640px) {
.profile-drawer__avatar {
width: 80px;
height: 80px;
}
.profile-drawer__user-name {
font-size: var(--font-size-h3, 20px);
}
}
/* === extensions/repeater-funcionario.css === */
/**
* REPEATER FUNCIONARIO COMPONENT
*
* Componente para adicionar/remover multiplos funcionarios com lotacao.
* Reutiliza classes de card.css, badge.css, button.css do Design System.
*
* Estrutura:
* .repeater-funcionario
* .repeater-header
* .repeater-items
* .repeater-item (.card)
* .repeater-item-header
* .repeater-item-body
* .repeater-add-btn
*
* @version 1.0.0
* @date 2026-03-11
* @requires card.css, badge.css, button.css, fk-v2.css
*/
/* ============================================
CONTAINER PRINCIPAL
============================================ */
.repeater-funcionario {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 12px);
font-family: var(--font-body, 'Inter', sans-serif);
}
/* ============================================
HEADER
============================================ */
.repeater-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-sm, 8px);
}
.repeater-label {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary, #1A1D26);
}
.repeater-counter {
font-size: 12px;
font-weight: 500;
color: var(--color-neutral-500, #9CA3AF);
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
background: var(--color-neutral-100, #F0F1F5);
border-radius: var(--radius-sm, 4px);
}
.repeater-counter .count {
font-weight: 700;
color: var(--color-accent-300, #3E68FB);
}
/* ============================================
CONTAINER DOS ITEMS
============================================ */
.repeater-items {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 12px);
}
.repeater-items:empty::before {
content: 'Nenhum funcionario adicionado';
display: block;
padding: var(--spacing-lg, 16px);
text-align: center;
color: var(--color-neutral-500, #9CA3AF);
font-style: italic;
}
/* ============================================
ITEM INDIVIDUAL
============================================ */
.repeater-item {
background: var(--color-text-light, #fff);
border: 1px solid var(--color-neutral-300, #E0E2EB);
border-radius: var(--radius-md, 8px);
padding: var(--spacing-lg, 16px);
transition: all var(--transition-fast, 150ms ease);
}
.repeater-item:hover {
border-color: var(--color-neutral-400, #C8CDDB);
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.repeater-item:focus-within {
border-color: var(--color-accent-300, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.15);
}
/* ============================================
HEADER DO ITEM
============================================ */
.repeater-item-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-md, 12px);
padding-bottom: var(--spacing-sm, 8px);
border-bottom: 1px solid var(--color-neutral-200, #E5E7EB);
}
/* ============================================
BADGES DE PAPEL
============================================ */
.repeater-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs, 4px);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
border-radius: var(--radius-sm, 4px);
}
.repeater-badge--responsavel {
background: var(--color-accent-300, #3E68FB);
color: var(--color-text-light, #fff);
}
.repeater-badge--responsavel::before {
content: '\f005'; /* star icon */
font-family: 'Material Design Icons';
font-size: 12px;
}
.repeater-badge--colaborador {
background: var(--color-neutral-200, #E5E7EB);
color: var(--color-neutral-700, #374151);
}
.repeater-badge--colaborador::before {
content: '\f004'; /* user icon */
font-family: 'Material Design Icons';
font-size: 12px;
}
/* ============================================
BOTAO REMOVER
============================================ */
.repeater-remove-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm, 4px);
color: var(--color-neutral-500, #9CA3AF);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
}
.repeater-remove-btn:hover:not(:disabled) {
background: rgba(232, 58, 48, 0.1);
border-color: var(--color-danger, #E83A30);
color: var(--color-danger, #E83A30);
}
.repeater-remove-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
visibility: hidden;
}
.repeater-remove-btn .icon,
.repeater-remove-btn i {
font-size: 16px;
}
/* ============================================
CORPO DO ITEM
============================================ */
.repeater-item-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md, 12px);
}
/* ============================================
CAMPOS
============================================ */
.repeater-field {
display: flex;
flex-direction: column;
}
.repeater-field label {
display: block;
margin-bottom: var(--spacing-xs, 4px);
font-size: 12px;
font-weight: 500;
color: var(--color-neutral-600, #6B7280);
}
.repeater-field label.required::after {
content: ' *';
color: var(--color-danger, #E83A30);
}
/* FK Input no repeater */
.repeater-field .fk-input {
width: 100%;
}
/* Select no repeater */
.repeater-field select {
width: 100%;
height: 40px;
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
background: var(--color-text-light, #fff);
border: 1px solid var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-sm, 4px);
font-size: 14px;
color: var(--color-text-primary, #1A1D26);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 20px;
padding-right: 32px;
}
.repeater-field select:hover {
border-color: var(--color-neutral-500, #9CA3AF);
}
.repeater-field select:focus {
outline: none;
border-color: var(--color-accent-300, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.15);
}
.repeater-field select:disabled {
background: var(--color-neutral-100, #F0F1F5);
color: var(--color-neutral-500, #9CA3AF);
cursor: not-allowed;
}
/* ============================================
BOTAO ADICIONAR
============================================ */
.repeater-add-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm, 8px);
width: 100%;
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
background: var(--color-text-light, #fff);
border: 2px dashed var(--color-neutral-400, #C8CDDB);
border-radius: var(--radius-md, 8px);
font-size: 14px;
font-weight: 500;
color: var(--color-neutral-600, #6B7280);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
}
.repeater-add-btn:hover:not(:disabled) {
border-color: var(--color-accent-300, #3E68FB);
color: var(--color-accent-300, #3E68FB);
background: rgba(62, 104, 251, 0.05);
}
.repeater-add-btn:focus {
outline: none;
border-color: var(--color-accent-300, #3E68FB);
box-shadow: 0 0 0 3px rgba(62, 104, 251, 0.15);
}
.repeater-add-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
display: none;
}
.repeater-add-btn .icon {
font-size: 18px;
font-weight: 700;
}
/* ============================================
ESTADOS
============================================ */
/* Estado de erro */
.repeater-funcionario.repeater-error .repeater-items {
padding: var(--spacing-sm, 8px);
border: 1px solid var(--color-danger, #E83A30);
border-radius: var(--radius-md, 8px);
background: rgba(232, 58, 48, 0.02);
}
.repeater-item.item-error {
border-color: var(--color-danger, #E83A30);
background: rgba(232, 58, 48, 0.02);
}
.repeater-error-message {
margin-top: var(--spacing-sm, 8px);
font-size: 12px;
color: var(--color-danger, #E83A30);
}
/* Estado desabilitado */
.repeater-funcionario.repeater-disabled {
opacity: 0.6;
pointer-events: none;
}
/* Estado loading */
.repeater-funcionario.repeater-loading .repeater-items {
opacity: 0.5;
}
.repeater-funcionario.repeater-loading .repeater-add-btn {
pointer-events: none;
}
/* ============================================
DARK MODE
============================================ */
.dark .repeater-funcionario,
[data-theme="dark"] .repeater-funcionario {
/* Label e textos */
}
.dark .repeater-label,
[data-theme="dark"] .repeater-label {
color: var(--color-neutral-200, #E5E7EB);
}
.dark .repeater-counter,
[data-theme="dark"] .repeater-counter {
background: var(--color-neutral-700, #374151);
color: var(--color-neutral-400, #9CA3AF);
}
.dark .repeater-item,
[data-theme="dark"] .repeater-item {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-600, #4B5563);
}
.dark .repeater-item:hover,
[data-theme="dark"] .repeater-item:hover {
border-color: var(--color-neutral-500, #6B7280);
}
.dark .repeater-item-header,
[data-theme="dark"] .repeater-item-header {
border-bottom-color: var(--color-neutral-600, #4B5563);
}
.dark .repeater-badge--colaborador,
[data-theme="dark"] .repeater-badge--colaborador {
background: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-200, #E5E7EB);
}
.dark .repeater-field label,
[data-theme="dark"] .repeater-field label {
color: var(--color-neutral-400, #9CA3AF);
}
.dark .repeater-field select,
[data-theme="dark"] .repeater-field select {
background: var(--color-neutral-700, #374151);
border-color: var(--color-neutral-500, #6B7280);
color: var(--color-neutral-200, #E5E7EB);
}
.dark .repeater-add-btn,
[data-theme="dark"] .repeater-add-btn {
background: var(--color-neutral-800, #1F2937);
border-color: var(--color-neutral-600, #4B5563);
color: var(--color-neutral-400, #9CA3AF);
}
.dark .repeater-add-btn:hover:not(:disabled),
[data-theme="dark"] .repeater-add-btn:hover:not(:disabled) {
background: rgba(62, 104, 251, 0.1);
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.repeater-item-body {
grid-template-columns: 1fr;
}
.repeater-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs, 4px);
}
.repeater-item {
padding: var(--spacing-md, 12px);
}
.repeater-add-btn {
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
}
}
/* ============================================
ANIMACOES
============================================ */
@keyframes repeater-item-enter {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes repeater-item-exit {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
height: 0;
padding: 0;
margin: 0;
border: 0;
}
}
.repeater-item.entering {
animation: repeater-item-enter 0.2s ease-out;
}
.repeater-item.exiting {
animation: repeater-item-exit 0.2s ease-out forwards;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.repeater-funcionario,
.repeater-funcionario * {
transition: none !important;
animation: none !important;
}
}
/* === extensions/severidade.css === */
/**
* Design System - Severidade Badge
*
* Componente para exibir niveis de severidade (0-10) com peso visual progressivo.
* O numero fica mais "gordinho" (bold + stretch) conforme aumenta a severidade.
* Usa cores de fundo sutis que variam de verde (baixa) para vermelho (alta).
*
* @version 1.1.0
* @date 2026-02-02
*/
/* ==========================================================================
Severidade Badge - Base
========================================================================== */
.severidade-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 32px;
padding: 4px 12px;
border-radius: 6px;
font-family: 'Inter', 'Space Grotesk', sans-serif;
font-size: 16px;
line-height: 1;
text-align: center;
transition: all 0.15s ease;
/* Herda a cor do texto do contexto (tabela/grid) */
color: var(--color-text-primary, inherit);
}
.severidade-badge__value {
display: inline-block;
/* Herda a cor do texto do contexto */
color: inherit;
}
/* ==========================================================================
Severidade Badge - Niveis (0-10)
Progressao:
- font-weight: 400 -> 900 (mais bold)
- transform: scaleX(1.0) -> scaleX(1.4) (mais largo/gordinho)
- background: verde sutil -> amarelo sutil -> vermelho sutil
========================================================================== */
/* Nivel 0 - Minimo (verde claro, fino) */
.severidade-badge--level-0 {
background-color: rgba(81, 144, 0, 0.12);
}
.severidade-badge--level-0 .severidade-badge__value {
font-weight: 400;
transform: scaleX(1.0);
}
/* Nivel 1 */
.severidade-badge--level-1 {
background-color: rgba(81, 144, 0, 0.14);
}
.severidade-badge--level-1 .severidade-badge__value {
font-weight: 450;
transform: scaleX(1.04);
}
/* Nivel 2 */
.severidade-badge--level-2 {
background-color: rgba(116, 193, 55, 0.16);
}
.severidade-badge--level-2 .severidade-badge__value {
font-weight: 500;
transform: scaleX(1.08);
}
/* Nivel 3 */
.severidade-badge--level-3 {
background-color: rgba(180, 200, 50, 0.18);
}
.severidade-badge--level-3 .severidade-badge__value {
font-weight: 550;
transform: scaleX(1.12);
}
/* Nivel 4 */
.severidade-badge--level-4 {
background-color: rgba(210, 190, 30, 0.20);
}
.severidade-badge--level-4 .severidade-badge__value {
font-weight: 600;
transform: scaleX(1.16);
}
/* Nivel 5 - Medio (amarelo) */
.severidade-badge--level-5 {
background-color: rgba(233, 189, 0, 0.22);
}
.severidade-badge--level-5 .severidade-badge__value {
font-weight: 650;
transform: scaleX(1.20);
}
/* Nivel 6 */
.severidade-badge--level-6 {
background-color: rgba(240, 160, 30, 0.24);
}
.severidade-badge--level-6 .severidade-badge__value {
font-weight: 700;
transform: scaleX(1.24);
}
/* Nivel 7 */
.severidade-badge--level-7 {
background-color: rgba(240, 120, 50, 0.26);
}
.severidade-badge--level-7 .severidade-badge__value {
font-weight: 750;
transform: scaleX(1.28);
}
/* Nivel 8 */
.severidade-badge--level-8 {
background-color: rgba(230, 80, 50, 0.28);
}
.severidade-badge--level-8 .severidade-badge__value {
font-weight: 800;
transform: scaleX(1.32);
}
/* Nivel 9 */
.severidade-badge--level-9 {
background-color: rgba(210, 50, 50, 0.30);
}
.severidade-badge--level-9 .severidade-badge__value {
font-weight: 850;
transform: scaleX(1.36);
}
/* Nivel 10 - Maximo (vermelho forte, muito bold e largo) */
.severidade-badge--level-10 {
background-color: rgba(190, 30, 30, 0.35);
}
.severidade-badge--level-10 .severidade-badge__value {
font-weight: 900;
transform: scaleX(1.40);
}
/* ==========================================================================
Dark Mode - Apenas ajusta opacidade do background
A cor do texto é herdada automaticamente via --color-text-primary
========================================================================== */
html.dark .severidade-badge--level-0,
html.dark-mode .severidade-badge--level-0,
[data-theme="dark"] .severidade-badge--level-0 {
background-color: rgba(81, 144, 0, 0.25);
}
html.dark .severidade-badge--level-1,
html.dark-mode .severidade-badge--level-1,
[data-theme="dark"] .severidade-badge--level-1 {
background-color: rgba(81, 144, 0, 0.27);
}
html.dark .severidade-badge--level-2,
html.dark-mode .severidade-badge--level-2,
[data-theme="dark"] .severidade-badge--level-2 {
background-color: rgba(116, 193, 55, 0.28);
}
html.dark .severidade-badge--level-3,
html.dark-mode .severidade-badge--level-3,
[data-theme="dark"] .severidade-badge--level-3 {
background-color: rgba(180, 200, 50, 0.30);
}
html.dark .severidade-badge--level-4,
html.dark-mode .severidade-badge--level-4,
[data-theme="dark"] .severidade-badge--level-4 {
background-color: rgba(210, 190, 30, 0.32);
}
html.dark .severidade-badge--level-5,
html.dark-mode .severidade-badge--level-5,
[data-theme="dark"] .severidade-badge--level-5 {
background-color: rgba(233, 189, 0, 0.35);
}
html.dark .severidade-badge--level-6,
html.dark-mode .severidade-badge--level-6,
[data-theme="dark"] .severidade-badge--level-6 {
background-color: rgba(240, 160, 30, 0.37);
}
html.dark .severidade-badge--level-7,
html.dark-mode .severidade-badge--level-7,
[data-theme="dark"] .severidade-badge--level-7 {
background-color: rgba(240, 120, 50, 0.40);
}
html.dark .severidade-badge--level-8,
html.dark-mode .severidade-badge--level-8,
[data-theme="dark"] .severidade-badge--level-8 {
background-color: rgba(230, 80, 50, 0.42);
}
html.dark .severidade-badge--level-9,
html.dark-mode .severidade-badge--level-9,
[data-theme="dark"] .severidade-badge--level-9 {
background-color: rgba(210, 50, 50, 0.45);
}
html.dark .severidade-badge--level-10,
html.dark-mode .severidade-badge--level-10,
[data-theme="dark"] .severidade-badge--level-10 {
background-color: rgba(190, 30, 30, 0.50);
}
/* ==========================================================================
Contexto de Tabela - Garante heranca de cor
========================================================================== */
table td .severidade-badge,
.gales-listing__table-cell .severidade-badge {
margin: 0;
/* Herda cor do texto da celula da tabela */
color: inherit;
}
table td .severidade-badge__value,
.gales-listing__table-cell .severidade-badge__value {
color: inherit;
}
/* === extensions/sidebar-attachments.css === */
/**
* ============================================================================
* SIDEBAR ATTACHMENTS COMPONENT - DESIGN SYSTEM SIDASP
* ============================================================================
*
* Componente para upload de arquivos na sidebar direita do stepper.
* Funciona como alternativa aos campos de arquivo no form principal,
* otimizando espaço e mantendo a experiência consistente com o FK.
*
* @version 1.0.0
* @author SIDASP Design System
* @see RIGHT_SIDEBAR_STEPPER.md
*/
/* ============================================================================
CONTAINER PRINCIPAL
============================================================================ */
.sidebar-attachments {
background: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-lg, 10px);
overflow: hidden;
margin-bottom: var(--spacing-4, 16px);
}
/* ============================================================================
HEADER
============================================================================ */
.sidebar-attachments__header {
padding: var(--spacing-4, 16px);
background: var(--color-bg-secondary, #F6F6F9);
border-bottom: 1px solid var(--color-border, #CED3E2);
}
.sidebar-attachments__title-row {
display: flex;
align-items: center;
gap: var(--spacing-2, 8px);
}
.sidebar-attachments__icon {
font-size: 20px;
color: var(--color-primary, #C90A0A);
}
.sidebar-attachments__title {
margin: 0;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary, #12151F);
line-height: 1.4;
}
.sidebar-attachments__description {
margin: var(--spacing-2, 8px) 0 0 0;
font-size: 12px;
color: var(--color-text-secondary, #7A839F);
line-height: 1.4;
}
/* ============================================================================
BODY
============================================================================ */
.sidebar-attachments__body {
padding: var(--spacing-3, 12px);
display: flex;
flex-direction: column;
gap: var(--spacing-3, 12px);
}
/* ============================================================================
CAMPO DE ARQUIVO INDIVIDUAL
============================================================================ */
.sidebar-attachment-field {
display: flex;
flex-direction: column;
gap: var(--spacing-1, 4px);
}
.sidebar-attachment-field__label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--color-text-primary, #12151F);
line-height: 1.4;
}
.sidebar-attachment-field__required {
color: var(--color-danger, #DC2626);
}
.sidebar-attachment-field__help {
font-size: 11px;
color: var(--color-text-muted, #7A839F);
line-height: 1.3;
}
/* ============================================================================
DROPZONE
============================================================================ */
.sidebar-attachment-field__dropzone {
position: relative;
border: 2px dashed var(--color-border, #CED3E2);
border-radius: var(--radius-md, 6px);
background: var(--color-bg-primary, #FFFFFF);
transition: all 0.2s ease;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-attachment-field__dropzone:hover {
border-color: var(--color-primary, #C90A0A);
background: rgba(201, 10, 10, 0.02);
}
.sidebar-attachment-field__dropzone.is-dragover {
border-color: var(--color-primary, #C90A0A);
background: rgba(201, 10, 10, 0.05);
border-style: solid;
}
.sidebar-attachment-field__dropzone.has-file {
border-style: solid;
border-color: var(--color-success, #16A34A);
background: rgba(22, 163, 74, 0.02);
}
/* Input invisível mas acessível */
.sidebar-attachment-field__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
/* Conteúdo visual do dropzone */
.sidebar-attachment-field__dropzone-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-3, 12px);
text-align: center;
pointer-events: none;
}
.sidebar-attachment-field__dropzone-icon {
font-size: 28px;
color: var(--color-text-muted, #7A839F);
margin-bottom: var(--spacing-1, 4px);
}
.sidebar-attachment-field__dropzone:hover .sidebar-attachment-field__dropzone-icon {
color: var(--color-primary, #C90A0A);
}
.sidebar-attachment-field__dropzone-text {
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary, #394360);
}
.sidebar-attachment-field__dropzone-hint {
font-size: 10px;
color: var(--color-text-muted, #7A839F);
margin-top: 2px;
}
/* ============================================================================
PREVIEW DO ARQUIVO SELECIONADO
============================================================================ */
.sidebar-attachment-field__preview {
display: flex;
align-items: center;
gap: var(--spacing-2, 8px);
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
background: var(--color-bg-secondary, #F6F6F9);
border-radius: var(--radius-sm, 4px);
width: 100%;
box-sizing: border-box;
}
.sidebar-attachment-field__preview-icon {
font-size: 20px;
color: var(--color-success, #16A34A);
flex-shrink: 0;
}
.sidebar-attachment-field__preview-name {
flex: 1;
font-size: 12px;
font-weight: 500;
color: var(--color-text-primary, #12151F);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-attachment-field__preview-remove {
flex-shrink: 0;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--radius-sm, 4px);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.sidebar-attachment-field__preview-remove:hover {
background: rgba(220, 38, 38, 0.1);
}
.sidebar-attachment-field__preview-remove .material-icons {
font-size: 18px;
color: var(--color-text-muted, #7A839F);
}
.sidebar-attachment-field__preview-remove:hover .material-icons {
color: var(--color-danger, #DC2626);
}
/* ============================================================================
PREVIEW DE MÚLTIPLOS ARQUIVOS
============================================================================ */
.sidebar-attachment-field--multiple .sidebar-attachment-field__dropzone {
min-height: 100px;
}
.sidebar-attachment-field__preview-list {
display: flex;
flex-direction: column;
gap: var(--spacing-1, 4px);
width: 100%;
padding: var(--spacing-2, 8px);
box-sizing: border-box;
}
.sidebar-attachment-field__preview-item {
display: flex;
align-items: center;
gap: var(--spacing-2, 8px);
padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
background: var(--color-bg-secondary, #F6F6F9);
border-radius: var(--radius-sm, 4px);
}
.sidebar-attachment-field__preview-item .sidebar-attachment-field__preview-icon {
font-size: 16px;
color: var(--color-success, #16A34A);
flex-shrink: 0;
}
.sidebar-attachment-field__preview-item .sidebar-attachment-field__preview-name {
flex: 1;
font-size: 11px;
font-weight: 500;
color: var(--color-text-primary, #12151F);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dark mode para preview-list */
html.dark .sidebar-attachment-field__preview-item,
html.dark-mode .sidebar-attachment-field__preview-item,
html[data-theme="dark"] .sidebar-attachment-field__preview-item {
background: var(--color-bg-tertiary, #1a1a3e);
}
/* ============================================================================
ESTADOS DE ERRO
============================================================================ */
.sidebar-attachment-field__error {
font-size: 11px;
color: var(--color-danger, #DC2626);
line-height: 1.3;
padding: var(--spacing-1, 4px) 0;
}
.sidebar-attachment-field.has-error .sidebar-attachment-field__dropzone {
border-color: var(--color-danger, #DC2626);
background: rgba(220, 38, 38, 0.02);
}
/* ============================================================================
DARK MODE
============================================================================ */
html.dark .sidebar-attachments,
html.dark-mode .sidebar-attachments,
html[data-theme="dark"] .sidebar-attachments {
background: var(--color-bg-primary, #1a1a2e);
border-color: var(--color-border, #4a4a6a);
}
html.dark .sidebar-attachments__header,
html.dark-mode .sidebar-attachments__header,
html[data-theme="dark"] .sidebar-attachments__header {
background: var(--color-bg-secondary, #16213e);
border-color: var(--color-border, #4a4a6a);
}
html.dark .sidebar-attachment-field__dropzone,
html.dark-mode .sidebar-attachment-field__dropzone,
html[data-theme="dark"] .sidebar-attachment-field__dropzone {
background: var(--color-bg-secondary, #16213e);
border-color: var(--color-border, #4a4a6a);
}
html.dark .sidebar-attachment-field__preview,
html.dark-mode .sidebar-attachment-field__preview,
html[data-theme="dark"] .sidebar-attachment-field__preview {
background: var(--color-bg-tertiary, #1a1a3e);
}
/* ============================================================================
RESPONSIVO
============================================================================ */
@media (max-width: 768px) {
.sidebar-attachments__body {
padding: var(--spacing-2, 8px);
}
.sidebar-attachment-field__dropzone {
min-height: 70px;
}
.sidebar-attachment-field__dropzone-icon {
font-size: 24px;
}
.sidebar-attachment-field__dropzone-text {
font-size: 11px;
}
}
/* === extensions/sidebar-figma.css === */
/**
* Sidebar Component - Figma Design System Alignment
*
* Ajustes para alinhar o menu lateral com o design do Figma.
* - Ícone vermelho no item selecionado
* - Linha vertical separando categorias expandidas
* - Categorias indentadas à direita da linha
*
* @version 1.0.0
* @date 2025-12-11
*/
/* ==========================================================================
Menu Lateral Container - Figma Specs
========================================================================== */
/* Light mode - Background do menu lateral */
.sidebar {
background: #F6F6F9 !important;
}
[data-theme="dark"] .sidebar {
background: #1D2333 !important;
}
/* ==========================================================================
Item do Menu - Estado Normal
========================================================================== */
.sidebar-menu__link {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 12px;
gap: 8px;
height: 42px;
background: transparent;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #12151F;
transition: background-color 0.2s ease, color 0.2s ease;
}
[data-theme="dark"] .sidebar-menu__link {
color: #E0E2EB;
}
.sidebar-menu__link:hover {
background: #ECEDF2;
}
[data-theme="dark"] .sidebar-menu__link:hover {
background: rgba(224, 226, 235, 0.08);
}
/* ==========================================================================
Item do Menu - Estado Ativo/Selecionado (Figma)
========================================================================== */
.sidebar-menu__item--active > .sidebar-menu__link {
background: #ECEDF2 !important;
}
[data-theme="dark"] .sidebar-menu__item--active > .sidebar-menu__link {
background: rgba(224, 226, 235, 0.12) !important;
}
/* ==========================================================================
ÍCONE VERMELHO QUANDO ITEM ATIVO - Figma #C90A0A
O problema: sidebar-menu.css define:
- .sidebar-menu__item--active > .sidebar-menu__link { color: var(--sidebar-menu-item-color-active) }
- .sidebar-menu__icon { color: inherit }
O ícone herda a cor azul do link pai. Precisamos sobrescrever com seletores
de alta especificidade e !important.
========================================================================== */
/* Regra principal: qualquer elemento com classe .sidebar-menu__icon dentro de item ativo */
.sidebar-menu__item--active .sidebar-menu__icon {
color: #C90A0A !important;
}
/* Abordagem com maior especificidade para garantir override */
.sidebar-menu__item.sidebar-menu__item--active .sidebar-menu__icon,
.sidebar-menu__item.sidebar-menu__item--active > .sidebar-menu__link > .sidebar-menu__icon,
.sidebar-menu__item.sidebar-menu__item--active > .sidebar-menu__link > i.sidebar-menu__icon,
div.sidebar-menu__item--active .sidebar-menu__icon,
div.sidebar-menu__item--active > div.sidebar-menu__link > i.sidebar-menu__icon {
color: #C90A0A !important;
}
/* Abordagem para elementos i genéricos dentro do link do item ativo */
/* NOTA: Seletor específico para evitar afetar ícones do module-panel (lupa, etc) */
/* NOTA 2: Excluir chevrons que devem permanecer brancos/cinza */
.sidebar-menu__item--active > .sidebar-menu__link > i:not(.sidebar-menu__chevron):not(.mdi-chevron-right):not(.mdi-chevron-up):not(.mdi-chevron-down),
.sidebar-menu__item--active > .sidebar-menu__link i.sidebar-menu__icon {
color: #C90A0A !important;
}
/* Abordagem para ícones IPE APENAS no link do menu (não no module-panel) */
.sidebar-menu__item--active > .sidebar-menu__link i[class*="ipe-"],
.sidebar-menu__item--active > .sidebar-menu__link [class*="ipe-"] {
color: #C90A0A !important;
}
/* SVG icons */
.sidebar-menu__item--active .sidebar-menu__icon svg,
.sidebar-menu__item--active .sidebar-menu__icon path {
fill: #C90A0A !important;
}
/* Material Icons */
.sidebar-menu__item--active .sidebar-menu__icon.material-icons,
.sidebar-menu__item--active .material-icons {
color: #C90A0A !important;
}
/* ==========================================================================
Chevron do Item do Menu Principal - Figma Specs
Regras:
1. Escondido por padrão (display: none conforme Figma)
2. Aparece APENAS no hover do PRÓPRIO item (não de outros)
3. Quando item ativo/expandido: chevron branco apontando para cima
========================================================================== */
.sidebar-menu__chevron {
width: 18px !important;
height: 18px !important;
margin-left: auto !important;
margin-right: 4px !important; /* Alinhamento com chevrons do submenu */
font-size: 18px !important;
color: #E0E2EB !important; /* Branco/cinza claro conforme Figma */
display: none !important; /* Escondido por padrão - usar display ao invés de opacity */
transition: transform 0.2s ease-in-out !important;
transform: scale(1) !important; /* Reset scale do sidebar.css */
}
/* Mostrar chevron APENAS no hover do próprio item (não de outros) */
.sidebar-menu__item:hover > .sidebar-menu__link > .sidebar-menu__chevron {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Chevron quando item está ativo/expandido - sempre visível e apontando para cima */
.sidebar-menu__item--active > .sidebar-menu__link > .sidebar-menu__chevron {
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: rotate(-90deg) scale(1) !important; /* Chevron para cima (circunflexo) */
color: #E0E2EB !important; /* Branco, NÃO vermelho */
}
/* IMPORTANTE: Garantir que chevron NÃO fique vermelho quando item ativo */
.sidebar-menu__item--active .sidebar-menu__chevron,
.sidebar-menu__item--active > .sidebar-menu__link > .sidebar-menu__chevron,
.sidebar-menu__item--active .sidebar-menu__link .mdi-chevron-right {
color: #E0E2EB !important;
}
[data-theme="light"] .sidebar-menu__chevron {
color: #394360 !important;
}
[data-theme="light"] .sidebar-menu__item--active > .sidebar-menu__link > .sidebar-menu__chevron {
color: #12151F !important;
}
/* ==========================================================================
Submenu/Categorias - Nova estrutura com linha vertical (Figma)
========================================================================== */
/* Container do submenu expandido */
.sidebar-submenu {
display: none !important; /* Oculto por padrão */
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
gap: 8px !important;
overflow: hidden !important;
background: transparent !important;
}
.sidebar-menu__item--active > .sidebar-submenu {
display: flex !important; /* Visível quando ativo */
padding: 8px 0 20px 20px !important;
}
/* Frame interno com linha vertical + categorias */
.sidebar-submenu__categories {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
padding: 0 !important;
gap: 12px !important;
width: 100% !important;
}
/* Linha vertical separadora - Figma */
.sidebar-submenu__line {
width: 1px !important;
flex-shrink: 0 !important;
background-color: #CED3E2 !important;
min-height: auto !important;
align-self: stretch !important;
}
[data-theme="dark"] .sidebar-submenu__line {
background-color: rgba(224, 226, 235, 0.16) !important;
}
/* Container das categorias à direita da linha */
.sidebar-submenu__list {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
gap: 4px !important;
flex: 1 !important;
list-style: none !important;
margin: 0 !important;
width: 100% !important;
}
/* Item de categoria individual */
.sidebar-submenu__item {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
padding: 8px 12px !important;
gap: 10px !important;
width: 100% !important;
height: 42px !important;
background: transparent !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
}
.sidebar-submenu__item:hover {
background: #ECEDF2 !important;
}
[data-theme="dark"] .sidebar-submenu__item:hover {
background: rgba(224, 226, 235, 0.08) !important;
}
/* Categoria ativa/selecionada - Figma #ECEDF2 */
.sidebar-submenu__item--active {
background: #ECEDF2 !important;
}
[data-theme="dark"] .sidebar-submenu__item--active {
background: rgba(224, 226, 235, 0.12) !important;
}
/* Texto da categoria */
.sidebar-submenu__text {
flex: 1 !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 16px !important;
line-height: 26px !important;
color: #394360 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
[data-theme="dark"] .sidebar-submenu__text {
color: #BFC3CF !important;
}
/* Categoria ativa - texto mais escuro */
.sidebar-submenu__item--active .sidebar-submenu__text {
color: #12151F !important;
}
[data-theme="dark"] .sidebar-submenu__item--active .sidebar-submenu__text {
color: #E0E2EB !important;
}
/* Chevron da categoria (para rotinas expandíveis) - Figma */
.sidebar-submenu__chevron {
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
font-size: 18px !important;
color: #12151F !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
[data-theme="dark"] .sidebar-submenu__chevron {
color: #E0E2EB !important;
}
.sidebar-submenu__item:hover .sidebar-submenu__chevron,
.sidebar-submenu__item--active .sidebar-submenu__chevron {
opacity: 1 !important;
}
/* ==========================================================================
Ícones do Menu - Tamanho Figma
========================================================================== */
.sidebar-menu__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-menu__icon svg {
width: 18px;
height: 18px;
}
/* Material icons - ajuste de tamanho */
.sidebar-menu__icon.material-icons {
font-size: 18px;
}
/* ==========================================================================
Module Panel (Submenu lateral) - Figma Specs
========================================================================== */
.module-panel {
width: 780px !important;
max-width: 780px !important;
left: 341px !important;
background: #F6F6F9 !important;
border-left: 1px solid #CED3E2 !important;
padding: 32px 56px !important;
}
[data-theme="dark"] .module-panel {
background: #1D2333 !important;
border-left-color: rgba(224, 226, 235, 0.16) !important;
}
/* Header do Module Panel */
.module-panel__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
padding: 0 !important;
gap: 32px !important;
margin-bottom: 56px !important;
}
/* Título do módulo e serviço */
.module-panel__title-section {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
flex: 1 !important;
}
/* Breadcrumb - Nome do módulo */
.module-panel__breadcrumb {
font-family: 'Inter', sans-serif !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 24px !important;
color: #394360 !important;
margin: 0 !important;
}
[data-theme="dark"] .module-panel__breadcrumb {
color: #BFC3CF !important;
}
/* Título - Nome do serviço */
.module-panel__title {
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 700 !important;
font-size: 32px !important;
line-height: 40px !important;
color: #12151F !important;
margin: 0 !important;
}
[data-theme="dark"] .module-panel__title {
color: #E0E2EB !important;
}
/* Pesquisa e botão de configuração */
.module-panel__actions {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
}
/* Campo de pesquisa - Container com ícone integrado conforme Figma */
.module-panel__search {
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
padding: 0 12px !important;
gap: 12px !important;
width: 240px !important;
height: 40px !important;
background: #F6F6F9 !important;
border: 1px solid #CED3E2 !important;
border-radius: 6px !important;
position: relative !important;
}
[data-theme="dark"] .module-panel__search {
background: #1D2333 !important;
border-color: rgba(224, 226, 235, 0.16) !important;
}
/* Ícone da lupa - PRETO conforme Figma (#12151F) - NÃO vermelho! */
.module-panel__search-icon,
.module-panel__search-icon.ipe-lupa,
.module-panel .ipe-lupa,
.module-panel__search .ipe-lupa,
i.module-panel__search-icon {
width: 18px !important;
height: 18px !important;
font-size: 18px !important;
color: #12151F !important;
flex-shrink: 0 !important;
position: static !important;
left: auto !important;
top: auto !important;
}
[data-theme="dark"] .module-panel__search-icon,
[data-theme="dark"] .module-panel__search-icon.ipe-lupa,
[data-theme="dark"] .module-panel .ipe-lupa,
[data-theme="dark"] .module-panel__search .ipe-lupa,
[data-theme="dark"] i.module-panel__search-icon {
color: #E0E2EB !important;
}
/* Input de pesquisa - com espaço para o ícone */
.module-panel__search-input {
box-sizing: border-box !important;
flex: 1 !important;
width: auto !important;
height: 38px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
outline: none !important;
font-family: 'Inter', sans-serif !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 24px !important;
color: #12151F !important;
}
.module-panel__search-input::placeholder {
color: #7A839F !important;
}
[data-theme="dark"] .module-panel__search-input {
color: #E0E2EB !important;
}
[data-theme="dark"] .module-panel__search-input::placeholder {
color: #A2A8B9 !important;
}
/* Botão de configuração */
.module-panel__config-btn {
box-sizing: border-box !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #CED3E2 !important;
border-radius: 6px !important;
background: transparent !important;
cursor: pointer !important;
color: #12151F !important;
text-decoration: none !important;
}
.module-panel__config-btn svg {
width: 60px;
height: 60px;
}
.module-panel__config-btn:hover {
background: #ECEDF2 !important;
}
[data-theme="dark"] .module-panel__config-btn {
border-color: rgba(224, 226, 235, 0.16) !important;
color: #E0E2EB !important;
}
[data-theme="dark"] .module-panel__config-btn svg path {
fill: #E0E2EB !important;
}
[data-theme="dark"] .module-panel__config-btn:hover {
background: rgba(224, 226, 235, 0.08) !important;
}
/* ==========================================================================
Seção de Mais Acessados - Figma Specs
========================================================================== */
.module-section {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
gap: 12px !important;
margin-bottom: 40px !important;
}
.module-section__title {
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 24px !important;
color: #12151F !important;
margin: 0 !important;
}
[data-theme="dark"] .module-section__title {
color: #E0E2EB !important;
}
/* ==========================================================================
Grid de Cards - Layout com altura uniforme
Usa CSS Grid com `grid-auto-rows: 1fr` para garantir que todos os cards
tenham a mesma altura, mesmo quando um deles tem texto mais longo.
========================================================================== */
.module-cards {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
grid-auto-rows: 1fr !important; /* Altura uniforme para todos os cards */
gap: 20px !important;
padding: 0 !important;
width: 100% !important;
}
@media (max-width: 768px) {
.module-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.module-cards {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
Card Individual - Altura dinâmica com quebra de linha
- min-height ao invés de height fixa
- Texto com word-wrap para quebrar linhas longas
- Todos os cards da mesma linha terão altura igual (via grid-auto-rows: 1fr)
========================================================================== */
.module-card {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding: 12px !important;
gap: 12px !important;
min-height: 90px !important; /* Altura mínima, pode crescer */
height: auto !important; /* Permite crescer além do mínimo */
background: #F6F6F9 !important;
border: 1px solid #CED3E2 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.module-card:hover {
background: #ECEDF2 !important;
border-color: #7A839F !important;
}
[data-theme="dark"] .module-card {
background: #1D2333 !important;
border-color: rgba(224, 226, 235, 0.16) !important;
}
[data-theme="dark"] .module-card:hover {
background: #252B3D !important;
}
/* Ícone do card - vermelho conforme Figma */
.module-card__icon {
width: 18px !important;
height: 18px !important;
color: #C90A0A !important;
}
.module-card__icon svg {
fill: #C90A0A !important;
}
/* ==========================================================================
Texto do Card - Quebra de linha habilitada
Remove truncamento (line-clamp, text-overflow) e permite que o texto
quebre naturalmente em múltiplas linhas quando necessário.
========================================================================== */
.module-card__text {
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 20px !important;
color: #12151F !important;
/* Permitir quebra de linha */
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
/* Remover truncamento */
overflow: visible !important;
text-overflow: unset !important;
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
/* Ocupar largura disponível */
width: 100% !important;
flex: 1 !important;
}
[data-theme="dark"] .module-card__text {
color: #E0E2EB !important;
}
/* ==========================================================================
Lista de Rotinas - Figma Specs
========================================================================== */
.service-list {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
gap: 10px !important;
width: 100% !important;
}
.service-list__item {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
padding: 8px !important;
width: 100% !important;
height: 40px !important;
background: transparent !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
}
.service-list__item:hover {
background: #ECEDF2 !important;
}
[data-theme="dark"] .service-list__item:hover {
background: rgba(224, 226, 235, 0.08) !important;
}
/* Item ativo/selecionado */
.service-list__item--active {
background: #ECEDF2 !important;
}
[data-theme="dark"] .service-list__item--active {
background: rgba(224, 226, 235, 0.12) !important;
}
.service-list__text {
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 24px !important;
color: #394360 !important;
}
[data-theme="dark"] .service-list__text {
color: #BFC3CF !important;
}
.service-list__item--active .service-list__text {
color: #12151F !important;
}
[data-theme="dark"] .service-list__item--active .service-list__text {
color: #E0E2EB !important;
}
.service-list__icon {
width: 18px !important;
height: 18px !important;
font-size: 18px !important;
color: #394360 !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
[data-theme="dark"] .service-list__icon {
color: #BFC3CF !important;
}
.service-list__item:hover .service-list__icon,
.service-list__item--active .service-list__icon {
opacity: 1 !important;
}
/* Garantir que o item do service-list tenha alinhamento correto */
.service-list__item {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
padding: 8px 12px !important;
width: 100% !important;
min-height: 40px !important;
background: transparent !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
text-decoration: none !important;
}
/* ==========================================================================
Responsive Adjustments
========================================================================== */
@media (max-width: 1200px) {
.module-panel {
width: calc(100vw - 341px) !important;
max-width: 780px !important;
}
}
@media (max-width: 960px) {
.module-panel {
left: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
padding: 24px 32px !important;
}
.module-panel__header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
}
.module-panel__actions {
width: 100% !important;
}
.module-panel__search {
flex: 1 !important;
width: auto !important;
}
}
/* === extensions/step-coordenada-geografica.css === */
/**
* Design System - Step Coordenada Geografica Component
*
* Componente de captura de coordenadas geograficas com:
* - Mapa interativo OpenLayers para selecao de ponto
* - Campos de latitude e longitude
* - Conversor de graus (DMS) para decimal
* - Painel de instrucoes e ajuda
* - Integracao com clipboard (copiar coordenadas)
*
* Baseado no template: coordenadas-geograficas.phtml
* @version 1.0.0
* @date 2026-02-26
*/
/* ============================================================
STEP COORDENADA GEOGRAFICA - CONTAINER PRINCIPAL
============================================================ */
.step-coordenada-geografica {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--spacing-6, 24px);
min-height: 400px;
width: 100%;
}
/* ============================================================
LAYOUT FULLWIDTH - Mapa ocupa 100% da area
============================================================ */
.step-coordenada-geografica--fullwidth {
display: block;
position: relative;
min-height: 600px;
height: calc(100vh - 350px); /* Altura dinamica baseada na viewport */
width: 100%;
/* Remove espacamentos default do stepper para ocupar toda area */
margin: calc(-1 * var(--spacing-6, 24px));
margin-top: calc(-1 * var(--spacing-4, 16px));
margin-bottom: 0;
width: calc(100% + 2 * var(--spacing-6, 24px));
}
.step-coordenada-geografica--fullwidth .step-coordenada-geografica__alert {
position: absolute;
top: var(--spacing-4, 16px);
left: 50%;
transform: translateX(-50%);
z-index: 15;
max-width: 600px;
width: calc(100% - var(--spacing-8, 32px));
}
/* Map wrapper - ocupa todo o espaco */
.step-coordenada-geografica__map-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: var(--color-bg-secondary, #F6F6F9);
}
.step-coordenada-geografica--fullwidth .step-coordenada-geografica__map {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100% !important;
height: 100% !important;
}
/* Garante que o canvas do OpenLayers ocupa 100% */
.step-coordenada-geografica--fullwidth .step-coordenada-geografica__map .ol-viewport {
width: 100% !important;
height: 100% !important;
}
.step-coordenada-geografica--fullwidth .step-coordenada-geografica__map canvas {
width: 100% !important;
height: 100% !important;
}
/* ============================================================
CAMPOS OVERLAY (dentro do mapa)
============================================================ */
.step-coordenada-geografica__coords-overlay {
position: absolute;
top: var(--spacing-4, 16px);
left: var(--spacing-4, 16px);
z-index: 10;
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg, 10px);
padding: var(--spacing-4, 16px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 320px;
}
.step-coordenada-geografica__coords-overlay .step-coordenada-geografica__coords {
display: flex;
flex-direction: column;
gap: var(--spacing-3, 12px);
}
.step-coordenada-geografica__coords-overlay .step-coordenada-geografica__field {
width: 100%;
}
.step-coordenada-geografica__coords-overlay .step-coordenada-geografica__input {
width: 100%;
}
/* Dark mode para overlay */
html.dark .step-coordenada-geografica__coords-overlay,
html.dark-mode .step-coordenada-geografica__coords-overlay,
html[data-theme="dark"] .step-coordenada-geografica__coords-overlay {
background-color: rgba(31, 41, 55, 0.95);
}
/* ============================================================
CONVERSOR SIDEBAR
============================================================ */
.step-coordenada-geografica__converter-sidebar {
/* Sera movido para sidebar via JS */
}
.step-coordenada-geografica__converter-fields--sidebar {
display: flex;
flex-direction: column;
gap: var(--spacing-3, 12px);
}
.step-coordenada-geografica__converter-fields--sidebar .step-coordenada-geografica__converter-field {
width: 100%;
}
.step-coordenada-geografica__copy-btn--full {
width: 100%;
justify-content: center;
margin-top: var(--spacing-2, 8px);
}
/* ============================================================
SELETOR DE CAMADAS (Satelite/Mapa)
============================================================ */
.step-coordenada-geografica__layer-switcher {
position: absolute;
top: var(--spacing-4, 16px);
right: var(--spacing-4, 16px);
z-index: 10;
display: flex;
gap: 2px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-md, 6px);
padding: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.step-coordenada-geografica__layer-switcher .layer-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background-color: transparent;
border-radius: var(--radius-sm, 4px);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
color: var(--color-text-secondary, #394360);
}
.step-coordenada-geografica__layer-switcher .layer-btn:hover {
background-color: var(--color-bg-secondary, #F6F6F9);
color: var(--color-text-primary, #12151F);
}
.step-coordenada-geografica__layer-switcher .layer-btn--active {
background-color: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
.step-coordenada-geografica__layer-switcher .layer-btn--active:hover {
background-color: var(--color-primary-dark, #A00808);
color: #FFFFFF;
}
.step-coordenada-geografica__layer-switcher .layer-btn .material-icons {
font-size: 22px;
}
/* Dark mode para layer switcher */
html.dark .step-coordenada-geografica__layer-switcher,
html.dark-mode .step-coordenada-geografica__layer-switcher,
html[data-theme="dark"] .step-coordenada-geografica__layer-switcher {
background-color: rgba(31, 41, 55, 0.95);
}
html.dark .step-coordenada-geografica__layer-switcher .layer-btn,
html.dark-mode .step-coordenada-geografica__layer-switcher .layer-btn,
html[data-theme="dark"] .step-coordenada-geografica__layer-switcher .layer-btn {
color: var(--color-text-secondary, #9CA3AF);
}
html.dark .step-coordenada-geografica__layer-switcher .layer-btn:hover,
html.dark-mode .step-coordenada-geografica__layer-switcher .layer-btn:hover,
html[data-theme="dark"] .step-coordenada-geografica__layer-switcher .layer-btn:hover {
background-color: var(--color-bg-tertiary, #374151);
color: var(--color-text-primary, #F3F4F6);
}
/* ============================================================
PAINEL LATERAL (Formulario e Instrucoes)
============================================================ */
.step-coordenada-geografica__panel {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 16px);
}
/* ============================================================
ALERTAS / AVISOS
============================================================ */
.step-coordenada-geografica__alert {
display: flex;
align-items: flex-start;
gap: var(--spacing-3, 12px);
padding: var(--spacing-4, 16px);
border-radius: var(--radius-md, 6px);
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 22px;
}
.step-coordenada-geografica__alert--warning {
background-color: var(--color-warning-bg, #FFF8E5);
border: 1px solid var(--color-warning-border, #F5A623);
color: var(--color-warning-text, #856404);
}
.step-coordenada-geografica__alert--info {
background-color: var(--color-info-bg, #E8F4FD);
border: 1px solid var(--color-info-border, #2196F3);
color: var(--color-info-text, #0D47A1);
}
.step-coordenada-geografica__alert-icon {
flex-shrink: 0;
font-size: 20px;
}
.step-coordenada-geografica__alert-content {
flex: 1;
}
.step-coordenada-geografica__alert-title {
font-weight: 600;
margin: 0 0 4px 0;
}
.step-coordenada-geografica__alert-text {
margin: 0;
}
.step-coordenada-geografica__alert a {
color: inherit;
text-decoration: underline;
}
.step-coordenada-geografica__alert a:hover {
text-decoration: none;
}
/* ============================================================
CAMPOS DE COORDENADAS
============================================================ */
.step-coordenada-geografica__coords {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-4, 16px);
}
.step-coordenada-geografica__field {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 8px);
}
.step-coordenada-geografica__label {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-text-primary, #12151F);
}
.step-coordenada-geografica__label--required::after {
content: ' *';
color: var(--color-danger, #C90A0A);
}
.step-coordenada-geografica__input {
height: 44px;
padding: 10px 14px;
background-color: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-md, 6px);
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: var(--color-text-primary, #12151F);
transition: all var(--transition-base, 200ms ease-in-out);
}
.step-coordenada-geografica__input::placeholder {
color: var(--color-neutral-500, #7A839F);
}
.step-coordenada-geografica__input:hover {
border-color: var(--color-neutral-400, #9CA3B9);
}
.step-coordenada-geografica__input:focus {
outline: none;
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1);
}
.step-coordenada-geografica__input:disabled {
background-color: var(--color-bg-secondary, #F6F6F9);
color: var(--color-text-muted, #7A839F);
cursor: not-allowed;
}
.step-coordenada-geografica__input--error {
border-color: var(--color-danger, #F17777);
}
.step-coordenada-geografica__input--error:focus {
border-color: var(--color-danger, #F17777);
box-shadow: 0 0 0 3px rgba(241, 119, 119, 0.1);
}
/* ============================================================
CONVERSOR DE GRAUS (DMS to Decimal)
============================================================ */
.step-coordenada-geografica__converter {
display: flex;
flex-direction: column;
gap: var(--spacing-3, 12px);
padding: var(--spacing-4, 16px);
background-color: var(--color-bg-secondary, #F6F6F9);
border-radius: var(--radius-md, 6px);
}
.step-coordenada-geografica__converter-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: var(--color-text-primary, #12151F);
margin: 0;
}
.step-coordenada-geografica__converter-help {
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 20px;
color: var(--color-text-secondary, #394360);
margin: 0;
}
.step-coordenada-geografica__converter-fields {
display: flex;
align-items: center;
gap: var(--spacing-3, 12px);
position: relative;
}
.step-coordenada-geografica__converter-field {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-1, 4px);
}
.step-coordenada-geografica__converter-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary, #394360);
flex-shrink: 0;
}
.step-coordenada-geografica__converter-icon .material-icons {
font-size: 24px;
}
/* Botao Copiar */
.step-coordenada-geografica__copy-btn {
position: absolute;
right: 0;
bottom: -8px;
transform: translateY(100%);
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2, 8px);
padding: 8px 16px;
background-color: var(--color-neutral-200, #E6E8EF);
border: none;
border-radius: var(--radius-md, 6px);
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-text-primary, #12151F);
cursor: pointer;
transition: all var(--transition-base, 200ms ease-in-out);
}
.step-coordenada-geografica__copy-btn:hover {
background-color: var(--color-primary, #C90A0A);
color: #FFFFFF;
}
.step-coordenada-geografica__copy-btn:active {
transform: translateY(100%) scale(0.98);
}
.step-coordenada-geografica__copy-btn--success {
background-color: var(--color-success, #4CAF50);
color: #FFFFFF;
}
.step-coordenada-geografica__copy-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Campo de destino destacado */
.step-coordenada-geografica__target-field {
font-weight: 600;
color: var(--color-primary, #C90A0A);
}
/* ============================================================
CONTAINER DO MAPA
============================================================ */
.step-coordenada-geografica__map-container {
position: relative;
border-radius: var(--radius-lg, 10px);
overflow: hidden;
background-color: var(--color-bg-secondary, #F6F6F9);
}
.step-coordenada-geografica__map {
width: 100%;
height: 100%;
min-height: 350px;
}
/* Placeholder de loading */
.step-coordenada-geografica__map-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-3, 12px);
background-color: var(--color-bg-tertiary, #E6E8EF);
z-index: 5;
}
/* Loading em fullwidth */
.step-coordenada-geografica--fullwidth .step-coordenada-geografica__map-loading {
z-index: 5;
}
.step-coordenada-geografica__map-loading--hidden {
display: none;
}
.step-coordenada-geografica__map-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-neutral-300, #CED3E2);
border-radius: 50%;
border-top-color: var(--color-primary, #C90A0A);
animation: step-coordenada-geografica-spin 0.8s linear infinite;
}
@keyframes step-coordenada-geografica-spin {
to {
transform: rotate(360deg);
}
}
.step-coordenada-geografica__map-loading-text {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--color-text-secondary, #394360);
}
/* Controles do mapa (overlay) */
.step-coordenada-geografica__map-controls {
position: absolute;
top: var(--spacing-3, 12px);
right: var(--spacing-3, 12px);
display: flex;
flex-direction: column;
gap: var(--spacing-2, 8px);
z-index: 10;
}
.step-coordenada-geografica__map-control-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-bg-primary, #FFFFFF);
border: 1px solid var(--color-border, #CED3E2);
border-radius: var(--radius-sm, 4px);
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-coordenada-geografica__map-control-btn:hover {
background-color: var(--color-bg-secondary, #F6F6F9);
border-color: var(--color-neutral-400, #9CA3B9);
}
.step-coordenada-geografica__map-control-btn .material-icons {
font-size: 20px;
color: var(--color-text-primary, #12151F);
}
/* Coordenadas display no mapa */
.step-coordenada-geografica__map-coords-display {
position: absolute;
bottom: var(--spacing-3, 12px);
left: var(--spacing-3, 12px);
padding: 8px 12px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-sm, 4px);
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
color: var(--color-text-primary, #12151F);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10;
}
/* ============================================================
DARK MODE
============================================================ */
html.dark .step-coordenada-geografica__alert--warning,
html.dark-mode .step-coordenada-geografica__alert--warning,
html[data-theme="dark"] .step-coordenada-geografica__alert--warning {
background-color: rgba(245, 166, 35, 0.15);
border-color: var(--color-warning-border, #F5A623);
color: var(--color-warning-light, #FFD866);
}
html.dark .step-coordenada-geografica__alert--info,
html.dark-mode .step-coordenada-geografica__alert--info,
html[data-theme="dark"] .step-coordenada-geografica__alert--info {
background-color: rgba(33, 150, 243, 0.15);
border-color: var(--color-info-border, #2196F3);
color: var(--color-info-light, #90CAF9);
}
html.dark .step-coordenada-geografica__label,
html.dark-mode .step-coordenada-geografica__label,
html[data-theme="dark"] .step-coordenada-geografica__label {
color: var(--color-text-primary, #F3F4F6);
}
html.dark .step-coordenada-geografica__input,
html.dark-mode .step-coordenada-geografica__input,
html[data-theme="dark"] .step-coordenada-geografica__input {
background-color: var(--color-bg-secondary, #1F2937);
border-color: var(--color-border, #374151);
color: var(--color-text-primary, #F3F4F6);
}
html.dark .step-coordenada-geografica__input::placeholder,
html.dark-mode .step-coordenada-geografica__input::placeholder,
html[data-theme="dark"] .step-coordenada-geografica__input::placeholder {
color: var(--color-text-muted, #6B7280);
}
html.dark .step-coordenada-geografica__input:hover,
html.dark-mode .step-coordenada-geografica__input:hover,
html[data-theme="dark"] .step-coordenada-geografica__input:hover {
border-color: var(--color-neutral-600, #4B5563);
}
html.dark .step-coordenada-geografica__input:focus,
html.dark-mode .step-coordenada-geografica__input:focus,
html[data-theme="dark"] .step-coordenada-geografica__input:focus {
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.15);
}
html.dark .step-coordenada-geografica__converter,
html.dark-mode .step-coordenada-geografica__converter,
html[data-theme="dark"] .step-coordenada-geografica__converter {
background-color: var(--color-bg-secondary, #1F2937);
}
html.dark .step-coordenada-geografica__converter-title,
html.dark-mode .step-coordenada-geografica__converter-title,
html[data-theme="dark"] .step-coordenada-geografica__converter-title {
color: var(--color-text-primary, #F3F4F6);
}
html.dark .step-coordenada-geografica__converter-help,
html.dark-mode .step-coordenada-geografica__converter-help,
html[data-theme="dark"] .step-coordenada-geografica__converter-help {
color: var(--color-text-secondary, #9CA3AF);
}
html.dark .step-coordenada-geografica__copy-btn,
html.dark-mode .step-coordenada-geografica__copy-btn,
html[data-theme="dark"] .step-coordenada-geografica__copy-btn {
background-color: var(--color-bg-tertiary, #374151);
color: var(--color-text-primary, #F3F4F6);
}
html.dark .step-coordenada-geografica__map-container,
html.dark-mode .step-coordenada-geografica__map-container,
html[data-theme="dark"] .step-coordenada-geografica__map-container {
background-color: var(--color-bg-secondary, #1F2937);
}
html.dark .step-coordenada-geografica__map-control-btn,
html.dark-mode .step-coordenada-geografica__map-control-btn,
html[data-theme="dark"] .step-coordenada-geografica__map-control-btn {
background-color: var(--color-bg-secondary, #1F2937);
border-color: var(--color-border, #374151);
}
html.dark .step-coordenada-geografica__map-control-btn:hover,
html.dark-mode .step-coordenada-geografica__map-control-btn:hover,
html[data-theme="dark"] .step-coordenada-geografica__map-control-btn:hover {
background-color: var(--color-bg-tertiary, #374151);
}
html.dark .step-coordenada-geografica__map-control-btn .material-icons,
html.dark-mode .step-coordenada-geografica__map-control-btn .material-icons,
html[data-theme="dark"] .step-coordenada-geografica__map-control-btn .material-icons {
color: var(--color-text-primary, #F3F4F6);
}
html.dark .step-coordenada-geografica__map-coords-display,
html.dark-mode .step-coordenada-geografica__map-coords-display,
html[data-theme="dark"] .step-coordenada-geografica__map-coords-display {
background-color: rgba(31, 41, 55, 0.95);
color: var(--color-text-primary, #F3F4F6);
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 1024px) {
.step-coordenada-geografica {
grid-template-columns: 1fr;
gap: var(--spacing-5, 20px);
}
.step-coordenada-geografica__map-container {
min-height: 300px;
order: -1; /* Mapa primeiro em mobile */
}
}
@media (max-width: 768px) {
.step-coordenada-geografica__coords {
grid-template-columns: 1fr;
}
.step-coordenada-geografica__converter-fields {
flex-direction: column;
align-items: stretch;
}
.step-coordenada-geografica__converter-icon {
display: none;
}
.step-coordenada-geografica__copy-btn {
position: static;
transform: none;
width: 100%;
margin-top: var(--spacing-3, 12px);
}
.step-coordenada-geografica__copy-btn:active {
transform: scale(0.98);
}
.step-coordenada-geografica__map {
min-height: 250px;
}
}
/* ============================================================
ACESSIBILIDADE
============================================================ */
.step-coordenada-geografica__input:focus-visible {
outline: none;
border-color: var(--color-primary, #C90A0A);
box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1);
}
.step-coordenada-geografica__copy-btn:focus-visible,
.step-coordenada-geografica__map-control-btn:focus-visible {
outline: 2px solid var(--color-primary, #C90A0A);
outline-offset: 2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.step-coordenada-geografica__input {
border-width: 2px;
}
.step-coordenada-geografica__alert {
border-width: 2px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.step-coordenada-geografica__input,
.step-coordenada-geografica__copy-btn,
.step-coordenada-geografica__map-control-btn {
transition: none;
}
.step-coordenada-geografica__map-loading-spinner {
animation: none;
}
.step-coordenada-geografica__copy-btn:active {
transform: translateY(100%);
}
}
/* ============================================================
VARIANTES
============================================================ */
/* Versao compacta (para uso em drawers/modais) */
.step-coordenada-geografica--compact {
min-height: 300px;
}
.step-coordenada-geografica--compact .step-coordenada-geografica__map {
min-height: 250px;
}
.step-coordenada-geografica--compact .step-coordenada-geografica__alert {
padding: var(--spacing-3, 12px);
font-size: 13px;
}
/* Versao somente leitura */
.step-coordenada-geografica--readonly .step-coordenada-geografica__input {
background-color: var(--color-bg-secondary, #F6F6F9);
cursor: default;
}
.step-coordenada-geografica--readonly .step-coordenada-geografica__converter {
display: none;
}
/* Versao com mapa a esquerda */
.step-coordenada-geografica--map-left {
grid-template-columns: 2fr 1fr;
}
.step-coordenada-geografica--map-left .step-coordenada-geografica__map-container {
order: -1;
}
/* === compat/dark-mode-legacy-fix.css === */
/**
* Dark Mode - Correções para Elementos Legados
*
* Este arquivo corrige a aplicação do modo dark em elementos
* legados que não estão usando as variáveis CSS do Design System
*
* @version 1.0.0
* @date 2025-11-03
*/
/* ============================================================
CONTAINERS E ESTRUTURA
============================================================ */
/* Força fundo escuro em HTML e BODY
Especificidade: html.dark = 0-0-1-1 = 11 > html = 0-0-0-1 = 1
*/
html.dark,
html.dark-mode,
html[data-theme="dark"] {
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
}
/* Especificidade: html.dark body = 0-0-1-2 = 12 > html, body = 0-0-0-2 = 2 */
html.dark body,
html.dark-mode body,
html[data-theme="dark"] body {
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
color: var(--text-base-neutral-default, var(--color-text-primary));
}
/* Força fundo escuro em elementos principais quando dark mode está ativo
Especificidade: html.dark main = 0-0-1-2 = 12
*/
html.dark main,
html.dark-mode main,
html[data-theme="dark"] main {
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
}
/* Força fundo escuro em divs de conteúdo
Especificidade: html.dark #conteudo = 0-1-1-1 = 111
*/
html.dark #conteudo,
html.dark-mode #conteudo,
html[data-theme="dark"] #conteudo {
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
}
html.dark .conteudo,
html.dark-mode .conteudo,
html[data-theme="dark"] .conteudo {
background-color: var(--surface-base-neutral-page-default, var(--color-bg-primary));
}
/* Sobrescreve bg-background do Tailwind
Especificidade: html.dark .bg-background = 0-0-2-1 = 21 > .bg-background = 0-0-1-0 = 10
*/
html.dark .bg-background,
html.dark-mode .bg-background,
html[data-theme="dark"] .bg-background {
background-color: var(--color-bg-primary);
}
/* ============================================================
FIELDSETS E LEGENDS
============================================================ */
.dark fieldset,
.dark-mode fieldset,
[data-theme="dark"] fieldset {
background-color: transparent;
border-color: var(--color-border);
}
.dark legend,
.dark-mode legend,
[data-theme="dark"] legend {
color: var(--color-text-primary);
}
/* ============================================================
HEADINGS E LABELS
============================================================ */
/* Garante que h4 (usado para "Dados Produtor") seja visível */
.dark h4,
.dark-mode h4,
[data-theme="dark"] h4 {
color: var(--color-text-primary);
}
.dark h1,
.dark-mode h1,
[data-theme="dark"] h1,
.dark h2,
.dark-mode h2,
[data-theme="dark"] h2,
.dark h3,
.dark-mode h3,
[data-theme="dark"] h3,
.dark h5,
.dark-mode h5,
[data-theme="dark"] h5,
.dark h6,
.dark-mode h6,
[data-theme="dark"] h6 {
color: var(--color-text-primary);
}
/* Labels de formulário */
.dark label,
.dark-mode label,
[data-theme="dark"] label {
color: var(--color-text-primary);
}
/* ============================================================
MDL COMPONENTS (Material Design Lite - Legado)
============================================================ */
/* Grid containers */
.dark .mdl-grid,
.dark-mode .mdl-grid,
[data-theme="dark"] .mdl-grid {
background-color: transparent;
}
/* Células do grid */
.dark .mdl-cell,
.dark-mode .mdl-cell,
[data-theme="dark"] .mdl-cell {
background-color: transparent;
}
/* ============================================================
FORM ELEMENTS - LAMINAS/ZEND FORM
============================================================ */
/* Input text fields (exclui .input do design system) */
.dark input[type="text"]:not(.input),
.dark-mode input[type="text"]:not(.input),
[data-theme="dark"] input[type="text"]:not(.input),
.dark input[type="password"]:not(.input),
.dark-mode input[type="password"]:not(.input),
[data-theme="dark"] input[type="password"]:not(.input),
.dark input[type="email"]:not(.input),
.dark-mode input[type="email"]:not(.input),
[data-theme="dark"] input[type="email"]:not(.input),
.dark input[type="number"]:not(.input),
.dark-mode input[type="number"]:not(.input),
[data-theme="dark"] input[type="number"]:not(.input),
.dark input[type="tel"]:not(.input),
.dark-mode input[type="tel"]:not(.input),
[data-theme="dark"] input[type="tel"]:not(.input),
.dark input[type="url"]:not(.input),
.dark-mode input[type="url"]:not(.input),
[data-theme="dark"] input[type="url"]:not(.input) {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
/* Select elements */
.dark select,
.dark-mode select,
[data-theme="dark"] select {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
/* Textarea */
.dark textarea,
.dark-mode textarea,
[data-theme="dark"] textarea {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
/* ============================================================
FLATPICKR (Date Picker)
============================================================ */
.dark .flatpickr-calendar,
.dark-mode .flatpickr-calendar,
[data-theme="dark"] .flatpickr-calendar {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
box-shadow: var(--shadow-lg);
}
.dark .flatpickr-day,
.dark-mode .flatpickr-day,
[data-theme="dark"] .flatpickr-day {
color: var(--color-text-primary);
}
.dark .flatpickr-day:hover,
.dark-mode .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:hover {
background-color: var(--color-bg-tertiary);
}
.dark .flatpickr-months .flatpickr-month,
.dark-mode .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-months .flatpickr-month {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
/* ============================================================
JQUERY UI ELEMENTS
============================================================ */
/* Tabs */
.dark #tabs,
.dark-mode #tabs,
[data-theme="dark"] #tabs {
background-color: transparent;
border-color: var(--color-border);
}
.dark .ui-tabs,
.dark-mode .ui-tabs,
[data-theme="dark"] .ui-tabs {
background-color: transparent;
border-color: var(--color-border);
}
.dark .ui-tabs .ui-tabs-nav,
.dark-mode .ui-tabs .ui-tabs-nav,
[data-theme="dark"] .ui-tabs .ui-tabs-nav {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
.dark .ui-tabs .ui-tabs-nav li,
.dark-mode .ui-tabs .ui-tabs-nav li,
[data-theme="dark"] .ui-tabs .ui-tabs-nav li {
background-color: var(--color-bg-tertiary);
border-color: var(--color-border);
}
.dark .ui-tabs .ui-tabs-nav li a,
.dark-mode .ui-tabs .ui-tabs-nav li a,
[data-theme="dark"] .ui-tabs .ui-tabs-nav li a {
color: var(--color-text-secondary);
}
.dark .ui-tabs .ui-tabs-nav li.ui-tabs-active,
.dark-mode .ui-tabs .ui-tabs-nav li.ui-tabs-active,
[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-tabs-active {
background-color: var(--color-bg-primary);
}
.dark .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.dark-mode .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
[data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
color: var(--color-text-primary);
}
.dark .ui-tabs-panel,
.dark-mode .ui-tabs-panel,
[data-theme="dark"] .ui-tabs-panel {
background-color: transparent;
border-color: var(--color-border);
}
/* ============================================================
PARAGRAPHS E TEXTO GERAL
============================================================ */
/* Regras legadas de p/span removidas — conflitavam com componentes (badge, alert, etc) */
/* ============================================================
DIVS GERAIS
============================================================ */
/* Remove fundos brancos forçados em divs quando em dark mode */
.dark div,
.dark-mode div,
[data-theme="dark"] div {
/* Não força background para permitir transparência */
}
/* ============================================================
BOX COMPONENTS (Adicionar Perfil, Documentos, etc)
============================================================ */
.dark .box-component,
.dark-mode .box-component,
[data-theme="dark"] .box-component {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
.dark .box-component .box-header,
.dark-mode .box-component .box-header,
[data-theme="dark"] .box-component .box-header {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
.dark .box-component .box-body,
.dark-mode .box-component .box-body,
[data-theme="dark"] .box-component .box-body {
background-color: var(--color-bg-secondary);
}
/* ============================================================
LINKS
============================================================ */
.dark a:not(.breadcrumb-link),
.dark-mode a:not(.breadcrumb-link),
[data-theme="dark"] a:not(.breadcrumb-link) {
color: var(--color-accent-300);
}
.dark a:not(.breadcrumb-link):hover,
.dark-mode a:not(.breadcrumb-link):hover,
[data-theme="dark"] a:not(.breadcrumb-link):hover {
color: var(--color-accent-200);
}
/* ============================================================
PLACEHOLDER TEXT
============================================================ */
.dark input:not(.input)::placeholder,
.dark-mode input:not(.input)::placeholder,
[data-theme="dark"] input:not(.input)::placeholder,
.dark textarea:not(.input)::placeholder,
.dark-mode textarea:not(.input)::placeholder,
[data-theme="dark"] textarea:not(.input)::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
/* ============================================================
DISABLED STATES
============================================================ */
.dark input:not(.input):disabled,
.dark-mode input:not(.input):disabled,
[data-theme="dark"] input:not(.input):disabled,
.dark select:disabled,
.dark-mode select:disabled,
[data-theme="dark"] select:disabled,
.dark textarea:not(.input):disabled,
.dark-mode textarea:not(.input):disabled,
[data-theme="dark"] textarea:not(.input):disabled {
background-color: var(--color-bg-tertiary);
color: var(--color-text-muted);
opacity: 0.6;
}
/* ============================================================
MATERIAL DESIGN LITE (MDL) COMPONENTS
============================================================ */
/* MDL Tabs */
.dark .mdl-tabs,
.dark-mode .mdl-tabs,
[data-theme="dark"] .mdl-tabs {
background-color: transparent;
}
.dark .mdl-tabs__tab-bar,
.dark-mode .mdl-tabs__tab-bar,
[data-theme="dark"] .mdl-tabs__tab-bar {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
.dark .mdl-tabs__tab,
.dark-mode .mdl-tabs__tab,
[data-theme="dark"] .mdl-tabs__tab {
color: var(--color-text-secondary);
background-color: var(--color-bg-tertiary);
}
.dark .mdl-tabs__tab.is-active,
.dark-mode .mdl-tabs__tab.is-active,
[data-theme="dark"] .mdl-tabs__tab.is-active {
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
border-color: var(--color-accent-300);
}
.dark .mdl-tabs__panel,
.dark-mode .mdl-tabs__panel,
[data-theme="dark"] .mdl-tabs__panel {
background-color: transparent;
color: var(--color-text-primary);
}
/* MDL Data Table */
.dark .mdl-data-table,
.dark-mode .mdl-data-table,
[data-theme="dark"] .mdl-data-table {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.dark .mdl-data-table th,
.dark-mode .mdl-data-table th,
[data-theme="dark"] .mdl-data-table th {
color: var(--color-text-primary);
background-color: var(--color-bg-tertiary);
border-color: var(--color-border);
}
.dark .mdl-data-table td,
.dark-mode .mdl-data-table td,
[data-theme="dark"] .mdl-data-table td {
color: var(--color-text-primary);
border-color: var(--color-border);
}
.dark .mdl-data-table tbody tr:hover,
.dark-mode .mdl-data-table tbody tr:hover,
[data-theme="dark"] .mdl-data-table tbody tr:hover {
background-color: var(--color-bg-tertiary);
}
/* ============================================================
JQUERY UI DIALOGS
============================================================ */
.dark .ui-dialog,
.dark-mode .ui-dialog,
[data-theme="dark"] .ui-dialog {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
box-shadow: var(--shadow-xl);
}
.dark .ui-dialog-titlebar,
.dark-mode .ui-dialog-titlebar,
[data-theme="dark"] .ui-dialog-titlebar {
background-color: var(--color-bg-tertiary);
border-color: var(--color-border);
}
.dark .ui-dialog-title,
.dark-mode .ui-dialog-title,
[data-theme="dark"] .ui-dialog-title {
color: var(--color-text-primary);
}
.dark .ui-dialog-content,
.dark-mode .ui-dialog-content,
[data-theme="dark"] .ui-dialog-content {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
}
/* Garantir cores corretas para #erroGenerico no dark mode */
.dark #erroGenerico,
.dark-mode #erroGenerico,
[data-theme="dark"] #erroGenerico {
background-color: var(--color-bg-primary);
color: var(--color-text-primary) !important;
}
.dark .ui-dialog-buttonpane,
.dark-mode .ui-dialog-buttonpane,
[data-theme="dark"] .ui-dialog-buttonpane {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
.dark .ui-dialog-buttonset button,
.dark-mode .ui-dialog-buttonset button,
[data-theme="dark"] .ui-dialog-buttonset button {
background-color: var(--color-neutral-700);
color: var(--color-text-light);
border-color: var(--color-border);
}
.dark .ui-dialog-buttonset button:hover,
.dark-mode .ui-dialog-buttonset button:hover,
[data-theme="dark"] .ui-dialog-buttonset button:hover {
background-color: var(--color-neutral-600);
}
.dark .ui-widget-overlay,
.dark-mode .ui-widget-overlay,
[data-theme="dark"] .ui-widget-overlay {
background-color: rgba(0, 0, 0, 0.7);
}
/* ============================================================
DETALHAR COMPONENTS (Tela de Detalhes)
============================================================ */
.dark .div-table,
.dark-mode .div-table,
[data-theme="dark"] .div-table {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
.dark .div-table-row,
.dark-mode .div-table-row,
[data-theme="dark"] .div-table-row {
border-color: var(--color-border);
background-color: transparent;
}
.dark .div-table-col,
.dark-mode .div-table-col,
[data-theme="dark"] .div-table-col {
border-color: var(--color-border);
color: var(--color-text-primary);
}
.dark .div-card,
.dark-mode .div-card,
[data-theme="dark"] .div-card {
background-color: var(--color-bg-secondary);
}
.dark .card-icon,
.dark-mode .card-icon,
[data-theme="dark"] .card-icon {
background-color: var(--color-green-400);
color: var(--color-text-light);
}
.dark .card-string,
.dark-mode .card-string,
[data-theme="dark"] .card-string {
background-color: var(--color-neutral-700);
color: var(--color-text-light);
}
.dark .card-info,
.dark-mode .card-info,
[data-theme="dark"] .card-info {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
.dark .aviso,
.dark-mode .aviso,
[data-theme="dark"] .aviso {
color: var(--color-text-secondary);
}
.dark .title,
.dark-mode .title,
[data-theme="dark"] .title {
color: var(--color-text-primary);
}
/* ============================================================
TABLES (Tabelas Genéricas)
============================================================ */
.dark table,
.dark-mode table,
[data-theme="dark"] table {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.dark table th,
.dark-mode table th,
[data-theme="dark"] table th {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
.dark table td,
.dark-mode table td,
[data-theme="dark"] table td {
color: var(--color-text-primary);
border-color: var(--color-border);
}
.dark table tbody tr:hover,
.dark-mode table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
background-color: var(--color-bg-tertiary);
}
.dark table tbody tr:nth-child(even),
.dark-mode table tbody tr:nth-child(even),
[data-theme="dark"] table tbody tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.02);
}
/* ============================================================
DATATABLES - REMOVIDO (migrado para Grid.js em 2024-12)
============================================================ */
/* ============================================================
CARDS E CONTAINERS
============================================================ */
.dark .card,
.dark-mode .card,
[data-theme="dark"] .card {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
color: var(--color-text-primary);
}
.dark .card-header,
.dark-mode .card-header,
[data-theme="dark"] .card-header {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
.dark .card-body,
.dark-mode .card-body,
[data-theme="dark"] .card-body {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.dark .card-footer,
.dark-mode .card-footer,
[data-theme="dark"] .card-footer {
background-color: var(--color-bg-tertiary);
border-color: var(--color-border);
}
/* ============================================================
CHOSEN.JS (Select Dropdown)
============================================================ */
.dark .chosen-container,
.dark-mode .chosen-container,
[data-theme="dark"] .chosen-container {
color: var(--color-text-primary);
}
.dark .chosen-container-single .chosen-single,
.dark-mode .chosen-container-single .chosen-single,
[data-theme="dark"] .chosen-container-single .chosen-single {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
.dark .chosen-container-active .chosen-single,
.dark-mode .chosen-container-active .chosen-single,
[data-theme="dark"] .chosen-container-active .chosen-single {
border-color: var(--color-accent-300);
box-shadow: 0 0 0 3px rgba(77, 145, 245, 0.15);
}
.dark .chosen-drop,
.dark-mode .chosen-drop,
[data-theme="dark"] .chosen-drop {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
box-shadow: var(--shadow-lg);
}
.dark .chosen-results li,
.dark-mode .chosen-results li,
[data-theme="dark"] .chosen-results li {
color: var(--color-text-primary);
}
.dark .chosen-results li.highlighted,
.dark-mode .chosen-results li.highlighted,
[data-theme="dark"] .chosen-results li.highlighted {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
.dark .chosen-search input[type="text"],
.dark-mode .chosen-search input[type="text"],
[data-theme="dark"] .chosen-search input[type="text"] {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
/* ============================================================
PERFECT SCROLLBAR
============================================================ */
.dark .ps__rail-y,
.dark-mode .ps__rail-y,
[data-theme="dark"] .ps__rail-y {
background-color: transparent;
}
.dark .ps__thumb-y,
.dark-mode .ps__thumb-y,
[data-theme="dark"] .ps__thumb-y {
background-color: var(--color-neutral-600);
}
.dark .ps__rail-x,
.dark-mode .ps__rail-x,
[data-theme="dark"] .ps__rail-x {
background-color: transparent;
}
.dark .ps__thumb-x,
.dark-mode .ps__thumb-x,
[data-theme="dark"] .ps__thumb-x {
background-color: var(--color-neutral-600);
}
/* ============================================================
STRONG E TEXT EMPHASIS
============================================================ */
.dark strong,
.dark-mode strong,
[data-theme="dark"] strong,
.dark b,
.dark-mode b,
[data-theme="dark"] b {
color: var(--color-text-primary);
}
/* ============================================================
SMALL TEXT
============================================================ */
.dark small,
.dark-mode small,
[data-theme="dark"] small {
color: var(--color-text-secondary);
}
/* ============================================================
CODE E PRE
============================================================ */
.dark code,
.dark-mode code,
[data-theme="dark"] code,
.dark pre,
.dark-mode pre,
[data-theme="dark"] pre {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
/* ============================================================
HR (HORIZONTAL RULE)
============================================================ */
.dark hr,
.dark-mode hr,
[data-theme="dark"] hr {
border-color: var(--color-border);
}
/* ============================================================
ALERTAS — movido para components/alert.css
============================================================ */
/* ============================================================
SEÇÃO DE SERVIÇOS (MENU DE MÓDULO)
============================================================ */
/* Container principal de serviços */
html.dark .servicos-section,
html.dark-mode .servicos-section,
html[data-theme="dark"] .servicos-section {
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
/* Cabeçalhos de categoria */
html.dark .categoria-servicos h3,
html.dark-mode .categoria-servicos h3,
html[data-theme="dark"] .categoria-servicos h3 {
color: var(--color-text-primary);
}
/* Links de serviço */
html.dark .servico-link,
html.dark-mode .servico-link,
html[data-theme="dark"] .servico-link {
color: var(--color-text-primary);
}
html.dark .servico-link:hover,
html.dark-mode .servico-link:hover,
html[data-theme="dark"] .servico-link:hover {
background-color: var(--color-bg-tertiary);
}
html.dark .servico-link p,
html.dark-mode .servico-link p,
html[data-theme="dark"] .servico-link p {
color: var(--color-text-primary);
}
/* Mais acessados */
html.dark .mais-acessados-section h2,
html.dark-mode .mais-acessados-section h2,
html[data-theme="dark"] .mais-acessados-section h2 {
color: var(--color-text-primary);
}
html.dark .mais-acessados-section h4,
html.dark-mode .mais-acessados-section h4,
html[data-theme="dark"] .mais-acessados-section h4 {
color: var(--color-text-primary);
}
html.dark .mais-acessados-section a,
html.dark-mode .mais-acessados-section a,
html[data-theme="dark"] .mais-acessados-section a {
border-color: var(--color-border);
}
html.dark .mais-acessados-section a:hover,
html.dark-mode .mais-acessados-section a:hover,
html[data-theme="dark"] .mais-acessados-section a:hover {
background-color: var(--color-bg-tertiary);
}
/* === compat/legacy-stepper.css === */
/**
* Legacy Stepper Compatibility Bridge
*
* Maps legacy stepper classes (.step, .detail-step, .icon-step) to Design System styles
* This bridge creates a sidebar layout matching the Figma design pattern:
* - Left sidebar: All step indicators stacked vertically
* - Main content: Active step's content fills the area
* - Uses display: contents to flatten list items into grid without changing HTML
*
* @version 2.0.0
* @date 2025-11-14
*/
/* ============================================================
BASE STEPPER STRUCTURE - SIDEBAR LAYOUT
============================================================ */
/* Container: Two-column grid (sidebar + main content) */
ul.stepper {
display: grid;
grid-template-columns: 272px 1fr;
column-gap: 32px;
row-gap: 12px;
align-items: start;
list-style: none;
padding: 0;
margin: 0;
}
/* Flatten list items so children flow directly into grid */
ul.stepper > li.step {
display: contents;
}
/* ============================================================
LEFT SIDEBAR - STEP INDICATORS (All stacked vertically)
============================================================ */
/* Step indicator cards - all go to column 1 (sidebar) */
ul.stepper .detail-step {
grid-column: 1;
display: flex;
gap: 12px;
align-items: center;
padding: 12px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all 0.3s ease;
cursor: pointer;
}
ul.stepper .detail-step:hover {
background: var(--color-bg-secondary);
}
/* Icon (legacy .icon-step) mapped to DS look */
ul.stepper .icon-step {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #E5E7EB;
color: #8D95A8;
flex-shrink: 0;
font-size: 20px;
transition: all 0.3s ease;
}
/* Active icon (legacy .step-active) = DS active colors (red like Figma) */
/* O JavaScript adiciona .step-active ao li.step pai, não ao .icon-step */
ul.stepper .step-active .icon-step,
ul.stepper .icon-step.step-active {
background: #DC2626;
color: var(--color-text-light);
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
/* Active step card highlight */
ul.stepper .step-active .detail-step strong,
ul.stepper .icon-step.step-active ~ p strong {
color: var(--color-neutral-800);
font-weight: 600;
}
/* Step text styling */
ul.stepper .detail-step p {
margin: 0;
line-height: 1.4;
flex: 1;
}
ul.stepper .detail-step strong {
display: block;
font-size: 16px;
font-weight: 500;
color: #5A6478;
margin-bottom: 4px;
}
ul.stepper .detail-step small {
display: block;
font-size: 14px;
color: #8D95A8;
}
/* ============================================================
MAIN CONTENT AREA - ACTIVE STEP CONTENT
============================================================ */
/* Step content - goes to column 2 (main area) */
ul.stepper .step-content {
grid-column: 2;
padding: 8px 0 16px;
min-height: 400px;
}
/* JS hides non-active content using .hidden */
ul.stepper .step-content.hidden {
display: none !important;
}
/* Navigation buttons area - sticky at bottom */
ul.stepper .step-action {
display: flex;
gap: 12px;
justify-content: flex-start;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
position: sticky;
bottom: 0;
background: transparent;
z-index: 10;
}
ul.stepper .step-action.step-action--end {
justify-content: flex-end;
}
/* ============================================================
MDL BUTTON COMPATIBILITY - Figma Style
============================================================ */
/* Legacy MDL button look mapped to DS buttons (robust even if MDL CSS order changes) */
.mdl-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border-radius: var(--radius-md);
font-weight: 500;
font-size: 16px;
text-decoration: none;
cursor: pointer;
border: 1px solid var(--color-border);
background: var(--color-bg-primary);
color: var(--color-text-primary);
transition: all 0.2s ease;
}
.mdl-button:hover {
background: var(--color-bg-secondary);
}
/* "Próximo" button - Red like Figma design */
.mdl-button.prox {
background: #DC2626;
border-color: #DC2626;
color: var(--color-text-light);
font-weight: 600;
}
.mdl-button.prox:hover {
background: #B91C1C;
border-color: #B91C1C;
}
/* "Voltar" and "Cancelar" buttons - Gray outline */
.mdl-button.back,
.mdl-button.cancel {
background: transparent;
border-color: var(--color-border);
color: var(--color-text-primary);
}
.mdl-button.back:hover,
.mdl-button.cancel:hover {
background: var(--color-bg-secondary);
}
/* ============================================================
UTILITY FIXES
============================================================ */
/* Neutralize leftover Tailwind spacing that doesn't apply to vertical stacks */
ul.stepper.space-x-2 > * {
margin-right: 0 !important;
}
/* ============================================================
DARK MODE
============================================================ */
.dark ul.stepper .detail-step {
background: var(--color-bg-dark);
border-color: var(--color-neutral-700);
}
.dark ul.stepper .icon-step {
background: var(--color-neutral-700);
color: #707896;
}
.dark ul.stepper .step-active .icon-step,
.dark ul.stepper .icon-step.step-active {
background: var(--color-accent-300);
color: var(--color-text-light);
}
.dark ul.stepper .detail-step strong {
color: var(--color-neutral-400);
}
.dark ul.stepper .detail-step small {
color: #707896;
}
.dark ul.stepper > li.step.active .detail-step strong,
.dark ul.stepper .icon-step.step-active ~ p strong {
color: var(--color-text-light);
}
.dark ul.stepper > li.step:not(:last-child)::before {
background: var(--color-neutral-700);
}
.dark ul.stepper .step-action {
border-top-color: var(--color-neutral-700);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
/* Stack sidebar on top of content on mobile */
ul.stepper {
grid-template-columns: 1fr;
row-gap: 16px;
}
ul.stepper .detail-step,
ul.stepper .step-content {
grid-column: 1;
}
/* Make step action buttons full width on mobile */
ul.stepper .step-action {
flex-direction: column;
}
ul.stepper .step-action .mdl-button {
width: 100%;
}
}
/* === compat/modal-legacy-fix.css === */
.componente-modal-fieldset {
background: var(--color-bg-secondary, #f6f6f9);
border: 1px solid var(--color-border-light, #ececf2);
border-radius: var(--radius-lg, 16px);
padding: var(--spacing-lg, 16px);
margin-bottom: var(--spacing-lg, 16px);
color: var(--color-text-primary, #12151f);
display: flex;
flex-direction: column;
gap: var(--spacing-md, 12px);
box-shadow: 0 10px 30px rgba(18, 21, 31, 0.08);
}
.dark .componente-modal-fieldset {
background: rgba(30, 35, 53, 0.9);
border-color: rgba(206, 211, 226, 0.18);
color: var(--color-text-light, #f6f6f9);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.ds-fk-header {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
}
.ds-fk-header .ds-fk-trigger {
background: transparent;
color: var(--color-primary, #3f68fb);
border: none;
padding: 0;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs, 4px);
}
.ds-fk-header .ds-fk-trigger:hover,
.ds-fk-header .ds-fk-trigger:focus {
text-decoration: underline;
}
.ds-fk-header .icone-adicionar {
margin-left: auto;
background: rgba(63, 104, 251, 0.1);
border: none;
border-radius: var(--radius-full, 999px);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-primary, #3f68fb);
transition: background 0.2s ease, transform 0.2s ease;
}
.ds-fk-header .icone-adicionar:hover {
background: rgba(63, 104, 251, 0.2);
transform: scale(1.05);
}
.dark .ds-fk-header .icone-adicionar {
background: rgba(63, 104, 251, 0.25);
}
.componente-modal-sub-titulo {
color: var(--color-text-muted, #7a839f);
font-size: 0.85rem;
}
.dark .componente-modal-sub-titulo {
color: rgba(246, 246, 249, 0.7);
}
.componente-modal-table {
width: 100%;
border-collapse: collapse;
background: var(--color-bg-primary, #ffffff);
border-radius: var(--radius-md, 12px);
overflow: hidden;
}
.componente-modal-table thead {
background: rgba(63, 104, 251, 0.08);
}
.componente-modal-table th,
.componente-modal-table td {
padding: var(--spacing-sm, 10px);
text-align: left;
border-bottom: 1px solid var(--color-border-light, #ececf2);
color: var(--color-text-primary, #12151f);
font-size: 0.9rem;
}
.dark .componente-modal-table {
background: rgba(18, 21, 31, 0.9);
}
.dark .componente-modal-table th,
.dark .componente-modal-table td {
color: var(--color-text-light, #f6f6f9);
border-color: rgba(206, 211, 226, 0.12);
}
#erro-id_perfil,
#erro-id_documento,
#erro-id_endereco,
#erro-id_telefone {
color: var(--color-danger, #df3f48);
}
.componente-modal-a {
color: var(--color-primary, #3f68fb);
}
.dark .componente-modal-a {
color: var(--color-primary, #3f68fb);
}
.componente-modal-table tr:last-child td {
border-bottom: none;
}
/* === compat/sweetalert2-custom.css === */
/**
* SweetAlert2 Custom Styles - Design System SIDASP
*
* Customização do SweetAlert2 para seguir o Figma
* Substitui estilos padrão do SweetAlert2
*
* Referência: /opt/sources/cda/sidasp/public/tmp/modal_sucesso.css (Figma export)
*
* @version 1.0.0
* @date 2025-12-23
*/
/* ============================================================
BASE MODAL
============================================================ */
.swal2-popup {
background: #F6F6F9 !important;
border-radius: 8px !important;
padding: 40px 80px !important;
max-width: 650px !important;
width: 650px !important;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Dark Mode */
.dark .swal2-popup,
[data-theme="dark"] .swal2-popup {
background: #1E2335 !important;
}
/* ============================================================
ÍCONE DE SUCESSO
============================================================ */
.swal2-icon.swal2-success {
width: 48px !important;
height: 48px !important;
margin: 0 auto 32px auto !important;
border: none !important;
background: #DDE4D2 !important;
border-radius: 8px !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
background-color: #2D470A !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
display: none !important;
}
.swal2-icon.swal2-success::before,
.swal2-icon.swal2-success::after {
display: none !important;
}
/* Ajusta o checkmark para ficar centralizado no box */
.swal2-icon.swal2-success .swal2-success-line-tip {
top: 28px !important;
left: 10px !important;
width: 12px !important;
}
.swal2-icon.swal2-success .swal2-success-line-long {
top: 24px !important;
right: 10px !important;
width: 20px !important;
}
/* Dark Mode - Ícone de sucesso */
.dark .swal2-icon.swal2-success,
[data-theme="dark"] .swal2-icon.swal2-success {
background: rgba(221, 228, 210, 0.15) !important;
}
.dark .swal2-icon.swal2-success [class^='swal2-success-line'],
[data-theme="dark"] .swal2-icon.swal2-success [class^='swal2-success-line'] {
background-color: #9DC66B !important;
}
/* ============================================================
ÍCONE DE LOADING/AGUARDAR
============================================================ */
.swal2-icon.swal2-info {
width: 48px !important;
height: 48px !important;
margin: 0 auto 32px auto !important;
border: none !important;
background: rgba(63, 104, 251, 0.15) !important;
border-radius: 8px !important;
color: #3F68FB !important;
}
.swal2-icon.swal2-info::before {
color: #3F68FB !important;
}
/* Dark Mode */
.dark .swal2-icon.swal2-info,
[data-theme="dark"] .swal2-icon.swal2-info {
background: rgba(63, 104, 251, 0.2) !important;
}
/* ============================================================
ÍCONE DE WARNING
============================================================ */
.swal2-icon.swal2-warning {
width: 48px !important;
height: 48px !important;
margin: 0 auto 32px auto !important;
border: none !important;
background: rgba(245, 158, 11, 0.15) !important;
border-radius: 8px !important;
color: #F59E0B !important;
}
/* Dark Mode */
.dark .swal2-icon.swal2-warning,
[data-theme="dark"] .swal2-icon.swal2-warning {
background: rgba(245, 158, 11, 0.2) !important;
}
/* ============================================================
ÍCONE DE ERRO
============================================================ */
.swal2-icon.swal2-error {
width: 48px !important;
height: 48px !important;
margin: 0 auto 32px auto !important;
border: none !important;
background: rgba(201, 10, 10, 0.1) !important;
border-radius: 8px !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
background-color: #C90A0A !important;
}
/* Dark Mode */
.dark .swal2-icon.swal2-error,
[data-theme="dark"] .swal2-icon.swal2-error {
background: rgba(201, 10, 10, 0.15) !important;
}
/* ============================================================
TÍTULO
============================================================ */
.swal2-title {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 30px !important;
color: #12151F !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
/* Dark Mode */
.dark .swal2-title,
[data-theme="dark"] .swal2-title {
color: #E0E2EB !important;
}
/* ============================================================
TEXTO / CONTEÚDO
============================================================ */
.swal2-html-container {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 26px !important;
color: #394360 !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* Dark Mode */
.dark .swal2-html-container,
[data-theme="dark"] .swal2-html-container {
color: #BFC3CF !important;
}
/* ============================================================
BOTÕES
============================================================ */
.swal2-actions {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
gap: 12px !important;
}
/* Botão de confirmar - cor primaria do sistema (vermelho #970707) */
.swal2-confirm {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 24px !important;
color: #FFFFFF !important;
background: var(--color-primary, #970707) !important;
border: none !important;
border-radius: 8px !important;
padding: 8px 10px !important;
min-width: 100% !important;
width: 100% !important;
height: 44px !important;
box-shadow: none !important;
transition: all 0.2s ease !important;
}
.swal2-confirm:hover,
div.swal2-container button.swal2-styled.swal2-confirm:hover,
div.swal2-container button.swal2-confirm:hover,
.swal2-popup .swal2-actions .swal2-confirm:hover {
background: #7a0606 !important;
background-color: #7a0606 !important;
}
.swal2-confirm:focus,
div.swal2-container button.swal2-styled.swal2-confirm:focus,
div.swal2-container button.swal2-confirm:focus,
.swal2-popup .swal2-actions .swal2-confirm:focus {
box-shadow: 0 0 0 3px rgba(151, 7, 7, 0.25) !important;
}
/* Botão de cancelar */
.swal2-cancel {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 24px !important;
color: #394360 !important;
background: transparent !important;
border: 1px solid #CED3E2 !important;
border-radius: 8px !important;
padding: 8px 10px !important;
min-width: 48% !important;
height: 44px !important;
box-shadow: none !important;
transition: all 0.2s ease !important;
}
.swal2-cancel:hover {
background: #F6F6F9 !important;
border-color: #B0B5C8 !important;
}
/* Dark Mode - Botão cancelar */
.dark .swal2-cancel,
[data-theme="dark"] .swal2-cancel {
color: #E0E2EB !important;
border-color: #4B5563 !important;
background: transparent !important;
}
.dark .swal2-cancel:hover,
[data-theme="dark"] .swal2-cancel:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
/* Quando há dois botões, ajustar largura */
.swal2-actions:has(.swal2-cancel) .swal2-confirm {
min-width: 48% !important;
width: auto !important;
flex: 1 !important;
}
.swal2-actions:has(.swal2-cancel) .swal2-cancel {
flex: 1 !important;
}
/* ============================================================
LOADING SPINNER
============================================================ */
.swal2-loading .swal2-confirm {
background: var(--color-primary, #970707) !important;
}
.swal2-loader {
border-color: var(--color-primary, #970707) transparent var(--color-primary, #970707) transparent !important;
width: 40px !important;
height: 40px !important;
}
/* ============================================================
BACKDROP
============================================================ */
.swal2-container {
background: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
/* ============================================================
ANIMAÇÕES
============================================================ */
.swal2-popup.swal2-show {
animation: swal2-show 0.3s ease !important;
}
@keyframes swal2-show {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.swal2-popup.swal2-hide {
animation: swal2-hide 0.2s ease !important;
}
@keyframes swal2-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 768px) {
.swal2-popup {
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
padding: 32px 24px !important;
}
.swal2-title {
font-size: 18px !important;
}
.swal2-html-container {
font-size: 14px !important;
line-height: 22px !important;
}
.swal2-actions {
flex-direction: column !important;
}
.swal2-actions:has(.swal2-cancel) .swal2-confirm,
.swal2-actions:has(.swal2-cancel) .swal2-cancel {
min-width: 100% !important;
width: 100% !important;
}
}
/* ============================================================
PRINT
============================================================ */
@media print {
.swal2-container {
display: none !important;
}
}
/* === compat/tailwind-compat.css === */
/**
* Design System - Compatibilidade com Tailwind
*
* Este arquivo adiciona classes do Design System que funcionam como
* aliases do Tailwind para garantir compatibilidade e dark mode
*
* @version 1.0.0
* @date 2025-10-29
*/
/* ============================================================
CORES DE TEXTO (Compatibilidade Tailwind + Design System)
============================================================ */
.text-primary {
color: var(--color-text-primary) !important;
}
.text-secondary {
color: var(--color-text-secondary) !important;
}
.text-muted {
color: var(--color-text-muted) !important;
}
.text-light,
.text-white {
color: var(--color-text-light) !important;
}
.text-success {
color: var(--color-success) !important;
}
.text-warning {
color: var(--color-warning) !important;
}
.text-danger,
.text-error {
color: var(--color-danger) !important;
}
/* ============================================================
CORES DE FUNDO (Compatibilidade Tailwind + Design System)
============================================================ */
.bg-primary {
background-color: var(--color-bg-primary) !important;
}
.bg-secondary {
background-color: var(--color-bg-secondary) !important;
}
.bg-tertiary {
background-color: var(--color-bg-tertiary) !important;
}
.bg-dark {
background-color: var(--color-bg-dark) !important;
}
.bg-white {
background-color: #FFFFFF !important;
}
.bg-success {
background-color: var(--color-success) !important;
}
.bg-warning {
background-color: var(--color-warning) !important;
}
.bg-danger {
background-color: var(--color-danger) !important;
}
/* ============================================================
CORES DE BORDA
============================================================ */
.border-primary {
border-color: var(--color-border) !important;
}
.border-light {
border-color: var(--color-border-light) !important;
}
.border-dark {
border-color: var(--color-border-dark) !important;
}
/* ============================================================
CORES ESPECÍFICAS PARA HOVER
============================================================ */
.hover\:text-primary:hover {
color: var(--color-text-primary) !important;
}
.hover\:text-secondary:hover {
color: var(--color-text-secondary) !important;
}
.hover\:bg-primary:hover {
background-color: var(--color-bg-primary) !important;
}
.hover\:bg-secondary:hover {
background-color: var(--color-bg-secondary) !important;
}
/* ============================================================
FOCUS STATES
============================================================ */
.focus\:text-primary:focus {
color: var(--color-text-primary) !important;
}
.focus\:bg-primary:focus {
background-color: var(--color-bg-primary) !important;
}
.focus\:border-primary:focus {
border-color: var(--color-accent-400) !important;
}