/* ==========================================================================
   movil.css — el constructor como app nativa en el telefono y la tableta.

   Pedido del dueno: «en un desktop se comporta como desktop, pero en
   dispositivos moviles debe comportarse y verse como un app nativa, no
   simplemente una pagina encogida».

   La CAUSA de que se sintiera «pagina web»: la hoja de escritorio solo cambiaba
   de sitio los paneles al estrechar la ventana; la capa de «app» (zona segura,
   rebote de pagina, seleccion de texto, resaltado del toque, hojas que se
   arrastran, boton Atras, barra de una sola fila) no existia. Esta hoja es esa
   capa. Va DESPUES de constructor.css y solo actua en dos casos:

     - (pointer: coarse)    -> el aparato se maneja con el dedo (cualquier ancho).
     - (max-width: 900px)   -> la distribucion de telefono / tableta vertical,
                               la misma que ya usa constructor.css.

   Un escritorio con raton (puntero fino, mas de 900 px) NO entra en ninguna:
   se ve y se comporta exactamente como antes. Cada bloque dice a cual de los
   dos pertenece. Las animaciones usan los tokens --dur-*, que valen 0 con
   prefers-reduced-motion (design/tokens.css).
   ========================================================================== */

/* ------------------------------------------------ tactil: comportamiento --- */

@media (pointer: coarse) {
  html {
    /* El dedo no debe ver el azul del navegador al tocar ni esperar al
       doble toque: `manipulation` quita el zoom por doble toque y el retardo
       de 300 ms y deja el desplazamiento y el pellizco al que los pida (el
       lienzo 3D, con su `touch-action: none`). */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Sin rebote ni «tirar para refrescar» de la pagina: solo se desplazan los
       paneles de dentro. */
    overscroll-behavior: none;
  }
  body {
    overscroll-behavior: none;
    /* Una app no deja seleccionar la interfaz ni abre el menu de «copiar» al
       mantener pulsado: ese gesto es de la app (el toque largo de la pieza). */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* Lo que SI se escribe o se copia sigue siendo seleccionable. */
  :is(input, textarea, [contenteditable="true"], .inspector__ids, .seleccionable) {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
  #vista { -webkit-touch-callout: none; }

  /* iOS hace zoom a la pagina al enfocar un campo con menos de 16 px. */
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    font-size: 16px;
  }

  /* Pulsar se nota: un escalon de escala y de opacidad, no un estilo de raton.
     (Los :hover del escritorio se quedan pegados al soltar el dedo; el :active
     es el que habla aqui.) */
  :is(button, .btn, a.barra__volver, [role="tab"], summary, .pieza, .arranque__opcion):not(:disabled) {
    transition:
      transform var(--dur-1) var(--ease-standard),
      opacity var(--dur-1) var(--ease-standard),
      background-color var(--dur-1) var(--ease-standard),
      color var(--dur-1) var(--ease-standard);
  }
  :is(button, .btn, a.barra__volver, [role="tab"], summary, .pieza, .arranque__opcion):not(:disabled):active {
    transform: scale(0.96);
    opacity: 0.72;
  }
  .riel__btn:active {
    transform: none;
    opacity: 1;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
  }
  /* El cuerpo de las hojas lleva su propio desplazamiento y no encadena. */
  :is(.cajon__caja, .hoja__cuerpo, .inspector__cuerpo, .dialogo__caja, .inicio__caja, .arranque__caja, .menu) {
    overscroll-behavior: contain;
  }
  /* En el telefono no hay teclado fisico: la lista de atajos de teclado no es
     una herramienta. Sigue en «Mas opciones». */
  @media (hover: none) { #btn-atajos-riel { display: none; } }
}

/* ------------------------------------- telefono y tableta vertical (<=900) --- */

@media (max-width: 900px) {
  :root {
    /* La barra de pestanas de abajo y su zona segura (el gesto de inicio de
       iPhone). Las 60 px literales de constructor.css leen esta variable. */
    --riel-h: calc(56px + env(safe-area-inset-bottom, 0px));
    --barra-h: calc(52px + env(safe-area-inset-top, 0px));
    /* La tira que asoma de la hoja del inspector cerrada (asa + pestanas). */
    --hoja-peek: 76px;
    --hoja-h: var(--hoja-peek);
    --radio-hoja: 14px;
  }

  /* LA CARCASA DE LA APP: una pantalla fija. `position: fixed` con `inset: 0`
     impide el rebote de la pagina en iOS (overscroll-behavior no lo cubre en
     todas las versiones) y el alto sigue a la ventana visible. */
  html { height: 100%; }
  body {
    position: fixed;
    inset: 0;
    height: auto;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background: var(--surface);
  }

  /* ------------------------------------------------ barra de arriba --- */
  .barra {
    height: auto;
    /* Literal y no --barra-h: shell.js mide la barra con esa variable a cero. */
    min-height: calc(52px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
    background: var(--surface);
  }

  /* ---------------------------------------- barra de pestanas (abajo) --- */
  .riel {
    height: var(--riel-h);
    padding: 0 var(--space-1) env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    overflow: hidden;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .riel__btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    justify-content: center;
    gap: 3px;
    padding: 0 2px;
    font-size: 11px;
    border-radius: var(--radius-control);
  }
  .riel__btn .ico { width: 24px; height: 24px; }
  /* La marca del modo encendido: la raya de arriba, como una pestana nativa. */
  .riel__btn--activo::before {
    left: 22%;
    right: 22%;
    top: 0;
    width: auto;
    height: 3px;
  }

  /* ---------------------------------------- controles sobre el lienzo --- */
  /* Subian pegados al borde de la barra y la tira de la hoja los tapaba
     (medido a 375x812: el zoom quedaba medio escondido). Ahora siguen la
     parte de arriba de la hoja, que `movil.js` anota en --hoja-h. */
  .zoom {
    bottom: calc(var(--riel-h) + var(--hoja-h) + 12px);
    right: var(--space-2);
    z-index: 25;
  }
  .cubo {
    bottom: calc(var(--riel-h) + var(--hoja-h) + 76px);
    right: var(--space-2);
  }
  .vistas { bottom: calc(var(--riel-h) + var(--hoja-h) + 12px); }
  /* La leyenda de anclajes: una sola fila que se desliza, no cuatro renglones
     que se comen la cuarta parte del lienzo. */
  .leyenda-lienzo {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    pointer-events: auto;
    touch-action: pan-x;
  }
  .leyenda-lienzo::-webkit-scrollbar { display: none; }
  /* El aviso del telefono era una pastilla (radio 999): las esquinas de app son
     las de los controles. */
  .pie .estado #hud-aviso { border-radius: var(--radius-md); }
  .pie { bottom: calc(var(--riel-h) + var(--hoja-h) + 8px); }

  /* ------------------------------------------------------- las hojas --- */

  /* El asa del inspector: un agarre como el de una hoja nativa, sin la palabra
     «Subir» ni el chevron. El boton conserva su nombre accesible (el texto se
     queda para el lector de pantalla). */
  .inspector__asa {
    min-height: 28px;
    padding: 0;
    touch-action: none;
    cursor: grab;
  }
  .inspector__asa-barra { width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); opacity: 0.55; }
  .inspector__asa-texto,
  .inspector__asa-flecha {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .inspector__pestanas { touch-action: none; }
  .inspector {
    border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
    transition: height var(--dur-3) var(--ease-enter);
    /* Deja animar de `auto` (la tira) a la altura abierta. */
    interpolate-size: allow-keywords;
  }
  .inspector.arrastrando { transition: none; }
  /* Tercer punto de parada: la hoja casi a pantalla completa. */
  .inspector.abierto.alto {
    height: calc(100dvh - var(--barra-h) - var(--riel-h) - 8px);
    max-height: none;
  }

  /* Un agarre en cada hoja que se arrastra (lo pone movil.js). */
  .agarre {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: 22px;
    touch-action: none;
    cursor: grab;
  }
  .agarre::before {
    content: "";
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-strong);
    opacity: 0.55;
  }

  /* ====================================================================
     MODALES Y MENUS COMO EN UNA APP, NO COMO UNA CAJA DE ESCRITORIO ENCOGIDA.
     Queja del dueno: «los modales y menus en la version movil no se ven como de
     app movil: los estas dejando igual a la version desktop». La CAUSA: el
     escritorio resuelve un modal con una caja CENTRADA, con su sombra y un boton
     «Cerrar» de texto, y un menu con un desplegable colgado del boton que lo
     abrio; en el telefono eso solo se encogia. En una app nativa un modal es una
     HOJA que sube desde abajo (ancho completo, esquinas de arriba redondeadas,
     agarre, titulo grande, velo oscuro, zona segura) y un menu es una HOJA DE
     ACCIONES (filas de 52 px y una fila «Cancelar»).
     ==================================================================== */

  /* El velo y la hoja. Los velos empiezan DEBAJO de la barra (como ya hacian
     «Tus modelos» y «Como empezar»): el logo de Villacampa se ve entero y sin
     oscurecer con cualquier cosa abierta. */
  :root { --velo-movil: color-mix(in srgb, var(--text) 42%, transparent); }
  .cajon,
  .hoja,
  .dialogo,
  .inicio,
  .arranque,
  .tut-indice,
  .atajos-dialogo {
    align-items: flex-end;
    padding: 0;
    /* Recorta la hoja mientras sube: sale desde detras de la barra de pestanas,
       no por encima de ella. */
    overflow: hidden;
    background: var(--velo-movil);
    animation: velo-entra var(--dur-3) var(--ease-standard);
  }
  .hoja,
  .dialogo,
  .tut-indice,
  .atajos-dialogo,
  .inicio,
  .arranque { top: var(--barra-h); bottom: var(--riel-h); }

  .cajon__caja,
  .hoja__caja,
  .dialogo__caja,
  .dialogo__caja--texto,
  .dialogo__caja--buscador,
  .inicio__caja,
  .arranque__caja,
  .tut-indice__caja,
  .atajos-dialogo__caja {
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
    box-shadow: 0 -10px 40px -8px color-mix(in srgb, var(--text) 30%, transparent);
    animation: hoja-sube var(--dur-4) var(--ease-enter);
    transition: transform var(--dur-3) var(--ease-enter);
  }
  /* Las hojas de contenido corto se ajustan a lo que llevan (con tope); la
     zona segura de abajo es relleno propio. */
  .hoja__caja,
  .dialogo__caja,
  .dialogo__caja--texto,
  .dialogo__caja--buscador,
  .inicio__caja,
  .arranque__caja,
  .tut-indice__caja,
  .atajos-dialogo__caja {
    height: auto;
    max-height: calc(100dvh - var(--barra-h) - var(--riel-h) - 8px);
    padding: 0 var(--space-4) var(--space-4);
  }
  .hoja__caja { height: 88%; max-height: none; padding: 0; }
  .hoja__caja > .hoja__cabecera { padding: 0 var(--space-4) var(--space-2); }
  .hoja__cuerpo { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cajon__caja.arrastrando,
  .hoja__caja.arrastrando,
  .dialogo__caja.arrastrando,
  .inicio__caja.arrastrando,
  .arranque__caja.arrastrando,
  .tut-indice__caja.arrastrando { transition: none; animation: none; }

  /* El agarre (la pone movil.js; en los atajos, que los crea otro modulo, es
     una raya pintada). */
  .atajos-dialogo__caja::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: 40px;
    height: 5px;
    margin: 8px 0 0;
    border-radius: 3px;
    background: var(--border-strong);
    opacity: 0.55;
  }
  .atajos-dialogo__caja { gap: var(--space-3); padding-top: 0; }

  /* LA BIBLIOTECA: dos paradas (media y alta). */
  .cajon__caja {
    height: 58%;
    transition: height var(--dur-3) var(--ease-enter), transform var(--dur-3) var(--ease-enter);
  }
  .cajon__caja[data-detente="alto"] { height: 100%; }
  .cajon__caja.arrastrando { transition: none; animation: none; }

  /* TITULO GRANDE, como una pantalla de iOS/Material: 22 px en negrita. */
  .cajon__cabecera h2,
  .hoja__cabecera h2,
  .dialogo__caja > h2,
  .inicio__cabecera h2,
  .arranque__cabecera h2,
  .tut-indice__titulo,
  .atajos-dialogo__titulo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    touch-action: none;
  }
  .dialogo__caja > h2 { margin: var(--space-1) 0 var(--space-3); }
  .cajon__cabecera,
  .hoja__cabecera,
  .inicio__cabecera,
  .arranque__cabecera,
  .tut-indice__cabecera { touch-action: none; }
  .cajon__cabecera { padding: 0 var(--space-2) var(--space-2) var(--space-4); }

  /* El boton de cerrar: una X sola (sin circulo relleno), con un blanco tactil
     de 44 px. */
  .cajon__cerrar,
  .hoja__cerrar,
  .inicio__cerrar,
  #tut-indice-cerrar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-muted);
  }

  /* BOTONES DE LOS DIALOGOS: ancho completo, de 48 px, uno al lado del otro
     (o apilados si es uno solo). Nada de un «Cerrar» chico pegado a la derecha. */
  .dialogo__pie,
  .inicio__pie,
  .arranque__pie,
  .tut-indice__pie {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .dialogo__pie .btn,
  .inicio__pie .btn,
  .arranque__pie .btn,
  .tut-indice__pie .btn {
    min-height: 48px;
    justify-content: center;
    font-size: 16px;
  }
  .inicio__pie,
  .arranque__pie,
  .tut-indice__pie { grid-auto-flow: row; }
  .dialogo__pie { flex-direction: unset; }
  .inicio__pie .btn--primario { order: -1; }
  .inicio__lista .modelo,
  .arranque__opcion,
  .dialogo__lista li > button { min-height: 52px; }
  .tut-indice__fila { min-height: 52px; }

  /* «TUS MODELOS» ES UNA PANTALLA, no una hoja: como la lista de Archivos o de
     Notas de iOS. Ocupa todo entre la barra de arriba y la de pestanas (que se
     queda a la vista), con UN solo desplazamiento (nada de listas dentro de
     listas), el titulo grande a la izquierda y las acciones arriba a la derecha.
     Cada modelo es una FILA (icono, nombre, «hoy 19:14 · 96 piezas», flecha) en
     un grupo con esquinas de 8 px y rayas finas entre filas, no una tarjeta con
     marco. Sin boton enorme de «Ir al editor»: tocar un modelo o la X lleva al
     editor. */
  .inicio {
    align-items: stretch;
    background: var(--bg);
    animation: pantalla-entra var(--dur-4) var(--ease-enter);
  }
  .inicio__caja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-auto-rows: max-content;
    align-content: start;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: var(--space-1) var(--space-4) var(--space-6);
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: none;
  }
  .inicio__caja > .agarre { display: none; }
  .inicio__cabecera,
  .inicio__pie { display: contents; }
  /* El titulo grande va en SU fila, debajo de las acciones, como en iOS: en
     la misma fila, a 375 px, «Tus modelos» (28 px, sin partir) no cabia junto
     a «+ Modelo nuevo» y la X, y el «+» se montaba encima de la «s». */
  #inicio-titulo {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    margin: 0 0 var(--space-2);
    overflow-wrap: anywhere;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  #btn-inicio-nuevo {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-height: 44px;
    padding: 0 var(--space-1);
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    order: 0;
  }
  #btn-inicio-nuevo::before { content: "+\00a0"; font-size: 20px; line-height: 1; }
  #btn-cerrar-inicio { grid-column: 3; grid-row: 1; align-self: center; margin-right: calc(-1 * var(--space-2)); }
  #btn-inicio-cerrar { display: none; }
  .inicio__pista {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-3);
    font-size: 14px;
    color: var(--text-muted);
  }
  .inicio__pista--ejemplos {
    margin: var(--space-6) 0 var(--space-2) var(--space-1);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .inicio__lista {
    grid-column: 1 / -1;
    display: block;
    overflow: hidden;
    padding: 0;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
  }
  .inicio__lista:empty { display: none; }
  .inicio__lista > li { position: relative; }
  /* La raya fina empieza donde empieza el texto, como en las listas del sistema. */
  .inicio__lista > li + li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 64px;
    right: 0;
    height: 1px;
    background: var(--border);
  }
  .inicio__lista .modelo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    grid-template-areas: "ico nom chev" "ico dat chev";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 2px;
    min-height: 64px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .inicio__lista .modelo:active { background: var(--surface-2); }
  .inicio__lista .modelo::before {
    content: "";
    grid-area: ico;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-control);
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230460a9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='11' rx='2'/%3E%3Cpath d='M8 7.5v-2h3v2M13 7.5v-2h3v2'/%3E%3C/svg%3E") center / 24px no-repeat;
  }
  .inicio__lista .modelo::after {
    content: "";
    grid-area: chev;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353677f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  }
  .inicio__lista .modelo__nombre {
    grid-area: nom;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
  }
  .inicio__lista .modelo__datos {
    grid-area: dat;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
  /* Los ejemplos explican lo que son: hasta dos lineas de descripcion. */
  .inicio__lista--ejemplos .modelo__datos {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
  .inicio__lista--ejemplos .modelo { border-style: solid; }

  /* LISTAS COMO GRUPOS DE FILAS, no como tarjetas con marco: un contenedor con
     esquinas de 8 px y rayas finas entre filas (igual que «Tus modelos»), y UN
     solo desplazamiento: el de la hoja, no el de cada lista de dentro. */
  .dialogo__caja,
  .arranque__caja { overflow-y: auto; overscroll-behavior: contain; }
  .dialogo__lista {
    display: block;
    overflow: visible;
    padding: 0;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
  }
  .dialogo__lista:empty { display: none; }
  /* Los botones de abajo se quedan pegados al fondo de la hoja aunque la lista scrollee. */
  .dialogo__pie {
    position: sticky;
    bottom: calc(-1 * var(--space-4));
    margin-bottom: calc(-1 * var(--space-4));
    padding: var(--space-3) 0 var(--space-4);
    background: var(--surface);
  }
  .dialogo__lista li { gap: 0; }
  .dialogo__lista li + li { border-top: 1px solid var(--border); }
  .dialogo__lista li > button {
    min-height: 56px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
  }
  .dialogo__lista li > button + button { width: 52px; min-height: 56px; border-left: 1px solid var(--border); }
  .dialogo__lista li > button:active { background: var(--surface-2); }

  .arranque__lista {
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    overflow: hidden;
  }
  .arranque__lista > li + li { border-top: 1px solid var(--border); }
  .arranque__opcion {
    border: 0;
    border-radius: 0;
    min-height: 64px;
    background: transparent;
  }
  .arranque__opcion:active { background: var(--surface-2); }
  .arranque__opcion--destacada { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

  .biblio__lista {
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    overflow: hidden;
  }
  .biblio__pieza {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .biblio__lista > li + li { border-top: 1px solid var(--border); }
  .biblio__pieza:hover { border: 0; }

  /* El aviso del tutorial (la oferta de la primera vez): una hoja de abajo, con
     velo, no una tarjeta flotante. */
  .tut-aviso {
    left: 0;
    right: 0;
    bottom: var(--riel-h);
    width: auto;
    max-height: calc(100dvh - var(--barra-h) - var(--riel-h) - 8px);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 0;
    border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
    box-shadow: 0 -10px 40px -8px color-mix(in srgb, var(--text) 30%, transparent);
    animation: hoja-sube-corta var(--dur-4) var(--ease-enter);
    z-index: 111;
  }
  .tut-aviso::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--border-strong);
    opacity: 0.55;
  }
  .tut-aviso .tut__cerrar { top: 10px; right: 6px; width: 44px; height: 44px; }
  .tut-aviso .btn { min-height: 48px; }
  /* El velo del aviso y de los menus: un pseudo-elemento del cuerpo, por encima
     del lienzo y la barra de pestanas y por debajo de la hoja. */
  body:has(#tut-aviso:not([hidden]))::before,
  body:has(#menu-mas:not([hidden]))::before,
  body:has(#menu-paso:not([hidden]))::before,
  body:has(#menu-pieza:not([hidden]))::before,
  body:has(.barra--perfil-encima)::before {
    content: "";
    position: fixed;
    inset: var(--barra-h) 0 var(--riel-h) 0;
    z-index: 105;
    background: var(--velo-movil);
    animation: velo-entra var(--dur-3) var(--ease-standard);
  }
  body:has(.barra--perfil-encima)::before { z-index: 125; }

  /* El manual (pantalla completa con su propia cabecera y su logo) y la hoja del
     perfil (otro componente) tambien terminan encima de la barra de pestanas. */
  .manual { bottom: var(--riel-h); }
  body .perfil__velo { top: var(--barra-h); bottom: var(--riel-h); overflow: hidden; }

  /* La guia del tutorial: su velo con el hueco tambien termina encima de la
     barra de pestanas (las lecciones senalan sus botones y se pueden pulsar). */
  .tut { bottom: var(--riel-h); }
  /* La tarjeta de la leccion no puede ser mas alta que el espacio entre las dos
     barras: se desplaza por dentro en vez de montarse sobre la de abajo. */
  .tut__tarjeta {
    max-height: calc(100dvh - var(--barra-h) - var(--riel-h) - var(--space-4));
    overflow-y: auto;
  }

  /* EL PANEL DE SIMULAR: una hoja pegada sobre la barra de pestanas, no una
     tarjeta de 300 px flotando a la izquierda del lienzo. */
  .sim {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--riel-h);
    width: auto;
    max-height: min(52dvh, calc(100dvh - var(--barra-h) - var(--riel-h) - 8px));
    padding: var(--space-4) var(--space-4) var(--space-4);
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
    box-shadow: 0 -10px 40px -8px color-mix(in srgb, var(--text) 24%, transparent);
    z-index: 38;
    animation: hoja-sube-corta var(--dur-4) var(--ease-enter);
  }
  /* La barra de pestanas se queda visible tambien simulando (constructor.css la
     esconde con el resto de las columnas): el panel va encima de ella. */
  body.simulando .app > .riel { visibility: visible; pointer-events: auto; opacity: 1; }
  .sim::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    margin: -8px auto 12px;
    border-radius: 3px;
    background: var(--border-strong);
    opacity: 0.55;
  }
  .sim__titulo { font-size: 18px; }
  .sim .btn,
  .sim__btn { min-height: 44px; }

  /* LOS MENUS SON HOJAS DE ACCIONES: ancho completo pegado abajo, filas de 52
     px, y una fila «Cancelar» (la pone movil.js). Las coordenadas de
     «menu-pieza» las escribe main.js en linea (a donde se toco): aqui no
     valen, de ahi el !important. */
  .menu,
  .menu--paso,
  .menu-pieza {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: var(--riel-h);
    width: auto;
    min-width: 0;
    max-height: min(78dvh, calc(100dvh - var(--barra-h) - var(--riel-h) - 8px));
    padding: 0 var(--space-2) var(--space-2);
    border: 0;
    border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
    box-shadow: 0 -10px 40px -8px color-mix(in srgb, var(--text) 30%, transparent);
    gap: 0;
    z-index: 110;
    animation: hoja-sube-corta var(--dur-4) var(--ease-enter);
    transform-origin: bottom center;
  }
  .menu::before,
  .menu--paso::before,
  .menu-pieza::before {
    content: "";
    display: block;
    justify-self: center;
    width: 40px;
    height: 5px;
    margin: 8px 0 8px;
    border-radius: 3px;
    background: var(--border-strong);
    opacity: 0.55;
  }
  .menu button,
  .menu--paso button,
  .menu-pieza button {
    min-height: 48px;
    padding: 0 var(--space-4);
    font-size: 17px;
    border-radius: var(--radius-md);
    text-align: left;
  }
  .menu hr { margin: 4px var(--space-2); }
  .menu .menu__cancelar,
  .menu--paso .menu__cancelar,
  .menu-pieza .menu__cancelar {
    /* Pegada al fondo de la hoja aunque la lista scrollee: «Cancelar» siempre se ve. */
    position: sticky;
    bottom: 0;
    margin-top: var(--space-2);
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: var(--primary);
    background: var(--surface-2);
    box-shadow: 0 0 0 var(--space-1) var(--surface);
  }
  /* El menu del paso vive dentro del pie del lienzo (una capa con su propio
     z-index): mientras esta abierto el pie sube por encima de las hojas. */
  .lienzo__pie:has(#menu-paso:not([hidden])) { z-index: 120; }
  .menu-pieza .peligro { color: var(--danger); }

  /* El menu del perfil (otro componente): tambien hoja de acciones. */
  /* perfil-menu.js escribe `top` y `max-height` EN LINEA (cuelga el menu de la
     barra): en la hoja de acciones no valen, de ahi el !important. */
  body .perfil__menu {
    position: fixed;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: var(--riel-h);
    width: auto;
    max-width: none;
    max-height: min(82dvh, calc(100dvh - var(--barra-h) - var(--riel-h) - 8px)) !important;
    padding-bottom: var(--space-2, 8px);
    border: 0;
    border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
    box-shadow: 0 -10px 40px -8px color-mix(in srgb, var(--text) 30%, transparent);
    animation: hoja-sube-corta var(--dur-4) var(--ease-enter);
    transform-origin: bottom center;
  }
  body .perfil__menu::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    margin: 8px auto 4px;
    border-radius: 3px;
    background: var(--border-strong);
    opacity: 0.55;
  }
  body .perfil__item { min-height: 52px; font-size: 17px; }

  /* LOS CAMPOS DE LAS HOJAS: de 48 px, a todo el ancho y a 16 px (iOS no hace
     zoom), con la casilla grande y su fila entera como blanco tactil. */
  .hoja .campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
  .hoja .campo__linea { display: flex; align-items: center; gap: var(--space-2); }
  .hoja .campo__linea input { flex: 1 1 0; width: auto; min-width: 0; }
  .hoja :is(input[type="number"], input[type="text"], select) {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-3);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
  }
  .hoja .campo--casilla { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; font-size: 16px; font-weight: 500; }
  .hoja input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; accent-color: var(--primary); }
  .hoja .btn { min-height: 48px; font-size: 16px; }

  .atajos-dialogo__pie { display: grid; }
  .atajos-dialogo__ok { width: 100%; min-height: 48px; font-size: 16px; justify-content: center; }
  .atajos-dialogo__campo { font-size: 16px; }

  @keyframes hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
  /* Para lo que se mueve solo (menus, aviso, panel): un deslizamiento corto con
     fundido, que no pasa por encima de la barra de pestanas. */
  @keyframes hoja-sube-corta { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
}

/* ------------------------------------------- la barra de app (<=900) --- */

@media (max-width: 900px) {
  /* EL LOGO DE VILLACAMPA, ENTERO, SIEMPRE. Regla del dueno: «el logo debe
     estar siempre visible». Antes, hasta 900 px el <picture> lo cambiaba por el
     escudo y, al apretar la barra, el nombre del modelo se comia el sitio: la
     marca desaparecia. Ahora la marca manda y lo demas se acomoda a ella: el
     nombre del modelo ocupa su propia linea en el telefono y se corta con
     puntos suspensivos en la tableta. Los botones son solo icono. */
  .barra { gap: 2px; padding-left: 8px; padding-right: 4px; align-content: center; }
  .barra__titulo {
    display: block;
    order: 0;
    padding: 0 var(--space-2) 0 0;
    border-right: 0;
  }
  .barra__marca { min-height: 44px; }
  .barra__marca-logo { height: 26px; }
  .barra__volver { order: 1; }
  .barra__modelo { order: 2; flex: 1 1 0; min-width: 0; }
  .barra__acciones { order: 3; gap: 0; }
  .barra__sesion { order: 4; }
  .barra__sep { display: none; }
  .barra__acciones .btn span { display: none; }
  .barra__acciones .btn { padding: 0; width: 44px; justify-content: center; }
  .barra__modelo input {
    font-size: 17px;
    font-weight: 600;
    padding: 0 var(--space-2);
    border-color: transparent;
    background: transparent;
  }
  .barra__modelo input:hover { border-color: transparent; }
  .barra__modelo input:focus { border-color: var(--focus); background: var(--surface-2); }
  #btn-exportar { background: transparent; color: var(--primary); }
  #btn-exportar .ico { color: var(--primary); }
}

@media (max-width: 520px) {
  /* Dos filas, la de arriba para la marca y las acciones y la de abajo para el
     nombre del modelo: 44 + 40. La marca (101 px) y cinco botones caben hasta
     320 px de ancho; el boton de volver al inventario se va (esa puerta vive en
     el menu del perfil) y Rehacer baja a «Mas opciones». */
  .barra {
    flex-wrap: wrap;
    min-height: calc(84px + env(safe-area-inset-top, 0px));
  }
  .barra__volver { display: none; }
  #btn-rehacer { display: none; }
  .barra__titulo { margin-right: auto; }
  .barra__acciones { order: 1; }
  .barra__sesion { order: 2; }
  .barra__modelo {
    order: 5;
    flex: 1 1 100%;
    height: 40px;
    margin-left: -4px;
  }
  .barra__modelo input { height: 40px; width: 100%; }
}

@media (max-width: 360px) {
  .barra { padding-left: 6px; padding-right: 2px; }
  .barra__marca-logo { height: 24px; }
  .barra__acciones .btn { width: 40px; }
  /* A 320 la marca y cinco botones ya no caben en la fila de arriba: Exportar
     baja a «Mas opciones» (shell.js enciende su entrada al ver el boton sin
     caja) y la marca no se toca. */
  #btn-exportar { display: none; }
}

/* La fila «Cancelar» de las hojas de acciones solo existe en el telefono: movil.js
   la agrega siempre y el escritorio no la ve. */
@media (min-width: 901px) {
  .menu__cancelar { display: none !important; }
}