/* =====================================================================
   Instituto de Formação — sistema de design
   Paleta: vinho profundo + dourado envelhecido sobre papel-manteiga,
   remetendo à identidade litúrgica sem cair no clichê de dashboard SaaS.
   Serifada (Fraunces) para presença editorial na landing; sans (Inter)
   para densidade de leitura nos painéis internos.
   ===================================================================== */

:root {
	--if-bg: #f6f3ee;
	--if-surface: #ffffff;
	--if-ink: #2b2420;
	--if-ink-muted: #6f6459;
	--if-ink-faint: #a89c8d;
	--if-border: #e3dbcd;
	--if-border-strong: #cfc3b0;

	--if-wine: #6e2a34;
	--if-wine-dark: #501d25;
	--if-wine-tint: #f4e9ea;

	--if-gold: #a8823d;
	--if-gold-dark: #8a6a2e;
	--if-gold-tint: #f4ecd9;

	--if-success-bg: #e8efe2;
	--if-success-ink: #3e6b34;
	--if-warning-bg: #f7ecd6;
	--if-warning-ink: #8a5c18;
	--if-danger-bg: #f5e4e1;
	--if-danger-ink: #8a3324;

	--if-font-display: 'Fraunces', Georgia, serif;
	--if-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--if-radius: 3px;
	--if-radius-lg: 6px;
	--if-shadow-modal: 0 20px 60px -12px rgba(43, 36, 32, 0.35);
	--if-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.if-landing, .if-aluno, #if-painel-root, .if-modal-box {
	font-family: var(--if-font-body);
	color: var(--if-ink);
}

/* ---------------------------------------------------------------------
   Botões — vocabulário único reaproveitado em todo o plugin
   --------------------------------------------------------------------- */

.if-btn {
	font-family: var(--if-font-body);
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.65rem 1.3rem;
	border-radius: var(--if-radius);
	border: 1px solid var(--if-border-strong);
	background: var(--if-surface);
	color: var(--if-ink);
	cursor: pointer;
	transition: border-color var(--if-transition), background var(--if-transition), color var(--if-transition), transform var(--if-transition);
	line-height: 1.2;
}
.if-btn:hover { border-color: var(--if-ink-faint); }
.if-btn:active { transform: translateY(1px); }
.if-btn:focus-visible { outline: 2px solid var(--if-gold); outline-offset: 2px; }
.if-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.if-btn--primary {
	background: var(--if-wine);
	border-color: var(--if-wine);
	color: #fdf9f5;
}
.if-btn--primary:hover { background: var(--if-wine-dark); border-color: var(--if-wine-dark); }

.if-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--if-ink);
	position: relative;
}
.if-btn--ghost::after {
	content: '';
	position: absolute;
	left: 1.3rem;
	right: 1.3rem;
	bottom: 0.4rem;
	height: 1px;
	background: var(--if-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--if-transition);
}
.if-btn--ghost:hover::after { transform: scaleX(1); }

.if-btn--perigo {
	background: transparent;
	color: var(--if-danger-ink);
	border-color: var(--if-danger-ink);
}
.if-btn--perigo:hover { background: var(--if-danger-bg); }

/* ---------------------------------------------------------------------
   Campos de formulário
   --------------------------------------------------------------------- */

.if-field label,
.if-modal-content label {
	font-size: 0.82rem;
	color: var(--if-ink-muted);
}

.if-field input, .if-field select, .if-field textarea,
.if-modal-content input, .if-modal-content select, .if-modal-content textarea,
.if-input, .if-form-inline input, .if-form-inline select {
	font-family: var(--if-font-body);
	font-size: 0.92rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--if-border-strong);
	border-radius: var(--if-radius);
	background: var(--if-surface);
	color: var(--if-ink);
	transition: border-color var(--if-transition), box-shadow var(--if-transition);
}
.if-field input:focus, .if-field select:focus, .if-field textarea:focus,
.if-modal-content input:focus, .if-modal-content select:focus, .if-modal-content textarea:focus,
.if-input:focus {
	outline: none;
	border-color: var(--if-wine);
	box-shadow: 0 0 0 3px var(--if-wine-tint);
}

/* ---------------------------------------------------------------------
   Badges de status
   --------------------------------------------------------------------- */

.if-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 600;
}
.if-badge--aguardando { background: var(--if-warning-bg); color: var(--if-warning-ink); }
.if-badge--confirmado { background: var(--if-success-bg); color: var(--if-success-ink); }
.if-badge--em_atraso { background: var(--if-danger-bg); color: var(--if-danger-ink); }

/* ---------------------------------------------------------------------
   Toast (notificações discretas)
   --------------------------------------------------------------------- */

#if-toast-root {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	z-index: 10001;
}

.if-toast {
	background: var(--if-surface);
	border-left: 3px solid var(--if-gold);
	border-radius: var(--if-radius);
	box-shadow: var(--if-shadow-modal);
	padding: 0.85rem 1.1rem;
	font-family: var(--if-font-body);
	font-size: 0.88rem;
	color: var(--if-ink);
	max-width: 320px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
}
.if-toast.if-toast--show { opacity: 1; transform: translateY(0); }
.if-toast--erro { border-left-color: var(--if-danger-ink); }
.if-toast--sucesso { border-left-color: var(--if-success-ink); }

/* ---------------------------------------------------------------------
   Diálogo de confirmação (substitui o confirm() nativo do navegador)
   --------------------------------------------------------------------- */

.if-confirm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(43, 36, 32, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10002;
	opacity: 0;
	transition: opacity var(--if-transition);
}
.if-confirm-overlay.if-show { opacity: 1; }

.if-confirm-box {
	background: var(--if-surface);
	border-top: 3px solid var(--if-gold);
	border-radius: var(--if-radius-lg);
	box-shadow: var(--if-shadow-modal);
	padding: 1.5rem;
	max-width: 380px;
	width: 90%;
	font-family: var(--if-font-body);
	transform: scale(0.96);
	transition: transform var(--if-transition);
}
.if-confirm-overlay.if-show .if-confirm-box { transform: scale(1); }

.if-confirm-box p { margin: 0 0 1.25rem; color: var(--if-ink); line-height: 1.5; }
.if-confirm-box .if-confirm-acoes { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Respeita preferência de menos animações. */
@media (prefers-reduced-motion: reduce) {
	.if-toast, .if-confirm-overlay, .if-confirm-box, .if-modal-overlay, .if-modal-box { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Modal genérico (compartilhado entre landing e painel da equipe)
   --------------------------------------------------------------------- */

.if-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 43, 36, 32, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 1.5rem;
	opacity: 0;
	transition: opacity 200ms ease;
}
.if-modal-overlay.if-show { opacity: 1; }

.if-modal-box {
	background: var(--if-surface);
	border-top: 3px solid var(--if-gold);
	border-radius: var(--if-radius-lg);
	box-shadow: var(--if-shadow-modal);
	padding: 2.25rem;
	max-width: 460px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	transform: scale( 0.97 ) translateY( 6px );
	transition: transform 220ms cubic-bezier( 0.4, 0, 0.2, 1 );
}
.if-modal-overlay.if-show .if-modal-box { transform: scale( 1 ) translateY( 0 ); }

.if-modal-content h2 {
	font-family: var(--if-font-display);
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
	color: var(--if-wine);
}
.if-modal-content form { display: flex; flex-direction: column; gap: 0.85rem; }

.if-modal-close {
	position: absolute;
	top: 1rem;
	right: 1.1rem;
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--if-ink-faint);
	cursor: pointer;
	transition: color var(--if-transition);
}
.if-modal-close:hover { color: var(--if-ink); }