/* =========================================================================
   css/secciones/contacto_modal2026.css - Modal "Formulario de contacto"
   (submenu_acreditaciones_sistemas.php) con Bootstrap 5.3. Mismo aspecto que
   el popup anterior: cabecera con foto, cuerpo amarillo, campos blancos con
   icono, casillas y boton azul oscuro. Compensa reglas globales de
   estilos.css (.form-control con border-radius 0 !important, margin-bottom
   10px y placeholder amarillo).
   ========================================================================= */

/* principal.css tiene reglas .modal / .modal-content de una modal antigua
   (z-index: 1, padding-top: 100px, fondo, max-height: 80%...) que dejaban esta
   por debajo del fondo oscuro de Bootstrap: se devuelven los valores de Bootstrap */
.modal.contacto-modal26 {
	z-index: 1055;
	padding-top: 0;
	background: none;
	overflow-x: hidden;
	overflow-y: auto;
}

.contacto-modal26 .modal-content {
	display: flex;
	max-height: none;
	margin: 0;
	width: 100%;
}

.contacto-modal26 .modal-dialog {
	max-width: 520px;
}

.contacto-modal26 .modal-content {
	border-radius: 6px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

/* Cabecera: foto con degradado y titulo en Anton */
.contacto-modal26-cabecera {
	min-height: 118px;
	padding: 30px 24px 22px;
	background: url('../../img/solicitar-oferta.png') center 25% / cover no-repeat;
}

.contacto-modal26-cabecera::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(52, 64, 80, .85) 0%, rgba(52, 64, 80, .35) 100%);
}

.contacto-modal26-titulo {
	position: relative;
	z-index: 1;
	text-align: left !important;
	line-height: 1.1;
}

.contacto-modal26-pre {
	font-size: 13px;
	letter-spacing: 2px;
	opacity: .9;
}

.contacto-modal26-grande {
	font-size: 30px;
}

.contacto-modal26-cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .85);
	background-color: rgba(35, 45, 59, .55);
	color: #fff;
	font-size: 1rem;
	transition: background-color .15s;
}

.contacto-modal26-cerrar:hover,
.contacto-modal26-cerrar:focus-visible {
	background-color: rgba(35, 45, 59, .9);
	outline: none;
}

/* Cuerpo amarillo */
.contacto-modal26-cuerpo {
	padding: 24px;
	background-color: #f4b333;
}

/* Campos blancos con el icono dentro, a la izquierda */
.contacto-modal26-icono {
	top: 11px;
	left: 12px;
	width: 22px;
	height: 22px;
	object-fit: contain;
	pointer-events: none;
}

.contacto-modal26 .form-control {
	height: 44px;
	margin-bottom: 0;
	padding-left: 44px;
	border: 1px solid transparent;
	border-radius: 3px !important;
	background-color: #fff;
	color: #333;
	font-size: .95rem;
}

.contacto-modal26 .form-control::placeholder {
	color: #8a8a8a;
	font-weight: 400;
}

.contacto-modal26 .form-control:focus {
	border-color: #334050;
	box-shadow: 0 0 0 .2rem rgba(51, 64, 80, .25);
}

.contacto-modal26 .form-control.is-invalid {
	border-color: #b02a37;
	background-image: none; /* el icono de error de Bootstrap pisaria el campo */
	padding-right: .75rem;
}

/* Mensajes de error legibles sobre el amarillo */
.contacto-modal26 .invalid-feedback {
	margin-top: 3px;
	color: #7a1018;
	font-size: .8rem;
	font-weight: 600;
}

/* Casillas */
.contacto-modal26 .form-check-label {
	color: #232d3b;
	font-size: .875rem;
	line-height: 1.4;
}

.contacto-modal26 .form-check-input {
	border-color: #fff;
	cursor: pointer;
}

.contacto-modal26 .form-check-input:checked {
	background-color: #334050;
	border-color: #334050;
}

.contacto-modal26 .form-check-input.is-invalid {
	border-color: #b02a37;
}

.contacto-modal26 .link_politica {
	color: #1a3fd1;
	font-weight: 600;
	text-decoration: underline !important; /* estilos.css quita el subrayado */
}

/* Boton Enviar azul oscuro */
.contacto-modal26-enviar,
.contacto-modal26-enviar:focus {
	min-width: 112px;
	padding: .65rem 1.5rem;
	border: 0;
	border-radius: 3px;
	background-color: #334050;
	color: #fff;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.contacto-modal26-enviar:hover,
.contacto-modal26-enviar:active {
	background-color: #1f2833 !important;
	color: #fff !important;
}

.contacto-modal26-enviar:disabled {
	opacity: .7;
}

@media (max-width: 575.98px) {
	.contacto-modal26-enviar { width: 100%; }
}

/* =========================================================================
   Modal "Solicitud de cotizacion" (submenu_acreditaciones_sistemas.php).
   Cabecera azul fija y scroll solo en el cuerpo (modal-dialog-scrollable).
   El formulario se ve como en el popup anterior: estas reglas son las de
   "body #cotizacion_desplegable ..." de comun.css (que siguen siendo las de
   popup_cotizacion.php), con el ambito de la modal.
   ========================================================================= */
.modal.cotizacion-modal26 {
	z-index: 1055;        /* principal.css: .modal { z-index: 1; padding-top: 100px... } */
	padding-top: 0;
	background: none;
}

.cotizacion-modal26 .modal-dialog {
	max-width: 820px;
}

.cotizacion-modal26 .modal-content {
	display: flex;        /* principal.css: .modal-content { display: block } rompe el scroll del cuerpo */
	max-height: none;
	margin: 0;
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

/* El alto maximo lo da modal-dialog-scrollable: solo el cuerpo hace scroll */
.cotizacion-modal26.modal .modal-dialog-scrollable .modal-content {
	max-height: 100%;
}

.cotizacion-modal26-cabecera {
	padding: 16px 16px 16px 22px;
	background-color: #344050;
}

.cotizacion-modal26-cabecera .modal-title {
	font-size: 20px !important;
	line-height: 1.3;
	text-align: left !important;
}

.cotizacion-modal26-cabecera .contacto-modal26-cerrar {
	position: static;
	flex-shrink: 0;
}

.cotizacion-modal26 .modal-body {
	padding: 0 0 10px;
	scrollbar-width: thin;
}

/* El titulo del formulario ya esta en la cabecera fija */
.cotizacion-modal26 .contacto_web_embebido > h5,
.cotizacion-modal26 .contacto_web_embebido > #zonamasinfo {
	display: none;
}

.cotizacion-modal26 .contacto_web_embebido {
	margin: 0;
}

.cotizacion-modal26 .contacto_web_embebido form {
	width: 100%;
	padding: 8px 22px 4px;
	box-sizing: border-box;
}

.cotizacion-modal26 .contacto_web_embebido .form-control {
	width: 100%;
	box-sizing: border-box;
	border-radius: 3px;
}

.cotizacion-modal26 .contacto_web_embebido textarea.form-control { min-height: 80px; }
.cotizacion-modal26 .contacto_web_embebido label { font-size: 13px; }

/* Checkbox y texto de la politica, en la misma linea */
.cotizacion-modal26 .contacto_web_embebido form > div:has(> input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.cotizacion-modal26 .contacto_web_embebido form > div:has(> input[type="checkbox"]) input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 3px 0 0 0;
}

.cotizacion-modal26 .contacto_web_embebido form > div:has(> input[type="checkbox"]) label {
	margin: 0;
}

.cotizacion-modal26 .boton_enviar {
	border: 0;
	background: #344050;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 13px 30px !important;
	border-radius: 3px;
	cursor: pointer;
	transition: background .15s ease;
}

.cotizacion-modal26 .boton_enviar:hover { background: #1f2833; }

@media (max-width: 700px) {
	.cotizacion-modal26 .contacto_web_embebido .modulo_48 {
		width: 100%;
		float: none;
	}
}