/* Acabado visual (2026): retoques sutiles sobre style.css, sin cambiar el HTML. Para quitarlos, basta con no cargar
   este fichero en header.php. Colores de la marca: azul #002F67, naranja #FBB03B y azul claro #018FCB. */
:root {
	--acup-azul: #002F67;
	--acup-azul-2: #0a3f80;
	--acup-naranja: #FBB03B;
	--acup-enlace: #0a7fb8;
	--acup-texto: #1f2a37;
	--acup-suave: #5b6b7f;
	--acup-borde: #d5dde7;
	--acup-fondo: #eef2f6;
}

body {
	background-color: var(--acup-fondo);
	background-image: url(../images/bg.png), linear-gradient(180deg, #f6f8fb 0%, #e9eef4 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, 0 0;
	background-attachment: fixed, fixed;
	color: var(--acup-texto);
	line-height: 1.45;
	padding-top: 32px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Tarjeta principal: esquinas suaves, sombra en capas y una franja azul arriba (sombra interior: el
   ::before de #content lo usa Bootstrap, porque también es .container) */
#content {
	border-radius: 14px;
	padding: 32px 36px;
	box-shadow: inset 0 4px 0 var(--acup-azul), 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -8px rgba(0, 47, 103, .18);
}
#content h1 { letter-spacing: .04em; }
#content #header p { letter-spacing: .08em; color: var(--acup-suave); }
#content p { font-size: 13px; line-height: 1.6; }
#content p.texto-explicativo { font-size: 14.5px; color: var(--acup-texto); }

h2 {
	letter-spacing: .06em;
	border-bottom: 1px solid #e6ebf1;
	padding-bottom: 12px;
	margin-bottom: 22px;
}
label { font-weight: 600; letter-spacing: .01em; }

/* Campos: más aire, borde suave y foco con el azul de la marca */
.form-control {
	height: 40px;
	border-radius: 8px;
	border-color: var(--acup-borde);
	box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover { border-color: #b9c5d3; }
.form-control:focus {
	border-color: var(--acup-azul-2);
	box-shadow: 0 0 0 3px rgba(0, 47, 103, .14);
}
.input-group-addon { border-radius: 8px; border-color: var(--acup-borde); background: #f4f7fa; }
input[type=checkbox] { accent-color: var(--acup-azul); width: 15px; height: 15px; vertical-align: -2px; }

/* Botones */
.btn { border-radius: 8px; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn-primary {
	border-color: var(--acup-azul);
	padding: 9px 26px;
	font-weight: 600;
	letter-spacing: .02em;
	box-shadow: 0 1px 2px rgba(0, 47, 103, .25);
}
.btn-primary:hover, .btn-primary:focus {
	background-color: var(--acup-azul-2) !important;
	box-shadow: 0 6px 16px -4px rgba(0, 47, 103, .45);
}
.btn-primary:active { transform: translateY(1px); }

/* Avisos y ayuda */
#info-referencia { background: #f4f7fa; border: 1px solid #e3e9f0; border-radius: 10px; }
.alert { border-radius: 10px; }
hr { border-top-color: #e6ebf1; }
a { color: var(--acup-enlace); transition: color .15s ease; }
a:hover, a:focus { color: var(--acup-azul); }

/* Pie más discreto */
#footer { color: var(--acup-suave); line-height: 1.7; margin-top: 18px; }
#footer a { color: var(--acup-suave); text-decoration: underline; text-decoration-color: rgba(91, 107, 127, .35); text-underline-offset: 2px; }
#footer a:hover { color: var(--acup-azul); }

@media (max-width: 767px) {
	body { padding-top: 12px; }
	#content { padding: 26px 20px; border-radius: 12px; margin-left: 10px; margin-right: 10px; width: auto; }
}