/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Nunito:wght@300;400;600&display=swap');

/* Variables globales */
:root {
	--color-primario: #9A1B1B;
--color-secundario: #D32F2F;
--color-auxiliar: #137c4f;
	--color-secundario-hover: #155d5d;
	--color-fondo: #f8f9fa;
	--color-blanco: #ffffff;
	--color-gris-claro: #f1f3f5;
	--color-gris-medio: #e9ecef;
	--color-texto: #07653c;
	--color-borde: #ddd;
	--font-family-primary: 'Poppins', 'Nunito', sans-serif;
	--sombra-media: 0 4px 6px rgba(0, 0, 0, 0.1);
	--sombra-fuerte: 0 5px 15px rgba(0, 0, 0, 0.2);
	--border-radius: 10px;
}


/* 🔹 Cabecera Global */
.header-global {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 2px 15px;
	/* 🔹 Reduce más el padding superior/inferior */
	border-bottom: none;
	/* 🔹 Quitamos el borde para evitar conflicto con el efecto */
	box-sizing: border-box;
	margin-bottom: 2px;
	/* 🔹 Reduce más el espacio antes del calendario */
	background: transparent;
	position: relative;
	/* 🔹 Para que el efecto de la línea funcione */
	margin-top: 0;
	/* 🔹 Eliminar espacio extra arriba */
	padding-top: 5px;
	/* 🔹 Solo un pequeño ajuste si es necesario */
	margin-bottom: 10px;
	/* ⬅ 🔹 Aumenta la separación con el calendario */

}

/* 🔹 Títulos dentro del header */
.header-global h1 {
	font-size: clamp(12px, 12vw, 22px);
	line-height: clamp(0px, 1.8vw, 22px);
	margin: 0;
	font-weight: bold;
	color: var(--color-secundario);
	text-align: center;
	padding: 2px 0;
	text-shadow:
		3px 3px 4px rgba(0, 0, 0, 0.3),
		/* 🔹 Más fuerte la sombra oscura */
		-3px -3px 4px rgba(255, 255, 255, 0.7);
	/* 🔹 Más brillo en la parte superior */
	margin-bottom: 0px;
	/* 🔹 Menos espacio antes de la línea */
}

/* 🔹 Línea con efecto grabado */
.header-global::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	/* 🔹 Grosor de la línea */
	background: var(--color-secundario);
	box-shadow:
		0px 3px 4px rgba(0, 0, 0, 0.3),
		/* 🔹 Más pronunciada la sombra inferior */
		0px -3px 4px rgba(255, 255, 255, 0.6);
	/* 🔹 Más brillo en la parte superior */
	position: absolute;
	bottom: -5px;
	/* 🔹 Separa más la línea del texto */
	left: 0;
}

/* Estilos base */
body,
html {
	height: 100dvh;
	/* 🔥 Usa "dynamic viewport height" para ocupar toda la pantalla */

	font-family: 'Poppins', 'Nunito', sans-serif;
	background-color: var(--color-fondo);
	color: var(--color-texto) !important;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	/* ✅ No permitir scroll horizontal */
	width: 100%;
	max-width: 100vw;
	background: var(--color-fondo);
	color: var(--color-texto);

}

body {
	overflow-x: hidden;
}

/* 🔹 Efecto de texto grabado */
.titulos-insert {
	color: #1b7575;
	text-align: center;
	/* Centra el texto */
	font-weight: bold;
	/* Color gris oscuro */
	background: transparent;
	/* Sin fondo, solo efecto en el texto */
	padding: 5px 0;
	/* 🔹 Efecto grabado usando sombras internas */
	text-shadow:
		2px 2px 3px rgba(0, 0, 0, 0.2),
		/* Sombra oscura inferior */
		-2px -2px 3px rgba(255, 255, 255, 0.6);
	/* Sombra luminosa superior */
	margin: 5px 0;
	/* ⬅ Ajusta este valor si aún hay demasiado espacio */
	margin-top: 0 !important;
	padding-top: 5px !important;
}

/* Estilos comunes de formularios */
input[type="text"],
textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid var(--color-borde);
	border-radius: 5px;
	background-color: var(--color-fondo);
	color: var(--color-texto) !important;
}