/* ============================================================================================================================
   The shell on a computer (round 16 R-C «Shell», cascarón — Jorge, 2026-10-14: «¿Se tiene una versión para escritorio…?»).
   From 900 px, for everyone, with the same phone-and-code login: the tab bar becomes a rail on the left with the tabs, the
   content keeps to 760 px, and a screen that gives Marco a `contexto` gets a context column beside it. Below 900 px nothing
   here applies: the phone is exactly what it was.
   Scoped to the app's own frame (#pantalla, components/shell/Marco.tsx), so /kit's galleries and the RH console (.rh-marco)
   keep their own layout. This file is the layout; the rail's look is design's to replace with its kit rail piece.
   ============================================================================================================================ */
/* A screen's context column is drawn only on a computer (below). */
#pantalla > .eq-app > .eq-contexto { display: none; }

@media (min-width: 900px) {
  #pantalla { --ancho-riel: 232px; --ancho-contenido: 760px; --ancho-contexto: 300px; }

  /* 1 · The rail: the same tabs (components/shell/Pestanas.tsx), standing on the left, full height. The sliding pill and the
     shrink-on-scroll of the phone bar (equipo-v2.js) have no meaning here: the current tab carries the wine fill itself. */
  :root[data-kit="v2"] #pantalla .eq-pestanas {
    top: 0; right: auto; bottom: 0; left: 0; width: var(--ancho-riel);
    display: flex; flex-direction: column; gap: 4px;
    padding: calc(var(--arriba, env(safe-area-inset-top, 0px)) + 28px) 14px 24px;
    border: 0; border-right: 1px solid var(--linea); border-radius: 0;
    background: var(--crema); box-shadow: none; transform: none; transition: none;
  }
  :root[data-kit="v2"] #pantalla .eq-pestanas :is(button, a) {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 8px 14px;
    border-radius: 14px; font-size: 16px; color: var(--gris-medio);
  }
  :root[data-kit="v2"] #pantalla .eq-pestanas :is(button, a):hover { color: var(--vino); background: var(--papel); }
  :root[data-kit="v2"] #pantalla .eq-pestanas :is(button, a)[aria-current] { color: var(--crema); background: var(--vino); }
  :root[data-kit="v2"] #pantalla .eq-pestanas .v2-indicador { display: none; }
  :root[data-kit="v2"] #pantalla .eq-pestanas .etq { opacity: 1; transform: none; }

  /* 2 · Room for the rail; the content keeps to 760 px, centred in what is left. No bar at the bottom, so no room for one. */
  #pantalla > .eq-app:has(> .eq-pestanas) { padding-left: var(--ancho-riel); }
  #pantalla > .eq-app > .eq-lienzo {
    width: 100%; max-width: calc(var(--ancho-contenido) + 2 * var(--orilla)); margin-inline: auto;
    padding-bottom: calc(var(--abajo, env(safe-area-inset-bottom, 0px)) + 64px);
  }
  #pantalla > .eq-app:has(> .v2-pide-avisos) > .eq-lienzo { padding-bottom: calc(var(--alto-pide-avisos, 160px) + 48px); }
  /* The door (no tabs yet): one short form, a narrower column. */
  #pantalla > .eq-app[data-puerta] > .eq-lienzo { max-width: 520px; }

  /* 3 · The context column, only when a screen gives one (Marco's `contexto`); it stays in view while the content scrolls. */
  #pantalla > .eq-app:has(> .eq-contexto) {
    display: grid; align-items: start; justify-content: center; column-gap: 40px;
    grid-template-columns: minmax(0, calc(var(--ancho-contenido) + 2 * var(--orilla))) var(--ancho-contexto);
  }
  /* a gutter on both sides when the two columns take the whole width (≤ 1440): the content never touches the rail, the column never the edge */
  #pantalla > .eq-app:has(> .eq-contexto) { padding-right: 24px; }
  #pantalla > .eq-app:has(> .eq-pestanas):has(> .eq-contexto) { padding-left: calc(var(--ancho-riel) + 24px); }
  #pantalla > .eq-app:has(> .eq-contexto) > .eq-lienzo { grid-column: 1; max-width: none; margin-inline: 0; }
  #pantalla > .eq-app > .eq-contexto {
    grid-column: 2; grid-row: 1; position: sticky; top: 0; display: grid; gap: 14px;
    min-width: 0; grid-template-columns: minmax(0, 1fr); justify-items: center;
    padding: calc(var(--arriba, env(safe-area-inset-top, 0px)) + 24px) 0 32px;
  }
  /* design's phone preview (D91, 414 px: the real screen at 390) is drawn whole in the 300 px column — scaled, never cut or re-flowed */
  #pantalla > .eq-app > .eq-contexto .vista-telefono { zoom: 0.7246; } /* = --ancho-contexto 300 / 414 (a plain number: older Safari has no length ÷ length) */

  /* 4 · What floats at the bottom on the phone (the push card, «Ver como», help) sits at the bottom of the content. */
  #pantalla > .eq-app :is(.v2-pide-avisos, .v2-vercomo) {
    right: auto; bottom: 24px; width: min(560px, calc(100vw - var(--ancho-riel) - 48px));
    left: calc(var(--ancho-riel) + (100vw - var(--ancho-riel) - min(560px, calc(100vw - var(--ancho-riel) - 48px))) / 2);
  }
  #pantalla > .eq-app:not(:has(> .eq-pestanas)) :is(.v2-pide-avisos, .v2-vercomo) { left: 50%; transform: translateX(-50%); }
  #pantalla .eq-como { right: 24px; bottom: 24px; }

  /* 5 · A sheet (Marco's `hoja`) opens as a centred panel over the veil, not as a phone sheet from the bottom edge. */
  :root[data-kit="v2"] #pantalla ~ .v2-hoja {
    top: 50%; right: auto; bottom: auto; left: 50%; width: min(640px, calc(100vw - 48px)); max-height: min(86vh, 900px);
    border-radius: 24px; transform: translate(-50%, -50%); animation-name: v2-hoja-escritorio;
  }
  :root[data-kit="v2"] #pantalla ~ .v2-hoja::before { display: none; }
}
@keyframes v2-hoja-escritorio { from { opacity: 0; transform: translate(-50%, -46%); } }
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { :root[data-kit="v2"] #pantalla ~ .v2-hoja { animation: none; } }