Marco del sistema · shell

Shell completo

Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.

La estructura de TODA pantalla de NUEVAUNO OS. Una app nueva sólo llena el contenido central; el resto lo pone el shell.

Vista · datos de ejemplo

Juanito SpA

ClienteActivo76.123.456-7

Datos

Razón social: Juanito Servicios SpA
Nombre de fantasía: Juanito SpA
Persona de contacto: Juan Soto
Correo: juan@juanito.example
Dirección: Av. Ejemplo 123, Talca
Giro

Guías del mes4emitidas

Por cobrar1,25millones

Kōdo sabe que estás en Juanito SpA

Anatomía

Riel izquierdo (56 px, opcional en escritorio)
Menú lateral blanco (256 px)
Cabecera blanca con miga y acciones
Pestañas del registro o sección (opcional)
Contenido sobre el fondo de puntos
Panel derecho de Kōdo (400 px, plegable)
Barra inferior de estado (28 px)

Sí

Mantén cabecera y menú blancos, contenido sobre puntos
Kōdo siempre a un clic (botón en la cabecera y Ctrl+J)
En teléfono: menú como panel deslizable y sin barra inferior

No abras otra pestaña del navegador para una app del sistema
No pongas un segundo menú dentro del contenido (doble marco)

HTML exacto

<div class="nu-shell">
  <nav class="nu-riel" aria-label="Accesos">
    <button type="button" class="nu-riel__item" aria-current="true" title="Inicio"><span class="nu-icono" data-icono="nuevauno_dashboard"></span></button>
    <button type="button" class="nu-riel__item" title="Buscar"><span class="nu-icono" data-icono="search"></span></button>
    <button type="button" class="nu-riel__item" title="Avisos"><span class="nu-icono" data-icono="notifications"></span></button>
    <button type="button" class="nu-riel__item" title="Aprobaciones"><span class="nu-icono" data-icono="approvals"></span></button>
    <button type="button" class="nu-riel__item" title="Ajustes"><span class="nu-icono" data-icono="general_settings"></span></button>
    <button type="button" class="nu-riel__item nu-riel__pie" title="Ana Pérez"><span class="nu-persona__cuadro" style="width:28px;height:28px;flex-basis:28px;font-size:13px">A</span></button>
  </nav>
  <aside class="nu-lateral" aria-label="Menú">
    <div class="nu-lateral__cabeza">
      <a class="nu-lateral__logo" href="/start">
        <img src="https://branding.nuevauno.com/logos/nuevauno-logo-light.anim.svg" alt="nuevauno" height="30">
      </a>
      <button type="button" class="nu-lateral__recoger" aria-label="Recoger el menú">
        <span class="nu-icono nu-icono--chico" data-icono="sidebar"></span>
      </button>
    </div>
    <button type="button" class="nu-lateral__buscar">
      <span class="nu-icono nu-icono--chico" data-icono="search"></span>
      <span class="nu-lateral__buscar-texto">Buscar</span>
      <span class="nu-lateral__teclas"><kbd>Ctrl</kbd><kbd>K</kbd></span>
    </button>
    <nav class="nu-lateral__lista">
      <div class="nu-menu__grupo">
        <div class="nu-menu__seccion">Principal</div>
        <a class="nu-menu__item" href="/start" data-activo="true">
          <span class="nu-icono" data-icono="nuevauno_dashboard"></span><span class="nu-menu__texto">Inicio</span>
        </a>
        <a class="nu-menu__item" href="/kodo">
          <span class="nu-menu__kodo"><img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="20" height="20"></span><span class="nu-menu__texto">Kōdo</span>
        </a>
        <a class="nu-menu__item" href="/contacts">
          <span class="nu-icono" data-icono="contacts"></span><span class="nu-menu__texto">Contactos</span>
        </a>
      </div>
      <div class="nu-menu__grupo">
        <div class="nu-menu__seccion">Tu negocio</div>
        <a class="nu-menu__item" href="/dispatch">
          <span class="nu-icono" data-icono="nuevauno_packing_lists"></span><span class="nu-menu__texto">Guías</span>
          <span class="nu-menu__flecha"><span class="nu-icono nu-icono--chico" data-icono="next"></span></span>
        </a>
        <a class="nu-menu__item" href="/invoices">
          <span class="nu-icono" data-icono="account"></span><span class="nu-menu__texto">Facturas</span>
          <span class="nu-menu__flecha"><span class="nu-icono nu-icono--chico" data-icono="next"></span></span>
        </a>
        <div class="nu-menu__app" data-abierto="true">
          <a class="nu-menu__item" href="/site" data-con-arbol="true">
            <span class="nu-icono" data-icono="nuevauno_website"></span><span class="nu-menu__texto">Sitio web</span>
          </a>
          <button type="button" class="nu-menu__abrir" aria-label="Cerrar Sitio web" aria-expanded="true">
            <span class="nu-icono nu-icono--chico" data-icono="next"></span>
          </button>
          <ul class="nu-menu__arbol">
            <li><a class="nu-menu__sub" href="/site" data-activo="true">Escritorio</a></li>
            <li class="nu-menu__subseccion">Contenido</li>
            <li><a class="nu-menu__sub" href="/site/pages">Páginas</a></li>
            <li><a class="nu-menu__sub" href="/site/media">Medios</a></li>
          </ul>
        </div>
        <a class="nu-menu__item" href="/apps">
          <span class="nu-icono" data-icono="grid"></span><span class="nu-menu__texto">Módulos instalados</span>
        </a>
      </div>
    </nav>
    <div class="nu-perfil">
      <a class="nu-menu__item" href="/settings">
        <span class="nu-icono" data-icono="general_settings"></span><span class="nu-menu__texto">Ajustes</span>
      </a>
      <button type="button" class="nu-persona">
        <span class="nu-persona__cuadro">A</span>
        <span class="nu-persona__datos">
          <span class="nu-persona__nombre">Ana Pérez</span>
          <span class="nu-persona__rol nu-etiqueta">Dueña · Ejemplo SpA</span>
        </span>
        <span class="nu-persona__mas">···</span>
      </button>
    </div>
  </aside>
  <div class="nu-shell__centro">
    <header class="nu-cabecera">
      <button type="button" class="nu-boton nu-boton--chico nu-cabecera__menu" data-nu-menu aria-label="Abrir el menú"><span class="nu-icono nu-icono--chico" data-icono="list"></span></button>
      <nav class="nu-miga" aria-label="Ubicación">
        <span class="nu-miga__empresa">
          <button type="button" class="nu-miga__org" aria-haspopup="menu" aria-expanded="false" aria-controls="empresas-shell" title="Cambiar de empresa">Ejemplo SpA</button>
          <span role="menu" aria-label="Empresas" class="nu-miga__menu" id="empresas-shell" hidden>
            <span class="nu-etiqueta nu-miga__menu-titulo">Grupo Ejemplo</span>
            <button type="button" role="menuitemradio" aria-checked="true" class="nu-miga__opcion"><span>Ejemplo SpA</span><span class="nu-miga__opcion-actual"></span></button>
            <button type="button" role="menuitemradio" aria-checked="false" class="nu-miga__opcion"><span>Ejemplo Servicios Ltda.</span></button>
          </span>
        </span>
        <span class="nu-miga__barra" aria-hidden="true">/</span>
        <span class="nu-miga__seccion" aria-current="page"><span class="nu-icono" data-icono="contacts"></span>Contactos</span>
      </nav>
      <div class="nu-cabecera__acciones">
        <button type="button" class="nu-boton-kodo" aria-pressed="true" title="Cerrar Kōdo (Ctrl+J)">
          <img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="14" height="14"><span class="nu-boton-kodo__texto">Kōdo</span>
        </button>
      </div>
    </header>
    <div class="nu-pestanas" role="tablist" aria-label="Juanito SpA">
      <button type="button" role="tab" class="nu-pestana" aria-selected="true">Ficha</button>
      <button type="button" role="tab" class="nu-pestana" aria-selected="false">Guías <span class="nu-pestana__cuenta">12</span></button>
      <button type="button" role="tab" class="nu-pestana" aria-selected="false">Facturas <span class="nu-pestana__cuenta">8</span></button>
      <button type="button" role="tab" class="nu-pestana" aria-selected="false">Actividad</button>
    </div>
    <main class="nu-shell__contenido nu-fondo">
      <div class="nu-pagina">
        <div class="nu-registro">
          <div class="nu-registro__cabeza">
            <span class="nu-registro__avatar">J</span>
            <div class="nu-registro__titulos">
              <h1 class="nu-registro__nombre">Juanito SpA</h1>
              <div class="nu-registro__sub"><span class="nu-chip">Cliente</span><span class="nu-estado nu-estado--en-linea">Activo</span><span>76.123.456-7</span></div>
            </div>
            <div class="nu-registro__acciones">
              <button type="button" class="nu-boton"><span class="nu-icono nu-icono--chico" data-icono="edit"></span>Editar</button>
              <span class="nu-desplegable">
                <button type="button" class="nu-boton" aria-haspopup="menu" aria-expanded="false" aria-controls="mas-juanito" aria-label="Más acciones"><span class="nu-icono nu-icono--chico" data-icono="more_options"></span></button>
                <span role="menu" class="nu-desplegable__menu nu-desplegable__menu--derecha" id="mas-juanito" hidden>
                  <button type="button" role="menuitem" class="nu-desplegable__opcion">Nueva guía</button>
                  <button type="button" role="menuitem" class="nu-desplegable__opcion">Nueva factura</button>
                  <span class="nu-desplegable__separador"></span>
                  <button type="button" role="menuitem" class="nu-desplegable__opcion nu-desplegable__opcion--peligro">Archivar</button>
                </span>
              </span>
            </div>
          </div>
          <div style="display:flex;flex-direction:column;gap:16px;min-width:0">
            <section class="nu-tarjeta">
              <div class="nu-tarjeta__cabeza"><span class="nu-etiqueta nu-etiqueta--bloque">Datos</span></div>
              <dl class="nu-campos nu-tarjeta__cuerpo">
                <div><dt>Razón social</dt><dd>Juanito Servicios SpA</dd></div>
                <div><dt>Nombre de fantasía</dt><dd>Juanito SpA</dd></div>
                <div><dt>Persona de contacto</dt><dd>Juan Soto</dd></div>
                <div><dt>Correo</dt><dd>juan@juanito.example</dd></div>
                <div><dt>Dirección</dt><dd>Av. Ejemplo 123, Talca</dd></div>
                <div><dt>Giro</dt><dd></dd></div>
              </dl>
            </section>
            <div class="nu-franja">
              <div class="nu-dato"><span class="nu-dato__etiqueta">Guías del mes</span><span class="nu-dato__valor"><span class="nu-dato__numero">4</span><span class="nu-dato__unidad">emitidas</span></span></div>
              <div class="nu-dato"><span class="nu-dato__etiqueta">Por cobrar</span><span class="nu-dato__valor"><span class="nu-dato__numero">1,25</span><span class="nu-dato__unidad">millones</span></span></div>
            </div>
          </div>
          <div class="nu-pedir-kodo">
            <div class="nu-kodo__encabezado"><img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="16" height="16"><span class="nu-etiqueta">Kōdo sabe que estás en Juanito SpA</span></div>
            <div class="nu-fichas">
              <button type="button" class="nu-ficha">Hazme una guía</button>
              <button type="button" class="nu-ficha">¿Qué me debe?</button>
              <button type="button" class="nu-ficha">Escríbele por el atraso</button>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
  <aside class="nu-panel-kodo" aria-label="Kōdo">
    <section class="nu-chat nu-chat--panel">
      <div class="nu-chat__cabeza">
        <img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="20" height="20">
        <div class="nu-chat__quien"><span class="nu-chat__nombre">Kōdo</span><span class="nu-etiqueta">Ejemplo SpA</span></div>
        <button type="button" class="nu-chat__cerrar" aria-label="Cerrar Kōdo"><span class="nu-icono nu-icono--chico" data-icono="close"></span></button>
      </div>
      <ol class="nu-chat__mensajes">
        <li class="nu-chat__fila nu-chat__fila--persona"><p class="nu-chat__texto">Hazme una guía con lo de siempre.</p></li>
        <li class="nu-chat__fila nu-chat__fila--kodo">
          <p class="nu-chat__herramienta">Leyó la ficha de Juanito SpA · 3 guías anteriores</p>
          <p class="nu-chat__texto nu-chat__texto--kodo">Preparé la guía GD-00064 para Juanito SpA con las 16 unidades de la última vez. ¿La emito?</p>
          <div class="nu-aprobacion" role="group" aria-label="Aprobar emitir la guía">
            <p class="nu-aprobacion__accion">Kōdo quiere emitir la guía de despacho.</p>
            <dl class="nu-aprobacion__datos">
              <div class="nu-aprobacion__dato"><dt>Cliente</dt><dd>Juanito SpA</dd></div>
              <div class="nu-aprobacion__dato"><dt>Guía</dt><dd>GD-00064 · 16 unidades</dd></div>
              <div class="nu-aprobacion__dato"><dt>Destino</dt><dd>Av. Ejemplo 123, Talca</dd></div>
            </dl>
            <div class="nu-aprobacion__botones">
              <button type="button" class="nu-aprobacion__aprobar">Aprobar</button>
              <button type="button" class="nu-aprobacion__rechazar">Rechazar</button>
            </div>
          </div>
        </li>
      </ol>
      <p class="nu-chat__viendo"><span class="nu-etiqueta">Viendo</span><span class="nu-chat__viendo-que">Contactos · Juanito SpA</span></p>
      <form class="nu-chat__redactor">
        <textarea class="nu-chat__campo" rows="1" placeholder="Pídele algo a Kōdo"></textarea>
        <button type="submit" class="nu-kodo__enviar"><span class="nu-kodo__enviar-texto">Enviar</span> →</button>
      </form>
    </section>
  </aside>
  <footer class="nu-barra">
    <span class="nu-estado nu-estado--en-linea">Conectado</span>
    <span>Ejemplo SpA</span>
    <span class="nu-barra__derecha"><span>Kōdo listo</span><span>v26.10.02</span></span>
  </footer>
</div>

Clases: .nu-shell .nu-shell__centro .nu-shell__contenido .nu-riel .nu-barra · Fragmento: snippets/shell.html