body.app-lateral{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
.barra-lateral{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:24px 18px 20px;background:#fff;border-right:1px solid #dce4ed;overflow-y:auto}
.marca-lateral{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#17324d;margin-bottom:22px}
.marca-lateral img{display:block;object-fit:contain;width:112px;height:112px}
.marca-lateral strong{font-size:22px;letter-spacing:-.4px;line-height:1.25}
.entorno-lateral{padding:10px 12px;border-radius:6px;margin-bottom:22px}
.entorno-lateral span{display:block;font-size:10px;letter-spacing:1px;line-height:1.4}
.entorno-lateral strong{display:block;font-size:15px;line-height:1.6}
.entorno-lateral.es-produccion{color:#b42318;background:#fff1f0;border-left:3px solid #b42318}
.entorno-lateral.es-desarrollo{color:#000;background:#f0f2f5;border-left:3px solid #000}
.navegacion{display:flex;flex-direction:column;gap:4px}
.navegacion a{display:block;padding:9px 12px;border-radius:6px;color:#34445b;text-decoration:none;font-size:14px;line-height:1.4}
.navegacion a:hover{background:#f3f6fa}
.navegacion a[aria-current=page]{background:#e9f5f2;color:#116354;font-weight:bold}
.usuario-lateral{margin-top:auto;padding-top:20px;border-top:1px solid #e3e9f0;margin-bottom:0;overflow-wrap:anywhere}
.etiqueta-usuario{display:block;font-size:10px;letter-spacing:1px;color:#64748b}
.nombre-usuario{display:block;font-size:14px;line-height:1.5;margin:5px 0 2px}
.tipo-usuario{display:block;font-size:12px;color:#64748b;margin-bottom:14px}
.salir-lateral{width:100%;padding:8px 12px;background:#fff;border:1px solid #c8d3df;border-radius:6px;color:#34445b;font-size:13px;cursor:pointer}
.salir-lateral:hover{background:#f3f6fa}
.app-lateral>.contenido{grid-column:2;min-width:0;width:100%;max-width:1400px;margin:38px auto;padding:0 32px}
.saltar-contenido{position:fixed;top:-100px;left:16px;padding:10px;background:white;color:#17324d;z-index:10}
.saltar-contenido:focus{top:10px}
.logo-login{display:flex;flex-direction:column;align-items:center;gap:10px}
.logo-login img{width:128px;height:128px;object-fit:contain;border-radius:12px}
.logo-login strong{color:#fff;font-size:24px;line-height:1.3}
.formulario>.entorno{color:#b42318;background:#fff1f0}
.formulario>.entorno.pruebas{color:#000;background:#f0f2f5}
@media(max-width:760px){
  body.app-lateral{grid-template-columns:minmax(0,1fr)}
  .barra-lateral{position:static;height:auto;padding:18px;border-right:0;border-bottom:1px solid #dce4ed;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;overflow:visible}
  .marca-lateral{margin:0;align-items:flex-start;gap:4px}.marca-lateral img{width:72px;height:72px}.marca-lateral strong{font-size:18px}
  .entorno-lateral{align-self:center;margin:0}
  .navegacion{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .usuario-lateral{grid-column:1/-1;margin:0;padding-top:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px}
  .usuario-lateral>.etiqueta-usuario,.usuario-lateral>.nombre-usuario,.usuario-lateral>.tipo-usuario{grid-column:1}
  .usuario-lateral>.tipo-usuario{margin:0}.usuario-lateral>form{grid-column:2;grid-row:1/4;align-self:center}
  .app-lateral>.contenido{grid-column:1;margin:24px auto;padding:0 18px}
}
@media(max-width:650px){.logo-login{flex-direction:column;gap:5px;align-items:flex-start}.logo-login img{width:80px;height:80px}.logo-login strong{font-size:21px}}