/* MONB · Phase 3 designer foundation. Loaded after the legacy designer CSS. */

#contenedor_creador_disenos {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--monb-gradient-surface);
}

#contenedor_creador_disenos::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 7%;
  right: -9%;
  width: 46%;
  height: 22%;
  border-radius: 999px;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, rgba(0,104,232,.06), rgba(0,163,255,.20), rgba(0,215,200,.22));
  filter: blur(4px);
  pointer-events: none;
}

#fondo_creador_disenos { min-width: 0; opacity: .42; }

#contenido_disenador {
  position: absolute !important;
  z-index: 1;
  top: 16px !important;
  left: 50% !important;
  width: min(calc(100% - 48px), var(--monb-container));
  min-width: 0;
  margin: 0 !important;
  transform: translateX(-50%);
}

#barra_slector_productos_disenador {
  border-bottom: 1px solid rgba(0, 163, 255, .20);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}

.btn_selector_producto_disenador {
  color: var(--monb-muted);
  font-family: var(--monb-font-display);
  font-weight: 650;
  transition: color var(--monb-transition), background var(--monb-transition), box-shadow var(--monb-transition);
}

.btn_selector_producto_disenador:hover,
.btn_selector_seleccionado {
  background: var(--monb-ice);
  color: var(--monb-primary);
  box-shadow: inset 0 -3px 0 var(--monb-electric);
}

#contenedor_controles_disenador {
  border-right: 1px solid rgba(216,226,235,.9);
  background: rgba(7, 23, 38, .88);
  color: #fff;
  backdrop-filter: blur(12px);
}

#linea_controles_disenador { background: linear-gradient(var(--monb-electric), var(--monb-turquoise)); }

.btn_opcion_disenador {
  color: rgba(255,255,255,.78);
  font-family: var(--monb-font-body);
  border-radius: 0 12px 12px 0;
  transition: color var(--monb-transition), background var(--monb-transition), transform var(--monb-transition);
}

.btn_opcion_disenador i,
.btn_opcion_disenador .t_texto {
  color: var(--monb-turquoise);
}

.btn_opcion_disenador:hover {
  transform: translateX(3px);
  background: rgba(0,163,255,.16);
  color: #fff;
}

#main-container {
  overflow: hidden;
  background-color: rgba(255,255,255,.10);
}

#cont_precio {
  border-top: 1px solid var(--monb-border);
  background: rgba(255,255,255,.96);
  box-shadow: 0 -12px 32px rgba(7,23,38,.08);
}

.label_acabado_producto {
  border: 1px solid var(--monb-border);
  border-radius: 999px;
  background: #fff;
  color: var(--monb-muted);
}

.label_acabado_producto:hover,
.acabado_selected {
  border-color: var(--monb-electric);
  background: var(--monb-ice);
  color: var(--monb-primary);
  box-shadow: 0 0 0 3px rgba(0,163,255,.10);
}

.cont_inputs_medidas input {
  border: 1px solid var(--monb-border) !important;
  border-radius: 9px !important;
  background: var(--monb-snow) !important;
}

#precio_disenador {
  color: var(--monb-ink);
  font-family: var(--monb-font-display);
  font-weight: 700;
}

#ir_paso_2_disenador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--monb-primary);
  color: #fff;
  font-family: var(--monb-font-display);
  font-weight: 700;
  box-shadow: var(--monb-glow);
}

#ir_paso_2_disenador:hover { transform: translateY(-2px); background: var(--monb-primary-dark); }

#info_tabla_aproximada {
  border: 1px solid rgba(184,106,0,.22);
  border-radius: 999px;
  background: #fff8e8;
  color: #845000;
  font-family: var(--monb-font-body);
}

#cont_colores_fondo_disenador,
#cont_iconos_disenador,
.fpd-context-dialog {
  border: 1px solid var(--monb-border);
  border-radius: var(--monb-radius-md);
  background: #fff;
  box-shadow: var(--monb-shadow-md);
}

.icono_disenador { border-radius: 10px; transition: background var(--monb-transition), transform var(--monb-transition); }
.icono_disenador:hover { transform: translateY(-2px); background: var(--monb-ice); }

#fondo_ventana_iniciar { background: rgba(7,23,38,.72); backdrop-filter: blur(6px); }

#contenido_ventana_iniciar {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--monb-radius-lg);
  background: #fff;
  box-shadow: 0 28px 80px rgba(7,23,38,.28);
}

.der_ventana_iniciar { background: var(--monb-gradient-surface); }
.titulo_ventana_iniciar { color: var(--monb-ink); font-family: var(--monb-font-display); font-weight: 700; }
.subtitulo_ventana_iniciar { color: var(--monb-primary); font-family: var(--monb-font-display); }

.confirmar_ventana_iniciar {
  border-radius: 12px;
  background: var(--monb-primary);
  color: #fff;
  box-shadow: var(--monb-glow);
}

.cancelar_ventana_iniciar { border: 1px solid var(--monb-border); border-radius: 12px; background: #fff; color: var(--monb-ink); }

@media (max-width: 760px) {
  #contenedor_creador_disenos { overflow-x: clip; }
  #contenido_disenador { top: 8px !important; width: calc(100% - 20px); }
  #barra_slector_productos_disenador { overflow-x: auto; white-space: nowrap; }
  #contenedor_controles_disenador { max-width: 100%; }
  #cont_precio { min-width: 0; overflow-x: auto; }
  #contenido_ventana_iniciar { width: calc(100% - 28px); max-height: calc(100vh - 28px); overflow-y: auto; }
  .izq_ventana_iniciar { display: none; }
  .der_ventana_iniciar { float: none; width: 100%; padding: 24px; }
}

/* Phase 8 · full-width rider workspace -------------------------------- */
@media (min-width: 761px) {
  #contenido_disenador {
    top: 12px !important;
    width: calc(100% - 32px);
    max-width: 1600px;
  }

  #barra_slector_productos_disenador {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 52px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(0,163,255,.16);
    border-radius: 16px 16px 0 0;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 34px rgba(7,23,38,.08);
  }

  .btn_selector_producto_disenador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 0 24px;
    border: 0;
    border-right: 1px solid var(--monb-border);
    font-size: 16px;
  }

  .btn_selector_producto_disenador:last-of-type { border-right: 0; }
  .btn_selector_producto_disenador:hover,
  .btn_selector_seleccionado {
    background: linear-gradient(135deg, rgba(0,104,232,.10), rgba(0,215,200,.14));
    box-shadow: inset 0 -3px 0 var(--monb-turquoise);
  }

  #contenedor_controles_disenador {
    position: absolute;
    top: 58px;
    left: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    height: 74px !important;
    min-height: 74px;
    padding: 8px;
    border: 1px solid rgba(0,163,255,.16);
    border-radius: 0 0 16px 16px;
    background: rgba(255,255,255,.96);
    color: var(--monb-ink);
    box-shadow: 0 16px 38px rgba(7,23,38,.10);
    backdrop-filter: blur(14px);
    box-sizing: border-box;
  }

  #contenedor_controles_disenador[style*="display: block"],
  #contenedor_controles_disenador[style*="display:block"] { display: grid !important; }

  #linea_controles_disenador { display: none; }
  #contenedor_controles_disenador > div:nth-child(2) { display: contents; }

  .btn_opcion_disenador,
  #creador_orden_capas,
  #reset_disenador {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    height: 56px;
    margin: 0;
    padding: 0 12px;
    border-right: 1px solid var(--monb-border);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0,104,232,.035), rgba(0,215,200,.07));
    color: var(--monb-ink);
    font-size: 14px;
    font-weight: 720;
    box-sizing: border-box;
  }

  #reset_disenador { border-right: 0; }

  .btn_opcion_disenador i,
  .btn_opcion_disenador .t_texto {
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--monb-gradient-rider);
    color: #fff;
    font: 800 18px/1 var(--monb-font-display);
    box-shadow: 0 8px 18px rgba(0,104,232,.18);
  }

  .btn_opcion_disenador:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(0,104,232,.12), rgba(0,215,200,.18));
    color: var(--monb-primary-dark);
  }

  .btn_opcion_disenador:hover i,
  .btn_opcion_disenador:hover .t_texto {
    border: 0;
    color: #fff;
    box-shadow: var(--monb-glow);
  }

  .color_de_fondo_disenador { color: inherit; font-size: inherit; border: 0; }

  #main-container {
    top: 142px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 250px) !important;
    min-height: 480px;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(0,163,255,.15);
    border-radius: 20px;
    background: rgba(255,255,255,.18) !important;
    box-sizing: border-box;
  }

  #clothing-designer {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto !important;
  }

  #cont_precio {
    right: 16px;
    bottom: 14px;
    left: 16px;
    min-height: 88px;
    padding: 10px 14px;
    border: 1px solid rgba(0,163,255,.18);
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 48px rgba(7,23,38,.18);
    box-sizing: border-box;
  }

  #ir_paso_2_disenador {
    background: var(--monb-gradient-rider);
    box-shadow: 0 0 0 4px rgba(0,215,200,.10), 0 14px 30px rgba(0,104,232,.25);
  }

  #ir_paso_2_disenador:hover {
    background: linear-gradient(115deg, #005bd0, #00bdb2);
    box-shadow: var(--monb-glow);
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .btn_selector_producto_disenador { min-width: 0; flex: 1 1 0; padding-inline: 12px; }
  .btn_opcion_disenador { gap: 6px; padding-inline: 7px; font-size: 12px; }
}