/* ============================================================
   COTIZACIONES
   ============================================================ */

.cotizaciones-lista {
  display: grid;
  gap: 12px
}

.cotizacion-card {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.cotizacion-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px
}

.cotizacion-numero {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--gold-2);
  text-transform: uppercase;
  margin-bottom: 2px
}

.cotizacion-card h3 {
  margin: 0;
  font-size: 17px;
  color: var(--title);
  text-transform: capitalize
}

.cotizacion-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-soft)
}

.cotizacion-total-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0
}

.cotizacion-total {
  font-size: 19px;
  font-weight: 800;
  color: var(--title);
  white-space: nowrap
}

.estado-cot {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase
}

.estado-cot.borrador {
  background: #efe7db;
  color: #7b6551
}

.estado-cot.pagado {
  background: #dfe9f5;
  color: #2f5c8f
}

.estado-cot.enviado {
  background: #dff0e2;
  color: var(--green-2)
}

.btn-secundario-mini {
  background: #fffaf3;
  color: var(--primary);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700
}

.btn-secundario-mini:hover {
  background: #f6ecdd
}

/* ---------------- Modal de cotización ---------------- */

.modal-cotizacion-contenido {
  max-width: 860px
}

.grid-datos-cliente {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.bloque-cotizacion {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2)
}

.bloque-cotizacion h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .4px;
  color: var(--title);
  text-transform: uppercase
}

.resultados-cot {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  max-height: 230px;
  overflow-y: auto
}

.pista-busqueda {
  margin: 6px 0;
  font-size: 13px;
  color: var(--text-soft)
}

.resultado-producto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .15s
}

.resultado-producto:hover {
  border-color: var(--gold)
}

.resultado-datos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0
}

.btn-anadir-item {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff8ef;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: filter .14s, transform .12s
}

.btn-anadir-item:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px)
}

.btn-anadir-item:disabled {
  background: var(--surface-2);
  color: var(--text-soft);
  cursor: not-allowed
}

.resultado-nombre {
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.resultado-nombre em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-soft);
  font-size: 13px
}

.resultado-precios {
  font-size: 12px;
  color: var(--gold-2)
}

/* ---------------- Selección de unidad ---------------- */

.seleccion-producto {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--gold);
  background: #fffdf8
}

.seleccion-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  text-transform: capitalize
}

.seleccion-titulo span {
  color: var(--text-soft);
  font-size: 13px
}

.seleccion-campos {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: 10px;
  margin-bottom: 12px
}

.seleccion-campos label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft)
}

.seleccion-campos input,
.seleccion-campos select {
  min-height: 42px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text)
}

/* ---------------- Tabla de ítems ---------------- */

.tabla-items {
  display: grid;
  gap: 4px
}

.fila-item {
  display: grid;
  grid-template-columns: 1.9fr 1.2fr 1.25fr 1.15fr .9fr 38px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px
}

.fila-item.encabezado {
  background: transparent;
  border: none;
  padding-bottom: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-soft)
}

.item-descripcion {
  font-weight: 700;
  text-transform: capitalize
}

.item-unidad {
  color: var(--text-soft)
}

.item-subtotal {
  font-weight: 800;
  color: var(--title)
}

.input-mini {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 13px
}

.btn-quitar-item {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f7e2dc;
  color: var(--danger-2);
  font-weight: 800;
  line-height: 1
}

.btn-quitar-item:hover {
  background: var(--danger);
  color: #fff
}

.estado-vacio-mini {
  margin: 0;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm)
}

/* ---------------- Totales ---------------- */

.fila-descuento {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px
}

.fila-descuento label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft)
}

.fila-descuento input {
  width: 120px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  text-align: right
}

.totales-cot {
  margin: 12px 0 0 auto;
  width: min(100%, 280px);
  font-size: 14px
}

.linea-total {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  color: var(--text-soft)
}

.linea-total.grande {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 2px solid var(--gold);
  font-size: 18px;
  font-weight: 800;
  color: var(--title)
}

.modal-botones-cot {
  flex-wrap: wrap
}

.btn-imprimir {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  color: #fff8ef !important
}

.select-filtro {
  min-height: 46px;
  padding: 0 12px;
  border-radius: 13px;
  border: 1px solid var(--line-strong);
  background: #fffdfa;
  color: var(--text);
  font-weight: 600
}

/* ---------------- Móvil ---------------- */

@media(max-width:768px) {
  .grid-datos-cliente {
    grid-template-columns: 1fr
  }

  .seleccion-campos {
    grid-template-columns: 1fr 1fr;
  }

  .seleccion-campos label:first-child {
    grid-column: 1/-1
  }

  .fila-item {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    position: relative;
    padding: 10px 40px 10px 10px
  }

  .fila-item.encabezado {
    display: none
  }

  .item-descripcion {
    grid-column: 1/-1
  }

  .btn-quitar-item {
    position: absolute;
    right: 8px;
    top: 8px
  }

  .cotizacion-cabecera {
    flex-direction: column;
    gap: 8px
  }

  .cotizacion-total-area {
    flex-direction: row;
    align-items: center;
    align-self: flex-start
  }

  .totales-cot {
    width: 100%
  }
}

/* ---------------- Control de cantidad (+ / −) ---------------- */

.control-cantidad {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff
}

.control-cantidad input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: transparent
}

.control-cantidad input:focus {
  outline: none;
  box-shadow: none
}

.btn-cant {
  flex: 0 0 auto;
  width: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background .14s, color .14s
}

.btn-cant:hover {
  background: var(--gold);
  color: #fff8ef
}

.btn-cant:active {
  transform: scale(.94)
}

/* Versión chica, dentro de la tabla de ítems */
.control-cantidad-mini {
  display: inline-flex;
  width: 100%;
  border-radius: 9px
}

.control-cantidad-mini .btn-cant {
  width: 28px;
  font-size: 15px
}

.control-cantidad-mini .input-mini {
  min-height: 32px;
  padding: 0 2px;
  font-size: 12.5px
}

@media(max-width:768px) {
  .btn-cant {
    width: 44px;   /* objetivo cómodo para el dedo */
    font-size: 20px
  }

  .control-cantidad-mini .btn-cant {
    width: 34px;
    font-size: 17px
  }
}

/* ---------------- Presentación y precio bloqueado ---------------- */

.select-presentacion {
  width: 100%;
  min-height: 34px;
  padding: 0 6px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 12.5px;
  color: var(--text);
  text-transform: capitalize
}

.select-presentacion:disabled {
  background: var(--surface-2);
  color: var(--text-soft)
}

.campo-precio {
  display: flex;
  align-items: stretch;
  gap: 4px
}

.campo-precio .input-mini {
  background: var(--surface-2);
  color: var(--text-soft);
  cursor: default
}

/* Desbloqueado: se nota que ahora sí se puede escribir */
.campo-precio.abierto .input-mini {
  background: #fffdf6;
  color: var(--text);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(180, 135, 58, .18);
  cursor: text;
  font-weight: 700
}

.btn-editar-precio {
  flex: 0 0 auto;
  width: 30px;
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s, border-color .14s
}

.btn-editar-precio:hover {
  background: var(--gold);
  border-color: var(--gold)
}

.campo-precio.abierto .btn-editar-precio {
  background: #fdf3e3;
  border-color: var(--gold)
}

.ayuda-bloque {
  margin: -4px 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft)
}

@media(max-width:768px) {
  .resultado-producto {
    flex-wrap: wrap
  }

  .btn-anadir-item {
    width: 100%;
    min-height: 40px
  }

  .fila-item {
    grid-template-columns: 1fr 1fr
  }

  .item-descripcion {
    grid-column: 1/-1
  }

  .item-subtotal {
    grid-column: 1/-1;
    text-align: right;
    padding-top: 2px;
    border-top: 1px dashed var(--line);
    margin-top: 2px
  }

  .btn-editar-precio {
    width: 36px
  }
}

/* ============================================================
   COTIZACIÓN: cabecera más compacta
   Los campos de cliente, contacto y el buscador se achican para
   que la tabla de la cotización quede a la vista sin scrollear.
   La lista de resultados NO se toca: ahí el tamaño está bien.
   ============================================================ */

.modal-cotizacion-contenido .grid-datos-cliente {
  gap: 10px
}

.modal-cotizacion-contenido .grid-datos-cliente label {
  margin: 0 0 4px !important;
  font-size: 12px
}

.modal-cotizacion-contenido .grid-datos-cliente input {
  min-height: 36px !important;
  height: 36px;
  padding: 0 10px !important;
  font-size: 13.5px;
  margin-bottom: 0 !important
}

/* Buscador dentro del modal */
.modal-cotizacion-contenido .buscador-cot {
  width: 100%;
  flex: none
}

.modal-cotizacion-contenido .buscador-cot input[type="text"] {
  min-height: 36px !important;
  height: 36px;
  padding: 0 38px 0 34px !important;
  font-size: 13.5px;
  border-radius: 11px
}

.modal-cotizacion-contenido .buscador-cot .buscador-icono {
  left: 11px;
  font-size: 12px
}

.modal-cotizacion-contenido .buscador-cot .btn-limpiar {
  width: 26px;
  height: 26px;
  right: 6px;
  font-size: 11px
}

/* Menos aire entre bloques */
.modal-cotizacion-contenido .bloque-cotizacion {
  margin-top: 12px;
  padding: 11px 12px
}

.modal-cotizacion-contenido .bloque-cotizacion h3 {
  margin-bottom: 8px;
  font-size: 13px
}

.modal-cotizacion-contenido .ayuda-bloque {
  margin: -2px 0 9px;
  font-size: 12px
}

.modal-cotizacion-contenido .resultados-cot {
  margin-top: 8px
}

@media(max-width:768px) {
  .modal-cotizacion-contenido .grid-datos-cliente input,
  .modal-cotizacion-contenido .buscador-cot input[type="text"] {
    min-height: 38px !important;
    height: 38px;
    font-size: 16px    /* 16px evita el zoom automático de iOS al enfocar */
  }

  .modal-cotizacion-contenido .bloque-cotizacion {
    margin-top: 10px;
    padding: 10px
  }
}

/* ============================================================
   RESULTADOS: sin desplazamiento lateral
   El nombre largo empujaba el botón "+ Añadir" fuera del ancho,
   y eso permitía deslizar en diagonal con el trackpad.
   ============================================================ */

.resultados-cot {
  overflow-x: hidden;          /* no hay nada que ver a los costados */
  overscroll-behavior: contain; /* el scroll no se contagia al modal */
  padding-right: 6px           /* aire para la barra de desplazamiento */
}

.resultado-producto {
  max-width: 100%
}

.resultado-datos {
  flex: 1 1 auto;
  min-width: 0                 /* deja que el texto se ajuste en vez de empujar */
}

.resultado-nombre {
  min-width: 0;
  overflow-wrap: anywhere      /* un nombre larguísimo corta, no desborda */
}

.resultado-precios {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

@media(max-width:768px) {
  .btn-anadir-item {
    max-width: 100%
  }
}

/* ---------------- Botón "Ver más" del buscador ---------------- */

.btn-ver-mas-cot {
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s
}

.btn-ver-mas-cot:hover {
  background: var(--surface-2);
  border-color: var(--gold);
  border-style: solid
}

.btn-ver-mas-cot:disabled {
  opacity: .6;
  cursor: wait
}

/* Al paginar, la lista puede crecer: se le da más alto disponible */
.resultados-cot {
  max-height: 320px
}

/* ============================================================
   TIPO DE DOCUMENTO: venta en tienda o cotización de envío
   ============================================================ */

.selector-tipo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2)
}

.opcion-tipo {
  min-height: 44px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s
}

.opcion-tipo:hover {
  color: var(--text)
}

.opcion-tipo.activa {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(61, 42, 30, .12)
}

.opcion-tipo[data-tipo="venta"].activa {
  color: var(--green-2)
}

.opcion-tipo[data-tipo="cotizacion"].activa {
  color: var(--gold-2)
}

/* ---------------- Etiqueta en el listado ---------------- */

.cotizacion-datos {
  min-width: 0
}

.cotizacion-encabezado-linea {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px
}

.etiqueta-tipo {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap
}

.etiqueta-tipo.venta {
  background: #e2f2e6;
  color: var(--green-2)
}

.etiqueta-tipo.cotizacion {
  background: #fdf3e3;
  color: var(--gold-2)
}

.cotizacion-contacto {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text)
}

.sin-dato {
  color: var(--text-soft);
  font-weight: 400;
  font-style: italic
}

/* ---------------- Ítem manual ---------------- */

.btn-item-manual {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gold);
  background: #fffdf6;
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s
}

.btn-item-manual:hover {
  background: #fdf3e3
}

.fila-manual {
  border-left: 3px solid var(--gold);
  background: #fffdf6
}

.input-descripcion-manual {
  font-weight: 700 !important;
  text-align: left !important
}

.fila-manual .input-mini {
  background: #fff;
  color: var(--text)
}

/* ---------------- Destino del envío ---------------- */

.grid-destino {
  margin-top: 10px
}

.grid-destino select,
.grid-destino input {
  width: 100%;
  min-height: 36px !important;
  height: 36px;
  padding: 0 10px !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 13.5px;
  color: var(--text)
}

.cotizacion-destino {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-soft)
}

@media(max-width:768px) {
  .grid-destino select,
  .grid-destino input {
    min-height: 38px !important;
    height: 38px;
    font-size: 16px
  }
}

/* ============================================================
   AGRUPACIÓN POR DÍA + GRILLA DE 3 COLUMNAS
   ============================================================ */

.grupo-dia {
  margin-bottom: 22px
}

.encabezado-dia {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--gold)
}

.dia-nombre {
  font-size: 16px;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -.01em
}

.dia-datos {
  font-size: 12.5px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums
}

.grupo-tarjetas {
  display: grid;
  gap: 12px
}

/* La fecha, bien visible */
.cotizacion-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 5px 0 0 !important;
  font-size: 12px
}

.fecha-doc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.meta-resto {
  color: var(--text-soft)
}

/* ---------------- Escritorio: 2 y 3 columnas ---------------- */

@media(min-width:1024px) {
  .grupo-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(min-width:1500px) {
  .grupo-tarjetas {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  /* A 3 columnas hay menos ancho: se compactan los botones */
  .cotizacion-card .card-acciones button {
    padding: 8px 11px;
    font-size: 12.5px
  }

  .cotizacion-card h3 {
    font-size: 16px
  }
}

@media(max-width:768px) {
  .encabezado-dia {
    margin-bottom: 8px
  }

  .dia-nombre {
    font-size: 14.5px
  }

  .dia-datos {
    font-size: 11.5px
  }

  .fecha-doc {
    font-size: 11.5px;
    padding: 2px 8px
  }
}

/* ============================================================
   CORRECCIÓN: los grupos de día van uno debajo del otro

   La regla de 2 columnas de .cotizaciones-lista se aplicaba a los
   grupos "Hoy" y "Ayer", que quedaban lado a lado. Las columnas
   corresponden a las tarjetas, no a los días.
   ============================================================ */

.cotizaciones-lista {
  display: block !important
}

.cotizaciones-lista > .grupo-dia,
.cotizaciones-lista > .grupo-tarjetas {
  display: block
}

.cotizaciones-lista .grupo-tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px
}

@media(min-width:1024px) {
  .cotizaciones-lista .grupo-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(min-width:1500px) {
  .cotizaciones-lista .grupo-tarjetas {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* Que el número no se corte en dos líneas */
.cotizacion-numero {
  white-space: nowrap
}

/* ---------------- Estado de stock en los resultados ---------------- */

.resultado-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0
}

.resultado-acciones .pill-stock {
  white-space: nowrap
}

/* ============================================================
   COLOR DEL ESTADO SEGÚN EL TIPO

   En una venta, "pagado" es el final del circuito → verde.
   En un envío todavía falta despachar → azul, y el verde queda
   para "enviado", que sí cierra la operación.
   ============================================================ */

.cotizacion-card[data-tipo="venta"] .estado-cot.pagado {
  background: #dff0e2;
  color: var(--green-2)
}

.cotizacion-card[data-tipo="cotizacion"] .estado-cot.pagado {
  background: #dfe9f5;
  color: #2f5c8f
}

@media(max-width:768px) {
  .resultado-acciones {
    width: 100%;
    justify-content: space-between
  }

  .resultado-acciones .btn-anadir-item {
    width: auto;
    flex: 1 1 auto;
    margin-left: 8px
  }
}

/* ============================================================
   RESULTADOS: el botón Añadir no debe quedar cortado

   La barra de desplazamiento de la lista se comía el borde
   derecho y el botón salía recortado ("+ Añadi").
   ============================================================ */

.resultados-cot {
  padding-right: 10px;
  scrollbar-gutter: stable   /* reserva el espacio de la barra siempre */
}

.resultado-producto {
  gap: 12px;
  padding-right: 10px
}

.resultado-datos {
  flex: 1 1 auto;
  min-width: 0
}

.resultado-acciones {
  flex: 0 0 auto;
  white-space: nowrap
}

.btn-anadir-item {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 96px;
  padding: 0 14px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip
}

@media(max-width:768px) {
  .btn-anadir-item {
    min-width: 88px;
    padding: 0 12px
  }
}