/**
 * Sección «captacion» de la página «proyecto», clonada de producción.
 *
 * Las clases `css-…` son los hashes que genera Emotion en el sitio viejo.
 * Se conservan literales para que el render sea idéntico; por eso no son
 * legibles. La plantilla que las usa está al lado, en el mismo directorio.
 *
 * Generado desde https://www.icasa.pe — no editar a mano salvo para corregir.
 */

.css-1pk1fka { font: inherit; letter-spacing: inherit; color: currentcolor; border: 0px; box-sizing: content-box; background: none; height: 1.4375em; margin: 0px; -webkit-tap-highlight-color: transparent; display: block; min-width: 0px; width: 100%; animation-name: mui-auto-fill-cancel; animation-duration: 10ms; padding: 16.5px 14px; }
.css-1pk1fka::-webkit-input-placeholder { color: currentcolor; opacity: 0.42; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.css-1pk1fka:focus { outline: 0px; }
.css-1pk1fka:invalid { box-shadow: none; }
.css-1pk1fka::-webkit-search-decoration { appearance: none; }
label[data-shrink="false"] + .MuiInputBase-formControl .css-1pk1fka::-webkit-input-placeholder { opacity: 0 !important; }
label[data-shrink="false"] + .MuiInputBase-formControl .css-1pk1fka:focus::-webkit-input-placeholder { opacity: 0.42; }
.css-1pk1fka.Mui-disabled { opacity: 1; -webkit-text-fill-color: rgba(0, 0, 0, 0.38); }
.css-1pk1fka:-webkit-autofill { animation-duration: 5000s; animation-name: mui-auto-fill; }
.css-1pk1fka:-webkit-autofill { border-radius: inherit; }
.css-5v2ak0 { text-align: left; position: absolute; inset: -5px 0px 0px; margin: 0px; padding: 0px 8px; pointer-events: none; border-radius: inherit; border-style: solid; border-width: 1px; overflow: hidden; min-width: 0%; border-color: rgba(0, 0, 0, 0.23); }
.css-81qg8w { float: unset; width: auto; overflow: hidden; display: block; padding: 0px; height: 11px; font-size: 0.75em; visibility: hidden; max-width: 0.01px; transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1); white-space: nowrap; }
.css-81qg8w > span { padding-left: 5px; padding-right: 5px; display: inline-block; opacity: 0; visibility: visible; }
.css-1vbfw84 { display: inline-flex; flex-direction: column; position: relative; min-width: 0px; padding: 0px; margin: 0px; border: 0px; vertical-align: top; width: 100%; }
.css-19lagpe { color: rgba(0, 0, 0, 0.6); font-family: Poppins, sans-serif; font-weight: 400; line-height: 1.4375em; padding: 0px; display: block; transform-origin: left top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; left: 0px; top: 0px; transition: color 200ms cubic-bezier(0, 0, 0.2, 1), transform 200ms cubic-bezier(0, 0, 0.2, 1), max-width 200ms cubic-bezier(0, 0, 0.2, 1); z-index: 1; pointer-events: none; transform: translate(14px, 16px) scale(1); max-width: calc(100% - 24px); font-size: 0.875rem; }
.css-19lagpe.Mui-focused { color: rgb(25, 118, 210); }
.css-19lagpe.Mui-disabled { color: rgba(0, 0, 0, 0.38); }
.css-19lagpe.Mui-error { color: rgb(211, 47, 47); }
.css-rxuhmm { font-family: Poppins, sans-serif; font-weight: 400; line-height: 1.4375em; color: rgba(0, 0, 0, 0.87); box-sizing: border-box; cursor: text; display: inline-flex; -webkit-box-align: center; align-items: center; width: 100%; position: relative; border-radius: 4px; font-size: 0.875rem; }
.css-rxuhmm.Mui-disabled { color: rgba(0, 0, 0, 0.38); cursor: default; }
.css-rxuhmm:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(0, 0, 0, 0.87); }
@media (hover: none){
.css-rxuhmm:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(0, 0, 0, 0.23); }
}
.css-rxuhmm.Mui-focused .MuiOutlinedInput-notchedOutline { border-width: 2px; }
.css-rxuhmm.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: rgb(25, 118, 210); }
.css-rxuhmm.Mui-error .MuiOutlinedInput-notchedOutline { border-color: rgb(211, 47, 47); }
.css-rxuhmm.Mui-disabled .MuiOutlinedInput-notchedOutline { border-color: rgba(0, 0, 0, 0.26); }
.css-2yyj4f { position: fixed; bottom: 0px; left: 0px; width: 100%; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px; padding: 32px 16px; z-index: 1300; display: flex; -webkit-box-pack: center; justify-content: center; }
.css-148noiu { box-sizing: border-box; display: flex; flex-flow: row; margin-top: calc(-16px); width: calc(100% + 16px); margin-left: calc(-16px); -webkit-box-align: center; align-items: center; }
.css-148noiu > .MuiGrid-item { padding-top: 16px; }
.css-148noiu > .MuiGrid-item { padding-left: 16px; }
.css-kxu0dz { box-sizing: border-box; margin: 0px; flex-direction: row; flex-basis: 0px; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; }
@media (min-width: 600px){
.css-kxu0dz { flex-basis: 0px; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; }
}
@media (min-width: 900px){
.css-kxu0dz { flex-basis: 0px; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; }
}
@media (min-width: 1200px){
.css-kxu0dz { flex-basis: 0px; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; }
}
@media (min-width: 1536px){
.css-kxu0dz { flex-basis: 0px; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; }
}
.css-1wxaqej { box-sizing: border-box; margin: 0px; flex-direction: row; }
.css-l2zee5 { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.75; min-width: 64px; padding: 12px 16px; border: 0px; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px; --variant-textColor: #1976d2; --variant-outlinedColor: #1976d2; --variant-outlinedBorder: rgba(25, 118, 210, 0.5); --variant-containedColor: #fff; --variant-containedBg: #1976d2; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); text-transform: none; color: rgb(255, 255, 255); font-weight: 700; white-space: nowrap; background-color: rgb(38, 38, 132); }
.css-l2zee5.Mui-disabled { pointer-events: none; cursor: default; }
@media print{
.css-l2zee5 { print-color-adjust: exact; }
}
.css-l2zee5:hover { text-decoration: none; }
.css-l2zee5.Mui-disabled { color: rgba(0, 0, 0, 0.26); }
.css-l2zee5:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px; }
@media (hover: none){
.css-l2zee5:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px; }
}
.css-l2zee5:active { box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px; }
.css-l2zee5.Mui-focusVisible { box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px; }
.css-l2zee5.Mui-disabled { color: rgba(0, 0, 0, 0.26); box-shadow: none; background-color: rgba(0, 0, 0, 0.12); }
@media (hover: hover){
.css-l2zee5:hover { --variant-containedBg: #1565c0; --variant-textBg: rgba(25, 118, 210, 0.04); --variant-outlinedBorder: #1976d2; --variant-outlinedBg: rgba(25, 118, 210, 0.04); }
}
.css-l2zee5.MuiButton-loading { color: transparent; }
.css-l2zee5:hover { background-color: rgb(29, 29, 107); }

/* ─────────────────────────────────────────────────────────────────────────
 * A partir de aquí ya no es clonado: es el plegado del móvil.
 *
 * El 70% del formulario venía en un `style` dentro del JSX; se pasó aquí para
 * poder cambiarlo por ancho de pantalla sin pelear con la especificidad de un
 * atributo en línea.
 * ───────────────────────────────────────────────────────────────────────── */

.icasa-captacion-panel { width: 70%; }

/* En escritorio la franja es la de siempre: ni cabecera ni plegado. */
.icasa-captacion-toggle { display: none; }

@media (max-width: 699px) {

	/*
	 * La barra pasa a ser una tarjeta pegada abajo, con aire a los lados: el
	 * `right: 0` junto al `left: 0` que ya trae y el `margin: auto` la centran
	 * sin recurrir a un `transform` (que crearía bloque contenedor para
	 * cualquier `fixed` de dentro). La sombra se voltea (`0 -4px …`) porque
	 * ahora el borde que se ve es el de arriba.
	 */
	.css-2yyj4f {
		right: 0px;
		width: calc(100% - 3rem);
		flex-direction: column;
		margin: 0px auto;
		padding: 0;
		border-radius: 16px 16px 0px 0px;
		box-shadow: rgba(0, 0, 0, 0.18) 0px -4px 16px 0px;
	}

	/* La cabecera: el título y la flecha, como en la referencia. */
	.icasa-captacion-toggle {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin: 0px;
		padding: 18px 20px;
		border: 0px;
		background: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		font-family: Poppins, sans-serif;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.5;
		text-align: left;
		color: rgb(38, 38, 132);
	}

	/*
	 * Plegado apunta hacia arriba («se abre hacia arriba») y desplegado hacia
	 * abajo. Es un galón de trazo, no el triángulo relleno de MUI: el sitio no
	 * tiene ninguno así, así que el dibujo va suelto en la plantilla.
	 */
	.icasa-captacion-flecha {
		flex: 0 0 auto;
		width: 26px;
		height: 26px;
		fill: none;
		stroke: currentcolor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transform: rotate(180deg);
		transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.icasa-captacion[data-abierto="true"] .icasa-captacion-flecha { transform: rotate(0deg); }

	/*
	 * El acordeón. `grid-template-rows: 0fr → 1fr` anima hasta la altura real
	 * del contenido, que con `max-height` habría que adivinar. El formulario
	 * solo tiene un hijo visible —los `input` ocultos no pintan caja—, así que
	 * la rejilla no descoloca nada.
	 */
	.icasa-captacion-panel {
		display: grid;
		grid-template-rows: 0fr;
		width: 100%;
		transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.icasa-captacion[data-abierto="true"] .icasa-captacion-panel { grid-template-rows: 1fr; }

	/*
	 * El relleno va en los campos y no aquí a propósito. Este es el elemento
	 * de la rejilla: cuando la fila mide 0 se estira a 0 de contenido, pero su
	 * `padding` seguiría sumando alto y asomaría una franja del formulario por
	 * debajo de la cabecera. Puesto dentro, lo recorta el `overflow`.
	 *
	 * `visibility` además del recorte: sin ella los campos plegados siguen
	 * cogiendo el tabulador. Al cerrar espera a que acabe la animación.
	 */
	.css-148noiu {
		flex-flow: column;
		-webkit-box-align: stretch;
		align-items: stretch;
		gap: 18px;
		width: 100%;
		min-height: 0px;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		visibility: hidden;
		transition: visibility 0s linear 280ms;
	}

	.icasa-captacion[data-abierto="true"] .css-148noiu {
		visibility: visible;
		transition-delay: 0s;

		/* Si el teclado deja el panel más alto que la pantalla, que ruede. */
		overflow-y: auto;
		max-height: 70vh;
	}

	.css-148noiu > .MuiGrid-item { padding: 0px 20px; }
	.css-148noiu > .MuiGrid-item:first-child { padding-top: 4px; }
	.css-148noiu > .MuiGrid-item:last-child { padding-bottom: 24px; }

	/* Los campos ya no compiten por el ancho: cada uno ocupa la fila entera. */
	.css-kxu0dz { flex-basis: auto; max-width: none; }

	.css-1wxaqej { width: 100%; }

	.css-l2zee5 {
		width: 100%;
		padding: 14px 16px;
		border-radius: 8px;
		font-size: 1rem;
	}
}

/* Quien tenga el movimiento reducido ve el mismo panel, pero sin viaje. */
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
	.icasa-captacion-flecha,
	.icasa-captacion-panel { transition: none; }
	.css-148noiu { transition: none; }
}
