/*
 * tda-ficha-cliente: el formulario de cotización con la ficha del cliente. Solo se carga en la página de cotización,
 * con el formulario nuevo encendido. El tema (pro-design) arma el formulario como una rejilla de dos columnas y alinea
 * los campos por abajo; aquí no se cambia eso.
 *
 * Regla de esta hoja: ninguna caja se mueve, ni al cargar ni al llenar (lo prueba dev/e2e.js). El servidor manda el
 * formulario con su forma final; lo que aparece después (ayudas, RUES, resultados, el cliente elegido) va en un lugar
 * reservado o encima de otra cosa, nunca empujando.
 */

/* El tema pone display:flex a cada fila y eso le gana al atributo hidden. */
#yith-ywraq-default-form [hidden],
.tda-ficha-buscador [hidden] {
	display: none !important;
}

#yith-ywraq-default-form .tda-ficha-fila {
	position: relative;
	padding-bottom: 1.4em;
}

/* La línea reservada la usan las ayudas del plugin y el aviso de YITH al salir de un campo («Este es un campo
   necesario.», un correo mal escrito), que YITH pone justo después de la caja: así no empuja la fila ni la desalinea
   de la de al lado (el tema alinea las dos columnas por abajo). */
#yith-ywraq-default-form .tda-ficha-fila .woocommerce-input-wrapper {
	position: static;
}

#yith-ywraq-default-form .tda-ficha-fila .tda-ficha-ayuda,
#yith-ywraq-default-form .tda-ficha-fila .tda-ficha-rues,
#yith-ywraq-default-form .tda-ficha-fila .ywraq_error {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	font-size: 0.8em;
	line-height: 1.7;
	color: #5a6472;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#yith-ywraq-default-form .tda-ficha-fila .tda-ficha-ayuda--bien,
#yith-ywraq-default-form .tda-ficha-fila .tda-ficha-rues--bien {
	color: #1d6b3a;
}

#yith-ywraq-default-form .tda-ficha-fila .tda-ficha-ayuda--mal,
#yith-ywraq-default-form .tda-ficha-fila .ywraq_error {
	margin: 0;
	color: #b42318;
}

/* Mientras YITH avisa, la ayuda del plugin no se le monta encima. */
#yith-ywraq-default-form .tda-ficha-fila:has(.ywraq_error) :is(.tda-ficha-ayuda, .tda-ficha-rues) {
	visibility: hidden;
}

#yith-ywraq-default-form .tda-ficha-fila .tda-ficha-ayuda--aviso,
#yith-ywraq-default-form .tda-ficha-fila .tda-ficha-rues--aviso {
	color: #9a5b00;
}

/* El tipo de documento (solo el equipo), al lado del número. */
#yith-ywraq-default-form .tda-ficha-fila .woocommerce-input-wrapper:has(.tda-ficha-tipo) {
	display: flex;
	gap: 0.5rem;
}

#yith-ywraq-default-form .woocommerce-input-wrapper:has(.tda-ficha-tipo) > .tda-ficha-con-dv {
	flex: 1 1 auto;
	min-width: 0;
}

/* El dígito de verificación calculado, en gris pegado a lo escrito (formulario.js copia la letra y el relleno de la
   caja). Encima de la caja, sin tamaño propio y sin recibir clics: no mueve nada ni estorba. */
#yith-ywraq-default-form .tda-ficha-con-dv {
	position: relative;
	display: block;
}

#yith-ywraq-default-form .tda-ficha-con-dv > input {
	width: 100%;
}

#yith-ywraq-default-form .tda-ficha-dv {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: pre;
	pointer-events: none;
}

#yith-ywraq-default-form .tda-ficha-dv__eco {
	visibility: hidden;
}

#yith-ywraq-default-form .tda-ficha-dv__sufijo {
	color: #8a94a3;
}

/* Lo que se llenó solo (el documento, el buscador): fondo verde suave, como el resaltado del autollenado de Chrome.
   Solo el color: no cambia ningún tamaño. Se quita al editar el campo. */
#yith-ywraq-default-form .tda-ficha-autollenado {
	background-color: #e6f4ea;          /* El verde 50 de Google: se nota sin gritar. */
	transition: background-color 0.4s;
}

#yith-ywraq-default-form .tda-ficha-tipo {
	flex: 0 0 auto;
	width: auto;
	max-width: 45%;
}

/* La etiqueta que cambia de texto («Nombres» ↔ «Persona de contacto: nombres»), siempre en una línea. */
#yith-ywraq-default-form .tda-ficha-etiqueta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* El buscador. */
.tda-ficha-buscador {
	position: relative;
}

.tda-ficha-buscador__campo {
	position: relative;
}

.tda-ficha-buscador__etiqueta {
	font-weight: 600;
}

.tda-ficha-buscador__entrada {
	width: 100%;
}

/* Una sola línea, siempre reservada: los avisos y la historia del cliente elegido no empujan el formulario. */
.tda-ficha-buscador__estado {
	min-height: 1.4em;
	margin: 0.25rem 0 0;
	overflow: hidden;
	font-size: 0.85em;
	line-height: 1.4;
	color: #5a6472;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#yith-ywraq-default-form .tda-ficha-buscador__lista {
	position: absolute;
	z-index: 50;
	top: 100%;
	right: 0;
	left: 0;
	max-height: 22rem;
	margin: 0.25rem 0 0;
	padding: 0.25rem 0;          /* Con el id: el tema le pone sangría a las listas del contenido. */
	overflow: auto;
	list-style: none;
	background: #fff;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

#yith-ywraq-default-form .tda-ficha-op {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 0.75rem;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.tda-ficha-op[aria-selected="true"],
.tda-ficha-op:hover {
	background: #eef4ff;
}

.tda-ficha-op__nombre {
	font-weight: 600;
}

.tda-ficha-op__doc {
	font-size: 0.85em;
	color: #5a6472;
	text-align: right;
	white-space: nowrap;
}

.tda-ficha-op__contacto,
.tda-ficha-op__historia {
	grid-column: 1 / -1;
	font-size: 0.85em;
	color: #5a6472;
}

.tda-ficha-op--nuevo {
	display: block;
	font-weight: 600;
	border-top: 1px solid #e2e8f0;
}

/* El cliente elegido, encima del cuadro de búsqueda y de su mismo tamaño (el cuadro sigue ahí, invisible). */
.tda-ficha-buscador--elegido .tda-ficha-buscador__entrada {
	visibility: hidden;
}

#yith-ywraq-default-form .tda-ficha-buscador__elegido {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.75rem;
	overflow: hidden;
	white-space: nowrap;
	background: #f0f7f2;
	border: 1px solid #b7dcc4;
	border-radius: 4px;
}

.tda-ficha-buscador__nombre {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

#yith-ywraq-default-form .tda-ficha-buscador__cambiar {
	margin-left: auto;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
}

/* El cliente: lo opcional, plegado. */
#yith-ywraq-default-form .tda-ficha-algo-mas {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0 0 1em;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: 0;
}