/* ══════════════════════════════════════════════════════════════════
   COLORA · Estudio móvil (≤768 px) — se siente como una app nativa.
   Sin scroll de página, sin zoom, sin efectos hover. Todo cuelga de
   html.studio-m, así que en escritorio no aplica ni una regla.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --m-top: env(safe-area-inset-top, 0px); --m-bot: env(safe-area-inset-bottom, 0px); --m-nav: 62px; --m-bar: 54px; }

  /* Base: app a pantalla completa, sin scroll lateral, sin zoom ni selección accidental */
  html.studio-m, html.studio-m body { position: fixed; inset: 0; width: 100%; height: 100dvh !important; overflow: hidden !important; background: #f5f5f7 !important; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
  html.studio-m body { user-select: none; -webkit-user-select: none; }
  html.studio-m input, html.studio-m textarea, html.studio-m select { font-size: 16px !important; user-select: text; -webkit-user-select: text; }
  html.studio-m *, html.studio-m *::before, html.studio-m *::after { box-sizing: border-box; }
  html.studio-m .main-container { display: block !important; position: static !important; padding: 0 !important; overflow: visible; }
  html.studio-m .sidebar { display: none !important; }

  /* Editor = pantalla; el escenario 3D cubre todo y la UI flota encima */
  html.studio-m .editor { position: fixed !important; inset: 0; width: 100% !important; height: 100dvh !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important; overflow: hidden !important; background: #f5f5f7; box-shadow: none !important; border: 0 !important; }
  html.studio-m #viewer3d-wrap { position: absolute !important; inset: 0 !important; transform: none !important; background: #f5f5f7 !important; }
  html.studio-m .workspace { position: absolute !important; inset: 0 !important; padding: 0 !important; background: transparent !important; pointer-events: none; }
  html.studio-m .workspace > * { pointer-events: auto; }

  /* Cabecera: vidrio, compacta, con zona segura */
  html.studio-m .topbar { position: absolute !important; top: 0; left: 0; right: 0; height: calc(52px + var(--m-top)) !important; min-height: 0 !important; padding: var(--m-top) 12px 0 14px !important; display: flex !important; align-items: center !important; gap: 8px !important; z-index: 10050 !important; background: rgba(245,245,247,.72) !important; -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 0 !important; border-bottom: 1px solid rgba(0,0,0,.06) !important; }
  html.studio-m .topbar #tab-list { flex: 1; min-width: 0; overflow: hidden !important; }
  html.studio-m .topbar-isla { margin-left: auto; padding: 4px 6px !important; height: 34px; }
  html.studio-m .topbar-isla .topbar-icon-btn, html.studio-m .topbar-isla button { min-width: 30px; height: 30px; }
  html.studio-m .st-guardado, html.studio-m .st-medidor, html.studio-m .st-ayuda, html.studio-m .st-atajos, html.studio-m .st-ver-guia, html.studio-m .st-vacio, html.studio-m .st-drop, html.studio-m .st-capas { display: none !important; }

  /* Pastilla superior: deshacer · vistas · luz */
  html.studio-m .dock { position: absolute !important; left: 50% !important; top: calc(60px + var(--m-top)); bottom: auto !important; transform: translateX(-50%); width: auto; max-width: calc(100% - 20px); padding: 4px !important; gap: 2px !important; border-radius: 16px !important; z-index: 10040; }
  html.studio-m .dock .dock-g:nth-of-type(n+2), html.studio-m .dock-sep, html.studio-m .dock-subir, html.studio-m .dock-capas, html.studio-m .dock-cta, html.studio-m .dock .dock-btn[title="Capas"] { display: none !important; }
  html.studio-m .dock > .dock-g { display: flex !important; }
  html.studio-m .dock .dock-btn { width: 36px !important; height: 36px !important; }
  html.studio-m .dock-vistas button { height: 34px !important; padding: 0 9px !important; font-size: 12px !important; }
  html.studio-m .dock-luz-wrap .st-pop { position: fixed; left: 10px; right: 10px; bottom: calc(var(--m-nav) + var(--m-bar) + var(--m-bot) + 22px); top: auto; width: auto; }

  /* Barra contextual: fila horizontal bajo la pastilla; solo al seleccionar un diseño */
  html.studio-m .herramientas-verticales { position: absolute !important; left: 50% !important; top: calc(108px + var(--m-top)) !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; width: auto !important; max-width: calc(100% - 20px); height: auto !important; flex-direction: row !important; padding: 4px !important; gap: 2px !important; overflow: visible !important; border-radius: 16px !important; z-index: 10039; opacity: 0; pointer-events: none; transition: opacity .2s; }
  html.studio-m.hay-sel .herramientas-verticales { opacity: 1; pointer-events: auto; }
  html.studio-m .ht-prim { flex-direction: row !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  html.studio-m .herramientas-verticales .herramienta-btn, html.studio-m .ht-masbtn { width: 38px !important; height: 38px !important; }
  html.studio-m .ht-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); max-height: 50dvh; overflow-y: auto; }

  /* Controles de la pieza: favorito / compartir / descargar fuera (en móvil se accede desde el menú) */
  html.studio-m .bottom-controls, html.studio-m .zoom-floating, html.studio-m #barra-vista, html.studio-m .floating-buttons, html.studio-m #btn-float-wpp, html.studio-m #btn-float-ig { display: none !important; }

  /* Barra inferior (total + continuar) */
  html.studio-m #m-actionbar { left: 10px; right: 10px; bottom: calc(var(--m-nav) + var(--m-bot) + 10px); height: var(--m-bar); border-radius: 18px; background: #18181b; box-shadow: 0 10px 28px -10px rgba(0,0,0,.45); z-index: 4400; padding: 0 8px 0 18px; }
  html.studio-m #m-actionbar .m-total-label { font: 400 10px 'Geist', sans-serif; letter-spacing: .1em; color: rgba(255,255,255,.55); }
  html.studio-m #m-actionbar .m-total-num { font: 500 18px 'Geist', sans-serif; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
  html.studio-m #m-actionbar .m-continuar { height: 40px; border-radius: 13px; padding: 0 22px; font: 500 14px 'Geist', sans-serif; background: #f4f4f5; color: #18181b; }

  /* Navegación inferior tipo app */
  html.studio-m #m-nav { height: calc(var(--m-nav) + var(--m-bot)); padding-bottom: var(--m-bot); background: rgba(250,250,251,.82); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border-top: 1px solid rgba(0,0,0,.07); box-shadow: none; z-index: 4700; }
  html.studio-m .m-nav-item { font: 400 10px 'Geist', sans-serif; color: #8e8e96; gap: 4px; }
  html.studio-m .m-nav-item svg { transition: transform .2s; }
  html.studio-m .m-nav-item.activo { color: #18181b; }
  html.studio-m .m-nav-item.activo svg { transform: translateY(-1px) scale(1.06); }
  html.studio-m .m-nav-item.activo::before { width: 5px; height: 5px; border-radius: 50%; top: 5px; background: #18181b; }

  /* Hoja inferior */
  html.studio-m .submenu { max-height: 66dvh !important; border-radius: 26px 26px 0 0 !important; padding: 8px 18px calc(var(--m-nav) + var(--m-bot) + 18px) !important; background: rgba(252,252,253,.94) !important; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); box-shadow: 0 -16px 50px -16px rgba(0,0,0,.35) !important; border: 0 !important; touch-action: none; z-index: 4600 !important; }
  html.studio-m .submenu::before { width: 38px; height: 5px; margin: 6px auto 10px; background: rgba(0,0,0,.18); }
  html.studio-m .submenu-content.active { touch-action: pan-y; max-height: calc(66dvh - 90px); overscroll-behavior: contain; }
  html.studio-m #m-scrim { background: rgba(12,12,16,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  html.studio-m .submenu .boton-cambiar, html.studio-m .submenu #panel-producto .producto-actual { display: none; }

  /* Asistente: icono flotante + hoja */
  html.studio-m .st-ia-btn { right: 52px; bottom: calc(var(--m-nav) + var(--m-bar) + var(--m-bot) + 22px); z-index: 4500; }
  html.studio-m .st-ia { left: 10px; right: 10px; width: auto; bottom: calc(var(--m-nav) + var(--m-bar) + var(--m-bot) + 20px); max-height: 56dvh; z-index: 4800; }
  html.studio-m .st-toasts { left: 12px; right: 12px; top: calc(112px + var(--m-top)); bottom: auto; align-items: center; z-index: 10060; }
  html.studio-m .st-toast { max-width: 100%; }

  /* Sin efectos hover en táctil */
  @media (hover: none) {
    html.studio-m *:hover { transition-duration: 0s; }
    html.studio-m .st-ia-btn:hover, html.studio-m .diseno-item:hover, html.studio-m .color-circle:hover, html.studio-m .st-monedas:hover, html.studio-m .m-nav-item:hover { transform: none !important; }
    html.studio-m .st-ia-btn { animation: none; }
  }
}
@media (max-width: 768px) {
  html.studio-m:not(.hay-sel) .herramientas-verticales { display: none !important; }
  html.studio-m .dock-vistas button { padding: 0 8px !important; font-size: 12px !important; }
}
@media (max-width: 768px) {
  /* con la hoja abierta, lo demás se aparta */
  html.studio-m.m-sheet-open #m-actionbar, html.studio-m.m-sheet-open .st-ia-btn, html.studio-m.m-sheet-open .dock, html.studio-m.m-sheet-open .herramientas-verticales, html.studio-m.m-sheet-open .st-toasts { opacity: 0; pointer-events: none; }
  html.studio-m.m-sheet-open .controlador, html.studio-m.m-sheet-open [data-h], html.studio-m.m-sheet-open .st-medida { visibility: hidden !important; }
  html.studio-m #m-actionbar, html.studio-m .st-ia-btn, html.studio-m .dock { transition: opacity .2s; }
  html.studio-m .submenu-header h2 { font: 400 11px 'Geist', sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: #71717a !important; }
}

/* Controles 3D del diseño: zona táctil más grande que el círculo visible (mínimo ~44 px) */
@media (max-width: 768px) {
  #__3ov [data-h]:not([data-h="center"])::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
}

/* Checkout móvil: los campos mandan sobre las reglas de escritorio de studio.css (14 px / radio 10 px) */
@media (max-width: 768px) {
  html.studio.studio-m .co-screen .co-der input.co-input,
  html.studio.studio-m .co-screen .co-der input.co-tel-input {
    font-size: 16px !important;
    font-weight: 400 !important;
    border-radius: 12px !important;
  }
  html.studio.studio-m .co-screen .co-der input.co-tel-input { border-radius: 0 12px 12px 0 !important; }
}