/* =========================================================================
   MCI — pagina de solicitud de cotizacion
   =========================================================================

   Estructura que genera el shortcode [addify-quote-request-page]:

       <form class="woocommerce-cart-form addify-quote-form">
           <table class="shop_table ... woocommerce-cart-form__contents">
           <div class="cart-collaterals"><div class="cart_totals">
           <div class="af_quote_fields">    <- campos + boton de enviar

   Los tres son hijos DIRECTOS del formulario y se colocan explicitamente en
   el grid: fila y columna para cada uno, mas una regla de respaldo para
   cualquier hijo que inyecte un hook del plugin. Colocar solo algunos y dejar
   el resto a la colocacion automatica es lo que descoloco el checkout dos
   veces; aqui no se repite.
   ========================================================================= */

.mci-quote-page {
	--mci-q-accent: var(--wd-primary-color, #0050d3);
	--mci-q-accent-soft: rgba(0, 80, 211, .06);
	--mci-q-accent-brd: rgba(0, 80, 211, .45);
	--mci-q-brd: var(--color-gray-200, #f1f1f1);
	--mci-q-brd-strong: var(--color-gray-300, #bbb);
	--mci-q-bg-soft: var(--color-gray-100, #f7f7f7);
	--mci-q-muted: var(--color-gray-500, #767676);
	--mci-q-radius: 14px;
}


/* -------------------------------------------------------------------------
   Encabezado de la pagina
   ------------------------------------------------------------------------- */

.mci-quote-page .mci-quote-head {
	margin-bottom: 26px;
}

.mci-quote-page .mci-quote-head__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

.mci-quote-page .mci-quote-head__title::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h7l5 5V20a.5.5 0 0 1-.5.5h-11A.5.5 0 0 1 6 20V4a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M13 3.5V9h5'/%3E%3Cpath d='M9 13h6M9 16.5h4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.mci-quote-page .mci-quote-head__sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mci-q-muted);
}


/* -------------------------------------------------------------------------
   Dos columnas
   ------------------------------------------------------------------------- */

/* UNA sola columna, a proposito.

   Se intentaron dos columnas tres veces: con grid (no llegaba a aplicarse) y
   con float (el resumen quedaba encima de la tabla, y despues el titulo del
   resumen se separaba de su propia tabla de totales).

   Sin poder observar el render no hay forma de saber por que, y cada intento
   dejaba la pagina peor. Asi que se apila todo a ancho completo: productos,
   resumen y datos. Es predecible y correcto.

   Para volver a intentar las dos columnas hace falta el DOM real del
   formulario con sus hijos directos y los estilos computados de
   `.cart-collaterals`. Sin ese dato, cualquier intento es a ciegas.
   ----------------------------------------------------------------------- */

.mci-quote-page form.addify-quote-form {
	display: block;
	width: 100%;
	max-width: 100%;
}

.mci-quote-page form.addify-quote-form::after {
	content: "";
	display: table;
	clear: both;
}

.mci-quote-page form.addify-quote-form > table.shop_table,
.mci-quote-page form.addify-quote-form > .cart-collaterals,
.mci-quote-page form.addify-quote-form > .af_quote_fields {
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	margin: 0 0 26px;
}


/* -------------------------------------------------------------------------
   Tabla de productos, como tarjeta
   ------------------------------------------------------------------------- */

.mci-quote-page form.addify-quote-form > table.shop_table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--mci-q-brd);
	border-radius: var(--mci-q-radius);
	border-collapse: separate;
	border-spacing: 0;
	background-color: #fff;
	overflow: hidden;
}

.mci-quote-page form.addify-quote-form > table.shop_table thead th {
	padding: 16px 14px;
	border: 0;
	border-bottom: 1px solid var(--mci-q-brd);
	background-color: var(--mci-q-bg-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mci-q-muted);
}

.mci-quote-page form.addify-quote-form > table.shop_table tbody td {
	padding: 18px 14px;
	border: 0;
	border-bottom: 1px solid var(--mci-q-brd);
	font-size: 14px;
	line-height: 1.5;
	vertical-align: middle;
}

.mci-quote-page form.addify-quote-form > table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.mci-quote-page form.addify-quote-form > table.shop_table td.product-thumbnail img {
	width: 62px;
	height: auto;
	border: 1px solid var(--mci-q-brd);
	border-radius: 10px;
}

.mci-quote-page form.addify-quote-form > table.shop_table td.product-name a {
	color: inherit;
	font-weight: 500;
}

.mci-quote-page form.addify-quote-form > table.shop_table td.product-subtotal {
	color: var(--mci-q-accent);
	font-weight: 600;
}

.mci-quote-page form.addify-quote-form > table.shop_table td.product-remove a.remove {
	color: var(--mci-q-muted);
}

/* Fila de acciones: el boton "Actualizar cotizacion" como accion secundaria. */
.mci-quote-page form.addify-quote-form > table.shop_table td.actions {
	padding: 18px 14px;
	background-color: var(--mci-q-bg-soft);
}

.mci-quote-page #afrfq_update_quote_btn {
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--mci-q-accent-brd);
	border-radius: 10px;
	background-color: #fff;
	color: var(--mci-q-accent);
	font-size: 14px;
	font-weight: 600;
}

.mci-quote-page #afrfq_update_quote_btn:hover {
	background-color: var(--mci-q-accent-soft);
	color: var(--mci-q-accent);
}


/* -------------------------------------------------------------------------
   Resumen de cotizacion (columna derecha)
   ------------------------------------------------------------------------- */

.mci-quote-page .cart-collaterals,
.mci-quote-page .cart-collaterals .cart_totals,
.mci-quote-page .cart-collaterals .wd-table-wrapper {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	overflow: visible;
}

.mci-quote-page .cart-collaterals .cart_totals {
	padding: 24px;
	border: 1px solid var(--mci-q-brd);
	border-radius: var(--mci-q-radius);
	background-color: #fff;
}

.mci-quote-page .cart-collaterals .cart_totals > h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

.mci-quote-page .cart-collaterals .cart_totals > h2::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.mci-quote-page .cart_totals table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.mci-quote-page .cart_totals table th,
.mci-quote-page .cart_totals table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--mci-q-brd);
	font-size: 14px;
	line-height: 1.5;
}

.mci-quote-page .cart_totals table th {
	font-weight: 500;
	text-align: left;
	color: var(--mci-q-muted);
}

.mci-quote-page .cart_totals table td {
	text-align: right;
	font-weight: 600;
}

.mci-quote-page .cart_totals table tr:last-child th,
.mci-quote-page .cart_totals table tr:last-child td {
	padding-top: 18px;
	border-bottom: 0;
	font-size: 20px;
	font-weight: 700;
	color: inherit;
}

.mci-quote-page .cart_totals table tr:last-child td {
	color: var(--mci-q-accent);
}


/* -------------------------------------------------------------------------
   Datos del solicitante

   OJO: `.quote-fields` es una <table>, no un contenedor de divs. Cada campo es
   un <tr class="addify-option-field"> con dos celdas: etiqueta e input. Una
   version anterior de esta hoja lo trataba como divs con flex, y por eso no
   aplicaba nada.

   Se convierte la tabla en un contenedor flex y cada fila en un bloque, con la
   etiqueta sobre el campo. `display: contents` en el <tbody> saca ese nivel
   intermedio del layout; si el navegador no lo soporta, los campos simplemente
   quedan apilados a ancho completo, que es una degradacion aceptable.

   El titulo va como ::before porque entre el <div class="af_quote_fields"> y la
   tabla no hay ningun hook del plugin donde insertarlo. Contrapartida: el texto
   vive en el CSS y no pasa por traducciones.
   ------------------------------------------------------------------------- */

.mci-quote-page .af_quote_fields {
	padding: 26px;
	border: 1px solid var(--mci-q-brd);
	border-radius: var(--mci-q-radius);
	background-color: #fff;
}

.mci-quote-page .af_quote_fields::before {
	content: "Tus datos";
	display: block;
	margin-bottom: 2px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.mci-quote-page table.quote-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 20px;
	width: 100%;
	margin: 18px 0 0;
	border: 0;
	background: none;
}

.mci-quote-page table.quote-fields > tbody {
	display: contents;
}

.mci-quote-page .quote-fields tr.addify-option-field {
	display: block;
	flex: 1 1 calc(50% - 10px);
	min-width: 0;
	border: 0;
	background: none;
}

/* Los campos anchos (area de texto, archivo, terminos) ocupan la fila entera. */
.mci-quote-page .quote-fields tr.addify-option-field:has(textarea),
.mci-quote-page .quote-fields tr.addify-option-field:has(input[type="file"]),
.mci-quote-page .quote-fields tr.addify-option-field:has(td[colspan]) {
	flex: 1 1 100%;
}

.mci-quote-page .quote-fields tr.addify-option-field > td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

/* Primera celda: la etiqueta. */
.mci-quote-page .quote-fields tr.addify-option-field > td:first-child {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mci-q-muted);
}

.mci-quote-page .quote-fields label {
	display: inline;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.mci-quote-page .quote-fields input[type="text"],
.mci-quote-page .quote-fields input[type="email"],
.mci-quote-page .quote-fields input[type="number"],
.mci-quote-page .quote-fields input[type="date"],
.mci-quote-page .quote-fields input[type="time"],
.mci-quote-page .quote-fields input[type="datetime-local"],
.mci-quote-page .quote-fields textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--mci-q-brd-strong);
	border-radius: 8px;
	background-color: #fff;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mci-quote-page .quote-fields textarea {
	min-height: 110px;
	padding-top: 12px;
	resize: vertical;
}

.mci-quote-page .quote-fields input::placeholder,
.mci-quote-page .quote-fields textarea::placeholder {
	color: var(--color-gray-400, #a5a5a5);
}

.mci-quote-page .quote-fields input:focus,
.mci-quote-page .quote-fields textarea:focus {
	outline: 0;
	border-color: var(--mci-q-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}


/* -------------------------------------------------------------------------
   Boton de enviar

   El plugin le inyecta un <style> en linea con sus colores y `!important`
   (opciones afrfq_submit_button_bg_color / _fg_color). Por eso el color no se
   toca aqui: se respeta el configurado y solo se ajusta la forma.
   ------------------------------------------------------------------------- */

.mci-quote-page .addify_checkout_place_quote {
	display: block;
	width: 100%;
	min-height: 54px;
	margin-top: 22px;
	padding: 16px 24px;
	border: 0;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
}


/* -------------------------------------------------------------------------
   Aviso superior y estado vacio
   ------------------------------------------------------------------------- */

.mci-quote-page .addify .cart-empty {
	padding: 22px;
	border: 1px solid var(--mci-q-brd);
	border-radius: var(--mci-q-radius);
	background-color: var(--mci-q-bg-soft);
	text-align: center;
}

@media (max-width: 899px) {

	.mci-quote-page .cart-collaterals .cart_totals,
	.mci-quote-page .af_quote_fields {
		margin-top: 22px;
	}

	.mci-quote-page .af_quote_fields .addify-option-field {
		flex: 1 1 100%;
	}
}


/* =========================================================================
   Ajustes sobre el render real
   ========================================================================= */

/* El formulario debe ocupar todo el ancho del contenedor. */
.mci-quote-page form.addify-quote-form {
	width: 100%;
	max-width: 100%;
	float: none;
}

/* WooCommerce flota `.cart-collaterals` a la derecha con ~48% de ancho. Eso
   competia con la colocacion en el grid. Se anula explicitamente. */
.mci-quote-page form.addify-quote-form > .cart-collaterals {
	width: 100%;
	max-width: 100%;
	float: none;
	clear: none;
}

.mci-quote-page form.addify-quote-form > .af_quote_fields {
	width: 100%;
	max-width: 100%;
	float: none;
}

/* Miniatura del producto: el tema/plugin le dejan atributos width/height
   propios que la encogian. */
.mci-quote-page table.shop_table td.product-thumbnail {
	width: 90px;
}

.mci-quote-page table.shop_table td.product-thumbnail img {
	display: block;
	width: 70px !important;
	height: auto !important;
	max-width: none;
	border: 1px solid var(--mci-q-brd);
	border-radius: 10px;
	object-fit: cover;
}

/* Control de cantidad en horizontal (venia apilado en vertical). */
.mci-quote-page table.shop_table td.product-quantity {
	width: 150px;
}

.mci-quote-page table.shop_table td.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--mci-q-brd-strong);
	border-radius: 10px;
	overflow: hidden;
	background-color: #fff;
}

.mci-quote-page table.shop_table td.product-quantity .quantity > * {
	float: none;
	margin: 0;
}

.mci-quote-page table.shop_table td.product-quantity input.qty {
	width: 48px;
	min-height: 40px;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
	font-size: 15px;
}

.mci-quote-page table.shop_table td.product-quantity .quantity a,
.mci-quote-page table.shop_table td.product-quantity .quantity button,
.mci-quote-page table.shop_table td.product-quantity .quantity span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-height: 40px;
	border: 0;
	background: none;
	color: var(--mci-q-muted);
	line-height: 1;
}

/* Anchos de columna mas parejos. */
.mci-quote-page table.shop_table th.product-remove,
.mci-quote-page table.shop_table td.product-remove {
	width: 44px;
	text-align: center;
}

.mci-quote-page table.shop_table td.product-name {
	line-height: 1.45;
}

/* Encabezado de la tarjeta de productos.

   Antes iba como ::before del <thead> y se partia en dos lineas: dentro de una
   tabla, ese pseudo-elemento queda confinado al ancho de la primera columna.

   Ahora es el ::before del FORMULARIO, que en flujo de bloque ocupa todo el
   ancho. Para que siga leyendose como una sola tarjeta, el titulo cierra por
   abajo y la tabla abre por arriba: bordes unidos y radios complementarios.

   Contrapartida: el texto vive en el CSS y no pasa por traducciones. Es la
   unica via — entre el formulario y la tabla el plugin no expone ningun hook. */
.mci-quote-page form.addify-quote-form::before {
	content: "Productos cotizados";
	display: block;
	padding: 22px 22px 16px;
	border: 1px solid var(--mci-q-brd);
	border-bottom: 0;
	border-radius: var(--mci-q-radius) var(--mci-q-radius) 0 0;
	background-color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--color-gray-900, #222);
}

/* La tabla se pega al titulo: sin borde superior y sin radios arriba. */
.mci-quote-page form.addify-quote-form > table.shop_table {
	border-top: 0;
	border-radius: 0 0 var(--mci-q-radius) var(--mci-q-radius);
}

/* La fila de acciones, sin fondo gris y con el boton alineado a la izquierda. */
.mci-quote-page table.shop_table td.actions {
	background-color: transparent;
	border-top: 1px solid var(--mci-q-brd);
}


/* =========================================================================
   Limpieza de bordes heredados y boton de actualizar
   ========================================================================= */

/* La tabla de datos arrastraba bordes del tema en <table>, <tr> y <td>: de ahi
   la linea sobre cada campo. Se resetea todo el bloque y despues se vuelven a
   dibujar SOLO los bordes de los inputs. */
.mci-quote-page table.quote-fields,
.mci-quote-page table.quote-fields tr,
.mci-quote-page table.quote-fields td,
.mci-quote-page table.quote-fields th,
.mci-quote-page table.quote-fields tbody {
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
}

/* La raya roja a la izquierda de Nombre y Apellidos venia del estilo de campo
   obligatorio (`:invalid` mientras esta vacio). El asterisco de la etiqueta ya
   comunica que es obligatorio; el borde rojo permanente solo ensucia. */
.mci-quote-page .quote-fields input,
.mci-quote-page .quote-fields textarea,
.mci-quote-page .quote-fields input:invalid,
.mci-quote-page .quote-fields textarea:invalid,
.mci-quote-page .quote-fields input:required,
.mci-quote-page .quote-fields textarea:required {
	border: 1px solid var(--mci-q-brd-strong) !important;
	border-inline-start: 1px solid var(--mci-q-brd-strong) !important;
	box-shadow: none !important;
}

.mci-quote-page .quote-fields input:focus,
.mci-quote-page .quote-fields textarea:focus {
	border-color: var(--mci-q-accent) !important;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) !important;
}

/* El boton "Actualizar cotizacion" se oculta: quote.js lo dispara solo al
   cambiar la cantidad. Se OCULTA, no se elimina — toda la logica de guardado
   sigue siendo la del plugin, que se apoya en ese boton. */
.mci-quote-page #afrfq_update_quote_btn,
.mci-quote-page table.shop_table td.actions {
	display: none;
}


/* Separacion entre los tres bloques (productos, resumen y datos).
   Con !important porque el margen de <table> lo pisaban reglas del tema. */
.mci-quote-page form.addify-quote-form > table.shop_table {
	margin-bottom: 30px !important;
}

.mci-quote-page form.addify-quote-form > .cart-collaterals,
.mci-quote-page form.addify-quote-form > .af_quote_fields {
	margin-bottom: 30px !important;
}


/* =========================================================================
   Titulos de tarjeta, todos iguales

   "Resumen de cotización" es un <h2> real y hereda la fuente de titulos del
   tema (--wd-title-font: Poppins, peso 600). "Productos cotizados" y "Tus
   datos" son pseudo-elementos y heredaban la fuente de texto (Lato 400), de
   ahi que se vieran distintos.

   Se igualan familia, tamano, peso y color, y se les agrega icono para que los
   tres se lean como el mismo tipo de encabezado.
   ========================================================================= */

.mci-quote-page form.addify-quote-form::before,
.mci-quote-page .af_quote_fields::before,
.mci-quote-page .cart-collaterals .cart_totals > h2 {
	font-family: var(--wd-title-font, "Poppins", Arial, Helvetica, sans-serif);
	font-size: 20px;
	font-weight: var(--wd-title-font-weight, 600);
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-gray-900, #222);
}

/* Icono de bolsa para "Productos cotizados". Va como fondo y no como elemento
   aparte, porque el titulo ya ocupa el `content` del pseudo-elemento. */
.mci-quote-page form.addify-quote-form::before {
	padding: 22px 22px 16px 60px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 22px 21px;
	background-size: 26px 26px;
}

/* Icono de persona para "Tus datos". */
.mci-quote-page .af_quote_fields::before {
	padding-inline-start: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M4.5 20c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1px;
	background-size: 26px 26px;
	min-height: 26px;
}