/* Pantalla de validación / arrepentimiento / baja de suscripciones.
   Solo se carga en templates/solicitudes/formulario_valida_solicitud.html.twig. */

.form_valida_solicitud {
	--vs-azul: #012169;
	--vs-celeste: #21a6eb;
	--vs-rojo: #ef3340;
	--vs-verde: #53a06e;
	--vs-gris-fondo: #f4f6fa;
	--vs-gris-borde: #e5eaf4;
	--vs-gris-texto: #4a4a4a;
}

/* Tarjetas del informe */

.form_valida_solicitud .vs-card {
	margin: 0 0 20px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var(--vs-gris-borde);
	border-left: 4px solid var(--vs-azul);
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(1, 33, 105, 0.06);
	color: var(--vs-azul);
}

.form_valida_solicitud .vs-card__titulo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 1.15em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vs-azul);
}

.form_valida_solicitud .vs-card__titulo .fas {
	color: var(--vs-celeste);
}

.form_valida_solicitud .vs-card h4 {
	margin: 0 0 8px;
	font-size: 1em;
	font-weight: 700;
	color: var(--vs-azul);
}

.form_valida_solicitud .vs-nota {
	margin: -8px 0 14px;
	font-size: 0.85em;
	color: var(--vs-gris-texto);
}

/* Tu suscripción */

.form_valida_solicitud .vs-plan {
	margin-bottom: 14px;
	font-size: 1.05em;
}

.form_valida_solicitud .vs-chip {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 10px;
	border-radius: 12px;
	background: var(--vs-azul);
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.form_valida_solicitud .vs-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px 24px;
	margin: 0 0 12px;
}

.form_valida_solicitud .vs-datos dt {
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vs-gris-texto);
}

.form_valida_solicitud .vs-datos dd {
	margin: 2px 0 0;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--vs-azul);
}

/* Premio */

.form_valida_solicitud .vs-bien {
	margin-bottom: 16px;
}

.form_valida_solicitud .vs-premios {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.form_valida_solicitud .vs-premios > div:empty {
	display: none;
}

.form_valida_solicitud .vs-premio,
.form_valida_solicitud #premio2,
.form_valida_solicitud #premio3 {
	flex: 1 1 220px;
	padding: 14px 16px;
	border-radius: 6px;
	background: var(--vs-gris-fondo);
}

.form_valida_solicitud .vs-valor-original {
	margin: 0;
}

.form_valida_solicitud .vs-valor-original strong {
	display: block;
	margin-top: 4px;
	font-size: 1.25em;
}

.form_valida_solicitud .vs-bienes {
	margin: 0 0 8px;
	padding-left: 1.2em;
}

.form_valida_solicitud .vs-bienes li {
	margin-bottom: 4px;
	font-weight: 600;
}

.form_valida_solicitud .vs-bienes li.vs-separador {
	list-style: none;
	margin: 10px 0 10px -1.2em;
	border-top: 1px solid var(--vs-gris-borde);
}

.form_valida_solicitud .vs-importes {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.form_valida_solicitud .vs-importe {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	padding: 12px 16px;
	border: 1px solid var(--vs-gris-borde);
	border-radius: 6px;
}

.form_valida_solicitud .vs-importe span {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vs-gris-texto);
}

.form_valida_solicitud .vs-importe strong {
	font-size: 1.35em;
	color: var(--vs-azul);
}

/* Situación actual */

.form_valida_solicitud .vs-card--vigente {
	border-left-color: var(--vs-verde);
}

.form_valida_solicitud .vs-card--no-vigente {
	border-left-color: var(--vs-rojo);
}

.form_valida_solicitud .vs-fecha {
	font-weight: 600;
	color: var(--vs-celeste);
}

.form_valida_solicitud .vs-badge {
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 0.7em;
	letter-spacing: 0.04em;
	color: #fff;
}

.form_valida_solicitud .vs-badge--ok {
	background: var(--vs-verde);
}

.form_valida_solicitud .vs-badge--error {
	background: var(--vs-rojo);
}

.form_valida_solicitud .vs-badge--info {
	background: var(--vs-celeste);
}

.form_valida_solicitud .vs-situacion {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
}

/* main.css pone color blanco a todas las tablas */
.form_valida_solicitud .vs-cuota {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	color: var(--vs-azul);
}

.form_valida_solicitud .vs-cuota th,
.form_valida_solicitud .vs-cuota td {
	padding: 8px 0;
	font-size: 0.95rem;
	border-bottom: 1px solid var(--vs-gris-borde);
	font-weight: 600;
}

.form_valida_solicitud .vs-cuota td {
	text-align: right;
	white-space: nowrap;
}

.form_valida_solicitud .vs-cuota tr.vs-cuota__total th,
.form_valida_solicitud .vs-cuota tr.vs-cuota__total td {
	border-bottom: 0;
	padding-top: 10px;
	font-size: 1.15em;
	font-weight: 700;
}

.form_valida_solicitud .vs-aviso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #e8f5fd;
	color: var(--vs-azul);
}

.form_valida_solicitud .vs-aviso .fas {
	margin-top: 3px;
	font-size: 1.2em;
	color: var(--vs-celeste);
}

.form_valida_solicitud .vs-aviso--ok {
	background: #e8f4ec;
}

.form_valida_solicitud .vs-aviso--ok .fas {
	color: var(--vs-verde);
}

.form_valida_solicitud .vs-aviso--error {
	margin-bottom: 0;
	background: #fdecee;
}

.form_valida_solicitud .vs-aviso--error .fas {
	color: var(--vs-rojo);
}

/* Documentación */

.form_valida_solicitud .vs-documentos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.form_valida_solicitud .vs-doc {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--vs-gris-borde);
	border-radius: 6px;
	background: #fff;
	color: var(--vs-azul);
	transition: background 0.2s, border-color 0.2s;
}

.form_valida_solicitud .vs-doc:hover,
.form_valida_solicitud .vs-doc:focus {
	background: var(--vs-gris-fondo);
	border-color: var(--vs-celeste);
	color: var(--vs-azul);
	text-decoration: none;
}

.form_valida_solicitud .vs-doc__icono {
	font-size: 1.6em;
	color: var(--vs-azul);
}

.form_valida_solicitud .vs-doc__icono--pdf {
	color: var(--vs-rojo);
}

.form_valida_solicitud .vs-doc__icono--imagen {
	color: var(--vs-celeste);
}

.form_valida_solicitud .vs-doc__nombre {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.form_valida_solicitud .vs-doc__bajar {
	color: var(--vs-celeste);
}

.form_valida_solicitud .vs-documentos li.vs-documentos__vacio {
	grid-column: 1 / -1;
	padding: 12px 14px;
	border-radius: 6px;
	background: var(--vs-gris-fondo);
	color: var(--vs-gris-texto);
}

/* Búsqueda de la suscripción y botones */

.form_valida_solicitud .vs-campo.vs-campo--letra {
	flex: 0 0 110px;
}

.form_valida_solicitud .vs-boton:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.form_valida_solicitud #mensaje_sol,
.form_valida_solicitud #mensaje_validacion {
	margin: 16px 0 0;
}

/* Confirmación de identidad para ver la documentación */

.form_valida_solicitud .vs-acceso__form,
.form_valida_solicitud .vs-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
	margin-bottom: 8px;
}

.form_valida_solicitud .vs-acceso__campo,
.form_valida_solicitud .vs-campo {
	display: flex;
	flex-direction: column;
	flex: 1 1 180px;
}

.form_valida_solicitud .vs-acceso__campo label,
.form_valida_solicitud .vs-campo label {
	margin-bottom: 4px;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vs-gris-texto);
}

.form_valida_solicitud .vs-acceso__campo select {
	display: block;
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	background: #fff;
	color: #495057;
	font-size: 1rem;
}

.form_valida_solicitud .vs-acceso__boton,
.form_valida_solicitud .vs-boton {
	margin: 0;
	padding: 0.6rem 1.2rem;
	background: var(--vs-azul) !important;
	color: #fff;
}

.form_valida_solicitud .vs-acceso__ayuda {
	margin: 0 0 8px;
	font-size: 0.85em;
}

.form_valida_solicitud .vs-acceso__ayuda a {
	color: var(--vs-celeste);
}

.form_valida_solicitud .vs-acceso__foto {
	display: block;
	max-width: 300px;
	margin-bottom: 12px;
	border-radius: 6px;
}

.form_valida_solicitud .vs-acceso__renaper {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	font-size: 0.75em;
	color: var(--vs-gris-texto);
}

.form_valida_solicitud .vs-acceso__renaper img {
	flex: 0 0 auto;
	height: 32px;
}

.form_valida_solicitud #acceso_error {
	margin-top: 8px;
}

/* Aviso para actualizar datos por teléfono o en la agencia */

.form_valida_solicitud .vs-contacto {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 6px;
	background: var(--vs-gris-fondo);
	font-size: 0.9em;
	color: var(--vs-azul);
}

.form_valida_solicitud .vs-contacto .fas {
	margin-top: 3px;
	color: var(--vs-celeste);
}

.form_valida_solicitud .vs-contacto a[href^="tel:"] {
	white-space: nowrap;
}

.form_valida_solicitud .vs-contacto a {
	font-weight: 600;
	color: var(--vs-azul);
	text-decoration: underline;
}

.form_valida_solicitud .vs-link {
	font-weight: 600;
	color: var(--vs-celeste);
}

/* Confirmación final */

.form_valida_solicitud #infotitulo .custom-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
	padding: 16px 20px;
	border-radius: 6px;
	background: var(--vs-gris-fondo);
}

.form_valida_solicitud #infotitulo .custom-check input {
	margin-top: 5px !important;
	transform: scale(1.3);
}

.form_valida_solicitud #infotitulo .custom-check span {
	flex: 1;
	color: var(--vs-azul);
}

.form_valida_solicitud #infotitulo .custom-check hr {
	display: none;
}

/* SweetAlert con los colores del sitio */

.swal2-popup .swal2-title,
.swal2-popup .swal2-html-container {
	color: #012169;
}

@media (max-width: 767px) {
	.form_valida_solicitud .vs-card {
		padding: 16px;
	}

	.form_valida_solicitud .vs-card__titulo {
		font-size: 1em;
	}

	.form_valida_solicitud .vs-situacion {
		grid-template-columns: 1fr;
	}
}