/* RESET BÁSICO */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #222;
    background: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* CABECERA */
.header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 55px;
}

.menu a {
    margin-left: 20px;
    color: #333;
    font-weight: 500;
}

.btn-presupuesto {
    background: #d60000;
    color: #fff !important;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer; /* ← ESTA LÍNEA ES LA QUE FALTABA */
    transition: 0.25s ease;
}

/* BREADCRUMB */
.breadcrumb {
    background: #fafafa;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    padding: 10px 0;
}

.breadcrumb a {
    color: #666;
}

.breadcrumb span {
    color: #999;
}

/* FICHA PRODUCTO */
.ficha-producto {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    padding: 40px 0 50px;
}

/* GALERÍA */
.col-galeria {
    min-width: 0;
}

.imagen-principal {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    text-align: center;
}

.imagen-principal img {
    max-width: 100%;
    height: auto;
}

.miniaturas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.miniaturas img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: 0.2s;
}

.miniaturas img:hover {
    border-color: #d60000;
}

/* INFO PRODUCTO */
.col-info h1 {
    font-size: 28px;
    margin-bottom: 5px;
}

.ref-cat {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.desc-corta {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* VARIANTES */
.bloque-variantes {
    margin-bottom: 25px;
}

.bloque-variantes h3 {
    margin-bottom: 10px;
}

/* ================================
   COLORES – CÍRCULOS GRANDES
================================ */
.colores {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.color-pill {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: 0 0 0 2px #fff inset;
}

.color-pill:hover {
    transform: scale(1.18);
    border-color: #888;
}

.color-pill.activo {
    border-color: #000;
    box-shadow: 0 0 0 3px #000 inset;
}

/* ACORDEONES */
.acordeon {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
}

.acordeon-titulo {
    background: #f7f7f7;
    padding: 12px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.acordeon-contenido {
    display: none;
    padding: 15px;
    background: #fff;
}

.acordeon.open .acordeon-contenido {
    display: block;
}

/* PRECIOS */
.tabla-precios {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.tabla-precios th,
.tabla-precios td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}

.tabla-precios th {
    background: #fafafa;
}

.nota-precios {
    font-size: 14px;
    color: #666;
}

/* CANTIDAD */
.input-cantidad {
    width: 120px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* SELECT MARCAJE */
.select-marcaje {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* BOTÓN CARRITO */
.bloque-carrito {
    margin: 25px 0;
}

.btn-carrito {
    background: #d60000;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    width: 100%;
}

.btn-carrito:hover {
    background: #b50000;
}

/* RESUMEN STICKY */
.bloque-resumen {
    position: sticky;
    top: 20px;
    background: #fafafa;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
}

.bloque-resumen h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.bloque-resumen p {
    margin: 5px 0;
}

/* DESCRIPCIÓN DETALLADA */
.descripcion-detallada {
    background: #fafafa;
    padding: 40px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.desc-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
}

.lista-tecnica {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.lista-tecnica li {
    margin-bottom: 6px;
}

/* RELACIONADOS */
.relacionados {
    padding: 40px 0 60px;
}

.grid-relacionados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card-rel {
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 15px;
    background: #fff;
}

.img-rel {
    height: 120px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
}

/* FOOTER */
.footer {
    background: #111;
    color: #ccc;
    padding: 30px 0;
    text-align: center;
}

.logo-footer {
    height: 45px;
    margin-bottom: 10px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .ficha-producto {
        grid-template-columns: 1fr;
    }

    .bloque-resumen {
        position: static;
        margin-top: 20px;
    }

    .desc-grid {
        grid-template-columns: 1fr;
    }

    .grid-relacionados {
        grid-template-columns: 1fr;
    }
}

/* NUEVO SISTEMA DE ACORDEONES */
details.acordeon {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 0;
    background: #fafafa;
}

details.acordeon summary {
    cursor: pointer;
    padding: 12px;
    font-weight: 600;
    list-style: none;
}

details.acordeon summary::-webkit-details-marker {
    display: none;
}

details.acordeon summary::after {
    content: "▶";
    float: right;
    transition: transform 0.2s;
}

details.acordeon[open] summary::after {
    content: "▼";
}

details.acordeon .acordeon-contenido {
    padding: 12px;
    border-top: 1px solid #ddd;
}

/* ⭐ CENTRAR SOLO LAS COLUMNAS DE PRECIOS */
.tabla-precios td:nth-child(2),
.tabla-precios td:nth-child(3),
.tabla-precios th:nth-child(2),
.tabla-precios th:nth-child(3) {
    text-align: center;
}
/* --- Compactar características técnicas --- */
.lista-tecnica li,
#caracteristicas-cortas li {
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Quitar separación extra del UL */
.lista-tecnica,
#caracteristicas-cortas {
    margin: 0 !important;
    padding-left: 18px !important; /* igual que la descripción */
}
/* ============================
   PRODUCTOS RELACIONADOS — DISEÑO PREMIUM
============================ */

.grid-relacionados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
}

.card-rel {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    transition: 0.25s ease;
    position: relative;
}

.card-rel:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.card-rel .img-rel {
    height: 150px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-bottom: 10px;
}

.card-rel p {
    font-size: 14px;
    line-height: 1.3;
    height: 36px; /* 2 líneas */
    overflow: hidden;
    margin: 0 0 4px 0;
}

.card-rel small {
    font-size: 13px;
    color: #666;
}

/* ⭐ TARJETA FLOTANTE EN HOVER */
.card-rel .hover-info {
    display: none;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    z-index: 50;
}

.card-rel:hover .hover-info {
    display: block;
}

/* ============================
   PRODUCTOS RELACIONADOS — PREMIUM
============================ */

.grid-relacionados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
}

.card-rel {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    transition: 0.25s ease;
    position: relative;
}

.card-rel:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.card-rel .img-rel {
    height: 150px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-bottom: 10px;
}

.card-rel p {
    font-size: 14px;
    line-height: 1.3;
    height: 36px;
    overflow: hidden;
    margin: 0 0 4px 0;
}

.card-rel small {
    font-size: 13px;
    color: #666;
}

/* ⭐ TARJETA FLOTANTE */
.card-rel .hover-info {
    display: none;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    z-index: 50;
}

.card-rel:hover .hover-info {
    display: block;
}

/* Colores en hover */
.hover-colores {
    display: flex;
    gap: 6px;
    margin: 6px 0;
}

.hover-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ccc;
}
/* ⭐ ZOOM SUAVE EN LA IMAGEN DE RELACIONADOS */
.card-rel .img-rel {
    transition: transform 0.35s ease;
}

.card-rel:hover .img-rel {
    transform: scale(1.15);
}
/* ⭐ ZOOM SUAVE EN LA IMAGEN PRINCIPAL */
#imagen {
    transition: transform 0.35s ease;
    transform-origin: center center;
}

#imagen:hover {
    transform: scale(1.15);
}
/* ⭐ ZOOM SUAVE EN MINIATURAS */
.miniatura {
    transition: transform 0.25s ease;
}

.miniatura:hover {
    transform: scale(1.15);
}
/* ⭐ FADE-IN SUAVE AL CAMBIAR DE COLOR */
#imagen {
    opacity: 1;
    transition: opacity 0,6s ease;
}

#imagen.fade-out {
    opacity: 0;
}
/* ============================
   MÓDULO DE ACCIONES MODERNO
============================ */

#modulo-acciones {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
}

.cantidad-box label {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    display: block;
}

.cantidad-controles {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cantidad-controles input {
    width: 70px;
    text-align: center;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.btn-cantidad {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #f2f2f2;
    font-size: 22px;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-cantidad:hover {
    background: #e0e0e0;
}

.acciones-botones {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-principal {
    background: #007bff;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.25s ease;
}

.btn-principal:hover {
    background: #0069d9;
}

.btn-secundario {
    background: white;
    color: #007bff;
    padding: 14px;
    border: 2px solid #007bff;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.25s ease;
}

.btn-secundario:hover {
    background: #f0f7ff;
}
/* ============================
   BLOQUE FINAL MODERNO
============================ */

.bloque-final {
    margin-top: 25px;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.cantidad-wrapper label {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    display: block;
}

.cantidad-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cantidad-control input {
    width: 60px;
    text-align: center;
    padding: 6px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.btn-cantidad {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f2f2f2;
    font-size: 18px;
    cursor: pointer;
    transition: 0.25s ease;
}

.btn-cantidad:hover {
    background: #e0e0e0;
}

.botones-final {
    margin-top: 18px;
}

.btn-marcaje {
    background: ##d60000;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: 0.25s ease;
}

.btn-marcaje:hover {
    background: #0069d9;
}

/* ============================
   BOTÓN PRESUPUESTO INLINE
============================ */

.presupuesto-inline {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.btn-presupuesto-inline {
    background: #ff3b3b;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.25s ease;
}

.btn-presupuesto-inline:hover {
    background: #e63232;
}
/* ============================
   BLOQUE FINAL FLEX
============================ */

.acciones-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-top: 25px;
}

/* CANTIDAD */
.cantidad-wrapper label {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
    display: block;
}

.cantidad-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cantidad-control input {
    width: 60px;
    text-align: center;
    padding: 6px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.btn-cantidad {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f2f2f2;
    font-size: 18px;
    cursor: pointer;
    transition: 0.25s ease;
}

.btn-cantidad:hover {
    background: #e0e0e0;
}

/* BOTÓN ROJO PRINCIPAL */
.btn-marcaje-rojo {
    background: #ff3b3b; /* mismo rojo que el botón superior */
    color: white;
    padding: 14px 22px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.25s ease;
}

.btn-marcaje-rojo:hover {
    background: #e63232;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .acciones-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-marcaje-rojo {
        width: 100%;
        text-align: center;
    }
}
/* BOTÓN ROJO PRINCIPAL (MISMO ROJO QUE EL DE ARRIBA) */
.btn-marcaje-rojo {
    background: #d60000; /* ROJO EXACTO */
    color: white;
    padding: 14px 22px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.25s ease;
}

.btn-marcaje-rojo:hover {
    background: #cc0000; /* ROJO OSCURO PARA HOVER */
}

.btn-marcaje-rojo {
    background: #d60000; /* rojo exacto */
    color: white;
    padding: 14px 22px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* SIN HOVER — igual que el botón de arriba */
.btn-marcaje-rojo:hover {
    background: #d60000;
}

.colores-abajo .color-pill {
    transform: scale(0.8);
    margin: 3px;
}
/* ============================
   COMPACTAR FICHA DE PRODUCTO
   ============================ */

/* Reducir padding general de la ficha */
.ficha-producto {
    padding: 20px 0 !important;
    gap: 25px !important;
}

/* Compactar título y descripción */
.col-info h1 {
    font-size: 24px !important;
    margin-bottom: 6px !important;
}

.desc-corta {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 15px !important;
}

/* Compactar bloque de variantes */
.bloque-variantes {
    margin-bottom: 15px !important;
}

/* Reducir tamaño de los círculos de color */
.color-pill {
    width: 34px !important;
    height: 34px !important;
}

/* ============================
   SUBIR CANTIDAD + BOTÓN ROJO
   ============================ */

#modulo-acciones {
    margin-top: 5px !important;
    padding: 14px !important;
}

.cantidad-controles,
.cantidad-control {
    margin: 0 !important;
    gap: 6px !important;
}

.cantidad-controles input,
.cantidad-control input {
    padding: 6px !important;
    font-size: 14px !important;
    width: 55px !important;
}

/* Botón CONFIGURAR PERSONALIZACIÓN más arriba y más compacto */
.btn-marcaje-rojo {
    padding: 10px 16px !important;
    font-size: 15px !important;
    margin-top: 8px !important;
}

/* Reducir espacio entre acciones */
.acciones-flex {
    margin-top: 10px !important;
    gap: 12px !important;
}

/* ============================
   RESUMEN STICKY MÁS COMPACTO
   ============================ */

.bloque-resumen {
    padding: 10px !important;
    top: 5px !important;
}

.bloque-resumen h3 {
    margin-bottom: 6px !important;
}

.bloque-resumen p {
    margin: 3px 0 !important;
}
/* ============================
   REDUCIR 0.5 PUNTOS TODA LA FICHA
   ============================ */

body,
.ficha-producto,
.ficha-producto * {
    font-size: 97% !important;   /* medio punto menos */
    line-height: 1.30 !important;
}

/* ============================
   TABLA DE PRECIOS MÁS COMPACTA
   ============================ */

.tabla-precios th,
.tabla-precios td {
    padding: 7px 9px !important;    /* menos alto */
    line-height: 1.18 !important;   /* interlineado más compacto */
    font-size: 97% !important;      /* acompaña al resto */
}

/* Ajustar ancho de columnas de precios */
.tabla-precios td:nth-child(2),
.tabla-precios td:nth-child(3) {
    width: 110px !important;
}
/* ============================
   -0.5 PUNTOS SOLO EN DESCRIPCIÓN Y CARACTERÍSTICAS
   ============================ */

/* Descripción del producto */
.descripcion-detallada,
.descripcion-detallada * {
    font-size: 97% !important;   /* medio punto menos */
    line-height: 1.32 !important;
}

/* Características técnicas */
.lista-tecnica,
.lista-tecnica * {
    font-size: 97% !important;   /* medio punto menos */
    line-height: 1.28 !important;
}
/* ============================
   COMPACTACIÓN REAL DE FICHA
   ============================ */

/* 1. Reducir padding general de la ficha */
.ficha-producto {
    padding: 15px 0 !important;
    gap: 22px !important;
}

/* 2. Compactar título y descripción */
.col-info h1 {
    font-size: 24px !important;
    margin-bottom: 4px !important;
}

.desc-corta {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
}

/* 3. Compactar bloque de variantes (colores) */
.bloque-variantes {
    margin-bottom: 12px !important;
}

.colores {
    gap: 10px !important;
    margin: 10px 0 !important;
}

.color-pill {
    width: 32px !important;
    height: 32px !important;
}

/* 4. TABLA DE PRECIOS MÁS COMPACTA */
.tabla-precios th,
.tabla-precios td {
    padding: 6px 8px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
}

.tabla-precios {
    margin-bottom: 8px !important;
}

/* 5. SUBIR CANTIDAD + BOTÓN ROJO */
#modulo-acciones {
    margin-top: 5px !important;
    padding: 12px !important;
}

.cantidad-controles input,
.cantidad-control input {
    padding: 6px !important;
    font-size: 14px !important;
    width: 55px !important;
}

.btn-marcaje-rojo {
    padding: 10px 14px !important;
    font-size: 15px !important;
    margin-top: 6px !important;
}

/* 6. Reducir espacio entre acciones */
.acciones-flex {
    margin-top: 10px !important;
    gap: 10px !important;
}

/* 7. RESUMEN STICKY MÁS COMPACTO */
.bloque-resumen {
    padding: 10px !important;
    top: 5px !important;
}

.bloque-resumen h3 {
    margin-bottom: 6px !important;
}

.bloque-resumen p {
    margin: 3px 0 !important;
}
/* ============================
   SUBIR CANTIDAD + CONFIGURAR + STOCK
   ============================ */

/* 1. Reducir espacio debajo del texto “Precios indicados sin marcaje…” */
.nota-precios {
    margin-bottom: 6px !important;
}

/* 2. Subir el bloque de cantidad + botón */
#modulo-acciones {
    margin-top: 4px !important;   /* antes ~25px */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* 3. Compactar controles de cantidad */
.cantidad-controles,
.cantidad-control {
    margin: 0 !important;
    gap: 6px !important;
}

.cantidad-controles input,
.cantidad-control input {
    padding: 6px !important;
    font-size: 14px !important;
    width: 55px !important;
}

/* 4. Botón CONFIGURAR PERSONALIZACIÓN más arriba y más compacto */
.btn-marcaje-rojo {
    padding: 10px 14px !important;
    font-size: 15px !important;
    margin-top: 4px !important;
}

/* 5. Reducir espacio entre acciones */
.acciones-flex {
    margin-top: 8px !important;
    gap: 10px !important;
}

/* 6. SUBIR EL BLOQUE DE STOCK */
.bloque-resumen {
    margin-top: 10px !important;   /* antes ~25px */
    padding: 10px !important;
    top: 5px !important;
}

.bloque-resumen h3 {
    margin-bottom: 6px !important;
}

.bloque-resumen p {
    margin: 3px 0 !important;
}
/* ============================================
   RECARGA A LO BESTIA — SUBIR TODO EL BLOQUE
   ============================================ */

/* Eliminar márgenes entre precios y cantidad */
.tabla-precios {
    margin-bottom: 0 !important;
}

.nota-precios {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Subir el módulo de acciones (cantidad + botón) */
#modulo-acciones {
    margin-top: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Compactar controles de cantidad */
.cantidad-controles,
.cantidad-control {
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
}

.cantidad-controles input,
.cantidad-control input {
    padding: 5px !important;
    font-size: 14px !important;
    width: 50px !important;
}

/* Botón CONFIGURAR PERSONALIZACIÓN más arriba */
.btn-marcaje-rojo {
    margin-top: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* Subir el bloque de stock (resumen sticky) */
.bloque-resumen {
    margin-top: 8px !important;
    padding: 8px !important;
    top: 0 !important;
}

.bloque-resumen h3 {
    margin-bottom: 4px !important;
}

.bloque-resumen p {
    margin: 2px 0 !important;
}

/* Reducir espacio entre acciones */
.acciones-flex {
    margin-top: 6px !important;
    gap: 8px !important;
}
/* ============================================
   SUBIR SOLO CANTIDAD + CONFIGURAR + STOCK
   ============================================ */

/* 1. Reducir espacio debajo del texto “Precios indicados sin marcaje…” */
.nota-precios {
    margin-bottom: 4px !important;
}

/* 2. Subir el bloque de cantidad + botón */
#modulo-acciones {
    margin-top: 4px !important;      /* antes ~20px */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* 3. Compactar controles de cantidad */
.cantidad-controles,
.cantidad-control {
    margin: 0 !important;
    gap: 6px !important;
}

.cantidad-controles input,
.cantidad-control input {
    padding: 6px !important;
    width: 55px !important;
    font-size: 14px !important;
}

/* 4. Botón CONFIGURAR PERSONALIZACIÓN más arriba */
.btn-marcaje-rojo {
    margin-top: 6px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
}

/* 5. Subir el bloque de stock */
.bloque-resumen {
    margin-top: 10px !important;    /* antes ~25px */
    padding: 10px !important;
    top: 5px !important;
}

.bloque-resumen h3 {
    margin-bottom: 6px !important;
}

.bloque-resumen p {
    margin: 3px 0 !important;
}
/* ============================================
   SUBIDA EXTRA (+1.5 líneas) CANTIDAD + CONFIGURAR + STOCK
   ============================================ */

/* 1. Reducir aún más el espacio debajo de “Precios indicados sin marcaje…” */
.nota-precios {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
}

/* 2. Subir el bloque de cantidad + botón todavía más */
#modulo-acciones {
    margin-top: 0 !important;          /* antes 4px */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* 3. Compactar controles de cantidad un poco más */
.cantidad-controles,
.cantidad-control {
    margin: 0 !important;
    gap: 4px !important;               /* antes 6px */
}

.cantidad-controles input,
.cantidad-control input {
    padding: 5px !important;           /* antes 6px */
    width: 50px !important;            /* antes 55px */
    font-size: 14px !important;
}

/* 4. Botón CONFIGURAR PERSONALIZACIÓN más arriba */
.btn-marcaje-rojo {
    margin-top: 4px !important;        /* antes 6px */
    padding: 9px 12px !important;      /* más compacto */
    font-size: 14.5px !important;
}

/* 5. Subir el bloque de stock en la misma proporción */
.bloque-resumen {
    margin-top: 6px !important;        /* antes 10px */
    padding: 8px !important;
    top: 0 !important;
}

.bloque-resumen h3 {
    margin-bottom: 4px !important;
}

.bloque-resumen p {
    margin: 2px 0 !important;
}
/* ============================================
   SUBIDA EXTRA (+1.5 líneas) CANTIDAD + CONFIGURAR + STOCK
   ============================================ */

/* 1. Reducir al mínimo el espacio debajo de “Precios indicados sin marcaje…” */
.nota-precios {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Subir el bloque de cantidad + botón aún más */
#modulo-acciones {
    margin-top: -6px !important;     /* SUBIDA REAL */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* 3. Compactar controles de cantidad un poco más */
.cantidad-controles,
.cantidad-control {
    margin: 0 !important;
    gap: 4px !important;
}

.cantidad-controles input,
.cantidad-control input {
    padding: 5px !important;
    width: 48px !important;
    font-size: 14px !important;
}

/* 4. Botón CONFIGURAR PERSONALIZACIÓN más arriba */
.btn-marcaje-rojo {
    margin-top: 3px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* 5. Subir el bloque de stock en la misma proporción */
.bloque-resumen {
    margin-top: 4px !important;      /* antes ~20px */
    padding: 8px !important;
    top: 0 !important;
}

.bloque-resumen h3 {
    margin-bottom: 4px !important;
}

.bloque-resumen p {
    margin: 2px 0 !important;
}
/* ============================================
   SUBIDA REAL DE CANTIDAD + CONFIGURAR + STOCK
   ============================================ */

/* 1. Reducir espacio debajo del texto de precios */
.nota-precios {
    margin-bottom: 0 !important;
}

/* 2. Subir el bloque de cantidad (clase REAL) */
.cantidad-control {
    margin-top: -10px !important;   /* SUBIDA REAL */
}

/* 3. Subir el botón CONFIGURAR PERSONALIZACIÓN */
.btn-marcaje-rojo {
    margin-top: 4px !important;     /* más arriba */
    padding: 10px 14px !important;
    font-size: 15px !important;
}

/* 4. Subir el bloque de stock */
.bloque-resumen {
    margin-top: 8px !important;     /* antes ~25px */
    padding: 10px !important;
    top: 0 !important;
}
/* ============================================
   SUBIR BLOQUE CANTIDAD + CONFIGURAR (REAL)
   ============================================ */

/* 1. Eliminar margen del párrafo que contiene el texto largo */
.tabla-precios + p {
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* antes ~18px */
    padding: 0 !important;
}

/* 2. Subir el bloque de cantidad */
.cantidad-control {
    margin-top: -8px !important; /* SUBIDA REAL */
}

/* 3. Subir el botón CONFIGURAR PERSONALIZACIÓN */
.btn-marcaje-rojo {
    margin-top: 4px !important;
}

/* 4. Subir el bloque de stock */
.bloque-resumen {
    margin-top: 8px !important;
}
/* ============================================
   SUBIDA REAL DEL BLOQUE CANTIDAD + CONFIGURAR
   ============================================ */

/* 1. Eliminar el margen del párrafo que genera el hueco */
.tabla-precios + p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* 2. Subir el bloque de cantidad */
.cantidad-control {
    margin-top: -10px !important;
}

/* 3. Subir el botón CONFIGURAR PERSONALIZACIÓN */
.btn-marcaje-rojo {
    margin-top: 4px !important;
}

/* 4. Subir el bloque de stock */
.bloque-resumen {
    margin-top: 8px !important;
}
/* ============================================
   SUBIDA REAL DEL BLOQUE CANTIDAD + CONFIGURAR
   ============================================ */

/* 1. Eliminar margen del párrafo del texto largo */
.tabla-precios + p {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Subir el bloque de CANTIDAD (selector real basado en estructura) */
.tabla-precios + p + div {
    margin-top: -12px !important;   /* SUBIDA REAL */
}

/* 3. Subir el botón CONFIGURAR PERSONALIZACIÓN */
.btn-marcaje-rojo {
    margin-top: 4px !important;
}

/* 4. Subir el bloque de stock */
.bloque-resumen {
    margin-top: 8px !important;
}
/* ============================================
   SUBIR BLOQUE CANTIDAD + CONFIGURAR (REAL)
   ============================================ */

/* 1. Eliminar espacio entre el texto largo y el bloque-final */
.bloque-final {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Compactar el interior del bloque-final */
.acciones-flex {
    margin-top: 0 !important;
    gap: 10px !important;
}

/* 3. Subir la cantidad */
.cantidad-wrapper {
    margin-top: -6px !important;
}

/* 4. Subir el botón CONFIGURAR PERSONALIZACIÓN */
.btn-marcaje-rojo {
    margin-top: 4px !important;
}

/* 5. Subir el bloque de stock */
.bloque-stock {
    margin-top: 10px !important;
}
/* ============================================
   AJUSTE PRECISO — BAJAR 2 LÍNEAS Y CENTRAR
   ============================================ */

/* 1. Bajar el bloque-final (2 líneas reales ≈ 22–26px) */
.bloque-final {
    margin-top: 24px !important;   /* antes 0 o 10 */
    padding-top: 0 !important;
}

/* 2. Ajustar el interior para que quede centrado visualmente */
.acciones-flex {
    margin-top: 6px !important;
}

/* 3. Mantener Cantidad y el botón juntos y equilibrados */
.cantidad-wrapper {
    margin-top: 0 !important;
}

.btn-marcaje-rojo {
    margin-top: 10px !important;
}

/* 4. NO mover el bloque de stock */
.bloque-stock {
    margin-top: 0 !important;  /* se queda donde está */
}
/* Bajar medio renglón el texto de aviso sin mover nada más */
.tabla-precios + p {
    margin-top: 8px !important;   /* media línea real */
}
/* Separar la palabra "Cantidad" del cuadro (¼–½ línea) */
.cantidad-wrapper label {
    margin-bottom: 6px !important;   /* ¼ línea */
}

/* Si quieres ½ línea exacta, usa 10px */