/**
 *      Nombre:         tornado-v6.css
 *      Descripcion:    Estilos custom para Tornado V6 - Fullscreen + Glassmorphism
 *      Version:        0.2.6
 *      Creado:         27-02-2026
 *      Modificado:     14-05-2026
 *      Autor:          Sebastian Toyos
 */

/* CSS Variables */

:root {
    --glass-bg: rgba(0, 0, 0, 0.45);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-blur: 20px;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 50px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);

    --success: #28a745;
    --success-solid: #16A34A;
    --success-hover: #15803d;
    --success-dark: #166534;
    --success-shadow: rgba(22, 163, 74, 0.4);
    --success-shadow-hover: rgba(22, 163, 74, 0.55);
    --success-border: rgba(22, 163, 74, 0.25);
    --disabled: #9ca3af;
    --disabled-hover: #8B95A1;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --primary: #4285f4;

    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-dark: #1a1a1a;
    --text-dark-secondary: #374151;
    --text-dark-muted: #888;

    --gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
    --gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);

    --topbar-height: 56px;
    --panel-width: 400px;
    --transition: all 0.3s ease;
}

/* Reset & Base */

/* RXI-1595: 100dvh (Dynamic Viewport Height) para que el viewport se ajuste cuando Safari iOS oculta sus barras
   automaticamente. Fallback 100vh para browsers viejos sin soporte dvh. */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary);
    background: #000;
}

* {
    box-sizing: border-box;
}

/* RXI-1468: focus ring visible para keyboard nav (skill ui-ux-pro-max CRITICAL). Verde para coherencia con tema del cliente v6. */
:focus-visible {
    outline: 2px solid var(--success);
    outline-offset: 2px;
    border-radius: inherit;
}

/* RXI-1468: respetar prefers-reduced-motion del sistema (skill ui-ux-pro-max HIGH) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fullscreen Video Container */

.video-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #000;
}

.video-fullscreen iframe,
.video-fullscreen video,
.video-fullscreen .dolby-container {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* Fill horizontal en desktop y celular landscape (videos 16:9 Vimeo/YouTube del lote).
   El iframe ocupa 100vw siempre, altura proporcional 16:9 (56.25vw), centrado vertical.
   Recorta arriba/abajo si el viewport es mas alto que 16:9 — elimina barras laterales.
   RXI-1588: en celu landscape (19.5:9 tipico) tambien se aplica para evitar bandas verticales.
   No se aplica a <video> ni .dolby-container (Dolby pista en CONPISTA/HIBRIDO mantiene
   object-fit: cover porque toda la imagen importa). !important porque el iframe se
   inyecta con utilities BS5 (.w-100 .h-100) que sin !important sobreescribirian. */
body.vista-desktop .video-fullscreen iframe,
body.landscape .video-fullscreen iframe {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 100vw !important;
    height: 56.25vw !important;
}

/* Overlay clickeable para abrir chat spotlight sobre iframe */
.click-overlay-chat {
    position: fixed;
    inset: 0;
    z-index: 1;
}

/* Overlay swipe-chat (captura gestos sobre video) */
.swipe-chat-overlay {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: transparent;
}

/* Gradient overlays */
.gradient-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: var(--gradient-top);
    z-index: 1;
    pointer-events: none;
}

.gradient-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: var(--gradient-bottom);
    z-index: 1;
    pointer-events: none;
}

/* Glassmorphism base */

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.glass-sm {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.glass-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow);
}

/* Alerta Reglamento */

#alertaReglamento {
    position: fixed;
    top: calc(var(--topbar-height) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: auto;
    max-width: 520px;
    margin: 0;
    /* padding-right reserva espacio para el touch target de la X (44px ancho + 10px right + 8px buffer) asi el texto no se mete debajo del boton */
    padding: 8px 62px 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    background: rgba(25, 135, 84, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: alertaSlideDown 0.3s ease;
}

#alertaReglamento .alert-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Boton cerrar propio (FontAwesome) — el .btn-close de Bootstrap usa SVG inline + filter:invert(1)
   que iOS Safari no renderiza confiable. FontAwesome se ve igual en todos los browsers. */
/* RXI-1532 + RXI-1527: touch target 44x44 (WCAG 2.5.5) via min-width/min-height. */
#alertaReglamento .btn-cerrar-reglamento {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#alertaReglamento .btn-cerrar-reglamento:hover {
    opacity: 1;
}

@keyframes alertaSlideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Alerta Fullscreen (mobile) */

#alertaFullscreen {
    position: fixed;
    top: calc(var(--topbar-height) + 52px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: auto;
    max-width: 520px;
    margin: 0;
    padding: 8px 62px 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    background: rgba(25, 135, 84, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    animation: alertaSlideDown 0.3s ease;
}

#alertaFullscreen strong { color: #fff; }

#alertaFullscreen .btn-cerrar-alerta {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#alertaFullscreen .btn-cerrar-alerta:hover { opacity: 1; }

/* RXI-1656: Alerta Tutorial — banner amarillo invitando al tour (solo cliente real). Dispara desde case 'informacionLote' en cliente.js. One-shot por sesion + localStorage flag para no reaparecer si ya se cerro/uso. */

#alertaTutorial {
    position: fixed;
    top: calc(var(--topbar-height) + 52px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: auto;
    max-width: 520px;
    margin: 0;
    padding: 8px 62px 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    background: rgba(255, 193, 7, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    animation: alertaSlideDown 0.3s ease;
}

#alertaTutorial strong { color: #000; }

#alertaTutorial .btn-cerrar-alerta {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#alertaTutorial .btn-cerrar-alerta:hover { opacity: 1; }


/* Top Bar */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
}

/* RXI-1425: left tamaño natural a la izquierda, right pegado al borde derecho (ms-auto via utility),
   center anclado al centro absoluto. JS corre el center si el title lo va a tocar.
   Utilidades MDB cubren display/align/gap/margin; lo custom queda: min-width, position, transform, transition. */
#topbarLeft {
    min-width: 0;
    gap: 12px;
}

.btn-video-control {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.btn-video-control:hover {
    color: #fff;
}

.video-progress {
    width: 80px;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}

/* Pegar btnPlayPause + videoProgress al badge "En Vivo" (sin gap entre ellos),
   manteniendo el gap-2 del topbarRight para los demas elementos */
#topbarRight .video-control-pegado + .video-control-pegado,
#topbarRight .video-control-pegado + .conexion-status {
    margin-left: -4px;
}

.video-progress-fill {
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    transition: width 0.3s linear;
}

.logo {
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* RXI-1425: sin max-width ni ellipsis. El recorte, si hace falta, lo hace el contenedor #topbarLeft */
/* Item #12: plazo al lado del titulo (mismo tamaño), separados por "|". flex-direction row. */
.lote-titulo {
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    line-height: 1.15;
}

.lote-titulo-separador {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

/* RXI-1623: prefijo "Lote N" / "Orden de Venta N" mas grande y en bold para destacarlo del resto del titulo. */
.lote-titulo-numero {
    font-size: 1.15em;
    font-weight: 700;
    margin-right: 4px;
}

.lote-titulo-plazo {
    flex-basis: 100%;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.15;
    margin-top: -2px;
}

/* Badges */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success {
    background: rgba(40, 167, 69, 0.25);
    color: #5fdd77;
    border: 1px solid rgba(40, 167, 69, 0.4);
}

.badge-danger {
    background: rgba(220, 53, 69, 0.25);
    color: #f57c8a;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

.badge-warning {
    background: rgba(255, 193, 7, 0.25);
    color: #ffd54f;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.badge-info {
    background: rgba(23, 162, 184, 0.25);
    color: #4dd0e1;
    border: 1px solid rgba(23, 162, 184, 0.4);
}

/* Glass Buttons */

/* Utilities MDB en HTML cubren align/gap/fw/nowrap; el display queda en CSS por style="display:none" en algunos casos. */
.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-glass:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.97);
}

/* Glass Dropdown */

.dropdown-menu {
    background: rgba(30, 30, 30, 0.95) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow) !important;
}

.dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
    padding: 8px 16px;
    font-size: 14px;
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.dropdown-menu .dropdown-divider {
    border-color: var(--glass-border) !important;
}

/* Pantalla de Presentacion */

.screen-presentacion,
.screen-agradecimiento {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.screen-content {
    text-align: center;
    max-width: 500px;
    padding: 20px 24px;
}

.screen-img {
    max-width: 280px;
    max-height: 30vh;
    margin-bottom: 16px;
    opacity: 0.9;
}

.screen-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.screen-content p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Encuesta estrellas */
.amber-text { color: #ffc107; }
.rate-popover { cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; color: rgba(255, 255, 255, 0.3); }
.rate-popover:hover { transform: scale(1.15); }
.rate-popover.amber-text { color: #ffc107; }

/* Estado conexion topbar */
.conexion-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    vertical-align: middle;
}

.conexion-conectado {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.15);
}

.conexion-desconectado {
    color: #ff5252;
    background: rgba(255, 82, 82, 0.15);
    animation: pulse-danger 2s infinite;
}

.conexion-reconectando {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.15);
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Overlay Problemas Tecnicos */

.overlay-problemas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-content {
    text-align: center;
    color: var(--text-primary);
    max-width: 400px;
    padding: 40px;
}

.overlay-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.overlay-content p {
    font-size: 15px;
    color: var(--text-secondary);
}

/* Publicidad Pre-remate (Carousel) */

.carousel-publicidad {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.carousel-publicidad .carousel-inner,
.carousel-publicidad .carousel-item {
    height: 100%;
    background-color: #000;
}

.carousel-publicidad .carousel-item img {
    width: 100%;
    height: 100%;
}

.carousel-publicidad-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 10;
    animation: carouselProgress 10s linear forwards;
}

@keyframes carouselProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* Content area (sobre el video) */

.content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.content > * {
    pointer-events: auto;
}

/* PIP Rematador (desktop - draggable) */

/* RXI-1601: PIP default — el VIDEO es 3:4 vertical (configurable). El alto total surge de handle (36) + video (calculado por aspect-ratio del .pip-video) + precio. Width 264 = balance entre alto razonable y handle que aloje todo (label + selector compacto + reset). */
.pip {
    position: fixed;
    bottom: 140px;
    left: 28px;
    width: 220px;
    height: auto;
    z-index: 24;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    background: #111;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pip:hover {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.7);
}

/* Auto-hide del handle del PIP: oculto por default, aparece al hover del PIP completo (video incluido). Durante el drag (.cursor-grabbing) queda visible aunque el mouse momentaneamente salga del rectangulo. Tambien colapsa height a 0 (no solo opacity) para que el video del PIP suba y se aproveche el espacio que ocupaba el handle — sino quedaba un rectangulo negro arriba del video. Aplica a cliente, visitante y TV (las 3 vistas usan .pip-handle dentro de .pip o .tv-pip). Mobile no se afecta — usa otra clase (.pip-mobile-handle) y ademas @media (hover: hover) gatea solo dispositivos con mouse. */
@media (hover: hover) {
    .pip > .pip-handle,
    .tv-pip > .pip-handle {
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: opacity 0.2s ease, height 0.2s ease;
        pointer-events: none;
    }

    .pip:hover > .pip-handle,
    .pip.cursor-grabbing > .pip-handle,
    .tv-pip:hover > .pip-handle,
    .tv-pip.cursor-grabbing > .pip-handle {
        opacity: 1;
        height: 36px;
        pointer-events: auto;
    }
}

/* Comprimir PIP: animacion vertical pura sin diagonal.
   Height del padre auto. Animamos el video con max-height + opacity:
   al colapsar, el video se contrae a 0, el padre se ajusta naturalmente, handle y precio se acercan vertical.
   Width fijo, no hay cambio horizontal. */
.pip-video,
.pip-mobile-video {
    max-height: 600px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.pip-minimized {
    height: auto !important;
}

.pip-minimized .pip-video,
.pip-minimized .pip-mobile-video {
    max-height: 0 !important;
    opacity: 0 !important;
}

.pip-minimized .pip-handle,
.pip-minimized .pip-mobile-handle {
    background: rgba(0, 0, 0, 0.8);
}


.pip-handle {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    height: 36px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    cursor: grab;
    user-select: none;
}

.pip-handle:active {
    cursor: grabbing;
}

.pip-handle-icon {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.pip-handle-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pip-reset-icon {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.pip-reset-icon:hover {
    color: rgba(255, 255, 255, 0.9);
}

.pip-video {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.pip-video .dolby-container {
    width: 100%;
    height: 100%;
}

/* PIP Rematador (mobile - fijo) */

.pip-mobile {
    position: fixed;
    top: 56px;
    left: 8px;
    width: 120px;
    z-index: 20;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    background: #111;
    display: flex;
    flex-direction: column;
}

.pip-mobile-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    z-index: 2;
}

/* RXI-1527: handle 32px (era 28) para alojar los pip-size-btn 32x32 sin sobresalir. */
.pip-mobile-handle {
    flex-shrink: 0;
    height: 32px;
    cursor: grab;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 6px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}

.pip-mobile-handle .pip-mobile-label {
    position: static;
}

.pip-mobile-video {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.pip-mobile-video iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/* Selector de tamaño del PIP rematador (1/2/3 — pill chiquita en el handle).
   El usuario elige tamaño y se persiste en localStorage. */
/* RXI-1601: gap 1px (era 2) para compactar y permitir size-1 mas chico sin romper el handle. */
.pip-size-selector {
    display: flex;
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2px;
    margin-left: auto;
    margin-right: 6px;
}

/* RXI-1651: 22x22 — PIP desktop más chico, botones proporcionales. */
.pip-size-btn {
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, color 0.2s;
}

.pip-size-btn:hover {
    color: #fff;
}

.pip-size-btn.active {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Tamaños del PIP — 2 es default (sin override), 1 es chico, 3 es grande. RXI-1601: size-1 = 232 calibrado para que el handle entre completo (label + selector compacto 28x28 + reset icon). Achicar mas rompe el selector. */
.pip.pip-size-1 {
    width: 200px;
    height: auto;
}

.pip.pip-size-3 {
    width: 264px;
    height: auto;
}

.pip-mobile-video .dolby-container {
    width: 100%;
    height: 100%;
}

/* RXI-1554: aspect ratio 4:3 horizontal (default es 9:16 vertical). Configurable por remate desde el superadmin.
   Se aplica via JS (aplicarAspectRatioPip) — agrega clase .aspect-4-3 al #pipRematador en cliente / visitante / TV. */
/* RXI-1600: el VIDEO debe ser 4:3 (no el PIP completo). El PIP suma alto handle (36) + video (4:3 calculado por aspect-ratio) + precio (~50). Asi el stream 640x480 del rematador llena el contenedor del video sin bordes. */
.pip.aspect-4-3 {
    width: 264px;
    height: auto;
}

.pip.aspect-4-3.pip-size-1 {
    width: 240px;
    height: auto;
}

.pip.aspect-4-3.pip-size-3 {
    width: 320px;
    height: auto;
}

.pip.aspect-4-3 .pip-video {
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
}

.pip-mobile.aspect-4-3 .pip-mobile-video,
body.landscape .pip-mobile.aspect-4-3 .pip-mobile-video {
    aspect-ratio: 4 / 3;
}

/* RXI-1587: en celular cuando el rematador transmite con aspect 4:3 (camara horizontal), el PIP es del doble del tamaño 9:16 default. */
.pip-mobile.aspect-4-3 {
    width: 160px;
}

body.landscape .pip-mobile.aspect-4-3 {
    width: 160px;
}

/* Precio actual del lote — tercer hijo del PIP (handle, video, precio).
   Funciona como un "handle inferior": queda visible aunque el PIP se minimice (el video se hide pero el precio no).
   El border-radius bottom lo da el padre via overflow:hidden + border-radius. */
.pip-precio-actual {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.85);
    color: var(--text-primary);
    padding: 8px 14px;
    text-align: center;
    line-height: 1.2;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pip-precio-actual .precio-actual-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.pip-precio-actual .precio-actual-valor {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

/* Mobile: tipografia mas chica */
.pip-precio-mobile {
    padding: 6px 10px;
}

.pip-precio-mobile .precio-actual-valor {
    font-size: 18px;
    white-space: nowrap;
}

/* RXI-1564: precio actual del lote dentro del cardLote cuando NO hay PIP rematador (CONPISTA / HIBRIDO sin canal Dolby propio). */
.card-lote-precio {
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
    padding: 10px 14px;
    text-align: center;
    line-height: 1.2;
    border-radius: 8px;
    margin-bottom: 12px;
}

.card-lote-precio .precio-actual-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.card-lote-precio .precio-actual-valor {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

/* RXI-1564: pill del cardLote muestra el precio destacado cuando NO hay PIP. */
.card-lote-pill-precio {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

/* Barra de Oferta Desktop (pill) */

.evaluador-thumb {
    width: 50px;
    height: 50px;
}

.panel-mapa-iframe {
    height: 220px;
    border-radius: 8px;
}

/* Slideshow fotos (preview sin video) */
.slideshow-foto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

.slideshow-foto-activa {
    opacity: 1;
}

/* Badge sin video (sobre preview fotos) */
.badge-sin-video {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
}

/* Alert spotlight (arriba de oferta bar) */
/* Utilities MDB en HTML cubren position/start/translate/align/gap/fw/nowrap; el display queda en CSS por style="display:none" inline. */
.spotlight-alert {
    bottom: 90px;
    z-index: 31;
    display: flex;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    animation: spotlightAlertIn 0.3s ease;
}

.spotlight-alert i.fa-keyboard {
    font-size: 14px;
    opacity: 0.85;
}

/* RXI-1527: touch target ampliado (era 20x20, sub-44 estricto). 32x32 maximo razonable por estar dentro de overlay chico. */
.spotlight-alert-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 4px;
    transition: background 0.15s;
}

.spotlight-alert-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

@keyframes spotlightAlertIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Utilities MDB en HTML cubren position/start/translate/align; el display queda en CSS por el style="display:none" inline y .hide()/.show() de jQuery. */
.oferta-bar {
    bottom: 32px;
    z-index: 30;
    display: flex;
    gap: 10px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(22, 163, 74, 0.2);
    border: 1px solid var(--success-border);
}

/* Utilities MDB en HTML cubren display/align/justify/shrink; lo custom queda width/height/border/cursor/transition/font-size/color.
   color:#fff es comun a todos los modificadores (menos/mas/accion) y al :disabled, vive en la base (RXI-1528).
   RXI-1639: tamaño base subido sutilmente de 34 a 36 (Info/Chat). +/- override a 44 (target principal). Mobile usa overrides con mas specificity (.bottom-bar .oferta-btn-round, .precio-row .oferta-btn-menos/.mas, body.landscape .oferta-btn-round) — no se ve afectado. */
.oferta-btn-round {
    width: 36px;
    height: 36px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

/* RXI-1639: +/- mas grandes que Info/Chat para que sean el target principal de la oferta-bar desktop. Mobile (.precio-row .oferta-btn-menos/.mas) tiene specificity mayor y mantiene su 64x48. */
.oferta-btn-menos,
.oferta-btn-mas {
    width: 44px;
    height: 44px;
    font-size: 16px;
    background: var(--success-hover);
}

.oferta-btn-round:disabled {
    background: var(--disabled);
    cursor: not-allowed;
    opacity: 0.7;
}

.oferta-btn-menos:hover,
.oferta-btn-mas:hover {
    background: var(--success-dark);
}

/* RXI-1469: antes usaba transform: scale(0.92) que causa reflow. Ahora translateY + tinte mas oscuro (skill ui-ux-pro-max: transform-performance) */
.oferta-btn-menos:active,
.oferta-btn-mas:active {
    transform: translateY(1px);
    background: var(--success-dark);
}

/* RXI-1576: ancho dinamico del precio — el input usa attribute `size` actualizado por JS (helper setPrecioLoteVisual en core.app.js)
   asi crece naturalmente con el contenido. width:auto en lugar del 100% original para que el size attribute mande.
   RXI-1639: min-width 80→88 para acompañar el font-size mas grande del precio. */
.oferta-precio {
    min-width: 88px;
}

/* RXI-1639: precio 24→28 para correlacion con +/- mas grandes. Mobile usa .precio-valor (otra clase) — no se afecta. */
.oferta-precio-valor {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    letter-spacing: -0.5px;
    border: none;
    background: transparent;
    text-align: center;
    outline: none;
    width: auto;
    padding: 0;
}

.oferta-precio-escala {
    font-size: 12px;
    color: var(--text-dark-secondary);
    font-weight: 600;
}

/* RXI-1639: divider mas alto (24→28) para acompañar la altura nueva de los +/- (44px). */
.oferta-divider {
    width: 1px;
    height: 28px;
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* RXI-1639: padding/font subidos sutilmente para correlacion con +/- y el precio. Mobile usa .bottom-btn-ofertar que sobreescribe min-height/padding/font-size — gap NO se sobreescribe asi que se mantiene en 6px (no tocar mobile). */
.oferta-btn-ofertar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--success-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 14px var(--success-shadow);
}

.oferta-btn-ofertar:hover {
    background: var(--success-hover);
    box-shadow: 0 6px 20px var(--success-shadow-hover);
}

.oferta-btn-ofertar:active {
    transform: scale(0.95);
}

.oferta-btn-ofertar:disabled {
    background: var(--disabled);
    cursor: not-allowed;
    box-shadow: none;
}

/* Matar feedback visual de tap/hover en disabled — sino el boton se "mueve" al clickearlo y parece interactivo */
.oferta-btn-ofertar:disabled:hover {
    background: var(--disabled);
    box-shadow: none;
}

.oferta-btn-ofertar:disabled:active {
    transform: none;
}

/* Cliente esta ganando — pinta el boton rojo (estilo v5) cuando esta deshabilitado por JS.
   Sigue el patron de .oferta-btn-ofertar:disabled (linea 931) — solo overrideamos el background. */
body.estas-ganando .oferta-btn-ofertar:disabled {
    background: var(--danger);
    color: #fff;
}

body.estas-ganando .precio-valor {
    font-size: 38px; /* +20% del 32px base desktop */
}

/* Pulso visual en cambio de precio */
@keyframes precioPulso {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.precio-pulso {
    animation: precioPulso 300ms ease-out;
}

.oferta-btn-accion {
    background: var(--disabled);
}

.oferta-btn-accion:hover {
    background: var(--disabled-hover);
}

/* Barra Visitante Desktop */

.visitante-bar {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 20px;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
}

.visitante-texto {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

.visitante-texto:hover {
    color: var(--success-solid);
}

/* Bottom Area Mobile */

/* Utilities MDB en HTML cubren position/bottom/start/end/flex-column/align; el display queda en CSS por el style="display:none" inline. */
.bottom-area {
    z-index: 30;
    display: flex;
    gap: 8px;
    padding: 0 12px 40px;
}

/* Utilities MDB en HTML cubren display/align/justify/w-100; lo custom queda: gap 6px (no match utility). */
.precio-row {
    gap: 6px;
}

/* Utilities MDB en HTML cubren display/flex-column/align; lo custom queda: min-width. */
.precio-center {
    min-width: 100px;
}

.precio-valor {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    letter-spacing: -0.5px;
    border: none;
    background: transparent;
    text-align: center;
    outline: none;
    /* RXI-1576: width:auto + size attribute desde JS (setPrecioLoteVisual). Crece al contenido. */
    width: auto;
    padding: 0;
}

.precio-escala {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.53);
}

/* Utilities MDB en HTML cubren display/align/w-100; lo custom queda: gap, padding, pill, glass. */
.bottom-bar {
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(22, 163, 74, 0.2);
    border: 1px solid var(--success-border);
}

/* Hereda de .oferta-btn-ofertar + ajustes mobile */
/* RXI-1526: touch target 48px minimo (WCAG 2.5.5), font 16 para legibilidad. */
.bottom-btn-ofertar {
    flex: 1;
    justify-content: center;
    min-height: 48px;
    padding: 14px 28px;
    font-size: 16px;
}

/* Botones redondos mobile en bottom bar */
/* RXI-1526: 48x48 minimo touch target. */
.bottom-bar .oferta-btn-round {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

/* .oferta-btn-accion ya define background y color */


/* RXI-1614: pre-remate / saludo — apagar los overlays que capturan clicks sobre el videoFondo (.click-overlay-chat z-index 1 full screen, .swipe-chat-overlay z-index 9 top 52→bottom). Asi el iframe Millicast queda accesible al touch y el user puede tocar el "Tap to unmute" nativo del viewer. Aplica solo cuando loteActivo = 0; en remate normal estos overlays son necesarios para el chat/swipe. */
body.modo-saludo .click-overlay-chat,
body.modo-saludo .swipe-chat-overlay {
    pointer-events: none !important;
}

/* RXI-1599: eliminado #badgeEstado y su CSS — los avisos del cliente ahora se muestran via mostrarNotificacionPersistente() en el container #notificaciones (toastr-like). */

/* Notificaciones Flotantes. Utilities MDB cubren position/display/align/gap/translate; lo custom queda: bottom, z-index, pointer-events. */
#notificaciones {
    bottom: 100px;
    z-index: 35;
    pointer-events: none;
}

/* RXI-1608: subido a 220px para que las notificaciones no queden encima del precio (precio-row + bottom-bar Ofertar ocupa hasta ~200px desde el piso). */
#notificaciones.notificaciones-mobile {
    bottom: 220px;
}

/* Utilities MDB en HTML cubren display/align/gap/rounded-pill/fw/nowrap; lo custom queda: padding asimétrico, font-size, backdrop-filter, transition, pointer-events. */
.notificacion {
    padding: 9px 20px;
    font-size: 14px;
    pointer-events: auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.notificacion-info {
    background: rgba(23, 162, 184, 0.9);
    color: #fff;
}

.notificacion-warning {
    background: rgba(255, 193, 7, 0.9);
    color: var(--text-dark);
}

.notificacion-danger {
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
}

.notificacion-success {
    background: rgba(40, 167, 69, 0.9);
    color: #fff;
}

.notificacion-salir {
    opacity: 0;
    transform: translateY(-10px);
}

/* RXI-1621: animacion flash verde al cambiar el precio actual (cliente desktop + mobile). Mismo efecto que .tv-hero-precio.tv-precio-flash pero con shadow proporcional al tamaño del precio en cliente. */
.precio-actual-valor.precio-flash {
    animation: precio-flash 1500ms ease-out;
}

@keyframes precio-flash {
    0%   { color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.85); }
    70%  { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.5); }
    100% { color: #fff; text-shadow: none; }
}

/* RXI-1619: variante doble tamaño — usada para "Felicitaciones, el lote es tuyo". */
.notificacion.notificacion-grande {
    padding: 18px 40px;
    font-size: 28px;
    gap: 12px !important;
}

.notificacion.notificacion-grande i {
    font-size: 32px;
}

/* Tabs Lote Recomendado (E3) */

/* Utilities MDB en HTML cubren position/gap/padding/translate. El display queda en CSS custom porque $.hide()/.show() de jQuery no puede pelear contra `.d-flex !important` de Bootstrap. */
#tabsLote {
    display: flex;
    top: 68px;
    z-index: 25;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Utilities MDB en HTML cubren display/align/fw/nowrap; lo custom queda: gap, padding, border/pill, colors, font-size, cursor, transition. */
.tab-lote {
    display: flex;
    gap: 7px;
    padding: 7px 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-lote:hover {
    color: rgba(255, 255, 255, 0.85);
}

.tab-lote-activo {
    background: var(--success-solid);
    color: #fff;
}

.tab-dot-live {
    font-size: 8px;
    color: #ef4444;
    animation: pulseDot 1.5s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* RXI-1648 removido: cardLote mobile vuelve a mostrarse, arranca colapsado (pill) via mostrarCardLote() en ui-celular.js. */

/* Tabs mobile: anula el center-absoluto y se pega arriba-derecha */
#tabsLote.tabs-lote-mobile {
    top: 56px;
    right: 8px;
    left: auto;
    transform: none;
}

/* Multi-video por Lote (E3) */

.multivideo {
    position: fixed;
    bottom: 32px;
    left: 24px;
    z-index: 22;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.47);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.multivideo-item {
    width: 112px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #222;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    position: relative;
    border: 2px solid transparent;
    padding: 0;
}

/* RXI-1423: mascara como v5 (equivalente a rgba-teal-slight/strong). Sutil en inactivos, fuerte en el activo */
.multivideo-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(22, 163, 74, 0.15);
    pointer-events: none;
    transition: background 0.2s ease;
    border-radius: inherit;
}

.multivideo-item:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.multivideo-item-activo {
    border-color: #fff;
}

.multivideo-item-activo::after {
    background: rgba(22, 163, 74, 0.55);
}

.multivideo-item img {
    width: 100%;
    height: 100%;
    display: block;
}

.multivideo-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* RXI-1423: play en inactivos, pause en el activo (como v5 TV) */
.multivideo-item .multivideo-pause-icon { display: none; }
.multivideo-item-activo .multivideo-play-icon { display: none; }
.multivideo-item-activo .multivideo-pause-icon { display: inline-block; }

/* Multi-video mobile: abajo izquierda como desktop */
/* RXI-1581: multivideo en mobile vive dentro del panelInfo (#panelMultivideo), no flotante. Scroll horizontal de thumbnails. */
.panel-multivideo {
    display: flex !important;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 12px 16px;
}

.panel-multivideo::-webkit-scrollbar {
    display: none;
}

.panel-multivideo .multivideo-item {
    width: 96px;
    height: 72px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Label en preview multivideo corral */
.multivideo-label {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

/* Modal Video Corral */
.modal-video-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.modal-video-close {
    position: absolute;
    top: -40px;
    right: 0;
    z-index: 10;
}

/* Precio actual en card y panel info */
.precio-actual-panel {
    text-align: center;
    padding: 10px 16px 8px;
}

.precio-actual-label {
    display: block;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.precio-actual-valor {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

/* Dentro del sheet mobile (fondo blanco) usar colores oscuros. .panel-info y .panel-orden usan glass dark (RXI-1467) → heredan los defaults claros. */
.sheet .precio-actual-label {
    color: var(--text-dark-muted);
}

.sheet .precio-actual-valor {
    color: var(--text-dark);
}

/* Texto del evaluador dentro del sheet mobile — sino quedan blancos invisibles sobre fondo blanco */
.sheet .panel-evaluador-label {
    color: var(--text-dark-muted);
}

.sheet .panel-evaluador-nombre {
    color: var(--text-dark);
}

/* Cards de Peso (PN/PD/PF/CE). Utilities MDB en HTML cubren display/gap/justify; lo custom queda: padding asimétrico. */
.panel-pesos {
    padding: 12px 16px;
}

.peso-card {
    flex: 1;
    max-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.peso-card-titulo {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.peso-card-valor {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Video thumb en panel multimedia */
.panel-video-thumb {
    position: relative;
    cursor: pointer;
}

.panel-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.85);
    font-size: 24px;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}


/* Panel Info Desktop (E4 - slide lateral derecho) */

.panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    background: rgba(0, 0, 0, 0.4);
}

/* RXI-1467: panel detalle lateral con glass dark para alinear con el theme del cliente v6 (antes era blanco, rompia el ambient dark).
   RXI-1528: panel-info y panel-orden comparten layout/glass, se combinan en un solo bloque. */
.panel-info,
.panel-orden {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--panel-width);
    height: 100%;
    z-index: 45;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 26px 0 0 26px;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* RXI-1467: texto e iconos del panel-info sobre fondo dark (mismo patron que .panel-orden) */
.panel-info .panel-title {
    color: var(--text-primary);
}

/* RXI-1467: boton cerrar glass en TODOS los contenedores con glass dark (panel-info desktop, panel-orden desktop, sheet-orden mobile). El default era gris claro #e5e5e5 hecho para fondo blanco, se veia feo en glass dark. */
.panel-info .panel-close,
.panel-orden .panel-close,
.sheet-orden .panel-close {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.panel-info .panel-close:hover,
.panel-orden .panel-close:hover,
.sheet-orden .panel-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.panel-info .panel-divider {
    background: var(--glass-border);
}

/* RXI-1467: overrides de texto/bordes dentro del panel-info para que se vean sobre glass dark */
.panel-info .panel-section:not(:empty) {
    border-top-color: var(--glass-border);
}

.panel-info .panel-lote-titulo,
.panel-info .panel-row-label {
    color: var(--text-primary);
}

.panel-info .panel-lote-subtitulo,
.panel-info .panel-row-value {
    color: var(--text-secondary);
}

.panel-info .peso-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--glass-border);
}

.panel-info .peso-card-titulo {
    color: var(--text-secondary);
}

.panel-info .peso-card-valor {
    color: var(--text-primary);
}

.panel-info-abierto {
    transform: translateX(0);
}

/* Panel Orden de Venta (slide lateral derecho) — base layout compartida con .panel-info arriba */
.panel-orden-abierto {
    transform: translateX(0);
}

.panel-orden .panel-title,
.panel-orden .panel-close {
    color: var(--text-primary);
}

.panel-orden .table {
    color: var(--text-primary);
    margin: 0;
}

.panel-orden .table thead th {
    color: var(--text-secondary);
    border-bottom-color: var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
}

.panel-orden .table tbody td {
    border-bottom-color: var(--glass-border);
    font-size: 13px;
    padding: 10px 12px;
    vertical-align: middle;
}

.panel-orden .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* RXI-1585: highlight de la fila del lote que se esta rematando. Color y animacion del badge los da .bg-success + .spinner-grow-sm nativos de MDB (sin CSS custom). */
.panel-orden .table tbody tr.row-rematando,
.sheet-orden .table tbody tr.row-rematando {
    background: rgba(34, 197, 94, 0.12);
    border-left: 3px solid var(--success-hover);
}

/* Utilities MDB en HTML cubren display/align/justify/shrink; lo custom queda: padding asimétrico. */
.panel-header {
    padding: 18px 20px 12px;
}

.panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}

.panel-close {
    /* RXI-1527: touch target 44x44 (WCAG 2.5.5 minimo). RXI-1466 lo subio de 32 a 40, este ticket cierra al minimo estricto. */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    background: #e5e5e5;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.panel-close:hover {
    background: #e0e0e0;
    color: #333;
}

.panel-divider {
    height: 1px;
    background: #e8e8e8;
    margin: 0 20px;
    flex-shrink: 0;
}

.panel-corral-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-bottom: 1px solid #e8e8e8;
}

.panel-corral-tabs .tab-lote {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}

.panel-corral-tabs .tab-lote-activo {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 20px;
}

/* Secciones del panel */
.panel-section:empty {
    display: none;
}

.panel-section:not(:empty) {
    padding: 14px 20px;
    border-top: 1px solid #e8e8e8;
}

.panel-lote-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.panel-lote-subtitulo {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.panel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.panel-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}

/* Badges solid (proyecto: sin outline, siempre solidos) */
.panel-badge-info {
    background: #17a2b8;
    color: #fff;
}

/* Item #8: badge de categoria (tipo de lote) — primario, mas destacado */
.panel-badge-primary {
    background: #16a34a;
    color: #fff;
    font-weight: 700;
}

.panel-badge-success {
    background: #28a745;
    color: #fff;
}

.panel-badge-warning {
    background: #ffc107;
    color: #1a1a1a;
}

.panel-badge-danger {
    background: #dc3545;
    color: #fff;
}

.panel-evaluador {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 16px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.panel-evaluador img {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.18);
}

.panel-evaluador-info {
    display: flex;
    flex-direction: column;
}

.panel-evaluador-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    line-height: 1;
    margin-bottom: 2px;
}

.panel-evaluador-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.panel-evaluador-tel {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

.panel-evaluador-tel:hover {
    color: var(--text-primary);
}

.sheet .panel-evaluador-tel {
    color: var(--text-dark-muted);
}

.sheet .panel-evaluador-tel:hover {
    color: var(--text-dark);
}

.panel-sec-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.panel-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.panel-row-value {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Estrellas calidad en panel */
.panel-row .estrellas {
    display: inline-flex;
    gap: 2px;
}

.panel-row .estrellas .fa-star {
    font-size: 12px;
}

.panel-row .estrellas .text-warning {
    color: #f59e0b;
}

.panel-row .estrellas .text-muted {
    color: #d1d5db;
}

.estrellas-texto {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

/* Fotos grid */
.panel-fotos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.panel-foto-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #f0f0f0;
    transition: transform 0.2s ease;
}

.panel-foto-thumb:hover {
    transform: scale(1.03);
}

.panel-foto-thumb img {
    width: 100%;
    height: 100%;
}

.panel-btn-ver-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.panel-btn-ver-mas:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

/* Video comprimido cuando panel abierto (desktop) */
.video-comprimido {
    transition: width 0.3s ease;
    width: calc(100% - var(--panel-width)) !important;
}

/* Bottom Sheet Mobile (E4) */

.sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.3s ease, bottom 0.3s ease;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sheet-abierto {
    transform: translateY(0);
    bottom: 0 !important;
    z-index: 45 !important;
}

.sheet-peek {
    transform: translateY(calc(100% - 24px));
    z-index: 29;
}

.sheet-handle {
    display: flex;
    justify-content: center;
    /* RXI-1466: padding compacto para reducir aire entre handle y header */
    padding: 8px 0 4px;
    cursor: grab;
    flex-shrink: 0;
}

.sheet-handle:active {
    cursor: grabbing;
}

.sheet-handle-bar {
    width: 40px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* RXI-1466: padding mas consistente y generoso para jerarquia visual */
    padding: 12px 20px 14px;
    flex-shrink: 0;
    gap: 12px;
}

/* RXI-1607: boton cerrar X explicito en el header del sheet mobile (panelInfo). Touch target 44x44 WCAG. Sheet tiene fondo blanco asi que color oscuro. */
.panel-cerrar {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.panel-cerrar:hover {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.9);
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 20px;
}

/* Info Lote Card (flotante desktop, abajo-derecha) */

.info-lote-card {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 15;
    width: 300px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.73);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-lote-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.info-lote-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.73);
}

.info-lote-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.13);
}

.info-lote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-lote-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.53);
}

.info-lote-value {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* Galería Flotante de Fotos (E4) */

/* Card flotante info lote */
.card-lote {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 22;
    width: 320px;
    padding: 0 20px 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: width 0.3s ease, bottom 0.3s ease;
}

/* RXI-1527: padding ampliado para alojar el .card-lote-collapse-btn 44x44 en absolute. */
/* RXI-1559: size-selector + reset-icon a la izquierda del handle; drag-indicator absoluto centrado arriba; collapse-btn absoluto a la derecha. */
.card-lote-handle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 56px 6px 8px;
    cursor: grab;
    touch-action: none;
}

.card-lote-drag-indicator {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
}

/* RXI-1514: boton colapsar (flechas diagonales). Solo visible cuando la card esta expandida. */
/* RXI-1527: touch target 44x44 (WCAG 2.5.5). */
.card-lote-collapse-btn {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 13px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* El padre .card-lote-handle tiene touch-action: none para drag — el boton necesita habilitar touch para que reciba taps en mobile */
    touch-action: manipulation;
    pointer-events: auto;
}

.card-lote:not(.card-lote-collapsed) .card-lote-collapse-btn {
    display: flex;
}

.card-lote-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.card-lote-collapse-btn:active {
    transform: scale(0.92);
}

/* RXI-1583: el pill es un <button> para mejor handling de clicks en iOS Safari. Reset de estilos nativos.
   RXI-1589: padding 12px 20px + font 14 + gap 8 para respiracion y touch-friendly.
   RXI-1590: layout 2 lineas — titulo grande arriba, meta (localidad + plazo) chico abajo. */
.card-lote-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

#cardLotePillTitulo {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.card-lote-pill-titulo {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.card-lote-pill-meta {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.card-lote-pill i {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.card-lote.card-lote-collapsed {
    padding-bottom: 8px;
}

.card-lote.card-lote-collapsed .card-lote-body {
    display: none;
}

.card-lote.card-lote-collapsed .card-lote-pill {
    display: flex;
}

.card-lote.card-lote-collapsed .card-lote-pill i {
    transform: rotate(0deg);
}

.card-lote:not(.card-lote-collapsed) .card-lote-pill i {
    transform: rotate(180deg);
}

.card-lote-evaluador {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.card-lote-evaluador img {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-lote-evaluador-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
}

.card-lote-evaluador-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.card-lote-evaluador-tel {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.card-lote-evaluador-tel:hover {
    color: #fff;
}

.card-lote-titulo {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.card-lote-subtitulo {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* Localidad debajo del subtitulo (linea aparte, mas tenue). Si no hay, no aparece. */
/* RXI-1584: line-height 1.1 + margin-top -2px para pegarla al subtitulo. */
.card-lote-localidad {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.1;
    margin-top: -2px;
}

/* RXI-1597: header desktop con titulo en su propia linea + subtitulo · localidad inline + plazo abajo. */
.card-lote-header {
    margin-bottom: 6px;
}

.card-lote-header .card-lote-titulo {
    margin-bottom: 2px;
    line-height: 1.2;
}

.card-lote-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
}

.card-lote-meta .card-lote-subtitulo,
.card-lote-meta .card-lote-localidad {
    margin: 0;
    line-height: 1.2;
}

.card-lote-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}

.card-lote-plazo {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

.card-lote-plazo-label {
    color: rgba(255, 255, 255, 0.55);
    margin-right: 4px;
}

.card-lote-plazo-valor {
    font-weight: 600;
}

/* El divider provee separacion arriba — asi funciona haya o no localidad */
.card-lote-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin-top: 10px;
    margin-bottom: 10px;
}

.card-lote-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
}

.card-lote-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    flex: 0 0 auto;
}

.card-lote-valor {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-align: right;
    min-width: 0;
    flex: 0 1 auto;
}

.card-lote-ampliar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 7px 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.card-lote-ampliar:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Card lote mobile */
/* RXI-1602: portrait — posicion default a la derecha del PIP rematador (PIP en top:56 left:8 width:120). Width responsive al espacio sobrante con cap 320. Drag se hace desde el handle (touch-action: none). */
/* RXI-1605: top 110 (era 56) para no pisarse con #tabsLote (top:68 ~40 alto = 108) cuando el rematador sugiere un lote. */
.card-lote-mobile {
    top: 110px;
    left: auto;
    right: 8px;
    bottom: auto;
    width: calc(100vw - 144px) !important;
    max-width: 320px;
    padding: 0 16px 12px;
    border-radius: 16px;
    /* RXI-1559: variables de escala para tipografia / espaciado.
       --cl-size: factor del selector 1/2/3 (default 1 = tamano 2).
       --cl-orient: boost por orientacion (1 normal, 1.2 en portrait).
       Las medidas internas se multiplican por (--cl-size * --cl-orient) via calc(). */
    --cl-size: 1;
    --cl-orient: 1;
    --cl-scale: calc(var(--cl-size) * var(--cl-orient));
}

/* RXI-1572: en celular vertical el cardLote arranca un 20% mas grande. El selector 1/2/3 se elimino, --cl-size queda fijo en 1. */
@media (orientation: portrait) {
    .card-lote-mobile {
        --cl-orient: 1.2;
    }
}

/* RXI-1465: avatar del evaluador mas chico en mobile */
.card-lote-mobile .card-lote-evaluador {
    gap: calc(8px * var(--cl-scale));
    margin-bottom: calc(6px * var(--cl-scale));
    padding-bottom: calc(6px * var(--cl-scale));
}

.card-lote-mobile .card-lote-evaluador img {
    width: calc(28px * var(--cl-scale));
    height: calc(28px * var(--cl-scale));
}

.card-lote-mobile .card-lote-evaluador-nombre {
    font-size: calc(12px * var(--cl-scale));
}

/* RXI-1581: regla `body.con-multivideo` removida — el multivideo en mobile ya no vive flotante (esta dentro del panelInfo), no hay solapamiento con cardLote. */

.card-lote-mobile .card-lote-titulo {
    /* RXI-1465: titulo mas chico */
    font-size: calc(14px * var(--cl-scale));
    margin-bottom: 0;
}

.card-lote-mobile .card-lote-subtitulo {
    font-size: calc(12px * var(--cl-scale));
    margin-bottom: calc(6px * var(--cl-scale));
}

.card-lote-mobile .card-lote-label,
.card-lote-mobile .card-lote-valor {
    font-size: calc(12px * var(--cl-scale));
}

/* Compactar la pill colapsada en mobile — el padding vertical original (handle 14/6 + pill 12/12 + bottom 8) acumulaba ~52px solo de padding, dejaba la pill con altura excesiva sobre todo cuando el titulo rompe en 2 lineas. Mantenemos el drag indicator visible (top:6px) y el touch-target 44x44 del collapse-btn (absoluto, no afectado por padding). */
.card-lote-mobile .card-lote-handle {
    padding: 8px 56px 2px 8px;
}

.card-lote-mobile .card-lote-pill {
    padding: 6px 16px;
    gap: 6px;
}

.card-lote-mobile.card-lote-collapsed {
    padding-bottom: 4px;
}

/* Chat Mobile (E5) */

.chat-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    padding: 12px 16px;
    padding-bottom: max(44px, calc(24px + env(safe-area-inset-bottom)));
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}

.chat-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-mobile-bar .form-outline {
    flex: 1 1 0%;
    min-width: 0;
    /* Cuadro visible para que el usuario sepa donde tocar (sino el input se ve como texto plano sobre el fondo dark) */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    padding: 0 14px;
    transition: border-color 0.2s, background 0.2s;
}

.chat-mobile-bar .form-outline:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
}

.chat-mobile-bar .btn-floating {
    width: 44px;
    height: 44px;
    min-width: 44px;
}

/* Chat Spotlight (modo 2) */

.chat-spotlight-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-spotlight {
    width: 600px;
    max-width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.chat-spotlight-input {
    width: 100%;
    padding: 18px 24px;
    border: none;
    border-radius: 24px;
    background: rgba(30, 30, 30, 0.85);
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    outline: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    font-family: inherit;
}

.chat-spotlight-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.chat-spotlight-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
}

/* Quick replies (mensajes pre-armados) */

.chat-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.quick-reply-badge {
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.quick-reply-badge:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Quick replies mobile (tema oscuro) */
.chat-quick-replies-mobile {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 4px 0 0;
    gap: 6px;
}

.chat-quick-replies-mobile .quick-reply-badge {
    font-size: 13px;
}

.chat-quick-replies-mobile .quick-reply-badge:active {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

/* RXI-1455: emoji-picker-element (Web Component) theming + posicionamiento */

/* Custom properties del picker — tema glass dark del v6 */
emoji-picker {
    --background: rgba(20, 20, 20, 0.95);
    --border-color: var(--glass-border);
    --border-radius: 16px;
    --button-active-background: rgba(74, 222, 128, 0.2);
    --button-hover-background: rgba(255, 255, 255, 0.08);
    --indicator-color: var(--success-solid);
    --input-border-color: rgba(255, 255, 255, 0.15);
    --input-font-color: #fff;
    --input-placeholder-color: rgba(255, 255, 255, 0.45);
    --outline-color: var(--success-shadow);
    --category-emoji-padding: 0.25rem;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow);
}

/* Picker mobile: flotante arriba del chat-mobile-bar */
.emoji-picker-mobile {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px;
    right: 8px;
    margin: 0 auto;
    max-width: 360px;
    height: 340px;
    z-index: 40;
}

/* Picker spotlight desktop: centrado dentro de .chat-spotlight */
.emoji-picker-spotlight {
    height: 360px;
    max-width: 380px;
    width: 100%;
}

/* Wrapper input + boton emoji en spotlight */
.chat-spotlight-inputwrap {
    position: relative;
    width: 100%;
}

.chat-spotlight-inputwrap .chat-spotlight-input {
    /* RXI-1527: padding-right ajustado a 64px (era 52) — el emoji 44x44 a right:12 ocupa hasta 56 desde el borde, +8 de margen del texto. */
    padding-right: 64px;
}

/* RXI-1527: touch target 44x44 (WCAG 2.5.5). */
.chat-spotlight-emoji {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.chat-spotlight-emoji:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Boton emoji mobile */
.chat-mobile-bar .btn-emoji {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.chat-mobile-bar .btn-emoji:hover,
.chat-mobile-bar .btn-emoji:focus {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* RXI-1512: el override `position: relative` aqui rompia el fixed bottom: 0 del bloque principal y movia el chat al flujo normal del DOM (arriba).
   El picker mobile es position: absolute con bottom: calc(100% + 4px) — referencia funciona igual con `position: fixed` del .chat-mobile principal. */

/* Grupo botones acción en oferta-bar */

/* Utilities MDB en HTML cubren align; el display queda en CSS por .show()/.hide() del grupo. */
.oferta-acciones {
    display: flex;
    gap: 6px;
}

/* Mobile-specific (celular) */

/* Modals Glassmorphism BS5+MDB9 (E7) */

.modal-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-header-warning {
    background: rgba(255, 193, 7, 0.15);
    border-bottom-color: rgba(255, 193, 7, 0.3);
}

.modal-header-warning .modal-title {
    color: var(--warning);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--transition);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
    color: var(--text-primary);
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--glass-border);
}

/* RXI-1528: las 4 variantes comparten radius/font-size/cursor/transition; el delta es padding/background/border/color/font-weight. */
.modal-btn-primary,
.modal-btn-success,
.modal-btn-warning,
.modal-btn-outline {
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.modal-btn-primary {
    padding: 8px 20px;
    background: var(--primary);
    border: none;
    color: #fff;
    font-weight: 500;
}

.modal-btn-primary:hover {
    background: #3367d6;
}

.modal-btn-success {
    padding: 10px 20px;
    background: var(--success);
    border: none;
    color: #fff;
    font-weight: 600;
}

.modal-btn-success:hover {
    background: #218838;
}

.modal-btn-warning {
    padding: 8px 20px;
    background: var(--warning);
    border: none;
    color: #212529;
    font-weight: 600;
}

.modal-btn-warning:hover {
    background: #e0a800;
}

.modal-btn-outline {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-weight: 500;
}

.modal-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* MDB9 modal backdrop override for glassmorphism */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Form inputs glassmorphism */
.form-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}

.form-input:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.12);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.link-sm {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}

.link-sm:hover {
    color: #5a9aff;
    text-decoration: underline;
}

/* Mi Perfil items */
.perfil-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.perfil-item:last-child {
    border-bottom: none;
}

.perfil-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.perfil-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.perfil-value {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

.perfil-edit {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--transition);
}

.perfil-edit:hover {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.perfil-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.perfil-switch .form-check-input {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--glass-border);
}

.perfil-switch .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Quién Lleva */
.quien-btn-yo {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.quien-btn-yo:hover {
    background: rgba(255, 255, 255, 0.15);
}

.quien-separador {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 12px 0;
}

.quien-input-group {
    display: flex;
    gap: 8px;
}

.quien-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}

.quien-input:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.12);
}

.quien-input::placeholder {
    color: var(--text-muted);
}

.quien-btn-agregar {
    padding: 10px 16px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.quien-btn-agregar:hover {
    background: #3367d6;
}

/* Table glassmorphism (Orden de Venta) */
.table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.table thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--glass-border);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
}

.table tbody td {
    padding: 10px 16px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.table tbody tr.table-row-activo {
    background: rgba(66, 133, 244, 0.1);
}

/* Badges de estado para Orden de Venta (E8) */
.estado-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.estado-vendido {
    background: rgba(40, 167, 69, 0.15);
    color: #5fdd7f;
}

.estado-rematando {
    background: rgba(66, 133, 244, 0.15);
    color: #6da8ff;
    animation: pulse-badge 1.5s ease-in-out infinite;
}

.estado-sinvender {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.estado-retirado {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b7a;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Precio venta en tabla */
.precio-venta {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Mesa de Ayuda (E9) */

.btn-ayuda {
    position: relative;
}

/* Panel ayuda desktop: slide lateral izquierdo */
.panel-ayuda {
    position: fixed;
    top: 0;
    left: 0;
    width: 360px;
    height: 100%;
    background: var(--glass-bg);
    border-right: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.3);
    z-index: 45;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.panel-ayuda-abierto {
    transform: translateX(0);
}

.ayuda-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ayuda-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.ayuda-msg-usuario {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ayuda-msg-soporte {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.ayuda-input-wrap {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.ayuda-input-wrap-mobile {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.ayuda-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}

.ayuda-input:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.12);
}

.ayuda-input::placeholder {
    color: var(--text-muted);
}

/* RXI-1527: touch target 44x44 (WCAG 2.5.5). */
.ayuda-btn-enviar {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.ayuda-btn-enviar:hover {
    background: #3367d6;
}

/* Mobile: sheet-ayuda usa misma clase sheet */
.sheet-ayuda {
    z-index: 46;
}

.sheet-orden {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.sheet-orden .panel-title,
.sheet-orden .panel-close {
    color: var(--text-primary);
}

/* Tabla dentro de la sheet-orden (glassmorphism dark) */
.sheet-orden .table {
    color: var(--text-primary);
}

.sheet-orden .table thead th {
    color: var(--text-secondary);
    border-bottom-color: var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
}

.sheet-orden .table tbody td {
    border-bottom-color: var(--glass-border);
    vertical-align: middle;
}

/* Tabla DEPs (reproductores) — densa, glassmorphism dark, tabular-nums */
.panel-deps {
    margin: 16px 0 8px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.panel-deps-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.panel-deps-wrap {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 4px;
}

.panel-deps-table {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.panel-deps-table thead tr:first-child th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    padding: 8px 12px;
    background: rgba(66, 133, 244, 0.10);
    border-bottom: 1px solid rgba(66, 133, 244, 0.25);
    text-align: center;
    white-space: nowrap;
}

.panel-deps-table thead tr:last-child th {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border);
    text-align: center;
    white-space: nowrap;
}

.panel-deps-table thead th + th {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.panel-deps-table tbody td {
    padding: 12px;
    text-align: center;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.panel-deps-table tbody td + td {
    border-left: 1px solid rgba(255, 255, 255, 0.04);
}

.panel-deps-link {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 10px 16px;
    min-height: 40px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}

.panel-deps-link:hover {
    background: #3367d6;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.panel-deps-link:active {
    transform: translateY(0);
}

/* Pedigrees (reproductores y caballos) */
.panel-pedigrees {
    margin: 16px 0 8px;
}

.panel-pedigrees-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.panel-pedigrees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.panel-pedigree-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    transition: var(--transition);
    cursor: pointer;
}

.panel-pedigree-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.panel-pedigree-item.pedigree-light {
    background: #fff;
}

.panel-pedigree-item.pedigree-dark {
    background: rgba(0, 0, 0, 0.35);
}

.panel-pedigree-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Mobile bottom sheet: ajustes de densidad */
@media (max-width: 599px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .panel-deps {
        padding: 12px 14px;
    }
    .panel-deps-table {
        font-size: 12px;
    }
    .panel-deps-table tbody td {
        padding: 10px;
    }
    .panel-pedigrees-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* TV broadcast: tipografia grande para 2-3m de distancia */
.tv-slide-detail .panel-deps {
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    margin: 0;
}

.tv-slide-detail .panel-deps-titulo {
    font-size: clamp(16px, 1.2vw, 22px);
    margin-bottom: 18px;
}

.tv-slide-detail .panel-deps-wrap {
    margin: 0;
    padding: 0;
}

.tv-slide-detail .panel-deps-table {
    font-size: clamp(20px, 1.5vw, 28px);
}

.tv-slide-detail .panel-deps-table thead tr:first-child th {
    font-size: clamp(15px, 1vw, 19px);
    padding: 14px 18px;
}

.tv-slide-detail .panel-deps-table thead tr:last-child th {
    font-size: clamp(13px, 0.85vw, 16px);
    padding: 10px 18px;
}

.tv-slide-detail .panel-deps-table tbody td {
    padding: 18px;
}

.tv-slide-detail .panel-pedigrees-titulo {
    font-size: clamp(16px, 1.2vw, 22px);
    margin-bottom: 18px;
}

.tv-slide-detail .panel-pedigrees-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.sheet-orden .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* RXI-1435: matchea mobile portrait y mobile landscape (touch + altura chica) */
/* RXI-1573: padding 16px (era 12) en mobile asi los btn-glass del topbarRight no quedan pegados al borde derecho. Landscape mantiene 8px (override en body.landscape) por restriccion de espacio horizontal. */
@media (max-width: 599px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .topbar {
        height: 48px;
        padding: 0 16px;
    }

    :root {
        --topbar-height: 48px;
    }


    .btn-video-control {
        font-size: 12px;
    }

    .btn-glass span {
        display: none;
    }

    /* PIP mobile ajuste topbar 48px */
    .pip-mobile {
        top: 52px;
    }

    /* Precio mobile (+3px base) */
    .precio-valor {
        font-size: 23px;
    }

    /* Cliente ganando: precio +20% (mobile portrait) */
    body.estas-ganando .precio-valor {
        font-size: 28px;
    }

    /* Escala mobile +1px */
    .precio-escala {
        font-size: 13px;
    }

    /* RXI-1462: barra de progreso del video mas gruesa para hit area amigable al dedo */
    .video-progress {
        height: 12px;
        border-radius: 6px;
    }

    .video-progress-fill {
        border-radius: 6px;
    }

    /* Bottom area safe area (notch) */
    .bottom-area {
        padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom)));
    }


    /* Bottom sheet mobile: ajuste safe area */
    .sheet {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    .sheet-header .panel-title {
        font-size: 15px;
    }

    /* Precio visible en sheet (fondo blanco) */
    .sheet .precio-actual-label {
        color: var(--text-dark-muted);
    }

    .sheet .precio-actual-valor {
        color: var(--text-dark);
    }

    .panel-divider {
        margin: 0 16px;
    }

    .panel-section:not(:empty) {
        padding: 12px 16px;
    }

    .panel-fotos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* RXI-1463: botones +/- mobile con glass claro translucido (patron iOS media controls sobre video). Se ven como boton solido translucido, no como outline. Forma pill (ovalada) mas comoda para el dedo. */
    /* RXI-1526: touch target ampliado a 64x48 (WCAG 2.5.5 minimo 44, recomendado 48). */
    .precio-row .oferta-btn-menos,
    .precio-row .oferta-btn-mas {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        width: 64px;
        height: 48px;
        font-size: 16px;
        /* override del .rounded-circle de BS (que tiene !important) para quedar pill */
        border-radius: 999px !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .precio-row .oferta-btn-menos:hover,
    .precio-row .oferta-btn-mas:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Precio center padding */
    .precio-center {
        padding: 2px 16px;
    }

}

/* RXI-1425: foldable/tablet/desktop ya no topean el titulo; el hueco del center se ajusta con flex */

@media (min-width: 1025px) {
    .lote-titulo {
        font-size: 24px;
    }
}

/* Mobile Landscape (E10) */

/* Landscape mobile (clase body.landscape aplicada por JS) */

/* Topbar compacta landscape */
/* RXI-1527: topbar landscape subida a 36px para alojar btn-glass 36x36 sin sobresalir. Variable --topbar-height tambien override para que el padding-top del contenido se ajuste. */
body.landscape {
    --topbar-height: 36px;
}

body.landscape .topbar {
    height: 36px;
    padding: 0 8px;
    display: flex;
    align-items: center;
}

body.landscape #topbarLeft,
body.landscape #topbarRight {
    display: flex;
    align-items: center;
}

body.landscape .btn-video-control {
    font-size: 10px;
}

body.landscape .video-progress {
    width: 60px;
    /* RXI-1462: barra mas gruesa para hit area amigable al dedo en landscape */
    height: 7px;
    border-radius: 4px;
}

body.landscape .topbar-logo,
body.landscape #topbarLeft .logo {
    height: 16px;
    width: auto;
}

body.landscape .lote-titulo {
    font-size: 13px;
    /* RXI-1527: line-height alineado a la nueva altura de topbar (36 en vez de 28). */
    line-height: 36px;
    max-width: none;
}

/* RXI-1527: landscape — 36x36 maximo razonable por topbar 28px height. WCAG 44 no entra fisicamente. */
body.landscape .btn-glass {
    width: 36px;
    height: 36px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.landscape .btn-glass span {
    display: none;
}

body.landscape .badge-conectado {
    font-size: 9px;
    padding: 1px 5px;
    line-height: 1;
}

/* Gradientes landscape */
body.landscape .gradient-top {
    height: 50px;
}

body.landscape .gradient-bottom {
    height: 100px;
}

/* PIP rematador landscape */
/* RXI-1586: posicion default del PIP a la izquierda (era right). El usuario lo puede arrastrar a otro lugar si quiere. */
body.landscape .pip-mobile {
    top: 32px;
    left: 8px;
    right: auto;
    width: 120px;
    border-radius: 8px;
}

body.landscape .pip-mobile-label {
    font-size: 9px;
    padding: 1px 6px;
}

body.landscape .pip-mobile-video {
    aspect-ratio: 4 / 5;
}

/* RXI-1578: el selector 1/2/3 del PIP solo existe en desktop (no se renderiza en `ui-celular.js`). Sin regla de display:none necesaria. */

/* Tabs lote landscape: vuelve al center-absoluto arriba */
body.landscape #tabsLote.tabs-lote-mobile {
    top: 32px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

body.landscape .tab-lote {
    font-size: 11px;
    padding: 3px 10px;
}

/* Notificaciones landscape */
body.landscape #notificaciones.notificaciones-mobile {
    bottom: 90px;
    font-size: 12px;
}

body.landscape .notificacion {
    padding: 4px 12px;
    font-size: 12px;
}

/* RXI-1581: el multivideo en mobile vive dentro del panelInfo (.panel-multivideo) en cualquier orientacion. Sin reglas .multivideo-mobile / body.landscape .multivideo-mobile. */

/* Bottom area landscape: replica exacta de .oferta-bar desktop */
/* RXI-bot-landscape: !important para vencer utilities Bootstrap del HTML que tienen !important —
   .flex-column (vence flex-direction:row), .bottom-0/.start-0/.end-0 (vencen pos), .w-100 (vence width) */
body.landscape .bottom-area {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    width: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 32px !important;
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(22, 163, 74, 0.2);
    border: none;
}

/* Precio row landscape: igual que desktop */
/* !important vence el .w-100 del HTML que sino fuerza 100% en cada hijo del row y desborda */
body.landscape .precio-row {
    width: auto !important;
    gap: 6px;
}

body.landscape .precio-valor {
    font-size: 16px;
    color: #000;
    text-shadow: none;
}

/* RXI-1650: precio ganando en landscape proporcional al nuevo base 16px */
body.landscape.estas-ganando .precio-valor {
    font-size: 19px;
}

body.landscape .precio-escala {
    font-size: 10px;
    color: var(--text-dark-secondary);
    font-weight: 600;
}

/* RXI-1650: landscape — botones más chicos (era 44x44 14px). Desktop no afectado. */
body.landscape .oferta-btn-round {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

/* Landscape: la pill ya tiene fondo blanco glass, los -/+ vuelven al estilo solido desktop
   (sino quedan invisibles con el glass blanco translucido del override portrait) */
body.landscape .precio-row .oferta-btn-menos,
body.landscape .precio-row .oferta-btn-mas {
    background: var(--success-hover);
    color: #fff;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Bottom bar landscape: sin fondo propio, inline dentro de la pill */
/* !important vence el .w-100 del HTML por la misma razón que precio-row */
body.landscape .bottom-bar {
    width: auto !important;
    gap: 10px;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: none;
}

/* RXI-1650: landscape — botón Ofertar más chico (era 44px 14px). */
body.landscape .bottom-btn-ofertar {
    flex: 0;
    min-height: 36px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

body.landscape .bottom-btn-ofertar i {
    font-size: 12px;
}

/* Card lote landscape: derecha, arriba de la pill */
body.landscape .card-lote-mobile {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 80px;
    max-width: 280px;
    width: 280px !important;
}

/* RXI-1584: en landscape ocultamos las rows y el divider que va ANTES de las rows.
   El divider que separa localidad/evaluador SI se muestra (selector adyacente para no afectarlo). */
body.landscape #cardLoteRows,
body.landscape .card-lote-evaluador + .card-lote-divider {
    display: none;
}


/* Chat mobile landscape */
body.landscape .chat-mobile {
    bottom: 0;
}

body.landscape .chat-mobile-bar {
    padding: 4px 8px;
}

body.landscape .chat-input {
    font-size: 13px;
    padding: 6px 12px;
}

/* Bottom sheet landscape: panel abierto a la derecha */
body.landscape .sheet {
    max-height: 85vh;
    left: 50%;
    border-radius: 24px 0 0 0;
}

/* Sheet peek landscape: centrado */
body.landscape .sheet.sheet-peek {
    left: 25%;
    right: 25%;
    width: 50%;
    transform: translateY(calc(100% - 20px));
    border-radius: 24px 24px 0 0;
}

/* Sheet abierto landscape: centrado, ancho */
body.landscape .sheet:not(.sheet-peek) {
    left: 15%;
    right: 15%;
    width: 70%;
    max-height: 80vh;
    font-size: 13px;
    border-radius: 24px 24px 0 0;
}

body.landscape .sheet:not(.sheet-peek) .sheet-header {
    padding: 8px 16px;
}

body.landscape .sheet:not(.sheet-peek) .panel-title {
    font-size: 13px;
}

/* Landscape: header compacto con titulo + subtitulo + precio */
body.landscape .panel-close {
    display: none;
}

body.landscape .panel-divider {
    display: none;
}

/* RXI-1582: panel-lote-titulo + subtitulo + #panelLoteInfo SIEMPRE visibles (antes se ocultaban en landscape porque el titulo se duplicaba en el header — eso ya no aplica tras RXI-1577). */

body.landscape .sheet:not(.sheet-peek) .sheet-body {
    padding: 8px 16px;
    font-size: 12px;
}

/* Panel ayuda landscape */
body.landscape .sheet-ayuda {
    max-height: 80vh;
}

body.landscape .ayuda-input {
    font-size: 13px;
}

/* Glassmorphism modals landscape */
body.landscape .modal-glass .modal-dialog {
    margin: 8px auto;
    max-height: 90vh;
}

body.landscape .modal-glass .modal-body {
    max-height: 60vh;
}

/* Landscape foldable/tablet (600-900px) */
@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
    .topbar {
        height: 40px;
        padding: 0 12px;
    }

    :root {
        --topbar-height: 40px;
    }

    .pip-mobile {
        left: auto;
        right: 8px;
        width: 120px;
    }

    .pip-mobile-video {
        aspect-ratio: 4 / 5;
    }

    .bottom-area {
        padding: 6px 16px;
    }

    .precio-valor {
        font-size: 20px;
    }
}

/* Animaciones */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideInBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease;
}

.animate-slideUp {
    animation: slideUp 0.3s ease;
}

.animate-slideRight {
    animation: slideInRight 0.3s ease;
}

.animate-slideBottom {
    animation: slideInBottom 0.3s ease;
}

/* Scrollbar custom */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Escalas fijas para el modo feria (RXI-1471) — pegadas arriba de la barra de oferta (.oferta-bar tiene bottom: 32px) */
.feria-escalas {
    position: fixed;
    bottom: 104px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 24px;
}

.feria-escalas .btn {
    min-width: 70px;
    font-weight: 500;
}

/* TV / Proyeccion — RXI-1475
   Vista autonoma fullscreen sin interaccion. Minimal puro: texto sobre gradients,
   sin pill/card/chip. Reusa tokens globales (--glass-bg, --gradient-top/bottom, etc). */

body.tv-body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: #fff;
}

.tv-video-fondo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Overlay de pista — superpuesto al videoFondo cuando el superadmin pide "Mostrar Pista".
   Precargado con el feed Dolby pista (canalStreamingHibrido) para conmutar instantaneo. */
.tv-video-fondo-pista {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #000;
}

/* Fill horizontal: el iframe ocupa 100vw siempre. Altura proporcional 16:9 (56.25vw),
   centrado vertical. Recorta arriba/abajo si el viewport es mas alto que 16:9.
   !important porque reemplazarVideoIframe (core.app.js) inyecta el iframe con clases
   utility BS5 (.w-100 .h-100) que sin !important sobreescribirian estas reglas. */
body.tv-body .tv-video-fondo iframe,
body.tv-body .tv-video-fondo video,
body.tv-body .tv-video-fondo .dolby-container,
body.tv-body .tv-video-fondo-pista iframe,
body.tv-body .tv-video-fondo-pista video,
body.tv-body .tv-video-fondo-pista .dolby-container {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 100vw !important;
    height: 56.25vw !important;
    border: none !important;
}


.tv-gradient-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.tv-gradient-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 340px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 45%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Status chip flotante (solo visible en desconexion) */
.tv-conexion-wrap {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 6;
    display: flex;
    gap: 8px;
}

/* HERO (top): titulo (texto normal) + badge tipo debajo + precio. Mas arriba, mas chico.
   Target resolucion: 1920x1080. PIP rematador queda DEBAJO del hero (no se solapan). */
.tv-hero {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    padding: 0 32px;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    pointer-events: none;
}

/* RXI-1491: header pre-remate centrado. Coexiste con la publicidad de fondo, se oculta
   cuando arranca el remate y aparece tvHero. */
.tv-header-remate {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
    padding: clamp(8px, 1vw, 16px) clamp(12px, 1.5vw, 24px);
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    pointer-events: none;
}

.tv-header-logo {
    height: clamp(20px, 2vw, 28px);
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.tv-header-titulo {
    font-size: clamp(14px, 1.5vw, 24px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.tv-header-estado {
    font-size: clamp(10px, 1vw, 16px);
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.2;
}

/* hero-left: titulo arriba (texto normal) + badge debajo */
.tv-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

/* Fila horizontal de badges debajo del titulo: categoria + apto china + operacion a termino */
.tv-hero-badges-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tv-hero-badge {
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: 700;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: #16a34a;
}

/* Item #25: plazo al lado del titulo en TV (mismo patron que #12 en cliente).
   flex-direction row, plazo mismo tamaño, separador "|" en medio. */
.tv-hero-titulo {
    font-size: clamp(20px, 1.8vw, 32px);
    font-weight: 500;
    letter-spacing: -0.3px;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.tv-hero-titulo-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-hero-separador {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    flex-shrink: 0;
}

.tv-hero-plazo {
    font-size: inherit;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.tv-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.tv-hero-precio {
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 700;
    letter-spacing: -2.5px;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
}

/* Flash 2s al cambiar el precio (RXI-1489 + RXI-1511) — verde + glow visible para broadcast TV (2-3m), vuelve al estado base */
.tv-hero-precio.tv-precio-flash {
    animation: tv-precio-flash 2000ms ease-out;
}

@keyframes tv-precio-flash {
    0%   { color: #4ade80; text-shadow: 0 0 32px rgba(74, 222, 128, 0.8); }
    70%  { color: #4ade80; text-shadow: 0 0 24px rgba(74, 222, 128, 0.5); }
    100% { color: #fff; text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6); }
}

.tv-hero-mini-badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Banner alerta persistente — tira superior full-width para no estorbar el video.
   bajarMartillo / pausarRemate. Tipografia broadcast (legible a 2-3m). */
.tv-alerta {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 16;
    padding: 22px 56px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 3px solid rgba(245, 158, 11, 0.85);
    color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.tv-alerta-icon {
    font-size: clamp(48px, 5vw, 80px);
    line-height: 1;
    flex-shrink: 0;
}

.tv-alerta-texto {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tv-alerta-label {
    font-size: clamp(14px, 1.2vw, 22px);
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.tv-alerta-mensaje {
    font-size: clamp(24px, 2.6vw, 40px);
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

/* RXI-1610: el precio en el banner alerta debe mantener el mismo tamaño que `.tv-hero-precio` (clamp 48-80) — solo cambia el color a amarillo del aviso. */
.tv-alerta-precio {
    margin-left: auto;
    padding-left: 32px;
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    letter-spacing: -2.5px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.tv-alerta-info {
    border-bottom-color: rgba(66, 133, 244, 0.85);
}
.tv-alerta-info .tv-alerta-icon { color: #60a5fa; }

.tv-alerta-warning {
    border-bottom-color: rgba(245, 158, 11, 0.85);
}
.tv-alerta-warning .tv-alerta-icon { color: #fbbf24; }

.tv-alerta-danger {
    border-bottom-color: rgba(220, 53, 69, 0.85);
}
.tv-alerta-danger .tv-alerta-icon { color: #ef4444; }

@keyframes tv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.88); }
}

/* PIP Rematador TV — IGUAL a cliente desktop (RXI-1612 actualizado). Solo cambia la posicion fija (top/left fija en TV vs bottom/left en cliente). */
/* RXI-1562: z-index 17 para quedar arriba de tv-alerta (16). */
.tv-pip {
    position: fixed;
    top: 130px;
    left: 32px;
    width: 264px;
    height: auto;
    z-index: 17;
    background: linear-gradient(145deg, #1a1a2e, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    transition: opacity 500ms ease, transform 500ms ease;
    display: flex;
    flex-direction: column;
}

.tv-pip .pip-video {
    flex: 0 0 auto;
    aspect-ratio: 3 / 4;
    width: 100%;
    overflow: hidden;
}

.tv-pip .pip-video iframe,
.tv-pip .pip-video video,
.tv-pip .pip-video .dolby-container {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* Tamaños del PIP TV — mismos valores que cliente desktop (.pip / .pip.pip-size-1 / .pip.pip-size-3). */
.tv-pip.pip-size-1 { width: 232px; }
.tv-pip.pip-size-3 { width: 320px; }

.tv-pip.aspect-4-3 .pip-video { aspect-ratio: 4 / 3; }
.tv-pip.aspect-4-3 { width: 320px; }
.tv-pip.aspect-4-3.pip-size-1 { width: 288px; }
.tv-pip.aspect-4-3.pip-size-3 { width: 384px; }

/* LOWER THIRD — ticker discreto bottom, una sola fila. Maximiza fullscreen del video. */
.tv-lower-third {
    position: fixed;
    bottom: 24px;
    left: 32px;
    right: 32px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
    pointer-events: none;
}

.tv-slides {
    flex: 1;
    min-width: 0;
    position: relative;
    min-height: 80px;
}

.tv-slide {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms cubic-bezier(.2, .7, .2, 1), transform 500ms cubic-bezier(.2, .7, .2, 1);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.tv-slide.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

/* Slide con foto (evaluador) — layout horizontal: img + content */
.tv-slide.tv-slide-row {
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.tv-slide-evaluador-img {
    width: clamp(56px, 5vw, 88px);
    height: clamp(56px, 5vw, 88px);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tv-slide-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

/* Estrellas evaluacion: amber para activas, blanco translucido para inactivas */
.tv-star-on {
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.tv-star-off {
    color: rgba(255, 255, 255, 0.22);
}

/* Items label/value en slides — jerarquia tipografica: label sutil + valor protagonista.
   Sin uppercase (no grita). Spacing horizontal entre items. */
.tv-slide-detail .tv-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-right: 22px;
    white-space: nowrap;
}

.tv-slide-detail .tv-item:last-child {
    margin-right: 0;
}

.tv-slide-detail .tv-label {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    letter-spacing: 0.1px;
}

.tv-slide-detail .tv-valor {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* Galeria multivideo — columna vertical right side cuando el lote tiene >1 video.
   Click cambia video. Auto-rotate cada 12s. Activo: borde verde + icono pausa. */
.tv-multivideo {
    position: fixed;
    top: 130px;
    right: 24px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
}

.tv-multivideo-item {
    position: relative;
    width: 110px;
    height: 62px;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.tv-multivideo-item:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.tv-multivideo-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.92);
    font-size: 22px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

.tv-multivideo-item-active {
    border-color: rgba(34, 197, 94, 0.95);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.tv-multivideo-item-active .tv-multivideo-icon {
    color: #22c55e;
}

.tv-slide-hero {
    font-size: clamp(20px, 1.8vw, 30px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: -0.4px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.tv-slide-detail {
    font-size: clamp(14px, 1.1vw, 18px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.3px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.tv-lower-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2px;
}

.tv-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 400ms cubic-bezier(.2, .7, .2, 1);
}

.tv-dot.active {
    width: 28px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
}

/* SPLASH — overlay temporal al entrar un lote nuevo */
/* RXI-1562: z-index 18 para quedar arriba del PIP (17) — overlay full-screen one-shot al entrar lote, debe tapar todo. */
.tv-splash {
    position: fixed;
    inset: 0;
    z-index: 18;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5), rgba(0,0,0,0.75));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
}

.tv-splash.active {
    opacity: 1;
}

.tv-splash-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 8px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
}

.tv-splash-titulo {
    font-size: clamp(56px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -3px;
    color: #fff;
    text-align: center;
    line-height: 1;
    max-width: 80%;
}

.tv-splash-sub {
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.5px;
}

/* REMATE TERMINADO — overlay centrado con precio final gigante */
.tv-terminado {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0.85));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

.tv-terminado.active {
    opacity: 1;
}

.tv-terminado-lote {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 6px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.tv-terminado-label {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 10px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    margin-top: -16px;
}

.tv-terminado-precio {
    font-size: clamp(120px, 14vw, 240px);
    font-weight: 800;
    letter-spacing: -8px;
    color: #fff;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 48px rgba(0, 0, 0, 0.7);
    margin: 0;
}

.tv-terminado-comprador {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4.5px;
    color: #f57c8a;
    text-transform: uppercase;
    padding: 14px 40px;
    border: 1.5px solid rgba(220, 53, 69, 0.55);
    background: rgba(220, 53, 69, 0.12);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Stamp venta de lote (3.5s al cerrar un lote individual) */
.tv-venta-stamp {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: radial-gradient(ellipse at center, rgba(22, 163, 74, 0.45), rgba(0, 0, 0, 0.75));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.tv-venta-stamp.active {
    opacity: 1;
}

.tv-venta-stamp-label {
    font-size: clamp(56px, 8vw, 140px);
    font-weight: 900;
    letter-spacing: 10px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 6px 48px rgba(0, 0, 0, 0.6);
}

.tv-venta-stamp-precio {
    font-size: clamp(40px, 5vw, 80px);
    font-weight: 700;
    letter-spacing: -1px;
    color: #4ade80;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}


/* Respetar prefers-reduced-motion (ya cubierto globalmente pero reforzado para TV) */
@media (prefers-reduced-motion: reduce) {
    .tv-hero-precio,
    .tv-slide,
    .tv-dot,
    .tv-splash,
    .tv-terminado,
    .tv-pip {
        transition: none !important;
        animation: none !important;
    }
}

/* Utilities custom — usadas durante drag (PIP, cards, sheets) en lugar de inline .css() */
.no-transition {
    transition: none !important;
}

.cursor-grabbing {
    cursor: grabbing !important;
}