/* El menu lateral del portal, con el MISMO diseno y la MISMA dinamica que el
   panel de administracion: mismos tamanos, misma letra, mismos colores y el
   mismo comportamiento. En reposo es una cinta angosta con SOLO LOS ICONOS, y
   al acercar el mouse se despliega y aparecen los nombres; al alejarlo vuelve
   a cerrarse.

   La cinta negra de arriba queda como siempre: negra, fija y con el LASER76.
   Se probo llevar el carril hasta arriba con el logo en la esquina y la cinta
   semitransparente, y no convencio: el carril arranca DEBAJO de la cinta.

   EL CONTENIDO NO SE MUEVE cuando el menu se abre: el carril mide siempre lo
   mismo (--carril) y el menu abierto se monta ENCIMA, con sombra.

   LOS ICONOS TAMPOCO SE MUEVEN: abrir el menu solo hace APARECER EL TEXTO a
   la derecha de cada icono, con el mismo padding en los dos estados.

   Abierto o cerrado lo decide la CLASE "desplegado", que pone y saca el JS
   (sideEntra / sideSale en micuenta.js) con mouseenter y mouseleave. No se
   usa :hover: al tocar una opcion la pantalla se redibuja entera, el menu
   pasa a ser un elemento nuevo y el navegador no lo considera "bajo el mouse"
   hasta que uno lo mueve, asi que con :hover se cerraba tras cada clic.

   ORDEN INTERNO: las reglas de a.it van ANTES que las de a.top a proposito.
   Inicio lleva las dos clases (it top) y las dos reglas empatan en
   especificidad: gana la que esta mas abajo. Puestas al reves, Inicio tomaba
   el padding de 46px de las opciones y quedaba corrido a la derecha.

   Va al FINAL de la lista de estilos: pisa la grilla de 236px de portal.css,
   el sticky de layout.css y el tamano de iconos de celdas.css. Solo aplica de
   1001px para arriba: en celular no hay mouse que acercar y el menu sigue
   apilado, como siempre. */

:root{--carril:74px;--abierto:252px}

@media(min-width:1001px){

/* El lugar del menu se reserva con un PADDING del contenedor, no con una
   columna de grilla: el menu esta fijo y fuera del flujo, asi que la columna
   no lo contendria y el contenido se le meteria debajo. */
.app{display:block;padding-left:var(--carril);min-height:calc(100vh - var(--hdr,60px))}

/* el carril arranca debajo de la cinta y llega hasta abajo */
.app>.side{position:fixed;left:0;top:var(--hdr,60px);bottom:0;height:auto;z-index:40;
  width:var(--carril);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid var(--line,#E4E4E1);background:var(--surf2,#F2F2F0);
  padding:14px 0 26px;
  transition:width .16s ease, box-shadow .16s ease}

.app>.side.desplegado{width:var(--abierto);box-shadow:14px 0 34px rgba(0,0,0,.13)}

/* el logo de la esquina no va mas: el LASER76 vive en la cinta, como siempre */
.side .slogo{display:none}

/* El pie del sitio tambien cierra el portal, para que la pagina no termine en
   seco. Arranca despues del carril: el menu esta fijo y llega hasta abajo,
   asi que la franja oscura empieza donde el carril termina. Solo cuando hay
   .app adelante: en las paginas publicas el pie sigue de borde a borde. */
#view>.app~footer.pie{margin-left:var(--carril)}

/* CERRADO: solo los iconos. Lo unico que cambia al abrir es que aparece el
   texto; el icono queda clavado en la misma columna en los dos estados.
   El .sub.op tambien se apaga explicitamente: sin eso, el grupo que estaba
   abierto seguia mostrando sus opciones con el menu cerrado, y el texto
   quedaba colgando por encima del contenido. */
.side:not(.desplegado) .gh > span:not(.ch), .side:not(.desplegado) a.top span{display:none}
.side:not(.desplegado) .gh .ch{display:none}
.side:not(.desplegado) .sub, .side:not(.desplegado) .sub.op{display:none}

/* los nombres no se parten en dos renglones mientras el menu se esta abriendo */
.side .gh > span, .side a.it, .side a.top span{white-space:nowrap}

/* --- los mismos colores del panel: iconos grises que se encienden en rojo --- */
.side .gh{display:flex;align-items:center;gap:13px;padding:12px 16px 12px 26px;
  font-size:14.5px;font-weight:600;color:var(--ink,#111113);cursor:pointer;
  user-select:none;position:relative}
.side .gh:hover{background:#E8E8E5}
.side .gh > svg{width:22px;height:22px;flex:none;color:var(--mut,#6C6C73)}
.side .gh.op svg{color:var(--red,#D91C26)}
/* cerrado, el grupo abierto se reconoce por el icono rojo y el fondo */
.side:not(.desplegado) .gh.op{background:#E8E8E5}

/* las opciones, con vineta, como en el panel.
   OJO: estas reglas van ANTES que las de a.top (ver arriba). */
.side a.it{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 46px;
  font-size:14px;color:var(--mut,#6C6C73);border-left:3px solid transparent;
  cursor:pointer;text-decoration:none;position:relative}
.side .sub a.it{padding-left:46px}
.side a.it:hover{color:var(--ink,#111113);background:#E8E8E5}
.side a.it.on{color:var(--ink,#111113);border-left-color:var(--red,#D91C26);
  background:#E8E8E5;font-weight:600}
.side a.it:before{content:"";position:absolute;left:28px;top:50%;margin-top:-2.5px;
  width:5px;height:5px;border-radius:50%;background:var(--line2,#CFCFCB)}
.side a.it.on:before{background:var(--red,#D91C26)}

/* Inicio va suelto arriba: 26px + 22 del icono + 26 = 74, el ancho del
   carril. Cerrado el icono queda justo en el medio, y abierto no se mueve. */
.side a.top{padding:12px 16px 12px 26px;font-size:14.5px;font-weight:600;
  color:var(--ink,#111113);margin-bottom:8px;gap:13px;border-left:3px solid transparent}
.side a.top:before{display:none}
.side a.top > svg{width:22px;height:22px;flex:none;color:var(--mut,#6C6C73)}
.side a.top.on > svg{color:var(--red,#D91C26)}
.side a.top:hover{background:#E8E8E5;color:var(--ink,#111113)}
.side a.top.on{background:#E8E8E5;border-left-color:var(--red,#D91C26)}

/* el contenido va centrado en el espacio que queda a la derecha del carril */
.main{max-width:1180px;margin:0 auto;padding:26px 26px 70px}

/* con el menu cerrado, el numero del grupo se vuelve un puntito rojo pegado
   al icono: se sigue viendo que hay algo en curso sin abrir el menu */
.side:not(.desplegado) .gh em{position:absolute;top:7px;right:14px;margin:0;
  min-width:9px;height:9px;padding:0;border-radius:50%;
  font-size:0;line-height:0;box-shadow:0 0 0 2px var(--surf2,#F2F2F0)}
}

/* en celular tampoco se dibuja el logo del carril */
@media(max-width:1000px){
.side .slogo{display:none}
}

/* --- contadores del menu (aplican en todos los tamanos) ---
   El numero en el TITULO del grupo: cuantas instalaciones siguen en curso.
   Existe porque con el grupo cerrado no se ve nada de lo de adentro. */
.side .gh em{margin-left:auto;font-style:normal;font-family:"IBM Plex Mono";
  font-size:10.5px;background:var(--red,#D91C26);color:#fff;border-radius:9px;
  padding:1px 6px;line-height:1.5;font-weight:400}
.side .gh em + .ch{margin-left:6px}

/* el nombre de la maquina se corta con puntos suspensivos si no entra */
.side a.it .tx1{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}

/* puntito rojo al lado de una maquina con la instalacion todavia en curso */
.side a.it em.pd{margin-left:auto;font-style:normal;width:7px;height:7px;flex:none;
  border-radius:50%;background:var(--red,#D91C26);display:inline-block}