/* ==========================================================================
   FUERZA DTF · Personalizador
   Layout de una sola pantalla: topbar / rail de herramientas / lienzo /
   rail de vistas / footer de compra.
   ========================================================================== */

.ic-designer {
    --ic-accent:      #e5308a;   /* rosa del logo: CTA, enlaces, acentos      */
    --ic-accent-dark: #cc1f77;
    --ic-accent-soft: #fff0f6;   /* fondo de la tarjeta de entrega            */
    --ic-accent-line: #fbcfe4;

    --ic-ink:         #16161a;   /* negro de marca: botón Ver, vista activa   */
    --ic-text:        #1c1c22;
    --ic-muted:       #6b6b76;
    --ic-faint:       #9a9aa5;

    --ic-line:        #e6e6ec;
    --ic-line-soft:   #f0f0f4;
    --ic-surface:     #ffffff;

    --ic-radius:      10px;
    --ic-radius-lg:   12px;

    --ic-rail-w:      284px;     /* rail izquierdo: 240 de botón + 22 de aire */
    --ic-views-w:     112px;     /* rail derecho de vistas                    */
}

/* Botón que abre el personalizador desde la ficha de producto ------------- */
.ic-btn-main {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 13px;
    border: 0;
    border-radius: var(--ic-radius);
    background: #e5308a;
    color: #fff;
    font: 600 15px/1.2 inherit;
    cursor: pointer;
    transition: background .15s;
}
.ic-btn-main:hover { background: #cc1f77; }

/* Contenedor a pantalla completa ----------------------------------------- */
#ic-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999999;
    background: #fff;
}
#ic-modal.is-open { display: block; }

.ic-workspace {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: Poppins, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Iconos ----------------------------------------------------------------- */
.ic-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.ic-ico--sm { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */
.ic-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 10px 22px;
    border-bottom: 1px solid var(--ic-line-soft);
}
.ic-logo img { display: block; height: 34px; width: auto; }
.ic-logo-txt { font: 800 21px/1 inherit; letter-spacing: -.4px; color: var(--ic-ink); }
.ic-logo-txt b { color: var(--ic-accent); }

.ic-topbar-actions { display: flex; align-items: center; gap: 14px; }

.ic-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ic-text);
    font: 500 13.5px/1 inherit;
    cursor: pointer;
    transition: border-color .15s;
}
.ic-btn-ghost:hover { border-color: #c9c9d2; }

.ic-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px;
    color: var(--ic-text);
    border-radius: 8px;
}
.ic-cart-link:hover { background: var(--ic-line-soft); }
.ic-cart-link .ic-ico { width: 21px; height: 21px; }
.ic-cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ic-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    border-radius: 99px;
}
.ic-cart-count[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Cuerpo: rail · lienzo · vistas
   -------------------------------------------------------------------------- */
.ic-main {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--ic-rail-w) minmax(0, 1fr) var(--ic-views-w);
}

/* Rail izquierdo ---------------------------------------------------------- */
.ic-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 22px;
    overflow-y: auto;
}
.ic-tool {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius);
    background: #fff;
    color: var(--ic-text);
    font: 450 14px/1.2 inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.ic-tool:hover { border-color: #c9c9d2; }
.ic-tool.is-active { border-color: var(--ic-accent); color: var(--ic-accent); }

/* Botones coloreados: "Añadir texto" en verde, "Nombres y Números" en azul. */
.ic-tool[data-panel="txt"] { border-color: #16a34a; color: #15803d; background: #f0fdf4; }
.ic-tool[data-panel="txt"]:hover { border-color: #15803d; background: #dcfce7; }
.ic-tool[data-panel="txt"].is-active { border-color: #16a34a; color: #15803d; }
.ic-tool[data-panel="num"] { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.ic-tool[data-panel="num"]:hover { border-color: #1d4ed8; background: #dbeafe; }
.ic-tool[data-panel="num"].is-active { border-color: #2563eb; color: #1d4ed8; }

/* Tarjeta de tallas y color, anclada abajo -------------------------------- */
.ic-tools-spacer { flex: 1; min-height: 18px; }

.ic-productcard {
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius-lg);
    padding: 13px 12px 14px;
}
.ic-pc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ic-pc-row + .ic-pc-row { margin-top: 14px; }
.ic-pc-label { font: 500 13.5px/1 inherit; color: var(--ic-text); }
.ic-pc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ic-accent);
    font: 500 11.5px/1 inherit;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.ic-pc-link:hover { text-decoration: underline; }
.ic-pc-value { margin-top: 5px; font: 400 13px/1.3 inherit; color: var(--ic-muted); }

#ic-colors-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 9px;
}
/* Colapsado: 15 muestras + el botón "+" completan dos filas de ocho. */
#ic-colors-grid.is-collapsed .ic-swatch:nth-child(n + 16) { display: none; }
#ic-colors-grid:not(.is-collapsed) .ic-more-dot { display: none; }
.ic-swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 24px;
    padding: 0;
    border: 1px solid #d9d9e0;
    border-radius: 50%;
    background-size: cover !important;
    background-position: center !important;
    cursor: pointer;
    transition: transform .1s;
}
.ic-swatch:hover { transform: scale(1.12); }
.ic-swatch.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--ic-accent);
}

/* Color agotado: se deja elegir para ver cómo queda, pero se avisa. */
.ic-swatch.is-out { opacity: .45; }
.ic-swatch.is-out::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent 44%, #c01818 44%, #c01818 56%, transparent 56%);
}

.ic-out-flag {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fdecec;
    color: #a11c1c;
    font: 600 10px/1.5 inherit;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.ic-out-note {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #f2b3b3;
    border-radius: 8px;
    background: #fff4f4;
    color: #a11c1c;
    font: 400 11.5px/1.45 inherit;
}
.ic-more-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-width: 24px;
    padding: 0;
    border: 1px solid #c9c9d2;
    border-radius: 50%;
    background: #fff;
    color: var(--ic-muted);
    font: 600 13px/1 inherit;
    cursor: pointer;
}
.ic-more-dot:hover { border-color: var(--ic-accent); color: var(--ic-accent); }

/* --------------------------------------------------------------------------
   Panel deslizante de herramientas
   -------------------------------------------------------------------------- */
.ic-panel-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ic-rail-w);
    z-index: 40;
    width: 320px;
    background: #fff;
    border-right: 1px solid var(--ic-line);
    box-shadow: 10px 0 28px rgba(20, 20, 30, .06);
    overflow-y: auto;
    display: none;
}
.ic-panel-wrap.is-open { display: block; }
.ic-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 10px;
}
.ic-panel-head h2 { margin: 0; font: 600 15.5px/1 inherit; color: var(--ic-text); }
.ic-panel-close {
    border: 0;
    background: none;
    padding: 4px;
    color: var(--ic-faint);
    cursor: pointer;
    line-height: 1;
}
.ic-panel-close:hover { color: var(--ic-text); }
.ic-panel-body { padding: 0 20px 24px; }
.ic-panel { display: none; }
.ic-panel.is-active { display: block; }

.ic-field { width: 100%; margin-bottom: 10px; }
.ic-field label {
    display: block;
    margin-bottom: 6px;
    font: 500 12.5px/1 inherit;
    color: var(--ic-muted);
}
.ic-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
    font: 400 14px/1.2 inherit;
    color: var(--ic-text);
    background: #fff;
}
.ic-input:focus { outline: 0; border-color: var(--ic-accent); }
input.ic-input[type="color"] { padding: 4px; height: 40px; cursor: pointer; }

.ic-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 9px;
    background: var(--ic-accent);
    color: #fff;
    font: 600 13.5px/1 inherit;
    cursor: pointer;
    transition: background .15s;
}
.ic-btn-accent:hover { background: var(--ic-accent-dark); }
.ic-btn-accent:disabled,
.ic-btn-quiet:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.ic-btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ic-muted);
    font: 500 13px/1 inherit;
    cursor: pointer;
}
.ic-btn-quiet:hover { border-color: #c9c9d2; color: var(--ic-text); }

/* Lista de fuentes con previsualización ---------------------------------- */
.ic-fonts {
    margin-top: 4px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
}
.ic-font {
    padding: 11px 14px;
    border-bottom: 1px solid var(--ic-line-soft);
    cursor: pointer;
}
.ic-font:last-child { border-bottom: 0; }
.ic-font:hover { background: #fafafc; }
.ic-font.is-active { background: var(--ic-accent-soft); }
.ic-font-sample { font-size: 20px; line-height: 1.2; color: var(--ic-text); }
.ic-font-name { margin-top: 2px; font: 400 10px/1 Poppins, sans-serif; color: var(--ic-faint); }

/* Zona de subida ---------------------------------------------------------- */
.ic-drop {
    padding: 26px 16px;
    border: 2px dashed var(--ic-line);
    border-radius: var(--ic-radius);
    text-align: center;
    color: var(--ic-faint);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.ic-drop:hover, .ic-drop.is-over { border-color: var(--ic-accent); color: var(--ic-accent); }
.ic-drop.is-busy { border-style: solid; border-color: var(--ic-accent); color: var(--ic-accent); cursor: wait; }
.ic-hint { margin-top: 8px; font-size: 11px; color: var(--ic-faint); }

/* Cota en centímetros del diseño seleccionado. Vive dentro del lienzo, que va
   escalado, así que se le aplica la escala inversa para que el texto no crezca. */
.ic-dims {
    position: absolute;
    z-index: 55;
    display: none;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--ic-accent);
    color: #fff;
    font: 600 11px/1.3 Poppins, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%) scale(var(--ic-inv, 1));
    transform-origin: top center;
}
.ic-dims.is-visible { display: block; }

/* Medida del diseño, junto a la del área que lo contiene. */
.ic-dims-panel {
    display: block;
    margin-top: 3px;
    font: 600 12px/1.3 inherit;
    color: var(--ic-accent);
}
.ic-dims-panel::before { content: 'Tu diseño: '; font-weight: 400; color: var(--ic-muted); }

/* Calibrado del área (sólo gestores) --------------------------------------- */
.ic-views-btn--admin { border-style: dashed; color: var(--ic-muted); }
.ic-views-btn--admin.is-active {
    border-style: solid;
    border-color: var(--ic-accent);
    background: var(--ic-accent);
    color: #fff;
}

.ic-zone-handle { display: none; }
.ic-workspace.ic-calibrating .ic-print-zone {
    border: 2px solid var(--ic-accent);
    background: rgba(229, 48, 138, .08);
    pointer-events: auto;
    cursor: move;
}
.ic-workspace.ic-calibrating .ic-zone-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ic-accent);
    cursor: nwse-resize;
}

.ic-calibrator {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 70;
    display: none;
    width: 232px;
    padding: 14px 16px;
    border: 1px solid var(--ic-accent-line);
    border-radius: var(--ic-radius);
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 20, 30, .12);
}
.ic-workspace.ic-calibrating .ic-calibrator { display: block; }
.ic-cal-title { font: 600 12.5px/1.3 inherit; color: var(--ic-text); }
.ic-cal-title b { color: var(--ic-accent); }
.ic-cal-help { margin: 6px 0 10px; font: 400 11px/1.45 inherit; color: var(--ic-muted); }
.ic-cal-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 500 12px/1 inherit;
    color: var(--ic-muted);
}
.ic-cal-row .ic-input { width: 74px; padding: 7px 8px; }

.ic-cal-field {
    display: block;
    margin-top: 11px;
    font: 500 12px/1 inherit;
    color: var(--ic-muted);
}
.ic-cal-field span { display: block; margin-bottom: 5px; }
.ic-cal-field .ic-input { padding: 7px 8px; font-size: 12.5px; }
.ic-cal-note {
    margin: 7px 0 0;
    font: 400 10.5px/1.45 inherit;
    color: var(--ic-faint);
}
.ic-cal-note b { color: var(--ic-muted); font-weight: 600; }

.ic-cal-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 11px 0 12px;
    font: 400 11.5px/1.3 inherit;
    color: var(--ic-muted);
    cursor: pointer;
}

/* Biblioteca del cliente y declaración de derechos ------------------------- */
.ic-lbl-note { font-weight: 400; color: var(--ic-faint); }
.ic-lbl-note a { color: var(--ic-accent); }

.ic-rights-note {
    margin: 16px 0 0;
    padding: 9px 12px;
    border: 1px solid var(--ic-line);
    border-radius: 8px;
    background: #fafafc;
    font: 400 10.5px/1.5 inherit;
    color: var(--ic-muted);
}
.ic-rights-note summary {
    cursor: pointer;
    font-size: 11px;
    color: var(--ic-text);
    list-style-position: outside;
}
.ic-rights-note[open] summary { margin-bottom: 7px; }

.ic-rights {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ic-line);
    border-radius: 8px;
    font: 400 11.5px/1.45 inherit;
    color: var(--ic-text);
    transition: border-color .15s, background .15s;
}
.ic-rights label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}
.ic-rights input { margin-top: 1px; flex-shrink: 0; }
.ic-rights details { margin-top: 6px; padding-left: 24px; }
.ic-rights summary {
    cursor: pointer;
    font-size: 10.5px;
    color: var(--ic-muted);
}
.ic-rights details[open] { padding-bottom: 4px; font-size: 10.5px; color: var(--ic-muted); }
.ic-rights.is-required {
    border-color: var(--ic-accent);
    background: var(--ic-accent-soft);
}

/* Progreso de subida. */
.ic-progress {
    display: none;
    height: 5px;
    margin-top: 10px;
    border-radius: 3px;
    background: var(--ic-line-soft);
    overflow: hidden;
}
.ic-progress.is-visible { display: block; }
.ic-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--ic-accent);
    transition: width .2s;
}

/* Resolución real del arte al tamaño al que está colocado. */
.ic-quality {
    display: none;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid var(--ic-line);
    border-radius: 8px;
    font-size: 11.5px;
    line-height: 1.4;
}
.ic-quality.is-ok   { border-color: #b7e3c4; background: #f2fbf5; color: #1c6b38; }
.ic-quality.is-warn { border-color: #f4d99a; background: #fffaef; color: #7a5600; }
.ic-quality.is-bad  { border-color: #f2b3b3; background: #fff4f4; color: #a11c1c; }

#ic-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ic-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--ic-line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.ic-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ic-thumb-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 17px;
    height: 17px;
    border: 0;
    border-radius: 50%;
    background: var(--ic-accent);
    color: #fff;
    font: 600 11px/17px inherit;
    text-align: center;
    padding: 0;
    cursor: pointer;
    display: none;
}
.ic-thumb:hover .ic-thumb-del { display: block; }

/* Lista de productos (Cambiar producto) ---------------------------------- */
.ic-prodlist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ic-prodlist a {
    display: block;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius);
    padding: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--ic-text);
    font-size: 11.5px;
    line-height: 1.3;
}
.ic-prodlist a:hover { border-color: var(--ic-accent); }
.ic-prodlist img { width: 100%; height: 74px; object-fit: contain; margin-bottom: 5px; }
.ic-prodlist .is-current { border-color: var(--ic-accent); color: var(--ic-accent); }

/* --------------------------------------------------------------------------
   Lienzo
   -------------------------------------------------------------------------- */
.ic-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}
#canvas-wrap {
    position: relative;
    width: 450px;
    height: 550px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transform-origin: center center;
    transition: transform .25s ease;
}
/* El tono del recuadro se decide según la prenda: sobre una camiseta oscura
   un trazo oscuro es invisible. La clase la pone applyZoneContrast(). */
.ic-print-zone {
    position: absolute;
    z-index: 50;
    border: 1.5px dashed rgba(40, 40, 55, .55);
    pointer-events: none;
    opacity: 1;
    transition: opacity .15s;
}
#canvas-wrap.on-dark .ic-print-zone {
    border-color: rgba(255, 255, 255, .75);
}
.ic-center-guide {
    position: absolute;
    z-index: 51;
    width: 0;
    border-left: 1px dashed var(--ic-accent);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
#canvas-wrap.on-dark .ic-center-guide {
    border-left-color: rgba(255, 255, 255, .9);
}
.ic-guides-on .ic-center-guide { opacity: 1; }

.ic-warning {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    max-width: 260px;
    padding: 8px 13px;
    border: 1px solid #f4c04f;
    border-radius: 8px;
    background: #fff8e6;
    color: #6b4d00;
    font-size: 11.5px;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
}

/* Controles de zoom, ocultos hasta pulsar "Zoom" -------------------------- */
.ic-zoom-controls {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 70;
    display: none;
    flex-direction: column;
    gap: 6px;
}
.ic-zoom-controls.is-open { display: flex; }
.ic-zoom-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--ic-line);
    border-radius: 8px;
    background: #fff;
    color: var(--ic-text);
    font: 600 16px/1 inherit;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20, 20, 30, .07);
}
.ic-zoom-btn:hover { background: #fafafc; }
.ic-zoom-btn--reset { font-size: 10.5px; }

/* Aviso de entrega -------------------------------------------------------- */
.ic-delivery {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 65;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 15px;
    border: 1px solid var(--ic-accent-line);
    border-radius: var(--ic-radius);
    background: var(--ic-accent-soft);
}
.ic-delivery > .ic-ico { color: var(--ic-accent); width: 20px; height: 20px; }
.ic-delivery-title { font: 600 11px/1.4 inherit; color: var(--ic-text); text-align: center; }
.ic-delivery-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1px 14px;
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--ic-muted);
}
.ic-delivery-grid b { color: var(--ic-text); font-weight: 600; }

/* Aviso de plazo de envío (cajón de compra) ------------------------------- */
.ic-ship-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--ic-accent-line);
    border-radius: var(--ic-radius);
    background: var(--ic-accent-soft);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ic-text);
}
.ic-ship-terms > .ic-ico { color: var(--ic-accent); flex: 0 0 auto; margin-top: 1px; }

/* Rail derecho de vistas -------------------------------------------------- */
.ic-views {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    min-height: 0;
    padding: 22px 12px;
    overflow-y: auto;
}
.ic-views-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 6px;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ic-text);
    font: 500 12px/1 inherit;
    cursor: pointer;
}
.ic-views-btn:hover { border-color: #c9c9d2; }
.ic-views-btn--solid {
    border-color: var(--ic-ink);
    background: var(--ic-ink);
    color: #fff;
}
.ic-views-btn--solid:hover { background: #000; border-color: #000; }
.ic-views-btn--solid.is-active { background: var(--ic-accent); border-color: var(--ic-accent); }

.ic-view {
    width: 100%;
    padding: 7px 4px 5px;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius);
    background: #fff;
    color: var(--ic-muted);
    font: 500 10.5px/1.2 inherit;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.ic-view:hover { border-color: #c9c9d2; }
.ic-view.is-active {
    border-color: var(--ic-ink);
    box-shadow: 0 0 0 1px var(--ic-ink);
    color: var(--ic-text);
}
.ic-view.is-hidden { display: none; }
.ic-view-img {
    display: block;
    width: 100%;
    height: 52px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 4px;
}
.ic-view-label { display: block; }

/* --------------------------------------------------------------------------
   Footer de compra
   -------------------------------------------------------------------------- */
.ic-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-shrink: 0;
    padding: 11px 22px;
    border-top: 1px solid var(--ic-line-soft);
}
.ic-foot-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ic-foot-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    font: 600 15px/1.2 inherit;
    color: var(--ic-text);
}
.ic-foot-name .ic-ico { color: var(--ic-faint); }
.ic-foot-name-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ic-price-big {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    font: 700 19px/1.1 inherit;
    color: var(--ic-text);
}
/* Sufijo de impuestos que añade el tema ("Sin IVA"). */
.ic-price-big small { font: 400 10.5px/1 inherit; color: var(--ic-faint); }
.ic-price-detail { font: 400 12px/1.2 inherit; color: var(--ic-muted); white-space: nowrap; }
.ic-foot-pricecol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic-foot-ship {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 380px;
    margin-top: 5px;
    font: 500 11.5px/1.35 inherit;
    color: var(--ic-accent);
}
.ic-foot-ship > .ic-ico { flex: 0 0 auto; margin-top: 1px; }

.ic-foot-c {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 13px/1 inherit;
    color: var(--ic-muted);
}
.ic-foot-c .ic-ico { color: var(--ic-faint); }
.ic-foot-c.is-live { color: var(--ic-accent); }
.ic-foot-c.is-live .ic-ico { color: var(--ic-accent); }

.ic-foot-r { display: flex; align-items: center; gap: 10px; }
.ic-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: 0;
    border-radius: 9px;
    background: var(--ic-accent);
    color: #fff;
    font: 600 14px/1 inherit;
    cursor: pointer;
    transition: background .15s;
}
.ic-btn-cta:hover { background: var(--ic-accent-dark); }
.ic-btn-see {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
    background: transparent;
    color: var(--ic-text);
    font: 600 14px/1 inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ic-btn-see:hover { background: var(--ic-line-soft); border-color: var(--ic-accent); }
.ic-btn-see .ic-ico { color: var(--ic-accent); }

/* --------------------------------------------------------------------------
   Cajón de talla y cantidad
   -------------------------------------------------------------------------- */
.ic-drawer-back {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: none;
    background: rgba(20, 20, 30, .35);
}
.ic-drawer-back.is-open { display: block; }
.ic-drawer {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 91;
    width: 380px;
    display: none;
    flex-direction: column;
    background: #fff;
    box-shadow: -12px 0 32px rgba(20, 20, 30, .12);
}
.ic-drawer.is-open { display: flex; }
.ic-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 12px;
}
.ic-drawer-head h2 { margin: 0; font: 600 16px/1 inherit; }
/* flex-shrink alto: cuando falta sitio cede primero el cuerpo (tiene scroll)
   y el pie sólo cuando el cuerpo ya está en su mínimo. */
.ic-drawer-body { flex: 1 10000 auto; min-height: 120px; overflow-y: auto; padding: 0 22px 16px; }
/* El cuerpo nunca baja de su mínimo. Si aun así falta alto, el pie hace
   scroll interno en vez de desbordarse. En pantallas bajas se compacta
   (ver el bloque de alto reducido en Responsive). */
.ic-drawer-foot {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid var(--ic-line-soft);
    padding: 14px 22px;
}

/* Desglose del presupuesto ------------------------------------------------- */
.ic-quote { margin-bottom: 14px; }
.ic-q-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
}
.ic-q-lab {
    flex: 1;
    min-width: 0;
    font: 600 12.5px/1.35 inherit;
    color: var(--ic-text);
}
.ic-q-lab em {
    display: block;
    font: 400 10.5px/1.3 inherit;
    font-style: normal;
    color: var(--ic-faint);
}
.ic-q-was {
    font: 400 11.5px/1 inherit;
    color: var(--ic-faint);
    text-decoration: line-through;
    white-space: nowrap;
}
.ic-q-now {
    font: 600 14px/1 inherit;
    color: var(--ic-accent);
    white-space: nowrap;
}
.ic-q-row.is-discount .ic-q-lab,
.ic-q-row.is-discount .ic-q-now { color: #1c6b38; }
.ic-q-row.is-tax .ic-q-lab,
.ic-q-row.is-tax .ic-q-now { color: var(--ic-muted); font-weight: 500; }
.ic-q-row.is-tax .ic-q-now { font-size: 13px; }
.ic-q-row.is-total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--ic-line);
}
.ic-q-row.is-total .ic-q-lab { font-size: 14px; }
.ic-q-row.is-total .ic-q-now { font-size: 20px; color: var(--ic-text); }

/* El empujón al siguiente tramo: es lo que hace crecer el pedido. */
.ic-q-next {
    margin: 8px 0 2px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--ic-accent-soft);
    border: 1px solid var(--ic-accent-line);
    font: 400 11.5px/1.4 inherit;
    color: var(--ic-text);
}
.ic-q-next b { color: var(--ic-accent); font-weight: 600; }

.ic-q-note {
    margin: 8px 0 0;
    font: 400 10.5px/1.4 inherit;
    color: var(--ic-faint);
}

/* Pasos de cantidad -------------------------------------------------------- */
.ic-size-ctrl { display: flex; align-items: center; gap: 3px; }
.ic-step {
    width: 20px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--ic-line);
    border-radius: 6px;
    background: #fff;
    color: var(--ic-muted);
    font: 600 14px/1 inherit;
    cursor: pointer;
}
.ic-step:hover { border-color: var(--ic-accent); color: var(--ic-accent); }

/* Una talla por fila, como una hoja de pedido. */
#ic-sizes-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ic-size {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--ic-line);
    border-radius: 9px;
    background: #fff;
}
.ic-size:has(.ic-qty-input:not([value="0"])) { border-color: var(--ic-accent-line); background: var(--ic-accent-soft); }
.ic-size-name { font: 600 13px/1 inherit; color: var(--ic-text); }
.ic-qty-input {
    width: 52px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid var(--ic-line);
    border-radius: 6px;
    text-align: center;
    font: 600 13px/1.2 inherit;
    color: var(--ic-text);
}

#ic-summary { margin-top: 16px; display: none; }
#ic-summary.is-visible { display: block; }
.ic-summary-title { font: 600 12px/1 inherit; color: var(--ic-muted); margin-bottom: 8px; }
.ic-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ic-line-soft);
    font-size: 12.5px;
}
.ic-summary-row b { color: var(--ic-accent); }
.ic-summary-del {
    border: 0;
    background: none;
    padding: 0 4px;
    color: var(--ic-faint);
    font-size: 14px;
    cursor: pointer;
}
.ic-summary-del:hover { color: var(--ic-accent); }

/* Previsualización ampliada ----------------------------------------------- */
.ic-preview { display: none; }
.ic-preview.is-open { display: block; }
.ic-preview-back {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(18, 18, 24, .72);
}
/* El ancho lo marca cuántas caras se enseñan a la vez: una prenda sola no
   necesita un modal panorámico, pero cuatro sí. Lo fija --ic-pv-w en JS. */
.ic-preview-box {
    position: absolute;
    top: 2.5%;
    bottom: 2.5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 96;
    width: min(96vw, var(--ic-pv-w, 640px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 10, 16, .3);
}
.ic-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ic-line-soft);
    font-size: 14px;
}
.ic-preview-head b { color: var(--ic-accent); }
.ic-preview-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #f7f7f9;
}
/* Todas las caras con diseño, a la vez. */
.ic-preview-grid {
    display: grid;
    gap: 16px;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr;
}
.ic-preview-grid[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.ic-preview-grid[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.ic-preview-grid[data-n="4"] { grid-template-columns: repeat(2, 1fr); }

.ic-pv-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}
.ic-pv-item figcaption {
    flex-shrink: 0;
    padding-top: 8px;
    text-align: center;
    font: 500 12px/1 Poppins, sans-serif;
    color: var(--ic-muted);
}
.ic-pv-slot {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.ic-pv-slot img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ic-pv-wait {
    width: 26px;
    height: 26px;
    border: 3px solid var(--ic-line);
    border-top-color: var(--ic-accent);
    border-radius: 50%;
    animation: ic-spin .8s linear infinite;
}
.ic-pv-fail { font-size: 12px; color: var(--ic-faint); }

.ic-preview-head em { font-style: normal; color: var(--ic-faint); }

/* Avisos ------------------------------------------------------------------ */
.ic-toast {
    position: absolute;
    left: 50%;
    bottom: 78px;
    z-index: 100001;
    max-width: 380px;
    padding: 11px 18px;
    border-radius: 9px;
    background: var(--ic-ink);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 6px 20px rgba(20, 20, 30, .22);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.ic-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ic-toast.error { background: #a11c1c; }
.ic-toast.ok { background: #1c6b38; }

/* Cargando ---------------------------------------------------------------- */
#ic-loader {
    position: absolute;
    inset: 0;
    z-index: 100000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, .95);
    text-align: center;
}
#ic-loader.is-open { display: flex; }
.ic-spinner {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    border: 3px solid var(--ic-accent-line);
    border-top-color: var(--ic-accent);
    border-radius: 50%;
    animation: ic-spin .8s linear infinite;
}
@keyframes ic-spin { to { transform: rotate(360deg); } }
#ic-loader-txt { font: 600 14px/1 inherit; color: var(--ic-text); }
.ic-loader-sub { font-size: 12px; color: var(--ic-muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .ic-designer { --ic-rail-w: 236px; --ic-views-w: 98px; }
    .ic-tools { padding: 16px; }
    .ic-delivery { display: none; }
}

/* Móvil y tablet en vertical: se abandona la pantalla única. El lienzo va
   arriba, debajo las herramientas y la tarjeta de producto, y todo el bloque
   hace scroll. Los cajones (tallas, paneles, previsualización) pasan a
   pantalla completa: dentro del área de trabajo no cabrían. */
@media (max-width: 900px) {
    .ic-topbar { padding: 8px 14px; gap: 10px; }
    .ic-logo img { height: 28px; }
    .ic-topbar-actions { gap: 8px; }
    .ic-btn-ghost { padding: 8px 11px; font-size: 12.5px; }

    .ic-main {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ic-stage {
        flex: 0 0 auto;
        order: 1;
        height: 52vh;
        min-height: 300px;
        padding: 6px 0;
        border-bottom: 1px solid var(--ic-line-soft);
    }
    .ic-views {
        flex: 0 0 auto;
        order: 2;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--ic-line-soft);
    }
    .ic-views:empty { display: none; }
    .ic-views > * { flex: 0 0 auto; }
    .ic-view { width: 66px; }
    .ic-views-btn { width: auto; padding: 8px 14px; }

    .ic-tools {
        flex: 0 0 auto;
        order: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        min-height: auto;
        padding: 12px 14px 16px;
        overflow: visible;
    }
    .ic-tool { padding: 11px 12px; gap: 9px; font-size: 13px; }
    .ic-tools-spacer, .ic-delivery { display: none; }
    .ic-productcard { grid-column: 1 / -1; }

    /* Cajones a pantalla completa */
    .ic-panel-wrap, .ic-drawer, .ic-drawer-back, .ic-preview-back {
        position: fixed;
        inset: 0;
        left: 0;
        width: 100%;
    }
    .ic-panel-wrap { z-index: 92; border-right: 0; box-shadow: none; }
    .ic-preview-back { z-index: 95; }
    .ic-preview-box {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
    }
    .ic-drawer-head, .ic-panel-head { padding: 14px 16px 8px; }
    .ic-drawer-body, .ic-panel-body { padding-left: 16px; padding-right: 16px; }
    .ic-drawer-foot { padding: 10px 16px; }

    /* Barra de compra: precio y "ver cómo queda" en una fila, el CTA a todo
       el ancho. El aviso de envío, la nota de descuento y el nombre del
       producto sobran aquí: están en la ficha y en el cajón de tallas. */
    .ic-foot {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 14px 10px;
        box-shadow: 0 -6px 18px rgba(20, 20, 30, .05);
    }
    .ic-foot-l { flex: 1 1 auto; gap: 10px; }
    .ic-foot-name, .ic-foot-ship, .ic-foot-c, .ic-price-detail { display: none; }
    .ic-price-big { font-size: 18px; }
    /* Los dos botones pasan a ser hijos directos de la barra para poder
       repartirse en dos filas. */
    .ic-foot-r { display: contents; }
    .ic-btn-see { flex: 0 0 auto; padding: 10px 14px; font-size: 13px; }
    .ic-btn-cta {
        flex: 1 0 100%;
        order: 10;
        justify-content: center;
        padding: 13px 16px;
    }
}

/* Pantallas bajas (portátiles 768p, Windows al 125-150 %): el pie del cajón
   de tallas medía ~420 px y se comía las tallas. Se compacta para que
   queden siempre 4-5 tallas a la vista. */
@media (max-height: 1000px) {
    .ic-drawer-head { padding: 14px 22px 8px; }
    .ic-drawer-body { padding-bottom: 10px; }
    .ic-drawer-foot { padding: 10px 22px; }
    .ic-quote { margin-bottom: 8px; }
    .ic-q-row { padding: 3px 0; }
    .ic-q-row.is-total { padding-top: 6px; }
    .ic-q-row.is-total .ic-q-now { font-size: 17px; }
    .ic-q-note { margin-top: 4px; }
    .ic-rights { margin-bottom: 8px; padding: 7px 10px; }
    .ic-rights details { margin-top: 3px; }
    /* Los dos botones en una fila. */
    .ic-drawer-foot { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
    .ic-drawer-foot > :not(button) { grid-column: 1 / -1; }
    .ic-drawer .ic-btn-accent { padding: 9px 6px; font-size: 13px; }
    .ic-drawer .ic-btn-quiet { margin-top: 0; padding: 9px 6px; font-size: 13px; }
    #ic-sizes-grid { gap: 4px; margin-top: 8px; }
    .ic-size { padding: 4px 10px; }
}

/* En pantalla ancha el aviso de envío ya está en la barra inferior; en
   móvil la barra no lo lleva, así que ahí se queda en el cajón. */
@media (max-height: 1000px) and (min-width: 901px) {
    .ic-drawer .ic-ship-terms { display: none; }
}