/**
 * Fase 5 - Entrega 1/2: estilos del formulario [alma_pedidos_extra_individual].
 *
 * Todas las reglas quedan aisladas bajo #apx-individual-form (prefijo apx-).
 * No se usan selectores globales de etiqueta (body, h1, input, button,
 * fieldset...) sin ese ancla, para no afectar a ningun otro formulario ni al
 * tema. Los valores de color/tipografia/espaciado/bordes proceden de
 * docs/proyecto/02 y de las Etapas 2-9 de docs/proyecto/05 ya cerradas; el
 * diseno visual exacto de boton y el valor de radio se usan aqui como
 * hipotesis de prototipo autorizadas puntualmente, todavia no registradas en
 * doc05 como decision definitiva.
 */

#apx-individual-form {
	--apx-crema: #F7F1E8;
	--apx-grafito: #2E3438;
	--apx-arcilla: #B86F52;
	--apx-arena: #D8C7B2;
	--apx-azul-pizarra: #5D7891;
	--apx-azul-niebla: #DCE7EC;
	--apx-blanco-roto: #FFFDF8;

	--apx-espacio-xs: 0.25rem;
	--apx-espacio-s: 0.5rem;
	--apx-espacio-m: 1rem;
	--apx-espacio-l: 1.5rem;
	--apx-espacio-xl: 2rem;
	--apx-espacio-2xl: 3rem;

	--apx-radio-compacto: 4px;
	--apx-radio-amplio: 8px;

	max-width: 38rem;
	margin: 0 auto;
	padding-inline: var(--apx-espacio-m);
	color: var(--apx-grafito);
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-xl);
}

#apx-individual-form .apx-entradilla {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Bloques (fieldsets) ---------- */

#apx-individual-form fieldset {
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-l);
}

#apx-individual-form fieldset + fieldset,
#apx-individual-form fieldset + #apx-resumen,
#apx-individual-form .apx-identificacion {
	padding-top: var(--apx-espacio-xl);
	border-top: 1px solid var(--apx-arena);
}

#apx-individual-form legend {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	padding: 0;
	margin-bottom: var(--apx-espacio-s);
}

/* El fieldset de Duplicado y el de Productos Extra usan un gap mas
   compacto entre el titulo (legend) y su contenido que el resto de
   bloques, para evitar el espacio vertical excesivo detectado en la
   revision visual del Paso 1. */
#apx-individual-form .apx-duplicado,
#apx-individual-form .apx-productos {
	gap: var(--apx-espacio-s);
}

#apx-individual-form .apx-duplicado legend,
#apx-individual-form .apx-productos legend {
	margin-bottom: 0;
}

#apx-individual-form [id^="apx-duplicado-contenido"] p {
	margin: 0;
}

/* ---------- Campos de identificacion ---------- */

#apx-individual-form .apx-campo {
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-s);
}

#apx-individual-form .apx-campo label {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.2;
}

#apx-individual-form .apx-campo input[type="text"],
#apx-individual-form .apx-campo select {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	color: var(--apx-grafito);
	background-color: var(--apx-blanco-roto);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-s) var(--apx-espacio-m);
	width: 100%;
	box-sizing: border-box;
}

#apx-individual-form .apx-campo input[type="text"]:focus-visible,
#apx-individual-form .apx-campo select:focus-visible {
	outline: 2px solid var(--apx-azul-pizarra);
	outline-offset: 1px;
}

/* ---------- Fichas de alumno (Entrega 2: identificacion multiple) ---------- */

#apx-individual-form .apx-fichas-alumnos {
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-m);
}

#apx-individual-form .apx-ficha-alumno {
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-m);
	padding: var(--apx-espacio-m);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	background-color: var(--apx-blanco-roto);
}

/* Encabezado discreto "Alumno N" dentro de cada ficha de identificacion,
   por encima del campo Curso -- puramente visual, no usa ningun id
   tecnico nuevo. */
#apx-individual-form .apx-ficha-numero {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--apx-grafito) 55%, transparent);
}

#apx-individual-form .apx-boton-eliminar-ficha {
	align-self: flex-end;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--apx-grafito);
	opacity: 0.65;
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
}

#apx-individual-form .apx-boton-eliminar-ficha:hover,
#apx-individual-form .apx-boton-eliminar-ficha:focus-visible {
	opacity: 1;
}

#apx-individual-form .apx-boton-eliminar-ficha:focus-visible {
	outline: 2px solid var(--apx-azul-pizarra);
	outline-offset: 2px;
}

/* ---------- Aviso de curso por colegio (inline, junto al selector afectado) ---------- */
/* role="alert" ya anuncia el cambio a lectores de pantalla; el color no es
   el unico medio de informacion, el propio texto explica el motivo. */

#apx-individual-form .apx-aviso-campo {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--apx-arcilla);
}

/* ---------- Aviso informativo (identificacion multiple todavia sin conectar a la compra) ---------- */

#apx-individual-form .apx-aviso {
	background-color: var(--apx-azul-niebla);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-m);
}

#apx-individual-form .apx-aviso p {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
}

/* ---------- Duplicado del pack: opciones seleccionables ---------- */
/* Los controles nativos (checkbox/radio) y su label permanecen siempre
   visibles y asociados; :has() solo añade un resaltado decorativo cuando el
   navegador lo soporta, nunca condiciona la usabilidad basica. */

#apx-individual-form [id^="apx-duplicado-contenido"] label {
	display: flex;
	align-items: center;
	gap: var(--apx-espacio-s);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-m);
	cursor: pointer;
}

#apx-individual-form [id^="apx-duplicado-contenido"] label:has(:checked) {
	border-color: var(--apx-azul-pizarra);
	background-color: var(--apx-azul-niebla);
}

#apx-individual-form [id^="apx-duplicado-contenido"] > div + div {
	margin-top: var(--apx-espacio-s);
}

/* ---------- Productos extra ---------- */

#apx-individual-form .apx-producto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--apx-espacio-m);
	row-gap: var(--apx-espacio-s);
	border-bottom: 1px solid var(--apx-arena);
	padding-block: var(--apx-espacio-m);
}

#apx-individual-form .apx-producto:last-child {
	border-bottom: none;
}

#apx-individual-form .apx-producto > label:first-child {
	display: flex;
	align-items: center;
	gap: var(--apx-espacio-s);
	flex: 1 1 auto;
	min-width: 12rem;
}

#apx-individual-form .apx-producto-nombre {
	font-family: "Inter", sans-serif;
	font-weight: 500;
}

#apx-individual-form .apx-producto-precio {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	white-space: nowrap;
	margin-left: auto;
}

#apx-individual-form .apx-cantidad-label {
	display: flex;
	align-items: center;
	gap: var(--apx-espacio-s);
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 0.875rem;
	flex: 0 0 auto;
}

#apx-individual-form .apx-producto-cantidad {
	width: 4rem;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	color: var(--apx-grafito);
	background-color: var(--apx-blanco-roto);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-xs) var(--apx-espacio-s);
	box-sizing: border-box;
}

#apx-individual-form .apx-producto-cantidad:disabled {
	background-color: var(--apx-crema);
	color: color-mix(in srgb, var(--apx-grafito) 45%, transparent);
	border-color: var(--apx-arena);
}

/* ---------- Resumen ---------- */

#apx-individual-form #apx-resumen {
	background-color: var(--apx-crema);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-amplio);
	padding: var(--apx-espacio-l);
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-m);
}

/* La regla anterior fija "display: flex" con una especificidad (dos IDs)
   mayor que la del estilo nativo del navegador para [hidden] (que solo
   fija "display: none" con la especificidad de un selector de atributo).
   Sin esta regla, el atributo hidden deja de ocultar el recuadro: se ve
   vacio (con su fondo/borde/padding) mientras no tiene contenido. */
#apx-individual-form #apx-resumen[hidden] {
	display: none;
}

#apx-individual-form .apx-resumen-tabla-wrap {
	/* Red de seguridad: con table-layout fijo y las columnas angostas de
	   Cantidad/Importe no deberia hacer falta, pero evita cualquier
	   desbordamiento horizontal si un nombre de producto es muy largo. */
	overflow-x: auto;
}

#apx-individual-form #apx-resumen table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
}

#apx-individual-form #apx-resumen th,
#apx-individual-form #apx-resumen td {
	text-align: left;
	padding: var(--apx-espacio-s) var(--apx-espacio-xs);
	border-bottom: 1px solid var(--apx-arena);
	vertical-align: top;
	overflow-wrap: break-word;
}

#apx-individual-form #apx-resumen th {
	font-weight: 600;
}

#apx-individual-form #apx-resumen th:nth-child(2),
#apx-individual-form #apx-resumen td:nth-child(2) {
	width: 4.5rem;
	text-align: center;
}

/* ---------- Resumen agrupado por alumno (Entrega 6) ---------- */

#apx-individual-form .apx-resumen-alumno {
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-s);
}

#apx-individual-form .apx-resumen-alumno + .apx-resumen-alumno {
	border-top: 1px solid var(--apx-arena);
	padding-top: var(--apx-espacio-m);
}

#apx-individual-form .apx-resumen-alumno-titulo {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
}

#apx-individual-form .apx-resumen-alumno-curso {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--apx-grafito) 65%, transparent);
}

#apx-individual-form .apx-resumen-alumno-vacio {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
	color: color-mix(in srgb, var(--apx-grafito) 65%, transparent);
}

#apx-individual-form .apx-resumen-alumno-subtotal {
	margin: 0;
	text-align: right;
	font-size: 0.9375rem;
}

#apx-individual-form #apx-resumen th:nth-child(3),
#apx-individual-form #apx-resumen td:nth-child(3) {
	width: 5.5rem;
	text-align: right;
}

#apx-individual-form .apx-resumen-concepto-nombre {
	display: block;
	font-weight: 500;
}

#apx-individual-form .apx-resumen-concepto-precio-unitario {
	display: block;
	margin-top: var(--apx-espacio-xs);
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--apx-grafito) 65%, transparent);
}

#apx-individual-form #apx-resumen p {
	margin: 0;
	font-size: 1.0625rem;
}

#apx-individual-form .apx-resumen-total {
	text-align: right;
}

#apx-individual-form #apx-resumen p strong {
	font-weight: 700;
}

#apx-individual-form .apx-resumen-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apx-espacio-m);
}

/* En movil, cada fila de producto pasa de 3 columnas de tabla a una ficha
   compacta 2x2 (nombre+importe arriba, precio unitario+cantidad debajo).
   La semantica accesible de tabla se conserva via los roles ARIA ya
   añadidos en construirResumen() (role=table/rowgroup/row/columnheader/
   cell), que no dependen de este "display". */
@media (max-width: 480px) {
	#apx-individual-form #apx-resumen thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
		clip: rect(0 0 0 0);
	}

	#apx-individual-form #apx-resumen tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"nombre importe"
			"precio cantidad";
		column-gap: var(--apx-espacio-s);
		row-gap: var(--apx-espacio-xs);
		padding-block: var(--apx-espacio-s);
		border-bottom: 1px solid var(--apx-arena);
	}

	#apx-individual-form #apx-resumen tbody td,
	#apx-individual-form #apx-resumen tbody th {
		border-bottom: none;
		padding: 0;
	}

	/* La celda Concepto se "desenvuelve": sus dos spans (nombre y precio
	   unitario) pasan a ser items propios de la rejilla de la fila. */
	#apx-individual-form #apx-resumen tbody tr > td:first-child {
		display: contents;
	}

	#apx-individual-form .apx-resumen-concepto-nombre {
		grid-area: nombre;
	}

	#apx-individual-form .apx-resumen-concepto-precio-unitario {
		grid-area: precio;
		align-self: end;
	}

	#apx-individual-form #apx-resumen tbody tr > td:nth-child(2) {
		grid-area: cantidad;
		justify-self: end;
		align-self: end;
		font-size: 0.8125rem;
		color: color-mix(in srgb, var(--apx-grafito) 65%, transparent);
	}

	#apx-individual-form #apx-resumen tbody tr > td:nth-child(2)::before {
		content: "Cantidad: ";
	}

	#apx-individual-form #apx-resumen tbody tr > td:nth-child(3) {
		grid-area: importe;
		justify-self: end;
		font-weight: 700;
	}
}

/* El boton "Ver resumen" solo se oculta (hidden), nunca se retira del DOM;
   esta regla evita que el parrafo que lo envuelve deje un hueco vacio
   mientras esta oculto. */
#apx-individual-form p:has(> #apx-boton-resumen) {
	margin: 0;
}

/* ---------- Botones ---------- */

#apx-individual-form .apx-boton-primario,
#apx-individual-form .apx-boton-secundario {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	padding: var(--apx-espacio-m) var(--apx-espacio-l);
	border-radius: var(--apx-radio-compacto);
	cursor: pointer;
	width: fit-content;
}

/* Selector restringido a <a>: aplicar display/text-decoration a la clase
   compartida con los <button> (p. ej. #apx-boton-resumen, que tambien es
   .apx-boton-primario) empataria en especificidad con la regla nativa del
   navegador [hidden]{display:none} -- al tener la misma especificidad,
   gana la regla de autor por orden de cascada, y el boton dejaria de
   ocultarse aunque JS siga poniendo hidden=true. Acotado a "a" para que
   solo afecte al enlace "Ir al carrito" del bloque de exito. */
#apx-individual-form a.apx-boton-primario {
	display: inline-block;
	text-decoration: none;
}

#apx-individual-form .apx-boton-primario {
	background-color: var(--apx-grafito);
	color: var(--apx-blanco-roto);
	border: 1px solid var(--apx-grafito);
}

#apx-individual-form .apx-boton-primario:hover {
	background-color: color-mix(in srgb, var(--apx-grafito) 85%, black);
}

#apx-individual-form .apx-boton-primario:focus-visible,
#apx-individual-form .apx-boton-secundario:focus-visible {
	outline: 2px solid var(--apx-azul-pizarra);
	outline-offset: 2px;
}

#apx-individual-form .apx-boton-primario:disabled {
	background-color: var(--apx-arena);
	border-color: var(--apx-arena);
	color: var(--apx-grafito);
	cursor: not-allowed;
}

#apx-individual-form .apx-boton-secundario {
	background-color: transparent;
	color: var(--apx-grafito);
	border: 1px solid var(--apx-grafito);
}

#apx-individual-form .apx-boton-secundario:hover {
	background-color: var(--apx-azul-niebla);
}

#apx-individual-form .apx-boton-secundario:disabled {
	background-color: transparent;
	border-color: var(--apx-arena);
	color: var(--apx-arena);
	cursor: not-allowed;
}

/* ---------- Apartado 2: Duplicado de Pack de hermanos (Entrega 7: seccion compartida real, visible solo con 2+ alumnos) ---------- */

#apx-individual-form .apx-familia-seccion {
	background-color: var(--apx-crema);
	border: 2px solid var(--apx-azul-pizarra);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-m);
}

#apx-individual-form #apx-duplicado-hermanos-contenido label {
	display: flex;
	align-items: center;
	gap: var(--apx-espacio-s);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-m);
	cursor: pointer;
}

#apx-individual-form #apx-duplicado-hermanos-contenido label:has(:checked) {
	border-color: var(--apx-azul-pizarra);
	background-color: var(--apx-azul-niebla);
}

#apx-individual-form #apx-duplicado-hermanos-contenido > div + div {
	margin-top: var(--apx-espacio-s);
}

#apx-individual-form #apx-duplicado-hermanos-contenido p {
	margin: 0;
}

/* ---------- Titulo de productos de un alumno (Entrega 3) ---------- */

#apx-individual-form .apx-titulo-productos-alumno {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
}

/* ---------- Acordeones de alumnos 2-4 (Entrega 3: todavia sin funcionalidad comercial) ---------- */

#apx-individual-form .apx-acordeones-alumnos {
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-m);
}

#apx-individual-form .apx-acordeon-alumno {
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	background-color: var(--apx-blanco-roto);
	padding: var(--apx-espacio-m);
}

#apx-individual-form .apx-acordeon-alumno summary {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

#apx-individual-form .apx-acordeon-alumno summary:focus-visible {
	outline: 2px solid var(--apx-azul-pizarra);
	outline-offset: 2px;
}

#apx-individual-form .apx-acordeon-alumno[open] summary {
	margin-bottom: var(--apx-espacio-s);
}

#apx-individual-form .apx-proximamente {
	margin: 0;
	font-size: 0.9375rem;
	color: color-mix(in srgb, var(--apx-grafito) 65%, transparent);
}

/* ---------- Observaciones (nota unica por confirmacion/pedido) ---------- */

#apx-individual-form .apx-observaciones-wrap textarea {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	color: var(--apx-grafito);
	background-color: var(--apx-blanco-roto);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-s) var(--apx-espacio-m);
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

/* ---------- Calculadora familiar (Entrega 3: espacio informativo, sin importes reales) ---------- */

#apx-individual-form .apx-calculadora {
	background-color: var(--apx-azul-niebla);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-compacto);
	padding: var(--apx-espacio-m);
}

#apx-individual-form .apx-calculadora p {
	margin: 0;
	font-size: 0.9375rem;
}

/* ---------- Mensajes ---------- */

#apx-individual-form #apx-mensajes {
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
	display: flex;
	flex-direction: column;
	gap: var(--apx-espacio-s);
}

#apx-individual-form #apx-mensajes p {
	margin: 0;
}

/* Bloque de exito total (Confirmar y añadir al carrito): se distingue
   claramente del resto de mensajes (fallo/ambiguo, que siguen siendo
   parrafos sueltos sin resaltar) y deja suficiente espacio inferior --
   antes #apx-mensajes era el ultimo elemento del formulario, sin padding
   propio, y el enlace de exito quedaba pegado al final de la pagina. */
#apx-individual-form .apx-mensaje-exito {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--apx-espacio-s);
	background-color: var(--apx-crema);
	border: 1px solid var(--apx-arena);
	border-radius: var(--apx-radio-amplio);
	padding: var(--apx-espacio-l);
	margin-bottom: var(--apx-espacio-xl);
}

/* ---------- Productos extra: apilado deliberado en movil ---------- */
/* .apx-producto solo tiene dos hijos directos: el label con checkbox +
   nombre + precio, y el label de Cantidad. En movil se fuerza a que cada
   uno ocupe su propia fila completa, en vez de depender del ajuste
   incidental del flex-wrap general. */

@media (max-width: 480px) {
	#apx-individual-form .apx-producto {
		flex-direction: column;
		align-items: stretch;
	}

	#apx-individual-form .apx-producto > label:first-child,
	#apx-individual-form .apx-cantidad-label {
		width: 100%;
	}
}