/* ========================================================== */
/* VARIÁVEIS GLOBAIS (Baseadas no estilo dark-mode do login.php) */
/* ========================================================== */
:root{
    /* Cores Dark Mode */
    --bg: #0b0f14;
    --card: #121821;
    --muted: #8ea2b3;
    --text: #ebf2f7;
    
    /* Cores Primárias (Teal/Indigo - Adaptado para o padrão do index.php) */
    --pri: #1976d2; /* Azul Padrão (Manter para o login) */
    --pri-600:#1565c0;
    --pri-700:#0d47a1;
    
    /* Cores Caldobom (Teal/Verde-Azulado - Dominante no index.php) */
    --caldo-pri: #14b8a6; /* Teal-500 */
    --caldo-pri-dark: #0d9488; /* Teal-600 */
    --caldo-pri-border: #0f766e; /* Teal-700 */

    /* Estilos Gerais */
    --border: #1e2a38;
    --radius: 12px;
    --shadow: 0 8px 20px rgba(0,0,0,.25);

    /* Fonte Padrão (Usada no index.php) */
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ========================================================== */
/* ESTILOS GERAIS PARA BODY E HTML (Aplicável ao Login e Index) */
/* ========================================================== */
* { box-sizing: border-box; }

html, body { 
    height: 100%; 
    margin: 0; 
    -webkit-tap-highlight-color: transparent;
	padding-top: constant(safe-area-inset-top); /* Para iOS mais antigos (compatibilidade) */
    padding-top: env(safe-area-inset-top);     /* Padrão moderno (Android e iOS) */
	
}

/* ========================================================== */
/* ESTILOS ESPECÍFICOS: LOGIN.PHP */
/* ========================================================== */

/* Estilo do Body (Login) */
body.login-body {
    color: var(--text); 
    background: linear-gradient(180deg, #0a0e13 0%, #0b1220 100%);
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.login-container{ 
    max-width: 400px; 
    width: 90%; 
    padding: 20px; 
    background: rgba(18, 24, 33, .75); 
    backdrop-filter: blur(6px); 
    border:1px solid var(--border); 
    border-radius: var(--radius); 
    box-shadow: var(--shadow); 
}
.login-container h2{ 
    text-align: center; 
    color: var(--text); 
    margin-bottom: 20px; 
}
.form-group{ 
    margin-bottom: 15px; 
}
.form-group label{ 
    display: block; 
    margin-bottom: 5px; 
    color: var(--muted); 
}
.form-group input[type="text"], 
.form-group input[type="password"]{
    width: 100%; 
    min-height: 44px; 
    border-radius: 10px; 
    border: 1px solid var(--border); 
    background: #0e141d; 
    color: var(--text); 
    padding: 10px 12px; 
    outline: none;
}
.form-group input[type="text"]:focus, 
.form-group input[type="password"]:focus{ 
    border-color: var(--pri); 
    box-shadow: 0 0 0 3px rgba(25,118,210,.2); 
}
.btn{ 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    min-height: 44px; 
    padding: 10px 14px;
    border-radius: 10px; 
    border: 1px solid var(--border); 
    background: #0f1622; 
    color: #e5eff7; 
    cursor: pointer;
    text-decoration: none; 
    user-select: none; 
    transition: transform .06s ease, background .2s ease, border-color .2s ease; 
    width: 100%; 
}
.btn-primary{ 
    background: linear-gradient(180deg, var(--pri) 0%, var(--pri-700) 100%); 
    border-color: transparent; 
}
.btn-primary:hover{ 
    background: linear-gradient(180deg, var(--pri-600) 0%, var(--pri-700) 100%); 
}
.error-message{ 
    color: #ff6b6b; 
    text-align: center; 
    margin-top: 15px; 
}


/* ========================================================== */
/* ESTILOS ESPECÍFICOS: INDEX.PHP (Tailwind é a base) */
/* ========================================================== */

/* Estilo para garantir que o iframe preencha o espaço corretamente */
#iframe-container {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 64px; /* Altura do header */
    bottom: 40px; /* Altura do footer */
    left: 0;
    right: 0;
    z-index: 50;
    background-color: #f1f5f9; /* Fundo claro para a área de conteúdo (Tailwind bg-gray-100) */
}

#conteudo {
    width: 100%;
    height: 100%;
    border: none;
    transition: opacity 0.3s;
}

/* Oculta a barra de rolagem do body quando o iframe estiver ativo */
.iframe-active { 
    overflow: hidden; 
}

.card-sistema:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Estilo de transição para o botão de SAIR */
.btn-logout {
    transition: background-color 0.3s, transform 0.2s;
}

/* Estilo para garantir a logo no header */
.logo {
    height: 40px; /* Ajuste conforme o tamanho real da sua logo */
    width: auto;
}