/* ============================================================
   MÓDULO DE DISEÑO PERSONALIZADO (design-studio.css)
   Estilos limpios - Wizard 4 pasos
   ============================================================ */

#diseno > .container {
    width: min(1320px, 94%);
}

/* ---------- HEADER DEL MÓDULO (hub) ---------- */
.diseno-header-hub {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem;
}
.diseno-hub-header { margin-bottom: 1rem; }
.diseno-hub-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: rgba(253, 196, 23, .16);
    color: #8a5a00;
    border: 1px solid rgba(253, 196, 23, .55);
    padding: .35rem .9rem;
    border-radius: 999px;
    margin-bottom: .75rem;
}
.diseno-hub-title {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 800;
    color: var(--neg);
    line-height: 1.15;
    margin-bottom: .55rem;
    letter-spacing: -.3px;
    text-transform: uppercase;
    font-style: italic;
}
.diseno-hub-title .gold {
    background: var(--gw);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.diseno-hub-sub {
    font-size: .9rem;
    color: #6b6b66;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
}
.diseno-hub-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.1rem;
}
.diseno-hub-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .38rem .85rem;
    background: #ffffff;
    border: 1.5px solid rgba(211, 89, 20, .28);
    color: var(--nar);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* ---------- LAYOUT PRINCIPAL ---------- */
.diseno-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
}
.diseno-grid > * { min-width: 0; }
.diseno-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 1.8rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
.diseno-preview-box {
    background: var(--gd);
    color: #ffffff;
    border-radius: 20px;
    padding: 1.8rem;
    border: 1px solid rgba(253, 196, 23, .28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    position: sticky;
    top: 110px;
}

/* ---------- STEPPER ---------- */
.diseno-stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
    margin-bottom: 1.5rem;
}
.diseno-step-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .65rem .55rem;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: var(--gri);
    font-family: Poppins, sans-serif;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}
.diseno-step-pill .step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    flex-shrink: 0;
}
.diseno-step-pill:hover { border-color: var(--ama); background: rgba(253, 196, 23, .06); }
.diseno-step-pill.active { border-color: var(--nar); background: rgba(253, 196, 23, .14); color: var(--neg); font-weight: 800; }
.diseno-step-pill.active .step-num,
.diseno-step-pill.completed .step-num { background: var(--ama); color: #111; }

/* ---------- PASOS ---------- */
.diseno-wizard-step { display: none; }
.diseno-wizard-step.active { display: block; animation: fadeInStep .22s ease; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.diseno-step-hint { margin: 0 0 1rem; font-size: .84rem; color: var(--gri); line-height: 1.5; }

/* ---------- GRUPOS / LABELS ---------- */
.opt-group { margin-bottom: 1.4rem; }
.opt-label { display: block; font-size: .76rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color: var(--gri); margin-bottom: .55rem; }

/* ---------- PASO 1: GRID DE PRENDAS ---------- */
.diseno-garment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .85rem;
    width: 100%;
}
.diseno-radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    padding: 1rem .65rem;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    background: #fafafa;
    cursor: pointer;
    transition: all .2s ease;
    overflow: hidden;
    user-select: none;
}
.diseno-radio-card input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0, 0, 0, 0); }
.diseno-radio-card img { width: 72px; height: 72px; max-width: 100%; max-height: 72px; object-fit: contain; border-radius: 8px; display: block; flex-shrink: 0; }
.diseno-radio-card:hover { border-color: var(--nar); background: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(211, 89, 20, .1); }
.diseno-radio-card.selected, .diseno-radio-card.active, .diseno-radio-card:has(input:checked) { border-color: var(--nar); background: rgba(253, 196, 23, .1); box-shadow: 0 6px 18px rgba(211, 89, 20, .18); }
.diseno-radio-card.selected::after, .diseno-radio-card.active::after, .diseno-radio-card:has(input:checked)::after {
    content: '✓'; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ama); color: #111; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 900; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.diseno-card-title { font-size: .82rem; font-weight: 700; color: var(--neg); line-height: 1.25; }
.diseno-card-sub { font-size: .72rem; color: var(--gri); line-height: 1.35; }

/* ---------- PASO 2: TÉCNICAS ---------- */
.diseno-tech-grid { display: grid; gap: .8rem; }
.diseno-tech-card { flex-direction: row !important; text-align: left; align-items: flex-start; gap: .9rem; padding: 1rem 1.15rem; }
.diseno-tech-card img { display: none; }
.diseno-tech-ico { font-size: 1.65rem; line-height: 1; flex-shrink: 0; }
.diseno-tech-card .diseno-card-title { display: block; font-size: .9rem; margin-bottom: .2rem; text-align: left; }
.diseno-tech-card .diseno-card-sub { display: block; font-size: .78rem; line-height: 1.45; text-align: left; }

/* ---------- PASO 3: UPLOAD ---------- */
.diseno-upload-box { padding: 1.2rem; border: 2px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; text-align: center; transition: all .2s ease; }
.diseno-upload-box:hover { border-color: var(--ama); background: rgba(253, 196, 23, .04); }
.diseno-upload-box input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.diseno-upload-box .btn { font-size: .8rem; padding: .75rem 1.4rem; }
.uploaded-logo-card { display: flex; align-items: center; gap: .8rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: .85rem 1rem; margin-top: .8rem; }
.uploaded-logo-thumb { width: 52px; height: 52px; background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 50% / 12px 12px; border: 1px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.uploaded-logo-thumb img { max-width: 90%; max-height: 90%; object-fit: contain; }

/* ---------- INPUTS / TEXTAREAS ---------- */
.diseno-input, .diseno-textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: .85rem 1rem; border: 2px solid #e5e7eb; border-radius: 10px; font-family: Poppins, sans-serif; font-size: .88rem; color: var(--neg); background: #ffffff; transition: border-color .2s ease, box-shadow .2s ease; }
.diseno-input:focus, .diseno-textarea:focus { outline: none; border-color: var(--ama); box-shadow: 0 0 0 3px rgba(253, 196, 23, .2); }
.diseno-textarea { resize: vertical; min-height: 110px; line-height: 1.5; display: block; }

/* ---------- NAV DEL WIZARD ---------- */
.diseno-wizard-nav { display: flex; align-items: center; gap: .75rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #f0f0f0; flex-wrap: wrap; }
.diseno-wizard-nav .btn { font-size: .82rem; padding: .8rem 1.6rem; }
.diseno-wizard-alert { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 10px; background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; font-size: .82rem; font-weight: 600; }

/* ---------- RESUMEN (SIDEBAR) ---------- */
.diseno-summary-list { display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 1rem 0; margin: 1rem 0; }
.diseno-summary-row { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; line-height: 1.4; }
.diseno-summary-row span { color: var(--gcl); flex-shrink: 0; font-weight: 500; }
.diseno-summary-row strong { color: #ffffff; text-align: right; word-break: break-word; font-weight: 700; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
    .diseno-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .diseno-preview-box { position: relative; top: 0; }
}
@media (max-width: 768px) { .diseno-stepper { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .diseno-panel, .diseno-preview-box { padding: 1.2rem; border-radius: 16px; }
    .diseno-garment-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
    .diseno-radio-card { padding: .8rem .5rem; }
    .diseno-radio-card img { width: 56px; height: 56px; max-height: 56px; }
    .diseno-wizard-nav { flex-direction: column-reverse; align-items: stretch; }
    .diseno-wizard-nav .btn { width: 100%; justify-content: center; margin-left: 0 !important; }
}

/* ---------- DARK MODE ---------- */
html[data-theme="dark"] .diseno-hub-title { color: #f8fafc; }
html[data-theme="dark"] .diseno-hub-sub { color: #cbd5e1; }
html[data-theme="dark"] .diseno-hub-tag { background: rgba(253, 196, 23, .12); color: var(--ama); border-color: rgba(253, 196, 23, .5); }
html[data-theme="dark"] .diseno-hub-badge { background: #1a1d24; border-color: rgba(253, 196, 23, .3); }
html[data-theme="dark"] .diseno-wizard-nav { border-top-color: #262b36; }
html[data-theme="dark"] .diseno-upload-box { background: #12151b; border-color: #334155; }
html[data-theme="dark"] .uploaded-logo-card { background: #12151b; border-color: #2b313d; }