/* =========================================================
   iBOTicario Popup Form — estilos
   --------------------------------------------------------
   EDITA AQUÍ los colores y tamaños. El resto del archivo
   usa estas variables, así que con cambiar estas líneas basta.
   (Los tamaños de título/subtítulo también se pueden ajustar
    desde Ajustes → iBOTicario Popup; eso tiene prioridad.)
   ========================================================= */
#ibpf-overlay {
	--ibpf-azul: #103063;
	--ibpf-azul-2: #1c4a8f;
	--ibpf-celeste: #3dd2f7;
	--ibpf-celeste-dark: #16b6e0;
	--ibpf-negro: #000000;
	--ibpf-gris: #666666;
	--ibpf-border: #d5dde8;
	--ibpf-title-size: 24px;
	--ibpf-subtitle-size: 22px;

	display: none;
	position: fixed;
	inset: 0;
	background: rgba(7, 18, 38, 0.62);
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

#ibpf-overlay.ibpf-visible { display: flex !important; animation: ibpf-fade 0.25s ease; }
@keyframes ibpf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ibpf-pop { from { transform: translateY(16px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

#ibpf-overlay * { box-sizing: border-box; }

#ibpf-overlay .ibpf-modal {
	background: #fff !important;
	width: 100% !important;
	max-width: 500px !important;
	border-radius: 16px !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important;
	position: relative !important;
	overflow: hidden !important;
	max-height: 92vh;
	overflow-y: auto;
	padding: 0 !important;
	margin: 0 !important;
	animation: ibpf-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#ibpf-overlay .ibpf-close {
	position: absolute !important;
	top: 12px; right: 14px;
	width: 32px; height: 32px;
	background: rgba(255, 255, 255, 0.22) !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 22px; line-height: 1;
	cursor: pointer;
	color: #fff !important;
	z-index: 2;
	padding: 0 !important;
}
#ibpf-overlay .ibpf-close:hover { background: rgba(255, 255, 255, 0.4) !important; }

/* ---------- Cabecera ---------- */
#ibpf-overlay .ibpf-header {
	background: linear-gradient(135deg, var(--ibpf-azul) 0%, var(--ibpf-azul-2) 100%) !important;
	color: #fff !important;
	padding: 40px 44px 26px !important;
	text-align: center !important;
}

#ibpf-overlay .ibpf-logo {
	height: 44px !important;
	width: auto !important;
	max-width: 78% !important;
	margin: 0 auto 16px !important;
	display: block !important;
	background: #fff !important;
	padding: 9px 16px !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

#ibpf-overlay .ibpf-header h2 {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: var(--ibpf-title-size) !important;
	line-height: 1.3 !important;
	font-weight: 800 !important;
	color: #fff !important;
}

#ibpf-overlay .ibpf-subtitle {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--ibpf-subtitle-size) !important;
	font-weight: 800 !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.92) !important;
}

/* ---------- Cuerpo / formulario ---------- */
#ibpf-overlay .ibpf-body { padding: 24px 28px 26px !important; margin: 0 !important; }

#ibpf-overlay .ibpf-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 14px 16px !important;
}

#ibpf-overlay .ibpf-field { display: flex !important; flex-direction: column !important; margin: 0 !important; min-width: 0; }

#ibpf-overlay .ibpf-field label {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--ibpf-azul) !important;
	margin: 0 0 5px !important;
	text-transform: none !important;
	display: block;
}

#ibpf-overlay .ibpf-field input {
	width: 100% !important;
	padding: 11px 13px !important;
	margin: 0 !important;
	font-size: 15px !important;
	color: var(--ibpf-negro) !important;
	border: 1.5px solid var(--ibpf-border) !important;
	border-radius: 10px !important;
	background: #f8fbfd !important;
	line-height: 1.3 !important;
	height: auto !important;
}
#ibpf-overlay .ibpf-field input::placeholder { color: #9fb0c2 !important; }
#ibpf-overlay .ibpf-field input:focus {
	outline: none !important;
	border-color: var(--ibpf-celeste) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(61, 210, 247, 0.25) !important;
}

/* ---------- Botón (con logo opcional) ---------- */
#ibpf-overlay .ibpf-submit {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 20px 0 0 !important;
	padding: 14px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: var(--ibpf-azul) !important;
	background: var(--ibpf-celeste) !important;
	border: none !important;
	border-radius: 11px !important;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(61, 210, 247, 0.35);
	transition: background 0.15s, transform 0.15s;
}
#ibpf-overlay .ibpf-submit:hover { background: var(--ibpf-celeste-dark) !important; transform: translateY(-1px); }
#ibpf-overlay .ibpf-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

#ibpf-overlay .ibpf-btn-logo {
	height: 22px !important;
	width: auto !important;
	display: inline-block !important;
	vertical-align: middle !important;
	flex: 0 0 auto !important;
}

/* ---------- Mensajes ---------- */
#ibpf-overlay .ibpf-message { margin: 12px 0 0 !important; font-size: 14px !important; text-align: center !important; min-height: 18px; }
#ibpf-overlay .ibpf-message.ibpf-ok { color: #0f8a3c !important; font-weight: 600; }
#ibpf-overlay .ibpf-message.ibpf-err { color: #c0392b !important; }

#ibpf-overlay .ibpf-privacy { margin: 14px 0 0 !important; font-size: 12px !important; line-height: 1.4 !important; text-align: center !important; color: var(--ibpf-gris) !important; }

/* ---------- Responsivo ---------- */
@media (max-width: 460px) {
	#ibpf-overlay .ibpf-grid { grid-template-columns: 1fr !important; }
	#ibpf-overlay .ibpf-header { padding: 26px 22px 22px !important; }
	#ibpf-overlay .ibpf-body { padding: 20px 22px 22px !important; }
}
