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

:root {
    --azul-lac: #536eb5;      
    --azul-claro: #eef3ff;    
    --borda: #d1d9e6;         
    --branco: #ffffff;
    --texto: #333333;
    --cyan-ia: #00d9ff;
    --verde-online: #00ff88;
}

/* 1. RESET E ESTRUTURA BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* --- 2. NAV TOPO (TELEMETRIA) --- */
.telemetria-nav {
    background: #ffffff;
    padding: 15px 0;
    border-bottom: 2px solid var(--azul-lac);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* Ajuste para não quebrar em telas médias */
}

.nav-item {
    font-size: 0.75rem;
    font-weight: 800;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- 3. LOGIN BOX --- */
.main-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.login-box {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    animation: fadeIn 0.8s ease-out;
}

.logo h1 { 
    font-size: 2.5rem; 
    background: linear-gradient(90deg, var(--azul-lac), var(--cyan-ia));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

.input-group { text-align: left; margin-bottom: 15px; }
.input-group label { font-size: 0.65rem; font-weight: bold; color: var(--azul-lac); display: block; margin-bottom: 5px; }
input { width: 100%; padding: 14px; background: var(--azul-claro); border: 1px solid var(--borda); border-radius: 8px; font-size: 16px; }
input:focus { outline: none; border-color: var(--cyan-ia); background: #fff; box-shadow: 0 0 10px rgba(0, 217, 255, 0.1); }

.btn-login { width: 100%; padding: 15px; background: var(--azul-lac); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-login:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* --- 4. FOOTER HOSPITALAR (RESTAURADO) --- */
.footer-hospitalar {
    background-color: var(--azul-lac) !important;
    color: white !important;
    padding: 40px 20px !important;
    width: 100% !important;
    margin-top: auto;
}

.footer-main-grid {
    display: flex !important;
    justify-content: space-between !important;
    max-width: 1400px !important;
    margin: 0 auto;
    gap: 30px !important;
    flex-wrap: wrap !important; /* Adicionado para responsividade */
}

.footer-column {
    flex: 1 1 250px; /* Base de 250px para permitir quebra de linha */
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    min-width: 200px;
}

.footer-column h3 {
    margin-bottom: 12px !important; 
    font-size: 0.65rem;
    color: #00d9ff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
    text-transform: uppercase;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0 !important;
    font-size: 0.65rem;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.status-item strong {
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 35px;
    text-align: center;
}

.online-status-bar { display: flex; justify-content: center; margin: 30px 0; }
.pill-online {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--verde-online);
    padding: 12px 40px;
    border-radius: 50px;
    color: var(--verde-online);
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.logo-footer { height: 25px; filter: brightness(0) invert(1); opacity: 0.7; }


/* O console (painel de mensagens) precisa subir junto */
#ia-console-panel {
    position: fixed !important;
    bottom: 340px; /* Sobe para ficar logo acima da orbe */
    right: 40px;
    width: 300px;
    height: 400px;
    z-index: 10000;
}

/* Ajuste do console para ele subir junto com a orbe */
#ia-console-panel {
    position: fixed !important;
    bottom: 270px; /* Sobe para ficar acima da orbe */
    right: 40px;
    width: 300px;
    height: 400px;
    z-index: 10000;
}

.ia-core-eye {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #00f2ff 50%, #0066ff 100%);
    box-shadow: 0 0 20px #00f2ff;
    z-index: 2;
}

.ia-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed #00f2ff;
    border-radius: 50%;
    animation: rotate-ia 4s linear infinite;
    opacity: 0.5;
}

.ia-status-tag {
    position: absolute;
    top: -25px;
    background: #00f2ff;
    color: #000;
    font-size: 0.5rem;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 900;
    box-shadow: 0 0 10px #00f2ff;
}

#ia-console-panel {
    position: fixed !important;
    bottom: 120px;
    right: 30px;
    width: 300px;
    height: 400px;
    background: rgba(10, 14, 23, 0.95);
    border: 1px solid #00f2ff;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.console-header { background: #00f2ff; color: #000; padding: 10px; font-size: 0.6rem; font-weight: bold; }
#console-messages { flex: 1; padding: 15px; font-family: 'Courier New', monospace; font-size: 0.7rem; color: #00f2ff; overflow-y: auto; }

/* --- 6. ELEMENTOS E ANIMAÇÕES --- */
.dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.green-pulse { background: var(--verde-online); animation: pulse-green 2s infinite; }
.red { background: #ff0044; box-shadow: 0 0 8px #ff0044; }
.blue { background: var(--cyan-ia); }
.pink { background: #ff69b4; }
.white { background: #fff; border: 1px solid #ccc; }
.cyan-glow { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; animation: pulse-blue 2s infinite; }

.hidden { display: none !important; }

@keyframes rotate-ia { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } }
@keyframes pulse-blue { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- 4. FOOTER HOSPITALAR UNIFICADO (TRAVAMENTO DE GRID) --- */
.footer-hospitalar {
    background-color: var(--azul-lac) !important;
    color: rgb(247, 8, 8) !important;
    padding: 40px 20px !important;
    width: 100% !important;
    margin-top: auto !important; /* Empurra para o fim da página */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-main-grid {
    display: grid !important;
    /* TRAVA 4 COLUNAS IGUAIS (IGUAL AO ACOLHIMENTO) */
    grid-template-columns: repeat(4, 1fr) !important; 
    max-width: 1400px !important;
    margin: 0 auto !important;
    gap: 30px !important;
}

.footer-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.footer-column h3 {
    margin-bottom: 15px !important; 
    font-size: 0.65rem;
    color: #00d9ff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap; /* Título em linha única */
}

/* --- ORGANIZAÇÃO INTERNA DO STATUS ITEM --- */

.status-item {
    display: flex !important;
    align-items: center !important; /* Alinha verticalmente bolinha e texto */
    justify-content: flex-start !important; /* Garante que o conteúdo comece da esquerda */
    gap: 10px !important; /* Espaço fixo entre a bolinha e o nome do setor */
    padding: 6px 0 !important;
    font-size: 0.65rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    width: 100% !important;
}

/* Força o número (strong) a ir para a ponta direita */
.status-item strong {
    margin-left: auto !important; /* Empurra o número para o final da linha */
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--cyan-ia) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    min-width: 35px;
    text-align: center;
    font-family: monospace;
}

/* Garante que a bolinha não encolha */
.status-dot {
    flex-shrink: 0 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
}

/* Caso você esteja usando um span para o texto do nome */
.status-item span:not(.status-dot) {
    white-space: nowrap; /* Impede que o nome do setor quebre em duas linhas */
}

/* --- 5. AJUSTE DE IA PARA NÃO TAMPAR TEXTO (RESPIRO) --- */
@media (max-width: 1000px) {
    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- AJUSTE IA CENTRALIZADA NO CELULAR --- */
@media (max-width: 600px) {
    
    .footer-hospitalar {
        padding: 40px 15px 100px 15px !important; /* Aumentei o espaço no fundo para a IA não cobrir texto */
    }

    .footer-main-grid {
        display: flex !important;
        flex-direction: column !important;
        padding-right: 0 !important; /* Remove o recuo lateral anterior */
        gap: 30px !important;
    }




 
    /* CONSOLE IA CENTRALIZADO */
    #ia-console-panel {
        width: 94% !important;
        right: 3% !important;
        left: 3% !important;
        bottom: 110px !important;
        height: 380px !important;
    }

    .status-item {
        font-size: 0.8rem !important;
        padding: 12px 0 !important;
    }
}

/* BOTÃO DE VOLTAR - IA PORTAL STYLE */
.ia-back-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px 12px 50px; /* Espaço para o orbe na esquerda */
    background: linear-gradient(135deg, rgba(17, 27, 51, 0.7) 0%, rgba(13, 22, 41, 0.7) 100%);
    border: 2px solid #00d9ff; /* Ciano IA */
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px; /* Formato pílula */
    overflow: hidden; /* Corta o brilho interno */
    transition: all 0.4s ease;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
    margin-right: 20px; /* Espaço para os itens do nav */
}

/* O "Orbe" Central (Núcleo) na esquerda */
.ia-portal-core {
    position: absolute;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #00f2ff 50%, #0066ff 100%);
    box-shadow: 0 0 15px #00f2ff;
    z-index: 2;
}

/* O Pulso Neon ao redor do núcleo */
.ia-portal-pulse {
    position: absolute;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #00f2ff;
    animation: portal-pulse 2s infinite ease-out;
    opacity: 0.5;
}

/* Efeito de Brilho Interno (Passando pelo botão) */
.ia-back-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: all 0.5s;
}

/* --- ANIMAÇÕES --- */
@keyframes portal-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes rotate-back-btn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- EFEITOS NO HOVER --- */
.ia-back-button:hover {
    box-shadow: 0 0 25px rgba(0, 217, 255, 0.6);
    filter: brightness(1.2); /* Aumenta o brilho total */
    transform: translateY(-2px); /* Pequeno pulo */
}

.ia-back-button:hover::after {
    left: 120%; /* Brilho interno passa pelo botão */
}

.ia-back-button:hover .ia-portal-core {
    box-shadow: 0 0 25px #00f2ff, 0 0 40px #fff;
    animation: rotate-back-btn 3s linear infinite; /* Núcleo começa a girar */
}

/* Ajuste de equilíbrio para o Nav com o novo botão */
.nav-container {
    display: flex;
    justify-content: space-between; /* Empurra o botão para um lado e os status para o outro */
    align-items: center;
    padding: 0 30px; /* Dá um respiro nas laterais da barra */
    width: 100%;
    max-width: 100% !important; /* Garante que use toda a largura */
}

/* Deixa o grupo de status (Online/Relógio) organizado à direita */
.nav-status-group {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* --- FORÇAR CORES NAS BOLINHAS DE STATUS --- */
.status-dot.cyan { 
    background-color: #00d9ff !important; 
    box-shadow: 0 0 10px #00d9ff !important; 
}

.status-dot.red { 
    background-color: #ff4d4d !important; 
    box-shadow: 0 0 10px #ff4d4d !important; 
}

.status-dot.red-pulse {
    background-color: #ff4d4d !important;
    animation: alert-pulse-emergencia 1.5s infinite !important;
}

@keyframes alert-pulse-emergencia {
    0% { box-shadow: 0 0 0px #ff4d4d; transform: scale(1); }
    50% { box-shadow: 0 0 12px #ff4d4d; transform: scale(1.1); }
    100% { box-shadow: 0 0 0px #ff4d4d; transform: scale(1); }
}

/* --- AJUSTE CELULAR: TEXTOS NA ESQUERDA | IA NA DIREITA --- */
@media (max-width: 600px) {
    
    .footer-hospitalar {
        /* Reserva o espaço na DIREITA para a IA */
        padding: 40px 80px 120px 15px !important; 
        position: relative !important;
    }

    .footer-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        /* Texto alinhado totalmente à esquerda */
        align-items: flex-start !important; 
    }



    /* CONSOLE IA: CENTRALIZADO */
    #ia-console-panel {
        width: 92% !important;
        left: 4% !important;
        bottom: 105px !important;
    }

    .status-item {
        width: 100% !important;
        font-size: 0.75rem !important;
        padding: 10px 0 !important;
        display: flex !important;
        /* Nome na esquerda e Número encostado no limite do padding direito */
        justify-content: space-between !important;
    }
}



/* --- ESTILO TABLET: IA (ESQUERDA) | INFO (DIREITA) --- */
@media screen and (min-width: 601px) and (max-width: 1100px) {

    /* 1. Trava a Orbe na Esquerda (Conforme seu valor de 700px) */
    #core-ia-floater, 
    .ia-orbe-container {
        position: fixed !important;
        bottom: 150px !important; 
        left: 700px !important;    /* Mantido conforme seu código */
        right: auto !important;
        transform: none !important;
        z-index: 999999 !important;
    }

    /* 2. Console abre alinhado à esquerda conforme a Orbe */
    #ia-console-panel {
        position: fixed !important;
        bottom: 240px !important;
        left: 40px !important;
        right: auto !important;
        width: 350px !important;
    }

    /* 3. Rodapé: TUDO ALINHADO À DIREITA */
    footer, .footer-hospitalar {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;   /* TRAVA TUDO NA DIREITA */
        justify-content: center !important;
        text-align: right !important;        /* TEXTO PARA A DIREITA */
        padding-right: 40px !important;      /* ESPAÇO NA BORDA DIREITA */
        padding-left: 0 !important;
    }

    /* 4. Ajuste dos itens (Mantendo bolinhas e ícones intactos) */
    .setores-grid, .info-unidades, .info-footer {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;    /* GARANTE ALINHAMENTO À DIREITA */
        margin-left: auto !important;        /* EMPURRA O BLOCO TODO */
        margin-right: 0 !important;
    }

    /* Garante que os itens individuais com as bolinhas sigam o fluxo da direita */
    .setor-item {
        justify-content: flex-end !important; /* BOLINHA E TEXTO NA DIREITA */
        text-align: right !important;
    }
}

.card-login {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 150, 255, 0.2);
}

/* Uma linha de luz laser que fica passando pelo card */
.card-login::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 50px;
  height: 300%;
  background: linear-gradient(to right, transparent, rgba(0, 150, 255, 0.4), transparent);
  transform: rotate(45deg);
  animation: laser 4s infinite linear;
}

@keyframes laser {
  0% { left: -100%; top: -100%; }
  100% { left: 200%; top: 200%; }
}


/* Forçando o efeito no container principal do login */
.card-login, [class*="card"], .login-container { 
    background-color: #ffffff !important; /* Garante o branco */
    border-radius: 25px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    
    /* A Mágica da Entrada */
    opacity: 0;
    transform: translateY(30px);
    animation: entradaSuave 1s ease-out forwards;
    animation-delay: 0.3s; /* Pequeno atraso para carregar após o fundo */
}

@keyframes entradaSuave {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.btn-conexao {
    position: relative;
    overflow: hidden;
    transition: 0.4s;
}

/* Um brilho que passa pelo botão igual ao do título */
.btn-conexao::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: 0.6s;
}

.btn-conexao:hover::before {
    left: 100%;
}







h2, .subtitulo, p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 45px;
    display: block;

    /* Gradiente com as cores do seu Nav */
    background: linear-gradient(
        to right, 
        #4a6cb9 20%, 
        #4a6cb9 40%, 
        #06e906 50%, /* Verde do seu Nav */
        #4a6cb9 60%, 
        #4a6cb9 80%
    ) no-repeat;
    
    background-size: 200% auto;
    
    /* ESSAS TRÊS LINHAS SÃO A CHAVE: */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Garante que o texto fique "oco" para o brilho aparecer */

    animation: varreduraAcolhimento 3s linear infinite;
}

@keyframes varreduraAcolhimento {
    from { background-position: 200% center; }
    to { background-position: -200% center; }
}





/* Títulos das colunas com varredura */
.footer-column h3 {
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    /* Mantendo o degradê que você aprovou */
    background: linear-gradient(to right, #69080d5d 20%, #06e906 50%, #4a6cb9 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: varreduraFooter 4s linear infinite;
    transition: all 0.3s ease;
}

/* Efeito Especial nos Títulos ao Passar o Mouse */
.footer-column:hover h3 {
    /* Gradiente meio verde, meio vermelho */
    background: linear-gradient(
        to right, 
        #06e906 0%,   /* Verde (Sistema OK) */
        #06e906 45%, 
        #ff4d4d 55%,  /* Vermelho (Alerta/Emergência) */
        #ff4d4d 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Faz o degradê "vibrar" levemente no centro */
    animation: vibraCores 0.8s ease-in-out infinite alternate;
    transform: scale(1.08); /* Dá um zoom maior no título */
    filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.3));
    transition: all 0.3s ease;
}

@keyframes vibraCores {
    from { background-position: 45% center; }
    to { background-position: 55% center; }
}

/* Deixar os itens da coluna em destaque quando o título estiver em hover */
.footer-column:hover .status-item {
    opacity: 1;
    color: #eee;
}

/* 1. Estado Normal dos Nomes das Salas (Com brilho que corre) */
.status-item {
    font-size: 0.8rem;
    color: #eee;
    padding: 6px 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Gradiente suave para o texto não ficar parado */
    background: linear-gradient(to right, #ffffff 0%, #a8e6cf 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Varredura mais lenta que o título para não cansar a vista */
    animation: varreduraSuave 6s linear infinite;
}

/* 2. Efeito de Movimento ao Passar o Mouse nos Nomes */
.status-item:hover {
    transform: translateX(10px); /* O nome "anda" para a direita */
    filter: drop-shadow(0 0 5px rgba(6, 233, 6, 0.6));
    font-weight: bold;
    /* Para a animação e foca no verde do seu Nav */
    animation: none !important;
    -webkit-text-fill-color: #f7020262 !important;
}

/* 3. Animação de Varredura Suave para os Itens */
@keyframes varreduraSuave {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* 4. Pequeno ajuste nos pontos de status para combinarem */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
    flex-shrink: 0; /* Impede o ponto de "esmagar" */
}












.ia-flutuante-footer {
    position: fixed;
    bottom: 110px; /* Altura ideal acima do seu footer */
    left: 50px;    /* AGORA NO LADO ESQUERDO */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
    pointer-events: none; 
    transition: all 0.15s ease-out; /* Suavidade no movimento */
}

.logo-ia-pixel {
    width: 75px; /* Tamanho levemente menor para não cobrir as letras */
    height: auto;
    border-radius: 50%;
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.7));
    animation: pulsarIA_Footer 2s infinite ease-in-out;
}

.ia-status-tag {
    background: rgba(0, 0, 0, 0.8);
    color: #00ffff;
    font-size: 0.55rem;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid #00ffff;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

@keyframes pulsarIA_Footer {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.5)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8)); }
}





/* --- ESTILO PARA O LOGO NO TOPO --- */
.logo-topo-fixo {
    width: 35px;
    height: auto;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.7));
    z-index: 1001;
}

/* --- BARRA DE TELEMETRIA PADRÃO ACOLHIMENTO --- */
.telemetria-nav {
    width: 100%;
    height: 40px; /* Altura fina e elegante */
    background-color: #536eb5 !important; /* Azul sólido do Acolhimento */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
}

/* Efeito de Varredura (Brilho que passa) */
.scan-line-nav {
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: scanBar 4s infinite linear;
    pointer-events: none;
}

@keyframes scanBar {
    0% { left: -100%; }
    100% { left: 200%; }
}

.nav-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 5;
}

/* ESTILO PÍLULA (STATUS-TAG) */
.status-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 0, 0, 0.25); /* Fundo sutil */
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.logo-topo-fixo {
    width: 25px;
    height: auto;
    margin-right: 5px;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}

/* CORES ESPECÍFICAS DAS PÍLULAS */
.tag-green { border-color: #00ff88; color: #00ff88 !important; }
.tag-cyan { border-color: #00ffff; color: #00ffff !important; }
.tag-red { border-color: #ff4757; color: #ff4757 !important; }

@media (max-width: 768px) {
    /* 1. Ajusta a altura da barra para ser bem fina */
    .telemetria-nav {
        height: 32px !important;
    }

    /* 2. Distribui os itens usando todo o espaço da tela */
    .nav-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 0 4px !important;
        gap: 2px !important;
    }

    /* 3. Reduz o tamanho das pílulas e das letras ao máximo */
    .status-tag {
        font-size: 0.45rem !important; /* Tamanho crítico para caber tudo */
        padding: 1px 4px !important;
        border-radius: 8px !important;
        letter-spacing: -0.4px !important; /* Aperta as letras para economizar espaço */
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 4. Esconde os nomes muito longos e substitui por siglas técnicas no Mobile */
    /* Isso garante que o usuário entenda sem o layout quebrar */
    .tag-green::after { content: ""; } /* Mantém igual */
    
    /* 5. Ajusta o ícone e o logo para não ocuparem quase nada */
    .logo-topo-fixo {
        width: 16px !important;
        margin-right: 2px !important;
    }

    .dot, .status-dot {
        width: 4px !important;
        height: 4px !important;
        margin-right: 2px !important;
    }

    /* 6. Remove margens inúteis nos itens */
    .nav-item {
        gap: 1px !important;
        margin: 0 !important;
    }
}

/* Efeito de respiração real com aura de luz */
.status-tag {
    animation: glow-pulse 2s infinite ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Ajuda a definir a borda */
}

@keyframes glow-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 5px rgba(0, 255, 200, 0.2); /* Sombra sutil */
    }
    50% {
        transform: scale(1.02); /* Leve expansão para parecer que está respirando */
        filter: brightness(1.5);
        /* Aqui é onde o brilho acontece: */
        box-shadow: 0 0 15px rgba(0, 255, 200, 0.6), 0 0 5px rgba(0, 255, 200, 0.4);
    }
}










/* --- AJUSTE IA DO RODAPÉ DO FOOTER PARA NAO SUBIR NEM DESCER DEMAIS... DANIEL--- */
#core-ia-floater {
    position: fixed !important;
    bottom: 557px; /* Subimos mais para garantir que saia do rodapé */
    right: 40px;
    width: 80px;
    height: 80px;
    z-index: 10001;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}







#btn-conectar {
    background: #00f0ff !important; /* Cor sólida do LAC SYSTEM */
    color: #0a192f !important; /* Texto escuro para leitura perfeita */
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    /* Brilho neon intenso */
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6), 
                0 0 30px rgba(0, 240, 255, 0.3) !important;
}

#btn-conectar:hover {
    background: #ffffff !important; /* Fica branco ao passar o mouse */
    color: #00f0ff !important; /* Texto volta para o ciano */
    box-shadow: 0 0 25px #00f0ff, 0 0 50px #00f0ff !important;
    transform: scale(1.03) !important; /* Dá um leve zoom de "botão ativo" */
    letter-spacing: 4px !important;
}

#btn-conectar:active {
    transform: scale(0.98) !important;
}


















#particles-js {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important; /* Fica atrás do seu card branco de login */
    background-color: #ffffff !important; /* Garante o fundo branco da Index */
}




/* FOOTER TOP CONFIGURADO */

footer {
    position: relative;
    bottom: 20px; /* Eleva o footer da base */
    background: rgba(248, 2, 2, 0.2); /* Fundo semi-transparente */
    backdrop-filter: blur(5px); /* Desfoque de vidro */
    border-top: 1px solid rgba(0, 240, 255, 0.3); /* Linha neon discreta */
    padding: 15px;
    margin: 0 20px;
    border-radius: 15px;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
}


/* CONTAINER PRINCIPAL DA INDEX */
.glass-bg {
    /* Mantenha seus efeitos de fundo glassmorphism aqui */
    
    /* CORREÇÃO DO CORTE DIREITO */
    width: calc(100% - 40px); /* Usa quase toda a largura, deixando respiro */
    max-width: 1400px; /* Largura máxima para não ficar esticado em monitores grandes */
    margin: 30px auto; /* Centraliza horizontalmente e dá espaço em cima/baixo */
    
    /* Adicione padding interno para o conteúdo não grudar na borda */
    padding-right: 20px;
    padding-left: 20px;
    
    /* Garante que o conteúdo que vazar seja visível ou rolável internamente */
    overflow-x: hidden; /* Evita barra de rolagem horizontal chata */
}

/* AJUSTE NO FOOTER SUSPENSO (Para não cortar) */
footer.footer-hospitalar {
    position: relative;
    width: calc(100% - 40px); /* Mesma lógica do container */
    max-width: 1360px; /* Um pouco menor que o container principal */
    margin: 20px auto; /* Centraliza e afasta */
    border-radius: 15px; /* Visual suspenso bonito */
    
    /* Garante que o grid interno respire */
    padding: 20px;
    box-sizing: border-box;
}

/* Se as colunas internas estiverem cortando em telas menores */
.footer-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Grid responsivo */
    gap: 20px;
}


/* CONTAINER PRINCIPAL DO INDEX */
.container-principal, .glass-bg { 
    /* Garante que ele nunca encoste nas bordas laterais */
    width: 92% !important; 
    
    /* Centraliza e dá o espaço no topo/fundo para o efeito suspenso */
    margin: 30px auto !important; 
    
    /* Define um limite para não ficar largo demais em monitores UltraWide */
    max-width: 1400px !important; 
    
    /* Visual de vidro flutuante */
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    
    /* Importante: impede o corte do conteúdo interno */
    overflow: hidden; 
    padding: 20px;
    box-sizing: border-box;
}

/* AJUSTE DO FOOTER (PARA FICAR IGUAL À TRIAGEM) */
footer, .footer-hospitalar {
    width: 92% !important;
    max-width: 1400px !important;
    margin: 0 auto 30px auto !important; /* Centralizado com margem embaixo */
    border-radius: 15px;
    padding: 20px;
    display: block;
}




/* No seu arquivo de ESTILOS (CSS) do Index */
.glass-bg, .container-principal {
    width: 94% !important; /* Cria o recuo lateral igual ao da triagem */
    max-width: 1400px !important; /* Evita que estique demais */
    margin: 20px auto !important; /* Centraliza e dá o efeito 'suspenso' */
    padding: 20px;
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho da caixa */
    overflow-x: hidden; /* Remove a chance de corte lateral */
}












/* FOOTER SE MOVIMENTANDO */
/* 1. O CONTAINER PAI (Necessário para a inclinação 3D) */
body {
    perspective: 1200px; 
}

/* 2. O FOOTER (A Ficha do LAC System) */
.footer-lacs {
    /* Cor de fundo solicitada */
    background: rgb(83, 110, 181) !important; 
    
    /* Borda no azul padrão do sistema */
    border: 2px solid #536eb5 !important; 
    
    border-radius: 20px;
    padding: 30px;
    margin: 20px auto;
    width: 95%;
    
    /* Transição elástica para o efeito de "se mexer" */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center bottom; 
    
    box-shadow: 0 10px 30px rgba(1, 177, 247, 0.925);
    cursor: pointer;
}

/* 3. O EFEITO DE MOVIMENTO AO PASSAR O MOUSE */
.footer-lacs:hover {
    /* Ele levanta, inclina o topo para frente e aumenta levemente */
    transform: translateY(-15px) rotateX(8deg) scale(1.01);
    
    /* Mantém a cor, mas remove a transparência no hover para destacar */
    background: rgba(215, 210, 224, 0.164) !important;
    border-color: #536eb5 !important; 
    
    /* Brilho externo sutil para combinar com o LAC VIVA */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.096), 
                0 0 20px rgba(236, 0, 0, 0.158); 
}

/* 4. MOVIMENTO DOS ITENS INTERNOS */
.footer-lacs:hover .setor-item {
    /* Faz as linhas da ficha "deslizarem" levemente para a direita */
    transform: translateX(8px); 
    transition: transform 0.4s ease;
}



/* 3. O EFEITO DE MOVIMENTO AO PASSAR O MOUSE NO PAINEL */
.footer-lacs:hover {
    transform: translateY(-10px) rotateX(4deg) scale(1.01);
    
    /* Mantém o fundo escuro para o neon azul aparecer */
    background: rgba(83, 110, 181) !important; 
    border-color: #536eb5 !important; 
    
    /* Brilho externo sutil em azul */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 
                0 0 25px rgba(83, 110, 181, 0.3); 
}










/* --- CONFIGURAÇÃO EXCLUSIVA PARA CELULAR --- */
@media screen and (max-width: 768px) {
    
    /* 1. Alinha os textos na esquerda e números na direita (RETO) */
    .status-item {
        display: flex !important;
        justify-content: space-between !important; /* Joga o número para o fim da linha */
        align-items: center !important;
        width: 100% !important;
        padding: 8px 5px !important;
        border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important; /* Linha sutil para separar */
    }

    /* Garante que o texto não quebre e fique alinhado */
    .status-item span:first-child {
        text-align: left !important;
        white-space: nowrap !important;
        font-size: 0.85rem !important;
    }

    /* 2. REAPARECER IA: Força a posição fixa no canto inferior */
    #core-ia-floater {
        position: fixed !important;
        bottom: 0px !important; /* POSIÇÃO DA IA SUPERIOR E */
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        display: flex !important; /* Garante que não suma */
        z-index: 100000 !important; /* Fica na frente de tudo */
        transform: scale(0.8) !important; /* Diminui um pouco para o celular */
    }

    /* 3. Ajusta o Console de Resposta */
    #ia-console-panel {
        position: fixed !important;
        width: 90% !important;
        left: 5% !important;
        bottom: 90px !important;
        height: 60vh !important;
        z-index: 100001 !important;
    }

    /* Organiza o Footer para ocupar a largura toda */
    .footer-lacs, footer {
        width: 90% !important; /* LARGURA DO FOOTER  EM PORCENTAVEM NO CELULAR LD E LE */
        padding: 40px 40px !important; /* LARGURA DO MOBILE NO CELULAR LD E LE */
    }
}




.btn-apoio-blink {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 15px 25px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
    animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 10px #ff0000; }
    50% { transform: scale(1.05); box-shadow: 0 0 30px #ff0000; }
    100% { transform: scale(1); box-shadow: 0 0 10px #ff0000; }
}