/* Narvaja Avisos — campanita, popups, alarma, grilla viva */

/* ---------- Campanita junto al nombre ---------- */
#navis-campanita {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-right: 14px;
    vertical-align: middle;
    font-size: 20px;
    color: inherit;
}
#navis-campanita .dashicons-bell { font-size: 20px; width: 20px; height: 20px; }
#navis-campanita svg { width: 20px; height: 20px; }
/* (regla unificada más abajo, junto a .navis-campana-lote — 2026-08-28) */
#navis-badge {
    position: absolute;
    top: -6px; right: -8px;
    background: #333; /* negro del sitio: se ve sobre el azul y sobre el header blanco */
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 9px;
    text-align: center;
    font-weight: 700;
    padding: 0 3px;
    font-family: sans-serif;
}
#navis-campanita.navis-campanita-flotante {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 99998;
    background: #0b3450; /* azul marino del sitio (bloque nosotros) */
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 2px solid #fff; /* que no se camufle sobre los fondos azules */
    text-align: center;
    line-height: 36px;
    box-shadow: 0 2px 8px rgba(0,0,0,.30);
}
#navis-campanita.navis-campanita-flotante .dashicons-bell { font-size: 18px; width: 18px; height: 18px; line-height: 38px; }
#navis-campanita.navis-campanita-flotante #navis-badge { top: -3px; right: -3px; }

/* ---------- Panel de avisos ---------- */
#navis-panel {
    position: fixed;
    top: 60px; right: 16px;
    width: 330px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 30px rgba(0,0,0,.28);
    z-index: 99999;
    display: none;
    overflow: hidden;
    font-size: 13px;
    color: #333;
}
.navis-panel-head {
    padding: 10px 14px;
    font-weight: 700;
    background: #0b3450;
    color: #fff;
    position: relative;
}
.navis-panel-gear { position: absolute; right: 10px; top: 9px; cursor: pointer; }
.navis-panel-prefs {
    padding: 8px 14px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.navis-panel-prefs label { display: block; margin: 4px 0; cursor: pointer; }
#navis-panel-lista { max-height: 52vh; overflow-y: auto; overflow-x: hidden; }
/* × individual por notificación + swipe horizontal para eliminar
   (touch-action pan-y: el scroll vertical del panel sigue mandando) */
.navis-item-x {
    position: absolute;
    top: 4px; right: 6px;
    width: 20px; height: 20px;
    font-size: 14px; line-height: 1;
    color: #bbb; cursor: pointer;
    text-align: center;
    z-index: 2;
}
.navis-item-x:hover { color: #c81e1e; }
.navis-item { touch-action: pan-y; }
.navis-item {
    display: block;
    position: relative;
    padding: 9px 28px 9px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    text-decoration: none;
}
.navis-item:hover { background: #f7f7f7; color: #333; }
.navis-item.no-leida { background: #fff5f5; }
.navis-item-titulo { font-weight: 700; }
.navis-item-hace { color: #999; font-size: 11px; }
.navis-item-texto { color: #555; margin-top: 2px; }
/* Colores forzados: el tema dejaba el título invisible salvo al hover */
#navis-panel .navis-item, #navis-panel .navis-item:visited { color: #333; }
#navis-panel .navis-item-titulo { color: #0b3450 !important; }
#navis-panel .navis-item-texto { color: #555; }
#navis-panel .navis-item-hace { color: #999; }
.navis-vacia { padding: 16px; text-align: center; color: #999; }

/* ---------- Popups ---------- */
#navis-popups {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 32px);
}
.navis-popup {
    position: relative;
    width: 330px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
    border-left: 5px solid #0b3450;
    padding: 12px 12px 12px 84px;
    min-height: 84px;
    font-size: 13px;
    color: #333;
    animation: navis-entra .3s ease-out;
}
@keyframes navis-entra { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.navis-popup.navis-tipo-alarma { border-left-color: #ff9800; }
.navis-popup.navis-tipo-estado, .navis-popup.navis-tipo-liquidacion { border-left-color: #2e7d32; }
.navis-popup-foto {
    position: absolute;
    left: 10px; top: 12px;
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 8px;
}
.navis-popup-x {
    position: absolute;
    top: 2px; right: 4px;
    background: none !important; border: none !important;
    width: 26px; height: 26px;
    font-size: 18px !important; cursor: pointer;
    color: #999; line-height: 1;
    padding: 0 !important; margin: 0;
    min-width: 0; min-height: 0;
}
.navis-popup-x:hover { color: #333; }
.navis-popup-titulo { font-weight: 700; margin-bottom: 2px; padding-right: 22px; }
.navis-popup-texto { color: #555; margin-bottom: 4px; }
.navis-popup-precio { font-weight: 700; font-size: 15px; color: #111; margin: 2px 0; }
.navis-popup-estado { font-weight: 700; font-size: 12px; letter-spacing: .3px; margin-bottom: 6px; min-height: 14px; }
.navis-popup-estado.ganando { color: #1e8b1e; }
.navis-popup-estado.perdiendo { color: #c81e1e; }
/* Arrastrable: manito en el cuerpo; los controles conservan su cursor */
.navis-popup { cursor: grab; touch-action: none; }
.navis-popup.navis-arrastrando { cursor: grabbing; opacity: .96; user-select: none; }
.navis-popup a, .navis-popup button { cursor: pointer; }
.navis-popup input { cursor: text; }
.navis-popup-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Ofertar siempre a la derecha: el enlace/botón secundario va primero y el
   input estira empujando Ofertar al extremo derecho */
.navis-popup-acciones .navis-btn-ofertar { margin-left: auto; }
.navis-popup-monto {
    flex: 1;
    min-width: 80px;
    width: auto;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

/* ---------- Botones ---------- */
.navis-btn {
    display: inline-block;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    background: #eee;
    color: #333;
}
.navis-btn:hover { background: #ddd; color: #333; }
/* Ofertar: celeste de la grilla, UN SOLO color de acción en todo el sitio.
   !important decorativo: el tema Hello intenta pisar los botones (se vio un
   borde rosado). Solo color/fondo/borde — no toca posición ni lógica. */
.navis-btn-ofertar, .navis-btn-si {
    background: #007cba !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
}
.navis-btn-ofertar:hover, .navis-btn-si:hover { background: #0b3450 !important; color: #fff !important; }
/* Pulso suave (halo, sin mover nada): incentiva la oferta sin marear */
@keyframes navis-pulso-ofertar {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,124,186,.45); }
    50%      { box-shadow: 0 0 0 7px rgba(0,124,186,0); }
}
/* Pulso: en los popups siempre; en la ficha (botón nativo) siempre;
   en la grilla SOLO cuando vas perdiendo (.navis-pierde lo pone pintarGrilla) */
.navis-btn-ofertar,
.ans-auction-bid,
.btn-ofertar-original.navis-pierde { animation: navis-pulso-ofertar 2.2s infinite; }
/* Vas ganando en la ficha: el pulso se apaga (lo pone pulsoNativo en JS) */
.ans-auction-bid.navis-sin-pulso { animation: none !important; }
.navis-btn-ir { background: #333; color: #fff; }
.navis-btn-ir:hover { background: #000; color: #fff; }
/* "Ingresar para ofertar": solo anónimos en la ficha. Discreto: borde celeste,
   fondo blanco; al pasar el mouse se rellena. Clase propia, no pisa nada. */
.navis-btn-ingresar {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #007cba;
    border-radius: 6px;
    background: #fff;
    color: #007cba;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.navis-btn-ingresar:hover { background: #007cba; color: #fff; }

/* ---------- Modales ---------- */
.navis-modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 100002;
    display: none;
}
.navis-modal {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    font-size: 14px;
    color: #333;
}
.navis-modal h4 { margin: 0 0 12px; padding-right: 24px; }
.navis-modal-texto { margin-bottom: 14px; white-space: pre-line; }
.navis-modal-botones { margin-top: 14px; display: flex; gap: 8px; justify-content: space-between; }
/* X de cierre del modal de avisos (arriba a la derecha) */
.navis-modal-x {
    position: absolute;
    top: 6px; right: 8px;
    background: none !important; border: none !important;
    width: 26px; height: 26px;
    font-size: 18px !important;
    color: #999; cursor: pointer;
    line-height: 1; padding: 0 !important; margin: 0;
    min-width: 0; min-height: 0;
}
.navis-modal-x:hover { color: #333; }
.navis-check { display: block; margin: 8px 0; cursor: pointer; }
.navis-modal-estado { min-height: 18px; color: #2e7d32; font-weight: 600; margin-top: 8px; }
.navis-canales-label { font-size: 12px; color: #777; margin: 10px 0 2px; }
#nm-min, #navis-minutos {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
}
#nm-min-wrap { margin: 4px 0 4px 24px; font-size: 13px; color: #555; }
#nm-canales, #navis-canales { margin-top: 6px; }

/* ---------- Modal de oferta ---------- */
.navis-modal-oferta { text-align: center; }
.navis-oferta-foto {
    width: 110px; height: 110px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
}
.navis-oferta-titulo { font-weight: 700; margin-bottom: 4px; }
.navis-oferta-actual { color: #0b3450; font-weight: 700; margin-bottom: 12px; }
/* Texto legal dentro del popup de oferta (2026-08-19) */
.navis-oferta-legal {
    margin: 10px 0 4px;
    padding: 8px 10px;
    background: #fff8e1;
    border: 1px solid #f0dfa8;
    border-radius: 6px;
    font-size: 12px;
    color: #6d5b00;
}
.navis-modal-estado { color: #b71c1c; font-size: 13px; margin: 6px 0; min-height: 18px; }
.navis-oferta-fila { display: flex; gap: 8px; justify-content: center; }
#nm-monto {
    width: 140px;
    padding: 8px 10px;
    font-size: 17px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
}
.navis-oferta-nota { font-size: 11px; color: #999; margin-top: 8px; }

/* ---------- Cuadro de alarma en la ficha ---------- */
#navis-alarma-box {
    border: 1px solid #e0c9cb;
    background: #fff8f8;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 14px;
    max-width: 520px;
}
#navis-alarma-box h4 { margin: 0 0 10px; font-size: 15px; }
.navis-alarma-fila { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
#navis-minutos-wrap { margin-left: 24px; font-size: 13px; color: #555; }
#navis-alarma-estado { min-height: 18px; font-weight: 600; color: #2e7d32; margin-top: 6px; }
#navis-alarma-nota { margin-top: 8px; color: #666; }
#navis-probar-sonido { font-size: 12px; padding: 4px 10px; }

/* ---------- Texto de auto-oferta ---------- */
/* FICHA: el reloj va SUELTO, sin recuadro (como en producción) y el recuadro
   celeste envuelve SOLO la botonera de oferta + la explicación de auto-oferta.
   El ANS maqueta con float y sin clear: los elementos flotantes se "montaban"
   visualmente dentro del recuadro (se vio 2026-08-21). Solo props decorativas,
   solo en .single-product: no toca grilla ni lógica. */
.single-product .ans-auction-date-ranges {
    clear: both !important;
    background: none !important;
    border: none !important;
}
.single-product .ans-auction-countdown-timer .ans-auction-timer {
    background: none !important;
    border: none !important;
}
.single-product .ans-auction-form .ans-auction-bid-now {
    clear: both !important;
    box-sizing: border-box !important;
    background: #eef6ff !important;
    border: 1px solid #bcd6f5 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 14px 4px !important;
    margin: 10px 0 0 !important;
    max-width: 520px;
    height: auto !important;
    overflow: hidden; /* clearfix: contiene a sus hijos flotantes */
}
.navis-autooferta {
    clear: both !important;
    background: #eef6ff;
    border: 1px solid #bcd6f5;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 6px 14px 10px;
    font-size: 13px;
    color: #1d4e89;
    margin: 0 0 10px;
    max-width: 520px;
    box-sizing: border-box;
}

/* ---------- Botones en la grilla ---------- */
.navis-campana-lote {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 5;
    /* Sin círculo (2026-08-28): la campana SOLA, estilo corazón de "me gusta".
       Blanca con sombra proyectada para verse sobre cualquier foto;
       se pinta ámbar cuando el lote tiene avisos activos.
       !important SOLO decorativo: en la ficha, el widget de galería de Elementor
       intenta pisar estos colores. No toca tamaño ni posición. */
    background: transparent !important;
    border: none !important;
    box-sizing: border-box;
    width: 28px; height: 28px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    color: rgba(255,255,255,.92) !important;
}
.navis-campana-lote svg {
    width: 22px; height: 22px;
    margin-top: 3px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.navis-campana-lote:hover { transform: scale(1.12); }
/* Con aviso activo: la campana se pinta ámbar */
.navis-campana-lote.activa { color: #f5a800 !important; animation: navis-latido 2s infinite; }
@keyframes navis-latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.navis-campana-lote .dashicons-bell { font-size: 18px; width: 18px; height: 18px; line-height: 30px; }

.btn-ofertar-original {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #007cba; /* celeste, igual que "Ver mis subastas" (invertido 2026-08-19) */
    color: #fff !important;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 12px 0 0;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: .5px;
    text-align: center;
    white-space: nowrap;
}
.btn-ofertar-original:hover { background: #0b3450; }

.navis-precio-flash { color: #0b3450 !important; transition: color .3s; }

.navis-mano-badge {
    position: absolute;
    bottom: 8px; left: 8px;
    z-index: 6;
    background: #ff9800;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    animation: navis-latido 1.2s infinite;
}
.navis-modal-mano {
    background: #fff7e8;
    border: 1px solid #ffd89a;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 10px;
}

/* ---------- Ficha viva (limpieza 2026-08-17) ---------- */
.navis-ficha-chip {
    display: inline-block;
    margin: 4px 0 8px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    background: #eceff1;
    color: #546e7a;
}
.navis-chip-ganando { background: #e7f6e7; color: #2e7d32; }
.navis-chip-superado { background: #fff3e0; color: #e65100; }
.navis-chip-cerrada { background: #37474f; color: #fff; }
.navis-mano-badge-ficha {
    display: inline-block;
    margin: 4px 0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    background: #ff9800;
    color: #fff;
    animation: navis-latido 1.2s infinite;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .btn-ofertar-original { margin: 10px 0 0; }
    /* bottom: 90px → los avisos quedan POR ENCIMA del botón flotante de
       WhatsApp (pedido Germán 2026-08-19) */
    #navis-popups { right: 8px; bottom: 90px; left: 8px; align-items: stretch; }
    .navis-popup { width: auto; }
    #navis-panel { right: 8px; left: 8px; width: auto; }
}

/* ---------- ✕ cerrar modal (esquina superior derecha) ---------- */
.navis-modal-x {
    position: absolute;
    top: 6px; right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    z-index: 2;
}
.navis-modal-x:hover { color: #000; }

/* ---------- Nota de vinculación Telegram (legible sobre blanco) ---------- */
.navis-vinc-nota { color: #666 !important; }
.navis-vinc-nota a { color: #007cba !important; text-decoration: underline; }

/* ---------- Recomendación en "avisame antes de que cierre" ---------- */
.navis-reco {
    font-size: 11px;
    color: #666;
    font-style: italic;
    margin: 4px 0 8px;
}

/* Ocultar carteles de estado del plugin de subastas en la ficha
   (quedan solo: Oferta actual + nuestro chip + "Subasta con modalidad auto oferta") */
.single-product p.ans-auction-item-condition,
.single-product p.ans-auction-winning-notice,
.single-product p.ans-auction-highest-bidder-notice,
.single-product p.ans-auction-highest-bidder-amount,
.single-product p.ans-auction-highest-bidder-proxy-amount,
.single-product p.ans-highest-bidder-rejected-notice {
    display: none !important;
}

/* Tips y condiciones en la grilla (2026-08-22): enlace de texto sutil,
   sin caja cuando está cerrado (el tema pinta los <button> de rojo). */
.navis-tips-grilla { margin: 2px 0 10px; }
.navis-tips-toggle { background: none !important; border: 0 !important; padding: 0 !important;
    font: inherit !important; font-size: 15px !important; font-weight: 400 !important;
    color: #555 !important; cursor: pointer; text-decoration: underline;
    text-underline-offset: 3px; box-shadow: none !important; }
.navis-tips-toggle:hover { color: #1a6d9e !important; background: none !important; }
.navis-tips-flecha { display: inline-block; transition: transform .2s; text-decoration: none; }
.navis-tips-grilla.abierto .navis-tips-flecha { transform: rotate(90deg); }
.navis-tips-cuerpo { display: none; margin-top: 10px; padding: 12px 18px 14px;
    border: 1px solid #e3e3e3; border-radius: 8px; background: #fafafa;
    max-height: 380px; overflow-y: auto; font-size: 15px; line-height: 1.6; color: #333; }
.navis-tips-cuerpo p { margin: 0 0 10px; }
.navis-tips-sub { margin-top: 16px !important; font-size: 15px; color: #1a6d9e; }