/* ===========================================================================
   Personalizador Gustore — estilos (vista de producto moderna, responsiva)
   =========================================================================== */

:root {
    --brand: #ff5a5f;
    --brand-dark: #e04a4f;
    --accent: #3b82f6;
    --green: #10b981;
    --ink: #1f2430;
    --muted: #6b7280;
    --line: #e8eaed;
    --bg: #f5f6f8;
    --panel: #ffffff;
    --radius: 14px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow: 0 8px 30px rgba(0,0,0,.10);
    --topbar-h: 58px;
    --tools-w: 76px;
    --panel-w: 350px;
    font-synthesis: none;
}

* { box-sizing: border-box; }

/* Reserva el ancho del scrollbar siempre, para que al aparecer (footer) no
   reflowee el lienzo (parte del "pestañeo"). */
html { scrollbar-gutter: stable; }

/* Bloquea el scroll de la página mientras hay un modal abierto (evita que la
   página se mueva al elegir prenda/diseño desde un modal). */
html:has(.preview-modal.open) { overflow: hidden; }

/* Estabiliza la altura del header clásico: el nav ya es 40px fijo, pero
   gs-header-top usaba padding (alto variable según contenido/carga). Lo fijamos
   para que --gs-header-h (medido por JS) sea CONSTANTE y el lienzo no se achique. */
.gs-header-top { height: 56px; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}
body { overflow-x: hidden; max-width: 100%; } /* sin scroll horizontal en móvil */
button { font-family: inherit; cursor: pointer; }
img { user-select: none; }

/* ===== TOP BAR ===== */
.topbar {
    height: var(--topbar-h);
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    position: sticky; top: 0; z-index: 40;
}
.topbar-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 18px; }
.topbar-logo img { height: 30px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
    transition: .18s; text-decoration: none;
}
.topbar-btn:hover { background: #fff4f4; border-color: var(--brand); color: var(--brand); }
.topbar-cart { position: relative; }
.cart-count {
    background: var(--brand); color: #fff; font-size: 11px; font-weight: 800;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ===== APP LAYOUT ===== */
/* El header clásico (gustore-modern.css) es position:fixed; su alto se mide por JS
   y se expone en --gs-header-h. La página deja ese espacio arriba y el editor llena
   el resto del viewport; el footer queda debajo (scroll). */
.perso-page {
    padding-top: var(--gs-header-h, 97px);
}
.app {
    display: grid;
    grid-template-columns: var(--tools-w) 1fr var(--panel-w);
    height: calc(100vh - var(--gs-header-h, 97px));
    height: calc(100dvh - var(--gs-header-h, 97px));
    overflow: hidden;
    background: var(--panel);
}

/* ===== TOOLS SIDEBAR ===== */
.tools {
    background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 8px;
}
.tool-btn {
    border: none; background: transparent; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 4px; border-radius: 12px; font-size: 11px; font-weight: 600;
    transition: .16s;
}
.tool-btn i { font-size: 20px; }
.tool-btn:hover { background: #fff4f4; color: var(--brand); }
.tool-btn.active { background: #fff0f0; color: var(--brand); }

/* ===== STAGE / CANVAS ===== */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.stage-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
    position: relative; z-index: 5; /* la barra y sus menús por encima del lienzo (desktop) */
    /* La zona VACÍA de la barra deja pasar el mouse al lienzo (clave en móvil, donde la barra
       flota sobre la prenda): así se puede arrastrar un estampado que queda debajo de la barra.
       Solo los botones y menús (abajo) vuelven a capturar eventos. */
    pointer-events: none;
}
.stage-toolbar .mini-btn,
.stage-toolbar .move-face-menu { pointer-events: auto; }
.stage-spacer { flex: 1; }
.st-group { display: flex; align-items: center; gap: 8px; }

/* Al seleccionar un estampado, las acciones (mover / mejoras / restaurar / eliminar)
   aparecen con un fade + pop para que el usuario las note. */
@keyframes actionPop {
    0%   { opacity: 0; transform: scale(.55); }
    60%  { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}
#move-face-wrap, #mejoras-wrap, #btn-restore-bg, #btn-delete {
    animation: actionPop .28s cubic-bezier(.3, 1.3, .5, 1) both;
}
.mini-btn {
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
    transition: .16s;
}
.mini-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mini-btn:disabled { opacity: .4; cursor: default; }
.mini-btn.danger:hover { border-color: var(--brand); color: var(--brand); }

.canvas-workspace {
    flex: 1; min-height: 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f0f1f4 100%);
}

/* Aviso flotante al cambiar de talla (el estampado se reescala a los cm reales de esa talla). */
.talla-notice {
    position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.96);
    z-index: 18; pointer-events: none; max-width: 82%; text-align: center;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(17, 17, 20, .9); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3;
    padding: 9px 14px; border-radius: 12px; box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
    opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.talla-notice.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.talla-notice i { color: var(--brand); font-size: 14px; }

/* ===== BARRA DE EDICIÓN DE TEXTO (overlay flotante) ===== */
.text-toolbar {
    display: none;
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 15;
    align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding: 8px 10px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow);
    max-width: calc(100% - 16px);
}
.text-toolbar.show { display: flex; animation: pop .15s ease; }
.tt-font {
    border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
    font-size: 13px; font-weight: 600; max-width: 180px; background: #fff;
}
.tt-size { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.tt-size-btn { width: 30px; height: 34px; border: none; background: #fff; font-size: 16px; font-weight: 700; color: var(--ink); }
.tt-size-btn:hover { background: #f3f4f6; }
.tt-size-input { width: 42px; height: 34px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: 14px; font-weight: 700; }
.tt-size-input:focus { outline: none; }
.tt-sep { width: 1px; height: 24px; background: var(--line); }
.tt-btn {
    width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 9px;
    font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: .14s;
}
.tt-btn:hover { border-color: var(--accent); color: var(--accent); }
.tt-btn.active { background: #eff6ff; border-color: var(--accent); color: var(--accent); }
.tt-color { width: 38px; height: 36px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; padding: 0; display: inline-flex; cursor: pointer; }
.tt-color input { width: 150%; height: 150%; margin: -25%; border: none; padding: 0; cursor: pointer; background: none; }
/* Popovers de Estilo (B/I/U) y Alineación → compactan la barra de texto */
.tt-pop-wrap { position: relative; display: inline-flex; }
.tt-pop {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    display: none; gap: 4px; padding: 5px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow); z-index: 30;
}
.tt-pop.open { display: flex; }
/* Wrapper centrado absoluto y del TAMAÑO EXACTO de la imagen (fit-content), como tee.
   Así el outline y los canvas (absolutos, en % del wrapper) calzan perfecto con la prenda. */
.canvas-container-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content; height: fit-content;
    line-height: 0;
}
.garment-image {
    display: block;
    /* alto: viewport - header - (toolbar+face-nav ≈ 150px) ; ancho: lo que deja el panel */
    max-height: calc(100dvh - var(--gs-header-h, 97px) - 150px);
    max-width: calc(100vw - var(--tools-w) - var(--panel-w) - 40px);
    height: auto; width: auto;
    transition: opacity .25s;
    pointer-events: none;
}
.stampable-area-outline {
    position: absolute;
    border: 1.5px dashed rgba(59,130,246,.55);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}
.fabric-canvas-wrapper { z-index: 2; }
.fabric-canvas-wrapper .canvas-container { position: absolute !important; top: 0; left: 0; }

/* tooltip de medición */
.measurement-tooltip {
    position: absolute; z-index: 20;
    background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
    white-space: nowrap; width: max-content; max-width: none; box-sizing: border-box;
    line-height: 1.3; pointer-events: none; opacity: 0;
    transition: opacity .12s;
}
.measurement-tooltip.visible { opacity: 1; }
.measurement-tooltip.error { background: var(--brand); }

/* ===== FACE TABS ===== */
.face-nav {
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 10px; display: flex; justify-content: center;
}
.face-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.face-tab {
    position: relative;
    border: 2px solid var(--line); background: #fff;
    width: 64px; height: 64px; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 4px; transition: .16s; color: var(--muted);
}
.face-tab img { width: 30px; height: 30px; object-fit: contain; }
.face-tab i { font-size: 22px; }
.face-tab span { font-size: 10px; font-weight: 700; }
.face-tab:hover { border-color: var(--brand); }
.face-tab.active { border-color: var(--brand); color: var(--brand); box-shadow: 0 4px 12px rgba(255,90,95,.18); }
.face-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--green); color: #fff; font-size: 10px; font-weight: 800;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
}

/* ===== PRODUCT PANEL ===== */
.product-panel {
    background: var(--panel); border-left: 1px solid var(--line);
    overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 18px;
}
.pp-header { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.pp-garment-select {
    width: 100%; display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
    padding: 11px 14px; transition: .16s; text-align: left; cursor: pointer;
}
.pp-garment-select:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(255,90,95,.12); }
.pp-garment-ic { color: var(--brand); font-size: 16px; }
.pp-garment-name { flex: 1; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.pp-garment-chev { color: var(--muted); font-size: 13px; transition: .16s; }
.pp-garment-select:hover .pp-garment-chev { color: var(--brand); transform: translateY(1px); }
.pp-variant { color: var(--muted); font-size: 13px; margin-top: 8px; padding-left: 2px; }
.pp-section { display: flex; flex-direction: column; gap: 10px; }
.pp-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pp-disclaimer { margin: 0; font-size: 11px; color: var(--muted); }

.pp-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
    transition: .16s;
}
.pp-swatch:hover { transform: scale(1.08); }
.pp-swatch.active { box-shadow: 0 0 0 2px var(--brand); transform: scale(1.08); }

/* Grilla de tallas con cantidad por talla (pedido por mayor) */
.pp-tallas-grid {
    display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto;
    /* Reserva SIEMPRE el canal de la scrollbar → el borde derecho de las filas queda parejo,
       haya o no scroll, sin saltos. Un pelín de padding para que no roce la scrollbar. */
    scrollbar-gutter: stable; padding-right: 6px;
    /* Difuminado SOLO en el borde donde hay más contenido oculto (clases at-top/at-bottom las
       pone el JS según el scroll): en el tope no se difumina arriba, abajo del todo no se difumina abajo. */
    --fade-top: transparent; --fade-bot: transparent;
    -webkit-mask-image: linear-gradient(to bottom, var(--fade-top), #000 14px, #000 calc(100% - 18px), var(--fade-bot));
            mask-image: linear-gradient(to bottom, var(--fade-top), #000 14px, #000 calc(100% - 18px), var(--fade-bot));
}
.pp-tallas-grid.at-top { --fade-top: #000; }       /* en el tope: sin difuminado arriba */
.pp-tallas-grid.at-bottom { --fade-bot: #000; }    /* al final: sin difuminado abajo */
/* Scrollbar discreta para la lista de tallas */
.pp-tallas-grid::-webkit-scrollbar { width: 6px; }
.pp-tallas-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.pp-tallas-grid::-webkit-scrollbar-track { background: transparent; }
.pp-tallas-total { color: var(--brand-dark); font-weight: 700; }
/* Título "Tallas y cantidad" con el precio de referencia al lado (aprovecha el espacio a la derecha). */
.pp-tallas-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.pp-tallas-precio { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
/* Glosa de la promo (debajo del título) + tramos de precio "con dcto / normal tachado". */
.pp-tallas-desc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 6px 0 9px; }
.pp-tallas-desc-precio { font-size: 12.5px; color: var(--muted); }
.pp-tallas-desc-new { font-size: 14px; font-weight: 800; color: var(--brand-dark); margin-right: 4px; }
.pp-tallas-desc .pp-trow-price-old, .pp-tallas-precio .pp-trow-price-old { font-weight: 600; }
.pp-tallas-desc-promo {
    display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box;
    background: #fff1f1; color: var(--brand-dark); border: 1px solid #ffd4d6;
    font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 10px; line-height: 1.2;
}
.pp-tallas-desc-promo b { font-weight: 800; }
.pp-tallas-desc-promo i { font-size: 11px; }
.pp-tallas-hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.pp-trow {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1.5px solid var(--line); border-radius: 10px; padding: 0 5px 0 12px; transition: .15s;
}
.pp-trow.active { border-color: var(--brand); }
.pp-trow.has { border-color: var(--brand); background: #fff5f5; }
.pp-trow.no-stock { opacity: .5; }
.pp-trow-name {
    border: none; background: transparent; cursor: pointer; flex: 1; min-width: 0; text-align: left;
    display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 6px 0;
}
/* Ancho fijo del nombre de talla → los precios quedan alineados en columna en todas las filas. */
.pp-trow-talla { flex: 0 0 auto; min-width: 44px; font-weight: 800; font-size: 13.5px; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.pp-trow.active .pp-trow-talla { color: var(--brand-dark); }
.pp-trow-price { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pp-trow.has .pp-trow-price { color: var(--brand-dark); }
.pp-trow-price-old { color: var(--muted); font-weight: 600; opacity: .7; }
.pp-trow-price-new { color: var(--brand-dark); font-weight: 800; }
.pp-trow-nostock { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* Stepper integrado: pill suave, sin doble borde; al tener cantidad se tiñe con la marca. */
.pp-trow-qty { display: inline-flex; align-items: center; border-radius: 9px; overflow: hidden; background: #f1f3f5; flex: 0 0 auto; }
.pp-trow.has .pp-trow-qty { background: #ffe6e6; }
.pp-trow-minus, .pp-trow-plus { width: 30px; height: 30px; border: none; background: transparent; font-size: 18px; font-weight: 700; line-height: 1; color: var(--muted); cursor: pointer; transition: color .12s; }
.pp-trow-minus:hover, .pp-trow-plus:hover { color: var(--ink); }
.pp-trow.has .pp-trow-minus, .pp-trow.has .pp-trow-plus { color: var(--brand-dark); }
.pp-trow-minus:disabled, .pp-trow-plus:disabled { opacity: .35; cursor: not-allowed; }
.pp-trow-input { width: 30px; height: 30px; border: none; text-align: center; font-size: 14px; font-weight: 800; color: var(--ink); background: transparent; }
.pp-trow-input:focus { outline: none; }

.pp-tecnicas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-tecnica {
    border: 2px solid var(--line); background: #fff; border-radius: 10px;
    padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--muted); transition: .16s; text-align: center;
}
.pp-tecnica i { font-size: 16px; }
.pp-tecnica:hover { border-color: var(--accent); color: var(--accent); }
.pp-tecnica.active { border-color: var(--accent); background: #eff6ff; color: var(--accent); }


.pp-comment { border: 2px solid var(--line); border-radius: 10px; padding: 10px; font-size: 14px; resize: vertical; font-family: inherit; }
.pp-comment:focus { outline: none; border-color: var(--accent); }

/* detalle de impresiones (precio por tamaño) */
.pp-impresiones {
    border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 6px; background: #fafbfc;
}
.pp-imp-head { width: 100%; border: none; background: transparent; padding: 0; cursor: pointer;
    font-size: 13px; font-weight: 800; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
.pp-imp-head > span { display: flex; align-items: center; gap: 7px; }
.pp-imp-head > span > i { color: var(--brand); }
.pp-imp-chev { color: var(--muted); font-size: 12px; transition: transform .18s; }
.pp-imp-head.open .pp-imp-chev { transform: rotate(180deg); }
.pp-imp-body { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.pp-imp-body[hidden] { display: none; }
.pp-imp-face { }
.pp-imp-facehead { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.pp-imp-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.pp-imp-tag { font-weight: 700; color: var(--accent); }
.pp-imp-row.excede .pp-imp-tag { color: var(--brand); }
.pp-imp-adic { font-size: 10.5px; font-weight: 800; color: #15803d; background: #dcfce7; border-radius: 6px; padding: 1px 5px; margin-left: 4px; }
.pp-imp-items { display: flex; flex-direction: column; gap: 4px; margin: 3px 0 6px; }
.pp-imp-item { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 4px;
    background: var(--surface-2, #f3f4f6); border-radius: 8px; font-size: 12px; color: var(--ink); }
.pp-imp-item img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; background: #fff; flex-shrink: 0; }
.pp-imp-item > i { width: 20px; text-align: center; color: var(--brand); font-size: 12px; flex-shrink: 0; }
.pp-imp-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-imp-item-del { border: none; background: transparent; color: var(--muted); cursor: pointer;
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0; transition: .12s; }
.pp-imp-item-del:hover { background: #fee2e2; color: var(--brand); }
.pp-imp-warn { font-size: 12px; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 7px 9px; display: flex; gap: 6px; align-items: flex-start; }

/* Descuentos por mayor — barra fina SIN texto, debajo del botón comprar */
.pp-wholesale { padding: 0; }
.pp-ladder { position: relative; padding: 17px 14px; cursor: pointer; }
.pp-ladder:hover .pp-ladder-track { background: #dde0e4; }
.pp-ladder-track { position: relative; height: 5px; background: #e7e9ec; border-radius: 99px; }
.pp-ladder-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); border-radius: 99px; transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.pp-node {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #d3d6db; transition: .25s;
}
.pp-node.on { background: var(--brand); border-color: var(--brand); }
.pp-node.active { width: 14px; height: 14px; z-index: 2; animation: pp-node-pulse 1.6s ease-out infinite; }
@keyframes pp-node-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 90, 95, .5); }
    70% { box-shadow: 0 0 0 8px rgba(255, 90, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 90, 95, 0); }
}
.pp-node-unid { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pp-node-pct { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pp-node.on .pp-node-unid, .pp-node.on .pp-node-pct { color: var(--brand); }
/* Marcador "estás aquí" en la punta del relleno (cuando no cae justo en un tramo) */
.pp-progress {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2.5px solid var(--brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22); z-index: 3; transition: left .45s cubic-bezier(.4, 0, .2, 1);
}
/* Tabla de descuentos dentro del modal (Swal) */
.ws-help-table { width: 100%; border-collapse: collapse; margin: 0; }
.ws-help-table td { padding: 9px 12px; font-size: 14px; text-align: left; border-bottom: 1px solid #eee; color: #444; }
.ws-help-table tr:last-child td { border-bottom: none; }
.ws-help-table td:last-child { text-align: right; }
.ws-help-table .ws-help-on td { background: #fff5f5; }
.ws-help-table .ws-help-on b, .ws-help-table .ws-help-on i { color: #ff5a5f; }

/* Selector de plantillas de etiqueta (dentro del Swal) */
.et-tpl-help { font-size: 13px; color: #666; margin: 0 0 12px; }
.et-tpl-grid { display: flex; flex-direction: row; gap: 10px; align-items: stretch; }
.et-tpl {
    display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0;
    border: 1.5px solid #e6e6e6; background: #fff; border-radius: 10px; padding: 10px; cursor: pointer; transition: .15s;
}
.et-tpl:hover { border-color: #ff5a5f; background: #fff7f7; box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
.et-tpl-prev { display: flex; align-items: center; justify-content: center; width: 100%; height: 96px; }
.et-tpl-prev img, .et-tpl-prev svg { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.et-tpl-name { font-size: 12.5px; font-weight: 700; color: #444; }
.et-saved-grid { flex-wrap: wrap; }
.et-saved-grid .et-tpl { flex: 0 1 calc(50% - 5px); }

/* Modal de posicionamiento del logo sobre la plantilla */
.et-pos-dialog { max-width: 520px; }
.et-pos-help { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 8px; }
.et-pos-tip { font-size: 12.5px; color: #8a6d00; background: #fff8e1; border: 1px solid #ffe7a0; border-radius: 8px; padding: 8px 12px; margin: 0 auto 12px; max-width: 480px; text-align: center; }
.et-pos-tip i { margin-right: 5px; }
.et-pos-note { font-size: 12px; color: var(--muted); text-align: center; margin: -4px auto 12px; max-width: 480px; }
.et-pos-note i { margin-right: 5px; opacity: .8; }
.et-pos-stage { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1.35; background: #2c2c2c; border-radius: 8px; overflow: hidden; touch-action: none; }
.et-pos-frame { position: absolute; bottom: 7%; left: 10.5%; width: 79%; }
.et-pos-tpl { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.et-pos-logo { position: absolute; cursor: move; border: 1.5px solid rgba(255, 90, 95, .95); box-sizing: border-box; touch-action: none; }
.et-pos-logo img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.et-pos-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 1.5px solid #ff5a5f; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); touch-action: none; }
.et-pos-h.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.et-pos-h.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.et-pos-h.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.et-pos-h.se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.et-pos-size { display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 14px auto 2px; color: var(--muted); }
.et-pos-size input { flex: 1; }

/* Tipo de estampado (DTG / DTF / Ustedes eligen) — radios dentro del modal de subida */
.img-tipo { margin: 14px 2px 2px; text-align: left; }
.img-tipo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.img-tipo-title { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.img-tipo-help { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px; line-height: 1; }
.img-tipo-help:hover { color: var(--brand); }
.img-tipo-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.img-tipo-opt {
    display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
    border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 6px;
    cursor: pointer; transition: .15s;
}
.img-tipo-opt:hover { border-color: var(--brand); }
.img-tipo-opt.active { border-color: var(--brand); background: #fff5f5; }
.img-tipo-opt > i { font-size: 17px; color: var(--muted); }
.img-tipo-opt.active > i { color: var(--brand); }
.img-tipo-label { font-size: 11.5px; font-weight: 700; color: #333; line-height: 1.2; }
.img-tipo-desc { font-size: 12.5px; color: var(--muted); margin-top: 9px; line-height: 1.4; text-align: center; }

/* barra de compra */
.pp-shipping { display: flex; align-items: center; gap: 10px; background: #f4fbf6; border: 1px solid #cdeede; border-radius: 12px; padding: 10px 12px; }
.pp-shipping > i { color: #15a05a; font-size: 17px; flex: 0 0 auto; }
.pp-shipping-txt { display: flex; flex-direction: column; line-height: 1.25; }
.pp-shipping-txt b { font-size: 13.5px; color: #14794a; }
.pp-shipping-txt span { font-size: 11.5px; color: var(--muted); }

.pp-foot {
    /* Sangra a los bordes del panel (padding 20px) para tapar el contenido que hace scroll
       por detrás/al costado de la scrollbar; fondo opaco + z-index para cubrir el overflow. */
    margin: auto -20px 0; position: sticky; bottom: 0; z-index: 3;
    background: var(--panel); padding: 12px 20px 16px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 12px;
}
.pp-cartbar { display: flex; flex-direction: column; gap: 12px; }
.pp-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pp-price-label { font-size: 12px; color: var(--muted); }
.pp-price-label:empty { display: none; }
.pp-price-row { display: flex; align-items: baseline; gap: 10px; }
.pp-price-value { font-size: 28px; font-weight: 900; color: var(--ink); }
.pp-price-old { font-size: 16px; color: var(--muted); text-decoration: line-through; }
.pp-add-btn {
    border: none; border-radius: 12px; padding: 16px;
    background: var(--brand); color: #fff; font-size: 16px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: .16s; box-shadow: 0 6px 18px rgba(255,90,95,.32);
}
.pp-add-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.pp-add-btn:active { transform: translateY(0); }
.pp-add-btn:disabled, .mobile-add-btn:disabled {
    opacity: .6; cursor: default; box-shadow: none; transform: none; pointer-events: none;
}
/* "Ir a pagar" — aparece tras agregar al carro. Secundario (outline marca) bajo el botón principal. */
.pp-checkout-btn {
    text-decoration: none; border-radius: 12px; padding: 13px;
    background: #fff; color: var(--brand-dark); border: 1.5px solid var(--brand);
    font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px;
    transition: .16s; animation: pp-cta-in .22s ease both;
}
.pp-checkout-btn[hidden] { display: none; }
.pp-checkout-btn:hover { background: var(--brand); color: #fff; transform: translateY(-1px); }
.pp-checkout-btn i { font-size: 15px; }
@keyframes pp-cta-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Versión móvil (dock): full width bajo la barra de precio+agregar. */
.mobile-checkout-btn {
    text-decoration: none; border-radius: 12px; padding: 12px; margin-top: 8px;
    background: #fff; color: var(--brand-dark); border: 1.5px solid var(--brand);
    font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px;
    animation: pp-cta-in .22s ease both;
}
.mobile-checkout-btn[hidden] { display: none; }
.mobile-checkout-btn:active { background: var(--brand); color: #fff; }

/* opciones avanzadas (progressive disclosure) */
.pp-more { border-top: 1px dashed var(--line); padding-top: 8px; }
.pp-more-toggle {
    border: none; background: transparent; color: var(--muted);
    font-size: 13px; font-weight: 700; padding: 6px 0;
    display: inline-flex; align-items: center; gap: 8px;
}
.pp-more-toggle i { transition: transform .2s; }
.pp-more-toggle.open i { transform: rotate(180deg); }
.pp-more-body { display: none; flex-direction: column; gap: 10px; padding-top: 8px; }
.pp-more-body.show { display: flex; animation: pop .25s ease; }
.pp-save-link {
    border: 1px dashed var(--accent); background: #f5f9ff; color: var(--accent);
    border-radius: 10px; padding: 10px; font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pp-save-link:hover { background: #eaf2ff; }

/* estado vacío que guía */
.empty-hint {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 5; padding: 16px;
}
.launcher-card {
    pointer-events: auto;
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
    padding: 12px 12px 11px; text-align: center; width: min(280px, 72vw);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    /* flota suavemente de arriba a abajo (sin agrandarse/achicarse) */
    animation: launcherIn .3s cubic-bezier(.2,.9,.3,1.2) both,
               launcherFloat 4s ease-in-out .6s infinite;
}
/* Halo de glow detrás de la tarjeta: solo se desvanece (sin crecer → no parece que escala) */
.launcher-card::after {
    content: ''; position: absolute; inset: -4px; border-radius: 20px; z-index: -1;
    box-shadow: 0 0 40px 12px rgba(255,90,95,.5);
    will-change: opacity;
    animation: launcherHalo 4s ease-in-out .6s infinite;
}
@keyframes launcherFloat {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-6px); }
    75%  { transform: translateY(6px); }
    100% { transform: translateY(0); }
}
@keyframes launcherHalo {
    0%, 100% { opacity: .2; }
    50%      { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
    .launcher-card { animation: launcherIn .3s ease both; }
    .launcher-card::after { animation: none; opacity: .25; }
}
.launcher-title { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.launcher-title span { color: var(--brand); }
.launcher-sub { font-size: 11px; color: var(--muted); margin-top: 2px; margin-bottom: 9px; }
.launcher-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.launch-opt {
    border: 1.5px solid var(--line); background: #fff; border-radius: 11px;
    padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: .16s; cursor: pointer;
}
.launch-opt:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(255,90,95,.16); }
.launch-opt-ic {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, #fff1f1, #ffe2e2); color: var(--brand);
    display: flex; align-items: center; justify-content: center; font-size: 13px; transition: .16s;
}
.launch-opt:hover .launch-opt-ic { background: var(--brand); color: #fff; transform: scale(1.06); }
.launch-opt-label { font-size: 10.5px; font-weight: 800; color: var(--ink); }
.launch-opt-desc { display: none; }
@keyframes launcherIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Al cargar el primer diseño: el menú se desliza hacia arriba y se desvanece (aparece la barra) */
.launcher-card.leaving {
    animation: none;
    transform: translateY(-46px) scale(.92);
    opacity: 0; pointer-events: none;
    transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .42s ease;
}
/* Morph: la tarjeta sube y se encoge hacia el top (parece volverse la barra) */
.launcher-card.morphing {
    animation: none;
    transform-origin: top center;
    pointer-events: none;
    transition: transform .46s cubic-bezier(.5,0,.2,1), opacity .42s ease;
}
@keyframes barIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* Menos saturación para usuario nuevo: sin historial ni vista previa hasta que haya un diseño */
.app.is-empty .st-history,
.app.is-empty .stage-preview-float,
.app.is-empty #btn-preview { display: none; }

@media (max-width: 440px) {
    .launch-opt-desc { display: none; }
}

/* ===== MODAL VISTA PREVIA ===== */
.preview-modal {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(15,18,25,.7); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; padding: 18px;
}
.preview-modal.open { display: flex; animation: pop .2s ease; }
.preview-dialog {
    background: #fff; border-radius: 18px; max-width: 920px; width: 100%;
    max-height: 90vh; overflow-y: auto; padding: 22px; position: relative;
    box-shadow: var(--shadow);
}
/* Solo el modal de vista previa: sin padding inferior, para que la barra de acciones
   sticky quede a ras del borde de la modal. */
#preview-modal .preview-dialog { padding-bottom: 0; }
.preview-close {
    position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
    border: none; border-radius: 50%; background: #f3f4f6; color: var(--ink);
    font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.preview-close:hover { background: #e5e7eb; }
.preview-title { margin: 0 0 16px; font-size: 20px; font-weight: 800; }
.preview-body {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
    gap: 16px; justify-content: center;
}
.preview-fig { margin: 0; text-align: center; }
.preview-fig img {
    width: 100%; border-radius: 12px; border: 1px solid var(--line);
    background: radial-gradient(circle at 50% 40%, #fff, #f0f1f4);
}
.preview-fig figcaption { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.preview-loading { grid-column: 1/-1; text-align: center; padding: 40px; color: var(--muted); font-weight: 600; }
.preview-loading i { margin-right: 8px; color: var(--brand); }
.preview-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin: 18px -22px 0; padding: 14px 22px;
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px;
}
.preview-download-btn {
    border: none; border-radius: 12px; padding: 13px 22px;
    background: var(--ink); color: #fff; font-size: 14px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 9px; transition: .16s;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.preview-download-btn:hover { background: #000; transform: translateY(-1px); }
.preview-download-btn:disabled { opacity: .5; cursor: default; transform: none; }
.preview-3d-btn {
    border: none; border-radius: 12px; padding: 13px 22px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
    font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 9px;
    transition: .16s; box-shadow: 0 6px 16px rgba(255,90,95,.32);
}
.preview-3d-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ===== VISOR 3D ===== */
.viewer3d-dialog {
    background: #0e0e11; border-radius: 18px; width: 96vw; max-width: 1100px; height: 88vh;
    position: relative; box-shadow: var(--shadow); overflow: hidden;
    display: flex; flex-direction: column;
}
.viewer3d-tabs { display: flex; gap: 6px; padding: 12px 56px 8px 14px; flex-wrap: wrap; }
.viewer3d-tabs:empty { display: none; }
.viewer3d-tabs button {
    border: 1px solid #2e2e36; border-radius: 999px; padding: 7px 14px;
    background: #1b1b21; color: #ececf1; font-size: 13px; font-weight: 700; transition: .15s;
}
.viewer3d-tabs button.active { background: #fff; color: #16161a; border-color: #fff; }
.viewer3d-frame-wrap { position: relative; flex: 1; min-height: 0; }
#viewer3d-frame { width: 100%; height: 100%; border: 0; display: block; }
.viewer3d-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    gap: 10px; color: #ececf1; font-weight: 600; background: #0e0e11; z-index: 2;
}
.viewer3d-modal .preview-close { background: rgba(0,0,0,.55); color: #fff; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.viewer3d-modal .preview-close:hover { background: rgba(0,0,0,.75); }

/* ===== RECORTAR (crop) ===== */
.crop-dialog { max-width: 760px; text-align: center; }
.crop-stage {
    position: relative; width: max-content; max-width: 100%; margin: 4px auto 0; line-height: 0;
    background: repeating-conic-gradient(#e9ecef 0% 25%, #fff 0% 50%) 50% / 22px 22px;
    overflow: hidden; /* recorta el box-shadow oscuro a la imagen (no a la página) */
}
.crop-img { max-width: 100%; max-height: 60vh; display: block; user-select: none; -webkit-user-drag: none; }
.crop-box {
    position: absolute; box-sizing: border-box; border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 0 0 9999px rgba(0,0,0,.45); cursor: move; touch-action: none;
}
.crop-handle {
    position: absolute; width: 16px; height: 16px; background: #fff;
    border: 2px solid var(--brand); border-radius: 3px; touch-action: none;
}
.crop-handle.tl { left: -8px; top: -8px; cursor: nwse-resize; }
.crop-handle.tr { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-handle.bl { left: -8px; bottom: -8px; cursor: nesw-resize; }
.crop-handle.br { right: -8px; bottom: -8px; cursor: nwse-resize; }
.crop-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.crop-btn-cancel, .crop-btn-apply {
    border: none; border-radius: 12px; padding: 13px 22px; font-size: 14px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 9px; transition: .16s;
}
.crop-btn-cancel { background: #eceff3; color: var(--ink); }
.crop-btn-cancel:hover { background: #e0e4ea; }
.crop-btn-apply {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
    box-shadow: 0 6px 16px rgba(255,90,95,.32);
}
.crop-btn-apply:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ===== BORRAR FONDO (preview iterativo) ===== */
.bg-dialog { max-width: 520px; text-align: center; padding-bottom: 0; }
.bg-preview {
    position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center;
    background: repeating-conic-gradient(#e9ecef 0% 25%, #fff 0% 50%) 50% / 22px 22px;
    border-radius: 12px; border: 1px solid var(--line); overflow: hidden; margin-bottom: 14px;
}
.bg-result { max-width: 100%; max-height: 50vh; display: none; touch-action: none; }
.bg-eraser { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.bg-eraser-toggle {
    align-self: center; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 14px;
    font-size: 13px; font-weight: 800; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: .15s;
}
.bg-eraser-toggle.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.bg-brush { display: flex; flex-direction: column; gap: 8px; }
.bg-brush-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 700; }
.bg-brush-row span { min-width: 54px; }
.bg-brush-row input { flex: 1; }
.bg-brush-cursor {
    position: absolute; border-radius: 50%; pointer-events: none; display: none; z-index: 3;
    transform: translate(-50%, -50%); border: 2px solid #fff; background: rgba(255,90,95,.15);
    box-shadow: 0 0 0 1.5px var(--brand), 0 0 10px 2px rgba(255,90,95,.55);
}
.bg-loading { position: absolute; inset: 0; background: rgba(255,255,255,.72); color: var(--ink); font-weight: 600; display: flex; gap: 8px; align-items: center; justify-content: center; }
.bg-loading i { color: var(--brand); }
.bg-methods { display: flex; gap: 6px; margin-bottom: 12px; background: #f1f3f6; border-radius: 999px; padding: 4px; }
.bg-methods button {
    flex: 1; border: none; background: transparent; border-radius: 999px; padding: 9px 12px;
    font-size: 13px; font-weight: 800; color: var(--muted); display: inline-flex; align-items: center;
    justify-content: center; gap: 7px; transition: .15s;
}
.bg-methods button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.bg-ctl, .bg-controls { text-align: left; margin-bottom: 14px; }
.bg-colorpick { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bg-colorpick .bg-label { margin-bottom: 0; }
.bg-color-input { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; flex-shrink: 0; }

/* ===== MEJORAR RESOLUCIÓN (antes/después + zoom) ===== */
.up-dialog { max-width: 600px; text-align: center; padding-bottom: 0; }
.up-compare {
    position: relative; width: 100%; max-width: 560px; margin: 4px auto 0;
    aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; touch-action: none; user-select: none;
    background: repeating-conic-gradient(#e9ecef 0% 25%, #fff 0% 50%) 50% / 22px 22px;
}
.up-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; transform-origin: center; -webkit-user-drag: none; pointer-events: none;
}
.up-before-wrap { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
.up-before { height: 100%; } /* el ancho lo fija el JS = ancho del compare (no se encoge con el wrap) */
.up-divider {
    position: absolute; top: 0; left: 50%; width: 2px; height: 100%; z-index: 4;
    background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); transform: translateX(-50%);
    cursor: ew-resize; touch-action: none;
}
.up-handle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.up-tag {
    position: absolute; bottom: 8px; z-index: 4; font-size: 11px; font-weight: 800; color: #fff;
    background: rgba(0, 0, 0, .55); padding: 3px 9px; border-radius: 99px; pointer-events: none;
}
.up-tag-a { left: 8px; }
.up-tag-b { right: 8px; }
.up-loading {
    position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
    gap: 8px; background: rgba(255, 255, 255, .8); color: var(--ink); font-weight: 700;
}
.up-zoom { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 12px auto 4px; color: var(--muted); }
.up-zoom .bg-slider { flex: 1; }
.up-hint { font-size: 12px; color: var(--muted); margin: 4px auto 0; max-width: 560px; }
/* Pre-proceso: se muestra SOLO el original (sin divisor, etiquetas, zoom ni hint de comparación). */
.up-pre .up-divider,
.up-pre .up-tag,
.up-pre .up-zoom,
.up-pre .up-hint { display: none; }
.up-pre .up-before-wrap { width: 100% !important; }

/* ===== Contenido bajo la app (SEO + confianza, dinámico por prenda) ===== */
.perso-seo { background: #fff; border-top: 1px solid var(--line); padding: 44px 20px; }
.perso-seo-inner { max-width: 980px; margin: 0 auto; color: var(--ink); line-height: 1.6; }
.perso-seo h1 { font-size: 27px; font-weight: 800; margin: 0 0 16px; }
.perso-seo h2 { font-size: 20px; font-weight: 800; margin: 32px 0 12px; }
.perso-seo p, .perso-seo ol, .perso-seo ul { margin: 0 0 12px; color: #444; font-size: 15px; }
.perso-seo strong, .perso-seo b { color: var(--ink); }

/* Pestañas del contenido (descripción / cómo funciona / tallas / trabajos / opiniones) */
.perso-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 20px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.perso-tabs::-webkit-scrollbar { display: none; }
.perso-tab {
    flex: 0 0 auto; border: none; background: transparent; padding: 12px 16px; margin-bottom: -2px;
    font-size: 14.5px; font-weight: 700; color: var(--muted); cursor: pointer; position: relative;
    white-space: nowrap; transition: color .15s; font-family: inherit;
}
.perso-tab:hover { color: var(--ink); }
.perso-tab.active { color: var(--brand); }
.perso-tab.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--brand); border-radius: 3px 3px 0 0; }
.perso-panel { display: none; padding-top: 24px; }
.perso-panel.active { display: block; animation: perso-fade .25s ease; }
.perso-panel > h2:first-child { margin-top: 0; }
@keyframes perso-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Descripción de la prenda (HTML del admin: descripcionPrenda) */
.perso-prenda-desc { font-size: 15px; color: #444; }
.perso-prenda-desc h2 { font-size: 18px; margin: 22px 0 8px; }
.perso-prenda-desc ul { padding-left: 18px; margin: 0 0 12px; }
.perso-prenda-desc li { margin-bottom: 5px; }

/* Pasos "cómo personalizar" */
.perso-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 8px; }
.perso-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    background: #fff5f5; border: 1px solid rgba(255, 90, 95, .18); border-radius: 14px; padding: 16px 12px; font-size: 13px; color: #555; }
.perso-step i { font-size: 24px; color: var(--brand); }

/* Guía de tallas */
.perso-tallas { background: #f7f8fa; border-radius: 16px; padding: 22px 24px; margin-top: 10px; }
.perso-tallas h2 { margin-top: 0; }
.perso-tallas-intro { margin: 0; }
.perso-tallas-row { display: flex; gap: 32px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.perso-tallas-txt { flex: 0 1 auto; min-width: 280px; }
.perso-tallas-img { flex: 0 1 auto; }
.perso-tallas-img img { max-width: 340px; width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; }
.perso-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; padding: 11px 18px; border-radius: 11px; text-decoration: none; transition: .15s; }
.perso-btn:hover { background: var(--brand-dark); }

/* Tabla de medidas de la prenda (inline) */
.perso-tallas-table { width: 100%; min-width: 300px; max-width: 400px; border-collapse: collapse; margin: 0 0 10px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(0, 0, 0, .05); }
.perso-tallas-table th, .perso-tallas-table td { padding: 9px 16px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.perso-tallas-table thead th { background: #f1f3f5; font-weight: 800; color: var(--ink); font-size: 12.5px; }
.perso-tallas-table tbody tr:last-child td { border-bottom: none; }
.perso-tallas-table td { color: #444; }
.perso-tallas-note { font-size: 12px; color: var(--muted); margin: 0; }
.perso-tallas-note a { color: var(--brand-dark); font-weight: 700; }

/* Badge de reseñas de Google — destacado */
.perso-google {
    display: flex; width: 100%; align-items: center; gap: 14px; text-decoration: none;
    background: #fff; border: 1px solid #e6e8eb; border-radius: 16px; padding: 14px 20px;
    margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); transition: .18s;
}
.perso-google:hover { box-shadow: 0 10px 28px rgba(66, 133, 244, .18); transform: translateY(-2px); border-color: #d2e3fc; }
.perso-google-logo { flex: 0 0 auto; display: flex; }
.perso-google-info { display: flex; flex-direction: column; gap: 3px; }
.perso-google-top { display: flex; align-items: center; gap: 9px; }
.perso-google-rating { font-size: 26px; font-weight: 900; color: #202124; line-height: 1; }
.perso-google-stars { color: #fbbc05; font-size: 17px; letter-spacing: 1.5px; }
.perso-google-stars .far { color: #dadce0; }
.perso-google-txt { font-size: 12.5px; font-weight: 600; color: #5f6368; }
.perso-google-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-size: 13px; font-weight: 800; color: #1a73e8; white-space: nowrap;
}
.perso-google-cta i { font-size: 11px; }

/* Galería de trabajos reales */
.perso-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.perso-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* Productos (links independientes al personalizador por superficie — SEO) */
.perso-prod-group { margin-bottom: 20px; }
.perso-prod-grouptitle { font-size: 14px; font-weight: 800; color: var(--ink); margin: 8px 0 10px; }
.perso-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.perso-prod-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.perso-prod-card:hover { border-color: var(--pink, #ee3670); box-shadow: 0 4px 14px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.perso-prod-img { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.perso-prod-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.perso-prod-name { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.2; }

/* Opiniones de clientes */
.perso-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.perso-review { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.perso-stars { color: #f5a623; font-size: 13px; margin-bottom: 8px; }
.perso-stars .off { color: #dcdcdc; }
.perso-review p { font-size: 13.5px; color: #444; font-style: italic; margin: 0 0 10px; }
.perso-review-by { font-size: 12.5px; font-weight: 800; color: var(--ink); }

@media (max-width: 760px) {
    .perso-seo { padding: 30px 16px; }
    .perso-seo h1 { font-size: 22px; }
    .perso-steps { grid-template-columns: repeat(2, 1fr); }
    .perso-gallery { grid-template-columns: repeat(3, 1fr); }
    .perso-reviews { grid-template-columns: 1fr; }
    /* Badge de Google: en móvil pasa a ancho completo y la CTA baja a su línea, para
       que las estrellas no queden cortadas. */
    .perso-google { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
    .perso-google-info { flex: 1 1 auto; min-width: 0; }
    .perso-google-stars { letter-spacing: .5px; font-size: 16px; white-space: nowrap; }
    .perso-google-cta { margin-left: 0; flex: 1 0 100%; }
}
.bg-hint { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.bg-hint i { color: var(--brand); }
.bg-label { font-weight: 700; font-size: 14px; display: block; margin-bottom: 6px; }
.bg-slider { width: 100%; accent-color: var(--brand); }
.bg-slider-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 2px; }
.bg-actions {
    position: sticky; bottom: 0; z-index: 3;
    margin: 14px -22px 0; padding: 14px 22px;
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px;
}
.bg-btn-reprocess, .bg-btn-apply {
    border: none; border-radius: 12px; padding: 12px 20px; font-size: 14px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 8px; transition: .16s;
}
.bg-btn-reprocess { background: #eceff3; color: var(--ink); }
.bg-btn-reprocess:hover { background: #e0e4ea; }
.bg-btn-apply { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; box-shadow: 0 6px 16px rgba(255,90,95,.32); }
.bg-btn-apply:hover { transform: translateY(-1px); filter: brightness(1.06); }
.bg-btn-reprocess:disabled, .bg-btn-apply:disabled { opacity: .5; transform: none; cursor: default; }

/* ===== MOVER A OTRA CARA ===== */
.move-face-wrap { position: relative; }
/* El panel vive DENTRO de su círculo; los otros círculos (hermanos: mejoras, basura…) crean su
   propio contexto de apilado por el transform de actionPop y, al venir después en el DOM, pintarían
   ENCIMA del panel. Al abrir el menú elevamos el círculo contenedor para que el panel quede sobre
   los demás círculos. Aplica a ambos menús (mover y mejoras). */
.move-face-wrap:has(> .move-face-menu.open) { z-index: 80; }
.move-face-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow); padding: 5px; min-width: 228px; display: none;
    max-height: 78vh; overflow-y: auto; animation: pop .15s ease;
}
.move-face-menu.open { display: block; }

/* ===== CONFIRMACIÓN (modal moderno, reemplaza window.confirm) ===== */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 100002;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(18, 18, 22, 0); opacity: 0; transition: opacity .18s ease;
}
.confirm-overlay.open { opacity: 1; background: rgba(18, 18, 22, .5); }
.confirm-dialog {
    background: #fff; border-radius: 18px; width: 100%; max-width: 380px;
    padding: 24px 22px 18px; text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
    transform: scale(.92) translateY(8px); transition: transform .2s cubic-bezier(.2, .9, .3, 1.2);
}
.confirm-overlay.open .confirm-dialog { transform: scale(1) translateY(0); }
.confirm-icon {
    width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; background: rgba(255, 90, 95, .12); color: var(--brand);
}
.confirm-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ink); }
.confirm-message { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #555; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-btn {
    flex: 1; height: 44px; border-radius: 12px; font-size: 14px; font-weight: 700;
    cursor: pointer; border: 1px solid var(--line); transition: .15s;
}
.confirm-cancel { background: #fff; color: var(--ink); }
.confirm-cancel:hover { background: #f4f4f6; }
.confirm-ok { background: var(--ink); color: #fff; border-color: var(--ink); }
.confirm-ok:hover { filter: brightness(1.15); }
.confirm-ok.danger { background: var(--brand); border-color: var(--brand); }
.confirm-ok.danger:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Modal de elección (tarjetas de opción, p.ej. etiqueta: completa vs logo+plantilla) */
.choice-dialog { max-width: 420px; text-align: left; }
.choice-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.choice-card {
    display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
    border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px;
    cursor: pointer; transition: .15s;
}
.choice-card:hover { border-color: var(--brand); background: #fff7f7; }
.choice-ico {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 90, 95, .12); color: var(--brand); font-size: 18px;
}
.choice-label { font-weight: 800; font-size: 15px; color: var(--ink); }
.choice-desc { font-size: 12.5px; color: #666; margin-top: 2px; line-height: 1.35; }
.choice-cancel { width: 100%; }

/* SweetAlert (aviso de login de las Mejoras, etc.) por encima de los modales del personalizador
   (preview/bg-modal = 100000, confirm = 100002). Por defecto Swal usa z-index 1060 → quedaba detrás. */
.swal2-container { z-index: 200000 !important; }

/* Items del menú Mejoras (lista limpia: icono + texto) */
.mejora-item {
    width: 100%; border: none; background: transparent; border-radius: 9px;
    padding: 9px 11px; display: flex; align-items: center; gap: 11px;
    font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; transition: .12s;
}
.mejora-item:hover { background: #fff0f0; color: var(--brand); }
.mejora-item i { width: 22px; text-align: center; color: var(--brand); font-size: 16px; }

/* Nueva ubicación: tarjetas chicas en fila */
.move-face-list { display: flex; gap: 6px; padding: 2px 10px 6px; }
.move-face-item {
    flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 9px;
    padding: 6px 3px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; color: var(--ink); transition: .12s;
}
.move-face-item:hover { border-color: var(--brand); color: var(--brand); }
.move-face-item img { width: 26px; height: 26px; object-fit: contain; }
.move-face-item i { font-size: 18px; color: var(--muted); }
.move-face-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Secciones */
.move-sec-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px 2px; }
.move-sec-title:not(:first-child) { border-top: 1px solid var(--line); margin-top: 3px; }

/* Tamaño: ancho × alto en cm (inputs chicos) */
.move-size { display: flex; align-items: center; gap: 6px; padding: 3px 10px 7px; }
.move-size input { flex: none; width: 58px; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 4px; font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; user-select: text; -webkit-user-select: text; }
.move-size input:focus { outline: none; border-color: var(--brand); }
.move-size-x, .move-size-unit { font-size: 12px; font-weight: 700; color: var(--muted); }

/* Alinear (3×3 con flechas) + Orden (lista icono+texto) lado a lado */
.move-cols { display: flex; gap: 12px; padding: 0 10px 6px; align-items: flex-start; }
.move-col .move-sec-title { padding: 6px 0 3px; border-top: none; margin-top: 0; }
.move-col-grow { flex: 1; min-width: 0; }
.align-grid { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; padding: 0; }
.align-cell {
    width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
    cursor: pointer; transition: .12s; padding: 0; display: flex; align-items: center; justify-content: center;
}
.align-cell:hover { border-color: var(--brand); background: #fff0f0; }
.align-cell i { font-size: 11px; color: var(--muted); }
.align-cell:hover i { color: var(--brand); }

.order-list { display: flex; flex-direction: column; gap: 2px; }
.order-item {
    width: 100%; border: none; background: transparent; border-radius: 7px;
    padding: 5px 7px; display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; transition: .12s;
}
.order-item:hover { background: #fff0f0; color: var(--brand); }
.order-item i { width: 16px; text-align: center; color: var(--muted); font-size: 12px; }
.order-item:hover i { color: var(--brand); }

/* ===== CATÁLOGO DE DISEÑOS ===== */
.catalog-search { display: flex; gap: 10px; margin-bottom: 16px; }
.catalog-search input {
    flex: 1; border: 2px solid var(--line); border-radius: 12px; padding: 12px 16px;
    font-size: 15px; font-family: inherit; transition: .16s;
}
.catalog-search input:focus { outline: none; border-color: var(--brand); }
.catalog-search button {
    border: none; border-radius: 12px; width: 52px; background: var(--brand); color: #fff;
    font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.catalog-search button:hover { background: var(--brand-dark); }
.catalog-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px;
    min-height: 120px; max-height: 56vh; overflow-y: auto;
}
.catalog-card {
    position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    aspect-ratio: 1; cursor: pointer; transition: .16s; padding: 9px; box-sizing: border-box;
    box-shadow: var(--shadow-sm); background: #fff;
}
.catalog-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.catalog-card img { width: 100%; height: 100%; object-fit: contain; }
.catalog-card::after {
    content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255,90,95,0); color: rgba(255,255,255,0); font-size: 22px; transition: .16s;
}
.catalog-card:hover::after { background: rgba(255,90,95,.55); color: #fff; }
.catalog-hint, .catalog-empty, .catalog-loading {
    grid-column: 1/-1; text-align: center; padding: 30px 18px; color: var(--muted); font-size: 14px; font-weight: 600;
}
.catalog-loading i { color: var(--brand); margin-right: 8px; }
.catalog-sectionhead {
    grid-column: 1/-1; font-size: 13px; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 7px; margin-bottom: 2px;
}
.catalog-sectionhead i { color: var(--brand); }

/* clipart: color picker + tarjetas con fondo para ver íconos claros */
.clipart-color {
    width: 48px; height: 48px; border: 2px solid var(--line); border-radius: 12px;
    overflow: hidden; padding: 0; display: inline-flex; cursor: pointer; flex-shrink: 0;
}
.clipart-color input { width: 150%; height: 150%; margin: -25%; border: none; padding: 0; cursor: pointer; background: none; }
#clipart-results .catalog-card { background: #4b5563; padding: 10px; }

/* Modales de búsqueda (imagen / clipart / catálogo) responsivos en celular: centrado (como
   antes), pero ajustando el ancho al de la pantalla para que no quede muy ancho / cortado. */
@media (max-width: 768px) {
    .preview-modal { padding: 14px; }
    .preview-dialog { max-width: none; width: 100%; max-height: 88vh; padding: 18px 16px; }
    .preview-actions { margin: 14px -16px 0; padding: 12px 16px; }
    .bg-actions { margin: 12px -16px 0; padding: 12px 16px; }
    .img-dialog { max-width: none; }
    .catalog-search input { font-size: 14px; padding: 11px 13px; }
    .catalog-search button { width: 46px; }
    .clipart-color { width: 44px; height: 44px; }
    .catalog-results { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 9px; }
}
#clipart-results .catalog-card img { width: 100%; height: 100%; object-fit: contain; }

/* ===== SELECTOR DE PRENDA ===== */
.garment-grid { display: flex; flex-direction: column; gap: 22px; }
.garment-group-title {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.garment-group-title img { width: 22px; height: 22px; object-fit: contain; }
.garment-group-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px;
}
.garment-card {
    border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
    cursor: pointer; transition: .16s; padding: 0; text-align: center;
    display: flex; flex-direction: column;
}
.garment-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow); }
.garment-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.garment-card-img {
    aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #fff, #eef0f3);
    display: flex; align-items: center; justify-content: center; padding: 8px;
}
.garment-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.garment-card-name { padding: 8px 6px; font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.2; }

/* ===== BARRA DE PROGRESO DE SUBIDA ===== */
.upload-progress {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(15,18,25,.55); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.upload-progress.show { display: flex; animation: pop .2s ease; }
.upload-progress-card {
    background: #fff; border-radius: 16px; padding: 22px 24px; width: 320px; max-width: 90vw;
    box-shadow: var(--shadow); text-align: center;
}
.upload-progress-label { font-weight: 800; font-size: 15px; margin-bottom: 14px; }
.upload-progress-label i { color: var(--brand); margin-right: 6px; }
.upload-progress-bar { height: 10px; background: #eef0f3; border-radius: 99px; overflow: hidden; }
.upload-progress-fill {
    height: 100%; width: 0%; border-radius: 99px;
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    transition: width .15s ease;
}
.upload-progress-pct { margin-top: 10px; font-weight: 800; font-size: 18px; color: var(--ink); }

/* ===== MODAL "MIS IMÁGENES" (pro) ===== */
.img-dialog { max-width: 640px; padding-bottom: 0; }
.img-modal-head { margin-bottom: 18px; }
.img-modal-head .preview-title { margin: 0; }
.img-modal-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.img-dropzone {
    border: 2px dashed #d7dbe0; border-radius: 16px;
    background: linear-gradient(180deg, #fafbfc, #f4f6f8);
    padding: 30px 20px; text-align: center; cursor: pointer;
    transition: .18s; position: relative;
}
.img-dropzone:hover { border-color: var(--brand); background: #fff6f6; }
.img-dropzone.dragover {
    border-color: var(--brand); background: #ffecec; transform: scale(1.01);
    box-shadow: 0 8px 30px rgba(255,90,95,.18);
}
.img-dropzone-icon {
    width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--brand); transition: .18s;
}
.img-dropzone:hover .img-dropzone-icon { transform: translateY(-3px); }
.img-dropzone-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.img-dropzone-or { font-size: 14px; color: var(--muted); margin-top: 3px; }
.img-dropzone-link { color: var(--brand); font-weight: 700; text-decoration: underline; }
.img-dropzone-hint { font-size: 12px; color: #9aa0a8; margin-top: 10px; }

.img-gallery-head {
    display: flex; align-items: center; gap: 8px;
    margin: 22px 0 12px; font-size: 13px; font-weight: 800;
    letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
}
.img-gallery-head i { color: var(--brand); }
.img-gallery-count {
    background: #f0f1f4; color: var(--muted); font-size: 11px; font-weight: 800;
    padding: 2px 8px; border-radius: 99px; text-transform: none; letter-spacing: 0;
}
.img-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px;
}
.img-thumb {
    position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    aspect-ratio: 1; background:
        linear-gradient(45deg,#f0f1f4 25%,transparent 25%,transparent 75%,#f0f1f4 75%) 0 0/16px 16px,
        linear-gradient(45deg,#f0f1f4 25%,#fff 25%,#fff 75%,#f0f1f4 75%) 8px 8px/16px 16px;
    cursor: pointer; transition: .16s; padding: 0;
    box-shadow: var(--shadow-sm);
}
/* Badge de check (esquina) que aparece cuando la imagen está SELECCIONADA. */
.img-thumb::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 5px; left: 5px; z-index: 3; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff; font-size: 11px; border-radius: 50%;
    transform: scale(0); transition: .14s;
}
.img-thumb:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.img-thumb.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); transform: none; }
.img-thumb.selected::after { transform: scale(1); }
.img-thumb img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.img-thumb-del {
    position: absolute; top: 5px; right: 5px; z-index: 3; width: 24px; height: 24px; border: none;
    border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: .14s;
}
.img-thumb:hover .img-thumb-del { opacity: 1; }
.img-thumb-del:hover { background: var(--brand); transform: scale(1.1); }
.img-gallery-empty {
    grid-column: 1/-1; color: var(--muted); font-size: 13px; padding: 18px;
    text-align: center; border: 1px dashed var(--line); border-radius: 12px;
}
/* Pie FIJO del modal: tipo de estampado (siempre visible) + botón. Tapa por completo la grilla
   que scrollea detrás (la grilla queda por encima del padding inferior 0 del diálogo). */
.img-modal-foot {
    position: sticky; bottom: 0; z-index: 5; margin: 12px 0 0; padding: 12px 0 16px;
    background: var(--panel); border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 12px;
}
.img-modal-foot .img-tipo { margin: 0; }
.img-add-btn {
    width: 100%; border: none; border-radius: 11px; padding: 11px;
    background: var(--brand); color: #fff; font-size: 14px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: .16s;
    box-shadow: 0 4px 12px rgba(255,90,95,.28);
}
.img-add-btn:hover:not(:disabled) { background: var(--brand-dark); }
.img-add-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Filas de progreso de subida (varias a la vez) bajo el dropzone. */
.img-uploads { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.img-uploads:empty { margin-top: 0; }
.img-up-row { background: #f7f8fa; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.img-up-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-up-name i { color: var(--brand); margin-right: 5px; }
.img-up-bar { height: 5px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.img-up-fill { height: 100%; width: 2%; background: var(--brand); border-radius: 4px; transition: width .15s; }

/* Paginador de la galería. */
.img-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.img-pager-btn {
    width: 34px; height: 34px; border: 1.5px solid var(--line); background: #fff; border-radius: 9px;
    color: var(--ink); cursor: pointer; transition: .14s;
}
.img-pager-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); }
.img-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.img-pager-info { font-size: 13px; font-weight: 700; color: var(--muted); }

/* ===== MOBILE BAR ===== */
.mobile-bar { display: none; }
.mobile-dock, .mobile-summary, .ms-sheet, .ms-sheet-overlay, .stage-preview-float, .stage-config-float { display: none; }
.panel-overlay { display: none; }

/* ===== TOAST ===== */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, calc(100% + 40px));
    background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px;
    display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px;
    z-index: 9999; box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2,.8,.2,1); max-width: 90vw;
    pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); }
.toast-icon.success { color: var(--green); }
.toast-icon.error { color: var(--brand); }

@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 980px) {
    :root { --panel-w: 300px; }
}

@media (max-width: 768px) {
    .hide-sm { display: none; }

    .app {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - var(--gs-header-h, 96px));
    }
    /* tools (order -1) arriba, stage ocupa el resto → sin margen muerto abajo */
    .stage { flex: 1; min-height: 0; }
    .canvas-workspace { padding-top: 6px; }

    /* barra de herramientas: pills horizontales compactas (ícono + texto). Aparece al cargar el 1er diseño. */
    .tools {
        order: -1;
        flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 8px;
        border-right: none; border-bottom: 1px solid var(--line); padding: 5px 8px;
        animation: barIn .35s ease;
    }
    /* mientras el menú está centrado (vacío), no mostramos la barra fija */
    .app.is-empty .tools { display: none; }
    .tool-btn {
        flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px;
        padding: 6px 12px; border-radius: 11px; justify-content: center;
        background: #fff4f4; border: 1.5px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .tool-btn span { display: block; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; line-height: 1; }
    .tool-btn i { font-size: 15px; color: var(--brand); }
    .tool-btn:active { background: #ffe9e9; border-color: var(--brand); }

    /* barra superior → botones flotantes: historial (top-left) y acciones (top-right) */
    .stage-toolbar {
        position: absolute; top: 10px; left: 10px; right: 10px; z-index: 30;
        flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;
        background: transparent; border: none; padding: 0; gap: 0;
    }
    .stage-spacer { display: none; } /* usamos space-between entre los grupos */
    .st-history { flex-direction: column; align-items: flex-start; gap: 8px; }
    .st-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
    .stage-toolbar .mini-btn {
        width: 44px; height: 44px; padding: 0; border-radius: 50%;
        justify-content: center; background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,.18);
    }
    .stage-toolbar .mini-btn.danger { color: var(--brand); }
    .stage-toolbar #btn-preview { display: none; } /* en móvil va flotante abajo a la derecha */
    /* Al editar texto, la barra de texto va arriba; BAJAMOS la de íconos para que se vean AMBAS
       (los íconos quedan justo debajo de la barra de texto, no detrás ni ocultos). */
    .stage:has(.text-toolbar.show) .stage-toolbar { top: 58px; }

    /* flotantes inferiores: vista previa (derecha) y opciones (izquierda), sobre la prenda */
    .stage-preview-float, .stage-config-float {
        display: flex; position: absolute; bottom: 86px; z-index: 20;
        width: 44px; height: 44px; padding: 0; border-radius: 50%;
        justify-content: center; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18);
    }
    .stage-preview-float { right: 12px; }
    .stage-config-float { left: 12px; }

    /* editor de texto: barra delgada de 1 fila arriba (no tapa el texto que se edita) */
    .text-toolbar {
        top: 6px; left: 6px; right: 6px; transform: none; max-width: none;
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        justify-content: flex-start; gap: 6px; padding: 6px 8px; z-index: 35;
    }
    .text-toolbar::-webkit-scrollbar { display: none; }
    .text-toolbar > * { flex-shrink: 0; }
    .tt-font { max-width: 108px; font-size: 12px; padding: 5px 8px; }
    .tt-size-btn { width: 26px; height: 30px; font-size: 15px; }
    .tt-size-input { width: 34px; height: 30px; font-size: 13px; }
    .tt-btn { width: 32px; height: 32px; font-size: 14px; }
    .tt-color { width: 34px; height: 32px; }
    /* Los toggles (negrita/alineación) abren un popover con sus 3 sub-opciones para mantener la
       barra compacta (sin scroll). El overflow-x de la barra recortaba ese popover; al abrir uno,
       dejamos el overflow VISIBLE para que se vea. Cerrado, vuelve al scroll horizontal. */
    .text-toolbar:has(.tt-pop.open) { overflow: visible; }

    .stage { grid-row: 1; }
    .garment-image { max-height: 48vh; max-width: 90vw; }

    /* panel de producto como bottom sheet */
    .product-panel {
        position: fixed; left: 0; right: 0; bottom: 0;
        max-height: 82vh; border-left: none; border-top: 1px solid var(--line);
        border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18);
        transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
        z-index: 60; padding-bottom: 24px;
    }
    .product-panel.open { transform: translateY(0); }
    .product-panel::before {
        content: ''; position: sticky; top: 0; display: block;
        width: 44px; height: 5px; border-radius: 99px; background: #d1d5db;
        margin: 2px auto 8px;
    }

    .panel-overlay {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4);
        opacity: 0; visibility: hidden; transition: .25s; z-index: 55;
    }
    .panel-overlay.open { opacity: 1; visibility: visible; }

    /* dock inferior en el flujo (el stage se encoge solo, sin tapar la prenda) */
    .mobile-dock {
        display: block; flex-shrink: 0;
        background: var(--panel); border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-bar {
        display: flex; align-items: center; gap: 8px; position: static;
        padding: 10px 12px;
    }
    /* "Prenda" se selecciona desde el dock de abajo → fuera de la barra superior */
    #btn-garment { display: none; }
    /* cantidad abajo (precio · cantidad · opciones · agregar) */
    .mobile-qty { height: 40px; }

    /* resumen tappable en UNA fila: prenda(corto) · color · talla · cantidad */
    .mobile-summary { display: flex; flex-direction: row; align-items: stretch; gap: 6px; padding: 8px 10px 0; }
    .ms-chip {
        display: flex; align-items: center; gap: 6px; min-width: 0;
        border: 1.5px solid var(--line); background: #fff; border-radius: 10px;
        padding: 8px 9px; font-size: 13px; font-weight: 700; color: var(--ink); text-align: left;
    }
    .ms-chip > span:not(.ms-sw) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ms-chip > i { color: var(--brand); font-size: 14px; flex-shrink: 0; }
    .ms-chev { color: var(--muted) !important; font-size: 9px !important; margin-left: -1px; }
    .ms-garment { flex: 1.5; text-transform: uppercase; }
    .ms-color { flex: 1; }
    .ms-size { flex: 0 0 auto; min-width: 46px; font-weight: 800; }
    .ms-sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
    .ms-qty { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
    .ms-qty button { width: 30px; height: 100%; border: none; background: #fff; font-size: 17px; font-weight: 800; color: var(--ink); }
    .ms-qty button:active { background: #f3f4f6; }
    .ms-qty span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 800; }

    /* en móvil, en "Opciones" solo quedan las opciones adicionales */
    .pp-mobile-hide { display: none !important; }

    /* hojas (bottom sheets) de color / talla */
    .ms-sheet-overlay {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4);
        opacity: 0; visibility: hidden; transition: .22s; z-index: 70;
    }
    .ms-sheet-overlay.open { opacity: 1; visibility: visible; }
    .ms-sheet {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
        background: var(--panel); border-radius: 20px 20px 0 0; padding: 6px 16px calc(20px + env(safe-area-inset-bottom));
        max-height: 70vh; overflow-y: auto; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
        box-shadow: 0 -10px 40px rgba(0,0,0,.18);
    }
    .ms-sheet.open { transform: translateY(0); }
    .ms-sheet-grab { width: 44px; height: 5px; border-radius: 99px; background: #d1d5db; margin: 8px auto 10px; }
    .ms-sheet-title { font-size: 15px; font-weight: 800; margin: 0 4px 10px; }
    .ms-sheet-list { display: flex; flex-direction: column; gap: 6px; }
    .ms-sheet-item {
        display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
        border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
        padding: 13px 14px; font-size: 15px; font-weight: 700; color: var(--ink);
    }
    .ms-sheet-item.active { border-color: var(--brand); color: var(--brand); background: #fff4f4; }
    .ms-sheet-item:disabled { opacity: .45; }
    .ms-sheet-item i.fa-check { margin-left: auto; color: var(--brand); }
    .sheet-sw { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
    /* Grilla de tallas dentro del bottom-sheet móvil */
    .ms-sheet-grid { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
    .ms-sheet-grid .pp-trow-name { cursor: default; }
    .ms-sheet-done { margin-top: 12px; width: 100%; border: none; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; padding: 14px; border-radius: 12px; }
    .mobile-price { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; }
    .mobile-price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; white-space: nowrap; }
    .mobile-price-value { font-size: 18px; font-weight: 900; white-space: nowrap; }
    .mobile-config-btn {
        flex-shrink: 0; width: 44px; height: 44px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--line); background: #fff; border-radius: 10px;
        font-size: 16px; color: var(--ink);
    }
    .mobile-add-btn {
        flex: 1; min-width: 96px; border: none; border-radius: 10px; padding: 13px;
        background: var(--brand); color: #fff; font-weight: 800; font-size: 15px;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }

    .face-nav { padding: 6px 10px; }
    .face-tabs { gap: 8px; }
    .face-tab { width: 52px; height: 52px; border-radius: 11px; }
    .face-tab img { width: 24px; height: 24px; }
    .face-tab i { font-size: 18px; }
    .pp-cartbar { display: none; } /* en móvil se usa la barra del dock */
    .pp-foot { position: static; margin: 16px 0 0; padding: 0; border-top: none; background: transparent; }
    /* La barra de descuentos en móvil va en el dock (siempre visible), no en el cajón */
    .pp-foot .pp-wholesale { display: none !important; }
    .mobile-wholesale { margin: 2px 10px 8px; }
}

@media (max-width: 400px) {
    .face-tab { width: 48px; height: 48px; }
    .face-tab img { width: 22px; height: 22px; }
    .pp-tecnicas { grid-template-columns: repeat(3, 1fr); }
}