/* =============================================================================
   client/src/styles/theme.css
   ---------------------------------------------------------------------------
   Theme tokens: paleta, tipografia, espaçamento, sombras, transições e status.
   Melhorias:
   - Contraste e legibilidade revisados (WCAG AA onde aplicável)
   - Tokens adicionais NÃO-BREAKING (mantendo nomes originais)
   - Utilitários de alpha e foco consistente
   - Suporte a forced-colors (acessibilidade) e reduced-motion
   Autor: caarlosandree
   Data: 2025-08-14 22:00:00
   ========================================================================= */



/* ============================================================================ */

/* 🎨 PALETA DE CORES (NOMES ORIGINAIS PRESERVADOS)                              */

/* ============================================================================ */

:root {

    /* 🟢 Cores Primárias (Verdes) */
    --color-plano-verde-escuro: #00323C;
    --color-plano-verde-vibrante-1: #00A078;
    --color-plano-verde-vibrante-2: #00D26E;
    --color-plano-preto-profundo: #141414;
    --color-white: #fff;

    /* 🎨 Cores Individuais Personalizáveis */
    --cor-principal: #00A078;
    --cor-botoes: #00A078;
    --cor-navbar: #003230;
    --cor-texto-navbar: #FFFFFF;
    --cor-fundo-login: #F5F5F5;
    --cor-hover: #00D26E;

    /* ⚫ Paleta de Cinzas */
    --color-plano-cinza-50: #f9fafb;
    --color-plano-cinza-100: #f3f4f6;
    --color-plano-cinza-200: #e5e7eb;
    --color-plano-cinza-300: #d1d5db;
    --color-plano-cinza-400: #9ca3af;
    --color-plano-cinza-500: #6b7280;
    --color-plano-cinza-600: #4b5563;
    --color-plano-cinza-700: #374151;
    --color-plano-cinza-800: #1e293b;
    --color-plano-cinza-900: #0f172a;

    /* 🚦 Cores de Status (Base) */
    --color-error-base: #d63a3a;
    --color-success-base: #00C774;
    --color-warning-base: #F4A100;
    --color-info-base: #008BFF;
    --color-danger-base: #e74c3c;

    /* 🚦 Cores de Status (Variantes Light & Dark) */
    --color-error-light: #fee2e2;
    --color-error: var(--color-error-base);
    --color-error-dark: #b91c1c;
    --color-success-light: #e6f9f1;
    --color-success: var(--color-success-base);
    --color-success-dark: #065f46;
    --color-warning-light: #fef3c7;
    --color-warning: var(--color-warning-base);
    --color-warning-dark: #b45309;
    --color-info-light: #e0f2fe;
    --color-info: var(--color-info-base);
    --color-info-dark: #0c4a6e;
    --color-danger-light: #fee2e2;
    --color-danger: var(--color-danger-base);
    --color-danger-dark: #b91c1c;
    --color-muted: #94a3b8;

    /* 🎨 Cores RGB para uso com transparência (NOMES PRESERVADOS) */
    --color-info-rgb: 0, 139, 255;
    --color-warning-rgb: 244, 161, 0;
    --color-error-rgb: 214, 58, 58;
    --color-danger-rgb: 231, 76, 60;
    --color-success-rgb: 0, 199, 116;

    /* ======================================================================== */

    /* 🟡 TOKENS DE DESIGN PARA COMPONENTES                                     */

    /* ======================================================================== */

    /* 🎨 Cores de UI */
    --color-primary: var(--cor-principal);
    --color-primary-light: #3fb795;
    --color-primary-dark: var(--cor-navbar);
    --color-primary-light-transparent: #a3c2d5;
    
    /* Aliases para compatibilidade com designTokens.css */
    --color-secondary: #7159c1;
    --color-black: var(--color-plano-preto-profundo);
    --color-gray-100: var(--color-plano-cinza-100);
    --color-gray-300: var(--color-plano-cinza-300);
    --color-gray-500: var(--color-plano-cinza-500);
    --color-gray-700: var(--color-plano-cinza-700);
    --color-gray-900: var(--color-plano-cinza-900);
    --color-background-main: var(--color-plano-cinza-100);
    --color-background-offset: var(--color-white);
    --color-background-light: #f9fafb;
    --color-text-main: var(--color-plano-cinza-800);
    --color-text-primary: var(--color-plano-cinza-800);
    --color-text-secondary: var(--color-plano-cinza-500);
    --color-text-on-primary: var(--color-white);
    --border-color: var(--color-plano-cinza-200);
    --border-color-light: var(--color-plano-cinza-100);

    /* 🌑 Suporte para modo escuro (tokens base) */
    --color-background-dark: #0b1220; /* mais profundo para contraste */
    --color-surface-dark: #111827;
    --color-border-color-dark: #334155;
    --color-text-primary-dark: #e5e7eb;
    --color-text-secondary-dark: #94a3b8;

    /* ======================================================================== */

    /* 🟡 CORES DE STATUS PARA CONTAINERS (Solicitação Mensal)                   */

    /*      (NOMES PRESERVADOS)                                                 */

    /* ======================================================================== */
    --container-status-pendente-bg: var(--color-warning-light);
    --container-status-pendente-border: var(--color-warning);
    --container-status-parcialmente_enviados-bg: var(--color-info-light);
    --container-status-parcialmente_enviados-border: var(--color-info);
    --container-status-pendente_aprovacao-bg: var(--color-info-light);
    --container-status-pendente_aprovacao-border: var(--color-info);
    --container-status-parcialmente_aprovados-bg: var(--color-info-light);
    --container-status-parcialmente_aprovados-border: var(--color-info-dark);
    --container-status-aprovado-bg: var(--color-success-light);
    --container-status-aprovado-border: var(--color-success);
    --container-status-concluido-bg: var(--color-success-light);
    --container-status-concluido-border: var(--color-success);
    --container-status-rejeitado-bg: var(--color-danger-light);
    --container-status-rejeitado-border: var(--color-danger);
    --container-status-ausente_aprovado-bg: #eafff4;
    --container-status-ausente_aprovado-border: #bbf7d0;
    --container-status-ausente_pendente-bg: var(--color-warning-light);
    --container-status-ausente_pendente-border: var(--color-warning);
    --container-status-em_andamento-bg: var(--color-info-light);
    --container-status-em_andamento-border: var(--color-info);
    --container-status-pendente_envio-bg: var(--color-warning-light);
    --container-status-pendente_envio-border: var(--color-warning);
    --container-status-removido-bg: var(--color-plano-cinza-100);
    --container-status-removido-border: var(--color-plano-cinza-600);
    --container-status-cancelado-bg: var(--color-plano-cinza-100);
    --container-status-cancelado-border: var(--color-plano-cinza-600);
    --container-status-expirado-bg: #f4f4f4;
    --container-status-expirado-border: var(--color-muted);

    /* ======================================================================== */

    /*                                    Charts                                */

    /* ======================================================================== */

    /* Backgrounds */
    --color-background-card: #fff;
    --color-background-secondary: #f8fafc;
    --color-background-hover: #f9fafb;

    /* Borders */
    --color-border: #d1d5db;
    --color-border-light: #e5e7eb;
    --color-border-hover: #9ca3af;

    /* ======================================================================== */

    /* TOKENS DE DESIGN (Variáveis de aplicação)                                */

    /* ======================================================================== */

    /* 🔠 Tipografia */
    --font-family-base: 'Sans', 'Inter', arial, sans-serif;
    --font-family: var(--font-family-base);
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --font-4xl: 2.5rem;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;

    /* 📏 Espaçamento */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 4rem;
    
    /* Aliases para compatibilidade */
    --spacing-1: var(--spacing-xs);
    --spacing-2: var(--spacing-sm);
    --spacing-3: 0.75rem;
    --spacing-4: var(--spacing-md);
    --spacing-5: 1.25rem;
    --spacing-6: var(--spacing-lg);
    --spacing-8: var(--spacing-xl);
    --spacing-10: var(--spacing-2xl);
    --spacing-12: var(--spacing-3xl);
    --spacing-16: var(--spacing-4xl);

    /* 🔲 Bordas e Raios */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* 🌟 Sombreamento */
    --shadow-sm: 0 2px 4px rgb(0 0 0 / 5%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 12%);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);

    /* ✨ Transições */
    --transition-base: all 0.2s ease-in-out;

    /* 🗂️ Z-Index */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ======================================================================== */

    /* ➕ ADIÇÕES NÃO-BREAKING (NOVOS TOKENS AUXILIARES)                         */

    /* ======================================================================== */

    /* Anéis de foco consistentes */
    --focus-ring: 0 0 0 3px rgb(0 139 255 / 35%); /* usa info */
    --focus-ring-strong: 0 0 0 3px rgb(0 199 116 / 45%); /* usa success */

    /* Alphas utilitários para backgrounds suaves (sem trocar nomes existentes) */
    --alpha-8: 0.08;
    --alpha-12: 0.12;
    --alpha-16: 0.16;

    /* Texto sobre fundos de status (melhor contraste) */
    --text-on-status: #0f172a;          /* dark slate para fundos claros */
    --text-on-status-strong: #0b1220;   /* um pouco mais escuro */

    /* Superfícies elevadas claras */
    --surface-elev-1: #fff;
    --surface-elev-2: #fcfcfd;
}

/* ============================================================================ */

/* ♿ Acessibilidade extra                                                        */

/* ============================================================================ */

/* High-contrast mode (Windows/UA) */

@media (forced-colors: active) {

    :root {
        --border-color: CanvasText;
        --color-text-primary: CanvasText;
        --color-text-secondary: GrayText;
        --focus-ring: 0 0 0 3px Highlight;
        --focus-ring-strong: 0 0 0 3px Highlight;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    :root {
        --transition-base: none;
    }
}

/* Utilitário de foco visível (aplique em botões/links, sem renomear nada existente) */

.is-focusable:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: calc(var(--radius-sm));
}

/* Utilitário de texto escondido para leitores de tela */

.u-visually-hidden {
    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;
}
/* ============================================================================
   Global CSS - Reset, Base Styles e Utilitários
   ============================================================================ */

@font-face {
    font-family: Sans;
    src: url('/assets/SansVariable-DQ96Vraz.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================================
   Reset e Base
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-background-main);
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
}

/* ============================================================================
   Tipografia Base
   ============================================================================ */

h1 {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

h4 {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

button,
input,
textarea,
select {
    font-family: var(--font-family);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

/* ============================================================================
   Scrollbar Customizada
   ============================================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-plano-cinza-400);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-plano-cinza-500);
}

::-webkit-scrollbar-track {
    background-color: var(--color-plano-cinza-100);
}

/* ============================================================================
   Layout Utilitários
   ============================================================================ */

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

/* ============================================================================
   Componentes Base - Botões
   ============================================================================ */

.btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    font-size: var(--font-md);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    outline: none;
}

.btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:focus-visible {
    box-shadow: var(--focus-ring);
}

.btn:disabled {
    background-color: var(--color-plano-cinza-300);
    color: var(--color-plano-cinza-500);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Variantes de Botão */

.btn-secondary {
    background-color: var(--color-plano-cinza-200);
    color: var(--color-text-main);
}

.btn-secondary:hover {
    background-color: var(--color-plano-cinza-300);
}

.btn-danger {
    background-color: var(--color-error);
    color: var(--color-white);
}

.btn-danger:hover {
    background-color: var(--color-error-dark);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-link {
    background-color: transparent;
    color: var(--color-primary);
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover {
    background-color: transparent;
    color: var(--color-primary-dark);
}

/* ============================================================================
   Componentes Base - Cards
   ============================================================================ */

.card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ============================================================================
   Classes Utilitárias - Layout
   ============================================================================ */

/* Flexbox */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.center {
    justify-content: center;
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

.space-evenly {
    justify-content: space-evenly;
}

/* Grid */

.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-responsive {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ============================================================================
   Classes Utilitárias - Espaçamento
   ============================================================================ */

/* Gaps */

.gap-1 {
    gap: var(--spacing-sm);
}

.gap-2 {
    gap: var(--spacing-md);
}

.gap-3 {
    gap: var(--spacing-lg);
}

/* Margins */

.mt-1 {
    margin-top: var(--spacing-sm);
}

.mt-2 {
    margin-top: var(--spacing-md);
}

.mt-3 {
    margin-top: var(--spacing-lg);
}

.mb-1 {
    margin-bottom: var(--spacing-sm);
}

.mb-2 {
    margin-bottom: var(--spacing-md);
}

.mb-3 {
    margin-bottom: var(--spacing-lg);
}

/* Padding */

.p-1 {
    padding: var(--spacing-sm);
}

.p-2 {
    padding: var(--spacing-md);
}

.p-3 {
    padding: var(--spacing-lg);
}

/* ============================================================================
   Classes Utilitárias - Visual
   ============================================================================ */

.rounded {
    border-radius: var(--radius-md);
}

.shadow {
    box-shadow: var(--shadow-md);
}

.shadow-deep {
    box-shadow: var(--shadow-lg);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ============================================================================
   Responsividade
   ============================================================================ */

@media (width <= 768px) {

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .header .buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .container {
        padding: var(--spacing-sm);
    }
}/* ============================================================================ */

/* Animations Library                                                          */

/* - Um conjunto de animações reutilizáveis e padronizadas para o projeto.     */

/* - Controlado por variáveis CSS para fácil customização.                     */

/* ============================================================================ */

:root {

    /* -- Controles Globais de Animação -- */
    --animation-duration-fast: 0.3s;
    --animation-duration-normal: 0.5s;
    --animation-duration-slow: 1s;
    --animation-easing: ease-in-out;
}

/*
 * .fade-in: Faz um elemento aparecer suavemente.
 * Ótimo para conteúdo que é carregado dinamicamente.
 */

.fade-in {
    animation: fadeIn var(--animation-duration-normal) var(--animation-easing) forwards;
}

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * .scale-in: Faz um elemento aparecer escalando do menor para o maior.
 * Ideal para modais e pop-ups.
 */

.scale-in {
    animation: scaleIn var(--animation-duration-fast) var(--animation-easing) forwards;
}

@keyframes scaleIn {

    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * .slide-in-x: Desliza um elemento da direita para a esquerda.
 * Bom para painéis laterais ou notificações.
 */

.slide-in-x {
    animation: slideInX var(--animation-duration-normal) var(--animation-easing) forwards;
}

@keyframes slideInX {

    from {
        opacity: 0;
        transform: translateX(25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * .slide-in-y: Desliza um elemento de baixo para cima.
 * Útil para elementos que aparecem na parte inferior da tela.
 */

.slide-in-y {
    animation: slideInY var(--animation-duration-normal) var(--animation-easing) forwards;
}

@keyframes slideInY {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * .spin: Roda um elemento continuamente.
 * Perfeito para ícones de carregamento (loaders).
 */

.spin {
    animation: spin var(--animation-duration-slow) linear infinite;
}

@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*
 * NOVO: .pulse
 * Cria uma animação de pulsação para chamar a atenção.
 * Ideal para botões de "call-to-action" ou notificações.
 */

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(0 160 120 / 70%);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgb(0 160 120 / 0%);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(0 160 120 / 0%);
    }
}

/*
 * NOVO: .shake
 * Balança um elemento horizontalmente.
 * Ótimo para indicar erros em campos de formulário.
 */

.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-8px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(8px);
    }
}/* =============================================================================== */

/* client/src/styles/components/Toast.module.css                                   */

/* ------------------------------------------------------------------------------- */

/* Estilos modernos, acessíveis e responsivos para Toast notifications.            */

/* =============================================================================== */

._toastContainer_1ale6_11 {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 9999;
    pointer-events: none; /* Toasts não bloqueiam clique em fundo */
}

/* Posicionamentos */
._bottomright_1ale6_21 {
    bottom: 24px;
    right: 24px;
}

._bottomleft_1ale6_26 {
    bottom: 24px;
    left: 24px;
}

._bottomcenter_1ale6_31 {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
}

._topright_1ale6_37 {
    top: 24px;
    right: 24px;
}

._topleft_1ale6_42 {
    top: 24px;
    left: 24px;
}

._topcenter_1ale6_47 {
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
}

._toast_1ale6_11 {
    display: flex;
    align-items: center;
    background: white;
    padding: 0.9rem 1.3rem;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
    min-width: 250px;
    max-width: 320px;
    gap: 0.9rem;
    border-left: 6px solid;
    animation: _slideInRight_1ale6_1 0.25s ease forwards;
    pointer-events: auto; /* Permite clique nos botões */
}

._success_1ale6_68 {
    border-color: var(--color-plano-verde-vibrante-2);
}

._error_1ale6_72 {
    border-color: #e63946;
}

._warning_1ale6_76 {
    border-color: #f4a261;
}

._info_1ale6_80 {
    border-color: var(--color-plano-verde-escuro);
}

._icon_1ale6_84 {
    font-size: 1.4rem;
    color: var(--color-plano-verde-escuro);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

._success_1ale6_68 ._icon_1ale6_84 {
    color: var(--color-plano-verde-vibrante-2);
}

._error_1ale6_72 ._icon_1ale6_84 {
    color: #e63946;
}

._warning_1ale6_76 ._icon_1ale6_84 {
    color: #f4a261;
}

._info_1ale6_80 ._icon_1ale6_84 {
    color: var(--color-plano-verde-escuro);
}

._message_1ale6_109 {
    flex: 1;
    color: var(--color-plano-preto-profundo);
    font-weight: 500;
    font-size: 1rem;
    word-break: break-word;
}

._close_1ale6_117 {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    border-radius: 50%;
    padding: 2px;
    font-size: 1.1rem;
    transition: background-color 0.18s;
    margin-left: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

._close_1ale6_117:focus,
._close_1ale6_117:hover {
    background-color: rgb(0 0 0 / 7%);
    outline: none;
}

._action_1ale6_138 {
    background: var(--color-primary);
    border: none;
    color: white;
    padding: 0.35em 0.7em;
    border-radius: 5px;
    margin-left: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.18s;
}

._action_1ale6_138:focus,
._action_1ale6_138:hover {
    background: var(--color-primary-dark);
    outline: none;
}

@keyframes _slideInRight_1ale6_1 {

    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsividade */

@media (width <= 600px) {

    ._toastContainer_1ale6_11 {
        bottom: 12px;
        right: 12px;
        gap: 0.7rem;
    }

    ._toast_1ale6_11 {
        min-width: 180px;
        max-width: 94vw;
        padding: 0.7rem 0.8rem;
        font-size: 0.95rem;
    }

    ._icon_1ale6_84 {
        font-size: 1.1rem;
    }

    ._message_1ale6_109 {
        font-size: 0.95rem;
    }

    ._action_1ale6_138 {
        font-size: 0.85rem;
        padding: 0.3em 0.6em;
    }
}

@media (width <= 400px) {

    ._toast_1ale6_11 {
        min-width: 140px;
        max-width: 99vw;
        font-size: 0.9rem;
    }

    ._message_1ale6_109 {
        font-size: 0.9rem;
    }
}

/* =============================================================================== */

/* Fim do arquivo: Toast.module.css                                                */

/* =============================================================================== *//* ============================================================================
 * ESTILOS PARA O COMPONENTE ADVANCED TABLE
 * Tabela avançada com ordenação, paginação, responsividade, skeleton, ações e UX
 * Autor: caarlosandree
 * Data: 2025-09-05
 * ============================================================================ */

/* ===================
   CONTAINER PRINCIPAL
   =================== */

._advanced-table_158mc_12 {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;

    /* >>> Ajuste de largura total <<< */
    width: 100%;
    display: grid; /* permite que a área interna se expanda */
    grid-template-rows: auto 1fr auto; /* header / corpo / paginação (se houver) */
}

._advanced-table_158mc_12:focus-within {
    box-shadow: var(--shadow-md);
}

/* ===================
   TABELA PRINCIPAL
   =================== */

._table-wrapper_158mc_34 {
    overflow-x: auto;
    width: 100%; /* >>> garante que ocupe toda a largura do card <<< */
    scrollbar-width: thin;
    scrollbar-color: var(--color-plano-cinza-300) transparent;
}
._table-wrapper_158mc_34::-webkit-scrollbar { height: 8px; }
._table-wrapper_158mc_34::-webkit-scrollbar-track { background: var(--color-plano-cinza-100); }

._table-wrapper_158mc_34::-webkit-scrollbar-thumb {
    background-color: var(--color-plano-cinza-300);
    border-radius: 20px;
}

._table-wrapper_158mc_34 table {
    width: 100%;
    border-collapse: collapse;

    /* >>> a tabela nunca fica menor que o container <<< */
    min-width: 100%;

    /* se quiser evitar quebra agressiva das colunas, habilite:
       table-layout: fixed;
    */
}

/* ===================
   CABEÇALHO
   =================== */

thead {
    background-color: var(--color-plano-cinza-100);
    position: sticky;
    top: 0;
    z-index: 1;
}

th {
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

._th-content_158mc_84 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

th._sortable_158mc_90 {
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

th._sortable_158mc_90:hover {
    color: var(--color-text-primary);
    background-color: var(--color-plano-cinza-200);
}

th._sortable_158mc_90:focus-within {
    outline: 2px solid var(--color-plano-verde-vibrante-1);
    outline-offset: -2px;
    color: var(--color-text-primary);
}

._sort-icon_158mc_106 {
    transition: transform 0.18s;
}

/* ===================
   CORPO DA TABELA
   =================== */

td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

tbody tr {
    transition: background-color 0.2s, transform 0.1s;
}

._row_158mc_126, ._clickableRow_158mc_126 {

    /* Ajuda para highlight em hover/focus */
    transition: background-color 0.18s, box-shadow 0.14s;
}

._clickableRow_158mc_126 {
    cursor: pointer;
}

._clickableRow_158mc_126:hover, ._row_158mc_126:hover {
    background-color: var(--color-plano-cinza-100);
    box-shadow: 0 2px 8px rgb(30 100 200 / 4%);
}

._clickableRow_158mc_126:active {
    background-color: var(--color-plano-cinza-200);
    transform: translateY(1px);
}

._clickableRow_158mc_126:focus {
    outline: none;
    background-color: var(--color-plano-cinza-100);
    box-shadow: inset 0 0 0 2px var(--color-plano-verde-vibrante-1);
}

._empty-message_158mc_152 {
    text-align: center;
    padding: 2.5rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ===================
   AÇÕES
   =================== */

._acoes-header_158mc_163 {
    text-align: right;
    width: 1%;
    white-space: nowrap;
    min-width: 120px;
}

._table-actions_158mc_170 {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 100px;
}

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.18s;
    position: relative;
}

.btn-action:hover:not(:disabled) {
    background-color: var(--color-plano-cinza-200);
    color: var(--color-text-primary);
    transform: scale(1.18) translateY(-1px);
}

.btn-action:active:not(:disabled) {
    transform: scale(1.08) translateY(0);
}

.btn-action:focus {
    outline: 2px solid var(--color-plano-verde-vibrante-1);
    outline-offset: 2px;
}

.btn-action:disabled {
    color: var(--color-plano-cinza-400);
    cursor: not-allowed;
}
.btn-action.info { color: var(--color-info); }
.btn-action.info:hover:not(:disabled) { background-color: var(--color-info-light, #e0f2fe); }
.btn-action.edit { color: var(--color-warning); }
.btn-action.edit:hover:not(:disabled) { background-color: var(--color-warning-light, var(--color-warning-light, #fef3c7)); }
.btn-action.danger { color: var(--color-danger); }
.btn-action.danger:hover:not(:disabled) { background-color: var(--color-danger-light, #fee2e2); }

/* ===================
   SKELETON LOADER
   =================== */

._skeleton-cell_158mc_224 {
    height: 1.6em;
    background: linear-gradient(90deg,#f0f0f0 25%,#eaeaea 50%,#f0f0f0 75%);
    border-radius: 3px;
    animation: _skeleton-loading_158mc_1 1.2s infinite linear;
}

@keyframes _skeleton-loading_158mc_1 {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

/* ===================
   PAGINAÇÃO
   =================== */

._pagination_158mc_240 {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-plano-cinza-100);
    flex-wrap: wrap;
}

._pagination_158mc_240 span {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

._pagination_158mc_240 strong {
    color: var(--color-text-primary);
}

._pagination_158mc_240 button {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    color: var(--color-text-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.18s;
}

._pagination_158mc_240 button:hover:not(:disabled) {
    background-color: var(--color-plano-verde-vibrante-1);
    border-color: var(--color-plano-verde-vibrante-1);
    color: white;
    transform: scale(1.09) translateY(-1px);
}

._pagination_158mc_240 button:focus {
    outline: 2px solid var(--color-plano-verde-vibrante-1);
    outline-offset: 2px;
}

._pagination_158mc_240 button:active:not(:disabled) {
    transform: scale(1.02) translateY(0);
}

._pagination_158mc_240 button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===================
   RESPONSIVO MOBILE
   =================== */

@media (width <= 900px) {
    ._table-wrapper_158mc_34 table { min-width: 100%; }
}

@media (width <= 768px) {
    thead { display: none; }

    tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 1rem;
        background-color: var(--color-white);
    }
    tbody tr { box-shadow: var(--shadow-sm); }

    td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        text-align: right;
        border-bottom: 1px solid var(--border-color-light);
        font-size: 0.97rem;
        gap: 0.5rem;
    }

    td:last-child {
        border-bottom: none;
        display: flex;
        justify-content: flex-end;
    }

    td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-text-secondary);
        text-align: left;
        padding-right: 1rem;
        flex: 1;
        min-width: 90px;
        display: inline-block;
        flex-shrink: 0;
    }

    ._table-actions_158mc_170 {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    ._pagination_158mc_240 {
        justify-content: center;
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    ._pagination_158mc_240 button {
        flex: 1;
        min-width: 120px;
    }
}

@media (width <= 480px) {

    td {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 0.5rem 0;
        gap: 0.25rem;
        font-size: 0.94rem;
    }

    td::before {
        padding-right: 0;
        width: 100%;
        min-width: 0;
    }
    ._empty-message_158mc_152 { padding: 1.5rem 1rem; }
    td:last-child { flex-direction: row; justify-content: flex-end; }
    ._table-actions_158mc_170 { gap: 0.5rem; }
    .btn-action { width: 28px; height: 28px; }
}

/* ===================
   ALIGNMENT HELPERS
   =================== */
._align-left_158mc_386 { text-align: left !important; }
._align-center_158mc_387 { text-align: center !important; }
._align-right_158mc_388 { text-align: right !important; }
/* ============================================================================
   Input.module.css - Componente de Input Padronizado
   ============================================================================ */

._inputGroup_bpk66_5 {
    margin-bottom: var(--spacing-md);
    width: 100%;
}

._label_bpk66_10 {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

._required_bpk66_18 {
    color: var(--color-error);
    margin-left: 2px;
}

._inputWrapper_bpk66_23 {
    position: relative;
    display: flex;
    align-items: center;
}

._inputWrapper_bpk66_23._withIcon_bpk66_29 ._input_bpk66_5 {
    padding-right: 3rem;
}

._inputWrapper_bpk66_23._loading_bpk66_33 ._input_bpk66_5 {
    padding-right: 3rem;
}

/* Tamanhos */

._sm_bpk66_39 {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    min-height: 32px;
}

._md_bpk66_45 {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-md);
    min-height: 40px;
}

._lg_bpk66_51 {
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    min-height: 48px;
}

._input_bpk66_5 {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--color-background-offset);
    color: var(--color-text-primary);
    transition: var(--transition-base);
    outline: none;
    box-sizing: border-box;
}

._input_bpk66_5:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

/* Variantes */

._default_bpk66_75 {
    border-color: var(--border-color);
}

._error_bpk66_79 {
    border-color: var(--color-error);
}

._error_bpk66_79:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

._success_bpk66_88 {
    border-color: var(--color-success);
}

._success_bpk66_88:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
}

._warning_bpk66_97 {
    border-color: var(--color-warning);
}

._warning_bpk66_97:focus {
    border-color: var(--color-warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
}

/* Estados */

._loading_bpk66_33 {
    opacity: 0.7;
    cursor: not-allowed;
}

._readOnly_bpk66_113 {
    background-color: var(--color-gray-50);
    cursor: default;
}

._readOnly_bpk66_113:focus {
    border-color: var(--border-color);
    box-shadow: none;
}

._iconButton_bpk66_123 {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}

._iconButton_bpk66_123:hover {
    background-color: var(--color-background-hover);
    color: var(--color-text-primary);
}

._iconButton_bpk66_123:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Loading Spinner */

._loadingSpinner_bpk66_151 {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

._spinner_bpk66_161 {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-gray-300);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: _spin_bpk66_161 1s linear infinite;
}

@keyframes _spin_bpk66_161 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mensagens */

._message_bpk66_177 {
    margin-top: var(--spacing-xs);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
}

._errorMessage_bpk66_183 {
    color: var(--color-error);
}

._successMessage_bpk66_187 {
    color: var(--color-success);
}

._warningMessage_bpk66_191 {
    color: var(--color-warning);
}

/* Responsividade */

@media (width <= 600px) {
    ._sm_bpk66_39 {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        min-height: 28px;
    }

    ._md_bpk66_45 {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        min-height: 36px;
    }

    ._lg_bpk66_51 {
        padding: 0.6rem 0.8rem;
        font-size: 1rem;
        min-height: 44px;
    }
}

@media (width <= 400px) {
    ._sm_bpk66_39 {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
        min-height: 24px;
    }

    ._md_bpk66_45 {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        min-height: 32px;
    }

    ._lg_bpk66_51 {
        padding: 0.5rem 0.7rem;
        font-size: 0.9rem;
        min-height: 40px;
    }
}/* client/src/styles/components/forms/PasswordStrengthMeter.module.css */

/* Container do medidor de força */
._strengthContainer_1nw07_4 {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.55rem;
    margin-bottom: 0.2rem;
}

/* Tamanhos */
._strengthContainer_1nw07_4._sm_1nw07_13 {
    gap: 0.6rem;
    margin-top: 0.4rem;
    margin-bottom: 0.15rem;
}

._strengthContainer_1nw07_4._lg_1nw07_19 {
    gap: 1.2rem;
    margin-top: 0.7rem;
    margin-bottom: 0.3rem;
}

/* Variantes */
._strengthContainer_1nw07_4._compact_1nw07_26 {
    gap: 0.5rem;
    margin-top: 0.3rem;
    margin-bottom: 0.1rem;
}

._strengthContainer_1nw07_4._detailed_1nw07_32 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

/* Barra que agrupa os segmentos de força */
._strengthBar_1nw07_39 {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    height: 10px;
    min-width: 110px;
}

._strengthBar_1nw07_39._smBar_1nw07_48 {
    height: 8px;
    min-width: 90px;
    gap: 4px;
}

._strengthBar_1nw07_39._lgBar_1nw07_54 {
    height: 12px;
    min-width: 130px;
    gap: 8px;
}

._strengthSegment_1nw07_60 {
    height: 100%;
    border-radius: 5px;
    background-color: #ececec;
    transition: background 0.22s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 2.5px #0001;
}

._strengthSegment_1nw07_60._smSegment_1nw07_68 {
    border-radius: 3px;
    box-shadow: 0 1px 2px #0001;
}

._strengthSegment_1nw07_60._lgSegment_1nw07_73 {
    border-radius: 6px;
    box-shadow: 0 1px 3px #0001;
}

/* Animações */
._strengthContainer_1nw07_4._animated_1nw07_79 ._strengthSegment_1nw07_60 {
    transition: all 0.3s ease;
}

._strengthContainer_1nw07_4._animated_1nw07_79 ._strengthLabel_1nw07_83 {
    transition: color 0.3s ease;
}

/* Label do nível de força */
._strengthLabel_1nw07_83 {
    font-size: 0.98rem;
    font-weight: 700;
    min-width: 86px;
    text-align: left;
    color: #888;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px #0001;
}

._strengthLabel_1nw07_83._smLabel_1nw07_98 {
    font-size: 0.85rem;
    min-width: 70px;
}

._strengthLabel_1nw07_83._lgLabel_1nw07_103 {
    font-size: 1.1rem;
    min-width: 100px;
}

/* Dicas de melhoria */
._hintsContainer_1nw07_109 {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #ffc107;
}

._hintsLabel_1nw07_117 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #856404;
    margin-bottom: 0.3rem;
    display: block;
}

._hintsList_1nw07_125 {
    list-style: none;
    padding: 0;
    margin: 0;
}

._hintItem_1nw07_131 {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
    padding-left: 1rem;
    position: relative;
}

._hintItem_1nw07_131::before {
    content: "•";
    color: #ffc107;
    position: absolute;
    left: 0;
}

/* Requisitos detalhados */
._requirementsContainer_1nw07_147 {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

._requirementsLabel_1nw07_155 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #004085;
    margin-bottom: 0.3rem;
    display: block;
}

._requirementsList_1nw07_163 {
    list-style: none;
    padding: 0;
    margin: 0;
}

._requirementItem_1nw07_169 {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

._requirementItem_1nw07_169._requirementMet_1nw07_178 {
    color: #28a745;
}

._requirementIcon_1nw07_182 {
    font-size: 0.9rem;
    font-weight: bold;
}

._requirementItem_1nw07_169._requirementMet_1nw07_178 ._requirementIcon_1nw07_182 {
    color: #28a745;
}

._requirementItem_1nw07_169:not(._requirementMet_1nw07_178) ._requirementIcon_1nw07_182 {
    color: #dc3545;
}

@media (width <= 480px) {

    ._strengthContainer_1nw07_4 {
        gap: 0.5rem;
    }

    ._strengthBar_1nw07_39 {
        min-width: 75px;
        height: 8px;
        gap: 3px;
    }

    ._strengthLabel_1nw07_83 {
        font-size: 0.84rem;
        min-width: 70px;
    }
}
/* client/src/styles/components/layout/Layout.module.css */

._layoutContainer_iymkh_3 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--background-default, #f8f9fa);
}

._pageContent_iymkh_10 {
  flex: 1;
  width: 100%;
  padding: 2.2rem 2.5rem 2.5rem;
  margin-top: 60px; /* Espaço para Navbar fixa */
  transition: padding 0.2s;
}

@media (width <= 1024px) {

  ._pageContent_iymkh_10 {
    padding: 1.2rem 1rem 1.5rem;
  }
}

@media (width <= 768px) {

  ._pageContent_iymkh_10 {
    padding: 0.7rem 0.3rem 1rem;
    margin-top: 56px;
  }
}
._layout_1az7v_1 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-plano-cinza-100);
}

._mainContent_1az7v_8 {
    flex-grow: 1;

    /* O padding no topo corresponde à altura da navbar (desktop). */
    padding-top: 70px;
}

/* Responsividade: navbar menor no mobile */

@media (width <= 768px) {

    ._mainContent_1az7v_8 {
        padding-top: 60px;
    }
}/* client/src/styles/components/layout/PublicLayout.module.css */

._container_vfcd4_3 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

._content_vfcd4_11 {
    width: 100%;
}/* ========================================================================
   Modal - Estilos Modernizados, Acessibilidade e Responsividade de Alto Nível
   ======================================================================== */

/* 🔥 Overlay */

._modal-overlay_cqk73_7 {
    position: fixed;
    inset: 0;
    background: rgb(20 20 20 / 52%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Reduzido para permitir que selects fiquem acima */
    opacity: 0;
    animation: _fadeIn_cqk73_1 0.22s cubic-bezier(0.55, 0, 0.1, 1) forwards;
    cursor: pointer; /* UX: indica que pode fechar clicando */
    -webkit-backdrop-filter: blur(2px); /* Safari 9+ */
    backdrop-filter: blur(2px); /* Sofisticação visual opcional */
}

/* Desativa cursor pointer dentro do modal */

._modal_cqk73_7 {
    cursor: default;
}

@keyframes _fadeIn_cqk73_1 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes _fadeOut_cqk73_1 {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* 🔥 Modal Principal */

._modal_cqk73_7 {
    background: white;
    padding: 2.2rem 2.5rem;
    border-radius: 16px;
    width: 95%;
    max-width: 590px;
    box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
    outline: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Ajuste para melhor responsividade vertical */
    overflow-y: auto; /* Permite scroll se conteúdo exceder */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: _scaleUpCustom_cqk73_1 0.22s cubic-bezier(0.55, 0, 0.1, 1) forwards;
    background-clip: padding-box;
    transition: box-shadow 0.15s, border-radius 0.18s;
    /* Aplicação dinâmica do tema será feita via inline styles */
}

@keyframes _scaleUpCustom_cqk73_1 {
    0% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Foco acessível: realça ao navegar por tab */

._modal_cqk73_7:focus {
    box-shadow: 0 0 0 3px rgb(0 210 110 / 16%);
    outline: none;
}

/* 🔥 Cabeçalho do Modal */

._modal-header_cqk73_77 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    gap: 1rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.6rem;
}

._modal-header_cqk73_77 h2 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-plano-verde-escuro);
    font-weight: 700;
    flex: 1;
}

/* 🔥 Botão Fechar */

._modal-close_cqk73_97 {
    background: none;
    border: none;
    color: #e34242; /* Vermelho vibrante */
    font-size: 1.7rem;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s cubic-bezier(.7,0,.3,1), transform 0.13s;
    box-shadow: none;
    outline: none;
}

/* Efeito moderno: leve escala e vermelho mais forte ao hover/focus */

._modal-close_cqk73_97:hover,
._modal-close_cqk73_97:focus {
    color: #c80000; /* Vermelho mais escuro no hover/focus */
    transform: scale(1.18);
    text-shadow: 0 1px 8px rgb(227 66 66 / 13%);
    outline: none;
    background: none;
    box-shadow: none;
}

/* Foco para acessibilidade (teclado/tab): underline discreto */

._modal-close_cqk73_97:focus-visible {
    outline: none;
    text-decoration: underline solid #c80000 2px;
    text-underline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {

    ._modal-close_cqk73_97 {
        transition: color 0.18s, transform 0.13s, text-shadow 0.14s;
    }
}

/* 🔥 Conteúdo */

._modal-content_cqk73_143 {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

/* 🔥 Formulário */

._modal-form_cqk73_154 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 1.2rem;
}

._modal-form_cqk73_154 label {
    font-weight: 600;
    color: var(--color-plano-preto-profundo);
    margin-bottom: 2px;
    font-size: 0.95rem;
}

._modal-form_cqk73_154 input,
._modal-form_cqk73_154 select,
._modal-form_cqk73_154 textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid #e3e3e3;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.18s, background 0.18s;
    background: #fafafa;
    color: var(--color-plano-preto-profundo);
}

._modal-form_cqk73_154 input:focus,
._modal-form_cqk73_154 select:focus,
._modal-form_cqk73_154 textarea:focus {
    border-color: var(--color-plano-verde-vibrante-1);
    outline: none;
    box-shadow: 0 0 0 3px rgb(0 210 110 / 20%);
    background: #f7fdfb;
}

/* 🔥 Botão de Submit */

._modal-form_cqk73_154 button[type="submit"] {
    background: var(--color-plano-verde-vibrante-1);
    color: white;
    padding: 0.9rem 1.4rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgb(0 0 0 / 8%);
    transition: background 0.18s ease, box-shadow 0.16s ease, transform 0.16s ease;
    margin-top: 0.6rem;
}

._modal-form_cqk73_154 button[type="submit"]:hover {
    background: var(--color-plano-verde-escuro);
    box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
    transform: translateY(-2px);
}

._modal-form_cqk73_154 button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}

/* 🔥 Ações no rodapé (confirmar, cancelar) */

._modal-actions_cqk73_220 {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* Responsividade avançada para telas menores */

@media (width <= 900px) {

    ._modal_cqk73_7._large_cqk73_233, ._modal_cqk73_7._exlarge_cqk73_233 {
        max-width: 99vw;
        min-width: 0;
    }
}

@media (width <= 700px) {

    ._modal_cqk73_7 {
        padding: 1.2rem 0.8rem 1rem;
        max-width: 99vw;
        min-width: 0;
        font-size: 1rem;
        border-radius: 12px;
        box-shadow: 0 8px 18px rgb(0 0 0 / 12%);
    }

    ._modal-header_cqk73_77 h2 {
        font-size: 1.1rem;
    }
}

@media (width <= 500px) {

    ._modal_cqk73_7 {
        padding: 0.9rem 0.4rem 0.8rem;
        max-width: 100vw;
        border-radius: 10px;
        font-size: 0.98rem;
    }

    ._modal-header_cqk73_77 h2 {
        font-size: 1rem;
    }

    ._modal-close_cqk73_97 {
        font-size: 1.2rem;
        padding: 0.25rem;
    }

    ._modal-form_cqk73_154 label {
        font-size: 0.88rem;
    }

    ._modal-form_cqk73_154 input,
    ._modal-form_cqk73_154 select,
    ._modal-form_cqk73_154 textarea {
        padding: 0.6rem 0.7rem;
        font-size: 0.88rem;
    }

    ._modal-form_cqk73_154 button[type="submit"] {
        padding: 0.7rem 1rem;
        font-size: 0.93rem;
    }

    ._modal-actions_cqk73_220 {
        margin-top: 0.7rem;
        padding-top: 0.7rem;
        gap: 0.5rem;
    }
}

/* --- MODAL ESPECIAL LARGO --- */

._modal_cqk73_7._large_cqk73_233 {
    max-width: 900px;
}

._modal_cqk73_7._exlarge_cqk73_233 {
    max-width: 1000px;
}

/* Custom width via variable (opcional) */

._modal_cqk73_7._custom_cqk73_308 {
    max-width: 580px;
}

/* ======================================================================== *//* plano-a-portal/client/src/styles/components/modals/ModalAdicionarDocumento.module.css */

._form_1lgzr_3 { display: flex; flex-direction: column; gap: 1.5rem; }
._formGroup_1lgzr_4 { display: flex; flex-direction: column; gap: 0.5rem; }
._formGroup_1lgzr_4 label { font-weight: 600; color: var(--color-plano-preto-profundo); }

._formGroup_1lgzr_4 input, ._formGroup_1lgzr_4 select {
    padding: 0.75rem 1rem;
    border: 1.5px solid #e3e3e3;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.18s;
}

._formGroup_1lgzr_4 input:focus, ._formGroup_1lgzr_4 select:focus {
    border-color: var(--color-plano-verde-vibrante-1);
    outline: none;
    box-shadow: 0 0 0 3px rgb(0 210 110 / 20%);
}
._modalActions_1lgzr_20 { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f0f0f0; }

._checkboxGroup_1lgzr_22 { display: flex; align-items: center; gap: 0.75rem; }
._checkboxGroup_1lgzr_22 label { font-weight: 500; cursor: pointer; }
._checkboxGroup_1lgzr_22 input { width: 18px; height: 18px; cursor: pointer; }/* client/src/styles/components/modals/ConfirmacaoModal.module.css */

._modalOverlay_jtuek_3 {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 75%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que o modal fique acima de tudo */
}

._modalContent_jtuek_13 {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 450px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    outline: none; /* Remove o outline padrão do focus */
    animation: _fadeInScale_jtuek_1 0.2s ease-out; /* Adiciona uma pequena animação */
}

@keyframes _fadeInScale_jtuek_1 {

    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

._modalTitle_jtuek_37 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 1rem;
    text-align: center;
}

._modalMessage_jtuek_45 {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.5;
    text-align: center;
}

._modalActions_jtuek_53 {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

._cancelButton_jtuek_60,
._confirmButton_jtuek_61 {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

._cancelButton_jtuek_60 {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    color: var(--color-text-secondary);
}

._cancelButton_jtuek_60:hover {
    background-color: var(--color-plano-cinza-100);
}

._confirmButton_jtuek_61 {
    background-color: var(--color-error); /* Vermelho para desativar/excluir */
    border: 1px solid var(--color-error);
    color: var(--color-white);
}

._confirmButton_jtuek_61:hover {
    background-color: #dc3545; /* Um tom ligeiramente mais escuro */
    border-color: #dc3545;
}

._confirmButton_jtuek_61:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-error); /* Mantém a cor base mesmo desabilitado */
    border-color: var(--color-error);
}/* ============================================================================
 * Estilos para o Editor TipTap
 * Alterado em: 09/10/2025 20:30:00 (UTC-3)
 * ============================================================================
 */

/* Estilos base do editor */
.tiptap-editor {
  outline: none !important;
  min-height: 200px;
}

/* Placeholder */
.ProseMirror p.is-editor-empty:first-child::before {
  float: left;
  height: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* Parágrafos */
.tiptap-editor p {
  margin: 0.5em 0;
}

/* Títulos */
.tiptap-editor h1,
.tiptap-editor h2,
.tiptap-editor h3,
.tiptap-editor h4,
.tiptap-editor h5,
.tiptap-editor h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.3;
}

.tiptap-editor h1 {
  font-size: 2em;
}

.tiptap-editor h2 {
  font-size: 1.5em;
}

.tiptap-editor h3 {
  font-size: 1.25em;
}

/* Listas */
.tiptap-editor ul,
.tiptap-editor ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.tiptap-editor li {
  margin: 0.25em 0;
}

.tiptap-editor li p {
  margin: 0;
}

/* Citações */
.tiptap-editor blockquote {
  border-left: 3px solid #1976d2;
  padding-left: 1em;
  margin-left: 0;
  font-style: italic;
  color: #666;
  margin: 1em 0;
}

/* Código inline */
.tiptap-editor code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
}

/* Blocos de código */
.tiptap-editor pre {
  background-color: rgba(0, 0, 0, 0.95);
  color: #fff;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1em 0;
}

.tiptap-editor pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.875em;
}

/* Links */
.tiptap-editor a {
  color: #1976d2;
  text-decoration: underline;
  cursor: pointer;
}

.tiptap-editor a:hover {
  color: #115293;
}

/* Imagens */
.tiptap-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1em 0;
  display: block;
}

/* Linha horizontal */
.tiptap-editor hr {
  border: none;
  border-top: 2px solid #e0e0e0;
  margin: 2em 0;
}

/* Seleção de texto */
.tiptap-editor ::selection {
  background-color: rgba(25, 118, 210, 0.2);
}

/* Negrito */
.tiptap-editor strong {
  font-weight: 700;
}

/* Itálico */
.tiptap-editor em {
  font-style: italic;
}

/* Sublinhado */
.tiptap-editor u {
  text-decoration: underline;
}

/* Riscado */
.tiptap-editor s {
  text-decoration: line-through;
}

/* Scroll suave */
.tiptap-editor {
  scroll-behavior: smooth;
}

/* Focus */
.tiptap-editor:focus {
  outline: none;
}

/* Tabelas (se necessário) */
.tiptap-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

.tiptap-editor table td,
.tiptap-editor table th {
  border: 1px solid #e0e0e0;
  padding: 0.5em;
}

.tiptap-editor table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

/* Garantir que o editor ocupe espaço suficiente */
.ProseMirror {
  min-height: inherit;
}

/* Melhorar a experiência de digitação */
.tiptap-editor {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* client/src/styles/pages/RecuperarSenha.module.css */

._recuperar-senha-container_u0gpp_3 {
    display: flex;
    justify-content: center;
    align-items: center;

    /* CORREÇÃO: Garante que o container ocupe 100% da altura da tela */
    min-height: 100vh;

    /* CORREÇÃO: Aplicando a cor de fundo de login personalizada */
    background: var(--cor-fundo-login);
    padding: 2rem;
}

._recuperar-senha-card_u0gpp_16 {
    background: white;
    padding: 2rem 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 400px;
    width: 100%;
    text-align: center; /* Centraliza o texto dentro do card */
}

._recuperar-senha-card_u0gpp_16 h2 {
    margin-bottom: 1rem;
    color: var(--color-plano-verde-escuro);
}

._recuperar-senha-card_u0gpp_16 p {
    margin-bottom: 2rem;
    font-size: 1rem;
    color: var(--color-plano-preto-profundo);
    line-height: 1.5; /* Melhora a legibilidade */
}

._recuperar-senha-card_u0gpp_16 form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

._recuperar-senha-card_u0gpp_16 input {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    border: 1.5px solid #dcdcdc;
    font-size: 1rem;
}

._recuperar-senha-card_u0gpp_16 input:focus {
    outline: 2px solid var(--color-plano-verde-vibrante-1);
    border-color: var(--color-plano-verde-vibrante-1);
}

._recuperar-senha-card_u0gpp_16 button {
    background-color: var(--color-plano-verde-vibrante-1);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

._recuperar-senha-card_u0gpp_16 button:hover {
    background-color: var(--color-plano-verde-escuro);
}

._recuperar-senha-card_u0gpp_16 button:disabled {
    background-color: var(--color-plano-cinza-claro);
    color: #999;
    cursor: not-allowed;
}/* client/src/styles/pages/PaginaAcao.module.css */

/* Fundo com gradiente da marca */

._container_9zuee_5 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(120deg, #00a078 0%, #3ce1be 100%);
    padding: 1.5rem;
}

/* Card central */

._card_9zuee_16 {
    background: #fff;
    padding: 2.8rem 2.5rem 2.3rem;
    border-radius: 20px;
    box-shadow: 0 6px 32px rgb(0 160 120 / 9%), 0 2px 12px rgb(0 0 0 / 7%);
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: _scale-in_9zuee_1 0.32s cubic-bezier(.44,1.15,.75,1) both;
}

/* Animação de entrada */

@keyframes _scale-in_9zuee_1 {
    0% { opacity: 0; transform: scale(0.94);}
    100% { opacity: 1; transform: scale(1);}
}

/* Logo */

._logo_9zuee_36 {
    width: 145px;
    height: auto;
    margin-bottom: 1.6rem;
}

/* Título */

._card_9zuee_16 h2 {
    color: #00a078;
    font-weight: 800;
    font-size: 1.65rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    margin-top: 0.5rem;
}

/* Email */

._card_9zuee_16 p {
    margin-bottom: 1.2rem;
    margin-top: 0.4rem;
    color: #275146;
    font-size: 1.04rem;
    line-height: 1.5;
}

/* Formulário */

._form_9zuee_65 {
    display: flex;
    flex-direction: column;
    gap: 1.45rem;
    margin-top: 0.2rem;
    text-align: left;
}

/* Grupo de inputs */

._inputGroup_9zuee_75 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Label dos inputs */

._inputGroup_9zuee_75 label {
    font-weight: 600;
    color: #2e5c4f;
    font-size: 0.97rem;
    margin-bottom: 0.15rem;
}

/* Input e botão do olho */

._passwordWrapper_9zuee_92 {
    position: relative;
    display: flex;
    align-items: center;
}

/* Input customizado */

._passwordWrapper_9zuee_92 input,
._inputGroup_9zuee_75 input {
    width: 100%;
    padding: 0.72rem 2.6rem 0.72rem 1rem;
    border: 1.4px solid #e2eaea;
    border-radius: 7px;
    font-size: 1.06rem;
    transition: border-color 0.16s;
    background: #f8fafb;
    color: #294c42;
    font-family: inherit;
    outline: none;
}

._passwordWrapper_9zuee_92 input:focus,
._inputGroup_9zuee_75 input:focus {
    border-color: #00a078;
    background: #fff;
}

/* Ícone do olho */

._eyeIcon_9zuee_122 {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #44a393;
    font-size: 1.3rem;
    padding: 0.35rem;
    z-index: 1;
    transition: color 0.15s;
}

._eyeIcon_9zuee_122:hover,
._eyeIcon_9zuee_122:focus {
    color: #00a078;
}

/* Botão principal */

._btn_9zuee_144 {
    background: linear-gradient(90deg, #00a078 70%, #3ce1be 100%);
    color: #fff;
    border: none;
    padding: 0.98rem 0;
    font-size: 1.1rem;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.17s, filter 0.12s;
    box-shadow: 0 2px 10px #00a07811;
    margin-top: 0.2rem;
}

._btn_9zuee_144:disabled {
    background: #c7e8dd;
    color: #fff;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

/* Lista de pré-requisitos da senha */

._requirementsList_9zuee_167 {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

._requirementItem_9zuee_174 {
    color: #bbb;
    font-weight: 500;
    font-size: 0.97rem;
    display: flex;
    align-items: center;
    gap: 0.46em;
    margin-bottom: 3px;
    transition: color 0.15s;
}

._requirementItem_9zuee_174._valid_9zuee_185 {
    color: #19a181;
}

._requirementItem_9zuee_174 svg {
    min-width: 17px;
    min-height: 17px;
    margin-right: 3px;
}

/* Botão de submit */

._submitButton_9zuee_197 {
    background: linear-gradient(90deg, #00a078 70%, #3ce1be 100%);
    color: #fff;
    border: none;
    padding: 0.98rem 0;
    font-size: 1.1rem;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.17s, filter 0.12s;
    box-shadow: 0 2px 10px #00a07811;
    margin-top: 0.2rem;
    width: 100%;
}

._submitButton_9zuee_197:disabled {
    background: #c7e8dd;
    color: #fff;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

/* Loading spinner */

._loadingSpinner_9zuee_221 {
    width: 40px;
    height: 40px;
    border: 4px solid #e2eaea;
    border-top: 4px solid #00a078;
    border-radius: 50%;
    animation: _spin_9zuee_1 1s linear infinite;
    margin: 1rem auto 0;
}

@keyframes _spin_9zuee_1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsividade */

@media (width <= 600px) {

    ._container_9zuee_5 {
        padding: 0.4rem;
    }

    ._card_9zuee_16 {
        max-width: 98vw;
        padding: 1.2rem 0.5rem 1.7rem;
        border-radius: 16px;
    }

    ._logo_9zuee_36 {
        width: 102px;
    }

    ._card_9zuee_16 h2 {
        font-size: 1.16rem;
    }

    ._form_9zuee_65 {
        gap: 1.1rem;
    }
}

@media (width <= 400px) {

    ._card_9zuee_16 {
        padding: 0.65rem 0.1rem 1.3rem;
        border-radius: 13px;
    }
}
/* plano-a-portal/client/src/styles/pages/cliente/ClienteChecklist.module.css */

._container_ugzhn_3 {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

._supportMessage_ugzhn_9 {
    margin-top: 10px;
    text-align: center;
    color: #888;
    font-size: 1em;
}

._header_ugzhn_16 {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

._header_ugzhn_16 h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

._header_ugzhn_16 p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* NOVO: Estilos da Barra de Progresso */

._progressContainer_ugzhn_39 {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

._progressHeader_ugzhn_48 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

._progressTitle_ugzhn_54 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

._progressLabel_ugzhn_60 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

._progressBarBackground_ugzhn_66 {
    width: 100%;
    height: 12px;
    background-color: var(--color-plano-cinza-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

._progressBarFill_ugzhn_74 {
    height: 100%;
    background: linear-gradient(90deg, var(--color-plano-verde-vibrante-1) 0%, var(--color-success) 100%);
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

._progressBarFill_ugzhn_74[data-progress] {
    width: attr(data-progress);
}

._checklist_ugzhn_85 {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

._checklistItem_ugzhn_94 {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    padding: 1.5rem;
    gap: 1.5rem;
    transition: all 0.2s ease-in-out;
}

/* NOVO: Estilo para o item quando aprovado */

._itemAprovado_ugzhn_108 {
    background-color: #f6fef9;
    border-color: #d1fae5;
}

._itemAprovado_ugzhn_108 ._itemName_ugzhn_113 {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

._itemContent_ugzhn_118 {
    flex-grow: 1;
}

._itemName_ugzhn_113 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
}

/* NOVO: Estilo para a descrição do item */

._itemDesc_ugzhn_131 {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0;
    padding-left: 0.1rem; /* Pequeno alinhamento */
}

._itemActions_ugzhn_138 {
    flex-shrink: 0;
    display: flex;
    gap: 0.75rem;
}

._itemActions_ugzhn_138 ._btn-sm_ugzhn_144 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* NOVO: Estilos para os Ícones de Status */

._itemStatusIcon_ugzhn_152 {
    font-size: 2rem;
    flex-shrink: 0;
}

._iconCompleted_ugzhn_157 { color: var(--color-success); }
._iconPending_ugzhn_158 { color: var(--color-plano-cinza-400); }
._iconAguardando_ugzhn_159 { color: var(--color-info); }
._iconRejected_ugzhn_160 { color: var(--color-error); }


._motivoRejeicao_ugzhn_163 {
    background-color: #fff5f5;
    color: #c53030;
    border-left: 3px solid var(--color-error);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem; /* Espaçamento do nome/descrição */
    animation: _fadeIn_ugzhn_1 0.3s ease-in-out;
}

._motivoRejeicao_ugzhn_163 p {
    margin: 0;
    line-height: 1.4;
}

._motivoRejeicao_ugzhn_163 strong {
    font-weight: 700;
}/* 🔥 Animação */

@keyframes _shimmer_1okc5_1 {

    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

/* 🔲 Base Skeleton */

._skeleton_1okc5_16,
._skeletonItem_1okc5_17,
._card_1okc5_18 {
    background-color: #f0f0f0;
    background-image: linear-gradient(
            90deg,
            #f0f0f0 0,
            #e0e0e0 40px,
            #f0f0f0 80px
    );
    background-size: 600px 100%;
    animation: _shimmer_1okc5_1 1.6s infinite linear;
    border-radius: 8px;
}

/* 📃 Skeleton em tabela */

._skeletonRow_1okc5_33 td {
    padding: 1.2rem;
}

._skeleton_1okc5_16 {
    width: 100%;
    height: 20px;
}

/* 🗂️ Skeleton para grids */

._gridSkeleton_1okc5_44 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

._card_1okc5_18 {
    width: 100%;
    height: 120px;
}

/* 📜 Skeleton lista */

._listSkeleton_1okc5_57 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

._skeletonItem_1okc5_17 {
    width: 100%;
    height: 40px;
    border-radius: 8px;
}
/* client/src/styles/pages/admin/ChecklistTemplates.module.css */

._container_6tldw_3 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

._header_6tldw_9 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}

._headerTitle_6tldw_19 h1 {
    font-size: var(--font-3xl);
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
}

._headerTitle_6tldw_19 p {
    color: var(--color-text-secondary);
    font-size: var(--font-lg);
    margin-top: 0.25rem;
}

._content_6tldw_32 {
    background-color: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

._templatesGrid_6tldw_40 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

._templateCard_6tldw_46 {
    background-color: var(--color-background-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

._templateCard_6tldw_46:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-deep);
}

._templateInfo_6tldw_62 strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

._templateInfo_6tldw_62 span {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

._templateActions_6tldw_75 {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}/* plano-a-portal/client/src/styles/components/modals/ModalChecklistTemplate.module.css */

._form_1kplm_3 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

._formGroup_1kplm_9 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

._formGroup_1kplm_9 label {
    font-weight: 500;
    color: var(--color-text-secondary);
}

._inputField_1kplm_20 {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color-light, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    font-size: 1rem;
    background-color: var(--color-background-main, #f8fafc);
    transition: border-color 0.2s, box-shadow 0.2s;
}

._inputField_1kplm_20:focus {
    outline: none;
    border-color: var(--color-plano-verde-vibrante-1);
    box-shadow: 0 0 0 3px rgb(45 212 191 / 30%);
}

._itensHeader_1kplm_36 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-top: 1px solid var(--border-color-light, #e2e8f0);
    padding-top: 1.5rem;
}

._itensContainer_1kplm_45 {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Aumenta o espaço entre os itens */
    max-height: 300px; /* Mais altura para ver mais itens */
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--color-background-main, #f8fafc);
    border: 1px solid var(--border-color-light, #e2e8f0);
    border-radius: var(--radius-md, 8px);
}

._itemRow_1kplm_57 {
    display: flex;
    align-items: flex-start; /* Alinha no topo para descrições longas */
    gap: 0.75rem;
    background: var(--color-white, #fff);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* NOVO: Container para os campos de input do item */

._itemInputs_1kplm_69 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.5rem;
}

._itemInput_1kplm_69,
._itemTextarea_1kplm_77 {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md, 8px);
    background-color: white;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

._itemTextarea_1kplm_77 {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

._itemInput_1kplm_69:focus,
._itemTextarea_1kplm_77:focus {
    border-color: var(--color-plano-verde-vibrante-1);
    box-shadow: 0 0 0 3px rgb(45 212 191 / 30%);
    outline: none;
}

._removeButton_1kplm_100, ._addButton_1kplm_100 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
}

._removeButton_1kplm_100 {
    color: var(--color-error, #d63a3a);
    margin-top: 0.5rem; /* Alinha com o primeiro input */
}

._removeButton_1kplm_100:hover {
    background-color: #fee2e2;
}

._removeButton_1kplm_100:disabled {
    color: #d1d5db;
    cursor: not-allowed;
}

._addButton_1kplm_100 {
    color: var(--color-plano-verde-vibrante-1);
    font-weight: 600;
    align-self: flex-start;
    margin-top: 1rem;
    border: 1px dashed var(--color-plano-verde-vibrante-1);
}

._addButton_1kplm_100:hover {
    background-color: #f0fdf4;
}

._emptyItens_1kplm_138 {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 1rem;
    font-style: italic;
}

._actions_1kplm_145 {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color-light, #e2e8f0);
}/* Melhorias para visual, responsividade e legibilidade da página de Onboardings Gerais */

/* Progresso moderno */

._container_49cx2_5 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

._header_49cx2_14 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Filtros - NOVO */

._filtrosContainer_49cx2_25 {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

._filtroItem_49cx2_33 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

._filtroInput_49cx2_39 {
    padding: 0.4rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-size: 1.03rem;
    background: var(--color-white);
    color: var(--color-text-title);
    min-width: 210px;
    transition: border-color 0.18s;
}

._filtroInput_49cx2_39:focus {
    border-color: var(--color-primary-light);
    outline: none;
}

._filtroSelect_49cx2_55 {
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-size: 1.03rem;
    background: var(--color-white);
    color: var(--color-text-title);
    min-width: 140px;
    transition: border-color 0.18s;
}

._filtroSelect_49cx2_55:focus {
    border-color: var(--color-primary-light);
    outline: none;
}

._listaClientes_49cx2_71 {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: flex-start;
}

._cardCliente_49cx2_78 {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
    min-width: 320px;
    width: 100%;
    max-width: 530px;
    padding: 1.5rem 2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: box-shadow 0.18s;
}

._cardCliente_49cx2_78:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
    border-color: var(--color-primary-light);
}

._clienteHeader_49cx2_98 {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

._clienteIcon_49cx2_107 {
    color: var(--color-primary);
    font-size: 1.6rem;
    margin-right: 0.2rem;
}

._clienteNome_49cx2_113 {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-title);
}

._statusBadgeChecklist_49cx2_120 {
    padding: 0.28rem 0.9rem;
    border-radius: var(--radius-pill);
    font-size: 0.93rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 5px rgb(0 0 0 / 4%);
}
._statusChecklistPendente_49cx2_128 { background: #fff3cd; color: #856404; }
._statusChecklistAguardando_49cx2_129 { background: #d1ecf1; color: #0c5460; }
._statusChecklistAprovado_49cx2_130 { background: #d4edda; color: #155724; }
._statusChecklistRejeitado_49cx2_131 { background: #f8d7da; color: #721c24; }
._statusChecklistDefault_49cx2_132 { background: #e2e3e5; color: #383d41; }

/* PROGRESSO MODERNO */

._progressoBarContainer_49cx2_136 {
    margin-bottom: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

._progressoLabel_49cx2_143 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--color-text-title);
    margin-bottom: 0.18rem;
}

._progressoAprovados_49cx2_153 {
    color: var(--color-success-dark);
}

._progressoPendentes_49cx2_157 {
    color: var(--color-text-secondary);
}

._progressoBarBg_49cx2_161 {
    width: 100%;
    height: 10px;
    background: #e9ecef;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    position: relative;
}

._progressoBarFill_49cx2_171 {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
    transition: width 0.35s cubic-bezier(.4,0,.2,1);
    border-radius: 7px;
}

._progressoVazio_49cx2_178 {
    font-size: 1em;
    color: var(--color-text-secondary);
    font-style: italic;
}

._progressoIconOk_49cx2_184 {
    color: var(--color-success-dark);
    margin-left: 0.3rem;
    font-size: 1.15em;
}

._listaItensChecklist_49cx2_190 {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

._itemChecklistRow_49cx2_197 {
    background: var(--color-plano-cinza-100);
    border-radius: var(--radius-md);
    padding: 0.8rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-left: 3px solid var(--border-color);
    transition: border-color 0.15s;
}

._itemChecklistRow_49cx2_197:hover {
    border-left-color: var(--color-primary-light);
}

._itemInfo_49cx2_212 {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    font-weight: 500;
    font-size: 1.05rem;
}

._itemNome_49cx2_220 {
    flex: 1;
    color: var(--color-text-title);
}

._arquivosItem_49cx2_225 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.18rem;
}

._arquivoRow_49cx2_232 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 0.24rem 0.7rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
    font-size: 0.97em;
}

._arquivoRow_49cx2_232 a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: underline dotted;
    transition: color 0.18s;
}

._arquivoRow_49cx2_232 a:hover {
    color: var(--color-primary-dark);
}

._nenhumArquivo_49cx2_254 {
    font-size: 0.94em;
    color: var(--color-text-secondary);
    font-style: italic;
}

._itemActions_49cx2_260 {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.4rem;
}

._itemActions_49cx2_260 ._btn_49cx2_266 {
    font-size: 0.97em;
    padding: 0.18rem 0.7rem;
}

._linkDetalhes_49cx2_271 {
    margin-top: 0.8rem;
    text-align: right;
}

._linkDetalhes_49cx2_271 a._btn_49cx2_266 {
    border-radius: var(--radius-pill);
    padding: 0.35rem 1.15rem;
    font-weight: 500;
    font-size: 1.01em;
    border: 1px solid var(--color-primary-light);
    color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 1px 4px rgb(0 0 0 / 4%);
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

._linkDetalhes_49cx2_271 a._btn_49cx2_266:hover {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
}

/* Responsivo para mobile e tablets */

@media (width <= 900px) {

    ._container_49cx2_5 {
        padding-bottom: 1.2rem;
    }

    ._listaClientes_49cx2_71 {
        gap: 1.1rem;
    }

    ._cardCliente_49cx2_78 {
        min-width: 90vw;
        max-width: 98vw;
        padding: 1rem;
    }

    ._filtrosContainer_49cx2_25 {
        flex-direction: column;
        gap: 0.7rem;
        margin-top: 0.7rem;
    }
}

@media (width <= 600px) {

    ._listaClientes_49cx2_71 {
        flex-direction: column;
        gap: 1.2rem;
    }

    ._cardCliente_49cx2_78 {
        min-width: 98vw;
        max-width: 99vw;
        padding: 0.7rem;
        gap: 0.65rem;
    }

    ._header_49cx2_14 {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }

    ._filtrosContainer_49cx2_25 {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.3rem;
    }
}/* ==========================================================================
   Estilos para o componente AutomacaoCard
   Modernizado para alinhar com o sistema universal de status/admin
   Autor: caarlosandree
   Data: 2025-09-03
   ========================================================================== */

._card_1xnrl_8 {
    background: #fff;
    border: 1.5px solid var(--border-color, #e0e5ee);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgb(32 32 32 / 5%);
    padding: 2rem 1.3rem 1.4rem;
    min-width: 320px;
    max-width: 410px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: box-shadow 0.17s, border-color 0.17s;
    position: relative;
}

._card_1xnrl_8:hover {
    box-shadow: 0 7px 28px rgb(32 32 32 / 12%);
    border-color: #1565c0;
}

._header_1xnrl_28 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

._nomeCliente_1xnrl_35 {
    font-size: 1.26rem;
    font-weight: 700;
    color: #23336b;
    letter-spacing: 0.01em;
}

._statusAtivo_1xnrl_42 {
    background: linear-gradient(90deg, #e4fbe4 80%, #f8fff8 100%);
    color: #1b6e1b;
    padding: 0.29em 1.1em;
    border-radius: 20px;
    font-size: 0.97em;
    font-weight: 600;
    box-shadow: 0 1px 4px #e4fbe4c0;
    border: 1px solid #c7eac7;
}

._statusDesativado_1xnrl_53 {
    background: linear-gradient(90deg, #ffeaea 80%, #fffafa 100%);
    color: #b21f1f;
    padding: 0.29em 1.1em;
    border-radius: 20px;
    font-size: 0.97em;
    font-weight: 600;
    box-shadow: 0 1px 4px #ffeaeac0;
    border: 1px solid #eac7c7;
}

._info_1xnrl_64 {
    font-size: 1.01rem;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

._stats_1xnrl_72 {
    margin-top: 0.7em;
    font-size: 0.97em;
    color: #505050;
    display: flex;
    flex-direction: column;
    gap: 0.22em;
}

._stats_1xnrl_72 ul {
    padding-left: 1.2em;
    margin: 0.25em 0 0;
    font-size: 0.96em;
    color: #3a3a3a;
}

._stats_1xnrl_72 li {
    margin-bottom: 0.12em;
    font-size: 0.95em;
}

._actions_1xnrl_93 {
    display: flex;
    gap: 0.9em;
    margin-top: 0.9em;
}

._actions_1xnrl_93 button {
    padding: 0.43em 1.1em;
    font-size: 0.99em;
    border-radius: 6px;
    border: none;
    background: #ececec;
    color: #23336b;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.16s, color 0.16s;
    box-shadow: 0 1px 4px #dbeafe20;
}

._actions_1xnrl_93 button:hover {
    background: #ecf2fa;
    color: #1565c0;
}

._btn-ativar_1xnrl_117 {
    background: #2e7d32;
    color: #fff;
}

._btn-ativar_1xnrl_117:hover {
    background: #388e3c;
    color: #fff;
}

._btn-desativar_1xnrl_127 {
    background: #c62828;
    color: #fff;
}

._btn-desativar_1xnrl_127:hover {
    background: #b71c1c;
    color: #fff;
}

._btn-trigger_1xnrl_137 {
    background: #1565c0;
    color: #fff;
}

._btn-trigger_1xnrl_137:hover {
    background: #1976d2;
    color: #fff;
}

/* LOGS */

._logs_1xnrl_149 {
    margin-top: 0.7em;
    font-size: 0.95em;
    color: #555;
}

._logs_1xnrl_149 ul {
    list-style: none;
    padding-left: 0;
    margin: 0.3em 0 0;
}

._logs_1xnrl_149 li {
    margin-bottom: 0.18em;
    padding-bottom: 0.1em;
    border-bottom: 1px solid #f2f2f2;
}

._logData_1xnrl_167 {
    color: #2b3a6b;
    font-size: 0.92em;
    margin-right: 0.5em;
}

._logResultado_1xnrl_173 {
    font-weight: 700;
    margin-right: 0.25em;
    color: #1b6e1b;
}

._logResultado_1xnrl_173::after {
    content: " - ";
    color: #bbb;
}

._logMensagem_1xnrl_184 {
    color: #333;
}

._logTarefa_1xnrl_188 {
    color: #888;
    font-size: 0.92em;
    margin-left: 0.4em;
}

/* ============= RESPONSIVIDADE ============= */

@media (width <= 1200px) {

    ._card_1xnrl_8 {
        min-width: 260px;
        max-width: 99vw;
    }
}

@media (width <= 768px) {

    ._card_1xnrl_8 {
        min-width: 95vw;
        max-width: 99vw;
        padding: 1.2rem 0.7rem 1rem;
    }

    ._nomeCliente_1xnrl_35 {
        font-size: 1.08rem;
    }

    ._actions_1xnrl_93 button {
        font-size: 0.97em;
        padding: 0.38em 0.8em;
    }
}/* ============================================================================
 * ESTILOS DA PÁGINA DE CENTRAL DE AUTOMAÇÃO (ADMIN)
 * Modernizado para alinhamento com o sistema universal de status
 * Inspirado no padrão clientesPage
 *
 * Autor: caarlosandree
 * Data: 2025-09-03
 * ============================================================================
 */

._centralContainer_a220j_11 {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 2.5rem;
    width: 100%;
    background: linear-gradient(120deg, #f7f9fa 70%, #ecf2fa 100%);
    min-height: 100vh;
    box-sizing: border-box;
}

._titulo_a220j_21 {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--color-text-main, #1565c0);
    margin-bottom: 2rem;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 8px #dbeafe40;
}

/* ============= ABAS ============= */

._tabsContainer_a220j_32 {
    margin-bottom: 2.5rem;
}

._tabsBar_a220j_36 {
    display: flex;
    gap: 1.3rem;
    border-bottom: 1.5px solid var(--color-plano-cinza-200, #e0e5ee);
    background: none;
}

._tabButton_a220j_43 {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #444;
    font-size: 1.14rem;
    font-weight: 500;
    padding: 0.6rem 1.3rem 0.4rem;
    cursor: pointer;
    outline: none;
    border-radius: 8px 8px 0 0;
    transition: border-bottom 0.18s, color 0.18s, background 0.18s, font-weight 0.18s;
}

._tabButton_a220j_43:hover, ._tabActive_a220j_57 {
    background: #ecf2fa;
    color: #1565c0;
}

._tabActive_a220j_57 {
    border-bottom: 3px solid #1565c0;
    font-weight: 700;
    box-shadow: 0 1px 6px #1565c01a;
}

/* ============= CARDS ============= */

._cardsContainer_a220j_70 {
    margin-bottom: 2.2rem;
}

._cardsGrid_a220j_74 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

/* ============= TABELAS ============= */

._tabelaContainer_a220j_83 {
    margin-top: 1.5rem;
}

._tabelaPadrao_a220j_87,
._advanced-table_a220j_88 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    background: var(--color-white, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px #0001;
    border: 1.5px solid var(--border-color, #e0e0e0);
}

._tabelaPadrao_a220j_87 th,
._advanced-table_a220j_88 th,
._tabelaPadrao_a220j_87 td,
._advanced-table_a220j_88 td {
    padding: 0.8rem 1rem;
    text-align: left;
    vertical-align: middle;
}

._tabelaPadrao_a220j_87 th,
._advanced-table_a220j_88 th {
    background: linear-gradient(90deg, #ecf2fa 70%, #f7f9fa 100%);
    color: #1565c0;
    font-size: 1.08rem;
    font-weight: 700;
    border-bottom: 1.5px solid #e0e0e0;
    letter-spacing: 0.01em;
}

._tabelaPadrao_a220j_87 tr,
._advanced-table_a220j_88 tr {
    border-bottom: 1px solid #eee;
    transition: background 0.13s;
}

._tabelaPadrao_a220j_87 tr:last-child,
._advanced-table_a220j_88 tr:last-child {
    border-bottom: none;
}

._tabelaPadrao_a220j_87 td,
._advanced-table_a220j_88 td {
    background: var(--color-white, #fff);
    font-size: 1rem;
}

._advanced-table_a220j_88 ._clickableRow_a220j_135:hover {
    background: #ecf2fa;
    cursor: pointer;
}

._advanced-table_a220j_88 ._empty-message_a220j_140 {
    color: #888;
    font-size: 1.08rem;
    text-align: center;
    padding: 2.2rem 0;
    letter-spacing: 0.01em;
}

/* ============= PAGINAÇÃO ============= */

._advanced-table_a220j_88 ._pagination_a220j_150 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.7rem;
    margin-top: 1.3rem;
    font-size: 1.04rem;
}

._advanced-table_a220j_88 ._pagination_a220j_150 button {
    padding: 0.4rem 1rem;
    border-radius: var(--radius-md, 5px);
    border: 1.5px solid var(--border-color, #e0e0e0);
    background-color: var(--color-white, var(--color-white, #fff));
    color: #1565c0;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    font-size: 1.01rem;
}

._advanced-table_a220j_88 ._pagination_a220j_150 button:disabled {
    color: #aaa;
    cursor: not-allowed;
    background-color: #f5f5f5;
}

._advanced-table_a220j_88 ._pagination_a220j_150 button:not(:disabled):hover {
    background-color: #ecf2fa;
    border-color: #1565c0;
}

/* ============= INFO VAZIA ============= */

._infoVazia_a220j_184 {
    margin-top: 2.2rem;
    color: #888;
    font-size: 1.08rem;
    text-align: center;
    letter-spacing: 0.01em;
}

/* ============= SCROLLBAR MODERNO ============= */

._centralContainer_a220j_11 ::-webkit-scrollbar {
    width: 10px;
    background: #ecf2fa;
    border-radius: 8px;
}

._centralContainer_a220j_11 ::-webkit-scrollbar-thumb {
    background: #1565c055;
    border-radius: 8px;
    transition: background 0.18s;
}

._centralContainer_a220j_11 ::-webkit-scrollbar-thumb:hover {
    background: #1565c0aa;
}

/* ============= RESPONSIVIDADE ============= */

@media (width <= 1200px) {

    ._centralContainer_a220j_11 {
        padding: 1.5rem 1rem;
    }
}

@media (width <= 992px) {

    ._cardsContainer_a220j_70,
    ._tabelaContainer_a220j_83 {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (width <= 768px) {

    ._titulo_a220j_21 {
        font-size: 1.37rem;
        margin-bottom: 1.1rem;
    }

    ._cardsContainer_a220j_70 {
        gap: 1rem;
    }

    ._tabsBar_a220j_36 {
        gap: 0.6rem;
    }

    ._tabelaPadrao_a220j_87 th,
    ._advanced-table_a220j_88 th,
    ._tabelaPadrao_a220j_87 td,
    ._advanced-table_a220j_88 td {
        padding: 0.5rem;
        font-size: 0.97rem;
    }

    ._tabelaPadrao_a220j_87,
    ._advanced-table_a220j_88 table {
        font-size: 0.97rem;
    }
}

@media (width <= 480px) {

    ._centralContainer_a220j_11 {
        padding: 0.6rem;
    }

    ._cardsContainer_a220j_70 {
        gap: 0.5rem;
    }

    ._tabelaContainer_a220j_83 {
        margin-top: 1rem;
    }

    ._tabelaPadrao_a220j_87,
    ._advanced-table_a220j_88 table {
        font-size: 0.93rem;
    }

    ._tabsBar_a220j_36 {
        gap: 0.3rem;
    }
}