/* Estructura del CGC con sidebar (línea de los CGC) y colores de marca Rotmec.
   Solo sobrescribe app.css: el original queda intacto. */
:root{--side-w:252px;--accent:#016268;--bar:#016268;--accent-soft:#E1F0F1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:#3FB3B9;--bar:#3FB3B9;--accent-ink:#06282A;--accent-soft:#163236}}
:root[data-theme="dark"]{--accent:#3FB3B9;--bar:#3FB3B9;--accent-ink:#06282A;--accent-soft:#163236}

.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.content{min-width:0}

/* Sidebar oscuro, como rotmec.cl. El logo va sobre una placa blanca para que se lea en cualquier tema. */
.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:#101416;color:#C9D3D6;display:flex;flex-direction:column;gap:12px;padding:18px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.side-logo{display:inline-flex;align-self:flex-start;background:#fff;border-radius:10px;padding:6px 10px}
.side-logo img{display:block;height:38px;width:auto}
.side-ctx{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#7F8C8D;font-weight:600;padding:0 6px}
.side nav.tabs{position:static;background:none;border:0;flex:1}
.side nav.tabs .wrap{display:flex;flex-direction:column;gap:2px;padding:0;max-width:none}
.side nav.tabs button{text-align:left;color:#C9D3D6;font-weight:500;border:0;border-left:3px solid transparent;border-radius:0 8px 8px 0;padding:9px 12px;white-space:normal}
.side nav.tabs button:hover{background:rgba(255,255,255,.06);color:#fff}
.side nav.tabs button[aria-selected="true"]{background:rgba(63,179,185,.16);color:#fff;border-left-color:#3FB3B9}
.side nav.tabs button.com[aria-selected="true"]{background:rgba(63,179,185,.16);color:#fff;border-left-color:#3FB3B9}
.side nav.tabs button:focus-visible{outline:2px solid #3FB3B9;outline-offset:-2px}
.side nav.tabs .grp{align-self:stretch;color:#7F8C8D;font-size:10.5px;padding:14px 12px 4px}
.side nav.tabs .grp.com-only{color:#7F8C8D}
.side nav.tabs .sep{display:none}
.side-foot{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-top:1px solid rgba(255,255,255,.1);padding:12px 6px 0}
.side-foot .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#C9D3D6;white-space:normal}
.side-foot .chip.emu{border-style:dashed;border-color:#E3AA3E;color:#E3AA3E;background:rgba(227,170,62,.1)}
.side-foot .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.side-foot .btn:hover{background:rgba(255,255,255,.08)}

.menu-btn{display:none}
.side-veil{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25}

/* Teléfono y tablet: el sidebar se abre con el botón Menú. */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:min(280px,85vw);z-index:30;transform:translateX(-100%);transition:transform .22s ease}
  .shell.menu-abierto .side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .menu-btn{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* Lo comercial sin morado: mismo chip neutro y misma etiqueta de marca que el resto. */
.chip.com{border-color:var(--line);color:var(--ink2);background:var(--surface2)}
.vhead .tag.com{background:var(--accent-soft);color:var(--accent)}

/* Ingreso con el logo */
.login-card .side-logo{border:1px solid var(--line)}

/* Formularios en grilla pareja: cada campo se alinea por abajo aunque su etiqueta
   ocupe dos líneas o lleve ayuda, y en paneles angostos la grilla pasa a 2 columnas. */
.panel{container-type:inline-size}
.form{align-items:end}
.form .hint{display:block;font-weight:400}
@container (max-width:560px){
  .form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form .s2{grid-column:1/-1}
}