/*
 * overrides.css — Ajustes funcionales de la vista live v2 (ADR-004 / SDD-004).
 *
 * El CSS base (styles.css del diseñador, servido como auction-v2-base.css) gobierna
 * todo el branding y los estados del lote (.lot-detail-process.price-*, info-*,
 * shell/awarded/counter/available, spinners nativos, histórico, credit-nav, etc.).
 *
 * Aquí SOLO van ajustes imprescindibles que NO existen en el CSS del diseñador y que
 * la aplicación necesita para funcionar (modal de estado de subasta, overlay,
 * mensajes del admin, animación de "máximo pujador"). Sustituye al antiguo styles.scss
 * (eliminado): se recrea exclusivamente lo imprescindible, de forma justificada.
 */

/* --- Animación "flicker" (máximo pujador / ganador). El diseñador no la define. --- */
.flicker { animation: v2-flicker 1s ease-in-out infinite; }
@keyframes v2-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Botón de puja en espera breve tras recibir un nuevo precio (anti doble-click). */
#bid_button.wait { opacity: .6; pointer-events: none; }

/* --- Modal de estado de la subasta (overlay informativo). No está en el diseño. --- */
#auction_status .modal-content {
	background: #fff;
	color: #232157;
	border: none;
	border-radius: 1rem;
	box-shadow: 0 1rem 3rem rgba(35, 33, 87, .25);
	overflow: hidden;
}
#auction_status .modal-content::before {
	content: "";
	display: block;
	height: 6px;
	background: #232157;
}
#auction_status .modal-body { padding: 2rem 1.5rem; }
#auction_status .modal-content #text_auction_status,
#auction_status .modal-content #message { color: #232157; }
/* Mensaje de estado de la subasta más grande (p.ej. "quedan 5 minutos", "finalizada") */
#auction_status .modal-content #text_auction_status {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Contenido inyectado por el servidor dentro del modal de estado
   (templates/index.js envía <img class="logo_inicio"> + <p class="big_msg">). */
#auction_status img.logo_inicio {	max-width: 12rem;
	width: 100%;
	height: auto;
	background-color: #232157;
	padding: 1.5rem;
	border-radius: .75rem;
	margin-bottom: 1.25rem;
}
#auction_status .big_msg { font-size: 1.25rem; font-weight: 600; color: #232157; }
#auction_status .admin_message { color: #4844B4; font-size: 1.25rem; font-weight: 600; }

/* Acceso a la cabecera mientras el modal de ESTADO está abierto: el modal Bootstrap
   tapa toda la pantalla; elevamos la cabecera y dejamos que los clicks fuera del
   diálogo la alcancen. */
body.modal-open .main-header { z-index: 1060; pointer-events: auto; }
body.modal-open .top-nav { z-index: 1061; pointer-events: auto; }
#auction_status { pointer-events: none; }
#auction_status .modal-content { pointer-events: auto; }

/* Overlay que oscurece la zona de contenido (lotes) cuando el banner de estado está
   visible, sin cubrir la cabecera. */
.status-overlay {
	position: fixed;
	top: 6.5rem;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 1040;
	pointer-events: auto;
}
.status-overlay[hidden] { display: none; }

/* Dropdown del menú de usuario por encima de la botonera de la cabecera. */
.top-nav { z-index: 200; }
.user-nav li.nav-item .dropdown-menu { z-index: 1100; }

/* Mensaje del admin inline (bajo el lote, ancho completo cuando no hay modal de estado). */
.admin-message-inline { width: 100%; padding: 0 1rem 1rem; }

/* Altura reservada para el estado del lote (evita saltos del botón cuando está vacío).
   El diseñador estiliza .lot-detail-status dentro de .lot-detail-process, pero no
   reserva altura cuando no hay texto. */
.card-lot .card-body .lot-detail .lot-detail-process .lot-detail-status { min-height: 2.1rem; }
/* Texto de estado del lote ("PUJA EN SALA/ONLINE/LIBRO") más grande (punto 12 WE-326) */
.card-lot .card-body .lot-detail .lot-detail-process .lot-detail-status span {
	font-size: 1.5rem;
	padding: 0.15rem 0.5rem;
}

/* --- Historial: estados visuales del botón de cada lote (reglas de negocio).
   El CSS del diseñador no prevé estos estados; los definimos aquí. --- */

/* Caso: lote adjudicado al cliente actual → toda la card sombreada en dorado.
   OJO: NO usar la clase "lot-won": el CSS del diseñador ya la define como
   `.lot-won{background:#e9ecef;display:initial}` (convierte el article en inline). 
   Mismo patrón que .card-lot-xs.active del diseñador (fondo + borde 2px), pero con
   fondo SÓLIDO: un rgba dejaría ver el gris del contenedor del historial. El tono
   equivale a #A2884B al 12% sobre blanco. */
.card.card-lot-xs.lot-won-mine,
.card.card-lot-xs:has(.badgeclient) {
	background: #f4f1e9;
	/* outline interior en lugar de border: se pinta por encima del contenido, no
	   altera el tamaño de la card ni lo recortan el scroll del historial o las
	   reglas de borde/radio de Bootstrap (.card y sus hijos). */
	border: none;
	outline: 2px solid #A2884B;
	outline-offset: -2px;
}
/* La imagen conserva su marco blanco, como en el resto de lotes */
.card.card-lot-xs.lot-won-mine .card-body figure.lot-img {
	background: #fff;
}
.card.card-lot-xs .lot-detail-action .btn.badgeclient {
	background-color: #A2884B;
	border-color: #A2884B;
	color: #fff;
}

/* Caso: lote vendido a otro cliente → botón neutro gris (informativo, no accionable) */
.card.card-lot-xs .lot-detail-action .btn.btn-sold-other {
	background-color: #6c757d;
	border-color: #6c757d;
	color: #fff;
	pointer-events: none;
	cursor: default;
	opacity: 0.75;
}

/* Caso: lote disponible para reservar → botón verde */
.card.card-lot-xs .lot-detail-action .btn.badgeavailable {
	background-color: #198754;
	border-color: #198754;
	color: #fff;
}

/* Etiqueta informativa del historial para el visitante (no logado): no es una
   acción (pujar/reservar), solo informa del estado. Gris neutro y no pulsable. */
.card.card-lot-xs .lot-detail-action .btn.hist-info {
	background-color: #6c757d;
	border-color: #6c757d;
	color: #fff;
	pointer-events: none;
	cursor: default;
	opacity: 0.75;
}

/* --- Imágenes del histórico: el CSS del diseñador estiliza figure.lot-img > button > img,
   pero nuestro marcado usa un <a class="history_img_link"> en lugar de <button>.
   Replicamos las mismas reglas de tamaño para el <a> y su <img>. --- */
.card.card-lot-xs .card-body figure.lot-img a {
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
	padding: 0;
	/* Igual que el <button> del diseñador: flex para centrar la imagen
	   verticalmente dentro del figure (que ya es display:flex; align-items:center) */
	display: flex;
	align-items: center;
}
.card.card-lot-xs .card-body figure.lot-img a img {
	border-radius: .5rem;
	width: 100%;
	margin: 0 auto;
}

/* --- Home v2: banner sin imagen (placeholder) y barra de crédito dentro de la card.
   El diseñador no previó el caso "sin imagen". La figure del CSS del diseñador no
   tiene min-height: sin imagen colapsa a 0px y el card-header (absolute) se solapa
   con el contenido. Forzamos una altura mínima en todos los casos. --- */
.card-auction .card-content figure {
	min-height: 170px;
}
.card-auction .auction-cover.no-image { background: #232157; }
.card-auction .card-credit-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	flex-wrap: wrap;
	padding: .75rem 1.5rem;
	border-top: 1px solid #e9ecef;
}