/* ==========================================================
   CRM - SHELL DE ESCRITORIO: NAVEGACION LATERAL

   Solo para monitores. En el telefono y la tablet la barra de
   secciones sigue siendo la fila de abajo que ya estaba: todo
   lo de este archivo vive dentro de un unico media query y no
   toca nada afuera.

   Por que vertical: son seis secciones con nombres largos
   ("Consultas/Hunter") peleando por el ancho con la marca, el
   estado de realtime, cuatro botones de la barra y el nombre
   del usuario. En columna cada una tiene su renglon entero, y
   la septima seccion no rompe nada.

   El corte es 1100px Y puntero fino: una tablet apaisada de
   1024px con dedo no gana nada con una columna de 236px que
   le come el contenido, y los objetivos tactiles de la barra
   inferior son mejores que los de una lista.

   La clase `nav-lateral` la pone js/lateral.js, que ademas es
   quien muda la marca y los botones adentro del panel. Sin el
   JS este archivo no hace nada: no hay estado intermedio roto.
   ========================================================== */

@media (min-width: 1100px) and (pointer: fine) {

/* ----------------------------------------------------------
   1. LA GRILLA
   #crm-workspace tiene tres hijos en flujo —cabecera, nav y
   contenido— y la marca de agua, que es `position: fixed` y
   no cuenta. Dos columnas, dos filas, y el panel ocupa la
   columna izquierda entera.
   ---------------------------------------------------------- */

html.nav-lateral {
    --nav-w: 236px;
    --nav-w-min: 68px;
}

html.nav-lateral.nav-plegada {
    --nav-w: var(--nav-w-min);
}

/* legibilidad.css le pone un tope de 1400px con margen automatico:
   con el panel pegado a la izquierda ese margen deja una franja de
   fondo entre el borde de la pantalla y la columna, y se lee como
   si el panel flotara. El shell va de borde a borde. */
html.nav-lateral body #crm-workspace,
html.nav-lateral body #crm-workspace:not(.hidden) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    display: grid !important;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    grid-template-rows: var(--head-h) minmax(0, 1fr);
    grid-template-areas:
        "nav head"
        "nav main";
    /* La transicion va en la variable de ancho, o sea en una
       sola propiedad de la grilla: no hay reflow por elemento. */
    transition: grid-template-columns var(--d-base, 220ms) var(--c-inout, ease);
}

html.nav-lateral body .top-navbar { grid-area: head; }
html.nav-lateral body .main-tabs { grid-area: nav; }
html.nav-lateral body .content-area { grid-area: main; min-width: 0; }

/* ----------------------------------------------------------
   2. EL PANEL
   Alto completo y pegado: la lista no se va con el scroll del
   contenido. Tres zonas verticales —marca, secciones, pie de
   herramientas— separadas por el `margin-top: auto` del pie.
   ---------------------------------------------------------- */

html.nav-lateral body nav.main-tabs,
html.nav-lateral body .main-tabs {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: var(--bg-main) !important;
    overflow: visible !important;
    z-index: 41 !important;
}

/* --- cabecera del panel: la marca --- */

html.nav-lateral body .lat-cab {
    display: flex;
    align-items: center;
    gap: var(--e-3, 10px);
    height: var(--head-h);
    min-height: var(--head-h);
    padding: 0 var(--e-4, 14px);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

/* El logotipo con el nombre mide unos 150px: plegado no entra
   y no hay version corta que valga, asi que se va entero y
   queda solo la pastilla CRM centrada. */
html.nav-lateral.nav-plegada body .lat-cab {
    justify-content: center;
    padding: 0;
}

html.nav-lateral.nav-plegada body .lat-cab .logo-wrapper {
    display: none !important;
}

/* --- lista de secciones --- */

html.nav-lateral body .lat-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--e-3, 10px) var(--e-2, 8px);
    /* Si algun dia son quince secciones, se desplazan ellas y
       no el panel entero: la marca y el pie quedan quietos. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

html.nav-lateral body .lat-lista::-webkit-scrollbar { display: none; }

/* "Mi Perfil" al fondo de la lista, separado del resto: es
   ajustes de uno mismo, no una seccion de trabajo mas. */
html.nav-lateral body .lat-lista .tab-btn[data-tab="tab-profile"] {
    margin-top: auto !important;
}

/* --- botones de seccion --- */

html.nav-lateral body .main-tabs .tab-btn {
    position: relative !important;
    display: grid !important;
    /* Columna fija para el icono: los rotulos arrancan todos en
       la misma vertical aunque el icono sea mas ancho o mas
       angosto. Con flex + gap eso no pasa. */
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center !important;
    gap: var(--e-3, 10px) !important;
    width: 100% !important;
    height: var(--h-lg, 44px) !important;
    min-height: var(--h-lg, 44px) !important;
    padding: 0 var(--e-3, 10px) !important;
    border: none !important;
    border-radius: var(--rr-md, 10px) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: color var(--d-fast, 140ms) var(--c-inout, ease),
                background var(--d-fast, 140ms) var(--c-inout, ease) !important;
}

html.nav-lateral body .main-tabs .tab-btn i {
    grid-column: 1;
    justify-self: center;
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

html.nav-lateral body .main-tabs .tab-btn > span.tab-rotulo {
    grid-column: 2;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* El contador va al extremo derecho del renglon, no pegado al
   texto: la columna de numeros queda alineada entre secciones. */
html.nav-lateral body .main-tabs .tab-badge {
    position: static !important;
    grid-column: 3;
    justify-self: end;
    transform: none !important;
    margin: 0 !important;
    padding: 1px 7px !important;
    min-width: 0 !important;
    height: auto !important;
    border: none !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
}

html.nav-lateral body .main-tabs .tab-badge.cero,
html.nav-lateral body .main-tabs .tab-badge:empty {
    display: none !important;
}

html.nav-lateral body .main-tabs .tab-btn:hover:not(.active) {
    color: var(--text-main) !important;
    background: var(--surf-2) !important;
}

html.nav-lateral body .main-tabs .tab-btn.active {
    color: var(--primary) !important;
    background: rgba(var(--acento-rgb), 0.12) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* El subrayado por pestaña no aplica en vertical: lo reemplaza
   la barra deslizante, que ahora corre por el borde izquierdo
   (js/micro.js la mide en el eje que corresponda). */
html.nav-lateral body .main-tabs .tab-btn::after,
html.nav-lateral body .main-tabs .tab-btn.active::after {
    display: none !important;
}

html.nav-lateral body .tab-indicador {
    top: 0;
    bottom: auto;
    left: 3px;
    width: 3px !important;
    height: 0;
    border-radius: 0 3px 3px 0;
    transform-origin: center top;
    transition: transform 300ms var(--c-out, ease),
                height 300ms var(--c-out, ease),
                opacity 140ms linear;
}

/* --- pie del panel: herramientas y sesion --- */

html.nav-lateral body .lat-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-1, 4px);
    padding: var(--e-2, 8px) var(--e-3, 10px);
    border-top: 1px solid var(--border-color);
}

html.nav-lateral body .lat-pie #realtime-status {
    flex: 1 1 100%;
    order: -1;
    padding: 0 var(--e-1, 4px) var(--e-2, 8px) !important;
    font-size: 11px !important;
}

html.nav-lateral body .lat-pie .btn-icon {
    flex: 0 0 auto;
}

/* Salir es la unica accion destructiva del grupo: se va al
   extremo opuesto de los botones de panel. */
html.nav-lateral body .lat-pie #logout-btn {
    margin-left: auto !important;
}

html.nav-lateral.nav-plegada body .lat-pie {
    flex-direction: column;
    padding: var(--e-2, 8px) 0;
}

html.nav-lateral.nav-plegada body .lat-pie #realtime-status {
    flex: 0 0 auto;
    /* Plegado queda solo el punto de color: el texto "Realtime"
       no entra en 68px y el estado se lee igual. */
    font-size: 0 !important;
    padding: 0 0 var(--e-1, 4px) !important;
}

html.nav-lateral.nav-plegada body .lat-pie #logout-btn {
    margin-left: 0 !important;
}

/* --- boton de plegado --- */

html.nav-lateral body .lat-plegar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2, 8px);
    width: calc(100% - var(--e-4, 14px));
    margin: 0 auto var(--e-2, 8px);
    height: 28px;
    border: none;
    border-radius: var(--rr-md, 10px);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: color var(--d-fast, 140ms) ease,
                background var(--d-fast, 140ms) ease;
}

html.nav-lateral body .lat-plegar:hover {
    color: var(--text-main);
    background: var(--surf-2);
}

html.nav-lateral body .lat-plegar i {
    transition: transform var(--d-base, 220ms) var(--c-inout, ease);
}

html.nav-lateral.nav-plegada body .lat-plegar i {
    transform: rotate(180deg);
}

html.nav-lateral.nav-plegada body .lat-plegar .lat-plegar-txt {
    display: none;
}

/* ----------------------------------------------------------
   3. MODO PLEGADO
   Queda la columna de iconos. Los rotulos no se esconden con
   `display: none` sino con ancho cero y opacidad: asi el texto
   sigue estando para los lectores de pantalla y la transicion
   no salta.
   ---------------------------------------------------------- */

html.nav-lateral.nav-plegada body .main-tabs .tab-btn {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0 !important;
}

html.nav-lateral.nav-plegada body .main-tabs .tab-btn > span.tab-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

html.nav-lateral.nav-plegada body .main-tabs .tab-badge {
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    justify-self: auto;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 14px !important;
}

/* Plegado, el nombre de la seccion aparece al pasar el mouse.
   Es un globo del propio boton: no hace falta ningun nodo
   extra ni JS, y no puede desincronizarse del rotulo. */
html.nav-lateral.nav-plegada body .main-tabs .tab-btn::before {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    padding: 5px 9px;
    border-radius: var(--rr-sm, 7px);
    background: #17171a;
    border: 1px solid #2b2b30;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 120ms;
}

html.nav-lateral.nav-plegada body .main-tabs .tab-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* El boton tiene `overflow: hidden` para recortar el rotulo; el
   globo se sale del boton, asi que necesita que no lo recorte. */
html.nav-lateral.nav-plegada body .main-tabs .tab-btn {
    overflow: visible !important;
}

/* ----------------------------------------------------------
   4. LA CABECERA, YA SIN MARCA
   Le quedan el cartel de "en que estoy trabajando" y el
   usuario. Se alinean a la derecha: la izquierda ahora es
   territorio del panel y una marca fantasma ahi confunde.
   ---------------------------------------------------------- */

html.nav-lateral body .top-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--e-3, 10px) !important;
    height: var(--head-h) !important;
    min-height: var(--head-h) !important;
    padding: 0 var(--e-5, 18px) !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: var(--bg-main) !important;
}

/* El pulso de luz que recorre la barra arrancaba en el borde
   izquierdo de la pantalla; ahora ese borde es el panel. */
html.nav-lateral body .top-navbar::before {
    display: none !important;
}

/* La caja de la marca queda vacia de contenido pero no vacia de
   nodos —hay comentarios y saltos de linea adentro— asi que
   `:empty` no la agarra: se apaga a mano. Se conserva en el DOM
   porque al achicar la ventana todo vuelve adentro. */
html.nav-lateral body .top-navbar .brand-container {
    display: none !important;
}

/* ----------------------------------------------------------
   5. CONTENIDO
   El area util perdio 236px de ancho: el tope de 1360px del
   contenido se mide contra la columna, no contra la ventana.
   ---------------------------------------------------------- */

html.nav-lateral body .content-area {
    padding: 0 !important;
}

html.nav-lateral body .tab-content {
    padding: var(--e-5, 18px) var(--e-5, 18px) var(--e-7, 32px) !important;
    max-width: 1360px;
    margin: 0 auto;
}

/* ----------------------------------------------------------
   6. PANELES COLGANTES
   Ajustes y avisos se abrian desde la barra de arriba y por eso
   estan clavados al borde superior de la ventana. Sus botones
   ahora viven en el pie del panel: si el globo apareciera a
   1000px de distancia del boton que lo abrio, nadie lo asocia.
   Bajan al pie, al lado de la columna.
   ---------------------------------------------------------- */

html.nav-lateral body #ap-panel,
html.nav-lateral body .avisos-panel {
    top: auto !important;
    bottom: 12px !important;
    left: calc(var(--nav-w) + 10px) !important;
    right: auto !important;
    max-width: calc(100vw - var(--nav-w) - 24px) !important;
    transform: translateY(6px);
}

html.nav-lateral body #ap-panel.abierto,
html.nav-lateral body .avisos-panel.abierto {
    transform: none;
}

}