/* ═══════════════════════════════════════════════════════════════
   PANTALLAS PEQUEÑAS
   No es la interfaz de escritorio encogida: es otra disposición.
   El pulgar llega al borde inferior y no a la esquina superior
   izquierda, así que las herramientas bajan; los paneles pasan a ser
   una hoja que se arrastra desde abajo; y el lienzo se queda con
   todo lo que sobra, que es lo único que de verdad importa mirar.
   ═══════════════════════════════════════════════════════════════ */

/* Elementos que sólo existen en móvil */
#sheet,#sheetGrip,#mMenu,#mPanels{display:none}

@media (max-width:900px){

  #app{
    grid-template-columns:1fr;
    grid-template-rows:var(--menubar) var(--optionsbar) 1fr auto;
    grid-template-areas:
      "menu"
      "opts"
      "canvas"
      "tools";
  }

  /* ── barra superior ── */
  #menubar{
    padding:0 4px 0 0;
    gap:0;
  }
  #brand{padding:0 10px;border-right:0;margin-right:0}
  #brand small{display:none}
  .menu-root{display:none}          /* los menús se pliegan en ☰ */
  #mMenu{
    display:inline-flex;flex:none;
    background:transparent;border:0;border-radius:0;
    width:var(--menubar);height:100%;color:var(--tx-dim);padding:0;
    min-height:0;
  }
  #mMenu:hover{background:var(--s-600);color:var(--tx)}
  #menubar .spring{flex:1 1 auto}
  #mPanels{
    display:inline-flex;flex:none;
    background:transparent;border:0;border-radius:0;
    height:100%;padding:0 11px;color:var(--tx-dim);
    font-size:var(--fs-sm);min-height:0;gap:6px;
  }
  #mPanels.on{color:var(--ac)}

  /* El desplegable de menú ocupa el ancho, que es donde cae el dedo */
  .menu-pop{
    left:6px!important;right:6px;width:auto;min-width:0;
    max-height:70vh;overflow-y:auto;
  }
  .menu-item{padding:11px 12px;font-size:var(--fs)}

  /* ── opciones de herramienta ── */
  #optsbar{
    padding:0 8px;gap:7px;
    -webkit-overflow-scrolling:touch;
  }
  #optsbar .tool-name{display:none}
  #optsbar input[type=range]{width:120px}

  /* ── lienzo ── */
  #stage{grid-area:canvas}
  #empty h1{font-size:15px}
  #empty p{font-size:var(--fs-sm)}

  /* ── herramientas abajo ── */
  #tools{
    grid-area:tools;
    flex-direction:row;
    border-right:0;border-top:1px solid var(--line);
    padding:4px calc(4px + env(safe-area-inset-left))
            calc(4px + env(safe-area-inset-bottom))
            calc(4px + env(safe-area-inset-right));
    gap:3px;
    overflow-x:auto;overflow-y:hidden;
    justify-content:flex-start;
  }
  .tool{
    width:var(--touch);height:var(--touch);
    margin:0;
  }
  .tool-sep{
    width:1px;height:auto;margin:6px 4px;
    align-self:stretch;flex:none;
  }

  /* ── paneles: hoja arrastrable desde abajo ── */
  #panels{
    position:fixed;left:0;right:0;bottom:0;
    width:auto;height:78dvh;max-height:78dvh;
    border-left:0;border-top:1px solid var(--line-strong);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:var(--sh-3);
    transform:translateY(100%);
    transition:transform .26s cubic-bezier(.32,.72,0,1);
    z-index:120;
    padding-bottom:env(safe-area-inset-bottom);
  }
  #panels.open{transform:translateY(0)}
  #panels.collapsed{width:auto;overflow:visible;border-top:1px solid var(--line-strong)}

  #sheetGrip{
    display:flex;align-items:center;justify-content:center;
    height:22px;flex:none;cursor:grab;touch-action:none;
  }
  #sheetGrip::before{
    content:"";width:38px;height:4px;border-radius:2px;
    background:var(--line-strong);
  }
  #sheetGrip:active{cursor:grabbing}

  /* Velo que cierra la hoja al tocar fuera */
  #sheetVeil{
    display:block;position:fixed;inset:0;z-index:110;
    background:rgba(8,10,12,.5);
    opacity:0;pointer-events:none;transition:opacity .26s;
  }
  #sheetVeil.on{opacity:1;pointer-events:auto}

  .panel-head{padding:10px 12px}
  .panel-body{padding:11px 12px}

  /* ── estado ── */
  #statusbar{
    display:none;                    /* se reemplaza por la píldora del lienzo */
  }

  /* ── diálogos a pantalla completa ── */
  .modal{padding:0;align-items:stretch}
  .modal-card{
    max-width:none;max-height:none;
    height:100dvh;border-radius:0;border:0;
  }
  .modal-body{padding:14px}
  .modal-foot{
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  }

  #toast{bottom:calc(var(--toolbar) + 22px)}
}

/* Píldora flotante con el zoom, que sustituye a la barra de estado */
#zoomPill{display:none}
@media (max-width:900px){
  #zoomPill{
    display:flex;align-items:center;gap:2px;
    position:absolute;left:8px;bottom:8px;z-index:20;
    background:rgba(27,29,32,.9);
    border:1px solid var(--line);border-radius:20px;
    padding:2px;backdrop-filter:blur(6px);
  }
  #zoomPill button{
    background:transparent;border:0;border-radius:16px;
    width:32px;height:32px;min-height:0;padding:0;
    color:var(--tx-dim);font-size:15px;
  }
  #zoomPill .lvl{
    min-width:46px;font-size:var(--fs-xs);font-family:var(--mono);
    color:var(--tx);text-align:center;padding:0 3px;
  }
  #msgPill{
    display:block;
    position:absolute;left:50%;transform:translateX(-50%);
    bottom:8px;z-index:20;
    background:rgba(27,29,32,.92);
    border:1px solid var(--line);border-radius:14px;
    padding:5px 12px;font-size:var(--fs-xs);color:var(--ac);
    max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    opacity:0;transition:opacity .2s;pointer-events:none;
  }
  #msgPill.show{opacity:1}
}

/* ── móviles estrechos ── */
@media (max-width:560px){
  :root{--menubar:44px;--optionsbar:38px}
  #brand span{display:none}
  #brand{padding:0 8px}
  .field{flex-wrap:wrap}
  .field>label{width:100%;margin-bottom:1px}
  .field>.grow{width:100%}
  #panels{height:82dvh;max-height:82dvh}
}

/* ── apaisado en móvil: sobra ancho y falta altura ── */
@media (max-width:900px) and (max-height:480px) and (orientation:landscape){
  #app{
    grid-template-columns:var(--toolbar) 1fr;
    grid-template-rows:var(--menubar) var(--optionsbar) 1fr;
    grid-template-areas:
      "menu  menu"
      "opts  opts"
      "tools canvas";
  }
  #tools{
    flex-direction:column;
    border-top:0;border-right:1px solid var(--line);
    padding:4px 0;
    overflow-y:auto;overflow-x:hidden;
  }
  .tool-sep{width:auto;height:1px;margin:5px 8px;align-self:auto}
  #panels{
    top:0;bottom:0;left:auto;right:0;
    width:min(320px,58vw);height:100dvh;max-height:100dvh;
    border-radius:0;border-left:1px solid var(--line-strong);border-top:0;
    transform:translateX(100%);
  }
  #panels.open{transform:translateX(0)}
  #sheetGrip{display:none}
  #toast{bottom:16px}
}

/* ── pantallas muy anchas: los paneles pueden respirar ── */
@media (min-width:1600px){
  :root{--panel-w:300px}
}
@media (min-width:2000px){
  :root{--panel-w:330px;--fs:13px;--fs-sm:12px}
}