/* ==========================================================================
   VARIÁVEIS GLOBAIS
   ========================================================================== */
:root {
    /* Cores do Site Público */
    --azul-escuro: #003366; 
    --azul-principal: #00509E; 
    --azul-claro: #E6F0FA; 
    --amarelo-destaque: #FFC107; 
    
    /* Cores do ERP */
    --bg-sidebar: #003366;
    --bg-sidebar-hover: #004080;
    --destaque: #FFC107;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================================
   1. SITE PÚBLICO (Cores, Topbar, Botões e Cursos)
   ========================================================================== */
.bg-azul-escuro { background-color: var(--azul-escuro) !important; color: white; }
.bg-azul-principal { background-color: var(--azul-principal) !important; color: white; }
.bg-azul-claro { background-color: var(--azul-claro) !important; }
.text-azul-principal { color: var(--azul-principal) !important; }
.text-azul-escuro { color: var(--azul-escuro) !important; }

.top-bar { font-size: 0.85rem; padding: 5px 0; }
.top-bar a { color: white; text-decoration: none; }
.top-bar a:hover { color: var(--amarelo-destaque); }

.btn-amarelo { background-color: var(--amarelo-destaque); color: var(--azul-escuro); font-weight: bold; }
.btn-amarelo:hover { background-color: #e0a800; color: var(--azul-escuro); }
.btn-outline-azul { border-color: var(--azul-principal); color: var(--azul-principal); }
.btn-outline-azul:hover { background-color: var(--azul-principal); color: white; }

.card-curso { border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-bottom: 4px solid var(--azul-principal); transition: transform 0.3s; }
.card-curso:hover { transform: translateY(-5px); }
.card-curso img { height: 200px; object-fit: cover; }

/* Efeito do Logo Vazado no Header */
.logo-wrapper {
    position: relative;
    width: 140px; 
    height: 50px; 
}
.logo-sobreposto {
    position: absolute;
    top: 0; 
    left: 0;
    height: 80px; 
    z-index: 1050; 
    filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.4)); 
    transition: transform 0.3s ease;
}
.logo-sobreposto:hover {
    transform: scale(1.05); 
}

@media (max-width: 991px) {
    .logo-wrapper { width: 100px; }
    .logo-sobreposto { height: 90px; top: -5px; }
}

/* Efeito Elegante para os Parceiros */
.parceiros-img {
    max-height: 45px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(60%); 
    transition: all 0.4s ease; 
}
.parceiros-img:hover {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.08);
}


/* ==========================================================================
   2. TELA DE LOGIN DO ERP E FORMULÁRIOS
   ========================================================================== */
.login-page { background: linear-gradient(135deg, #003366 0%, #00509E 100%); height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden; width: 100%; max-width: 400px; }
.login-header { background-color: #f8f9fa; padding: 30px 20px; text-align: center; border-bottom: 2px solid #E6F0FA; }
.login-header img { max-height: 70px; }
.login-body { padding: 40px 30px; }
.btn-login { background-color: #00509E; color: white; font-weight: bold; padding: 12px; width: 100%; border-radius: 8px; border: none; transition: 0.3s; }
.btn-login:hover { background-color: #003366; color: white; }

/* Adicione esta linha aqui para manter o efeito azul nos campos! */
.form-control:focus { border-color: #00509E; box-shadow: 0 0 0 0.25rem rgba(0, 80, 158, 0.25); }

.step-modal { display: none; }
.step-modal.active { display: block; }


/* ==========================================================================
   3. PAINEL DO ERP (Sidebar e Layout)
   ========================================================================== */
.erp-body { background-color: #f4f7f6; }
.bg-sidebar { background-color: var(--bg-sidebar) !important; }

.sidebar-link {
    color: #d1e0e0; border-radius: 0 !important; border-left: 4px solid transparent; font-weight: 500;
}
.sidebar-link:hover, .sidebar-link:focus { color: #fff; background-color: var(--bg-sidebar-hover); }
.sidebar-link.active { color: #fff !important; background-color: var(--bg-sidebar-hover) !important; border-left-color: var(--destaque); }

.submenu-link { color: #9cb2c7; padding-left: 3rem !important; font-size: 0.9em; }
.submenu-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }

.sidebar-link .caret-icon { transition: transform 0.3s ease; }
.sidebar-link[aria-expanded="true"] .caret-icon { transform: rotate(180deg); }


/* ==========================================================================
   4. CARTEIRINHA DIGITAL
   ========================================================================== */
.carteirinha-page { margin: 0; padding: 0; background-color: #032066; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; color:#032066; }
.carteirinha-container { position: relative; width: 100%; max-width: 450px; }
.carteirinha-container .bg-img { width: 100%; display: block; height: auto; }
.campo-texto { position: absolute; color: #032066; font-weight: bold; font-size: 1.1rem; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }

.box-foto { position: absolute; top: 19.3%; left: 49.5%; width: 39%; height: 30.5%; overflow: hidden; }
.box-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.box-nome { top: 55.8%; left: 8.5%; width: 82%; height: 4%; font-size: 1rem; justify-content: flex-start; padding-left: 10px; text-transform: uppercase; }
.box-turma { top: 65.8%; left: 8.5%; width: 47%; height: 4%; justify-content: flex-start; padding-left: 10px; font-size: 0.95rem; }
.box-ano { top: 65.8%; left: 59.5%; width: 31%; height: 4%; font-size: 1.1rem; }
.box-ra { top: 74.3%; left: 8.5%; width: 47%; height: 4%; justify-content: flex-start; padding-left: 10px; font-size: 1rem; letter-spacing: 1px; }
.box-nasc { top: 74.3%; left: 59.5%; width: 31%; height: 4%; font-size: 1.1rem; }
.box-qrcode { position: absolute; top: 81%; left: 82%; transform: translate(-50%, 0); width: 65px; height: 65px; background: #fff; padding: 3px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.box-qrcode img { width: 100%; height: auto; }
.box-validade { position: absolute; bottom: 3.8%; right: 10%; width: 25%; height: 4%; font-size: 0.8rem; color: #032066; font-weight: 900; text-align: right; display: flex; align-items: center; justify-content: flex-end; letter-spacing: 1px; }

/* ==========================================================================
   5. CARROSSEL DINÂMICO (HERO PARALLAX) - VERSÃO SLIM REVISADA
   ========================================================================== */
.hero-carousel {
    position: relative; width: 100%; height: 85vh; min-height: 500px; overflow: hidden;
}
.hero-carousel .carousel-inner, .hero-carousel .carousel-item { height: 100%; }

.banner-slide { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
.banner-images-area { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* WRAPPERS (Posicionamento das Imagens PNG) */
.wrapper-img-1, .wrapper-img-2, .wrapper-img-solo {
    position: absolute; left: 50%; transform: translateX(-50%); 
    width: 90vw; display: flex; justify-content: center; pointer-events: none;
}
.wrapper-img-solo { max-width: 600px; max-height: 90vh; align-items: center; z-index: 2; top: 20%; }
.wrapper-img-1 { top: 10%; max-height: 70vh; align-items: flex-start; z-index: 2; }
.wrapper-img-2 { bottom: 30%; max-height: 50vh; align-items: flex-end; z-index: 1; }

.wrapper-img-1 img, .wrapper-img-solo img, .wrapper-img-2 img {
    max-width: 100%;   /* Trava para não vazar da div pai */
    height: auto; 
    object-fit: contain; 
}

/* ÁREA DE TEXTO (Tarja Slim - Restaurada) */
.banner-text-area { 
    position: absolute; bottom: 3%; left: 0; width: 100%; height: auto;
    background-color: rgba(0, 51, 102, 0.70); padding: 12px 20px; z-index: 10;
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    text-align: center; backdrop-filter: blur(4px); 
}

/* Tamanhos de Fonte (Garantindo que fiquem pequenos) */
.banner-text-area h1 { font-size: 1.7rem !important; margin-bottom: 4px !important; line-height: 1.2; }
.banner-text-area h4 { font-size: 1.0rem !important; margin-bottom: 8px !important; font-weight: 300 !important; }
.banner-text-area .btn { padding: 6px 20px; font-size: 0.85rem; }

/* --- LÓGICA DE ANIMAÇÃO DAS IMAGENS --- */
.img-animada { opacity: 0; }

.carousel-item.active .slide-in-right { animation: entrarPelaDireita 1s ease-out forwards; animation-delay: 0.5s; }
.carousel-item.active .slide-in-left  { animation: entrarPelaEsquerda 1s ease-out forwards; animation-delay: 0.5s; }
.carousel-item.active .slide-in-center { animation: entrarPeloCentro 1s ease-out forwards; animation-delay: 0.5s; }

@keyframes entrarPelaDireita {
    0%   { transform: translateX(100px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes entrarPelaEsquerda {
    0%   { transform: translateX(-100px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes entrarPeloCentro {
    0%   { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}


/* ==========================================================================
   6. LISTA DE CURSOS DO INDEX
   ========================================================================== */
/* CSS para o grid fluido e centralizado */
.grid-cursos-fluido {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.grid-cursos-fluido .card-wrapper {
    flex: 1 1 280px; /* Cresce e encolhe, com tamanho base de 280px */
    max-width: 320px; /* Trava o crescimento para não ficar gigante se tiver poucos cursos */
}

/* Efeito suave ao passar o mouse */
.card-curso {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 16px;
}

.card-curso:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}


/* ==========================================================================
   7. TABELA DE HORÁRIO DE AULAS
========================================================================== */
/* Estilos Visuais para a Tela (PC) */
.text-azul-escuro { color: #0e1e40 !important; }
.bg-azul-escuro { background-color: #0e1e40 !important; border-color: #0e1e40 !important; }
.sticky-sidebar { position: sticky; top: 20px; z-index: 10; }
.turmas-list { max-height: 75vh; overflow-y: auto; }
.turmas-list::-webkit-scrollbar { width: 6px; }
.turmas-list::-webkit-scrollbar-track { background: #f1f1f1; }
.turmas-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.grade-tabela th, .grade-tabela td { border-color: #e9ecef; }

/* Preenchimentos e fontes da TELA */
@media screen {
	.th-dia, .th-hora { padding: 1rem 0.5rem !important; }
	.dia-semana-td { padding: 1rem !important; }
	.td-aula { padding: 0.5rem !important; }
	.print-wrapper { min-height: 85vh; }
	.disciplina-bloco { font-size: 1rem; }
	.badge-print-ajuste { font-size: 0.6rem; }
}

/* DEIXANDO AS LINHAS IGUAIS NA TELA */
	.grade-tabela { 
		table-layout: fixed !important; /* Trava a largura das colunas por igual */
		height: 80% !important;        /* Força a tabela a usar todo o espaço do card */
	}
	.grade-tabela tbody tr { 
		height: 18% !important;         /* 5 dias na semana = 20% de altura para cada */
	}
	.grade-tabela td { 
		overflow: hidden !important;    /* Segura os textos grandes para não quebrarem o layout */
	}

.th-intervalo { border-left: 2px dashed rgba(255,255,255,0.2) !important; }
.td-intervalo { border-left: 2px dashed #adb5bd !important; border-right: 2px dashed #adb5bd !important; }
.intervalo-texto { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; margin: 0 auto; color: #6c757d; font-weight: bold; font-size: 0.8rem; letter-spacing: 2px; }

.accordion-button:focus { box-shadow: none; border-color: rgba(0,0,0,.125); }
.accordion-button:not(.collapsed) { background-color: #e9ecef; color: #0e1e40; box-shadow: inset 0 -1px 0 rgba(0,0,0,.125); }

/* ==========================================================================
   ESTILOS EXCLUSIVOS PARA IMPRESSÃO (Ocupa 100% da Folha, Fontes Grandes)
   ========================================================================== */
@media print {
	@page { 
		size: A4 landscape; 
		margin: 5mm; 
	}
	
	/* Mata a página em branco e reseta as margens */
	html, body { 
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important; 
		padding: 0 !important; 
		background: white !important; 
		overflow: hidden !important; 
		-webkit-print-color-adjust: exact; 
		print-color-adjust: exact; 
	}
	
	.section-main, .container-print, .m-0-print, .col-print-12 {
		padding: 0 !important; 
		margin: 0 !important; 
		width: 100% !important; 
		height: 100% !important; 
		max-width: 100% !important;
	}
	
	.sticky-sidebar, header, footer, nav, .d-print-none { display: none !important; }
	
	/* Borda Externa. Fixa em 97vh para não dar "overflow" na impressora */
	.print-wrapper {
		border: 3px solid #0e1e40 !important;
		border-radius: 12px !important;
		box-shadow: none !important;
		height: 180mm !important; 
		max-height: 180mm !important;
		display: flex !important;
		flex-direction: column !important;
		padding: 10px !important;
		box-sizing: border-box !important;
		page-break-after: avoid !important;
		page-break-inside: avoid !important;
	}

	.p-print-container {
		padding: 0 !important;
		flex-grow: 1 !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.print-header-border {
		border-bottom: 2px solid #0e1e40 !important;
		margin-bottom: 8px !important;
		padding-bottom: 8px !important;
		flex-shrink: 0 !important;
	}

	.print-h2 { font-size: 1.4rem !important; line-height: 1 !important; margin: 0 !important; }
	.print-h5 { font-size: 1.1rem !important; line-height: 1 !important; margin: 0 !important; }

	.table-print-wrapper {
		flex-grow: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
	}
	
	/* TABELA ESTICÁVEL. Table-layout: fixed garante divisão igualitária */
	.grade-tabela {
		border: 2px solid #0e1e40 !important;
		margin: 0 !important;
		height: 100% !important; 
		width: 100% !important;
		table-layout: fixed !important; 
	}
	
	.grade-tabela tbody tr {
		height: 20% !important;
	}
	
	.grade-tabela th, .grade-tabela td {
		border: 1px solid #0e1e40 !important;
		padding: 6px !important; 
		vertical-align: middle !important;
		word-wrap: break-word !important;
		overflow: hidden !important; /* Impede que um texto gigante "vaze" e estique a linha */
	}

	/* FONTES MAIORES E LEGÍVEIS */
	.grade-tabela th { 
		background-color: #e9ecef !important;
		color: #0e1e40 !important; 
		font-size: 1.1rem !important; 
		font-weight: bold !important;
		line-height: 1.1 !important;
	}

	.dia-semana-td { 
		color: #0e1e40 !important; 
		font-size: 1.1rem !important; 
		line-height: 1.1 !important;
	}
	
	.disciplina-bloco { 
		font-size: 1.3rem !important; /* Nome da Matéria GIGANTE */
		font-weight: bold !important;
		line-height: 1.1 !important; 
		margin: 0 !important;
	}
	
	.badge-print-ajuste { 
		font-size: 0.75rem !important; 
		padding: 3px 6px !important; 
		line-height: 1 !important;
		margin-top: 4px !important;
	}
	.badge-print-block { display: inline-block !important; }
	
	.hr-print { margin: 6px 0 !important; border-top: 1px solid rgba(0,0,0,0.3) !important; }
	
	/* Intervalo ajustado para esticar bem */
	.td-intervalo { border-left: 2px dashed #0e1e40 !important; border-right: 2px dashed #0e1e40 !important; padding: 0 !important; }
	.intervalo-texto { font-size: 0.9rem !important; color: #0e1e40 !important; margin: 0 !important; }
}

/* ==========================================================================
   8. MODO ESCURO SUAVE (Estilo Gemini)
   ========================================================================== */

/* Suavidade geral de transição ao clicar no botão */
body, .bg-white, .card, .navbar, .modal-content, .bg-sidebar, .form-control, .bg-light {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

body.dark-mode, 
body.dark-mode .erp-body {
    background-color: #131314 !important;
    color: #e3e3e3 !important;
}

/* Fundo primário para Containers, Cards, Modais, Navbars */
body.dark-mode .bg-white,
body.dark-mode .card,
body.dark-mode .navbar,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode #loader-global {
    background-color: #1e1f20 !important;
    color: #e3e3e3 !important;
    border-color: #444746 !important;
}

/* Fundo Secundário (Títulos de tabelas, rodapés de modais, fundos mais leves) */
body.dark-mode .bg-light,
body.dark-mode .modal-footer,
body.dark-mode .modal-header,
body.dark-mode .table th,
body.dark-mode .accordion-button {
    background-color: #282a2c !important;
    color: #e3e3e3 !important;
    border-color: #444746 !important;
}

/* Textos e Botões */
body.dark-mode .text-secondary,
body.dark-mode .text-muted,
body.dark-mode .text-dark,
body.dark-mode #loader-global h5 {
    color: #c4c7c5 !important;
}

/* Ajusta as bordas e separadores do Bootstrap */
body.dark-mode .border,
body.dark-mode .border-bottom,
body.dark-mode .border-top,
body.dark-mode .border-end,
body.dark-mode .border-start,
body.dark-mode .dropdown-divider {
    border-color: #444746 !important;
}

/* Links no header e dropdown */
body.dark-mode .dropdown-item { color: #e3e3e3 !important; }
body.dark-mode .dropdown-item:hover { background-color: #303134 !important; color: #fff !important; }

/* Azul claro para manter os contrastes de sua identidade */
body.dark-mode .text-azul-escuro,
body.dark-mode .text-primary {
    color: #8ab4f8 !important; 
}

/* Formulários e Inputs */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #131314 !important;
    color: #e3e3e3 !important;
    border-color: #444746 !important;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #1e1f20 !important;
    border-color: #8ab4f8 !important;
    box-shadow: 0 0 0 0.25rem rgba(138, 180, 248, 0.25) !important;
    color: #fff !important;
}

/* Sidebar no Dark Mode */
body.dark-mode .bg-sidebar {
    background-color: #131314 !important; /* Mais escuro que o normal */
    border-right: 1px solid #444746 !important;
}
body.dark-mode .sidebar-link:hover, 
body.dark-mode .sidebar-link:focus,
body.dark-mode .sidebar-link.active {
    background-color: #1e1f20 !important;
    border-left-color: #8ab4f8 !important;
}

/* Tabelas e Accordion (Grade de Horários) */
body.dark-mode .table,
body.dark-mode .table td {
    color: #e3e3e3 !important;
    background-color: transparent !important;
    border-color: #444746 !important;
}
body.dark-mode .table-hover tbody tr:hover td {
    color: #fff !important;
    background-color: #303134 !important;
}
body.dark-mode .accordion-button:not(.collapsed) {
    background-color: #303134 !important;
    color: #8ab4f8 !important;
}

/* Spinner Load */
body.dark-mode .spinner-border { color: #8ab4f8 !important; }

/* Botões Secundários */
body.dark-mode .btn-secondary {
    background-color: #444746 !important;
    border-color: #444746 !important;
    color: #e3e3e3 !important;
}
body.dark-mode .btn-secondary:hover {
    background-color: #5f6368 !important;
}
body.dark-mode .btn-outline-secondary {
    color: #c4c7c5 !important;
    border-color: #444746 !important;
}
body.dark-mode .btn-outline-secondary:hover {
    background-color: #444746 !important;
    color: #fff !important;
}