/* components/quick-add.css
   El "agregar rápido" de la tienda (#1000): la ventana centrada del KDS (kds-modal) con la foto, el
   precio, las variantes o formas de venta, la cantidad y el agregar. Antes era un modal de
   Bootstrap con sus estilos metidos en el .phtml. */

.quick-add-modal .kds-modal__bd { padding: 1.25rem 1.35rem 1.4rem; }

.quick-add {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.5rem;
    align-items: start;
}
.quick-add__foto { background: #f6f6f6; }
.quick-add__img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.quick-add__datos { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.quick-add__precio { font-size: 1.5rem; font-weight: 700; color: #000; }
.quick-add__cotizar { color: var(--tienda-tinta, #000); font-size: 1.15rem; }

.quick-add .atributo-block { display: flex; flex-direction: column; gap: .4rem; }
.quick-add .atributo-label { font-weight: 600; font-size: .85rem; color: #333; }
.quick-add__opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.quick-add .btn-atributo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #111;
    background: #fff;
    color: #111;
    font-size: .85rem;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.quick-add .btn-atributo small { font-size: .72rem; opacity: .8; }
.quick-add .btn-atributo:hover:not(:disabled),
.quick-add .btn-atributo.selected { background: #111; color: #fff; }
.quick-add .btn-atributo:disabled { opacity: .45; cursor: not-allowed; }
.quick-add__equivale { color: #6c757d; }
.quick-add__equivale:empty { display: none; }

.quick-add__cantidad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.quick-add__stock { font-size: .9rem; }

.quick-add__aviso:empty { display: none; }

.quick-add__acciones { display: grid; gap: .5rem; }
.quick-add .btn-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color .3s, color .3s;
}
.quick-add .btn-primario:hover:not(:disabled) { background: #fff; color: #000; }
.quick-add .btn-primario:disabled { opacity: .55; cursor: not-allowed; }
.quick-add__compartir {
    border: 1px solid #6c757d;
    background: transparent;
    color: #6c757d;
    padding: 10px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color .3s, color .3s, border-color .3s;
}
.quick-add__compartir:hover { background: #25d366; border-color: #25d366; color: #fff; }

.quick-add__descripcion {
    margin: 0;
    font-size: .85rem;
    color: #6c757d;
    white-space: pre-line;
}

@media (max-width: 575.98px) {
    .quick-add { grid-template-columns: 1fr; gap: 1rem; }
    .quick-add__img { max-height: 220px; }
}

/* El precio con oferta: el que paga, el de antes tachado y el porcentaje. Lo usan el agregar
   rápido, la ficha del producto y el cambio de variante (product-variant-manager). */
.precio-oferta__actual { font-size: 1em; }
.precio-oferta__antes {
    margin-left: .5rem;
    font-size: .65em;
    font-weight: 400;
    color: #6c757d;
    text-decoration: line-through;
}
.precio-oferta__off {
    display: inline-block;
    margin-left: .5rem;
    padding: 2px 6px;
    background: var(--tienda-rosa, #FFAAA5);
    color: #000;
    font-size: .55em;
    font-weight: 700;
    vertical-align: middle;
}