/* ============================================================
   AJUSTES FINOS
   Etiquetas de estado, densidad de tarjetas, buscador anclado
   y botones de cotización. Se carga después de todo.
   ============================================================ */

/* ============================================================ ETIQUETAS EN LÍNEA */

/* En escritorio la fila de etiquetas ocupaba solo el ancho de la
   imagen (88px) y se apilaban. Ahora cruza toda la tarjeta, así
   "En stock / Agotado" queda al lado de "Nuevo / Actualizado". */
@media(min-width:769px) {
  .card-header {
    grid-template-areas:
      "imagen info"
      "badge  badge"
  }

  .card-badge-area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px
  }
}

/* ============================================================ BUSCADOR (ESCRITORIO) */

@media(min-width:769px) {
  .barra-acciones {
    /* Coincide con el padding lateral de .vista-app (22px) */
    margin-left: -22px;
    margin-right: -22px;
    padding: 8px 22px;
    background: var(--bg);
    box-shadow: 0 8px 16px -14px rgba(61, 42, 30, .55)
  }
}

/* ============================================================ COTIZACIONES: BOTONES A SU MEDIDA */

@media(min-width:769px) {
  .cotizacion-card .card-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
  }

  .cotizacion-card .card-acciones button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 8px 16px;
    min-height: 38px;
    font-size: 13px
  }
}

/* ============================================================ MÓVIL: MÁS PRODUCTOS A LA VISTA */

@media(max-width:768px) {

  /* --- Buscador y botones más bajos --- */
  .barra-acciones {
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 8px
  }

  .buscador-wrap #busqueda,
  .buscador-wrap input[type="text"] {
    min-height: 40px;
    font-size: 16px;   /* no bajar: por debajo de 16 iOS hace zoom al enfocar */
    padding-left: 36px;
    padding-right: 38px;
    border-radius: 11px
  }

  .buscador-icono {
    left: 12px;
    font-size: 13px
  }

  .btn-limpiar {
    width: 28px;
    height: 28px;
    right: 6px;
    font-size: 12px
  }

  .btn-nuevo-producto,
  .btn-ver-desactivados {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 10px
  }

  .categorias-nav-wrapper {
    padding-bottom: 4px
  }

  .pill-categoria {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px
  }

  .resultados-encabezado {
    margin: 6px 0 8px
  }

  .resultados-encabezado h2 {
    font-size: 15px
  }

  .subtitulo-resultados {
    font-size: 11.5px
  }

  /* --- Tarjetas compactas: entran más en pantalla --- */
  .card {
    padding: 8px;
    border-radius: 14px
  }

  .card-info h3 {
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 3px
  }

  .card-info p {
    font-size: 10px;
    margin-bottom: 2px
  }

  .producto-img,
  .sin-imagen {
    max-height: 96px;
    border-radius: 10px
  }

  .precios {
    gap: 4px;
    margin-top: 6px
  }

  .precio-item {
    padding: 5px 8px;
    border-radius: 8px
  }

  .precio-item .tipo {
    font-size: 10px
  }

  .precio-item .valor {
    font-size: 12px;
    font-weight: 800
  }

  .pill-stock,
  .badge-producto {
    font-size: 9.5px;
    padding: 2px 7px
  }

  .card-acciones {
    gap: 5px;
    margin-top: 7px
  }

  .card-acciones button {
    min-height: 32px;
    font-size: 11.5px;
    border-radius: 9px
  }
}

@media(max-width:520px) {
  .card-info h3 {
    font-size: 11.5px
  }

  .precio-item .valor {
    font-size: 11.5px
  }
}

/* ============================================================
   FILTRO DE DISPONIBILIDAD
   Va dentro del propio buscador, a la derecha, para no ocupar
   una franja aparte.
   ============================================================ */

.select-stock {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  max-width: 116px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237b6551' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: background-color .15s, color .15s, border-color .15s
}

.select-stock:hover {
  border-color: var(--gold)
}

/* Cuando hay un filtro puesto se nota, para que no se pase por alto
   que la lista está recortada */
.select-stock.filtrando {
  background-color: #e6f3ea;
  border-color: rgba(47, 143, 78, .45);
  color: var(--green-2)
}

.select-stock.agotados {
  background-color: #f9e7e1;
  border-color: rgba(198, 92, 66, .45);
  color: var(--danger-2)
}

/* El campo deja lugar al desplegable y la ✕ se corre a su izquierda */
#vista-inventario .buscador-wrap #busqueda {
  padding-right: 168px
}

#vista-inventario .buscador-wrap .btn-limpiar {
  right: 128px
}

@media(max-width:768px) {
  /* El buscador crece un poco para que el desplegable tenga
     un área de toque cómoda sin quedar apretado */
  #vista-inventario .buscador-wrap #busqueda {
    min-height: 46px;
    padding-right: 178px
  }

  .select-stock {
    height: 38px;
    max-width: 128px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 26px 0 12px;
    background-position: right 9px center;
    background-size: 11px 7px;
    border-radius: 11px
  }

  #vista-inventario .buscador-wrap .btn-limpiar {
    right: 138px;
    width: 30px;
    height: 30px
  }
}

@media(max-width:380px) {
  .select-stock {
    max-width: 116px;
    font-size: 13px;
    padding: 0 24px 0 10px
  }

  #vista-inventario .buscador-wrap #busqueda {
    padding-right: 164px
  }

  #vista-inventario .buscador-wrap .btn-limpiar {
    right: 126px
  }
}

/* ============================================================
   BOTÓN ✕ DEL BUSCADOR — alineación

   Estaba desalineado porque heredaba altura del contenedor en vez
   de centrarse respecto al campo. Se ancla al centro real.
   ============================================================ */

.buscador-wrap {
  position: relative;
  align-items: center
}

.btn-limpiar {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  display: none;
  place-items: center;
  line-height: 0
}

.btn-limpiar.visible {
  display: grid
}

.btn-limpiar:hover {
  transform: translateY(-50%) rotate(90deg)
}

/* Dentro del buscador de inventario convive con el desplegable */
#vista-inventario .btn-limpiar {
  right: 128px
}

@media(max-width:768px) {
  #vista-inventario .btn-limpiar {
    right: 138px
  }

  .btn-limpiar {
    right: 7px
  }
}

@media(max-width:380px) {
  #vista-inventario .btn-limpiar {
    right: 126px
  }
}

/* ============================================================
   ✕ DEL BUSCADOR — posición definitiva

   Regla general: pegada al borde derecho del campo.
   Solo el buscador de inventario la corre hacia la izquierda,
   porque ahí convive con el desplegable de disponibilidad.
   ============================================================ */

.buscador-wrap .btn-limpiar {
  right: 8px
}

#vista-inventario .buscador-wrap .btn-limpiar {
  right: 128px
}

/* Los buscadores sin desplegable dejan lugar solo para la ✕ */
#vista-cotizaciones .buscador-wrap input[type="text"],
.modal-cotizacion-contenido .buscador-cot input[type="text"] {
  padding-right: 44px !important
}

@media(max-width:768px) {
  .buscador-wrap .btn-limpiar {
    right: 7px
  }

  #vista-inventario .buscador-wrap .btn-limpiar {
    right: 138px
  }

  #vista-cotizaciones .buscador-wrap input[type="text"],
  .modal-cotizacion-contenido .buscador-cot input[type="text"] {
    padding-right: 40px !important
  }
}

@media(max-width:380px) {
  #vista-inventario .buscador-wrap .btn-limpiar {
    right: 126px
  }
}