/* ==========================================================================
   Ficha de producto — extras compartidos (index / shop-products / despensas)
   Instrucciones · Compartir · Opciones similares · Te puede interesar
   Lo monta js/product-extras.js dentro de #productDetailModal.
   ========================================================================== */

/* ---------- Fila de acciones: dos chips 44pt+ ---------- */
#productDetailModal .pe-actions { display: flex; gap: 10px; }
#productDetailModal .pe-chip {
    flex: 1;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid #eceeec;
    border-radius: 14px;
    background: #fff;
    color: var(--ifr-ink, #1f2a24);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, transform .12s ease, opacity .2s ease;
}
#productDetailModal .pe-chip i { color: #81c408; font-size: 15px; }
#productDetailModal .pe-chip:active { transform: scale(.97); background: #f6f7f5; }
#productDetailModal .pe-chip.is-on { background: rgba(129,196,8,.12); border-color: #81c408; }
/* Sin el producto en el carrito las instrucciones aún no aplican: se ve apagado
   pero SIGUE siendo tappable (al tocarlo explica por qué), nunca un botón muerto. */
#productDetailModal .pe-chip.is-locked { opacity: .5; }
#productDetailModal .pe-chip.is-locked i { color: #b3bab4; }

/* ---------- Resumen de las instrucciones guardadas ---------- */
#productDetailModal .pe-note-preview { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4a544d; }
#productDetailModal .pe-note-preview[hidden] { display: none; }
#productDetailModal .pe-note-preview i { color: #81c408; font-size: 13px; flex-shrink: 0; }
#productDetailModal .pe-note-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#productDetailModal .pe-note-preview button {
    border: none;
    background: transparent;
    color: #81c408;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 0 8px 10px;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Filas horizontales ---------- */
/* margin-top sobre el gap de 16px de .sheet-body: los chips y el título de la
   fila quedaban muy pegados. Aplica a las dos secciones, así respira igual
   cuando la de "Opciones similares" no alcanza a llenarse y se oculta. */
#productDetailModal .pe-section { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
#productDetailModal .pe-section[hidden] { display: none; }
#productDetailModal .pe-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--ifr-ink, #1f2a24);
    margin: 0;
}
/* La primera tarjeta arranca alineada con el título (sin margen negativo a la
   izquierda) y la fila sangra SOLO a la derecha para que el corte se vea contra
   el borde de la pantalla. Sin scroll-snap a propósito: con `scroll-snap-align:
   start` el navegador alinea la tarjeta con el borde del padding-box y se come
   el padding izquierdo, que era justo lo que dejaba las tarjetas cortadas. */
#productDetailModal .pe-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -20px 0 0;
    padding: 2px 0 6px 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
#productDetailModal .pe-row::-webkit-scrollbar { display: none; }
/* El respiro final va como margen de la última tarjeta, no como padding-right
   del contenedor: el margen de un ítem flex SIEMPRE entra en el área scrolleable,
   el padding-right de un contenedor con scroll no siempre. */
#productDetailModal .pe-row > .pe-card:last-child,
#productDetailModal .pe-row > .pe-skel:last-child { margin-right: 20px; }
#productDetailModal .pe-card {
    flex: 0 0 136px;
    width: 136px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#productDetailModal .pe-thumb {
    position: relative;
    width: 136px;
    height: 136px;
    border-radius: 16px;
    background: var(--ifr-cream-1, #fff9ed);
    overflow: hidden;
}
#productDetailModal .pe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#productDetailModal .pe-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    z-index: 2;
}
#productDetailModal .pe-card-actions { position: absolute; right: 6px; bottom: 6px; z-index: 2; }
#productDetailModal .pe-add {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg, #8fce12 0%, #81C408 100%);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(129,196,8,.45);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
#productDetailModal .pe-add:active { transform: scale(.92); }
#productDetailModal .pe-add:disabled { opacity: .7; }
#productDetailModal .pe-qty {
    display: inline-flex;
    align-items: center;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(180deg, #8fce12 0%, #81C408 100%);
    box-shadow: 0 4px 12px rgba(129,196,8,.45);
}
#productDetailModal .pe-qty button {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#productDetailModal .pe-qty button:active { opacity: .7; }
#productDetailModal .pe-qty span { color: #fff; font-weight: 800; font-size: 13px; min-width: 14px; text-align: center; }
#productDetailModal .pe-soldout {
    display: inline-block;
    background: rgba(31,42,36,.78);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
}
#productDetailModal .pe-reason {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #5c8a12;
    background: rgba(129,196,8,.12);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#productDetailModal .pe-name {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ifr-ink, #1f2a24);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#productDetailModal .pe-price { font-size: 13px; font-weight: 800; color: var(--ifr-ink, #1f2a24); margin: 0; }
#productDetailModal .pe-price.is-sale { color: #e53935; }
#productDetailModal .pe-price .pe-unit { font-weight: 600; color: #8a948d; font-size: 11.5px; }
#productDetailModal .pe-price .pe-old { text-decoration: line-through; color: #b3bab4; font-weight: 600; font-size: 11px; margin-left: 4px; }

#productDetailModal .pe-skel {
    flex: 0 0 136px;
    width: 136px;
    height: 196px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 37%, #f1f3f5 63%);
    background-size: 400% 100%;
    animation: peShimmer 1.2s ease infinite;
}
@keyframes peShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (hover: hover) and (pointer: fine) {
    #productDetailModal .pe-chip:not(.is-locked):hover { border-color: #81c408; }
    #productDetailModal .pe-add:hover { transform: scale(1.06); }
}

/* ==========================================================================
   Modal de Instrucciones (sheet propio, NO un modal de Bootstrap)
   Bootstrap 5.0.0 apila mal dos modales: apila backdrops y deja la pantalla
   bloqueada. Este vive fuera de #productDetailModal, en <body>, por encima de
   él (10080: sobre metas 10072, bajo el diálogo global 99999).
   ========================================================================== */
.pe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 18, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 10080;
    opacity: 0;
    transition: opacity .25s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.pe-overlay[hidden] { display: none; }
.pe-overlay.is-open { opacity: 1; }
.pe-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,.22);
    /* El respiro inferior es variable: con el teclado abierto, js/product-extras.js
       pone --pe-safe en 0 porque el indicador de inicio queda tapado y esos 34pt
       solo empujaban el sheet contra la barra de estado. */
    --pe-safe: env(safe-area-inset-bottom, 0px);
    padding: 10px 20px calc(14px + var(--pe-safe));
    /* El teclado de iOS no achica el viewport de layout: js/product-extras.js
       mide visualViewport y sube el sheet con --pe-kb para que "Guardar" no
       quede debajo del teclado. */
    margin-bottom: var(--pe-kb, 0px);
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.32,.72,0,1);
    /* El tope TAMBIÉN descuenta el teclado. Con 92dvh fijo el sheet quedaba más
       alto que el hueco libre, iOS lo arrastraba hacia arriba para enseñar el
       textarea y el título se salía de pantalla. */
    max-height: calc(100dvh - var(--pe-kb, 0px) - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pe-overlay.is-open .pe-sheet { transform: translateY(0); }
.pe-sheet-handle {
    width: 38px;
    height: 5px;
    border-radius: 4px;
    background: #e3e6e3;
    margin: 0 auto 2px;
    flex-shrink: 0;
}
.pe-sheet-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--ifr-ink, #1f2a24);
    margin: 0;
}
.pe-sheet-sub { font-size: 13px; color: #8a948d; margin: -8px 0 0; }
.pe-sheet textarea {
    width: 100%;
    min-height: 64px;
    resize: none;
    border: 1.5px solid #eceeec;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar */
    line-height: 1.45;
    color: var(--ifr-ink, #1f2a24);
    font-family: 'Open Sans', sans-serif;
    background: #fff;
    outline: none;
    -webkit-appearance: none;
    transition: border-color .2s ease;
}
.pe-sheet textarea:focus { border-color: #81c408; }
.pe-sheet-count { font-size: 11px; color: #b3bab4; text-align: right; margin: -5px 0 0; }
.pe-guarantee {
    display: flex;
    gap: 9px;
    background: #f6f7f5;
    border-radius: 14px;
    padding: 10px 12px;
}
.pe-guarantee i { color: #81c408; font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.pe-guarantee p { margin: 0; font-size: 12px; line-height: 1.42; color: #4a544d; }
.pe-guarantee strong { color: var(--ifr-ink, #1f2a24); font-weight: 800; }
.pe-sheet-actions { display: flex; gap: 10px; }
.pe-btn {
    flex: 1;
    min-height: 46px;
    border-radius: 14px;
    border: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
.pe-btn:active { transform: scale(.98); }
.pe-btn-save {
    background: linear-gradient(180deg, #8fce12 0%, #81C408 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(129,196,8,.38);
}
.pe-btn-cancel { background: #f1f3f5; color: #4a544d; }