/* ==========================================================================
   PERSONALIZADOR, PRESUPUESTOS Y ZONAS DE PRENDA (móvil primero)
   Usa las variables de main.css (--primario, --superficie...) => respeta el tema
   y el modo oscuro. Las posiciones del editor las fija personalizador.js.
   ========================================================================== */

:root {
    --pz-zona: color-mix(in srgb, var(--primario) 70%, transparent);
    --pz-zona-fondo: color-mix(in srgb, var(--primario) 5%, transparent);
    --pz-lienzo: #F1EEE9;
    --pz-asa: var(--primario);
    --pz-asa-borde: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema=claro]) {
        --pz-lienzo: #2A2620;
        --pz-zona: color-mix(in srgb, var(--acento) 80%, transparent);
        --pz-zona-fondo: color-mix(in srgb, var(--acento) 6%, transparent);
        --pz-asa: var(--acento);
        --pz-asa-borde: #1F1C18;
    }
}

/* El atributo hidden manda aunque la clase tenga display (campo, fila...) */
.personalizador [hidden], .pz-zonas [hidden], .pz-presupuesto [hidden] { display: none !important; }

.pz-tarjeta-icono { width: 72px; height: 72px; color: var(--texto-suave); }

/* --------------------------------------------------------------- Distribución */
.pz-rejilla { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
    .pz-rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 28px; }
    .pz-editor { position: sticky; top: calc(var(--alto-cabecera) + 56px); }
}

.pz-opciones { display: grid; gap: 16px; }
.pz-bloque { display: grid; gap: 14px; min-width: 0; }
.pz-bloque legend { font-weight: 700; padding: 0 6px; font-size: 1.02rem; }
fieldset.pz-bloque[disabled] { opacity: .6; }
.pz-campos-fijos { grid-template-columns: 1fr 1fr; }
.pz-ayuda { font-size: .85rem; margin-top: 8px; }

/* --------------------------------------------------------------- Pestañas de vista */
.pz-vistas { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.pz-pestana {
    flex: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--borde); background: var(--superficie); color: var(--texto); font: 600 .95rem var(--fuente-texto);
}
.pz-pestana[aria-selected=true] { border-color: var(--primario); background: var(--primario); color: var(--primario-texto); }
.pz-pestana.con-diseno::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--acento); vertical-align: 1px; }

/* --------------------------------------------------------------- Lienzo */
.pz-lienzo {
    position: relative; width: 100%; max-width: 640px; margin-inline: auto;
    background: var(--pz-lienzo); border-radius: var(--radio); overflow: visible;   /* las asas pueden asomar */
    user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.pz-prenda { width: 100%; height: auto; pointer-events: none; border-radius: var(--radio); }
.pz-zona {
    position: absolute; border: 2px dashed var(--pz-zona); background: var(--pz-zona-fondo); border-radius: 4px;
}
.pz-zona-vacia {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px;
    text-align: center; font-size: .85rem; font-weight: 600; color: var(--texto-suave); pointer-events: none;
}
.pz-zona-vacia svg { width: 28px; height: 28px; }

.pz-diseno {
    position: absolute; cursor: move; touch-action: none; transform-origin: 50% 50%;
    outline: 1px solid transparent; outline-offset: 0;
}
.pz-diseno img { width: 100%; height: 100%; object-fit: fill; pointer-events: none; -webkit-user-drag: none; }
.pz-diseno:hover, .pz-diseno:focus-visible, .pz-diseno.activo { outline: 1px dashed var(--pz-asa); }
.pz-diseno:focus-visible { outline: 2px solid var(--acento); }

.pz-asa {
    position: absolute; width: 28px; height: 28px; border-radius: 50%; touch-action: none;
    background: var(--pz-asa); border: 3px solid var(--pz-asa-borde); box-shadow: var(--sombra);
}
.pz-asa-tamano { right: -14px; bottom: -14px; cursor: nwse-resize; }
.pz-asa-giro { left: calc(50% - 14px); top: -40px; cursor: grab; }
.pz-asa-giro::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 12px; background: var(--pz-asa); transform: translateX(-50%); }
@media (pointer: fine) {
    .pz-asa { width: 18px; height: 18px; border-width: 2px; }
    .pz-asa-tamano { right: -9px; bottom: -9px; }
    .pz-asa-giro { left: calc(50% - 9px); top: -30px; }
}

.pz-colocar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
@media (max-width: 480px) {
    .pz-colocar .boton { flex: 1 1 45%; min-height: 44px; }
}

/* --------------------------------------------------------------- Diseños y colores */
.pz-subir { cursor: pointer; }
.pz-mis-disenos { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-mis-disenos:empty { display: none; }
.pz-miniatura {
    position: relative; width: 72px; height: 72px; padding: 4px; cursor: pointer;
    border: 2px solid var(--borde); border-radius: var(--radio-pequeno); background: var(--pz-lienzo);
}
.pz-miniatura img { width: 100%; height: 100%; object-fit: contain; }
.pz-miniatura:hover { border-color: var(--primario); }
.pz-miniatura.con-error { border-color: var(--error); }
.pz-miniatura-estado {
    position: absolute; left: 2px; right: 2px; bottom: 2px; border-radius: 4px; padding: 0 2px;
    font-size: .65rem; line-height: 1.4; text-align: center; background: var(--superficie); color: var(--texto-suave);
}
.pz-miniatura.subiendo .pz-miniatura-estado { color: var(--info); }
.pz-miniatura.con-error .pz-miniatura-estado { color: var(--error); }

.pz-paleta { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-paleta:empty { display: none; }
.pz-muestra { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--borde); box-shadow: inset 0 0 0 2px var(--superficie); }

.pz-deslizador { width: 100%; height: 44px; accent-color: var(--primario); }

/* --------------------------------------------------------------- Resultado */
.pz-resultado { border-top: 4px solid var(--primario); }
.pz-resultado h2 { font-size: 1.15rem; }
.pz-horquilla { font-size: clamp(1.25rem, 4vw, 1.6rem); font-weight: 700; line-height: 1.25; }
.pz-horquilla small { display: block; font-size: .85rem; font-weight: 400; color: var(--texto-suave); }
.pz-detalle { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0; font-size: .92rem; }
.pz-detalle dt { color: var(--texto-suave); }
.pz-detalle dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pz-lineas, .pz-avisos { list-style: none; display: grid; gap: 10px; }
.pz-lineas li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radio-pequeno); background: var(--superficie-2); font-size: .9rem; }
.pz-avisos { margin-top: 10px; }
.pz-avisos li { padding: 8px 12px 8px 14px; border-left: 4px solid var(--aviso); background: color-mix(in srgb, var(--aviso) 8%, transparent); border-radius: 4px; font-size: .88rem; }
.pz-avisos li.pz-aviso-error { border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); }
.pz-cargando { color: var(--texto-suave); font-size: .9rem; margin-top: 6px; }

/* --------------------------------------------------------------- Presupuestos (cliente y panel) */
.pz-presupuesto { display: grid; gap: 20px; }
.pz-lineas-presupuesto { display: grid; gap: 16px; }
.pz-linea { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pz-linea { grid-template-columns: 260px minmax(0, 1fr); } }
.pz-previa { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--pz-lienzo); border-radius: var(--radio-pequeno); border: 1px solid var(--borde); }
.pz-previa-vacia { display: grid; place-items: center; color: var(--texto-suave); font-size: .85rem; }
.pz-datos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .92rem; }
.pz-datos dt { color: var(--texto-suave); }
.pz-datos dd { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pz-importe { font-size: 1.5rem; font-weight: 700; }
.pz-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pz-paleta-pequena { display: inline-flex; gap: 3px; vertical-align: middle; }
.pz-paleta-pequena .pz-muestra { width: 16px; height: 16px; border-width: 1px; box-shadow: none; }
.pz-numero-corto { max-width: 140px; }

/* --------------------------------------------------------------- Editor de zonas (panel) */
.pz-zonas { display: grid; gap: 20px; }
@media (min-width: 1000px) { .pz-zonas { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); align-items: start; } }
.pz-zonas-lienzo {
    position: relative; max-width: 560px; background: var(--pz-lienzo); border-radius: var(--radio);
    overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none;
}
.pz-zonas-lienzo img { width: 100%; height: auto; pointer-events: none; }
.pz-zonas-vacio { min-height: 280px; display: grid; place-items: center; color: var(--texto-suave); padding: 16px; text-align: center; cursor: default; }
.pz-zonas-rect { position: absolute; border: 2px dashed var(--pz-zona); background: var(--pz-zona-fondo); pointer-events: none; }
.pz-vista-miniatura { width: 64px; height: 64px; object-fit: contain; background: var(--pz-lienzo); border-radius: var(--radio-pequeno); }
.pz-orden { display: inline-flex; gap: 2px; }
.pz-orden form { display: inline; }