/*
 * Composición visual completa del formulario de Incidencias (Fluent Forms
 * ID 6), basada en el branding de Alma Digital (Grafito/Crema/Arcilla) y en
 * la estructura del prototipo original. Excepción de fondo oscuro aprobada
 * específicamente para este formulario (no aplica al resto de la web).
 *
 * Todos los selectores van prefijados por #fluentform_6 para no afectar a
 * ningún otro formulario del sitio. El ID aporta además la especificidad
 * necesaria para prevalecer sobre el CSS propio de Fluent Forms sin usar
 * !important.
 */

#fluentform_6 {
	--alma-grafito: #2E3438;
	--alma-crema: #F7F1E8;
	--alma-arcilla: #B86F52;
	--alma-superficie: rgba( 247, 241, 232, 0.06 );
	--alma-superficie-borde: rgba( 184, 111, 82, 0.45 );
	--alma-arcilla-tenue: rgba( 184, 111, 82, 0.18 );

	display: block;
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: 1.75em;
	background: var( --alma-grafito );
	border-radius: 12px;
	color: var( --alma-crema );
	font-family: inherit;
}

#fluentform_6 *,
#fluentform_6 *::before,
#fluentform_6 *::after {
	box-sizing: border-box;
}

/* --- Estructura general de campo --- */

#fluentform_6 .ff-el-group {
	margin: 0 0 1.25em;
	max-width: 100%;
}

#fluentform_6 .ff-el-input--label label,
#fluentform_6 .ff-el-input--label {
	display: block;
	margin: 0 0 0.5em;
	color: var( --alma-crema );
	font-weight: 600;
	font-size: 0.95em;
}

/* --- Controles nativos de texto/select/textarea --- */

#fluentform_6 .ff-el-form-control {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.8em;
	background: var( --alma-superficie );
	border: 1px solid var( --alma-superficie-borde );
	border-radius: 6px;
	color: var( --alma-crema );
	font-size: 1em;
}

#fluentform_6 .ff-el-form-control::placeholder {
	color: var( --alma-crema );
	opacity: 0.55;
}

#fluentform_6 .ff-el-form-control:focus-visible,
#fluentform_6 .ff-el-form-control:focus {
	outline: 2px solid var( --alma-arcilla );
	outline-offset: 1px;
	border-color: var( --alma-arcilla );
}

#fluentform_6 select.ff-el-form-control option {
	color: var( --alma-grafito );
	background: var( --alma-crema );
}

#fluentform_6 textarea.ff-el-form-control {
	min-height: 6em;
	resize: vertical;
}

/* --- Grupos de radio: Tipo de pack, Reportaje (choice-row) --- */

#fluentform_6 .ff-el-group:has( .ff-el-form-check input[ type="radio" ] ) .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

#fluentform_6 .ff-el-form-check:has( input[ type="radio" ] ) {
	flex: 1 1 160px;
}

/* Oculta el radio nativo de forma accesible (sin display:none, conserva
   foco y navegación por teclado); la superficie clicable pasa a ser el
   label completo (choice-btn). */
#fluentform_6 .ff-el-form-check:has( input[ type="radio" ] ) input[ type="radio" ] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

#fluentform_6 .ff-el-form-check:has( input[ type="radio" ] ) .ff-el-form-check-label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	width: 100%;
	padding: 0.75em 1em;
	background: var( --alma-superficie );
	border: 1px solid var( --alma-superficie-borde );
	border-radius: 8px;
	color: var( --alma-crema );
	text-align: center;
	cursor: pointer;
}

#fluentform_6 .ff-el-form-check:has( input[ type="radio" ]:checked ) .ff-el-form-check-label {
	background: var( --alma-arcilla-tenue );
	border: 2px solid var( --alma-arcilla );
	font-weight: 600;
	padding: calc( 0.75em - 1px ) calc( 1em - 1px );
}

#fluentform_6 .ff-el-form-check:has( input[ type="radio" ]:focus-visible ) .ff-el-form-check-label {
	outline: 2px solid var( --alma-arcilla );
	outline-offset: 2px;
}

/* --- Productos afectados: lista de tarjetas seleccionables --- */

#fluentform_6 .ff-el-group:has( input[ name="productos_afectados[]" ] ) .ff-el-input--content {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

#fluentform_6 .ff-el-form-check:has( input[ name="productos_afectados[]" ] ) input[ type="checkbox" ] {
	accent-color: var( --alma-arcilla );
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
}

#fluentform_6 .ff-el-form-check:has( input[ name="productos_afectados[]" ] ) .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.75em;
	width: 100%;
	min-height: 44px;
	padding: 0.75em 1em;
	background: var( --alma-superficie );
	border: 1px solid var( --alma-superficie-borde );
	border-radius: 8px;
	color: var( --alma-crema );
	cursor: pointer;
}

#fluentform_6 .ff-el-form-check:has( input[ name="productos_afectados[]" ]:checked ) .ff-el-form-check-label {
	border: 2px solid var( --alma-arcilla );
	background: var( --alma-arcilla-tenue );
	padding: calc( 0.75em - 1px ) calc( 1em - 1px );
}

/* --- Carpeta Pers: nota informativa, menor protagonismo que un producto --- */

#fluentform_6 .alma-carpeta-pers-info {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding: 0.6em 1em;
	background: transparent;
	border: none;
	border-left: 2px solid var( --alma-superficie-borde );
	border-radius: 0;
	color: var( --alma-crema );
	opacity: 0.75;
}

#fluentform_6 .alma-carpeta-pers-nombre {
	font-weight: 600;
	font-size: 0.9em;
}

#fluentform_6 .alma-carpeta-pers-texto {
	font-size: 0.82em;
	line-height: 1.4;
}

/* --- Bloque de identificación (Individual/Hermanos) --- */

#fluentform_6 #alma-incidencias-identificacion {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 1.5em 0;
	padding: 1.25em;
	background: rgba( 0, 0, 0, 0.15 );
	border: 1px solid var( --alma-superficie-borde );
	border-radius: 10px;
}

#fluentform_6 .alma-identificacion-titulo {
	margin: 0;
	color: var( --alma-crema );
	font-weight: 600;
	font-size: 1.05em;
}

#fluentform_6 .alma-identificacion-subtitulo {
	margin: -0.5em 0 0;
	color: var( --alma-crema );
	opacity: 0.75;
	font-size: 0.85em;
}

#fluentform_6 .alma-separador {
	width: 100%;
	border: none;
	border-top: 1px solid var( --alma-superficie-borde );
	margin: 0.25em 0;
}

/* Cada bloque (compartido o de un producto) apila: título, ocurrencias
   resueltas (resumen o ficha editable), slots pendientes y "+ Añadir...". */
#fluentform_6 .alma-bloque-atribucion {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: 0.9em;
	background: var( --alma-superficie );
	border: 1px solid var( --alma-superficie-borde );
	border-radius: 8px;
}

#fluentform_6 .alma-ocurrencia-persona,
#fluentform_6 .alma-slot-pendiente {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

#fluentform_6 .alma-resumen-persona {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.6em 0.8em;
	background: rgba( 247, 241, 232, 0.06 );
	border: 1px solid var( --alma-superficie-borde );
	border-radius: 8px;
}

#fluentform_6 .alma-resumen-texto {
	color: var( --alma-crema );
	font-size: 0.9em;
}

#fluentform_6 .alma-pills-reutilizar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

#fluentform_6 .alma-pill-reutilizar {
	padding: 0.4em 0.9em;
	border-radius: 999px;
	border: 1px solid var( --alma-superficie-borde );
	background: transparent;
	color: var( --alma-crema );
	cursor: pointer;
	font-size: 0.85em;
	min-height: 40px;
}

#fluentform_6 .alma-pill-reutilizar:hover,
#fluentform_6 .alma-pill-reutilizar:focus-visible {
	border-color: var( --alma-arcilla );
	background: var( --alma-arcilla-tenue );
}

/* --- Tarjeta de persona (Individual y Hermanos) --- */

#fluentform_6 .alma-persona-card {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: 0.9em;
	background: var( --alma-superficie );
	border: 1px solid var( --alma-superficie-borde );
	border-radius: 8px;
}

#fluentform_6 .alma-campo-fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

#fluentform_6 .alma-campo-fila .alma-campo {
	flex: 1 1 140px;
	min-width: 0;
}

#fluentform_6 .alma-campo {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	font-size: 0.85em;
	color: var( --alma-crema );
}

#fluentform_6 .alma-campo input,
#fluentform_6 .alma-campo select {
	padding: 0.5em 0.6em;
	border-radius: 6px;
	border: 1px solid var( --alma-superficie-borde );
	background: var( --alma-crema );
	color: var( --alma-grafito );
	font-size: 1em;
	width: 100%;
	max-width: 100%;
}

#fluentform_6 .alma-campo input:focus-visible,
#fluentform_6 .alma-campo select:focus-visible {
	outline: 2px solid var( --alma-arcilla );
	outline-offset: 1px;
}

/* --- Acciones: añadir hermano/a (secundaria), eliminar persona (terciaria) --- */

#fluentform_6 .alma-boton-anadir-hermano {
	align-self: flex-start;
	padding: 0.5em 1em;
	border-radius: 6px;
	border: 1px solid var( --alma-arcilla );
	background: transparent;
	color: var( --alma-arcilla );
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
}

#fluentform_6 .alma-boton-anadir-hermano:hover,
#fluentform_6 .alma-boton-anadir-hermano:focus-visible {
	background: var( --alma-arcilla-tenue );
	outline: none;
}

#fluentform_6 .alma-boton-eliminar-persona,
#fluentform_6 .alma-boton-editar-persona {
	align-self: flex-end;
	padding: 0.25em 0.4em;
	border: none;
	background: transparent;
	color: var( --alma-crema );
	opacity: 0.6;
	font-size: 0.8em;
	text-decoration: underline;
	cursor: pointer;
}

#fluentform_6 .alma-boton-eliminar-persona:hover,
#fluentform_6 .alma-boton-eliminar-persona:focus-visible,
#fluentform_6 .alma-boton-editar-persona:hover,
#fluentform_6 .alma-boton-editar-persona:focus-visible {
	opacity: 1;
}

/* --- Atribución: título de pregunta dentro de cada bloque --- */

#fluentform_6 .alma-bloque-atribucion .alma-identificacion-titulo {
	font-size: 0.95em;
}

/* --- Botón de envío --- */

#fluentform_6 .ff_submit_btn_wrapper {
	margin-top: 0.5em;
}

#fluentform_6 .ff-btn-submit {
	display: block;
	width: 100%;
	padding: 0.85em 1.5em;
	background: var( --alma-arcilla );
	border: none;
	border-radius: 8px;
	color: var( --alma-crema );
	font-weight: 600;
	font-size: 1.05em;
	cursor: pointer;
	min-height: 44px;
}

#fluentform_6 .ff-btn-submit:hover {
	background: #a35f45;
}

#fluentform_6 .ff-btn-submit:focus-visible {
	outline: 2px solid var( --alma-crema );
	outline-offset: 2px;
}

/* --- Responsive --- */

@media ( max-width: 600px ) {
	#fluentform_6 {
		padding: 1.1em;
		border-radius: 8px;
	}

	#fluentform_6 .ff-el-form-check:has( input[ type="radio" ] ) {
		flex: 1 1 100%;
	}

	#fluentform_6 .alma-campo-fila .alma-campo {
		flex: 1 1 100%;
	}
}

/* --- Enlace del texto de consentimiento (sobre fondo Grafito) ---
   El tema colorea en Grafito los enlaces de las casillas de todos los
   formularios (form.frm-fluent-form .ff_t_c a), lo que aquí los hace
   invisibles. Mismo lenguaje de enlace, en Crema; Arcilla en hover/foco. */

#fluentform_6 .ff_t_c a,
#fluentform_6 .ff_t_c a:focus-visible {
	color: var( --alma-crema );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

#fluentform_6 .ff_t_c a:hover,
#fluentform_6 .ff_t_c a:active {
	text-decoration-color: var( --alma-arcilla );
}

#fluentform_6 .ff_t_c a:focus-visible {
	text-decoration-color: var( --alma-arcilla );
	outline: 2px solid var( --alma-arcilla );
	outline-offset: 2px;
}