@charset "UTF-8";

/* =========================================================================
   Formulario de inscripcion v2 - Infomatika
   =========================================================================

   Hoja unica del formulario publico de inscripcion. Reemplaza al theme
   legacy /vistas/css/formulario-inscripcion.css (plantilla "contact100" de
   Colorlib) y no depende de Bootstrap.

   Tokens --c2-* deliberadamente iguales a los del campus
   (campus/vistas/css/campus.css). El alumno pasa del formulario al campus
   en el mismo minuto: si las dos superficies no comparten neutros, escala
   tipografica y radios, la transicion se siente como dos productos.

   Modo dia unicamente, por decision de producto: el formulario publico se
   completa una sola vez y casi siempre a la luz del dia. Los tokens quedan
   igual declarados en :root para que agregar el modo noche despues sea
   redefinirlos y nada mas.

   El color del instituto entra por --c2-brand y --c2-cta, inyectados desde
   vistas/templates/standard.htm. Ningun color de marca esta escrito aca.

   CACHE-BUSTING: la hoja se pide como inscripcion.css?v=N desde
   vistas/templates/standard.htm. Al tocar este archivo hay que subir el
   numero o los navegadores sirven la copia vieja.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
	/* Marca: valores de arranque. standard.htm los pisa con los del tenant.
	   Estan aca para que la hoja se sostenga sola si se abre suelta. */
	--c2-brand: #2B4BEE;
	--c2-brand-ink: #FFFFFF;
	--c2-brand-soft: #EDF0FE;
	--c2-brand-dark: #1E39C4;

	/* Neutros */
	--c2-page: #F7F8FC;
	--c2-card: #FFFFFF;
	--c2-ink: #14161F;
	--c2-ink-2: #4B5060;
	--c2-ink-3: #6B7080;
	--c2-line: #EBECF2;
	--c2-line-2: #DFE1EA;

	/* Semanticos. El sufijo -ink es para texto (>=4.5:1), el token base es
	   para iconos y bordes (>=3:1), y -btn es superficie de boton. Usar un
	   token base como fondo con texto blanco encima es el error clasico. */
	--c2-ok: #0E9A61;   --c2-ok-bg: #E3F7EE;   --c2-ok-ink: #0A6B43;
	--c2-warn: #B4690E; --c2-warn-bg: #FDF3E2; --c2-warn-ink: #7E4909;
	--c2-bad: #C9372C;  --c2-bad-bg: #FDECEA;  --c2-bad-ink: #B22F25;
	--c2-info: #2B6CB8; --c2-info-bg: #E8F1FB; --c2-info-ink: #245C9E;
	--c2-ok-btn: #0A6B43; --c2-ok-btn-ink: #FFFFFF;

	/* Profundidad */
	--c2-sh-1: 0 1px 2px rgba(16,24,40,.05);
	--c2-sh-2: 0 1px 3px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.05);
	--c2-sh-3: 0 4px 8px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.10);

	/* Forma */
	--c2-r-card: 14px;
	--c2-r-btn: 10px;
	--c2-r-chip: 8px;
	--c2-r-pill: 999px;
	--c2-ease: cubic-bezier(.22,1,.36,1);

	/* Tipografia: una sola familia para toda la interfaz (Figtree). Outfit
	   entra solo en el titulo del paso. Etiquetas, botones y datos van en la
	   familia de cuerpo: display en un label es ruido, no jerarquia. */
	--c2-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--c2-font-display: 'Outfit', 'Figtree', system-ui, -apple-system, sans-serif;

	/* Ritmo. La escala no es uniforme a proposito: el aire entre grupos de
	   campos tiene que ser claramente mayor que el aire entre campos, o el
	   agrupamiento no se lee. */
	--ins-gap-field: 16px;
	--ins-gap-group: 30px;
	--ins-pad-card: 32px;

	/* Ancho del panel. A dos columnas la tarjeta llega a 720px; cada campo
	   queda en una medida comoda para escribir. */
	--ins-w: 720px;

	/* Escala z semantica */
	--z-sticky: 20;
	--z-topbar: 30;
	--z-overlay: 40;
}


/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body.ins {
	margin: 0;
	font-family: var(--c2-font);
	/* 16px y no 14px: es un formulario publico que se completa en el
	   celular. Debajo de 16px, iOS hace zoom al enfocar un input. */
	font-size: 16px;
	line-height: 1.55;
	color: var(--c2-ink);
	background: var(--c2-page);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.ins img { max-width: 100%; height: auto; }

::selection { background: var(--c2-brand); color: var(--c2-brand-ink); }

/* Foco visible y consistente en todo lo accionable. */
.ins :focus-visible {
	outline: 2px solid var(--c2-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

.ins-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* -------------------------------------------------------------------------
   3. Cabecera del instituto
   ---------------------------------------------------------------------- */

.ins-top {
	background: var(--c2-card);
	border-bottom: 1px solid var(--c2-line);
	padding: 14px 20px;
	position: relative;
	z-index: var(--z-topbar);
}

.ins-top-in {
	max-width: var(--ins-w);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 40px;
}

.ins-logo { display: block; max-height: 44px; width: auto; }

/* Si el instituto no cargo logo, queda el nombre como identidad. */
.ins-top-name {
	font-family: var(--c2-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--c2-ink);
}

/* Sello de seguridad al lado del logo: en un formulario que termina en un
   pago, la senal de "esto es seguro" sirve arriba, no enterrada en el pie. */
.ins-secure {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c2-ok-ink);
	background: var(--c2-ok-bg);
	border-radius: var(--c2-r-pill);
	padding: 5px 12px;
	white-space: nowrap;
}
.ins-secure svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 560px) {
	.ins-secure span { display: none; }
	.ins-secure { padding: 6px; }
}


/* -------------------------------------------------------------------------
   4. Indicador de paso
   ---------------------------------------------------------------------- */

/* width:100% no sobra. El body es un contenedor flex en columna, y un item
   con margin-left/right:auto deja de estirarse al ancho del contenedor: se
   encoge al contenido y los margenes lo centran. Sin esto las tres barras
   quedaban angostas y la etiqueta del paso salia cortada con puntos
   suspensivos aun sobrando lugar. */
.ins-steps {
	width: 100%;
	max-width: var(--ins-w);
	margin: 26px auto 0;
	padding: 0 20px;
}

.ins-steps ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.ins-step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* La barra es el estado. El numero la acompana, no al reves: de un vistazo
   se tiene que leer cuanto falta. */
.ins-step-bar {
	height: 4px;
	border-radius: var(--c2-r-pill);
	background: var(--c2-line-2);
	transition: background 250ms var(--c2-ease);
}

.ins-step-txt {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c2-ink-3);
	min-width: 0;
}

.ins-step-n {
	flex: none;
	width: 20px; height: 20px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700;
	background: var(--c2-line);
	color: var(--c2-ink-3);
	transition: background 250ms var(--c2-ease), color 250ms var(--c2-ease);
}

.ins-step-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ins-step.is-done .ins-step-bar { background: var(--c2-ok); }
.ins-step.is-done .ins-step-n { background: var(--c2-ok); color: #FFFFFF; }
.ins-step.is-done .ins-step-txt { color: var(--c2-ink-2); }

.ins-step.is-now .ins-step-bar { background: var(--c2-brand); }
.ins-step.is-now .ins-step-n { background: var(--c2-brand); color: var(--c2-brand-ink); }
.ins-step.is-now .ins-step-txt { color: var(--c2-ink); }

/* En angosto no entran tres etiquetas. Quedan las tres barras, que son el
   dato de avance, y una sola etiqueta: la del paso actual. */
@media (max-width: 620px) {
	.ins-steps { margin-top: 18px; }
	.ins-step-txt { font-size: 12px; }
	.ins-step:not(.is-now) .ins-step-lbl { display: none; }
	.ins-step:not(.is-now) { flex: 0 0 34px; }
	.ins-step.is-now { flex: 1 1 auto; }
}


/* -------------------------------------------------------------------------
   5. Tarjeta y estructura del contenido
   ---------------------------------------------------------------------- */

.ins-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--ins-w);
	margin: 0 auto;
	padding: 22px 20px 40px;
}

.ins-card {
	background: var(--c2-card);
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-r-card);
	box-shadow: var(--c2-sh-2);
	padding: var(--ins-pad-card);
}

@media (max-width: 620px) {
	.ins-main { padding: 16px 14px 32px; }
	.ins-card { padding: 22px 18px; border-radius: 12px; }
}

/* Titulo del paso. Escala fija, no fluida: el formulario se ve a densidad
   normal y un titulo que encoge no mejora nada. */
.ins-h {
	font-family: var(--c2-font-display);
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--c2-ink);
	margin: 0 0 6px;
	text-wrap: balance;
}

.ins-sub {
	font-size: 15px;
	color: var(--c2-ink-2);
	margin: 0 0 var(--ins-gap-group);
	max-width: 62ch;
	text-wrap: pretty;
}

.ins-sub:last-child { margin-bottom: 0; }

/* Bajada seguida de la leyenda del asterisco: se cierra el aire entre las dos
   para que se lean como un bloque y no como dos parrafos sueltos. */
.ins-sub-junto { margin-bottom: 4px; }

.ins-legend {
	font-size: 13px;
	color: var(--c2-ink-3);
	margin: 0 0 var(--ins-gap-group);
}

/* Titulo de grupo dentro de un paso */
.ins-group-h {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--c2-ink-2);
	margin: 0 0 14px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--c2-line);
}


/* -------------------------------------------------------------------------
   6. Campos
   ---------------------------------------------------------------------- */

/* Dos columnas cuando hay lugar, sin media query: el formulario se embebe
   con ?render=1 en la web del instituto, y ahi no controlamos el ancho de
   la ventana sino el del contenedor. */
.ins-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ins-gap-field) 18px;
	align-items: start;
}

/* Campos que siempre ocupan el ancho completo: direcciones, comentarios y
   cualquier cosa donde partir la linea en dos molesta al escribir. */
.ins-f-wide { grid-column: 1 / -1; }

.ins-f { min-width: 0; }

.ins-f label,
.ins-f .ins-label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c2-ink-2);
	margin-bottom: 5px;
}

/* Obligatorio marcado en el campo, no solo en una leyenda al pie. La
   leyenda al pie llega tarde: se lee despues de haber completado.

   :not(.ins-check) porque un campo obligatorio puede llevar ademas una
   casilla opcional al lado. El caso real es el correo del paso 1, que es
   obligatorio y tiene debajo "No tengo correo electronico": sin la
   exclusion, esa casilla salia con asterisco, es decir marcada como
   obligatoria justo la opcion que sirve para no completar el campo. */
.ins-f.is-req > label:not(.ins-check)::after,
.ins-f.is-req > .ins-label::after {
	content: ' *';
	color: var(--c2-bad);
	font-weight: 700;
}

.ins-f .ins-hint {
	display: block;
	font-size: 12.5px;
	color: var(--c2-ink-3);
	margin-top: 5px;
}

/* Ayuda que va ENTRE la etiqueta y el control, no debajo. Se le da el
   espacio del lado de abajo, que es donde esta el campo. */
.ins-f label + .ins-hint { margin: -1px 0 6px; }

/* Controles. El selector ataca por tipo y no por clase porque buena parte
   de los combos los inyecta el AJAX legacy con markup propio y sin clases
   nuestras (inicios, modalidades, planes de pago, provincias, ciudades). */
.ins input[type="text"],
.ins input[type="tel"],
.ins input[type="email"],
.ins input[type="number"],
.ins input[type="date"],
.ins input[type="password"],
.ins select,
.ins textarea {
	display: block;
	width: 100%;
	font-family: var(--c2-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--c2-ink);
	background: var(--c2-card);
	border: 1.5px solid var(--c2-line-2);
	border-radius: var(--c2-r-btn);
	padding: 11px 14px;
	min-height: 48px;
	transition: border-color 150ms var(--c2-ease), box-shadow 150ms var(--c2-ease);
}

.ins textarea { min-height: 110px; resize: vertical; }

.ins input::placeholder, .ins textarea::placeholder {
	/* --c2-ink-3 y no un gris mas claro: el placeholder tambien es texto que
	   hay que poder leer en un celular a la luz del dia. */
	color: var(--c2-ink-3);
	opacity: 1;
}

.ins input:focus,
.ins select:focus,
.ins textarea:focus {
	border-color: var(--c2-brand);
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2-brand) 18%, transparent);
}

.ins input[disabled], .ins select[disabled], .ins textarea[disabled] {
	background: var(--c2-page);
	color: var(--c2-ink-3);
	cursor: not-allowed;
}

.ins select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7080' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 40px;
	cursor: pointer;
}

.ins input[type="checkbox"], .ins input[type="radio"] {
	accent-color: var(--c2-brand);
	width: 18px; height: 18px;
	min-height: 0;
	margin: 0;
	flex: none;
	cursor: pointer;
}

.ins-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	color: var(--c2-ink-2);
	cursor: pointer;
	padding: 4px 0;
}
.ins-check input { margin-top: 3px; }

/* Estado de error del campo. Lo pone la capa JS, no el navegador.
   .campoRequerido es la clase que ya agregaba VerificarForm en el sistema
   viejo: se estila para que el estilo valga aunque la capa nueva no corra. */
.ins-f.is-bad input,
.ins-f.is-bad select,
.ins-f.is-bad textarea,
.ins .campoRequerido {
	border-color: var(--c2-bad);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2-bad) 14%, transparent);
}

.ins-err {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c2-bad-ink);
	margin-top: 6px;
}
.ins-f.is-bad .ins-err { display: flex; }
.ins-err svg { width: 14px; height: 14px; flex: none; }

/* Valor de solo lectura.

   Cuando el curso, la modalidad o el plan vienen impuestos (porque el enlace
   ya traia el inicio, o porque el alumno ya se inscribio), los AJAX legacy no
   dibujan un combo sino <p class="select"> con el texto y un input hidden.
   Sin estilo eso quedaba como un parrafo suelto donde deberia haber un
   control: se lo trata como un campo desactivado, que es lo que es. */
.ins-f .select,
.ins-f p.select {
	margin: 0;
	display: block;
	background: var(--c2-page);
	border: 1.5px solid var(--c2-line);
	border-radius: var(--c2-r-btn);
	padding: 12px 14px;
	min-height: 48px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c2-ink);
}

/* Aclaracion del codigo de promocion, que escribe promociones.ajax.php */
.ins-f .promo {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--c2-ink-3);
}

/* Leyenda de campos obligatorios */
.text_required { color: var(--c2-ink-3); font-size: 13.5px; }

/* Tabla de inicios de una carrera (carreras.ajax.php). Es la unica tabla que
   queda en el formulario y viene con markup propio: se la ata al ancho
   disponible y se le da a los radios un area de toque decente. */
.ins-f table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ins-f table td { padding: 9px 8px; border-bottom: 1px solid var(--c2-line); vertical-align: middle; }
.ins-f table tr:last-child td { border-bottom: 0; }
.ins-f table .tablelisttitle td {
	font-size: 13px; font-weight: 700; color: var(--c2-ink-2);
	background: none; padding-left: 0;
}
.ins-f table .subtitles td { background: var(--c2-page); font-size: 13.5px; }

/* Indicador de envio en curso. El markup viejo era un GIF adentro de una
   tabla; ahora es el mismo aviso que el resto del formulario. */
.ins-spin {
	width: 18px; height: 18px; flex: none; margin-top: 1px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ins-spin 700ms linear infinite;
}

/* Telefono con codigo de area en dos cajas */
.ins-f-split { display: flex; gap: 8px; align-items: flex-start; }
.ins-f-split > input:first-child { flex: 0 0 92px; }
.ins-f-split > input:last-child { flex: 1 1 auto; }

/* El widget intlTelInput monta su propio wrapper alrededor del input. */
.ins .iti { width: 100%; display: block; }
.ins .iti__flag-container { z-index: var(--z-overlay); }


/* -------------------------------------------------------------------------
   7. Botones
   ---------------------------------------------------------------------- */

.ins-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--c2-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	padding: 13px 22px;
	min-height: 50px;
	border: 1.5px solid transparent;
	border-radius: var(--c2-r-btn);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background 150ms var(--c2-ease), border-color 150ms var(--c2-ease),
	            color 150ms var(--c2-ease), box-shadow 150ms var(--c2-ease),
	            transform 150ms var(--c2-ease);
}

.ins-btn:active { transform: translateY(1px); }
.ins-btn svg { width: 17px; height: 17px; flex: none; }

/* Accion principal: el color de boton destacado del instituto, con el color
   de texto calculado por contraste en PHP. No el color de identidad, que
   puede ser casi negro. */
.ins-btn-primary {
	background: var(--c2-cta, var(--c2-brand));
	border-color: var(--c2-cta, var(--c2-brand));
	color: var(--c2-cta-ink, var(--c2-brand-ink));
	box-shadow: var(--c2-sh-2);
}
.ins-btn-primary:hover {
	background: color-mix(in srgb, var(--c2-cta, var(--c2-brand)) 88%, #000);
	border-color: color-mix(in srgb, var(--c2-cta, var(--c2-brand)) 88%, #000);
	color: var(--c2-cta-ink, var(--c2-brand-ink));
	box-shadow: var(--c2-sh-3);
}

/* =========================================================================
   Corregir el correo cuando el alumno ya estaba registrado

   La frase y el enlace vienen los dos adentro de la leyenda traducible
   MSG_INSPASO2DATOSNOSONCORRECTOS, que cada instituto puede editar desde el
   administrador. No se puede rearmar el markup desde la plantilla sin pisar
   ese texto, asi que el enlace se convierte en boton desde aca.

   Sale con inline-flex y no como bloque a proposito: el enlace puede estar en
   cualquier posicion de la frase, segun como la haya escrito el instituto. Un
   bloque partiria la oracion al medio en cuanto alguien lo mueva; asi queda
   como boton dentro del parrafo, este donde este.

   Va en tono secundario porque no es la accion de esta pantalla: la accion es
   seguir al paso siguiente. Esto es la salida por si el correo esta mal.
   ========================================================================= */
.ins-reeditar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

.ins-reeditar a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	/* Alto tactil de sobra: en el celular hay que poder tocarlo sin errarle,
	   y antes era texto suelto en medio de un parrafo. */
	min-height: 42px;
	padding: 9px 16px;
	border: 1.5px solid var(--c2-line-2);
	border-radius: var(--c2-r-btn);
	background: var(--c2-card);
	color: var(--c2-ink);
	/* Se van el subrayado y el azul del navegador: ya se lee como boton. */
	text-decoration: none;
	white-space: nowrap;
	transition: background 150ms var(--c2-ease), border-color 150ms var(--c2-ease),
	            box-shadow 150ms var(--c2-ease), transform 150ms var(--c2-ease);
}

.ins-reeditar a:hover {
	background: var(--c2-page);
	border-color: var(--c2-ink-3);
	color: var(--c2-ink);
	box-shadow: var(--c2-sh-1);
}

.ins-reeditar a:active { transform: translateY(1px); }

/* Lapiz al costado, para que se lea "editar" antes de leer el texto. Va como
   fondo de un ::before y no como <svg>, porque el markup del enlace lo
   escribe el instituto y desde aca no se puede tocar. */
.ins-reeditar a::before {
	content: '';
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ins-btn-ghost {
	background: var(--c2-card);
	border-color: var(--c2-line-2);
	color: var(--c2-ink-2);
}
.ins-btn-ghost:hover { background: var(--c2-page); border-color: var(--c2-ink-3); color: var(--c2-ink); }

.ins-btn[disabled], .ins-btn.is-busy { opacity: .55; pointer-events: none; }

/* Spinner del boton mientras se envia. Reemplaza al ajax-loading.gif dentro
   de una <table> que traia el formulario viejo. */
.ins-btn.is-busy::before {
	content: '';
	width: 16px; height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ins-spin 700ms linear infinite;
}

@keyframes ins-spin { to { transform: rotate(360deg); } }

/* Barra de navegacion del wizard */
.ins-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: var(--ins-gap-group);
	padding-top: 20px;
	border-top: 1px solid var(--c2-line);
}

.ins-nav .ins-btn-primary { margin-left: auto; }
.ins-nav-solo .ins-btn-primary { margin-left: 0; width: 100%; }

@media (max-width: 480px) {
	/* El primario va arriba y a lo ancho: es la accion que el pulgar busca. */
	.ins-nav { flex-direction: column-reverse; align-items: stretch; }
	.ins-nav .ins-btn { width: 100%; margin-left: 0; }
}


/* -------------------------------------------------------------------------
   8. Wizard
   ---------------------------------------------------------------------- */

/* Sin JS no hay wizard: todos los paneles quedan visibles y el formulario
   se comporta como el de siempre. Los paneles solo se ocultan cuando la
   capa JS marca el contenedor con .ins-wz-on. Si el script falla o no
   carga, el alumno igual se puede inscribir. */
.ins-wz-on .ins-panel { display: none; }
.ins-wz-on .ins-panel.is-now { display: block; }

/* La entrada del panel es un desplazamiento corto, no una coreografia. Solo
   confirma que hubo un cambio de pantalla. */
.ins-wz-on .ins-panel.is-now {
	animation: ins-panel-in 220ms var(--c2-ease) both;
}

@keyframes ins-panel-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Contador de sub-paso dentro del paso. Va pegado al titulo del grupo, como
   una linea superior de este, no como un parrafo aparte. */
.ins-panel-cap {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--c2-ink-3);
	margin: 0 0 3px;
}

/* El boton legacy NO se oculta cuando el wizard esta activo.

   Aca hubo un error: la primera version tenia una regla display:none sobre
   .ins-legacy-btn, pensada para que el boton suelto no quedara colgando. Pero
   la capa JS no duplica ese boton sino que MUEVE el nodo adentro de la barra
   de navegacion, asi que la regla terminaba escondiendo el unico boton que
   cierra la inscripcion. La clase queda como marca para encontrarlo, sin
   efecto visual: si por algun motivo no se moviera, que se vea es
   exactamente lo que corresponde. */
.ins-legacy-btn { display: block; }
.ins-nav .ins-legacy-btn { margin-left: auto; }
.ins-nav-solo .ins-legacy-btn { margin-left: 0; width: 100%; }
.ins-nav .ins-legacy-btn .ins-btn { width: 100%; }

@media (max-width: 480px) {
	.ins-nav .ins-legacy-btn { width: 100%; margin-left: 0; }
}


/* -------------------------------------------------------------------------
   9. Resumen de la compra
   ---------------------------------------------------------------------- */

/* El importe es el momento de decision del formulario. En el formulario
   viejo era un <span> suelto con el mismo peso que una etiqueta cualquiera. */
/* El tinte sale del color de ACCION del instituto, no del de identidad.

   Con --c2-brand este bloque desaparecia: la identidad puede ser casi negra
   (el caso de IAD) y un 8% de negro sobre blanco es gris, con lo cual el
   importe quedaba con el mismo peso que cualquier panel neutro. El color de
   accion, en cambio, siempre es un acento de verdad, y ademas es el mismo
   del boton de confirmar: el importe y el boton son la misma decision. */
.ins-total {
	display: block;
	background: color-mix(in srgb, var(--c2-cta, var(--c2-brand)) 14%, #FFFFFF);
	border: 1px solid color-mix(in srgb, var(--c2-cta, var(--c2-brand)) 42%, #FFFFFF);
	border-radius: var(--c2-r-card);
	padding: 16px 18px;
	margin-top: var(--ins-gap-group);
}

/* =========================================================================
   El importe y sus leyendas

   El contenido lo arma getImportePagar.ajax.php y lo inyecta
   MostrarOcultarImporteAPagar(). Llega como una tira de <span> pegados, en
   este orden y con estas clases:

     .precio-titulo             "Importe a pagar para comenzar el curso: "
     .precio-importe-anterior   el precio sin descuento, solo si hubo uno
     .precio-importe            lo que hay que pagar. Viene SIEMPRE
     .precio-descuento          explicacion del codigo de promocion
     .precio-bonificacion       descuento por el medio de pago elegido
     .precio-recargo            RECARGO por el medio de pago elegido

   Sin estilos, con un descuento aplicado se leia todo junto:
   "...comenzar el curso: $ 118000$ 82600Con este codigo de promocion tenes
   un 30% de descuento". Dos importes pegados uno al otro, sin ninguna pista
   de cual se paga. En la pantalla donde el alumno decide cuanto va a gastar.

   Se resuelve con jerarquia, no con adornos: el precio viejo tachado y
   apagado, el que se paga grande, y la explicacion abajo en su propia linea.
   ========================================================================= */

.ins-total-val,
.ins-recap-val {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c2-ink);
}

/* La leyenda ocupa su propia linea arriba */
.ins-total-val .precio-titulo,
.ins-recap-val .precio-titulo {
	flex: 0 0 100%;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--c2-ink-2);
}

/* Lo que se paga */
.ins-total-val .precio-importe,
.ins-recap-val .precio-importe {
	font-size: 21px;
	letter-spacing: -0.01em;
	color: var(--c2-ink);
}

/* El precio de antes. Tachado y apagado: tiene que leerse como referencia,
   no como el numero a pagar. El grosor del tachado va explicito porque el
   default es un pelo y sobre texto en negrita casi no se ve. */
.ins-total-val .precio-importe-anterior,
.ins-recap-val .precio-importe-anterior {
	font-size: 15px;
	font-weight: 600;
	color: var(--c2-ink-3);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--c2-ink-3);
}

/* Explicaciones, cada una en su linea.

   El descuento y la bonificacion van en verde: es una buena noticia y de paso
   explican en palabras por que hay dos numeros, que es lo unico que percibe
   quien no ve el tachado.

   El recargo va en ambar y NO comparte estilo con los otros dos: ahi el
   alumno paga de mas por el medio de pago que eligio, y eso no puede
   comunicarse con el mismo color que un descuento. */
.ins-total-val .precio-descuento,
.ins-total-val .precio-bonificacion,
.ins-total-val .precio-recargo,
.ins-recap-val .precio-descuento,
.ins-recap-val .precio-bonificacion,
.ins-recap-val .precio-recargo {
	flex: 0 0 100%;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	margin-top: 4px;
}

.ins-total-val .precio-descuento,
.ins-total-val .precio-bonificacion,
.ins-recap-val .precio-descuento,
.ins-recap-val .precio-bonificacion {
	color: var(--c2-ok-ink);
}

.ins-total-val .precio-recargo,
.ins-recap-val .precio-recargo {
	color: var(--c2-warn-ink);
}

.ins-total[hidden] { display: none; }

/* Repeticion del importe en el panel de confirmacion */
.ins-recap {
	background: var(--c2-page);
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-r-card);
	padding: 16px 18px;
	margin-bottom: var(--ins-gap-group);
	font-size: 14.5px;
	color: var(--c2-ink-2);
}
.ins-recap strong { color: var(--c2-ink); font-weight: 700; }
.ins-recap[hidden] { display: none; }

/* En el resumen el importe se repite, no se decide: va un escalon abajo del
   bloque principal para no competir con el. */
.ins-recap .precio-importe { font-size: 18px; }


/* -------------------------------------------------------------------------
   10. Avisos
   ---------------------------------------------------------------------- */

.ins-note {
	display: flex;
	gap: 11px;
	border-radius: var(--c2-r-card);
	padding: 14px 16px;
	font-size: 14.5px;
	line-height: 1.5;
	margin-bottom: var(--ins-gap-group);
	background: var(--c2-info-bg);
	color: var(--c2-info-ink);
	border: 1px solid color-mix(in srgb, var(--c2-info) 25%, transparent);
}
.ins-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ins-note p { margin: 0; }
.ins-note p + p { margin-top: 6px; }

.ins-note-ok   { background: var(--c2-ok-bg);   color: var(--c2-ok-ink);   border-color: color-mix(in srgb, var(--c2-ok) 25%, transparent); }
.ins-note-warn { background: var(--c2-warn-bg); color: var(--c2-warn-ink); border-color: color-mix(in srgb, var(--c2-warn) 30%, transparent); }
.ins-note-bad  { background: var(--c2-bad-bg);  color: var(--c2-bad-ink);  border-color: color-mix(in srgb, var(--c2-bad) 25%, transparent); }

/* Resumen de errores al intentar avanzar. Se llena desde la capa JS. */
.ins-errbox { display: none; }
.ins-errbox.is-on { display: flex; }
.ins-errbox ul { margin: 6px 0 0; padding-left: 18px; }
.ins-errbox a { color: inherit; font-weight: 700; }

/* Datos ya registrados que se muestran de solo lectura */
.ins-ro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px 18px;
	background: var(--c2-page);
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-r-card);
	padding: 16px 18px;
	margin-bottom: 18px;
}
.ins-ro dt { font-size: 12.5px; font-weight: 700; color: var(--c2-ink-3); margin: 0 0 2px; }
.ins-ro dd { margin: 0; font-size: 15px; color: var(--c2-ink); font-weight: 600; word-break: break-word; }


/* -------------------------------------------------------------------------
   11. Alta con Facebook / Google
   ---------------------------------------------------------------------- */

.ins-social { display: grid; gap: 10px; margin-bottom: 22px; }

.ins-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 12px 18px;
	border-radius: var(--c2-r-btn);
	border: 1.5px solid var(--c2-line-2);
	background: var(--c2-card);
	color: var(--c2-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms var(--c2-ease), border-color 150ms var(--c2-ease), box-shadow 150ms var(--c2-ease);
}
.ins-social-btn:hover { background: var(--c2-page); border-color: var(--c2-ink-3); box-shadow: var(--c2-sh-1); }
.ins-social-btn svg { width: 19px; height: 19px; flex: none; }

/* Separador "o" */
.ins-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--c2-ink-3);
}
.ins-or::before, .ins-or::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--c2-line);
}

/* Panel flotante del login de Google (markup del SDK) */
#container_google_auth {
	display: none;
	position: fixed;
	z-index: var(--z-overlay);
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: var(--c2-card);
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-r-card);
	box-shadow: var(--c2-sh-3);
	padding: 14px;
}
#container_google_auth.is-on { display: block; }
#header_google_auth { display: flex; justify-content: flex-end; }
#close_google_auth {
	background: none; border: 0; cursor: pointer;
	color: var(--c2-ink-3); font-size: 18px; line-height: 1;
	padding: 4px 6px; border-radius: var(--c2-r-chip);
}
#close_google_auth:hover { background: var(--c2-page); color: var(--c2-ink); }


/* -------------------------------------------------------------------------
   12. Terminos y condiciones
   ---------------------------------------------------------------------- */

.ins-tyc {
	background: var(--c2-page);
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-r-card);
	padding: 14px 16px;
	margin-top: 18px;
}
.ins-tyc a { color: var(--c2-brand); font-weight: 700; }

/* El texto de los TyC lo inyecta tyc.ajax.php con markup propio: se le pone
   un limite de alto para que no empuje el boton de enviar fuera de la
   pantalla en el celular. */
.ins-tyc .tyc-body, #DivTerminosYCondiciones .tyc-body {
	max-height: 190px;
	overflow-y: auto;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--c2-ink-2);
	margin-top: 10px;
	padding-right: 8px;
}


/* -------------------------------------------------------------------------
   13. Pie
   ---------------------------------------------------------------------- */

.ins-foot {
	flex: none;
	text-align: center;
	padding: 22px 20px 30px;
	font-size: 13px;
	color: var(--c2-ink-3);
}
.ins-foot img { display: inline-block; vertical-align: middle; }
.ins-foot-brand { margin-top: 14px; opacity: .8; }
.ins-foot-brand:hover { opacity: 1; }


/* -------------------------------------------------------------------------
   14. Cierre de la inscripcion
   ---------------------------------------------------------------------- */

.ins-done { text-align: center; padding: 8px 0; }

.ins-done-icon {
	width: 58px; height: 58px;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--c2-ok-bg);
	color: var(--c2-ok-ink);
}
.ins-done-icon svg { width: 28px; height: 28px; }

.ins-done .ins-h { margin-bottom: 10px; }

/* Aviso que va debajo del contador, no arriba del titulo */
.ins-done .ins-note-abajo { margin: 20px 0 0; text-align: left; }
.ins-done p { color: var(--c2-ink-2); margin: 0 auto 8px; max-width: 52ch; }

.ins-count {
	display: inline-flex; align-items: baseline; gap: 6px;
	font-size: 14px; font-weight: 600; color: var(--c2-ink-3);
	margin-top: 8px;
}
.ins-count span { font-variant-numeric: tabular-nums; color: var(--c2-ink); font-weight: 700; }


/* -------------------------------------------------------------------------
   15. Reducir movimiento
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ins-wz-on .ins-panel.is-now { animation: none; }
	.ins *, .ins *::before, .ins *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	/* El spinner del boton es el unico estado que se comunica solo con
	   movimiento: se lo deja girar, mas lento. */
	.ins-btn.is-busy::before {
		animation: ins-spin 1.6s linear infinite !important;
		animation-duration: 1.6s !important;
	}
}