/* =========================================================================
   DIÁLOGO DE COTIZACIÓN
   Hereda los tokens del tema (--primary, --accent). No define paleta propia.
   ========================================================================= */

.cotiza {
	/* `margin: auto` centra en los dos ejes. Sin él, el navegador lo pega
	   arriba: el <dialog> sólo aplica el centrado horizontal por defecto. */
	margin: auto;
	width: min(920px, calc(100vw - 32px));
	max-height: calc(100dvh - 40px);
	padding: 0;
	border: none;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 24px 70px rgba(3, 29, 36, .3);
}

.cotiza::backdrop {
	background: rgba(6, 28, 34, .58);
	backdrop-filter: blur(3px);
}

/* Entrada: la ventana sube un poco al aparecer. */
.cotiza[open] {
	animation: cotiza-entra .26s cubic-bezier(.22, 1, .36, 1);
}
.cotiza[open]::backdrop {
	animation: cotiza-vela .26s ease;
}
@keyframes cotiza-entra {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
}
@keyframes cotiza-vela {
	from { opacity: 0; }
}

.cotiza__cuerpo {
	display: grid;
	grid-template-columns: 290px 1fr;
	max-height: calc(100dvh - 40px);
}

/* --- Botón de cierre ---------------------------------------------------- */

.cotiza__cerrar-form { margin: 0; }

.cotiza__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	color: #55686c;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}
.cotiza__cerrar:hover { background: #fff; color: var(--primary-dark, #08252d); }
.cotiza__cerrar:focus-visible {
	outline: 2px solid var(--accent, #e07f0e);
	outline-offset: 2px;
}

/* --- Columna de credenciales -------------------------------------------- */

.cotiza__aval {
	display: flex;
	flex-direction: column;
	padding: 34px 28px;
	background: var(--primary-dark, #08252d);
	color: #cfe0e4;
}

.cotiza__aval-eyebrow {
	margin: 0 0 12px;
	font-family: 'Inter', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent, #e07f0e);
}

.cotiza__aval-titular {
	margin: 0 0 26px;
	font-family: 'Archivo', sans-serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.015em;
	color: #fff;
}

.cotiza__aval-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.cotiza__aval-lista li {
	padding-left: 14px;
	border-left: 2px solid rgba(224, 127, 14, .5);
}

.cotiza__aval-lista strong {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.cotiza__aval-lista span {
	font-family: 'Roboto', sans-serif;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.45;
	color: #9db6bc;
}

.cotiza__aval-pie {
	margin: auto 0 0;
	padding-top: 22px;
	font-family: 'Roboto', sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	color: #9db6bc;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.cotiza__aval-pie strong { color: #fff; font-weight: 500; }

/* --- Panel del formulario ----------------------------------------------- */

.cotiza__panel {
	padding: 34px 34px 28px;
	/* El panel scrollea por su cuenta, pero necesita un tope de altura para
	   hacerlo: con `overflow-y:auto` y sin limite el contenido simplemente
	   crecia y el boton de enviar quedaba cortado fuera de la pantalla en
	   portatiles de 600-700 px de alto. */
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Sintonía: dos bandas que se llenan. Sustituye a los círculos numerados. */
.cotiza__sintonia {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 18px;
}

.cotiza__banda {
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: #dde3e4;
	transition: background .3s ease;
}
.cotiza__banda[data-activa] { background: var(--accent, #e07f0e); }

.cotiza__paso-txt {
	margin-left: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7d9096;
}

.cotiza__titulo {
	margin: 0 0 22px;
	font-family: 'Archivo', sans-serif;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--primary-dark, #08252d);
}

.cotiza__paso {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.cotiza__paso[hidden] { display: none; }

.cotiza__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

/* --- Campos -------------------------------------------------------------- */

.cotiza__campo {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}

.cotiza__label {
	display: block;
	margin-bottom: 5px;
	font-family: 'Archivo', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: #34484c;
}

.cotiza__opcional {
	font-family: 'Roboto', sans-serif;
	font-size: 11.5px;
	font-weight: 300;
	font-style: normal;
	color: #8a9a9e;
}

.cotiza__campo input,
.cotiza__campo select,
.cotiza__campo textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid #dde3e4;
	border-radius: 7px;
	background: #f6f8f8;
	font-family: 'Roboto', sans-serif;
	font-size: 14.5px;
	color: var(--primary-dark, #08252d);
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.cotiza__campo textarea { resize: vertical; min-height: 62px; }

.cotiza__campo input::placeholder,
.cotiza__campo textarea::placeholder { color: #9fadb1; }

.cotiza__campo input:hover,
.cotiza__campo select:hover,
.cotiza__campo textarea:hover { border-color: #c3cfd1; }

.cotiza__campo input:focus,
.cotiza__campo select:focus,
.cotiza__campo textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--primary, #004050);
	box-shadow: 0 0 0 3px rgba(0, 64, 80, .1);
}

/* Estado de error: sólo tras intentar avanzar, nunca mientras se escribe. */
.cotiza__campo[data-invalido] input,
.cotiza__campo[data-invalido] select {
	border-color: #c0392b;
	background: #fdf6f5;
}

.cotiza__error {
	display: none;
	margin-top: 4px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #c0392b;
}
.cotiza__campo[data-invalido] .cotiza__error { display: block; }

/* Safari (Mac/iPhone) dibuja el select nativo: más bajo, con flechas dobles
   y sin respetar el padding. Se quita la apariencia nativa y se pone una
   flecha propia; se repite en hover/focus/error porque esas reglas usan el
   atajo `background`, que borraría la imagen. */
.cotiza__campo select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	line-height: 1.3;
}
.cotiza__campo select,
.cotiza__campo select:hover,
.cotiza__campo select:focus,
.cotiza__campo[data-invalido] select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2343585c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 12px 8px;
}

/* --- Opciones de parque instalado --------------------------------------- */

.cotiza__campo--radios { margin: 0; }

.cotiza__campo--radios legend {
	padding: 0;
	margin-bottom: 7px;
}

.cotiza__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cotiza__opciones label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	border: 1.5px solid #dde3e4;
	border-radius: 7px;
	background: #f6f8f8;
	font-family: 'Roboto', sans-serif;
	font-size: 13.5px;
	color: #43585c;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.cotiza__opciones label:hover { border-color: #c3cfd1; }

/* El radio hereda de `.cotiza__campo input` el ancho 100%, padding, borde y
   fondo de los campos de texto; Safari sí aplica ese ancho y el círculo se
   come la tarjeta. Aquí se le devuelve su tamaño natural. */
.cotiza__opciones input[type="radio"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	accent-color: var(--primary, #004050);
}
.cotiza__opciones label span { line-height: 1.3; }

.cotiza__opciones label:has(input:checked) {
	border-color: var(--primary, #004050);
	background: #eef4f5;
	color: var(--primary-dark, #08252d);
	font-weight: 500;
}
.cotiza__opciones label:has(input:focus-visible) {
	outline: 2px solid var(--accent, #e07f0e);
	outline-offset: 2px;
}

/* --- Verificación --------------------------------------------------------- */

.cotiza__reto input { max-width: 190px; }
.cotiza__reto b {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	color: var(--primary, #004050);
}

/* Fuera de la vista, pero alcanzable por quien rellena a ciegas. */
.cotiza__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Acciones ------------------------------------------------------------ */

.cotiza__acciones {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.cotiza__volver {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 12px 16px;
	border: 1.5px solid #dde3e4;
	border-radius: 7px;
	background: #fff;
	font-family: 'Archivo', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #55686c;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease;
}
.cotiza__volver:hover { border-color: #c3cfd1; color: var(--primary-dark, #08252d); }
.cotiza__volver[hidden] { display: none; }

.cotiza__enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1;
	padding: 13px 24px;
	border: none;
	border-radius: 7px;
	background: var(--accent, #e07f0e);
	font-family: 'Archivo', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background .16s ease, transform .12s ease;
}
.cotiza__enviar:hover { background: var(--accent-hover, #c86e06); }
.cotiza__enviar:active { transform: translateY(1px); }

.cotiza__volver:focus-visible,
.cotiza__enviar:focus-visible {
	outline: 2px solid var(--primary, #004050);
	outline-offset: 2px;
}

.cotiza__nota {
	margin: 12px 0 0;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #7d9096;
	text-align: center;
}
.cotiza__nota[hidden] { display: none; }

/* --- Móvil --------------------------------------------------------------- */

@media (max-width: 760px) {
	.cotiza {
		/* A pantalla completa no hay nada que centrar: el margen se anula
		   para que no queden franjas del fondo a los lados. */
		margin: 0;
		width: 100vw;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
	}

	.cotiza__cuerpo {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		max-height: 100dvh;
	}

	/* La columna de credenciales se reduce a una franja: el aval sigue ahí,
	   pero no empuja el formulario fuera de la pantalla. */
	.cotiza__aval { padding: 20px 22px 18px; }
	.cotiza__aval-titular { font-size: 18px; margin-bottom: 0; }
	.cotiza__aval-lista,
	.cotiza__aval-pie { display: none; }

	.cotiza__panel { padding: 24px 22px 26px; }
	.cotiza__titulo { font-size: 21px; }
	.cotiza__fila { grid-template-columns: 1fr; }
	.cotiza__opciones label { width: 100%; }
}

/* --- Movimiento reducido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cotiza[open],
	.cotiza[open]::backdrop { animation: none; }
	.cotiza__banda,
	.cotiza__enviar,
	.cotiza__campo input,
	.cotiza__campo select,
	.cotiza__campo textarea { transition: none; }
}

/* --- Acuse de envio ------------------------------------------------------
   Sustituye al formulario dentro del mismo dialogo. La persona acaba de
   dejar sus datos: sacarla a otra pestaña ahi mismo rompe el hilo. */
.cotiza__gracias {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 26px 6px 10px;
}
.cotiza__gracias-icono {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #e8f6ed;
	color: #1a7f43;
	font-size: 27px;
	font-weight: 700;
	line-height: 1;
}
.cotiza__gracias-txt {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #4d5f63;
	max-width: 46ch;
	margin: 0;
}
.cotiza__gracias .dov-wa-cta { max-width: 320px; }
.cotiza__gracias-cerrar {
	background: none;
	border: none;
	font-family: 'Archivo', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #5a6a6e;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 8px;
}
.cotiza__gracias-cerrar:hover { color: #08252d; }