/* ==========================================================================
   Resus.br - main.css v5.0 (Build Final de Sincronização)
   - Restaura 100% da identidade visual e animações originais.
   - Finaliza a nova sidebar, corrigindo bugs de contexto e layout.
   - Garante a funcionalidade de todos os componentes de UI.
   ========================================================================== */

/* --- 1. Variáveis Globais e Sistema de Temas --- */
:root, [data-bs-theme="dark"] {
    --background-color: #0a0a0a;
    --content-bg: #1a1a1a;
    --sidebar-bg: #111111;
    --text-color: #ffffff;
    --text-muted-color: #b0b0b0;
    --border-color: #333333;
    --primary-accent: #dc2626;
    --secondary-accent: #ef4444;
    --link-hover-bg: #2a2a2a;
    --card-secondary-bg: rgba(255, 255, 255, 0.05);
    --card-footer-bg: rgba(0, 0, 0, 0.2);
    --shadow-color-dark: rgba(0, 0, 0, 0.4);
    --shadow-color-light: rgba(255, 255, 255, 0.05);
    --gradient-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a0a0a 100%);
    --sidebar-width-expanded: 280px;
    --sidebar-width-collapsed: 88px;
    --top-bar-height: 80px;
}

body.light-theme {
    --background-color: #f4f7fa;
    --content-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --text-color: #212529;
    --text-muted-color: #6c757d;
    --border-color: #dee2e6;
    --primary-accent: #dc2626;
    --secondary-accent: #ef4444;
    --link-hover-bg: #e9ecef;
    --card-secondary-bg: #f8f9fa;
    --card-footer-bg: #f1f3f5;
    --shadow-color-dark: rgba(0, 0, 0, 0.1);
    --shadow-color-light: rgba(0, 0, 0, 0.01);
    --gradient-bg: linear-gradient(135deg, #f4f7fa 0%, #e9ecef 100%);
}

/* --- 2. Estilos Base e Tipografia --- */
body { font-family: 'Inter', sans-serif; background: var(--gradient-bg); color: var(--text-color); display: flex; transition: all 0.4s ease; overflow-x: hidden; }
h1, h2, h3, h4, h5, .logo, .brand-title { font-family: 'Orbitron', monospace; font-weight: 700; }
.brand-title { color: var(--primary-accent); text-shadow: 0 0 20px rgba(220, 38, 38, 0.5); }
a { color: var(--secondary-accent); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: #ff6b6b; }

/* --- 3. Loader e Fundo --- */
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(220, 38, 38, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(220, 38, 38, 0.05) 0%, transparent 50%); pointer-events: none; z-index: -1; }
#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-color); z-index: 2000; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
.loading svg polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.loading svg polyline#back { fill: none; stroke: color-mix(in srgb, var(--primary-accent) 20%, transparent); }
.loading svg polyline#front { fill: none; stroke: var(--primary-accent); stroke-dasharray: 48, 144; stroke-dashoffset: 192; animation: dash_682 1.4s linear infinite; }
@keyframes dash_682 { 72.5% { opacity: 0; } to { stroke-dashoffset: 0; } }

/* ==========================================================================
   4. Layout Principal com Nova Sidebar
   ========================================================================== */
#sidebar { width: var(--sidebar-width-expanded); min-height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); padding: 1.5rem; display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, transform 0.3s ease; position: fixed; top: 0; left: 0; z-index: 1030; }
body.sidebar-collapsed #sidebar { width: var(--sidebar-width-collapsed); padding: 1.5rem 0.5rem; }
#main-content-wrapper { flex-grow: 1; display: flex; flex-direction: column; height: 100vh; margin-left: var(--sidebar-width-expanded); width: calc(100% - var(--sidebar-width-expanded)); transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
body.sidebar-collapsed #main-content-wrapper { margin-left: var(--sidebar-width-collapsed); width: calc(100% - var(--sidebar-width-collapsed)); }
#top-bar { height: var(--top-bar-height); display: flex; align-items: center; padding: 0 2rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; background: color-mix(in srgb, var(--content-bg) 80%, transparent); backdrop-filter: blur(10px); }
#main-content { flex-grow: 1; padding: 2.5rem; overflow-y: auto; }

/* ==========================================================================
   5. Componentes da Nova Sidebar (Estilo Final)
   ========================================================================== */
#sidebar-toggle.sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; padding: 0 0.5rem; cursor: pointer; border-radius: 8px; transition: background-color 0.2s ease; }
#sidebar-toggle.sidebar-header:hover { background-color: var(--link-hover-bg); }
body.sidebar-collapsed #sidebar-toggle.sidebar-header { justify-content: center; }
#sidebar .logo { font-size: 2rem; font-weight: 900; background: linear-gradient(45deg, var(--primary-accent), var(--secondary-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; }
.toggle-icon-wrapper { border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); color: var(--text-muted-color); }
.toggle-icon { transition: transform 0.3s ease; }
body.sidebar-collapsed .toggle-icon { transform: rotate(180deg); }
.logo-icon-collapsed { display: none; }
body.sidebar-collapsed .logo-text-full, body.sidebar-collapsed .toggle-icon-wrapper { display: none; }
body.sidebar-collapsed .logo-icon-collapsed { display: inline-block; font-size: 2.5rem; color: var(--primary-accent); animation: pulse 1s infinite alternate; }
.nav-section { margin-bottom: 1.5rem; }
.nav-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted-color); margin-bottom: 0.75rem; white-space: nowrap; opacity: 1; transition: opacity 0.2s ease; display: flex; align-items: center; text-align: center; }
.nav-section-title::before, .nav-section-title::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); }
.nav-section-title span { padding: 0 10px; }
body.sidebar-collapsed .nav-section-title { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
#sidebar .nav-link { color: var(--text-muted-color); font-size: 1rem; font-weight: 500; padding: 0.75rem 1rem; margin-bottom: 0.25rem; border-radius: 8px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; transition: all 0.2s ease; }
#sidebar .nav-link i { font-size: 1.25rem; margin-right: 1rem; width: 24px; text-align: center; transition: all 0.2s ease; }
#sidebar .nav-link:hover { background: var(--link-hover-bg); color: var(--text-color); }
#sidebar .nav-link.active { font-weight: 600; color: var(--primary-accent); background: color-mix(in srgb, var(--primary-accent) 15%, transparent); }
body.sidebar-collapsed .nav-link { justify-content: center; }
body.sidebar-collapsed .nav-link-text { display: none; }
body.sidebar-collapsed .nav-link i { margin-right: 0; font-size: 1.5rem; }
#sidebar .sidebar-footer { margin-top: auto; padding-top: 1rem; }
#sidebar .sidebar-footer hr { border-color: var(--border-color); }

/* ==========================================================================
   6. Estilos do Hub de Emergência (Restaurados e Corrigidos)
   ========================================================================== */
.hero-section { background: linear-gradient(135deg, #0a0a0a 0%, #1a0505 50%, #2a0a0a 100%); border-radius: 20px; padding: 4rem 2rem; margin-bottom: 4rem; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); text-align: center; }
.hero-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(220, 38, 38, 0.1) 0%, transparent 70%); animation: rotate 20s linear infinite; z-index: 0; }
.hero-title { font-size: 4rem; animation: glow 3s ease-in-out infinite alternate; background: linear-gradient(45deg, #ffffff, #dc2626, #ef4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 30px rgba(220, 38, 38, 0.3); }
.hero-subtitle { font-size: 1.4rem; color: #b0b0b0; }
.hero-section .badge { position: relative; font-size: 1rem !important; padding: 0.5rem 1rem; animation: ripple 2s infinite; }
.stats-section { background: rgba(220, 38, 38, 0.05); border: 1px solid rgba(220, 38, 38, 0.2); border-radius: 15px; padding: 2rem; margin: 3rem 0; text-align: center; }
.stat-number { font-family: 'Orbitron', monospace; font-size: 3rem; font-weight: 900; color: var(--primary-accent); }
.stat-label { font-size: 1.1rem; color: #b0b0b0; margin-top: 0.5rem; }
.feature-card { background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(42, 42, 42, 0.6)); border: 2px solid transparent; border-radius: 20px; padding: 2.5rem 2rem; text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: var(--text-color); height: 100%; position: relative; overflow: hidden; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); text-decoration: none; display: flex; flex-direction: column; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(145deg, rgba(220, 38, 38, 0.05) 0%, transparent 50%, rgba(239, 68, 68, 0.03) 100%); opacity: 0; transition: opacity 0.4s ease; z-index: -1; }
.feature-card:hover::before { opacity: 1; }
.feature-card:hover { transform: translateY(-15px) scale(1.02); border-color: var(--primary-accent); box-shadow: 0 25px 50px rgba(220, 38, 38, 0.2), 0 0 0 1px rgba(220, 38, 38, 0.1); color: #ffffff; }
.feature-card i { font-size: 3.5rem; margin-bottom: 1.5rem; color: var(--primary-accent); transition: all 0.4s ease; display: block; }
.feature-card:hover i { color: var(--secondary-accent); transform: scale(1.1) rotate(-5deg); animation: pulse 1s infinite alternate; }
.feature-card h4 { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 1.4rem; margin-bottom: 1rem; color: #ffffff; }
.feature-card p { font-size: 1rem; line-height: 1.6; color: #b0b0b0; transition: color 0.3s ease; flex-grow: 1; }
.feature-card:hover p { color: #d0d0d0; }

/* ==========================================================================
   7. Animações e Utilitários
   ========================================================================== */
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes glow { 0% { text-shadow: 0 0 30px rgba(220, 38, 38, 0.3); } 100% { text-shadow: 0 0 50px rgba(220, 38, 38, 0.6); } }
@keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes pulse { from { text-shadow: 0 0 15px rgba(239,68,68,0.5); } to { text-shadow: 0 0 30px rgba(239,68,68,0.9); } }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sidebar-bg); }
::-webkit-scrollbar-thumb { background: var(--primary-accent); border-radius: 4px; }

/* ==========================================================================
   8. Mobile & Responsividade
   ========================================================================== */
.sidebar-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 1020; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.sidebar-backdrop.show { opacity: 1; visibility: visible; }
body.sidebar-open { overflow: hidden; }
.hamburger-button { width: 32px; height: 25px; position: relative; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1060; display: none; }
.hamburger-button span { display: block; position: absolute; height: 4px; width: 100%; background: var(--text-color); border-radius: 9px; left: 0; transition: all 0.25s ease-in-out; }
.hamburger-button span.top { top: 0px; }
.hamburger-button span.middle { top: 10px; }
.hamburger-button span.bottom { top: 20px; }
.hamburger-button.is-active span.top { top: 10px; transform: rotate(135deg); }
.hamburger-button.is-active span.middle { opacity: 0; left: -60px; }
.hamburger-button.is-active span.bottom { top: 10px; transform: rotate(-135deg); }
@media (max-width: 992px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.show { transform: translateX(0); box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5); }
    #main-content-wrapper, body.sidebar-collapsed #main-content-wrapper { margin-left: 0; width: 100%; }
    .hamburger-button { display: block; }
    #sidebar .sidebar-header { display: none; }
    #main-content { padding: 1.5rem; }
    .hero-title { font-size: 2.5rem; }
}

/* ==========================================================================
   9. Resus.br Design System Components
   ========================================================================== */

/* Cards - Estilo Base */
.card-resus {
    background: rgba(26, 26, 26, 0.8); /* Fundo escuro com leve transparência */
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    height: 100%;
    transition: all 0.3s ease;
    display: flex; /* Adicionado para controle de layout interno */
    flex-direction: column; /* Adicionado para controle de layout interno */
}

.card-resus:hover {
    border-color: rgba(220, 38, 38, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card-resus .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem; /* Ajuste de padding */
}

/* Faz o corpo do card ocupar o espaço disponível */
.card-resus .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.card-resus .list-group-item {
    background-color: transparent;
    border-color: var(--border-color);
}

/* Cards Coloridos com Efeito Fosco (Translúcido) */
.card-resus.bg-success {
    background-color: color-mix(in srgb, var(--bs-success) 25%, transparent);
    border-color: var(--bs-success);
}

.card-resus.bg-danger {
    background-color: color-mix(in srgb, var(--bs-danger) 25%, transparent);
    border-color: var(--bs-danger);
}

/* Garante o contraste do texto nos cards coloridos */
.card-resus.bg-success .card-title,
.card-resus.bg-danger .card-title,
.card-resus.bg-success .text-muted,
.card-resus.bg-danger .text-muted {
    color: #fff !important;
}


/* Badges */
.badge-resus {
    border-radius: 50rem;
    padding: 0.4em 0.8em;
    font-weight: 600;
    font-size: 0.8rem; /* Tamanho ajustado */
    text-transform: uppercase;
}

.badge-resus.bg-success { 
    background-color: color-mix(in srgb, var(--bs-success) 20%, transparent) !important; 
    border: 1px solid var(--bs-success); 
    color: var(--bs-success) !important; 
}

.badge-resus.bg-warning { 
    background-color: color-mix(in srgb, var(--bs-warning) 20%, transparent) !important; 
    border: 1px solid var(--bs-warning); 
    color: var(--bs-warning) !important; 
}

.badge-resus.bg-danger  { 
    background-color: color-mix(in srgb, var(--bs-danger) 20%, transparent) !important; 
    border: 1px solid var(--bs-danger); 
    color: var(--bs-danger) !important; 
}