/* ===================================
   CRAM - ETAPA 8: TEMA ACOLHEDOR
   Paleta de cores neutras e profissionais
   ================================== */

:root {
    /* ===================================
       PALETA DE CORES INSTITUCIONAL
       Roxo (empoderamento) + Rosa (feminino) + Azul (confiança)
       ================================== */

    /* Cores Primárias - Roxo Institucional */
    --primary-color: #7C3AED;        /* Roxo vibrante - empoderamento + institucional */
    --primary-light: #A78BFA;        /* Roxo claro */
    --primary-medium: #8B5CF6;       /* Roxo intermediário - botões secundários */
    --primary-dark: #1E40AF;         /* Azul escuro institucional */
    --primary-gradient: linear-gradient(135deg, #9333EA 0%, #2563EB 100%);  /* Gradiente roxo→azul */
    --primary-rgb: 124, 58, 237;     /* RGB para uso com rgba() */

    /* Cor Secundária - Rosa Feminino (NOVO) */
    --secondary-color-pink: #EC4899;     /* Rosa vibrante - empoderamento feminino */
    --secondary-color-pink-light: #F9A8D4;  /* Rosa claro */
    --secondary-color-pink-dark: #DB2777;   /* Rosa escuro */
    --secondary-pink-rgb: 236, 72, 153;     /* RGB para rgba() */

    /* Cor de Apoio - Azul Confiança (NOVO) */
    --color-support: #3B82F6;         /* Azul confiança - informações e visualização */
    --color-support-light: #60A5FA;   /* Azul claro */
    --color-support-dark: #2563EB;    /* Azul escuro */
    --support-rgb: 59, 130, 246;      /* RGB para rgba() */

    /* Cor para Focus States (Acessibilidade) */
    --focus-color: #7C3AED;           /* Roxo - mesma cor primária */
    --focus-color-rgb: 124, 58, 237;  /* RGB para rgba() */

    /* Cores Neutras - Cinzas (mantidas) */
    --secondary-color: #9CA3AF;       /* Cinza médio */
    --secondary-light: #D1D5DB;       /* Cinza claro */
    --secondary-dark: #6B7280;        /* Cinza escuro */

    /* Cores de Destaque - Pastéis Suaves */
    --accent-soft: #C8ACD6;          /* Lavanda suave */
    --accent-warm: #E8C4A0;          /* Pêssego suave */
    --accent-fresh: #A8D5BA;         /* Verde menta */

    /* Cores de Status - Dessaturadas 40% */
    --success-color: #9BC59D;        /* Verde dessaturado */
    --success-light: #D4E8D5;
    --success-dark: #7FAA81;

    --info-color: #8EBDD1;           /* Azul dessaturado */
    --info-light: #CFE3EC;
    --info-dark: #6FA3BA;

    --warning-color: #D4B896;        /* Laranja dessaturado */
    --warning-light: #EBE0D2;
    --warning-dark: #BFA078;

    --danger-color: #D19B9B;         /* Vermelho dessaturado */
    --danger-light: #EBD9D9;
    --danger-dark: #BA7E7E;

    --orange-color: #ff6600;         /* Laranja para risco alto */
    --orange-light: #ffcc99;
    --orange-dark: #cc5200;

    /* Cores de Fundo - Tons Claros e Acolhedores */
    --bg-primary: #FAFAFA;           /* Cinza muito claro */
    --bg-secondary: #F5F5F5;         /* Cinza claro quente */
    --bg-card: #FFFFFF;              /* Branco puro */
    --bg-hover: #F0F4F8;             /* Azul-cinza muito claro */

    /* Cores de Texto */
    --text-primary: #374151;         /* Cinza escuro (principal) */
    --text-secondary: #6B7280;       /* Cinza médio (secundário) */
    --text-muted: #9CA3AF;           /* Cinza claro (destaques) */
    --text-light: #D1D5DB;           /* Cinza muito claro */
    --text-white: #FFFFFF;

    /* Bordas e Divisores */
    --border-color: #E5E7EB;         /* Cinza muito claro */
    --border-light: #F3F4F6;
    --border-dark: #D1D5DB;

    /* Headers de Seções - Institucionais */
    --header-bg: #F8F9FA;            /* Fundo neutro para headers */
    --header-border: #7C3AED;        /* Borda roxa vibrante */
    --header-icon-primary: #7C3AED;  /* Ícone roxo */
    --header-icon-info: #8EBDD1;     /* Ícone azul dessaturado */
    --header-icon-warning: #D4B896;  /* Ícone laranja dessaturado */
    --header-icon-success: #9BC59D;  /* Ícone verde dessaturado */
    --header-icon-danger: #D19B9B;   /* Ícone vermelho dessaturado */

    /* Sombras - Suavizadas */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10);

    /* Transições */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Espaçamentos */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Raios de Borda - Arredondamento Suave */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Tipografia - Famílias de Fonte */
    --font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-headings: 'Montserrat', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

    /* Tipografia - Tamanhos (Escala Hierárquica) - Ajustados para legibilidade ideal */
    --font-size-display: 2rem;        /* 32px - Números grandes de estatísticas */
    --font-size-h1: 1.5rem;           /* 24px - Títulos principais de página */
    --font-size-h2: 1.25rem;          /* 20px - Subtítulos de seção */
    --font-size-h3: 1rem;             /* 16px - Subtítulos menores */
    --font-size-h4: 0.875rem;         /* 14px - Títulos de card/widget */
    --font-size-base: 0.875rem;       /* 14px - Corpo de texto padrão */
    --font-size-small: 0.75rem;       /* 12px - Legendas, metadados */
    --font-size-tiny: 0.6875rem;      /* 11px - Textos muito pequenos */

    /* Tipografia - Line Heights (Altura de Linha) */
    --line-height-tight: 1.2;       /* Display/Números grandes */
    --line-height-heading: 1.3;     /* Títulos (h1-h4) */
    --line-height-base: 1.5;        /* Corpo de texto */
    --line-height-relaxed: 1.6;     /* Documentos e textos longos */

    /* Tipografia - Font Weights (Pesos) */
    --font-weight-normal: 200;      /* Extra Light - texto do corpo */
    --font-weight-medium: 300;      /* Light - títulos */
    --font-weight-semibold: 500;    /* Medium - ênfases */
    --font-weight-bold: 600;        /* SemiBold - destaques */

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

    /* ===================================
       ESTADOS INTERATIVOS PADRONIZADOS
       WCAG 2.1 AA - Feedback Visual
       ================================== */

    /* Background Adjustments */
    --hover-bg-darken: brightness(0.95);    /* 5% mais escuro */
    --active-bg-darken: brightness(0.90);   /* 10% mais escuro */
    --disabled-opacity: 0.5;

    /* Shadow States */
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-active: 0 2px 4px rgba(0, 0, 0, 0.08);

    /* Transform States */
    --hover-lift: -2px;
    --active-press: 0px;

    /* Transition Timing */
    --transition-hover: 0.2s ease;
    --transition-active: 0.1s ease;
}

/* ===================================
   APLICAÇÃO DO TEMA
   ================================== */

/* Navbar Acessível - WCAG 2.1 AA Compliance */
.navbar-accessible {
    background-color: #2C5282 !important; /* Azul escuro - contraste 4.67:1 com branco */
}

.navbar-accessible .navbar-brand,
.navbar-accessible .nav-link {
    color: #FFFFFF !important;
}

.navbar-accessible .nav-link:hover,
.navbar-accessible .nav-link:focus {
    color: #E2E8F0 !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
}

.navbar-accessible .nav-link.active {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
}

.navbar-accessible .dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
}

/* Body e Layout Geral */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

/* Headings - Hierarquia Tipográfica Completa */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4, h5, h6 {
    font-size: var(--font-size-h4);
}

/* Navbar - Gradiente Institucional Vibrante */
.navbar {
    background: var(--primary-gradient) !important;
    box-shadow: var(--shadow-md);
}

.navbar-brand {
    color: var(--text-white) !important;
    font-family: 'MuseoModerno', sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: var(--font-size-h1);
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all var(--transition-fast);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--text-white) !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
}

.navbar .dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
}

/* ===================================
   NAVBAR - NORMALIZAÇÃO DE ALTURA
   Garantir que todos os nav-links tenham
   a mesma altura e alinhamento vertical
   ================================== */

/* Padronização de todos os links da navbar */
.navbar-nav .nav-link {
    padding: 0.5rem 1rem !important;
    line-height: 1.5 !important;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    min-height: 40px; /* Altura mínima consistente */
}

/* Garantir que badges não desalinhem os botões */
.navbar-nav .nav-link .badge {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}

/* Cards - Design Acolhedor */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

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

.card-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* Botões - Cores Suavizadas */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-white);
    transition: all var(--transition-fast);
}

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

.btn-secondary {
    background-color: #FFFFFF;
    border: 2px solid var(--primary-medium);
    color: var(--primary-medium);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #F3F0FF;  /* Lilás claro */
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

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

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

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

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

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--text-primary);
}

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

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

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

/* Botão branco para uso em headers coloridos */
.btn-white {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--primary-color) !important;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-white:hover,
.btn-white:focus {
    background-color: #F3F0FF !important; /* Lilás muito claro */
    border-color: #E9D5FF !important; /* Lilás claro */
    color: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ===================================
   ESTADOS INTERATIVOS GLOBAIS
   Padrões consistentes para toda aplicação
   ================================== */

/* Botões - Estados Padronizados */
.btn {
    transition: all var(--transition-hover);
}

.btn:hover:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
    filter: var(--hover-bg-darken);
    box-shadow: var(--shadow-hover);
    transform: translateY(var(--hover-lift));
}

.btn:active:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
    filter: var(--active-bg-darken);
    box-shadow: var(--shadow-active);
    transform: translateY(var(--active-press));
    transition: all var(--transition-active);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn.disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* Links - Estados Padronizados */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    transition: color var(--transition-hover);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    filter: var(--hover-bg-darken);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):active {
    filter: var(--active-bg-darken);
    transition: color var(--transition-active);
}

/* Cards - Estados Padronizados */
.card {
    transition: all var(--transition-hover);
}

.card.card-hover:hover,
.card:hover:not(.no-hover) {
    box-shadow: var(--shadow-hover);
    transform: translateY(var(--hover-lift));
}

.card.card-hover:active,
.card:active:not(.no-hover) {
    box-shadow: var(--shadow-active);
    transform: translateY(var(--active-press));
    transition: all var(--transition-active);
}

/* Form Controls - Estados Padronizados */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select {
    transition: all var(--transition-hover);
}

.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.form-control[readonly],
input[readonly],
textarea[readonly] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    background-color: var(--bg-secondary);
}

/* Checkboxes e Radios */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* Badges Clicáveis */
.badge[role="button"],
.badge.clickable {
    transition: all var(--transition-hover);
    cursor: pointer;
}

.badge[role="button"]:hover,
.badge.clickable:hover {
    filter: var(--hover-bg-darken);
    box-shadow: var(--shadow-sm);
}

.badge[role="button"]:active,
.badge.clickable:active {
    filter: var(--active-bg-darken);
    transition: all var(--transition-active);
}

/* Pagination */
.page-link {
    transition: all var(--transition-hover);
}

.page-link:hover:not(.disabled) {
    filter: var(--hover-bg-darken);
}

.page-link:active:not(.disabled) {
    filter: var(--active-bg-darken);
    transition: all var(--transition-active);
}

.page-item.disabled .page-link {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* Dropdown Items */
.dropdown-item {
    transition: background-color var(--transition-hover);
}

.dropdown-item:active {
    filter: var(--active-bg-darken);
    transition: background-color var(--transition-active);
}

.dropdown-item:disabled,
.dropdown-item.disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* Nav Links */
.nav-link {
    transition: all var(--transition-hover);
}

.nav-link:hover:not(.disabled) {
    filter: var(--hover-bg-darken);
}

.nav-link:active:not(.disabled) {
    filter: var(--active-bg-darken);
    transition: all var(--transition-active);
}

.nav-link.disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* Elementos Interativos Customizados */
[role="button"]:not(.btn) {
    cursor: pointer;
    transition: all var(--transition-hover);
}

[role="button"]:not(.btn):hover {
    filter: var(--hover-bg-darken);
}

[role="button"]:not(.btn):active {
    filter: var(--active-bg-darken);
    transition: all var(--transition-active);
}

[role="button"][aria-disabled="true"],
[role="button"].disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* Formulários - Design Moderno */
.form-control,
.form-select {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: all var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(126, 138, 158, 0.15);
    outline: none;
}

.form-label {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
}

/* Validação em Tempo Real */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2381C784' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23E57373'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23E57373' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

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

.invalid-feedback {
    color: var(--danger-dark);
}

/* Alerts - Cores Suavizadas */
.alert {
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
}

.alert-success {
    background-color: var(--success-light);
    color: var(--success-dark);
}

.alert-info {
    background-color: var(--info-light);
    color: var(--info-dark);
}

.alert-warning {
    background-color: var(--warning-light);
    color: var(--warning-dark);
}

.alert-danger {
    background-color: var(--danger-light);
    color: var(--danger-dark);
}

/* Badges - Cores Pastéis */
.badge {
    padding: 0.4em 0.75em; /* Aumentado para melhor área de toque */
    font-weight: var(--font-weight-medium);
    font-size: 0.75rem; /* 12px - Aumentado de var(--font-size-small) */
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

.badge.bg-primary { background-color: var(--primary-color) !important; }
.badge.bg-success { background-color: var(--success-color) !important; }
.badge.bg-danger { background-color: var(--danger-color) !important; }
.badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: var(--text-primary) !important;
}
.badge.bg-info { background-color: var(--info-color) !important; }
.badge.bg-orange {
    background-color: var(--orange-color) !important;
    color: #FFFFFF !important;
}
.badge.bg-purple {
    background-color: var(--primary-color) !important; /* Roxo institucional #7C3AED */
    color: #FFFFFF !important;
}

/* Tabelas - Design Limpo */
.table {
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-dark);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-small);
    letter-spacing: 0.5px;
}

.table tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background-color: var(--bg-hover);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-secondary);
}

/* Breadcrumbs - Design Acolhedor */
.breadcrumb {
    background-color: transparent;
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
}

.breadcrumb-item {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--secondary-color-pink);  /* Rosa vibrante */
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
    content: "›";
    font-size: var(--font-size-h3);
}

/* Modals - Design Moderno */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--spacing-lg);
}

.modal-footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--spacing-lg);
}

.modal-backdrop {
    background-color: rgba(55, 65, 81, 0.5);
}

/* Tooltips e Popovers */
.tooltip-inner {
    background-color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

.popover {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
}

.popover-header {
    background-color: var(--primary-color);
    color: var(--text-white);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Loading States */
.spinner-border {
    border-color: var(--primary-light);
    border-right-color: var(--primary-color);
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--secondary-color-pink);  /* Rosa vibrante - mais expressivo e feminino */
    text-decoration: underline;
}

/* Scrollbar Customizado */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-dark);
}

/* Utilitários de Cores */
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.bg-light { background-color: var(--bg-secondary) !important; }
.border-light { border-color: var(--border-light) !important; }

/* Animações Suaves */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-base);
}

.slide-down {
    animation: slideDown var(--transition-base);
}

/* Acessibilidade */
.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;
}

.focus-visible:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ===================================
   ACESSIBILIDADE - FOCUS VISIBLE GLOBAL
   WCAG 2.1 Level AA - Critério 2.4.7
   ================================== */

/* Remover outline padrão apenas quando não for teclado */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Adicionar outline forte para navegação por teclado */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.page-link:focus-visible,
.breadcrumb-item a:focus-visible {
    outline: 3px solid var(--focus-color) !important; /* Roxo institucional */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--focus-color-rgb), 0.15);
}

/* Focus para elementos customizados */
.card:focus-visible,
.badge:focus-visible,
.alert:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
}

/* Focus para ícones clicáveis */
.fas:focus-visible,
.far:focus-visible,
.fab:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Skip to main content link (oculto até focus) */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-color);  /* Roxo institucional */
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 9999;
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* ===================================
   HEADERS COM GRADIENTE - ACESSIBILIDADE
   Garantir contraste adequado WCAG AA (4.5:1)
   ================================== */

/* Header com gradiente roxo/azul - SEMPRE texto branco */
.bg-gradient-primary-purple {
    background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);
    color: #FFFFFF !important;
}

.bg-gradient-primary-purple * {
    color: #FFFFFF !important;
}

/* Exceção: botões brancos dentro de headers coloridos devem manter texto roxo */
.bg-gradient-primary-purple .btn-white,
.bg-gradient-primary-purple .btn-white * {
    color: var(--primary-color) !important;
}

.bg-gradient-primary-purple .btn-white:hover,
.bg-gradient-primary-purple .btn-white:hover *,
.bg-gradient-primary-purple .btn-white:focus,
.bg-gradient-primary-purple .btn-white:focus * {
    color: var(--primary-dark) !important;
}

/* Exceção específica para ícones FontAwesome dentro do btn-white */
.bg-gradient-primary-purple .btn-white .fas,
.bg-gradient-primary-purple .btn-white .far,
.bg-gradient-primary-purple .btn-white .fab,
.bg-gradient-primary-purple .btn-white i {
    color: var(--primary-color) !important;
}

.bg-gradient-primary-purple .btn-white:hover .fas,
.bg-gradient-primary-purple .btn-white:hover .far,
.bg-gradient-primary-purple .btn-white:hover .fab,
.bg-gradient-primary-purple .btn-white:hover i,
.bg-gradient-primary-purple .btn-white:focus .fas,
.bg-gradient-primary-purple .btn-white:focus .far,
.bg-gradient-primary-purple .btn-white:focus .fab,
.bg-gradient-primary-purple .btn-white:focus i {
    color: var(--primary-dark) !important;
}

.bg-gradient-primary-purple h1,
.bg-gradient-primary-purple h2,
.bg-gradient-primary-purple h3,
.bg-gradient-primary-purple h4,
.bg-gradient-primary-purple h5,
.bg-gradient-primary-purple h6 {
    color: #FFFFFF !important;
}

.bg-gradient-primary-purple .fas,
.bg-gradient-primary-purple .far,
.bg-gradient-primary-purple .fab,
.bg-gradient-primary-purple i {
    color: #FFFFFF !important;
}

/* ===================================
   HEADERS NEUTROS - NOVA PALETA
   ================================== */

/* Header com fundo neutro e borda colorida apenas */
.header-neutral {
    background-color: var(--header-bg) !important;
    border-left: 4px solid var(--header-border) !important;
    color: var(--text-primary) !important;
}

/* Classes de ícone para headers (cor apenas no ícone) */
.header-icon-primary { color: var(--header-icon-primary) !important; }
.header-icon-info { color: var(--header-icon-info) !important; }
.header-icon-warning { color: var(--header-icon-warning) !important; }
.header-icon-success { color: var(--header-icon-success) !important; }
.header-icon-danger { color: var(--header-icon-danger) !important; }

/* ===================================
   CLASSES UTILITÁRIAS DE TIPOGRAFIA
   ================================== */

/* Tamanhos de Fonte */
.text-display { font-size: var(--font-size-display) !important; }
.text-h1 { font-size: var(--font-size-h1) !important; }
.text-h2 { font-size: var(--font-size-h2) !important; }
.text-h3 { font-size: var(--font-size-h3) !important; }
.text-h4 { font-size: var(--font-size-h4) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-small { font-size: var(--font-size-small) !important; }
.text-tiny { font-size: var(--font-size-tiny) !important; }

/* Font Weights (Pesos) */
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Line Heights (Altura de Linha) */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-heading { line-height: var(--line-height-heading) !important; }
.leading-normal { line-height: var(--line-height-base) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }

/* ===================================
   CLASSES UTILITÁRIAS DE COR
   Paleta institucional unificada
   ================================== */

/* Cores de Texto */
.text-primary-purple { color: var(--primary-color) !important; }
.text-secondary-pink { color: var(--secondary-color-pink) !important; }
.text-support-blue { color: var(--color-support) !important; }

/* Backgrounds */
.bg-primary-purple { background-color: var(--primary-color) !important; }
.bg-secondary-pink { background-color: var(--secondary-color-pink) !important; }
.bg-support-blue { background-color: var(--color-support) !important; }

/* Bordas */
.border-primary-purple { border-color: var(--primary-color) !important; }
.border-secondary-pink { border-color: var(--secondary-color-pink) !important; }
.border-support-blue { border-color: var(--color-support) !important; }

/* Botões com nova paleta */
.btn-pink {
    background-color: var(--secondary-color-pink);
    border-color: var(--secondary-color-pink);
    color: var(--text-white);
}

.btn-pink:hover,
.btn-pink:focus {
    background-color: var(--secondary-color-pink-dark);
    border-color: var(--secondary-color-pink-dark);
    color: var(--text-white) !important;
    filter: none !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-support {
    background-color: var(--color-support);
    border-color: var(--color-support);
    color: var(--text-white);
}

.btn-support:hover,
.btn-support:focus {
    background-color: #1D4ED8;  /* Azul mais escuro para melhor contraste (5.8:1) */
    border-color: #1D4ED8;
    color: var(--text-white) !important;
    filter: none !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ===================================
   HEADERS ESPECÍFICOS - CONTRASTE WCAG AA
   Informações Jurídicas e Documentos Pessoais
   ================================== */

/* Header para Informações Jurídicas - Vermelho */
.card-header-juridico {
    background-color: #F8F9FA !important;
    border-left: 4px solid #DC2626 !important; /* Vermelho vibrante */
    color: #374151 !important;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-header-juridico h5,
.card-header-juridico h6 {
    color: #374151 !important;
}

.card-header-juridico .icon-lg,
.card-header-juridico .fas,
.card-header-juridico .far {
    color: #DC2626 !important; /* Ícones vermelhos para contexto */
}

/* Header para Documentos Pessoais - Azul */
.card-header-documentos {
    background-color: #F8F9FA !important;
    border-left: 4px solid #3B82F6 !important; /* Azul vibrante */
    color: #374151 !important;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-header-documentos h5,
.card-header-documentos h6 {
    color: #374151 !important;
}

.card-header-documentos .icon-lg,
.card-header-documentos .fas,
.card-header-documentos .far {
    color: #3B82F6 !important; /* Ícones azuis para contexto */
}

/* Botões dentro dos headers - manter boa legibilidade */
.card-header-juridico .btn,
.card-header-documentos .btn {
    color: inherit;
}

.card-header-juridico .btn-light,
.card-header-documentos .btn-light {
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    color: #374151;
}

.card-header-juridico .btn-light:hover,
.card-header-documentos .btn-light:hover {
    background-color: #F3F4F6;
    border-color: var(--border-dark);
}

/* Header para contextos de erro/crítico - Vermelho mais escuro */
.card-header-critico {
    background-color: #FEE2E2 !important; /* Vermelho muito claro */
    border-left: 4px solid #DC2626 !important; /* Vermelho vibrante */
    color: #991B1B !important; /* Vermelho muito escuro - contraste 7.5:1 */
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header-critico h3,
.card-header-critico h5 {
    color: #991B1B !important;
}

.card-header-critico .fas,
.card-header-critico .far {
    color: #DC2626 !important;
}

/* Header para informações gerais - Azul */
.card-header-info {
    background-color: #F8F9FA !important;
    border-left: 4px solid #3B82F6 !important; /* Azul vibrante */
    color: #374151 !important;
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header-info h5,
.card-header-info h6 {
    color: #374151 !important;
}

.card-header-info .fas,
.card-header-info .far {
    color: #3B82F6 !important;
}

/* ===================================
   TOASTS - GARANTIA DE CONTRASTE WCAG AA
   Fallback para garantir que toasts sempre sejam legíveis
   ================================== */

/* Toast Container */
.toast-container {
    z-index: 9999 !important;
}

/* Toasts - garantir contraste mínimo 4.5:1 */
.toast {
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
}

/* Toast Success - verde com texto branco */
.toast.bg-success {
    background-color: #198754 !important; /* Verde Bootstrap */
    color: #FFFFFF !important;
}

.toast.bg-success * {
    color: #FFFFFF !important;
}

/* Toast Danger/Error - vermelho com texto branco */
.toast.bg-danger {
    background-color: #DC3545 !important; /* Vermelho Bootstrap */
    color: #FFFFFF !important;
}

.toast.bg-danger * {
    color: #FFFFFF !important;
}

/* Toast Warning - laranja escuro com texto escuro para melhor contraste */
.toast.bg-warning {
    background-color: #FFC107 !important; /* Amarelo Bootstrap */
    color: #000000 !important;
}

.toast.bg-warning * {
    color: #000000 !important;
}

.toast.bg-warning .btn-close {
    filter: invert(1);
}

/* Toast Info - azul com texto branco */
.toast.bg-info {
    background-color: #0DCAF0 !important; /* Azul Bootstrap */
    color: #000000 !important; /* Texto escuro para melhor contraste */
}

.toast.bg-info * {
    color: #000000 !important;
}

.toast.bg-info .btn-close {
    filter: invert(1);
}

/* Toast Primary - roxo institucional com texto branco */
.toast.bg-primary {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}

.toast.bg-primary * {
    color: #FFFFFF !important;
}

/* Fallback: garantir que QUALQUER toast sem background específico seja legível */
.toast:not([class*="bg-"]) {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #DEE2E6 !important;
}

/* Botão de fechar nos toasts */
.toast .btn-close {
    opacity: 0.8;
}

.toast .btn-close:hover {
    opacity: 1;
}

/* Toast body padding */
.toast-body {
    padding: 0.75rem;
    word-wrap: break-word;
}

/* Ícones nos toasts */
.toast-body .fas,
.toast-body .far,
.toast-body .fab {
    margin-right: 0.5rem;
}