/* Menu lateral del panel DOBLEA.
   En reposo es un carril angosto con solo los iconos. Al acercar el mouse se
   despliega y aparecen los nombres; al alejarlo se cierra. El contenido de la
   derecha NO se mueve: el carril mide siempre lo mismo y el menu abierto se
   monta encima con sombra.
   Abierto/cerrado lo decide una clase (.desplegado) que pone/saca el JS con
   mouseenter/mouseleave (no :hover, que se rompe al redibujar). */

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

/* El layout: el contenido reserva espacio con padding-left (el menu es fixed). */
.layout{padding-left:var(--carril);min-height:calc(100vh - 58px)}

.side{position:fixed;left:0;top:58px;bottom:0;z-index:40;
  width:var(--carril);overflow-x:hidden;overflow-y:auto;
  border-right:1px solid var(--line);background:var(--surf2);
  padding:14px 0 26px;
  transition:width .16s ease, box-shadow .16s ease}
.side.desplegado{width:var(--abierto);box-shadow:14px 0 34px rgba(0,0,0,.13)}

/* Cerrado: solo iconos. Al abrir aparece el texto; el icono no se mueve. */
.side:not(.desplegado) a.top span{display:none}
.side:not(.desplegado) .gh > span:not(.ch){display:none}
.side:not(.desplegado) .gh .ch{display:none}
.side:not(.desplegado) a.it span{display:none}
.side:not(.desplegado) .sub,.side:not(.desplegado) .sub.op{display:none}

.side .gh > span,.side a.it span,.side a.top span{white-space:nowrap}

/* Inicio: opcion suelta arriba con icono */
.side a.top{display:flex;align-items:center;gap:13px;padding:12px 16px 12px 26px;
  font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:8px;cursor:pointer}
.side a.top svg{width:22px;height:22px;flex:none;color:var(--mut)}
.side a.top:hover{background:#E8E8E5}
.side a.top.on{background:#E8E8E5}
.side a.top.on svg{color:var(--red)}

/* Titulo de grupo con icono */
.side .gh{display:flex;align-items:center;gap:13px;padding:12px 16px 12px 26px;
  font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;
  user-select:none;position:relative}
.side .gh:hover{background:#E8E8E5}
.side .gh svg{width:22px;height:22px;flex:none;color:var(--mut)}
.side .gh.op svg{color:var(--red)}
.side:not(.desplegado) .gh.op{background:#E8E8E5}
.side .gh .ch{margin-left:auto;font-size:10px;color:var(--mut2);transition:transform .18s}
.side .gh.op .ch{transform:rotate(180deg)}

/* Opciones dentro de un grupo */
.side .sub{display:none;padding-bottom:10px}
.side .sub.op{display:block}
.side a.it{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 46px;
  font-size:14px;color:var(--mut);border-left:3px solid transparent;
  cursor:pointer;position:relative}
.side a.it:hover{color:var(--ink);background:#E8E8E5}
.side a.it.on{color:var(--ink);border-left-color:var(--red);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)}
.side a.it.on:before{background:var(--red)}

/* ============================================================
   TINTE POR GRUPO
   Ventas y Cobranzas -> verde. Compras y Pagos -> rojo.
   El ICONO se pinta SIEMPRE (abierto o cerrado). El fondo del grupo (.gh) y de
   sus opciones (.sub) solo cuando el menu esta desplegado.
   ============================================================ */
/* --- icono coloreado siempre (tambien con el carril cerrado) --- */
.side .gh.grp-verde svg{color:#1E7A54}
.side .gh.grp-rojo svg{color:var(--red)}

/* VERDE (fondos solo con menu abierto) */
.side.desplegado .gh.grp-verde{background:#EAF7EF}
.side.desplegado .gh.grp-verde:hover{background:#D4EDDF}
.side.desplegado .sub.grp-verde{background:#EDF7F1}
.side.desplegado .sub.grp-verde a.it:hover{background:#D4EDDF}
.side.desplegado .sub.grp-verde a.it.on{border-left-color:#1E7A54;background:#D4EDDF}
.side.desplegado .sub.grp-verde a.it.on:before{background:#1E7A54}
/* ROJO (fondos solo con menu abierto) - un poco mas intenso que antes para que
   no se confunda con el gris */
.side.desplegado .gh.grp-rojo{background:#FBE0E0}
.side.desplegado .gh.grp-rojo:hover{background:#F6CCCC}
.side.desplegado .sub.grp-rojo{background:#FBE4E4}
.side.desplegado .sub.grp-rojo a.it:hover{background:#F6CCCC}
.side.desplegado .sub.grp-rojo a.it.on{border-left-color:var(--red);background:#F6CCCC}
.side.desplegado .sub.grp-rojo a.it.on:before{background:var(--red)}

/* Contenido a la derecha del menu */
.main{padding:26px 26px 70px;min-width:0;max-width:1180px;margin:0 auto}
.main h1{font-family:"Days One";font-size:24px;margin-bottom:4px}

/* Boton de menu en celular */
.mburger{display:none;background:transparent;border:1px solid rgba(255,255,255,.4);
  color:#fff;border-radius:8px;width:34px;height:34px;align-items:center;
  justify-content:center;cursor:pointer;font-size:15px;flex:none}

@media(max-width:900px){
  .layout{padding-left:0}
  .side{position:static;width:auto;max-height:none;overflow:visible;border-right:0;
    box-shadow:none;border-bottom:1px solid var(--line);display:none}
  .side.abierto{display:block}
  .side.desplegado{width:auto;box-shadow:none}
  .side:not(.desplegado) a.top span{display:inline}
  .side:not(.desplegado) .gh > span:not(.ch){display:inline}
  .side:not(.desplegado) .gh .ch{display:block}
  .side:not(.desplegado) a.it span{display:inline}
  .side:not(.desplegado) .sub.op{display:block}
  /* en celular el menu esta siempre expandido: aplicar el tinte igual */
  .side .gh.grp-verde{background:#EAF7EF}
  .side .sub.grp-verde{background:#EDF7F1}
  .side .gh.grp-rojo{background:#FBE0E0}
  .side .sub.grp-rojo{background:#FBE4E4}
  .main{padding:18px 18px 70px}
  .mburger{display:flex}
}