/*
 * [HX-23] Product view, base compartida de las plantillas compactas (?plantilla_producto=1|2|3).
 * Tokens, modal, grid galería | info, tarjetas, descripción colapsable, clamp
 * ("see more"), color/precio, agotado e #infoplus y la compra compartida
 * (resumen de selección + cantidad + CTA). Lo propio de cada plantilla va en
 * product_view_c1.css / _c2.css / _c3.css (escopado con .pv-c1 / .pv-c2 / .pv-c3).
 * Se carga desde views/tienda/product_view/compacta{1,2,3}.php ANTES del CSS de la
 * plantilla (a igual especificidad gana el de la plantilla). La clasica no lo carga.
 * Todo va escopado con #view_product.pv-compacta (el id gana a main.css, p. ej.
 * `#variantes .selected` o `#view_product pre`).
 */
#view_product.pv-compacta {
    --pv-acento: #ef7c00;
    --pv-acento-2: #ff6a00;
    --pv-acento-suave: #fff3e6;
    --pv-borde: #e6e8ec;
    --pv-texto: #1f2430;
    --pv-muted: #7a8190;
    --pv-fondo: #f6f7f9;
    /* Tag de descuento `.distag` (main.css) en las variantes de compacta2 y compacta3:
       mismo tamaño en ambas (feedback tore), cada plantilla lo aplica en su CSS. */
    --pv-distag-size: 12px;
    color: var(--pv-texto);
}
#view_product.pv-compacta .modal-dialog.pv-dialog { width: auto; max-width: 1040px; margin: 30px auto; }
#view_product.pv-compacta .modal-content { border-radius: 10px; border: 0; } /* sin overflow:hidden: rompe el sticky de mobile */
#view_product.pv-compacta .pv-header { border-bottom: 1px solid var(--pv-borde); padding: 14px 20px; }
#view_product.pv-compacta .pv-titulo { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; }
#view_product.pv-compacta .modal-body { padding: 18px 20px; }
#view_product.pv-compacta .pv-muted { color: var(--pv-muted); font-weight: normal; }
#view_product.pv-compacta .pv-sep { color: #c3c7cf; margin: 0 3px; }

/* Grid galería | info */
#view_product.pv-compacta .pv-grid { display: flex; gap: 20px; align-items: flex-start; }
/* [HX-23] Galería más ancha: la columna es ~48% y compacta.js ajusta el thumb de etalage a ese ancho (pvThumbCompacta). */
#view_product.pv-compacta .pv-col-galeria { flex: 0 0 48%; max-width: 48%; min-width: 0; }
#view_product.pv-compacta .pv-col-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
#view_product.pv-compacta #etalage { margin: 0 auto; }

#view_product.pv-compacta .pv-subtitulo { color: var(--pv-muted); font-size: 13px; text-transform: uppercase; white-space: pre-wrap; }

/* Tarjetas (secciones de la columna de info) */
#view_product.pv-compacta .pv-card { background: #fff; border: 1px solid var(--pv-borde); border-radius: 8px; padding: 12px 14px; }
#view_product.pv-compacta .pv-card-titulo { font-weight: 700; font-size: 14px; margin-bottom: 8px; display: block; }
#view_product.pv-compacta .pv-card-titulo .fa { color: #555; margin-right: 4px; }

/* Descripción colapsable */
#view_product.pv-compacta details.pv-desc > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
#view_product.pv-compacta details.pv-desc > summary::-webkit-details-marker { display: none; }
#view_product.pv-compacta details.pv-desc[open] > summary { margin-bottom: 6px; }
#view_product.pv-compacta .pv-chevron { float: right; transition: transform .15s; }
#view_product.pv-compacta details.pv-desc:not([open]) .pv-chevron { transform: rotate(180deg); }
#view_product.pv-compacta pre.pv-desc-texto {
    font-family: inherit; font-size: 13px; color: #4a5060; background: transparent; border: 0;
    padding: 0; margin: 0; white-space: pre-wrap; word-break: normal;
}
/* [HX-23] Resumen (4 líneas) y descripción (5 líneas) recortados con line-clamp;
   el botón "see more" solo aparece si el texto se desborda (pvClamp en compacta.js). */
#view_product.pv-compacta .pv-clamp:not(.pv-clamp-abierto) {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
#view_product.pv-compacta .pv-clamp[data-lineas="4"]:not(.pv-clamp-abierto) { -webkit-line-clamp: 4; line-clamp: 4; }
#view_product.pv-compacta .pv-clamp[data-lineas="5"]:not(.pv-clamp-abierto) { -webkit-line-clamp: 5; line-clamp: 5; }
#view_product.pv-compacta .pv-ver-mas {
    display: inline-block; background: none; border: 0; padding: 0; margin-top: 4px;
    font-size: 12px; font-weight: 600; color: #1e7bd6; cursor: pointer;
}
#view_product.pv-compacta .pv-ver-mas[hidden] { display: none; }
#view_product.pv-compacta .pv-ver-mas:hover, #view_product.pv-compacta .pv-ver-mas:focus { text-decoration: underline; }

/* Radio con acento */
#view_product.pv-compacta .pv-radio { accent-color: var(--pv-acento); width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; }

/* Color (punto + nombre) y precio */
#view_product.pv-compacta .pv-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #ccc; border: 1px solid rgba(0,0,0,.15); margin-right: 5px; vertical-align: -1px; }
#view_product.pv-compacta .pv-color-txt { font-weight: 600; text-transform: uppercase; }
#view_product.pv-compacta .pv-precio { font-weight: 700; }

/* Cuerpo genérico de una variante (cards / pills lo afinan en su CSS) */
#view_product.pv-compacta .pv-var-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#view_product.pv-compacta .pv-linea { font-size: 13px; }

#view_product.pv-compacta .pv-solo-mobile { display: none; }

#view_product.pv-compacta .pv-agotado { padding: 8px 0; }
#view_product.pv-compacta #infoplus:empty { display: none; }
#view_product.pv-compacta #infoplus { font-size: 12px; overflow: hidden; margin-top: 6px; }

/* Compra compartida: resumen de la selección + cantidad + CTA */
#view_product.pv-compacta .pv-compra { background: var(--pv-fondo); }
#view_product.pv-compacta .pv-compra-titulo { margin-bottom: 8px; }
#view_product.pv-compacta .pv-sel { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
#view_product.pv-compacta .pv-sel-img { width: 54px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--pv-borde); border-radius: 6px; }
#view_product.pv-compacta .pv-sel-info { display: flex; flex-direction: column; flex: 1 1 140px; min-width: 0; font-size: 13px; }
#view_product.pv-compacta .pv-sel-nombre { text-transform: uppercase; }
#view_product.pv-compacta .pv-qty { display: flex; flex-direction: column; align-items: flex-start; }
#view_product.pv-compacta .pv-qty-ctrl { display: inline-flex; border: 1px solid var(--pv-borde); border-radius: 6px; overflow: hidden; background: #fff; }
#view_product.pv-compacta .pv-qty-ctrl button { width: 32px; height: 32px; border: 0; background: #fff; font-size: 16px; line-height: 1; color: var(--pv-texto); }
#view_product.pv-compacta .pv-qty-ctrl button:disabled { color: #c3c7cf; cursor: not-allowed; }
#view_product.pv-compacta .pv-qty-input { width: 42px; height: 32px; border: 0; border-left: 1px solid var(--pv-borde); border-right: 1px solid var(--pv-borde); text-align: center; -moz-appearance: textfield; }
#view_product.pv-compacta .pv-qty-input::-webkit-outer-spin-button, #view_product.pv-compacta .pv-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#view_product.pv-compacta .pv-subtotal { display: none; font-size: 14px; margin-left: auto; }
#view_product.pv-compacta .pv-cta {
    display: block; width: 100%; border: 0; border-radius: 6px; padding: 11px 14px;
    background: linear-gradient(90deg, var(--pv-acento), var(--pv-acento-2)); color: #fff; font-weight: 700; font-size: 14px;
}
#view_product.pv-compacta .pv-cta:hover { filter: brightness(1.05); }
#view_product.pv-compacta .pv-cta:disabled { opacity: .65; }
#view_product.pv-compacta .pv-cta .fa { margin-right: 6px; }

/* ---------- Mobile (común) ---------- */
@media (max-width: 767px) {
    #view_product.pv-compacta .modal-dialog.pv-dialog { margin: 0; }
    #view_product.pv-compacta .modal-content { border-radius: 0; min-height: 100vh; }
    #view_product.pv-compacta .modal-body { padding: 12px; }
    #view_product.pv-compacta .pv-grid { flex-direction: column; gap: 12px; }
    #view_product.pv-compacta .pv-col-galeria { flex: none; max-width: 100%; width: 100%; }
    #view_product.pv-compacta .pv-col-info { width: 100%; }
    #view_product.pv-compacta #etalage { float: none; }
    #view_product.pv-compacta .pv-solo-desktop { display: none; }
    #view_product.pv-compacta .pv-solo-mobile { display: inline; }
}