/*
TYPOS — AA Arquitectura Anonima · (c) 2026 · Todos los derechos reservados.
Uso permitido segun LICENSE.txt. Prohibida la copia, la redistribucion y
las obras derivadas sin autorizacion escrita.
*/
/* TYPOS — la capa móvil.
   Aditiva: todo cuelga de .movil, que sólo existe por debajo de 760 px.
   Nada de acá puede afectar al instrumento de escritorio. */

@media (max-width:760px){

  body.movil{ -webkit-text-size-adjust:100%; }

  /* El dibujo se queda con toda la pantalla, menos la barra de abajo. */
  body.movil main{ grid-template-columns:minmax(0,1fr) !important; padding-bottom:58px; }
  body.movil .lamina{ grid-column:1 !important; }

  /* Un dibujo por vez. La lámina deja de ser una grilla de dos filas. */
  body.movil .lamina{ display:block !important; position:relative; }
  body.movil .lamina .draw{ display:none !important; position:absolute; inset:0; }
  body.movil.movVer-plan #wrapPlan,
  body.movil.movVer-axo  #wrapAxo,
  body.movil.movVer-sect #wrapSect{ display:block !important; border:0; }
  body.movil .lamina.hojaActiva #wrapHoja{ display:block !important; }

  /* Los paneles pasan a ser hojas que suben desde abajo. */
  body.movil .panel,
  body.movil .datos{
    display:block !important;
    position:fixed; left:0; right:0; bottom:58px; top:46px;
    z-index:40; background:var(--paper);
    border:0; border-top:1px solid var(--hair);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:14px 16px 28px;
    transform:translateY(102%); transition:transform .22s ease;
    box-shadow:0 -10px 30px rgba(0,0,0,.10);
  }
  body.movil.movHoja-panel .panel,
  body.movil.movHoja-datos .datos{ transform:translateY(0); }

  /* CONTROLES: media pantalla, no toda.
     Un control que tapa el dibujo obliga a mover a ciegas, cerrar, mirar,
     abrir de nuevo. Con la hoja ocupando la mitad de abajo, el dibujo se
     queda con la mitad de arriba y se ve cambiar mientras se arrastra el
     deslizador. DATOS sí sigue entero: ahí se lee, no se mueve nada. */
  body.movil .panel{ top:auto; height:52vh; }
  body.movil.movHoja-panel main{ padding-bottom:calc(52vh + 58px); }

  /* El nombre de la app no se repite adentro de la hoja: está en la barra de
     arriba y acá son cuarenta píxeles de media pantalla. */
  body.movil .panel>h1{ display:none; }

  /* Y adentro, más compacto: en media pantalla cada renglón cuenta. */
  body.movil .panel .grp>h3,
  body.movil .panel .plegable>h3{ padding:9px 0; }
  body.movil .panel .fila,
  body.movil .panel label{ margin-bottom:2px; }
  body.movil .panel input[type=range]{ height:26px; }

  /* Tamaño de dedo, no de puntero. */
  body.movil .panel,
  body.movil .datos{ font-size:14px; }
  body.movil input[type=range]{ height:30px; }
  body.movil select,
  body.movil input[type=number],
  body.movil input[type=text]{ min-height:40px; font-size:15px; }
  body.movil .panel button,
  body.movil .datos button{ min-height:38px; }
  body.movil .grp>h3,
  body.movil .plegable>h3{ padding:12px 0; font-size:12px; }

  /* Lo que necesita mouse o teclado no se ofrece: no funciona con el dedo.
     Los comandos del 3D son atajos —ORBITAR O, CAMINAR C, UBICAR CÁMARA U—
     y en un teléfono no hay tecla ni botón del medio: ocupan media pantalla
     para no servir. Los conmutadores de vista (Axo/Persp/Volumen/Cortado)
     SÍ se quedan: esos son decisiones de dibujo, no de puntero. */
  body.movil #panelHerr,
  body.movil .pestanas button[data-p="herramientas"],
  body.movil #plegarIzq,
  body.movil #plegarDer,
  body.movil #axoNav,
  body.movil #axoAyuda,
  body.movil .draw .pista{ display:none !important; }

  /* La barra de abajo: lo único siempre a la vista. */
  .movBarra{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:repeat(5,1fr);
    background:var(--paper); border-top:1px solid var(--ink);
  }
  .movBarra button{
    appearance:none; border:0; border-right:1px solid var(--hair);
    background:transparent; color:var(--mute);
    font:inherit; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
    padding:0 2px; height:58px; cursor:pointer;
  }
  .movBarra button:last-child{ border-right:0; }
  .movBarra button.on{ background:var(--ink); color:#fff; }

  /* El signo de "esto se agarra": dos flechas que cierran un globo.
     No se toca, se mira. Se va al primer contacto. */
  .movGirar{
    position:absolute; left:50%; bottom:13%; transform:translateX(-50%);
    color:var(--ink); opacity:.40; pointer-events:none; z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    transition:opacity .4s ease, transform .4s ease;
  }
  .movGirar b{
    font-weight:400; font-size:8.5px; letter-spacing:.13em; text-transform:uppercase;
    white-space:nowrap;
  }
  .movGirar.usado{ opacity:0; transform:translateX(-50%) scale(1.35); }

  .movCerrar{
    position:sticky; top:0; float:right; z-index:2;
    width:38px; height:38px; margin:-6px -6px 0 0;
    border:1px solid var(--hair); background:var(--paper); color:var(--ink);
    font-size:16px; line-height:1; cursor:pointer; border-radius:2px;
  }

  .movAviso{
    position:fixed; inset:auto 12px 70px 12px; z-index:70;
    background:var(--paper); color:var(--ink);
    border:1px solid var(--ink); padding:16px;
    box-shadow:0 10px 40px rgba(0,0,0,.18);
    font-size:13px; line-height:1.5;
  }
  .movAviso p{ margin:0 0 9px; }
  .movAviso button{
    width:100%; min-height:42px; margin-top:4px;
    border:0; background:var(--ink); color:#fff;
    font:inherit; font-size:11px; letter-spacing:.1em; cursor:pointer;
  }

  /* La cabecera y el pie ceden: en 375 px no entra el texto largo. */
  body.movil #hdrRight,
  body.movil footer.corner span:first-child{ display:none; }
  body.movil .corner{ padding:8px 12px; font-size:9px; }
  body.movil footer.corner{ display:none; }
}

/* Por arriba de 760 px la capa móvil no existe, pase lo que pase. */
@media (min-width:761px){
  .movBarra,.movAviso,.movCerrar{ display:none !important; }
}