.sidebar.collapsed {
    width: 70px !important;
}

    .sidebar.collapsed .text {
        display: none;
    }

    .sidebar.collapsed .company-section {
        display: none;
    }

    /*.sidebar.collapsed .sidebar-item {
        justify-content: center;
        padding: 10px 0px 10px 0px;
    }*/

a.sidebar-item {
    padding: 0 !important;
}

    .sidebar.collapsed .sidebar-footer .sidebar-item {
        justify-content: center;
    }

    .sidebar.collapsed .sidebar-footer .text {
        display: none;
    }

    .sidebar.collapsed .company-add,
    .sidebar.collapsed .company-item {
        justify-content: center;
    }

.sidebar-item.collapsed .text {
    display: none;
}

/* -----------------------------
   Sidebar header colapsado
----------------------------- */
.sidebar.collapsed .sidebar-header {
    /*justify-content: center;*/
    position: relative;
}

/* Logo por defecto visible */
.sidebar.collapsed .sidebar-logo {
    opacity: 1;
}

/* Botón de resize oculto por defecto */
.sidebar.collapsed .sidebar-resizer {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Al hacer hover sobre todo el sidebar colapsado */
.sidebar.collapsed:hover .sidebar-logo {
    opacity: 0;
}

.sidebar.collapsed:hover .sidebar-resizer {
    opacity: 1;
    pointer-events: auto;
}

/* Popover del item simple (mismo estilo que el flyout de los grupos):
   tarjeta blanca con borde, sombra y esquinas redondeadas. Solo muestra el nombre. */
.sidebar-item > .tooltip-text {
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%) translateX(-8px) scale(0.98);
    transform-origin: left center;
    background: #fff;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1500;
}

/* En colapsado el tooltip usa position: fixed para escapar del scroll de
   .sidebar-menu-items (sus coordenadas top/left las fija sidebarPopover.js). */
.sidebar.collapsed .sidebar-item > .tooltip-text {
    position: fixed;
}

/* Mostrar el popover al hover del item colapsado */
.sidebar.collapsed .sidebar-item:hover > .tooltip-text {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) scale(1);
}

/* Al expandir el sidebar el tooltip vuelve a position: absolute, pero las
   coordenadas inline (left/top en px de viewport) que dejo sidebarPopover.js
   durante el hover en colapsado siguen aplicadas. Interpretadas ahora respecto
   al .sidebar-item empujarian el tooltip (invisible) muy abajo, agrandando el
   area de scroll de .sidebar-menu-items y generando un scrollbar vertical
   innecesario. Forzamos las coordenadas del estado expandido para anularlas. */
.sidebar:not(.collapsed) .sidebar-item > .tooltip-text,
.sidebar:not(.collapsed) .company-container > .tooltip-text {
    left: 64px !important;
    top: 50% !important;
}

/* Tooltip del selector de empresa (colapsado): misma tarjeta blanca que el
   tooltip de los items del menu. En colapsado usa position: fixed y
   sidebarPopover.js le fija top/left para alinearlo con el resto de popovers. */
.company-container > .tooltip-text {
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%) translateX(-8px) scale(0.98);
    transform-origin: left center;
    background: #fff;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1500;
}

/* En colapsado usa position: fixed para escapar del recorte del scroll. */
.sidebar.collapsed .company-container > .tooltip-text {
    position: fixed;
}

/* Mostrar tooltip al hover del selector colapsado */
.sidebar.collapsed .company-container:hover > .tooltip-text {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) scale(1);
}

/* Opcional: ajustar el contenedor del icono para position relative */
.sidebar-item {
    position: relative;
}


/* =========================================================
   Selector de empresa COLAPSADO: el menu se muestra a la derecha
   (igual que los grupos), no debajo, donde lo recortaria el sidebar.
   Se ancla PEGADO al borde derecho del boton (left: 100%), sin hueco.
   El sidebar colapsado usa overflow: visible para no recortarlo.
========================================================= */
.sidebar.collapsed .company-container > .dropdown-menu {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 100%;
    right: auto;
    margin: 0;
    z-index: 2000;
    transform: translateX(-6px) scale(0.98);
    transform-origin: left top;
}

    .sidebar.collapsed .company-container > .dropdown-menu.open {
        transform: translateX(0) scale(1);
    }

/* Expandido: el menu vuelve a su posicion normal bajo el selector. */
.sidebar:not(.collapsed) .company-container > .dropdown-menu {
    left: 10px !important;
    top: 100% !important;
}

/* =========================================================
   Perfil COLAPSADO: mismo criterio que empresa. El menu sale a la
   derecha pegado al boton (left: 100%) en lugar de hacia arriba,
   donde el sidebar lo recortaba.
========================================================= */
.sidebar.collapsed .user-menu-wrapper > .dropdown-menu {
    top: auto;
    bottom: 0;
    left: 100%;
    right: auto;
    margin: 0;
    z-index: 2000;
}


/* =========================================================
   DISEÑO MENU EMPRESA
   Solo aspecto visual. No cambia posicion, JS ni comportamiento.
========================================================= */

.company-container > .dropdown-menu {
    width: 224px !important;
    min-width: 224px !important;
    padding: 8px !important;
    border: 1px solid #e3eaf3 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: blur(12px) !important;

    /* overflow VISIBLE y declarado, no omitido. El submenú de «Cambiar cuenta» se posiciona en
       left:100%, es decir FUERA de esta caja: con overflow oculto se recortaba entero y quedaba una
       tira pegada al borde, como si el menú no se abriera. Estuvo así hasta el 2026-09-03 (FUN-357)
       bajo un comentario que decía «solo aspecto visual, no cambia comportamiento»: recortar a los
       hijos ES comportamiento. El redondeo no lo necesita, porque hay 8 px de relleno y cada elemento
       lleva su propio radio, así que ningún fondo llega a las esquinas. */
    overflow: visible !important;
}

    .company-container > .dropdown-menu a,
    .company-container > .dropdown-menu button,
    .company-container > .dropdown-menu .dropdown-item {
        width: 100% !important;
        min-height: 40px !important;
        height: auto !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: left !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .company-container > .dropdown-menu a:hover,
        .company-container > .dropdown-menu button:hover,
        .company-container > .dropdown-menu .dropdown-item:hover {
            background: #f8fafc !important;
            color: #111827 !important;
            transform: translateX(2px) !important;
        }

        .company-container > .dropdown-menu a.active,
        .company-container > .dropdown-menu button.active,
        .company-container > .dropdown-menu .dropdown-item.active,
        .company-container > .dropdown-menu a[aria-current="page"] {
            background: #eff6ff !important;
            color: #2563eb !important;
        }

    .company-container > .dropdown-menu .material-symbols-rounded,
    .company-container > .dropdown-menu .material-symbols-outlined,
    .company-container > .dropdown-menu .icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        margin: 0 !important;
        color: #64748b !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .company-container > .dropdown-menu a:hover .material-symbols-rounded,
    .company-container > .dropdown-menu button:hover .material-symbols-rounded,
    .company-container > .dropdown-menu .dropdown-item:hover .material-symbols-rounded,
    .company-container > .dropdown-menu a:hover .material-symbols-outlined,
    .company-container > .dropdown-menu button:hover .material-symbols-outlined,
    .company-container > .dropdown-menu .dropdown-item:hover .material-symbols-outlined,
    .company-container > .dropdown-menu a:hover .icon,
    .company-container > .dropdown-menu button:hover .icon,
    .company-container > .dropdown-menu .dropdown-item:hover .icon {
        color: #64748b !important;
    }

    .company-container > .dropdown-menu a.active .material-symbols-rounded,
    .company-container > .dropdown-menu button.active .material-symbols-rounded,
    .company-container > .dropdown-menu .dropdown-item.active .material-symbols-rounded,
    .company-container > .dropdown-menu a[aria-current="page"] .material-symbols-rounded,
    .company-container > .dropdown-menu a.active .material-symbols-outlined,
    .company-container > .dropdown-menu button.active .material-symbols-outlined,
    .company-container > .dropdown-menu .dropdown-item.active .material-symbols-outlined,
    .company-container > .dropdown-menu a[aria-current="page"] .material-symbols-outlined,
    .company-container > .dropdown-menu a.active .icon,
    .company-container > .dropdown-menu button.active .icon,
    .company-container > .dropdown-menu .dropdown-item.active .icon,
    .company-container > .dropdown-menu a[aria-current="page"] .icon {
        color: #2563eb !important;
    }

/* Destello al navegar desde el historial de la ficha CRM a una actividad/nota/sección. Clase global
   (no scoped) para poder aplicarla por JS a elementos de componentes Blazor (ver js/crmFicha.js). */
@keyframes crm-destello {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    20%  { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.crm-destello {
    animation: crm-destello 2s ease-out;
    border-radius: 8px;
}

/* ─── Teclado tipo EXCEL en los formularios de ficha (cliente, agente, proveedor) ────────────────────
   Espejo del grid de facturación (FacturaFormulario.razor.css). El modo lo marca la clase «ff-editing»
   que pone enterCampos.js: en NAVEGACIÓN el caret va oculto (el campo se ve activo, no «en modo tecleo»);
   en EDICIÓN reaparece. Va aquí, en el CSS global, porque los tres formularios comparten
   .cliente-form-page y el CSS aislado de cada página no puede alcanzar una clase que pone el JS.

   Solo aplica a los campos ANCLADOS (contenedores fcl-), que son los que enterCampos.js gobierna. Un campo
   sin anclar (Observaciones, condiciones de tarifa) nunca recibiría «ff-editing» y se quedaría sin caret;
   lo mismo les pasaría a las fichas de agente y proveedor, que aún usan enterNav.js. */
.cliente-form-page [id^="fcl-"] input:focus,
.cliente-form-page [id^="fcl-"] textarea:focus {
    caret-color: transparent;
}

    .cliente-form-page [id^="fcl-"] input.ff-editing,
    .cliente-form-page [id^="fcl-"] textarea.ff-editing {
        caret-color: auto;
    }

/* El buscador modal tiene su propio teclado: dentro de él se escribe siempre. */
.cliente-form-page .sel-overlay input:focus {
    caret-color: auto;
}

/* ─── Teclado tipo EXCEL en el modal de configuración («Gestión») ─────────────────────────────────────
   Mismo mecanismo que las fichas: en NAVEGACIÓN el caret va oculto (el campo se ve activo, no «en modo
   tecleo»); en EDICIÓN («ff-editing», la pone enterCampos.js) reaparece. Solo aplica a los campos ANCLADOS
   (contenedores fset-) de la secciones de «Gestión». */
.settings-modal [id^="fset-"] input:focus {
    caret-color: transparent;
}

    .settings-modal [id^="fset-"] input.ff-editing {
        caret-color: auto;
    }

/* ─── Teclado tipo EXCEL en el modal de anticipo (cobros/pagos) ───────────────────────────────────────
   Mismo mecanismo que las fichas y el modal de ajustes: en NAVEGACIÓN el caret va oculto; en EDICIÓN
   («ff-editing», la pone enterCampos.js) reaparece. Solo aplica a los campos ANCLADOS (contenedores anm-). */
.anm-body [id^="anm-"] input:focus {
    caret-color: transparent;
}

    .anm-body [id^="anm-"] input.ff-editing {
        caret-color: auto;
    }

/* El buscador modal tiene su propio teclado: dentro de él se escribe siempre. */
.anm-body .sel-overlay input:focus {
    caret-color: auto;
}