/* ============================================================
   ElectriCAD · Mobile UX addon (v1)
   Se carga DESPUÉS de app.css para sobreescribir donde haga falta.
   No modifica ficheros originales.
   ============================================================ */

/* Safe area para notch / gesture-bar iOS */
:root{
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

/* --- Coarse pointer: agrandar targets globalmente --- */
@media (hover:none) and (pointer:coarse){
  .icon-btn{ width:40px; height:40px; font-size:18px }
  .tool-btn{ min-height:40px; padding:8px 10px }
  .btn{ padding:10px 14px }
  .btn.small{ padding:8px 12px }
  input[type="checkbox"], input[type="radio"]{ transform:scale(1.25); margin-right:6px }
  select, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="color"], textarea{
    min-height:40px; font-size:15px;
  }
  /* Evita zoom automático de iOS en focus */
  input, select, textarea{ font-size:16px !important }
  /* Menús desplegables */
  .menu button, .menu a{ padding:12px 14px; font-size:14px }
}

/* --- Canvas: gestos táctiles nativos deshabilitados (los maneja mobile.js) --- */
@media (hover:none) and (pointer:coarse){
  #canvas, #canvas-wrap{
    touch-action:none;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
}

/* ============================================================
   EDITOR EN MÓVIL (≤ 900px o coarse pointer)
   ============================================================ */
@media (max-width:900px), (hover:none) and (pointer:coarse){

  /* Topbar del editor: compactar */
  .editor-top{
    flex-wrap:wrap; height:auto;
    padding:calc(4px + var(--sa-t)) 6px 4px;
    gap:4px;
  }
  .editor-title{ order:1; flex:1 1 100%; padding:2px 4px }
  .editor-title #proj-name{ font-size:13px; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom }
  .editor-title .dirty-dot{ font-size:11px }
  .brand.small{ display:none }               /* liberar espacio */

  /* Grupo de herramientas superior: colapsable */
  .editor-tools{
    order:5; width:100%; margin:2px 0;
    border-left:none; border-right:none;
    padding:2px 4px; height:auto;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    background:var(--panel);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .editor-tools::-webkit-scrollbar{ display:none }
  .editor-tools > *{ flex-shrink:0; scroll-snap-align:start }
  .editor-tools.collapsed{ display:none }

  .editor-actions{ order:4; margin-left:auto; gap:4px; flex-wrap:nowrap }
  .editor-actions .btn{ padding:8px 10px; font-size:12px }
  .editor-actions #btn-save{ font-weight:700 }
  .theme-picker{ display:none }              /* recuperable desde ajustes */

  /* Nuevo botón de menú herramientas (creado por JS) */
  #mob-tools-toggle{
    order:3; width:38px; height:36px;
    background:var(--panel-2); border:1px solid var(--border);
    border-radius:8px; color:var(--fg);
    font-size:18px; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
  }
  #mob-tools-toggle.active{ background:var(--primary); color:#08131a; border-color:var(--primary) }

  /* Barra de dibujo: scroll horizontal cómodo */
  .editor-draw-tools{
    overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    padding:4px 6px; gap:6px;
  }
  .editor-draw-tools::-webkit-scrollbar{ height:4px }
  .editor-draw-tools > *{ flex-shrink:0 }
  .tool-pill{ padding:4px 6px !important }
  .tool-group-label{ display:none }          /* solo iconos en móvil */
}

/* ============================================================
   BOTTOM SHEETS: paleta y propiedades como cajones inferiores
   (más ergonómico que laterales en portrait)
   ============================================================ */
@media (max-width:720px){
  .editor-body{ position:relative }

  .palette, .props{
    position:absolute; left:0; right:0;
    top:auto; bottom:0;
    width:100%; max-width:100%;
    height:60vh; max-height:70vh;
    transform:translateY(100%);
    transition:transform .25s ease;
    border-left:none; border-right:none;
    border-top:1px solid var(--border);
    border-top-left-radius:14px; border-top-right-radius:14px;
    box-shadow:0 -8px 24px rgba(0,0,0,.55);
    z-index:30;
    padding-bottom:var(--sa-b);
  }
  .palette.mobile-open, .props.mobile-open{ transform:translateY(0) }

  /* Handle visual arriba de cada cajón */
  .palette::before, .props::before{
    content:""; display:block;
    width:44px; height:4px; margin:8px auto 4px;
    background:var(--border); border-radius:2px;
  }

  .palette-list{ grid-template-columns:repeat(3,1fr); gap:8px; padding:10px }
  .palette-item{ padding:8px 4px }
  .palette-item svg{ height:52px }
  .palette-item span{ font-size:11px }
  .palette-cat{ font-size:11px; padding:10px 6px 4px }

  .props-body{ padding:12px 14px calc(14px + var(--sa-b)) }
  .props-body label{ margin:10px 0 }

  .mobile-backdrop{ background:rgba(0,0,0,.55) }
}

/* ============================================================
   FABs: más grandes, con etiqueta y en zona pulgar
   ============================================================ */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .mobile-fab-group{
    display:flex !important;
    right:calc(10px + var(--sa-r));
    bottom:calc(70px + var(--sa-b));   /* por encima del panel de zoom */
    gap:10px; z-index:45;
  }
  .mobile-fab{
    width:52px; height:52px;
    font-size:22px;
    background:var(--panel);
    border:1px solid var(--border);
    box-shadow:0 6px 18px rgba(0,0,0,.45);
  }
  .mobile-fab.active{ transform:scale(1.05); background:var(--primary); color:#08131a; border-color:var(--primary) }
}

/* Modo mano: 1 dedo mueve el lienzo */
body.mobile-hand-mode #canvas,
body.mobile-hand-mode #canvas-wrap{ cursor:grab }
body.mobile-hand-mode #canvas:active{ cursor:grabbing }
body.mobile-hand-mode::before{
  content:"✋ Modo mover activo";
  position:fixed; top:calc(6px + var(--sa-t)); left:50%;
  transform:translateX(-50%);
  background:var(--primary); color:#08131a;
  padding:4px 12px; border-radius:999px;
  font-size:11px; font-weight:700; z-index:9998;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* ============================================================
   Panel de zoom: reubicado y agrandado en móvil
   ============================================================ */
@media (max-width:720px){
  .zoom-panel{
    left:50%; right:auto; transform:translateX(-50%);
    bottom:calc(12px + var(--sa-b));
    padding:5px 8px;
  }
  .zoom-panel .zbtn{ width:36px; height:36px; font-size:15px }
  .zoom-panel .zlabel{ min-width:52px; font-size:13px }
}

/* ============================================================
   Diálogos y menús a pantalla completa en móvil
   ============================================================ */
@media (max-width:720px){
  .dlg, .cs-dialog{
    width:calc(100vw - 12px) !important;
    max-width:100vw;
    max-height:calc(100vh - 24px);
  }
  .menu{
    position:fixed !important;
    left:8px !important; right:8px !important;
    top:auto !important; bottom:calc(12px + var(--sa-b)) !important;
    max-height:60vh; overflow:auto;
    border-radius:12px;
  }
}

/* ============================================================
   Home / Dashboard / Auth polish móvil
   ============================================================ */
@media (max-width:720px){
  .topbar{ flex-wrap:wrap; gap:8px; padding:10px 12px }
  .topbar nav{ order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:2px }
  .topbar nav .navlink{ flex-shrink:0 }
  .auth-card{ max-width:100% }
  .card{ padding:16px }
  .projects-grid{ grid-template-columns:1fr !important; gap:12px }
}

/* Hint visual de gestos (solo primer arranque, controlado por JS) */
.mobile-gesture-hint{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:rgba(15,23,42,.92); color:#e6edf3;
  border:1px solid var(--border); border-radius:12px;
  padding:14px 18px; font-size:13px; line-height:1.5;
  z-index:9999; max-width:280px; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  animation:mgh-in .3s ease;
}
.mobile-gesture-hint b{ color:var(--primary) }
.mobile-gesture-hint button{
  margin-top:10px; padding:8px 16px;
  background:var(--primary); color:#08131a;
  border:none; border-radius:6px; font-weight:700; cursor:pointer;
}
@keyframes mgh-in{ from{opacity:0; transform:translate(-50%,-40%)} to{opacity:1; transform:translate(-50%,-50%)} }