/* ============================================================ EL MARCO DE LA APP — barra de arriba fija + menú lateral ------------------------------------------------------------ Copiado tal cual de la maqueta que eligió el usuario (preview-interfaz-wms.html, 20/09/2026): la barra con degradé, el depósito, claro/oscuro, el usuario, y el menú que en la PC se achica a íconos con la hamburguesa y en el celular es un cajón. Lo arma menu-lateral.js. TODO acá lleva el prefijo «marco-» y sus propias variables «--marco-*», y no toca ninguna regla global (ni body, ni button, ni *): se puede enlazar en un módulo sin migrar y no le cambia nada más que sumarle el marco. Tema: es oscuro; sin eso, claro. Lo pone menu-lateral.js antes del primer pintado. ============================================================ */ :root{ --marco-alto:54px;--marco-menu:250px;--marco-mini:64px; --marco-fd:'Barlow Condensed',sans-serif;--marco-fb:'Barlow',-apple-system,"Segoe UI",system-ui,sans-serif; --marco-barra:linear-gradient(90deg,#414b68,#5b6890);--marco-barra-txt:#fff;--marco-punto:#ffb4ad; --marco-fondo-menu:#f4f5f7;--marco-txt:#1f2430;--marco-dim:#6b7385;--marco-borde:#e1e4ea;--marco-fila:#e9ecf3; --marco-act:linear-gradient(90deg,#414b68,#5b6890);--marco-act-txt:#fff;--marco-act-filete:transparent; --marco-sup:#ffffff;--marco-sombra:0 1px 4px rgba(20,28,50,.14),0 2px 10px rgba(20,28,50,.06); } :root[data-theme="dark"]{ --marco-barra:#161b23;--marco-punto:#f01100; --marco-fondo-menu:#12161d;--marco-txt:#e2e8f0;--marco-dim:#94a3b8;--marco-borde:#2a3342;--marco-fila:#1a202a; --marco-act:#1f0d10;--marco-act-filete:#f01100; --marco-sup:#161b23;--marco-sombra:0 0 0 1px #2a3342; } /* el hueco que deja el marco: arriba la barra, a la izquierda el menú */ html.con-marco body{padding-top:var(--marco-alto);padding-left:var(--marco-menu);transition:padding-left .18s ease} html.con-marco.marco-mini body{padding-left:var(--marco-mini)} /* ---------- barra superior ---------- */ .marco-barra{position:fixed;inset:0 0 auto 0;height:var(--marco-alto);z-index:65;display:flex;align-items:center;gap:10px; padding:0 14px;padding-top:env(safe-area-inset-top,0px);box-sizing:content-box; background:var(--marco-barra);color:var(--marco-barra-txt);box-shadow:0 2px 8px rgba(0,0,0,.25); font-family:var(--marco-fb);font-size:14px} :root[data-theme="dark"] .marco-barra{border-bottom:1px solid var(--marco-borde);box-shadow:none} .marco-barra *{box-sizing:border-box} .marco-marca{font-family:var(--marco-fd);font-weight:800;font-size:1.35rem;letter-spacing:1px;text-transform:uppercase;white-space:nowrap} .marco-marca b{color:var(--marco-punto)} /* el isotipo: un disco blanco detrás, para que la «e» calada se vea blanca como en el logo */ .marco-logo{width:30px;height:30px;flex:0 0 auto;border-radius:50%;margin-left:2px; background:radial-gradient(circle,#fff 0 64%,transparent 66%)} .marco-hueco{flex:1;min-width:0} .marco-extras{display:flex;align-items:center;gap:8px;min-width:0} .marco-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:8px;background:none; color:inherit;font-family:inherit;font-weight:600;font-size:.82rem;letter-spacing:.4px;text-transform:uppercase; white-space:nowrap;cursor:pointer} .marco-btn:hover{background:rgba(255,255,255,.14)} .marco-ic{width:38px;height:38px;border:0;border-radius:50%;background:none;color:inherit;display:grid;place-items:center;cursor:pointer;flex:0 0 auto} .marco-ic:hover{background:rgba(255,255,255,.14)} .marco-barra svg,.marco-menu svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto} /* el menú del usuario */ .marco-usuario{position:relative} .marco-desplegable{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;padding:6px;border-radius:10px; background:var(--marco-sup);color:var(--marco-txt);box-shadow:0 8px 28px rgba(0,0,0,.28); border:1px solid var(--marco-borde);display:none} .marco-usuario.abierto .marco-desplegable{display:block} .marco-desplegable .quien{padding:8px 10px 10px;border-bottom:1px solid var(--marco-borde);margin-bottom:4px} .marco-desplegable .quien b{display:block;font-size:14px} .marco-desplegable .quien small{color:var(--marco-dim);font-size:12px} .marco-desplegable button{width:100%;text-align:left;padding:9px 10px;border:0;border-radius:7px;background:none; color:inherit;font:600 13px var(--marco-fb);cursor:pointer} .marco-desplegable button:hover{background:var(--marco-fila)} /* ---------- menú lateral ---------- */ .marco-menu{position:fixed;top:calc(var(--marco-alto) + env(safe-area-inset-top,0px));bottom:0;left:0;width:var(--marco-menu);z-index:60; overflow-y:auto;overflow-x:hidden;background:var(--marco-fondo-menu);border-right:1px solid var(--marco-borde); font-family:var(--marco-fb);font-size:14px;box-sizing:border-box;transition:width .18s ease,transform .18s ease} .marco-menu a{display:flex;align-items:center;gap:16px;height:48px;padding:0 20px;box-sizing:border-box; color:var(--marco-txt);text-decoration:none;font-weight:500;white-space:nowrap} .marco-menu a:hover{background:var(--marco-fila)} /* «marco-activo», «marco-sep», «marco-grupo»: con prefijo también las clases de adentro. Inventario ya tenía un .grupo y un .activo propios y se le metían. */ .marco-menu a.marco-activo{background:var(--marco-act);color:var(--marco-act-txt);font-weight:700;box-shadow:inset 3px 0 0 var(--marco-act-filete)} .marco-menu .marco-sep{height:1px;background:var(--marco-borde);margin:4px 0} .marco-menu .marco-grupo{padding:12px 20px 4px;font-size:.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; color:var(--marco-dim);white-space:nowrap} html.marco-mini .marco-menu{width:var(--marco-mini)} html.marco-mini .marco-menu a span,html.marco-mini .marco-menu .marco-grupo{display:none} .marco-velo{display:none} /* ---------- celular: el menú pasa a ser un cajón ---------- */ @media (max-width:820px){ html.con-marco body,html.con-marco.marco-mini body{padding-left:0} .marco-menu{transform:translateX(-100%);width:var(--marco-menu)!important;box-shadow:4px 0 18px rgba(0,0,0,.3)} html.marco-cajon .marco-menu{transform:none} html.marco-cajon .marco-velo{display:block;position:fixed;inset:var(--marco-alto) 0 0 0;z-index:55;background:rgba(0,0,0,.45)} html.marco-mini .marco-menu a span,html.marco-mini .marco-menu .marco-grupo{display:revert} .marco-btn .rot{display:none} .marco-marca{font-size:1.1rem} .marco-extras{gap:4px} } /* ---------- la portada sin nadie adentro ---------- index.html tapa todo con el login hasta que alguien entra (body.locked). El marco no tiene nada que mostrar ahí: ni usuario, ni destinos a los que se pueda ir. */ body.locked .marco-barra,body.locked .marco-menu,body.locked .marco-velo{display:none!important} html.con-marco body.locked{padding:0!important} @media print{ .marco-barra,.marco-menu,.marco-velo{display:none!important} html.con-marco body{padding:0!important} }