/* =========================================================
   LA BOLSA ENTRE DEALERS (/panel/bolsa) — solo lo que no está ya en
   panel.css. Todo con prefijo pbo- para que no pise a nadie.
   ========================================================= */

/* ---------- Resumen ----------
   Tres tarjetas: en el teléfono van dos arriba y la tercera a lo ancho, en vez
   de quedarse sola a media fila. */
@media (max-width: 640px) { .pbo-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.pbo-tabs a svg { width: 16px; height: 16px; }

/* ---------- Filtros del mercado ----------
   Un <details>: se pliega sin una línea de código, y en el teléfono empieza
   plegado para que la lista de carros se vea sin bajar. */
.pbo-filtros { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
.pbo-filtros > summary { list-style: none; display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; font-weight: 700; cursor: pointer; user-select: none; }
.pbo-filtros > summary::-webkit-details-marker { display: none; }
.pbo-filtros > summary svg { width: 18px; height: 18px; color: var(--accent); }
.pbo-filtros > summary b { background: var(--accent); color: #fff; border-radius: 999px; font-size: .72rem; padding: 0 .45rem; line-height: 1.5; }
.pbo-filtros > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.pbo-filtros[open] > summary::after { transform: rotate(-135deg); }
.pbo-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .8rem; padding: .9rem 1.1rem .9rem; border-top: 1px solid var(--line); }
.pbo-form .field { margin-bottom: .7rem; min-width: 0; }
.pbo-rango { display: flex; align-items: center; gap: .35rem; }
.pbo-rango > span { color: var(--muted); flex: none; }
.field .pbo-rango input, .field .pbo-rango select { flex: 1 1 0; width: auto; min-width: 0; }
.pbo-form-pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 1000px) { .pbo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) {
  .pbo-form { grid-template-columns: minmax(0, 1fr); }
  .pbo-form-pie .btn { flex: 1; }
}

/* ---------- Cuántos hay y el orden ---------- */
.pbo-resultados { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.pbo-orden { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); }
.pbo-orden select { border: 1px solid var(--line); border-radius: 10px; padding: .38rem .55rem; background: var(--card); color: var(--ink); font-size: .85rem; }
.pbo-aviso-precio { margin-top: -.2rem; }
@media (max-width: 560px) { .pbo-orden { width: 100%; } .pbo-orden select { flex: 1; } }

/* ---------- La tabla del mercado ---------- */
.pbo-caja-tabla { padding-top: .5rem; padding-bottom: .5rem; }
.pbo-tabla td small { display: block; font-size: .74rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.pbo-veh { font-weight: 700; color: var(--ink); }
.pbo-veh:hover { color: var(--accent); }
.pbo-td-veh { min-width: 180px; }
.pbo-td-accion { text-align: right; white-space: nowrap; }
.pbo-tabla tr.pbo-mio { background: #fafbff; }
.pbo-tabla td.pbo-d-warn { color: var(--warn); font-weight: 700; }
.pbo-tabla td.pbo-d-mal { color: var(--danger); font-weight: 700; }
.pbo-of-n { font-weight: 800; color: var(--accent-dark); }
.pbo-ver-of { margin-left: .5rem; }
.pbo-mia { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.pbo-mia small { font-size: .74rem; color: var(--muted); }
.pbo-mia .pbo-contra-txt { color: var(--accent-dark); font-weight: 700; }
/* La cabecera de la columna de botones existe para quien lee con lector de
   pantalla; a la vista sobra. */
.pbo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La posición frente al mercado: el sello y, al lado, el porcentaje. Con pocos
   comparables el sello va punteado: se puede decir, pero no sentar cátedra. */
.pbo-mkt svg { width: 13px; height: 13px; }
.pbo-mkt small { font-weight: 600; opacity: .8; margin-left: .15rem; }
.pbo-mkt.pbo-mkt-poco { background: transparent; outline: 1px dashed currentColor; outline-offset: -1px; }

/* En el teléfono cada carro es una tarjeta: el vehículo arriba, sus seis datos
   en dos filas de tres con su nombre, y el botón a lo ancho. */
@media (max-width: 640px) {
  .pbo-tabla thead { display: none; }
  .pbo-tabla, .pbo-tabla tbody { display: block; }
  .pbo-tabla tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .8rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .pbo-tabla tr:last-child { border-bottom: 0; }
  .pbo-tabla tr.pbo-mio { background: none; }
  .pbo-tabla td { display: block; padding: 0; border: 0; min-width: 0; }
  .pbo-tabla .pn-num { text-align: left; white-space: normal; }
  .pbo-tabla .pbo-td-veh, .pbo-tabla .pbo-td-accion { grid-column: 1 / -1; min-width: 0; }
  .pbo-tabla .pbo-td-accion { text-align: left; white-space: normal; }
  .pbo-tabla .pbo-td-accion:empty { display: none; }
  .pbo-tabla .pbo-td-accion > .btn { width: 100%; }
  .pbo-tabla td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .1rem; }
  .pbo-mia { display: flex; align-items: stretch; }
  .pbo-mia .btn { width: 100%; }
}

.pbo-pag { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.pbo-pag .btn svg { width: 16px; height: 16px; }

/* ---------- Mis ofertas / Recibidas ---------- */
.pbo-estados { display: flex; align-items: center; justify-content: space-between; gap: .5rem .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pbo-estados a.pn-chip { display: inline-flex; align-items: center; }
.pbo-estados p { display: flex; align-items: center; gap: .35rem; }
.pbo-estados p svg { width: 14px; height: 14px; flex: none; }

.pbo-ofertas { list-style: none; display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; }
.pbo-oferta { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
/* La que espera por mí se ve antes de leerla: borde y raya naranjas. */
.pbo-oferta.pbo-toca { border-color: #fdba74; box-shadow: inset 3px 0 0 var(--accent); }
.pbo-oferta.pbo-cerrada-of { background: #fcfcfd; }
.pbo-of-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; }
.pbo-of-cab .pbo-veh { font-size: 1.02rem; min-width: 0; }
.pbo-of-pills { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.pbo-of-pills svg { width: 13px; height: 13px; }

.pbo-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; margin: 0; }
.pbo-cifras > div { background: var(--bg); border-radius: 10px; padding: .5rem .7rem; min-width: 0; }
.pbo-cifras dt { font-size: .72rem; color: var(--muted); font-weight: 600; }
.pbo-cifras dd { margin: 0; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La cifra que está esperando respuesta, y la del trato cerrado. */
.pbo-cifras > .pbo-viva { background: var(--accent-soft); }
.pbo-cifras > .pbo-viva dd { color: var(--accent-dark); }
.pbo-cifras > .pbo-cerrada { background: #dcfce7; }
.pbo-cifras > .pbo-cerrada dd { color: #15803d; }
.pbo-oferta.pbo-cerrada-of .pbo-cifras > div:not(.pbo-cerrada) dd { color: var(--muted); }

.pbo-notas { display: flex; flex-direction: column; gap: .35rem; }
.pbo-nota { font-size: .88rem; background: #f8fafc; border-left: 3px solid var(--line); padding: .4rem .65rem; border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.pbo-nota b { display: block; font-size: .72rem; color: var(--muted); }

.pbo-trato, .pbo-fuera { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; border-radius: 10px; padding: .55rem .75rem; }
.pbo-trato { background: #f0fdf4; color: #166534; }
.pbo-fuera { background: #fffbeb; color: #92400e; }
.pbo-trato svg, .pbo-fuera svg { width: 17px; height: 17px; flex: none; margin-top: .1rem; }

.pbo-of-pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.pbo-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; font-size: .8rem; color: var(--muted); }
.pbo-meta li { display: inline-flex; align-items: center; gap: .3rem; }
.pbo-meta svg { width: 14px; height: 14px; }
.pbo-acciones { display: flex; gap: .45rem; flex-wrap: wrap; margin-left: auto; }
.pbo-acciones .btn svg { width: 15px; height: 15px; }
.pbo-btn-no { color: var(--danger); }
.pbo-btn-no:hover { border-color: #fecaca; }
@media (max-width: 560px) {
  .pbo-acciones { width: 100%; margin-left: 0; }
  .pbo-acciones .btn { flex: 1 1 auto; }
}

/* ---------- Ventanas ---------- */
.pbo-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem .8rem; background: var(--bg); border-radius: 12px; padding: .7rem .85rem; margin: 0 0 1rem; }
.pbo-ctx dt { font-size: .72rem; color: var(--muted); font-weight: 600; }
.pbo-ctx dd { margin: 0; font-weight: 700; font-size: .95rem; }
.pbo-ctx .pn-pill { font-size: .72rem; }
.pn-campos.pbo-tres { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) { .pn-campos.pbo-tres { grid-template-columns: minmax(0, 1fr); } }
.pbo-hasta { display: block; font-size: .74rem; margin-top: .25rem; }
.pbo-sobre { display: flex; gap: .45rem; align-items: flex-start; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.pbo-sobre svg { width: 15px; height: 15px; flex: none; margin-top: .15rem; }
.pbo-explica { margin-bottom: .9rem; }

/* Quién es la otra parte y, con el trato cerrado, su teléfono. */
.pbo-quien { display: flex; align-items: center; gap: .35rem; margin: .1rem 0 .5rem; }
.pbo-quien svg { width: 14px; height: 14px; }
.pbo-contacto { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0 .2rem; }