/* ==========================================================
   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;
    /* Sin linea divisoria. El panel se apoya en el mismo fondo que
       el contenido y se funde con el: lo que separa una zona de la
       otra es el espacio y la pastilla de la seccion activa, no un
       marco. Con borde, el CRM se leia como una planilla de calculo
       —todo encerrado en celdas— que es justo lo contrario de lo
       que tiene que parecer una aplicacion. */
    border: 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);
    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" va pegado a "Proyectos", en la fila que le toca por
   orden. Estuvo un rato clavado al fondo del panel —la costumbre
   de las suites, que mandan lo de uno mismo abajo de todo— y en
   una lista de seis secciones eso deja un hueco enorme en el
   medio y aleja el perfil del resto sin que haya ninguna razon.
   La lista es corta: entra entera y se lee de un vistazo. */
html.nav-lateral body .lat-lista .tab-btn[data-tab="tab-profile"] {
    margin-top: 0 !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);
    /* Lo separa del resto el espacio en blanco de la lista, que
       crece hasta empujarlo al fondo. Una linea aca no agrega
       informacion: ya se entiende que es otra zona. */
    margin-top: auto;
}

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: var(--surf-1);
    border: 1px solid var(--borde-fuerte);
    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;
    /* Tampoco lleva linea abajo: la cabecera y el contenido son la
       misma superficie. Lo que la delimita es su alto y el aire que
       deja arriba del contenido. */
    border: none !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;
}

/* El bloque del usuario traia una linea vertical a su izquierda
   para separarse de la marca. La marca ya no esta al lado, asi
   que la linea separaba de la nada. */
html.nav-lateral body .top-navbar .user-meta {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !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;
}

/* ----------------------------------------------------------
   6b. CONFIGURACION: UNA PANTALLA, NO UN GLOBO

   El panel de Apariencia colgaba del engranaje: 300px de ancho,
   flotando sobre el CRM, con scroll propio y sombra de modal
   para tapar lo que hubiera debajo. Con una pantalla entera
   disponible eso es apretar el contenido por gusto.

   El nodo es el mismo —los oyentes de apariencia.js siguen
   atados a el— pero pierde `position: fixed` y pasa a fluir.
   La clase `ap-fijo` la pone js/lateral.js al mudarlo.
   ---------------------------------------------------------- */

html.nav-lateral body #ap-panel.ap-fijo {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 980px !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* El panel se mostraba y escondia con estas tres. Dentro de una
       pantalla no hay nada que animar: lo hace el cambio de pestaña. */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
}

/* Con 980px de ancho, los bloques de ajustes se reparten en dos
   columnas en vez de apilarse en una cinta de tres pantallas de
   alto. `masonry` no hace falta: son cajas de alto parecido. */
html.nav-lateral body #ap-panel.ap-fijo .ap-seccion {
    break-inside: avoid;
    margin: 0 0 var(--e-4, 14px);
    padding: var(--e-4, 14px);
    border: 1px solid var(--borde-luz);
    border-radius: var(--rr-lg, 14px);
    background: var(--surf-1);
}

@media (min-width: 1360px) {
    html.nav-lateral body #ap-panel.ap-fijo {
        columns: 2;
        column-gap: var(--e-5, 18px);
    }

    /* La cabecera cruza las dos columnas: titula el panel entero,
       no la mitad izquierda. */
    html.nav-lateral body #ap-panel.ap-fijo > .ap-cab {
        column-span: all;
    }
}

/* La X de cerrar no tiene sentido en una pantalla que no se abrio:
   no hay nada que cerrar, y al apretarla no pasaba nada. */
html.nav-lateral body #ap-panel.ap-fijo #ap-cerrar,
html.nav-lateral body #ap-panel.ap-fijo #ap-listo {
    display: none !important;
}

/* ----------------------------------------------------------
   7. CONSULTAS: TARJETAS, NO RENGLONES

   La bandeja era una tabla de nueve columnas. En un monitor
   ancho cada consulta se estiraba a lo largo de toda la
   pantalla —el nombre a la izquierda, los botones a dos mil
   pixeles de distancia— y entraban seis en el alto de la
   ventana. Con cuatro tarjetas por renglon entran veinte, y el
   ojo las barre en bloque en vez de renglon por renglon.

   El HTML no cambia: son las mismas celdas de la tabla,
   reacomodadas. En el telefono la tabla sigue siendo tabla.
   ---------------------------------------------------------- */

html.nav-lateral body .grid-consultas {
    /* La caja de la tabla desaparece: cada tarjeta trae la suya.
       Sin esto quedaba un marco grande encerrando a las cuatro. */
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* La cabecera deja de ser cabecera de tabla —no hay columnas que
   rotular— pero NO se esconde: es lo unico que ordena la lista.
   Se convierte en una fila de pastillas de orden. */
html.nav-lateral body .grid-consultas .grid-head {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    height: auto !important;
    padding: 0 2px var(--e-3, 10px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: static !important;
}

html.nav-lateral body .grid-consultas .grid-head::before {
    content: 'Ordenar por';
    margin-right: 2px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
}

html.nav-lateral body .grid-consultas .grid-th {
    padding: 4px 10px;
    border-radius: var(--radius-full, 999px);
    background: var(--surf-2);
    font-size: 0.66rem;
}

/* La columna de acciones no tiene rotulo: como pastilla vacia
   seria un boton fantasma. */
html.nav-lateral body .grid-consultas .grid-th:empty {
    display: none !important;
}

html.nav-lateral body .grid-consultas .grid-th.ordenando {
    background: rgba(var(--acento-rgb), 0.14);
}

/* --- la grilla de tarjetas --- */

html.nav-lateral body .grid-consultas .grid-body {
    display: grid;
    /* Dos, tres o cuatro segun lo que haya. Cuatro es el objetivo
       —es lo que se pidio— pero clavarlo en 4 desde 1100px deja
       tarjetas de 200px donde no entra ni el nombre de la empresa.
       Se llega a cuatro cuando hay ancho para que las cuatro sean
       legibles, no antes. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-3, 10px);
    align-items: start;
}

@media (min-width: 1280px) {
    html.nav-lateral body .grid-consultas .grid-body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1560px) {
    html.nav-lateral body .grid-consultas .grid-body {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- la tarjeta --- */

html.nav-lateral body .grid-consultas .grid-fila {
    display: flex !important;
    flex-wrap: wrap;
    align-content: start;
    align-items: center;
    gap: var(--e-2, 8px);
    grid-template-columns: none !important;
    min-height: 0 !important;
    padding: var(--e-4, 14px) !important;
    padding-left: calc(var(--e-4, 14px) + 3px) !important;
    border: 1px solid var(--borde-luz) !important;
    border-radius: var(--rr-lg, 14px);
    overflow: hidden;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--estado-color, var(--primary)) 7%, transparent) 0%,
            transparent 60%),
        var(--surf-1);
}

html.nav-lateral body .grid-consultas .grid-fila:hover {
    border-color: color-mix(in srgb, var(--estado-color, var(--primary)) 45%, transparent) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--estado-color, var(--primary)) 14%, transparent) 0%,
            transparent 60%),
        var(--surf-1);
}

/* La barra de estado pasa de la izquierda del renglon al borde
   izquierdo de la tarjeta: es el mismo codigo de color. */
html.nav-lateral body .grid-consultas .grid-fila::before {
    border-radius: var(--rr-lg, 14px) 0 0 var(--rr-lg, 14px);
}

/* --- reparto interno --- */

html.nav-lateral body .grid-consultas .celda-cliente {
    flex: 1 1 100%;
    gap: 3px;
}

/* Los tres chips del triage (canal, tipo, prioridad) son las
   unicas celdas sin clase propia: van juntos en su renglon y
   se acomodan solos cuando uno es largo. */
html.nav-lateral body .grid-consultas .grid-fila > .grid-td:not([class*="celda-"]) {
    flex: 0 1 auto;
    display: flex;
    min-width: 0;
}

html.nav-lateral body .grid-consultas .celda-etapa { flex: 1 1 100%; }
html.nav-lateral body .grid-consultas .celda-etapa .etapa-caja { width: 100%; }
html.nav-lateral body .grid-consultas .celda-etapa .etapa-select { width: 100%; }

html.nav-lateral body .grid-consultas .celda-responsable {
    flex: 1 1 auto;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.nav-lateral body .grid-consultas .celda-fecha {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-align: right;
    font-size: 0.72rem;
}

html.nav-lateral body .grid-consultas .celda-acciones {
    flex: 1 1 100%;
    display: flex;
    justify-content: space-around;
    gap: var(--e-2, 8px);
    margin-top: 2px;
    padding-top: var(--e-2, 8px);
    border-top: 1px solid var(--borde-luz);
}

/* --- el rubro --- */

/* A que se dedica la empresa. Es el dato que faltaba para saber
   de que se trata una consulta sin abrirla: "MC Ingenieria
   Estructural" no dice si es un calculista o una constructora.
   Lo arma CrmTriage.rubro() desde el interes o el origen. */
html.nav-lateral body .fila-rubro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.nav-lateral body .fila-rubro i {
    flex: none;
    font-size: 0.6rem;
    opacity: 0.55;
}

}