/* ==========================================================
   Cotizador y rediseño dropshipping de la ficha de producto
   Se carga solo en la ficha con ?src=drop ($fromDrop = true).
   Doc: docs/PROMPT-cotizador-dropshipping.md
   Para revertir: quitar los @push condicionales de
   resources/views/frontend/product-details.blade.php.
   ========================================================== */

/* ----- Base común ----- */
.cx { font-family: "DM Sans", sans-serif; color: #111; }

/* ----- Layout de la ficha: móvil (1 columna, orden del documento) -----
   Orden móvil: galería → título/decoración/colores → botones → cotizador → resumen. */
.drop-layout { display: grid; grid-template-columns: 1fr; row-gap: 16px; }
.drop-layout .dl-right { display: contents; }
.drop-layout .dl-gallery { order: 1; }
.drop-layout .dl-info    { order: 2; }
.drop-layout .dl-btns    { order: 3; }
.drop-layout .dl-cot     { order: 4; }
.drop-layout .dl-res     { order: 5; }

/* ----- Escritorio (≥992px): columna izquierda (galería + cotizador)
   y columna derecha (título/colores/specs + botones + resumen).
   Las alineaciones finas (botones al fin de la galería, cotizador ≥20px
   bajo las imágenes y ≥24px bajo "Comprar una muestra", resumen alineado
   con el cotizador) las ajusta fit() en cotizador-drop.js. ----- */
@media (min-width: 992px) {
    .drop-layout { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 0; align-items: start; }
    .drop-layout .dl-gallery { order: 0; grid-column: 1; grid-row: 1; }
    .drop-layout .dl-cot { order: 0; grid-column: 1; grid-row: 2; margin-top: 20px; }
    .drop-layout .dl-right {
        order: 0;
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
    }
    .drop-layout .dl-info { order: 0; }
    .drop-layout .dl-btns { order: 0; margin-top: 16px; }
    .drop-layout .dl-res { order: 0; }
}

/* ----- ≥1200px: el cotizador se ensancha 200px hacia la derecha
   y el resumen se recorre 200px para quedar junto a él sin taparse.
   Entre 992 y 1199px no se ensancha, para no tapar los botones. ----- */
@media (min-width: 1200px) {
    .drop-layout .dl-cot { margin-right: -200px; }
    .drop-layout .dl-res { margin-left: 200px; }
}

/* ----- Cotizador (tarjeta) ----- */
#ctp-cot-wrap { border: 1px solid #e5e5e5; border-radius: 10px; padding: 14px 16px; background: #fafafa; }
#ctp-cot-wrap h3 { margin: 0 0 12px; font-size: 19px; font-weight: 700; }
#ctp-cot { display: flex; flex-direction: column; gap: 12px; }
#ctp-cot .frow, #ctp-pvrow { display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: center; margin: 0; }
#ctp-cot .lb, #ctp-pvrow .lb { font-size: 13px; font-weight: 600; color: #333; }
#ctp-cot .pills { display: flex; flex-wrap: wrap; gap: 6px; }
#ctp-cot .pill { position: relative; margin: 0; }
#ctp-cot .pill input { position: absolute; opacity: 0; pointer-events: none; }
#ctp-cot .pill span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 999px; background: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; }
#ctp-cot .pill input:checked + span { border-color: #F04E0F; background: #FFF4EF; color: #B83200; font-weight: 600; }
#ctp-cot .pill input:focus-visible + span { outline: 2px solid #F04E0F; outline-offset: 2px; }
#ctp-cot .note { font-size: 12px; color: #555; margin: -4px 0 0 118px; line-height: 1.4; }
#ctp-cot .time { font-size: 12px; color: #111; margin: -4px 0 0 118px; line-height: 1.4; font-weight: 600; }
#ctp-cot .envio-txt { font-size: 13px; }

/* ----- Precio de venta ----- */
/* Va dentro del form (gap de 12px), por eso margin: 0. */
#ctp-pvrow { margin: 0; padding-top: 12px; border-top: 1px dashed #ddd; }
#ctp-pvrow input { width: 160px; min-height: 38px; border: 1px solid #d9d9d9; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-family: inherit; background: #fff; }
#ctp-pvrow small { grid-column: 2; font-size: 12px; color: #555; margin-top: -4px; }

/* ----- Resumen del pedido (caja negra) y ganancia ----- */
#ctp-res .bar2 { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; background: #111; color: #fff; font-size: 14px; }
#ctp-res .l { display: flex; justify-content: space-between; gap: 10px; color: #e5e5e5; }
#ctp-res .t { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #444; padding-top: 8px; margin-top: 2px; font-size: 15px; font-weight: 600; }
#ctp-res .t b { font-size: 24px; }
#ctp-out { margin-top: 8px; padding: 12px 16px; border-radius: 8px; background: #F3F8F4; border: 1px solid #DCEBE0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
#ctp-out:empty { display: none; }
#ctp-out div { display: flex; justify-content: space-between; gap: 10px; }
#ctp-out .big { font-size: 17px; font-weight: 700; color: #1d6b3a; }
#ctp-out .neg { color: #B42318; }
#ctp-out .disc { font-size: 11.5px; color: #555; margin: 4px 0 0; }
#ctp-talla { font-size: 12px; color: #555; margin: 6px 0 0; }

/* ----- Botón "Comprar una muestra" ----- */
.ctp-muestra { display: block; text-align: center; background: #fff; color: #F04E0F !important; border: 2px solid #F04E0F; font-weight: 700; font-size: 1.25rem; padding: .45rem 1rem; border-radius: .3rem; text-decoration: none !important; margin-top: 10px; }
@media (min-width: 992px) { .ctp-btns .ctp-muestra { margin-top: 8px !important; } }

/* ----- Bloque compacto "Descripción y características:" (solo escritorio) ----- */
#ctp-specs { font-family: "DM Sans", sans-serif; color: #111; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #e5e5e5; }
#ctp-specs .g2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 2px; font-size: 15px; line-height: 1.45; }
#ctp-specs .g2 span { color: #666; }

/* ----- Secciones nuevas debajo de la ficha ----- */
.ctp-sec { margin: 56px 0 0; }
.ctp-sec p { font-size: 16px; line-height: 1.6; margin: 12px 0 16px; }
.ctp-link { display: inline-flex; align-items: center; gap: 10px; color: #111 !important; text-decoration: none !important; font-weight: 500; font-size: 17px; padding: 0 0 6px; border-bottom: 2px solid #111; }

/* 6.1 Obtén el mejor resultado de impresión */
#ctp-print .hd { display: flex; align-items: center; gap: 14px; }
#ctp-print .hd h4 { margin: 0; }
#ctp-print .hd svg { flex: none; }
#ctp-print .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
#ctp-print .chips li { background: #fff; border: 1px solid #d9d9d9; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 500; }
#ctp-print .warn { font-size: 15px !important; line-height: 1.5; margin: 0 0 16px !important; }
#ctp-sample { margin: 0 0 18px; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
#ctp-sample .cv { flex: 1; min-height: 170px; position: relative; display: flex; align-items: center; justify-content: center; background-color: #fff; background-image: linear-gradient(45deg, #ececec 25%, transparent 25%), linear-gradient(-45deg, #ececec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ececec 75%), linear-gradient(-45deg, transparent 75%, #ececec 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
#ctp-sample .art { border: 2px dashed #111; padding: 14px 22px; text-align: center; line-height: 1; }
#ctp-sample .art b { display: block; font-size: 34px; font-weight: 800; letter-spacing: 1px; }
#ctp-sample .art i { display: block; font-size: 13px; font-style: normal; margin-top: 6px; color: #333; }
#ctp-sample .tag { position: absolute; font-size: 11.5px; font-weight: 600; background: #111; color: #fff; border-radius: 999px; padding: 3px 9px; }
#ctp-sample .cap { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 13px; border-top: 1px solid #e5e5e5; background: #fff; }
#ctp-sample .cap span { color: #555; }

/* 6.2 Vende en el canal que prefieras */
#ctp-canales .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
#ctp-canales .card { border: 1px solid #e5e5e5; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
#ctp-canales .card b { font-size: 17px; font-weight: 500; }
#ctp-canales .card span { font-size: 14px; color: #444; line-height: 1.5; flex: 1; }
#ctp-canales .card .ctp-link { font-size: 15px; align-self: flex-start; margin-top: 6px; }
@media (max-width: 991px) { #ctp-canales .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { #ctp-canales .grid { grid-template-columns: 1fr; } }

/* 6.3 Empaque */
#ctp-empaque .dir { font-size: 15px !important; margin: -4px 0 16px !important; }
#ctp-empaque .dir a, #ctp-faq a { color: #111; text-decoration: underline; }
#ctp-empaque .imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 820px; }
#ctp-empaque .imgs div { border: 1px solid #eee; border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
#ctp-empaque .imgs img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; }

/* 6.4 Preguntas frecuentes (acordeón details/summary) */
#ctp-faq .list { margin-top: 16px; border-top: 1px solid #e5e5e5; }
#ctp-faq details { border-bottom: 1px solid #e5e5e5; }
#ctp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-size: 17px; font-weight: 500; }
#ctp-faq summary::-webkit-details-marker { display: none; }
#ctp-faq summary::after { content: "+"; font-size: 24px; font-weight: 300; line-height: 1; flex: none; }
#ctp-faq details[open] summary::after { content: "−"; }
#ctp-faq .a { padding: 0 40px 18px 0; font-size: 16px; line-height: 1.6; color: #333; }
#ctp-faq .a .ctp-link { font-size: 16px; vertical-align: baseline; }

/* ----- Móvil (<576px): etiqueta arriba de las opciones, notas sin sangría ----- */
@media (max-width: 575px) {
    #ctp-cot .frow, #ctp-pvrow { grid-template-columns: 1fr; gap: 6px; }
    #ctp-cot .note, #ctp-cot .time { margin-left: 0; }
    #ctp-pvrow small { grid-column: 1; }
}