/**
 *    Nombre:       detalle-remate.css
 *    Descripcion:  Estilos del rediseño de la vista lista del detalle de remate (fichas por corral),
 *                  barra de filtros y modales de preoferta (WEB-501/502/503/504, epic WEB-499)
 *    Version:      0.1.0
 *    Creado:       10-08-2026
 *    Modificado:   10-08-2026
 *    Autor:        Sebastian Toyos
 */

/* ============ Contactos del remate ============ */

/* las fotos entran con tamaños distintos y img-fluid no agranda las chicas:
   se normalizan al ancho de la columna, cuadradas y recortadas al centro */
.foto-contacto
{
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ============ Encabezado de la pagina ============ */

/* 28px peso medio (el h2 de MDB es 300 y mas grande); el color verde lo pone .h2-responsive del sitio */
.titulo-remate-lista
{
	font-size: 1.75rem;
	font-weight: 500;
}

/* vista activa en la botonera lista/album: rellena (peso 900 de FA) y verde; las inactivas quedan finitas */
.icono-vista-activa
{
	font-weight: 900;
	color: #00482A;
}

/* en pantallas tactiles la botonera necesita targets de ~44px */
@media (max-width: 991.98px)
{
	.botonera-remate i
	{
		font-size: 1.5rem;
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
		margin-left: 0.35rem;
	}
}

/* ============ Encabezado de seccion (titulo por categoria) ============ */

/* banda verde por categoria: el titulo sobre fondo blanco quedaba con poco contraste */
.seccion-lista-banda
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #00482A;
	border-radius: 10px;
	padding: 10px 18px;
	margin: 1.5rem 0 0.75rem 0;
}

.seccion-lista-titulo
{
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F2E6CC;
	margin: 0;
}

.seccion-lista-contador
{
	font-size: 0.75rem;
	font-weight: 500;
	color: #F2E6CC;
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 4px 12px;
	white-space: nowrap;
}

/* ============ Ficha por corral ============ */

.ficha-corral
{
	display: flex;
	align-items: stretch;
	background-color: #FFFFFF;
	border: 1px solid #E5DECF;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	margin-bottom: 0.75rem;
	overflow: hidden;
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.ficha-corral:hover
{
	background-color: #EAF3ED;
	box-shadow: 0 4px 14px rgba(0, 72, 42, 0.18);
}

/* Columna de orden de venta */
.ficha-orden
{
	flex: 0 0 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.ficha-orden-label
{
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #7A766B;
}

.ficha-orden-numero
{
	font-size: 1.05rem;
	font-weight: 600;
	color: #2B2B25;
}

/* Carril verde con el numero de corral */
.ficha-carril
{
	flex: 0 0 104px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px 6px;
	background-color: #00482A;
}

.ficha-carril-label
{
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #78B37A;
}

.ficha-carril-numero
{
	font-family: "DM Serif Display", serif;
	font-size: 1.9rem;
	line-height: 1.1;
	color: #F2E6CC;
}

.ficha-carril-cantidad
{
	background-color: #F2E6CC;
	color: #00482A;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 9px;
	padding: 2px 9px;
	margin-top: 3px;
}

/* Grilla de lotes */
.ficha-grilla
{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ficha-labels
{
	display: flex;
	background-color: #FAF7F1;
	min-height: 26px;
	align-items: center;
}

.ficha-labels .ficha-celda
{
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.8px;
	color: #6B675C;
	text-transform: uppercase;
}

.ficha-lote
{
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-height: 44px;
}

.ficha-lote + .ficha-lote
{
	border-top: 1px solid #E5DECF;
}

.ficha-celda
{
	flex: 1 1 0;
	text-align: center;
	font-size: 0.84rem;
	color: #1E1D19;
	padding: 4px 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ficha-celda-rp
{
	font-weight: 500;
}

/* la raza colorada y la negra se distinguen por color, con negrita suave */
.raza-colorado
{
	color: #C62828;
	font-weight: 500;
}

.raza-negro
{
	color: #000000;
	font-weight: 500;
}

/* Panel de preoferta / precio */
.ficha-panel
{
	flex: 0 0 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background-color: #F4EEE5;
	padding: 10px 12px;
	text-align: center;
}

.ficha-panel-label
{
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #7A766B;
	text-transform: uppercase;
}

.ficha-panel-precio
{
	font-size: 1.15rem;
	color: #2B2B25;
}

.ficha-panel-precio strong
{
	color: #00482A;
}

/* Precio por lote (hereford con ofertas por lote / remate terminado) */
.ficha-celda-precio
{
	font-weight: 500;
}

/* Panel de precio escondido: lo actualiza el JS de preofertas aunque no se muestre */
.ficha-corral .divPrecio
{
	display: none;
}

/* ============ Fichas compactas (listas sin orden: invernada de los martes y genericos, WEB-505/506) ============ */

.ficha-compacta
{
	min-height: 44px;
	margin-bottom: 0.5rem;
	border-radius: 10px;
}

.ficha-compacta .ficha-carril
{
	flex: 0 0 70px;
	padding: 4px 6px;
	gap: 1px;
}

.ficha-compacta .ficha-carril-numero
{
	font-size: 1.25rem;
}

/* lotes genericos: sin link, sin cursor y sin hover */
.ficha-sin-link
{
	cursor: default;
}

.ficha-sin-link:hover
{
	background-color: #FFFFFF;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* anchos fijos de columna compartidos entre labels y celdas */
.fc-70 { flex: 0 0 70px; }
.fc-90 { flex: 0 0 90px; }
.fc-100 { flex: 0 0 100px; }
.fc-110 { flex: 0 0 110px; }
.fc-140 { flex: 0 0 140px; }
.fc-150 { flex: 0 0 150px; }
.fc-180 { flex: 0 0 180px; }
.fc-200 { flex: 0 0 200px; }

/* la fila de labels compacta acompaña los anchos de la ficha */
.ficha-labels-compacta
{
	border-radius: 8px;
	margin-bottom: 0.5rem;
}

/* el texto de cada celda va centrado a lo alto de la fila; el carril y los paneles siguen ocupando todo el alto */
.ficha-compacta > .ficha-celda
{
	align-self: center;
}

/* el plazo es largo: puede envolver */
.ficha-celda-plazo
{
	white-space: normal;
	font-size: 0.78rem;
}

/* precio de venta como celda beige con el monto en verde (solo remate terminado) */
.ficha-celda-precioventa
{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F4EEE5;
	color: #00482A;
	font-weight: 700;
	font-size: 0.85rem;
}

/* panel de medios: mapa / video / fotos.
   El panel exterior no lleva fondo y solo reserva el ancho de la columna; el beige y los iconos van
   en .medios-fondo, que es lo que se ignora en la captura: asi en la imagen la columna queda invisible
   (sin recuadro) pero los titulos siguen alineados con los datos */
.ficha-panel-medios
{
	flex-direction: row;
	padding: 0;
	background-color: transparent;
}

.medios-fondo
{
	flex: 1;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background-color: #F4EEE5;
}

.medio-lote
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 14px;
	background-color: #EAF3ED;
	color: #00482A;
}

.lista-total
{
	text-align: right;
	color: #00482A;
	padding: 0.25rem 0.25rem 0 0.25rem;
}

/* ============ Barra de filtros (mdb-select + waves con piel de pastilla, como el mockup) ============ */

.filtros-lista
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0.5rem 0 1.25rem 0;
}

.filtro-busqueda
{
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #FFFFFF;
	border: 1px solid #E5DECF;
	border-radius: 19px;
	height: 38px;
	padding: 0 14px;
	flex: 0 1 300px;
	transition: border-color 0.2s ease;
}

.filtro-busqueda:focus-within
{
	border-color: #00482A;
}

.filtro-busqueda input,
.filtro-busqueda input:focus
{
	border: none;
	outline: none;
	box-shadow: none;
	width: 100%;
	font-size: 0.82rem;
	color: #1E1D19;
	background: transparent;
}

.filtro-busqueda i
{
	color: #7A766B;
	font-size: 0.8rem;
}

/* piel de pastilla sobre el select de MDB (mdb-select genera .select-wrapper) */
.filtro-select
{
	width: 200px;
}

.filtro-select .select-wrapper input.select-dropdown
{
	border: 1px solid #E5DECF;
	border-radius: 19px;
	height: 38px;
	line-height: 38px;
	margin: 0;
	padding: 0 30px 0 14px;
	box-sizing: border-box;
	font-size: 0.82rem;
	color: #1E1D19;
	transition: border-color 0.2s ease;
}

.filtro-select .select-wrapper input.select-dropdown:focus
{
	border-color: #00482A;
}

.filtro-select .select-wrapper span.caret
{
	right: 12px;
	color: #7A766B;
}

/* fallback sin materialSelect: el select nativo toma la misma pastilla */
.filtro-select > select
{
	width: 100%;
	height: 38px;
	border: 1px solid #E5DECF;
	border-radius: 19px;
	padding: 0 14px;
	font-size: 0.82rem;
	color: #1E1D19;
	background-color: #FFFFFF;
}

.filtro-propias
{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid #E5DECF;
	border-radius: 19px;
	background-color: #FFFFFF;
	cursor: pointer;
	font-size: 0.85rem;
	color: #1E1D19;
	user-select: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filtro-propias.activo
{
	background-color: #EAF3ED;
	border-color: #00482A;
	color: #00482A;
	font-weight: 500;
}

.filtro-limpiar
{
	font-size: 0.78rem;
	color: #7A766B;
	text-decoration: underline;
	cursor: pointer;
	margin-left: auto;
}

/* ============ Modales de preoferta (estilo Madelan) ============ */

.modal-madelan .modal-content
{
	border: none;
	border-radius: 14px;
	overflow: hidden;
}

.modal-madelan .modal-header
{
	background-color: #00482A;
	border-bottom: none;
	padding: 0.9rem 1.5rem;
}

.modal-madelan .modal-title
{
	font-family: "DM Serif Display", serif;
	color: #F2E6CC;
}

.modal-madelan .modal-header .close
{
	color: #F2E6CC;
	opacity: 1;
	text-shadow: none;
}

/* Pasos del instructivo */
.preoferta-pasos
{
	display: flex;
	gap: 12px;
}

.preoferta-paso
{
	flex: 1 1 0;
	background-color: #FAF7F1;
	border-radius: 10px;
	padding: 14px;
}

.preoferta-paso-numero
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	background-color: #00482A;
	color: #F2E6CC;
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.preoferta-paso h6
{
	font-size: 0.88rem;
	font-weight: 700;
	color: #2B2B25;
}

.preoferta-paso p
{
	font-size: 0.75rem;
	line-height: 1.4;
	color: #7A766B;
	margin: 0;
}

.preoferta-callout
{
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #F2E6CC;
	border-radius: 10px;
	padding: 12px 16px;
	margin: 1rem 0;
}

.preoferta-callout i
{
	color: #00482A;
	font-size: 1.3rem;
}

.preoferta-callout strong
{
	display: block;
	font-size: 0.82rem;
	color: #00482A;
}

.preoferta-callout span
{
	font-size: 0.75rem;
	color: #2B2B25;
}

.preoferta-adjudicacion h6
{
	font-size: 0.95rem;
	font-weight: 700;
	color: #00482A;
}

.preoferta-adjudicacion p
{
	font-size: 0.8rem;
	line-height: 1.45;
	color: #2B2B25;
}

.preoferta-demo
{
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #FAF7F1;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 0.75rem;
	color: #2B2B25;
}

.preoferta-demo i
{
	color: #00482A;
}

.preoferta-nota-credito
{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
	color: #7A766B;
}

/* Modal de oferta */
.oferta-leyenda
{
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #FAF7F1;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 0.72rem;
	color: #7A766B;
}

/* el stepper del modal mantiene el input-group de Bootstrap que ya usaba el modal viejo:
   solo cambian las clases de color de los botones (beige el menos, verde el mas), sin CSS propio */