/* ===========================================================================
   Cotizador de envios publico (public/tmland-carga/cotizador_envios.xhtml)
   ---------------------------------------------------------------------------
   Lenguaje visual tomado del proyecto de venta de tiquetes (TM_Solutions/Tiquetes,
   src/utils/styles/colors.js y los *Styled.js de QuoteForm / TrackingForm /
   GuideTraceability), para que el cliente final vea la misma marca en los dos
   sitios.

   ⛔ ESPECIFICIDAD: en /public/sinlayout.xhtml el tema (custom_rain1.css) se carga
   al FINAL del <body>, o sea DESPUES de todo lo que va en el <head>. A igualdad de
   especificidad gana el tema. Por eso cada regla se ancla en .tm-cotizador, que
   suma una clase y nos deja por encima sin tener que recurrir a !important.
   =========================================================================== */

.tm-cotizador {
	--tm-primario: #2128bd;
	--tm-secundario: #0080fc;
	--tm-naranja: #f97203;
	--tm-texto: #505152;
	--tm-titulo: #2d2d2e;
	--tm-fondo: #f5f5f5;
	--tm-borde: #eeeee4;

	font-family: 'Open Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--tm-texto);
	background: var(--tm-fondo);
	min-height: 100vh;
	padding: 1.25rem 1rem 3rem;
}

/* El contenido se iba a todo lo ancho de la pantalla y en un monitor grande
   quedaban campos de 600px para escribir una ciudad. */
#wrapper.tm-cotizador .ui-tabs {
	max-width: 1100px;
	margin: 0 auto;
	border: 0;
	background: transparent;
}

/* ⛔ Las reglas de PESTANAS llevan #wrapper (un id) a proposito. El tema de
   PrimeFaces (rain-layout) se carga al FINAL del <body>, despues de esta hoja, asi
   que cualquier empate de especificidad lo gana el. Con .tm-cotizador a secas las
   pestanas se quedaban con el aspecto del tema: subrayado ceñido al texto y sin el
   relleno de aqui. El id esta en la propia pagina: <div id="wrapper" class="tm-cotizador">.
   ⛔ NO rebajar a .tm-cotizador: vuelve a perder. */

/* ── Pestañas ────────────────────────────────────────────────────────────── */

#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--tm-borde);
	border-radius: 0;
	/* Un poco de sangria para que el nombre de la primera pestana no quede pegado al
	   borde y la tira se alinee con las tarjetas de abajo. */
	padding: 0 0 0 .5rem;
	margin-bottom: 1.5rem;
}

/* ⛔ El indicador de la pestana activa va en el <li>, NUNCA en el <a>: el enlace
   mide lo que el texto, asi que un border-bottom ahi se ve como un subrayado de las
   letras, no como una pestana. */
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li {
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 8px 8px 0 0;
	margin: 0 .15rem 0 0;
	transition: background-color .15s ease, border-color .15s ease;
}

#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li > a,
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li > a:hover,
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li > a:focus,
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li > a:active {
	display: block;
	color: var(--tm-texto);
	font-weight: 600;
	font-size: .9rem;
	padding: .85rem 1.3rem;
	border: 0;
	text-decoration: none;
	transition: color .15s ease;
}

/* ⛔ La geometria de la pestana NO cambia entre estados: el tema base de PrimeFaces
   anade un borde con `ui-state-hover` y la caja crecia al pasar el raton. Se fija el
   mismo borde y el mismo padding en reposo, hover y activa; lo unico que cambia es el
   color. */
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li,
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li.ui-state-hover,
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li.ui-state-active,
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li:hover {
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	padding: 0;
}

#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li:not(.ui-state-active):hover {
	background: rgba(33, 40, 189, .04);
}

#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li:not(.ui-state-active):hover > a {
	color: var(--tm-primario);
}

#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li.ui-state-active {
	background: #fff;
	border-bottom-color: var(--tm-primario);
}

#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li.ui-state-active > a {
	color: var(--tm-primario);
}

/* El rectangulo azul ceñido al texto de la pestana activa es el anillo de foco que
   deja el navegador tras el clic. Se quita para el raton pero se conserva para quien
   navega con teclado (:focus-visible), que es quien lo necesita. */
#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li > a:focus:not(:focus-visible) {
	outline: 0;
	box-shadow: none;
}

#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li > a:focus-visible {
	outline: 2px solid var(--tm-secundario);
	outline-offset: -3px;
	border-radius: 8px 8px 0 0;
}

#wrapper.tm-cotizador .ui-tabs .ui-tabs-panels {
	background: transparent;
	border: 0;
	padding: 0;
}

/* ── Tarjetas de seccion ─────────────────────────────────────────────────── */

/* ⛔ ESPECIFICIDAD, leccion aprendida a golpes: el tema define
   `.card { padding: 1.25rem }`, `.card .ui-panel-content > h5 { margin: -1.25rem ... }`
   (una barra gris que se sale del padding) y
   `.card .ui-panel > .ui-panel-content { padding: 0 !important }`.
   Cada regla de abajo esta escrita para GANARLE a su equivalente del tema: por eso
   repiten la cadena completa y anaden .tm-cotizador delante. Rebajarlas a un selector
   mas corto las deja empatadas, y el tema carga despues: perderian. */

/* ⛔⛔ LA REGLA MAS IMPORTANTE DE ESTE ARCHIVO.
   El tema trata TODA .card de una pagina sin layout como si fuera un dialogo a
   pantalla completa (custom_rain1.css:34):

       body:not(:has(.layout-wrapper)) .card {
           margin: 0 !important; border-radius: 0 !important;
           box-shadow: none !important; padding: 0 !important;
           min-height: 100vh; display: flex;
       }

   Sirve para una pagina de UNA tarjeta (un login). El cotizador tiene SEIS, asi que
   cada seccion reclamaba la pantalla entera y habia que hacer scroll entre una y otra.
   Ese selector es (0,2,1); por eso aqui se usa `body:not(...)` tambien, para igualarlo
   y ganarle por el .tm-cotizador de mas. Sin esta cabecera la pagina vuelve a salir
   en seis pantallas. */
body:not(:has(.layout-wrapper)) .tm-cotizador .card {
	min-height: 0;
	display: block;
	margin: 0 0 1.5rem !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(45, 45, 46, .04), 0 6px 20px rgba(45, 45, 46, .07) !important;
	padding: 0 !important;
}

/* El tema tambien aplasta a cero el padding del contenido y quita los margenes del
   grid; se reponen aqui con la misma especificidad. */
body:not(:has(.layout-wrapper)) .tm-cotizador .card > .ui-panel > .ui-panel-content,
body:not(:has(.layout-wrapper)) .tm-cotizador .card .ui-panel > .ui-panel-content {
	padding: 2rem 2rem 1.25rem !important;
}

body:not(:has(.layout-wrapper)) .tm-cotizador .p-formgrid.p-grid {
	margin: 0 -.7rem !important;
	padding: 0 !important;
	gap: 0;
}

body:not(:has(.layout-wrapper)) .tm-cotizador .p-formgrid.p-grid > .p-field,
body:not(:has(.layout-wrapper)) .tm-cotizador .p-formgrid.p-grid > [class*="p-field"],
body:not(:has(.layout-wrapper)) .tm-cotizador .p-field {
	padding-left: .7rem !important;
	padding-right: .7rem !important;
}

.tm-cotizador .card {
	background: #fff;
	border: 1px solid var(--tm-borde);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(45, 45, 46, .04), 0 6px 20px rgba(45, 45, 46, .07);
	margin-bottom: 1.5rem;
	padding: 0;
	overflow: hidden;
}

.tm-cotizador .card .ui-panel,
.tm-cotizador .card > .ui-panel {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Lleva !important porque el tema tambien lo lleva; gana por especificidad. */
.tm-cotizador .card .ui-panel > .ui-panel-content,
.tm-cotizador .card > .ui-panel > .ui-panel-content {
	padding: 2rem 2rem 1.25rem !important;
	background: transparent !important;
	border: 0 !important;
}

/* Titulo de seccion: sin la barra gris del tema. Texto oscuro, un acento azul a la
   izquierda y una linea fina debajo. */
.tm-cotizador .card .ui-panel-content > h5,
.tm-cotizador .card .ui-panel-content > h4,
.tm-cotizador .card > h5,
.tm-cotizador .card > h4 {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: transparent;
	color: var(--tm-titulo);
	font-size: 1rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 2rem;
	padding: 0 0 1rem;
	border: 0;
	border-bottom: 1px solid var(--tm-borde);
	border-radius: 0;
}

/* (Se quito el acento vertical azul del titulo: recargaba sin aportar.) */

/* ── Ritmo vertical ──────────────────────────────────────────────────────── */

/* Sin esto los campos quedan pegados unos a otros y la tarjeta se lee como un bloque. */
/* ⛔ Sin '>' a proposito: varios campos van dentro de un p:outputPanel con
   display:contents. El envoltorio desaparece visualmente pero SIGUE en el DOM, asi
   que un selector de hijo directo no los alcanza y quedaban pegados al de al lado. */
.tm-cotizador .p-field {
	margin-bottom: 1.5rem;
	padding-left: .7rem;
	padding-right: .7rem;
}

.tm-cotizador .p-formgrid.p-grid {
	margin-left: -.7rem;
	margin-right: -.7rem;
	row-gap: .25rem;
}

/* ── Campos ──────────────────────────────────────────────────────────────── */

.tm-cotizador .p-field > label,
.tm-cotizador .p-field > .ui-outputlabel,
.tm-cotizador .p-field > span > .ui-outputlabel {
	display: block;
	color: var(--tm-titulo);
	font-size: .8rem;
	font-weight: 600;
	margin-bottom: .4rem;
}

/* ⛔ Lleva !important porque el tema lo lleva: `.ui-inputtext { border-radius: 5px
   !important; padding: 7px 10px !important }`. Sin esto el <select> nativo salia con
   10px de radio y los inputs de PrimeFaces con 5px, y se notaba la diferencia. */
.tm-cotizador .ui-inputfield,
.tm-cotizador .ui-inputtext,
.tm-cotizador .ui-inputtextarea,
.tm-cotizador .ui-selectonemenu,
.tm-cotizador .ui-autocomplete-input {
	width: 100%;
	min-height: 46px !important;
	padding: .65rem .9rem !important;
	border: 1px solid var(--tm-borde) !important;
	border-radius: 10px !important;
	background: #fff;
	color: var(--tm-texto) !important;
	font-family: inherit;
	font-size: .9rem !important;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tm-cotizador .ui-inputfield:hover,
.tm-cotizador .ui-selectonemenu:hover {
	border-color: #d9d9cf;
}

.tm-cotizador .ui-inputfield:focus,
.tm-cotizador .ui-inputtext:focus,
.tm-cotizador .ui-inputfield.ui-state-focus,
.tm-cotizador .ui-selectonemenu.ui-state-focus {
	border-color: var(--tm-secundario) !important;
	box-shadow: 0 0 0 3px rgba(0, 128, 252, .15) !important;
	outline: 0 !important;
}

.tm-cotizador .ui-inputfield::placeholder {
	color: #a8a8a8;
}

/* El selectOneMenu y el autocomplete montan su propia caja; se alinean a mano
   para que no queden de distinta altura que los inputs de al lado. */
.tm-cotizador .ui-selectonemenu {
	display: flex;
	align-items: center;
}

/* ⛔ PrimeFaces le pone la clase `ui-inputfield` a la ETIQUETA INTERNA del
   selectOneMenu, la misma que yo estilizo con borde y radio: salia una caja dentro de
   otra, y el triangulo en su propio recuadro gris. La etiqueta y el disparador tienen
   que quedar planos; la caja la pone el contenedor. Lleva !important porque mi propia
   regla de .ui-inputfield tambien lo lleva. */
.tm-cotizador .ui-selectonemenu .ui-selectonemenu-label,
.tm-cotizador .ui-selectonemenu label.ui-inputfield {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: .9rem !important;
	line-height: 1.4;
	width: auto !important;
}

.tm-cotizador .ui-selectonemenu .ui-selectonemenu-trigger {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--tm-texto);
	width: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tm-cotizador .ui-selectonemenu {
	justify-content: space-between;
}

.tm-cotizador .ui-autocomplete {
	width: 100%;
}

/* ── Tipo de busqueda (rastreo) ──────────────────────────────────────────── */

/* <select> nativo, peinado igual que los inputs de PrimeFaces para que no cante. */
.tm-cotizador .tm-tipo-busqueda {
	width: 100%;
	min-height: 46px;
	padding: .65rem 2.4rem .65rem .9rem;
	border: 1px solid var(--tm-borde);
	border-radius: 10px;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23505152' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
	background-size: 16px;
	color: var(--tm-texto);
	font-family: inherit;
	font-size: .9rem;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tm-cotizador .tm-tipo-busqueda:focus {
	border-color: var(--tm-secundario);
	box-shadow: 0 0 0 3px rgba(0, 128, 252, .15);
	outline: 0;
}

.tm-cotizador .tm-campo-tipo > label {
	display: block;
	color: var(--tm-titulo);
	font-size: .8rem;
	font-weight: 600;
	margin-bottom: .4rem;
}

/* Solo se ve el campo del tipo elegido. Antes estaban los dos a la vez y habia que
   adivinar en cual escribir. El class de la raiz lo pone tmAplicarTipoBusqueda(). */
.tm-cotizador:not(.tm-busca-por-documento) .tm-campo-documento {
	display: none;
}

.tm-cotizador.tm-busca-por-documento .tm-campo-guia {
	display: none;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

/* .ui-fluid estira todo al 100%: en un monitor grande dejaba un boton de 1100px. */
/* Mismo radio y alto que los campos: el tema deja los botones con 5px y al lado de un
   input de 10px se nota. Lleva !important porque el tema tambien lo lleva. */
.tm-cotizador .ui-fluid .ui-button,
.tm-cotizador .ui-button {
	width: auto;
	/* NO subir este min-width. El composite tmsolutions/saveAndDeleteButtons.xhtml mete
	   cada boton en su propia columna p-col-12 p-md-3 p-lg-2 (~172px utiles): con 170px
	   el boton mas su margen desbordaban la columna y Guardar/Cancelar se tocaban. El
	   ancho se consigue con el padding de abajo, que si se adapta. */
	min-width: 120px;
	min-height: 46px !important;
	/* PrimeFaces maqueta icono+texto con el icono en position:absolute pegado al borde
	   izquierdo y el texto centrado aparte, asi que en un boton ancho quedaban separados
	   por medio boton. Con flex van juntos y centrados. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border-radius: 10px !important;
	padding: .6rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	background: var(--tm-naranja);
	color: #fff;
	box-shadow: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Contrapartida de la maqueta flex: el icono deja de estar absoluto y el texto pierde
   el hueco de 2.1em que PrimeFaces le reservaba al icono. */
.tm-cotizador .ui-button > .ui-button-icon-left,
.tm-cotizador .ui-button > .ui-button-icon-right {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;
}

.tm-cotizador .ui-button > .ui-button-text {
	padding: 0 !important;
	line-height: 1.2;
}

/* Hover invertido: es el gesto de Tiquetes (Button/ButtonStyled.js). */
.tm-cotizador .ui-button:enabled:hover {
	background: #fff;
	color: var(--tm-naranja);
	border-color: var(--tm-naranja);
}

.tm-cotizador .ui-button:enabled:focus {
	box-shadow: 0 0 0 3px rgba(249, 114, 3, .25);
}

.tm-cotizador .ui-button.ui-button-secondary {
	background: var(--tm-texto);
	color: #fff;
}

.tm-cotizador .ui-button.ui-button-secondary:enabled:hover {
	background: #fff;
	color: var(--tm-texto);
	border-color: var(--tm-texto);
}

/* Un boton que es lo primero de su columna (sin etiqueta encima) se alineaba con las
   ETIQUETAS de los campos vecinos, no con los campos. En vez de bajarlo una cantidad
   fija -que depende del alto real de la etiqueta y nunca cuadra-, la columna se vuelve
   flex y el boton se pega ABAJO: asi queda a la misma linea que el input de al lado
   sea cual sea el tamano del texto. Es el caso de "Nuevo Cliente" en Solicitud de
   recogida. */
#wrapper.tm-cotizador .p-field:has(> .ui-button:first-child) {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#wrapper.tm-cotizador .p-field > .ui-button:not(.ui-button-icon-only):first-child {
	margin-top: 0;
	flex: none;
	/* Misma CAJA que un input: mismo ancho (ocupa su columna, como el input de al lado)
	   y mismo alto exacto que el `min-height: 46px` de .ui-inputtext.
	   ⛔ El alto y el padding llevan !important a proposito: el tema pisa los botones
	   redondeados con `padding: 6px 12px !important` en custom_rain1.css:178, y esa
	   regla SI aplica aqui porque la plantilla sinlayout no tiene .layout-wrapper. */
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	height: 46px !important;
	min-height: 46px !important;
	padding: 0 1rem !important;
}

/* El boton de buscar por icono: cuadrado, no una pastilla estirada. */
.tm-cotizador .ui-button.ui-button-icon-only {
	width: 44px;
	min-width: 44px;
	padding: 0;
}

/* Hay tarjetas que NO llevan p:panel dentro (la barra de Guardar/Cancelar de
   Solicitud de recogida la pinta un composite). Como el relleno se lo doy al
   .ui-panel-content, esas quedaban con los botones pegados al borde. */
body:not(:has(.layout-wrapper)) .tm-cotizador .card:not(:has(> .ui-panel)) {
	padding: 1.25rem 2rem !important;
}

/* ── Tarjeta del buscador ────────────────────────────────────────────────── */

/* Sin titulo: se entiende sola. Los campos van mas separados entre si -antes el
   selector de tipo y el campo quedaban pegados- y el conjunto no pasa de 760px para
   que en un monitor grande no queden campos kilometricos. */
.tm-cotizador .tm-card-busqueda .ui-panel-content {
	padding: 1.75rem 2rem !important;
}

.tm-cotizador .tm-card-busqueda .p-field {
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 0;
}

.tm-cotizador .tm-card-busqueda .p-formgrid.p-grid {
	margin-left: -1rem;
	margin-right: -1rem;
	align-items: flex-end;
}

/* ── Dato de solo lectura (fecha, origen-destino) ────────────────────────── */

/* No son campos editables: etiqueta pequena arriba y el valor debajo, con peso.
   Antes se pintaban con el mismo aspecto que un input y costaba distinguirlos. */
.tm-cotizador .tm-dato .tm-dato-etiqueta {
	display: block;
	color: #7a7a7b;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .25rem;
}

.tm-cotizador .tm-dato .tm-dato-valor {
	display: block;
	color: var(--tm-titulo);
	font-size: 1rem;
	font-weight: 600;
}

/* ── Enlace al cumplido ──────────────────────────────────────────────────── */

/* Se alinea con los datos de al lado: la etiqueta de arriba ocupa su sitio, asi que
   el enlace se baja para quedar a la altura de los valores. */
.tm-cotizador .tm-enlace-cumplido {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.1rem;
	padding: .5rem .9rem;
	border: 1px solid var(--tm-borde);
	border-radius: 10px;
	background: #fff;
	color: var(--tm-primario);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.tm-cotizador .tm-enlace-cumplido:hover {
	background: rgba(33, 40, 189, .05);
	border-color: var(--tm-primario);
	text-decoration: none;
}

.tm-cotizador .tm-enlace-cumplido i {
	font-size: 1rem;
}

/* Dato sin valor (p. ej. "CONTACTO" cuando la sede no tiene contacto): se oculta
   entero en vez de dejar la etiqueta sola, que parece un fallo. */
.tm-cotizador .tm-dato:has(.tm-dato-valor:empty) {
	display: none;
}

/* ── Sin resultados ──────────────────────────────────────────────────────── */

/* El aviso vive dentro de un .p-field, que va con margenes negativos del grid: sin
   este margen propio el recuadro se sale por la izquierda de la tarjeta y el icono
   queda medio fuera. */
.tm-cotizador .tm-sin-resultados {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 1.5rem .7rem 1.25rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid #ffe2c2;
	border-left: 4px solid var(--tm-naranja);
	border-radius: 10px;
	background: #fff8f1;
	color: #8a4b05;
	font-size: .9rem;
}

/* ⛔ La clase tm-sin-resultados va EN el propio .p-field, no en un hijo. Como mis
   reglas de .p-field (y las del tema) fijan el padding con !important, aqui hace falta
   un selector mas especifico o el aviso sale pegado arriba y abajo. */
body:not(:has(.layout-wrapper)) .tm-cotizador .p-field.tm-sin-resultados {
	/* display/align tambien con !important: si el flex no gana, el icono se va arriba
	   del todo en vez de quedar centrado con el texto. */
	display: flex !important;
	align-items: center !important;
	margin: .9rem .7rem .4rem !important;
	padding: .85rem 1.1rem !important;
}

.tm-cotizador .tm-sin-resultados i {
	font-size: 1.15rem;
	color: var(--tm-naranja);
	flex: none;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

.tm-cotizador .ui-datatable {
	border: 1px solid var(--tm-borde);
	border-radius: 10px;
	overflow: hidden;
}

.tm-cotizador .ui-datatable table {
	border-collapse: collapse;
	width: 100%;
}

.tm-cotizador .ui-datatable thead th {
	background: #fafaf8;
	color: var(--tm-titulo);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .8rem .85rem;
	border: 0;
	border-bottom: 1px solid var(--tm-borde);
}

.tm-cotizador .ui-datatable tbody td {
	padding: .75rem .85rem;
	border: 0;
	border-bottom: 1px solid #f4f4ef;
	font-size: .88rem;
	color: var(--tm-texto);
}

.tm-cotizador .ui-datatable tbody tr:last-child td {
	border-bottom: 0;
}

.tm-cotizador .ui-datatable tbody tr.ui-state-highlight,
.tm-cotizador .ui-datatable tbody tr:hover {
	background: rgba(0, 128, 252, .06);
}

.tm-cotizador .ui-datatable tfoot td {
	background: #fafaf8;
	font-weight: 700;
	color: var(--tm-titulo);
	border-top: 1px solid var(--tm-borde);
}

/* ── Elementos conservados pero ocultos ──────────────────────────────────── */

/* Nada se borra del marcado: lo que se reemplaza se oculta con esta clase, para
   poder volver atras quitandola. Hoy la lleva el boton "N Guias" que abria el modal,
   sustituido por la tabla de guias en la propia pagina. */
.tm-cotizador .tm-oculto {
	display: none !important;
}

/* ── Tabla de guias encontradas ──────────────────────────────────────────── */

/* La columna de elegir: estrecha y centrada. */
.tm-cotizador .tm-tabla-guias .tm-col-elegir {
	width: 86px;
	text-align: center;
}

/* El boton de elegir imita un radio. PrimeFaces necesita estado en el bean para un
   radio de verdad (selectionMode="single"), y eso obligaria a tocar Java; esto usa el
   mismo listener que ya existia y se ve igual. */
.tm-cotizador .tm-tabla-guias .tm-radio.ui-button {
	/* Los !important son obligatorios aqui: la regla general de botones de este mismo
	   archivo lleva `min-height: 46px !important` (lo necesita porque el tema tambien
	   lo lleva), y una declaracion !important gana a cualquier selector por especifico
	   que sea. Sin esto el circulo se estiraba a 22x46 y salia un ovalo. */
	width: 22px !important;
	min-width: 22px !important;
	height: 22px !important;
	min-height: 22px !important;
	padding: 0 !important;
	border: 2px solid #c9c9c2;
	border-radius: 50%;
	background: #fff;
	color: transparent;
	box-shadow: none;
}

/* El boton es flex, asi que el span de texto que PrimeFaces siempre emite (lleva la
   cadena "ui-button" escondida con text-indent) pasaria a ser un item flexible y
   ensancharia el circulo. Fuera, junto con el icono. */
.tm-cotizador .tm-tabla-guias .tm-radio.ui-button .ui-icon,
.tm-cotizador .tm-tabla-guias .tm-radio.ui-button .ui-button-text,
.tm-cotizador .tm-tabla-guias .tm-radio.ui-button .ui-button-icon-left {
	display: none !important;
}

.tm-cotizador .tm-tabla-guias .tm-radio.ui-button:enabled:hover {
	border-color: var(--tm-primario);
	background: #fff;
	box-shadow: inset 0 0 0 4px var(--tm-primario);
}

/* La fila elegida se queda marcada: el circulo se rellena y la fila se tinta. No hace
   falta estado en el bean — rowStyleClass compara el numero de guia de la fila con el
   de la guia cargada, asi que al recargar el formulario la marca se mantiene sola. */
.tm-cotizador .tm-tabla-guias tbody tr.tm-fila-elegida {
	background: rgba(33, 40, 189, .08) !important;
}

.tm-cotizador .tm-tabla-guias tbody tr.tm-fila-elegida td {
	color: var(--tm-titulo);
}

.tm-cotizador .tm-tabla-guias tbody tr.tm-fila-elegida .tm-radio.ui-button {
	border-color: var(--tm-primario);
	box-shadow: inset 0 0 0 4px var(--tm-primario);
}

/* Fila entera resaltada al pasar: deja claro que se elige la fila, no el circulito. */
.tm-cotizador .tm-tabla-guias tbody tr:hover {
	background: rgba(33, 40, 189, .05);
	cursor: pointer;
}

/* Diez columnas no caben en el ancho de la tarjeta, y al apretarlas "DESTINATARIO" se
   partia en cuatro lineas y la fila crecia a lo alto. La tabla conserva un ancho minimo
   y es el contenedor el que scrollea en horizontal.
   ⛔ NO cambiar esto por scrollable="true" de PrimeFaces: ese reparte TODAS las columnas
   a partes iguales, que es justo lo que se quiere evitar (y es el problema conocido de
   las 852 tablas del resto de la aplicacion). */
.tm-cotizador .tm-tabla-guias .ui-datatable-tablewrapper {
	overflow-x: auto;
	scrollbar-width: thin;
}

.tm-cotizador .tm-tabla-guias .ui-datatable-tablewrapper > table {
	min-width: 1280px;
}

/* Los titulos se cortaban en seco ("FECHA DE ADMIS", "SEDE DESTINATARI") porque
   iban con nowrap dentro de una celda con overflow:hidden. La solucion es dejar que
   PARTAN EN VARIAS LINEAS, no abrir el overflow.
   ⛔ NO poner aqui `overflow: visible`. Se probo, y en pantalla estrecha el texto se
   sale de su celda y se pinta ENCIMA de la columna de al lado: se veia el remitente
   superpuesto con el destinatario. Recortar es feo; superponer es ilegible. */
.tm-cotizador .tm-tabla-guias thead th,
.tm-cotizador .tm-tabla-guias tbody td {
	white-space: normal;
	/* Los nombres de sede vienen en una sola palabra larguisima
	   ("PRINCIPAL MANIZALES(MANIZALES KM 4 VIA PANAMERICANA ESTACION)") y sin esto
	   desbordan la celda por ancha que sea. */
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Los datos cortos no deben partirse nunca: un numero de guia cortado a media
   palabra no se puede ni leer ni copiar. */
.tm-cotizador .tm-tabla-guias tbody td:nth-child(-n+6) {
	white-space: nowrap;
}

/* Un ancho minimo por columna, para que el reparto automatico no estruje ninguna.
   1=elegir 2=numero 3=fecha 4=total 5=origen 6=destino
   7=remitente 8=destinatario 9=sede rem. 10=sede dest. */
.tm-cotizador .tm-tabla-guias th:nth-child(2),
.tm-cotizador .tm-tabla-guias td:nth-child(2) {
	min-width: 130px;
}

.tm-cotizador .tm-tabla-guias th:nth-child(3),
.tm-cotizador .tm-tabla-guias td:nth-child(3) {
	min-width: 115px;
}

.tm-cotizador .tm-tabla-guias th:nth-child(4),
.tm-cotizador .tm-tabla-guias td:nth-child(4) {
	min-width: 90px;
}

.tm-cotizador .tm-tabla-guias th:nth-child(n+7),
.tm-cotizador .tm-tabla-guias td:nth-child(n+7) {
	min-width: 160px;
}

/* La cabecera de la columna de elegir ya no esta vacia: cabe en dos lineas. */
.tm-cotizador .tm-tabla-guias th.tm-col-elegir {
	min-width: 86px;
	white-space: normal;
	line-height: 1.2;
}

/* En pantalla estrecha se aprieta todo: 1280px de ancho minimo obligan a un scroll
   larguisimo para llegar a las ultimas columnas. Se recorta a lo justo y se baja el
   tamano de letra, que es lo que hace el portal de tiquetes en movil. */
@media (max-width: 768px) {
	.tm-cotizador .tm-tabla-guias .ui-datatable-tablewrapper > table {
		min-width: 860px;
	}

	.tm-cotizador .tm-tabla-guias thead th,
	.tm-cotizador .tm-tabla-guias tbody td {
		padding: .55rem .5rem;
		font-size: .82rem;
	}

	.tm-cotizador .tm-tabla-guias th:nth-child(2),
	.tm-cotizador .tm-tabla-guias td:nth-child(2) {
		min-width: 110px;
	}

	.tm-cotizador .tm-tabla-guias th:nth-child(n+7),
	.tm-cotizador .tm-tabla-guias td:nth-child(n+7) {
		min-width: 120px;
	}
}

/* Las ciudades son el dato que mas se mira al elegir. */
.tm-cotizador .tm-tabla-guias tbody td:nth-child(5),
.tm-cotizador .tm-tabla-guias tbody td:nth-child(6) {
	color: var(--tm-titulo);
	font-weight: 600;
}

/* Si no caben las columnas, que se desplace en vez de aplastar el texto. */
.tm-cotizador .tm-tabla-guias .ui-datatable-tablewrapper {
	overflow-x: auto;
}

/* ── Trazabilidad ────────────────────────────────────────────────────────── */

/* La tabla se convierte en LINEA DE TIEMPO, como en Tiquetes
   (GuideTraceabilityStyled.js: tarjeta con border-top 5px del color primario).
   Se hace solo con CSS: el marcado sigue siendo un p:dataTable, asi que no se toca
   la vista ni se pierde ninguna columna. Las cabeceras se ocultan porque cada celda
   ya se entiende por su sitio: fecha arriba, estado en grande, sede debajo.

   Es de UNA columna y no alternando izquierda/derecha como Tiquetes: con 5 datos por
   hito, alternar obliga a partir el texto y en movil queda ilegible. */

.tm-cotizador .ui-datatable.tm-trazabilidad {
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.tm-cotizador .ui-datatable.tm-trazabilidad .ui-datatable-tablewrapper {
	overflow: visible;
}

.tm-cotizador .ui-datatable.tm-trazabilidad thead {
	display: none;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table,
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody,
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr,
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td {
	display: block;
	width: auto;
}

/* La linea vertical que une los hitos. */
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody {
	position: relative;
	/* 3rem = 48px: 30px del circulo del icono + 18px de aire hasta la tarjeta. */
	padding-left: 3rem;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody::before {
	content: '';
	position: absolute;
	/* 14px: deja la linea centrada bajo el circulo de 30px, que va de 0 a 30. */
	left: 14px;
	top: .6rem;
	bottom: .6rem;
	width: 2px;
	background: var(--tm-borde);
}

/* Cada fila es un hito: tarjeta con el canto superior azul. */
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr {
	position: relative;
	margin-bottom: 1rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--tm-borde);
	border-top: 5px solid var(--tm-primario);
	border-radius: 10px;
	background: #fff;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr:hover {
	background: #fff;
	box-shadow: 0 2px 10px rgba(45, 45, 46, .08);
}

/* El punto sobre la linea. Solo para una fila SIN icono: cuando lo hay, el marcador
   es el propio icono (ver mas abajo), que dice de que hito se trata en vez de repetir
   el mismo circulo azul en todos. El :has() es la red de seguridad por si algun dia
   una fila se queda sin el. */
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr:not(:has(.tm-hito-icono))::before {
	content: '';
	position: absolute;
	left: -2.1rem;
	top: 1.1rem;
	width: 13px;
	height: 13px;
	border: 3px solid var(--tm-primario);
	border-radius: 50%;
	background: #fff;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td {
	border: 0;
	padding: 0;
	/* La tabla le habia fijado un ancho a cada columna; al pasar las celdas a bloque
	   ese ancho sigue y recortaba la fecha ("2024/C" en vez de "2024/03/21 10:06"). */
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	white-space: normal;
	overflow: visible;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:empty {
	display: none;
}

/* 1 fecha · 2 detalle · 3 sede · 4 estado del ticket · 5 foto */
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(1) {
	color: #7a7a7b;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .03em;
	margin-bottom: .3rem;
	white-space: nowrap;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(1) label,
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(1) .ui-outputlabel {
	white-space: nowrap;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(2) {
	color: var(--tm-titulo);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: .2rem;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(3),
.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(4) {
	color: var(--tm-texto);
	font-size: .85rem;
}

.tm-cotizador .ui-datatable.tm-trazabilidad > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(5) {
	margin-top: .5rem;
}

.tm-cotizador .ui-datatable.tm-trazabilidad a,
.tm-cotizador .ui-datatable.tm-trazabilidad .ui-link {
	color: var(--tm-primario);
	text-decoration: none;
	font-weight: 600;
}

.tm-cotizador .ui-datatable.tm-trazabilidad a:hover {
	text-decoration: underline;
}

/* ── Paginador ───────────────────────────────────────────────────────────── */

.tm-cotizador .ui-paginator {
	background: transparent;
	border: 0;
	padding: .75rem 0 0;
}

.tm-cotizador .ui-paginator .ui-paginator-page.ui-state-active {
	background: var(--tm-primario);
	color: #fff;
	border-radius: 8px;
}

/* ── Movil ───────────────────────────────────────────────────────────────── */

@media screen and (max-width: 640px) {
	.tm-cotizador {
		padding: .75rem .5rem 2rem;
	}

	.tm-cotizador .card .ui-panel-content {
		padding: 1rem;
	}

	#wrapper.tm-cotizador .ui-tabs .ui-tabs-nav > li > a {
		padding: .75rem .6rem;
		font-size: .8rem;
	}

	/* La tabla no cabe: se deja desplazar en horizontal en vez de aplastar las
	   columnas hasta que el texto se parta letra a letra. */
	.tm-cotizador .ui-datatable {
		overflow-x: auto;
	}
}

/* ── Resultado de la cotizacion ──────────────────────────────────────────── */

/* Era una linea de texto de 12px, del mismo tamano que una etiqueta cualquiera,
   perdida en una tarjeta casi vacia: el dato que el usuario vino a buscar se leia
   como un pie de pagina, y cuando NO habia tarifa no se le decia nada —
   cargarTarifaConvenio deja el total en 0 y un WARN en el log, nada mas.
   ⛔ El color y el bold vivian en un `style=` EN LINEA con !important dentro del
   .xhtml, que gana a cualquier hoja de estilos; hubo que sacarlo de ahi. */

#wrapper.tm-cotizador .tm-cotizacion {
	margin: 0 0 1rem;
}

/* Hay tarifa. */
.tm-cotizador .tm-cotizacion-caja {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	border: 1px solid #a7e3c4;
	border-left: 5px solid #17a673;
	border-radius: 12px;
	background: #effaf4;
}

.tm-cotizador .tm-cotizacion-signo {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #17a673;
	color: #fff;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
}

.tm-cotizador .tm-cotizacion-texto {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

/* ⛔ Los !important de aqui abajo no son por capricho: el tema lleva
   `.p-field > .ui-outputlabel { font-size:.75rem !important; color:... !important }`
   (custom_rain1.css:423). Hoy no alcanza a estas etiquetas porque van envueltas en
   .tm-cotizacion-texto, pero basta con que alguien quite un div para que el numero
   vuelva a encogerse a 12px sin que nada avise. */
.tm-cotizador .tm-cotizacion-etiqueta {
	display: block;
	margin: 0 !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #0f7a55 !important;
	cursor: help;
}

.tm-cotizador .tm-cotizacion-valor {
	display: block;
	margin: 0 !important;
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	line-height: 1.15;
	color: #0b5c40 !important;
	/* Cifras de ancho fijo: sin esto el numero "salta" al recotizar. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* No hay tarifa. Oculto mientras el usuario no haya pulsado Cotizar: al abrir la
   pestana el total tambien es 0 y el aviso no vendria a cuento. La clase
   tm-ya-cotizo la pone el onclick del boton (ver el <script> del .xhtml). */
.tm-cotizador .tm-cotizacion-vacia {
	display: none;
}

#wrapper.tm-cotizador.tm-ya-cotizo .tm-cotizacion-vacia {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: 1rem 1.25rem;
	border: 1px solid #f3d28a;
	border-left: 5px solid #e0a106;
	border-radius: 12px;
	background: #fdf6e6;
	color: #7a5a06;
	font-size: .92rem;
	line-height: 1.45;
}

#wrapper.tm-cotizador.tm-ya-cotizo .tm-cotizacion-vacia .pi {
	flex: none;
	margin-top: .1rem;
	font-size: 1.15rem;
	color: #e0a106;
}

@media (max-width: 768px) {
	.tm-cotizador .tm-cotizacion-valor {
		font-size: 1.5rem !important;
	}

	.tm-cotizador .tm-cotizacion-signo {
		width: 42px;
		height: 42px;
		font-size: 1.5rem;
	}
}

/* ── Iconos de la trazabilidad ───────────────────────────────────────────── */

/* Antes cada hito era un punto azul identico: la columna "Detalle" se leia como una
   lista de texto y habia que leer cada linea para saber que habia pasado. Ahora el
   icono y su color dicen de un vistazo si fue bodega, transito, entrega, dinero o
   una anulacion. El tipo de novedad es un MAESTRO por tenant, asi que el icono se
   elige por el `codigo` -que si es estable, hay logica Java anclada a el- y los tipos
   propios de cada cliente, que no llevan codigo, caen en el circulo neutro. */
/* El icono NO va dentro del texto: se saca del flujo y se coloca sobre la linea de
   tiempo, en el sitio donde antes habia un circulito azul igual para todos los hitos.
   Asi el marcador dice QUE paso -bodega, transito, entrega, anulacion- en vez de
   repetir el mismo punto. Ancla con el <tr>, que ya es position:relative. */
.tm-cotizador .tm-trazabilidad .tm-hito-icono {
	position: absolute;
	left: -3rem;
	top: .8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #eef0f6;
	/* Tapa la linea vertical que pasa por detras. */
	box-shadow: 0 0 0 3px #fff;
}

.tm-cotizador .tm-trazabilidad .tm-hito-icono .pi {
	font-size: .95rem;
	line-height: 1;
	color: var(--tm-texto);
}

/* Un color por familia de hito. */
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-bodega    { color: #8a6d1f; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-transito  { color: var(--tm-primario); }
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-documento { color: #4a5568; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-entrega   { color: #0f7a55; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-dinero    { color: #0f7a55; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-anulado   { color: #bb1515; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-aviso     { color: #b4790a; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono .tm-hito-neutro    { color: #8b8d91; }

/* El fondo del circulo, a juego pero muy claro. */
.tm-cotizador .tm-trazabilidad .tm-hito-icono:has(.tm-hito-bodega)    { background: #fdf6e3; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono:has(.tm-hito-transito)  { background: #eceefb; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono:has(.tm-hito-entrega),
.tm-cotizador .tm-trazabilidad .tm-hito-icono:has(.tm-hito-dinero)    { background: #e8f6f0; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono:has(.tm-hito-anulado)   { background: #fdecec; }
.tm-cotizador .tm-trazabilidad .tm-hito-icono:has(.tm-hito-aviso)     { background: #fdf4e3; }

/* El texto del hito, al lado del icono y no debajo. */
.tm-cotizador .tm-trazabilidad .tm-col-detalle {
	white-space: normal;
}

.tm-cotizador .tm-trazabilidad .tm-col-detalle .ui-outputlabel {
	vertical-align: middle;
}

/* ── Boton de rastrear ───────────────────────────────────────────────────── */

/* Va en su propia columna, alineado abajo con los campos: no lleva etiqueta encima.
   El ancho y el alto de 46px se los da la regla general del boton suelto de una
   columna, asi que queda del mismo tamano que el campo de al lado. */
#wrapper.tm-cotizador .tm-campo-boton {
	flex-direction: column;
	justify-content: flex-end;
}

/* Solo se ve el boton del tipo de busqueda elegido. El par se repite aqui -y con
   !important- porque la regla generica de arriba
   (`.tm-cotizador:not(.tm-busca-por-documento) .tm-campo-documento`) la gana el
   selector `:has(> .ui-button...)` del boton suelto, que es mas especifico: sin esto
   se verian los DOS botones a la vez. */
#wrapper.tm-cotizador:not(.tm-busca-por-documento) .tm-campo-boton.tm-campo-documento,
#wrapper.tm-cotizador.tm-busca-por-documento .tm-campo-boton.tm-campo-guia {
	display: none !important;
}

#wrapper.tm-cotizador:not(.tm-busca-por-documento) .tm-campo-boton.tm-campo-guia,
#wrapper.tm-cotizador.tm-busca-por-documento .tm-campo-boton.tm-campo-documento {
	display: flex !important;
}

/* El boton que lleva a Solicitud de recogida, dentro de la caja verde: en linea con
   el precio y no debajo, para que se lea como "y ahora que hago con esto". */
.tm-cotizador .tm-cotizacion-caja {
	flex-wrap: wrap;
}

#wrapper.tm-cotizador .tm-boton-recogida {
	margin-left: auto;
	min-width: 190px;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 1.1rem !important;
	background: #17a673;
	border-color: #17a673;
}

#wrapper.tm-cotizador .tm-boton-recogida:enabled:hover {
	background: #fff;
	color: #17a673;
	border-color: #17a673;
}

@media (max-width: 768px) {
	#wrapper.tm-cotizador .tm-boton-recogida {
		margin-left: 0;
		width: 100%;
	}
}

/* ── Que el texto de las celdas parta, y no se corte ─────────────────────── */

/* El valor salia "mocho" ("Cristian Esne", "PRINCIPAL M") mientras el titulo de la
   misma columna si partia en dos lineas. La diferencia: el titulo es texto suelto,
   pero el valor lo pinta un p:outputLabel, y PrimeFaces le mete DENTRO un
   <span class="ui-outputlabel-label"> que trae lo suyo:
       .ui-outputlabel .ui-outputlabel-label { overflow: hidden }   (components.css)
   Asi que el recorte no venia de la celda sino de ese span.
   ⛔ El `overflow: visible` va SOLO en el span, nunca en el <td>: abrirlo en la celda
   es lo que hacia que el texto se pintara encima de la columna de al lado. */
.tm-cotizador .tm-tabla-guias tbody td .ui-outputlabel,
.tm-cotizador .tm-tabla-guias tbody td .ui-outputlabel-label,
.tm-cotizador .tm-trazabilidad tbody td .ui-outputlabel,
.tm-cotizador .tm-trazabilidad tbody td .ui-outputlabel-label {
	display: inline;
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: anywhere;
	overflow: visible;
}

/* En la linea de tiempo las sedes son cadenas largas de una pieza
   ("PRINCIPAL MEDELLIN(MEDELLIN CARRERA 50 #..." ) y en movil se salian de la
   tarjeta. La celda ya es un bloque, asi que basta con dejarlas partir. */
.tm-cotizador .tm-trazabilidad tbody td {
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ── Estado del ticket, dentro de la linea de tiempo ─────────────────────── */

/* Salia como una linea de texto suelta ("RESUELTO") que no se distinguia de la sede.
   Ahora es una pastilla con color segun el estado. La clase la compone el .xhtml con
   el propio valor (tm-estado-ABIERTO / -RESUELTO / -INDEMNIZACION), que es un campo
   @Formula con el nombre del enum Enum_EstadoTicketNovedad; un estado nuevo saldria
   en gris en vez de romper nada. */
.tm-cotizador .tm-trazabilidad .tm-estado-ticket {
	display: inline-block;
	padding: .2rem .65rem;
	border: 1px solid #d9dbe3;
	border-radius: 999px;
	background: #f1f2f6;
	color: #55585f;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
}

.tm-cotizador .tm-trazabilidad .tm-estado-ABIERTO {
	border-color: #f3d28a;
	background: #fdf6e6;
	color: #8a6208;
}

.tm-cotizador .tm-trazabilidad .tm-estado-RESUELTO {
	border-color: #a7e3c4;
	background: #effaf4;
	color: #0b5c40;
}

.tm-cotizador .tm-trazabilidad .tm-estado-INDEMNIZACION {
	border-color: #f3b4b4;
	background: #fdecec;
	color: #8e1414;
}

/* ── La tabla de fotos, dentro de un hito ────────────────────────────────── */

/* Es un p:dataTable anidado en una celda de la linea de tiempo. Antes heredaba el
   aspecto de hito -tarjeta con canto azul y marcador- porque las reglas de arriba
   iban por descendiente; ya se encadenaron con `>`, y aqui se le da lo suyo: solo
   las fotos, sin adornos. */
.tm-cotizador .tm-trazabilidad .ui-datatable {
	border: 0;
	background: transparent;
}

.tm-cotizador .tm-trazabilidad .ui-datatable thead {
	display: none;
}

.tm-cotizador .tm-trazabilidad .ui-datatable tbody tr,
.tm-cotizador .tm-trazabilidad .ui-datatable tbody td {
	border: 0;
	padding: 0;
	background: transparent;
}

.tm-cotizador .tm-trazabilidad .ui-datatable img {
	width: 72px;
	height: 72px;
	/* ⛔ `cover` NO: recorta la imagen para llenar el cuadro y cortaba el cumplido por
	   los bordes. `contain` la mete entera, con margen si no es cuadrada. */
	object-fit: contain;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--tm-borde);
	border-radius: 8px;
}

/* El p:graphicImage trae width="50" height="50" en el marcado; sin esto el atributo
   gana al CSS en algunos navegadores y la miniatura queda a 50px. */
.tm-cotizador .tm-trazabilidad .ui-datatable img[width] {
	width: 72px;
	height: 72px;
}

/* ── Separacion en pantalla estrecha ─────────────────────────────────────── */

/* Al apilarse las columnas, el boton Rastrear quedaba pegado al campo de arriba. */
@media (max-width: 768px) {
	#wrapper.tm-cotizador .tm-campo-boton {
		margin-top: .85rem;
	}
}

/* ── Iconos: PrimeIcons 5.0 solo dentro del cotizador ────────────────────── */

/* La plantilla publica carga resources/rain-layout/css/primeicons.css, que es
   PrimeIcons 4.1 (203 iconos, sin camion ni caja), y lo hace al FINAL del <body>:
   su @font-face gana sobre cualquier otro declarado para la familia `primeicons`.
   PrimeFaces 13 ya trae dentro del jar PrimeIcons 5.0 (261 iconos), y su hoja se
   carga tambien, asi que reglas como `.pi-truck:before` EXISTEN; lo que falta es el
   glifo, porque la fuente que acaba usandose es la 4.1. Resultado: cuadrito vacio.
   Aqui se declara la 5.0 con OTRO nombre de familia y se aplica solo bajo
   .tm-cotizador, para no tocar las ~800 pantallas del resto de la aplicacion.

   Es seguro: se comprobaron los codigos de glifo de los 202 iconos que comparten las
   dos versiones y son IDENTICOS, asi que ningun icono actual cambia de dibujo. El
   unico que la 5.0 no trae es `pi-star-o`, que no se usa en ningun sitio del proyecto.

   ⛔ El `'primeicons'` del final de la lista no es decorativo: es la red de seguridad.
   Si el EL de resource[...] no se resolviera, la fuente nueva no cargaria y SIN esa
   alternativa se quedarian en blanco TODOS los iconos del cotizador. Con ella se cae
   de pie en la 4.1 y solo se pierden camion y caja.

   ⛔ En los comentarios de este archivo NO escribir la expresion con almohadilla y llave:
   MyFaces evalua el EL del CSS tambien dentro de los comentarios, y una expresion que no
   compila deja un SEVERE en el log en cada descarga del archivo. */
@font-face {
	font-family: 'tm-primeicons5';
	font-display: block;
	src: url("/tmland/faces/javax.faces.resource/primeicons/primeicons.woff2?ln=primefaces&v=13.0.0&e=13.0.0") format('woff2'),
		url("/tmland/faces/javax.faces.resource/primeicons/primeicons.woff?ln=primefaces&v=13.0.0&e=13.0.0") format('woff'),
		url("/tmland/faces/javax.faces.resource/primeicons/primeicons.ttf?ln=primefaces&v=13.0.0&e=13.0.0") format('truetype');
	font-weight: normal;
	font-style: normal;
}

.tm-cotizador .pi {
	font-family: 'tm-primeicons5', 'primeicons' !important;
}

/* Las fotos de un hito salian una debajo de otra, porque son FILAS de la tabla
   anidada. Se pasan a flujo horizontal con salto de linea cuando no caben. */
.tm-cotizador .tm-trazabilidad .ui-datatable tbody {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.tm-cotizador .tm-trazabilidad .ui-datatable tbody tr,
.tm-cotizador .tm-trazabilidad .ui-datatable tbody td {
	display: block;
	width: auto;
}

/* La miniatura seguia saliendo cortada aunque el <img> ya media 72px: quien recortaba
   era el contenedor. PrimeFaces le pone `overflow:hidden` a toda celda de dataTable
   (components.css) y `overflow:auto` al tablewrapper, y la tabla anidada le habia
   calculado a la columna un ancho de 50px -el del atributo width del p:graphicImage-.
   Se abre la cadena completa: wrapper, tabla, fila y celda.
   Aqui si es seguro, al reves que en la tabla de guias: esta tabla tiene una sola
   columna de imagenes, asi que no hay columna vecina sobre la que desbordarse. */
.tm-cotizador .tm-trazabilidad .ui-datatable,
.tm-cotizador .tm-trazabilidad .ui-datatable .ui-datatable-tablewrapper,
.tm-cotizador .tm-trazabilidad .ui-datatable table,
.tm-cotizador .tm-trazabilidad .ui-datatable tbody tr,
.tm-cotizador .tm-trazabilidad .ui-datatable tbody td {
	overflow: visible !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

/* El <a> que envuelve la foto es inline: sin esto deja un hueco bajo la imagen por la
   linea base del texto, y el recuadro no le queda ajustado. */
.tm-cotizador .tm-trazabilidad .ui-datatable tbody td a {
	display: inline-block;
	line-height: 0;
}

/* En el movil la tarjeta del hito mide ~190px por dentro: con miniaturas de 72px solo
   caben dos por fila. Se bajan a 54px para que entren tres, que es lo que hace que la
   fila se lea como una tira de fotos y no como dos bloques apilados. */
@media (max-width: 768px) {
	.tm-cotizador .tm-trazabilidad .ui-datatable img,
	.tm-cotizador .tm-trazabilidad .ui-datatable img[width] {
		width: 54px;
		height: 54px;
	}

	.tm-cotizador .tm-trazabilidad .ui-datatable tbody {
		gap: .35rem;
	}
}

/* La tira de fotos, con separacion de verdad. Lleva !important porque PrimeFaces fija
   display y margenes sobre tbody/tr de dataTable y estaban dejando las miniaturas
   pegadas una a otra. align-items:flex-start evita que una foto mas alta estire a las
   demas. */
.tm-cotizador .tm-trazabilidad .ui-datatable tbody {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .55rem !important;
	margin: .25rem 0 0 !important;
}

.tm-cotizador .tm-trazabilidad .ui-datatable tbody tr {
	margin: 0 !important;
	flex: none;
}

/* ── La tira de fotos, resuelto de raiz ──────────────────────────────────── */

/* Las fotos salian UNA ENCIMA DE OTRA. El motivo: son filas de un p:dataTable
   anidado, y al abrirles el overflow para que no recortaran la miniatura, las celdas
   colapsaron a ancho 0; con el tbody en flex, cuatro elementos de ancho 0 se apilan
   todos en la misma posicion y la imagen de cada uno desborda encima de la anterior.
   Por eso el `gap` no hacia nada: separaba cajas de cero pixeles.
   La solucion no es seguir ajustando la tabla, es QUITARLA de en medio: con
   `display: contents` el wrapper, la tabla, el tbody, la fila y la celda dejan de
   generar caja, y los <a> de las fotos pasan a ser los elementos directos de la
   fila flexible. Ahi el ancho lo pone la imagen y el gap separa de verdad. */
.tm-cotizador .tm-trazabilidad .ui-datatable .ui-datatable-tablewrapper,
.tm-cotizador .tm-trazabilidad .ui-datatable table,
.tm-cotizador .tm-trazabilidad .ui-datatable tbody,
.tm-cotizador .tm-trazabilidad .ui-datatable tbody tr,
.tm-cotizador .tm-trazabilidad .ui-datatable tbody td {
	display: contents !important;
}

.tm-cotizador .tm-trazabilidad .ui-datatable {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .55rem;
	margin-top: .35rem;
}

.tm-cotizador .tm-trazabilidad .ui-datatable tbody td a {
	display: inline-block !important;
	flex: 0 0 auto;
	line-height: 0;
}