/* Caja principal, herramientas y ubicaciones de escritorio. */

/* CARAJILLO_DESKTOP_MAIN_SHELL_INTEGRATED_START */
/* ============================================================
   CARAJILLO CLOUD — CAJA PRINCIPAL UNIFICADA (ESCRITORIO)

   Este archivo solo actúa a partir de 761 px.
   La interfaz móvil conserva su estructura actual.
   ============================================================ */

@media screen and (min-width: 761px) {

    :root {
        --cc-desktop-gap: 10px;
        --cc-desktop-padding: 10px;
        --cc-desktop-toolbar-height: 58px;
        --cc-desktop-control-size: 40px;
    }

    /* --------------------------------------------------------
       La aplicación deja de reservar filas exteriores para la
       topbar y las breadcrumbs. Toda la altura pertenece a la
       caja formada por ubicaciones, explorador e información.
       -------------------------------------------------------- */

    #appView.app-view:not(.hidden) {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;

        padding: var(--cc-desktop-padding) !important;
        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    #contentLayout.content-layout {
        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;

        padding: 0 !important;
        gap: var(--cc-desktop-gap) !important;

        overflow: hidden !important;
    }

    /* --------------------------------------------------------
       El panel central queda dividido únicamente en:

       1. barra de navegación y acciones;
       2. contenido de archivos.
       -------------------------------------------------------- */

    #contentLayout .main-panel {
        position: relative !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows:
            auto
            minmax(0, 1fr) !important;

        isolation: isolate !important;
    }

    /* La antigua file-toolbar queda como soporte interno para
       los nodos que algunos módulos todavía consultan, pero ya no ocupa
       espacio ni muestra contadores. */
    #contentLayout .file-toolbar {
        display: none !important;
    }

    #contentLayout .file-content {
        grid-column: 1 !important;
        grid-row: 2 !important;

        min-height: 0 !important;
        padding-bottom: 84px !important;
    }

    /* --------------------------------------------------------
       TOPBAR REUBICADA DENTRO DEL PANEL CENTRAL
       -------------------------------------------------------- */

    #contentLayout .main-panel > .topbar {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: relative !important;
        inset: auto !important;
        top: auto !important;
        z-index: 25 !important;

        display: flex !important;
        align-items: center !important;
        align-content: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap: 7px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: var(--cc-desktop-toolbar-height) !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;

        background: rgba(248, 252, 255, 0.96) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius:
            var(--cc-panel-radius)
            var(--cc-panel-radius)
            0
            0 !important;

        box-shadow: none !important;
        backdrop-filter: blur(16px) !important;

        overflow: visible !important;
    }

    /* La marca pertenecía a la topbar exterior. Al integrar la
       barra en el explorador se elimina para ganar espacio útil. */
    #contentLayout .main-panel > .topbar > .topbar-brand {
        display: none !important;
    }

    /* Botones cuadrados y consistentes dentro de la nueva barra. */
    #contentLayout .main-panel > .topbar button,
    #contentLayout .main-panel > .topbar .button,
    #contentLayout .main-panel > .topbar .icon-button,
    #contentLayout .main-panel > .topbar .carajillo-stable-action {
        flex: 0 0 var(--cc-desktop-control-size) !important;

        width: var(--cc-desktop-control-size) !important;
        min-width: var(--cc-desktop-control-size) !important;
        max-width: var(--cc-desktop-control-size) !important;

        height: var(--cc-desktop-control-size) !important;
        min-height: var(--cc-desktop-control-size) !important;
        max-height: var(--cc-desktop-control-size) !important;

        margin: 0 !important;
        padding: 7px !important;
    }

    /* Atrás queda siempre inmediatamente antes del selector. */
    #contentLayout .main-panel > .topbar > #backButton {
        order: 1 !important;

        color: var(--accent-dark) !important;
        background: var(--accent-soft) !important;
        border-color: var(--accent) !important;

        font-size: 20px !important;
        font-weight: 800 !important;
    }

    #contentLayout .main-panel > .topbar > #viewSelect {
        order: 2 !important;

        flex: 0 0 146px !important;
        width: 146px !important;
        min-width: 126px !important;
        max-width: 170px !important;
        height: var(--cc-desktop-control-size) !important;
        min-height: var(--cc-desktop-control-size) !important;

        margin: 0 !important;
    }

    /* --------------------------------------------------------
       BREADCRUMBS SIN CAJA EXTERIOR
       -------------------------------------------------------- */

    #contentLayout .main-panel > .topbar > #navigationRow {
        order: 3 !important;

        flex: 1 1 260px !important;
        align-self: stretch !important;

        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        width: auto !important;
        min-width: 150px !important;
        max-width: none !important;

        height: var(--cc-desktop-control-size) !important;
        min-height: var(--cc-desktop-control-size) !important;

        margin: 0 !important;
        padding: 0 7px !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 9px !important;

        overflow: hidden !important;
    }

    #contentLayout .main-panel #carajilloBreadcrumbsV2 {
        flex: 1 1 auto !important;

        display: flex !important;
        align-items: center !important;
        align-content: center !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 34px !important;
        height: 34px !important;

        gap: 2px !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    #contentLayout .main-panel #carajilloBreadcrumbsV2::-webkit-scrollbar {
        display: none !important;
    }

    #contentLayout .main-panel #carajilloBreadcrumbsV2 .carajillo-breadcrumb-v2,
    #contentLayout .main-panel #carajilloBreadcrumbsV2 .carajillo-breadcrumb-separator-v2 {
        flex: 0 0 auto !important;
    }

    /* Versiones antiguas de breadcrumbs se mantienen como estado
       interno, pero no se dibujan dos rutas al mismo tiempo. */
    #contentLayout .main-panel .breadcrumb-legacy,
    #contentLayout .main-panel #breadcrumb,
    #contentLayout .main-panel #carajilloClickableBreadcrumbs,
    #contentLayout .main-panel #carajilloNavigationLoader {
        display: none !important;
    }

    #contentLayout .main-panel #carajilloBreadcrumbSpinnerV2 {
        display: none !important;
    }

    #contentLayout .main-panel #carajilloBreadcrumbSpinnerV2.active {
        display: inline-flex !important;
        flex: 0 0 auto !important;
    }

    /* Los controles restantes se colocan después de navegación. */
    #contentLayout .main-panel > .topbar > #locationsToggle {
        order: 10 !important;
    }

    #contentLayout .main-panel > .topbar > #carajilloTopActions,
    #contentLayout .main-panel > .topbar > #carajilloStableToolbar,
    #contentLayout .main-panel > .topbar > #carajilloIconToolbarV2 {
        order: 11 !important;
    }

    #contentLayout .main-panel > .topbar > #adminButton {
        order: 20 !important;
    }

    #contentLayout .main-panel > .topbar > .search-box {
        order: 30 !important;

        flex: 1 1 220px !important;
        width: auto !important;
        min-width: 170px !important;
        max-width: 330px !important;
        height: var(--cc-desktop-control-size) !important;

        margin: 0 !important;
    }

    #contentLayout .main-panel > .topbar > .recursive-label {
        order: 31 !important;
        height: var(--cc-desktop-control-size) !important;
        margin: 0 !important;
    }

    #contentLayout .main-panel > .topbar > #logoutButton {
        order: 32 !important;
    }

    /* Los wrappers dinámicos continúan siendo transparentes para
       que los botones formen parte de la misma fila flexible. */
    #contentLayout .main-panel > .topbar #carajilloStableToolbar,
    #contentLayout .main-panel > .topbar #carajilloTopActions,
    #contentLayout .main-panel > .topbar .carajillo-top-actions {
        display: contents !important;
    }

    /* --------------------------------------------------------
       ELEMENTOS SOLICITADOS COMO ELIMINADOS
       -------------------------------------------------------- */

    #selectionCounter,
    #itemCounter,
    .multi-select-control,
    #multiSelectMode {
        display: none !important;
    }

    /* El botón original de subir conserva su listener, pero deja de
       aparecer en la barra porque ahora lo representa el FAB. */
    #contentLayout .main-panel > .topbar #uploadButton,
    #contentLayout .main-panel > .topbar #carajilloStableUpload,
    #contentLayout .main-panel > .topbar button[title="Subir archivos"] {
        display: none !important;
    }

    /* --------------------------------------------------------
       BOTÓN + FLOTANTE DE SUBIDA
       -------------------------------------------------------- */

    #desktopUploadFab {
        position: absolute !important;
        right: 18px !important;
        bottom: 18px !important;
        z-index: 70 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;

        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;

        margin: 0 !important;
        padding: 0 0 4px !important;

        color: var(--accent-dark) !important;
        background: rgba(255, 255, 255, 0.97) !important;

        border: 1px solid var(--accent) !important;
        border-radius: 16px !important;
        box-shadow:
            0 12px 30px rgba(32, 91, 128, 0.20),
            var(--shadow-small) !important;

        font-family: inherit !important;
        font-size: 38px !important;
        font-weight: 400 !important;
        line-height: 1 !important;

        cursor: pointer !important;
        user-select: none !important;

        transition:
            transform 140ms ease,
            box-shadow 140ms ease,
            background 140ms ease !important;
    }

    #desktopUploadFab:hover {
        transform: translateY(-2px) !important;
        background: var(--accent-soft) !important;
        box-shadow:
            0 16px 34px rgba(32, 91, 128, 0.24),
            var(--shadow-small) !important;
    }

    #desktopUploadFab:active {
        transform: translateY(0) scale(0.97) !important;
    }

    #desktopUploadFab:focus-visible {
        outline: 3px solid rgba(36, 146, 210, 0.24) !important;
        outline-offset: 3px !important;
    }

    /* Si la pantalla se estrecha, la barra puede saltar de línea sin
       volver a crear topbar o breadcrumbs exteriores. */
    @media screen and (max-width: 1180px) {
        #contentLayout .main-panel > .topbar > #navigationRow {
            flex-basis: 190px !important;
        }

        #contentLayout .main-panel > .topbar > .search-box {
            flex-basis: 180px !important;
            max-width: 270px !important;
        }
    }
}
/* CARAJILLO_DESKTOP_MAIN_SHELL_INTEGRATED_END */

/* CARAJILLO_DESKTOP_TOOLS_MENU_V1_START */

@media screen and (min-width: 761px) {

    /* --------------------------------------------------------
       ORDEN DE LA CABECERA CENTRAL
       -------------------------------------------------------- */

    #contentLayout .main-panel > .topbar > #backButton {
        order: 1 !important;
    }

    #contentLayout .main-panel > .topbar > #viewSelect {
        order: 2 !important;
    }

    #contentLayout .main-panel > .topbar > #navigationRow {
        order: 3 !important;
    }

    #contentLayout .main-panel > .topbar > #refreshButton {
        order: 80 !important;
        display: inline-flex !important;
    }

    #contentLayout .main-panel > .topbar > #locationsToggle {
        order: 81 !important;
        display: inline-flex !important;
    }

    #contentLayout .main-panel > .topbar > #desktopToolsMenuButton {
        order: 82 !important;
        display: inline-flex !important;
    }

    /* --------------------------------------------------------
       OCULTAR LOS MANDOS ORIGINALES EN LA CABECERA

       Permanecen en el DOM para conservar todos sus listeners.
       Los elementos del menú llaman a estos botones originales.
       -------------------------------------------------------- */

    #contentLayout .main-panel > .topbar > #carajilloTopActions,
    #contentLayout .main-panel > .topbar > #carajilloStableToolbar,
    #contentLayout .main-panel > .topbar > #carajilloIconToolbarV2,
    #contentLayout .main-panel > .topbar > #adminButton,
    #contentLayout .main-panel > .topbar > #infoToggle,
    #contentLayout .main-panel > .topbar > .search-box,
    #contentLayout .main-panel > .topbar > .recursive-label,
    #contentLayout .main-panel > .topbar > #logoutButton,
    #contentLayout .main-panel > .topbar > #scanAllFilesButton,
    #contentLayout .main-panel > .topbar > #carajilloIndexScanV3,
    #contentLayout .main-panel > .topbar > #carajilloPreviewScanV3,
    #contentLayout .main-panel > .topbar > #compressSelectedButton,
    #contentLayout .main-panel > .topbar > #deleteSelectedButton {
        display: none !important;
    }

    /* Cualquier botón superior adicional entra en el menú, salvo
       los tres mandos visibles y el propio botón de herramientas. */
    #contentLayout .main-panel > .topbar > button:not(#backButton):not(#refreshButton):not(#locationsToggle):not(#desktopToolsMenuButton) {
        display: none !important;
    }

    /* --------------------------------------------------------
       BOTÓN DE TRES PUNTOS
       -------------------------------------------------------- */

    #desktopToolsMenuButton {
        position: relative !important;
        flex: 0 0 var(--cc-desktop-control-size, 42px) !important;

        width: var(--cc-desktop-control-size, 42px) !important;
        min-width: var(--cc-desktop-control-size, 42px) !important;
        max-width: var(--cc-desktop-control-size, 42px) !important;

        height: var(--cc-desktop-control-size, 42px) !important;
        min-height: var(--cc-desktop-control-size, 42px) !important;
        max-height: var(--cc-desktop-control-size, 42px) !important;

        padding: 8px !important;
        color: var(--text, #102b46) !important;
        background: #ffffff !important;
        border: 1px solid var(--border, #c9dceb) !important;
        border-radius: 10px !important;
    }

    #desktopToolsMenuButton:hover,
    #desktopToolsMenuButton.active {
        color: var(--accent-dark, #0875b8) !important;
        background: var(--accent-soft, #e7f5ff) !important;
        border-color: var(--accent, #2999dc) !important;
    }

    #desktopToolsMenuButton svg {
        width: 22px !important;
        height: 22px !important;
        fill: currentColor !important;
        stroke: none !important;
    }

    /* --------------------------------------------------------
       PANEL DESPLEGABLE
       -------------------------------------------------------- */

    #desktopToolsMenuPanel {
        position: absolute !important;
        top: calc(100% - 4px) !important;
        right: 10px !important;
        z-index: 500 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;

        width: min(330px, calc(100vw - 32px)) !important;
        max-height: min(610px, calc(100vh - 115px)) !important;

        padding: 10px !important;
        box-sizing: border-box !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        color: var(--text, #102b46) !important;
        background: rgba(255, 255, 255, 0.99) !important;
        border: 1px solid var(--border, #c9dceb) !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 50px rgba(20, 57, 86, 0.20) !important;
        backdrop-filter: blur(18px) !important;
    }

    #desktopToolsMenuPanel[hidden] {
        display: none !important;
    }

    .cc-desktop-tools-menu-title {
        padding: 3px 5px 7px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.01em !important;
    }

    .cc-desktop-tools-menu-divider {
        height: 1px !important;
        margin: 4px 2px !important;
        background: var(--border, #d4e2ee) !important;
    }

    .cc-desktop-tools-search {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 5px !important;

        min-height: 42px !important;
        padding: 0 10px !important;

        background: #ffffff !important;
        border: 1px solid var(--border, #c9dceb) !important;
        border-radius: 10px !important;
    }

    .cc-desktop-tools-search input {
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 !important;

        color: inherit !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
    }

    .cc-desktop-tools-check {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;

        min-height: 42px !important;
        padding: 0 10px !important;

        font-size: 13px !important;
        font-weight: 650 !important;

        border-radius: 10px !important;
        cursor: pointer !important;
    }

    .cc-desktop-tools-check:hover {
        background: var(--accent-soft, #e7f5ff) !important;
    }

    .cc-desktop-tools-check input {
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        accent-color: var(--accent, #2999dc) !important;
    }

    .cc-desktop-tools-menu-item {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 9px !important;

        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 5px 10px !important;

        color: var(--text, #102b46) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;

        text-align: left !important;
        cursor: pointer !important;
    }

    .cc-desktop-tools-menu-item:hover:not(:disabled) {
        color: var(--accent-dark, #0875b8) !important;
        background: var(--accent-soft, #e7f5ff) !important;
    }

    .cc-desktop-tools-menu-item:disabled {
        opacity: 0.42 !important;
        cursor: not-allowed !important;
    }

    .cc-desktop-tools-menu-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        height: 32px !important;

        color: var(--accent-dark, #0875b8) !important;
        background: var(--accent-soft, #e7f5ff) !important;
        border-radius: 8px !important;

        font-size: 17px !important;
        font-weight: 800 !important;
    }

    .cc-desktop-tools-menu-icon svg {
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .cc-desktop-tools-menu-label {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 13px !important;
        font-weight: 680 !important;
    }

    .cc-desktop-tools-menu-empty {
        padding: 14px 10px !important;
        color: var(--text-soft, #67829b) !important;
        font-size: 12px !important;
        text-align: center !important;
    }
}

/* CARAJILLO_DESKTOP_TOOLS_MENU_V1_END */

/* CARAJILLO_TOOLS_MENU_PRO_STYLE_V1_START */

/* ============================================================
   ESTILO PROFESIONAL DEL MENÚ HERRAMIENTAS
   Inspirado visualmente en el modal “Añadir ubicación”.
   Solo cambia presentación.
   ============================================================ */

#desktopToolsMenuPanel {
    top: calc(100% + 8px) !important;
    right: 8px !important;

    width: min(380px, calc(100vw - 34px)) !important;
    max-height: min(700px, calc(100vh - 120px)) !important;

    padding: 14px !important;

    color: var(--text, #102b46) !important;
    background: #f7fbff !important;

    border: 1px solid #cfe0ee !important;
    border-radius: 18px !important;

    box-shadow:
        0 24px 60px rgba(15, 45, 75, 0.18),
        0 6px 18px rgba(15, 45, 75, 0.08) !important;

    backdrop-filter: none !important;
}

.cc-desktop-tools-menu-title {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    min-height: 58px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 6px 0 66px !important;

    color: var(--text, #102b46) !important;

    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
}

.cc-desktop-tools-menu-title::before {
    content: "⋮" !important;

    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    height: 46px !important;

    color: var(--accent, #2999dc) !important;
    background: linear-gradient(
        180deg,
        #e9f4ff 0%,
        #dff0ff 100%
    ) !important;

    border: 1px solid #c8ddef !important;
    border-radius: 12px !important;

    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.cc-desktop-tools-menu-title::after {
    content: "Acciones rápidas del explorador." !important;

    position: absolute !important;
    left: 66px !important;
    top: 34px !important;

    color: var(--text-soft, #6c86a0) !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.cc-desktop-tools-search {
    min-height: 54px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 14px !important;

    background: #ffffff !important;
    border: 1px solid #cbddeb !important;
    border-radius: 12px !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.cc-desktop-tools-search input {
    height: 44px !important;
    font-size: 14px !important;
}

.cc-desktop-tools-check {
    min-height: 50px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 12px !important;

    color: var(--text, #102b46) !important;
    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;

    font-size: 14px !important;
    font-weight: 650 !important;
}

.cc-desktop-tools-check:hover {
    background: #edf7ff !important;
    border-color: #d5e7f5 !important;
}

.cc-desktop-tools-check input {
    width: 18px !important;
    height: 18px !important;
}

.cc-desktop-tools-menu-divider {
    height: 1px !important;
    margin: 10px 0 12px 0 !important;
    background: #d7e5f1 !important;
}

.cc-desktop-tools-menu-item {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;

    min-height: 52px !important;
    margin: 0 0 6px 0 !important;
    padding: 8px 12px !important;

    color: var(--text, #102b46) !important;
    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;

    box-shadow: 0 1px 0 rgba(12, 47, 79, 0.03) !important;
}

.cc-desktop-tools-menu-item:hover:not(:disabled) {
    color: var(--accent-dark, #0875b8) !important;
    background: #edf7ff !important;
    border-color: #d3e6f4 !important;
}

.cc-desktop-tools-menu-item:active:not(:disabled) {
    transform: translateY(1px) !important;
}

.cc-desktop-tools-menu-item:disabled {
    opacity: 0.45 !important;
    background: #f5f8fb !important;
}

.cc-desktop-tools-menu-icon {
    width: 36px !important;
    height: 36px !important;

    color: var(--accent-dark, #0875b8) !important;
    background: #e8f5ff !important;
    border: 1px solid #d2e6f6 !important;
    border-radius: 10px !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

.cc-desktop-tools-menu-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
}

.cc-desktop-tools-menu-label {
    color: inherit !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
}

.cc-desktop-tools-menu-empty {
    margin-top: 4px !important;
    padding: 18px 14px !important;

    color: var(--text-soft, #6c86a0) !important;
    background: #ffffff !important;
    border: 1px dashed #d3e3ef !important;
    border-radius: 12px !important;

    font-size: 13px !important;
    text-align: center !important;
}

/* CARAJILLO_TOOLS_MENU_PRO_STYLE_V1_END */

/* CARAJILLO_TOOLS_MENU_WIDTH_FIX_V2_START */

/* ============================================================
   CORRECCIÓN DE ANCHO DEL MENÚ HERRAMIENTAS

   La barra principal fuerza todos sus botones a ser cuadrados.
   Como el desplegable está dentro de esa barra, sus filas también
   estaban heredando un ancho de aproximadamente 42 px.

   Estas reglas tienen mayor especificidad y afectan únicamente
   al contenido del menú Herramientas.
   ============================================================ */

@media screen and (min-width: 761px) {

    /* El panel mantiene el ancho profesional completo. */
    #contentLayout
    .main-panel
    > .topbar
    > #desktopToolsMenuPanel {
        width: min(380px, calc(100vw - 34px)) !important;
        min-width: min(380px, calc(100vw - 34px)) !important;
        max-width: min(380px, calc(100vw - 34px)) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: min(700px, calc(100vh - 120px)) !important;

        padding: 14px !important;
    }

    /* Cada herramienta vuelve a ser una fila completa. */
    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    button.cc-desktop-tools-menu-item {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;

        flex: none !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 52px !important;
        max-height: none !important;

        margin: 0 0 6px 0 !important;
        padding: 7px 12px !important;

        box-sizing: border-box !important;

        color: var(--text, #102b46) !important;
        background: #ffffff !important;

        border: 1px solid transparent !important;
        border-radius: 12px !important;

        text-align: left !important;
        overflow: visible !important;
    }

    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    button.cc-desktop-tools-menu-item:hover:not(:disabled) {
        color: var(--accent-dark, #0875b8) !important;
        background: #edf7ff !important;
        border-color: #d3e6f4 !important;
    }

    /* El contenedor del icono sigue siendo cuadrado. */
    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    .cc-desktop-tools-menu-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* El texto ocupa todo el espacio restante. */
    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    .cc-desktop-tools-menu-label {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        text-overflow: initial !important;
        white-space: normal !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* Cabecera ligeramente más aireada. */
    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    .cc-desktop-tools-menu-title {
        min-height: 58px !important;

        margin: 0 0 12px 0 !important;
        padding: 4px 4px 4px 66px !important;

        box-sizing: border-box !important;

        line-height: 1.1 !important;
        overflow: visible !important;
    }

    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    .cc-desktop-tools-menu-title::after {
        top: 35px !important;
    }

    /* Buscador y recursividad ocupan todo el ancho. */
    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    .cc-desktop-tools-search,
    #contentLayout
    .main-panel
    > .topbar
    #desktopToolsMenuPanel
    .cc-desktop-tools-check {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }
}

/* CARAJILLO_TOOLS_MENU_WIDTH_FIX_V2_END */

/* CARAJILLO_TOOLS_TITLE_BREADCRUMBS_FIX_V1_START */

@media screen and (min-width: 761px) {

    /* ========================================================
       TÍTULO DEL MENÚ HERRAMIENTAS
       ======================================================== */

    #desktopToolsMenuPanel
    .cc-desktop-tools-menu-title {
        min-height: 44px !important;

        margin: 0 0 10px 0 !important;
        padding: 0 4px 0 54px !important;

        display: flex !important;
        align-items: center !important;

        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    #desktopToolsMenuPanel
    .cc-desktop-tools-menu-title::before {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        font-size: 20px !important;
        border-radius: 10px !important;
    }

    /*
     * Eliminamos completamente:
     * "Acciones rápidas del explorador."
     */
    #desktopToolsMenuPanel
    .cc-desktop-tools-menu-title::after {
        content: none !important;
        display: none !important;
    }


    /* ========================================================
       BREADCRUMBS
       
       La regla general de la topbar convierte todos los botones
       en cuadrados. También estaba afectando accidentalmente a
       cada fragmento de las breadcrumbs, recortando el texto.
       ======================================================== */

    #contentLayout
    .main-panel
    > .topbar
    > #navigationRow {
        flex: 1 1 320px !important;

        width: auto !important;
        min-width: 180px !important;
        max-width: none !important;

        padding: 0 8px !important;

        overflow: hidden !important;
    }

    #contentLayout
    .main-panel
    > .topbar
    #carajilloBreadcrumbsV2 {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        gap: 3px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    #contentLayout
    .main-panel
    > .topbar
    #carajilloBreadcrumbsV2::-webkit-scrollbar {
        display: none !important;
    }

    /*
     * Recuperamos el ancho automático de cada parte de la ruta.
     * Esta regla gana a la regla de botones cuadrados de la topbar.
     */
    #contentLayout
    .main-panel
    > .topbar
    #carajilloBreadcrumbsV2
    button.carajillo-breadcrumb-v2,
    #contentLayout
    .main-panel
    > .topbar
    #carajilloBreadcrumbsV2
    .carajillo-breadcrumb-v2 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;

        margin: 0 !important;
        padding: 0 7px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;

        font-size: 12px !important;
        line-height: 1 !important;
    }

    #contentLayout
    .main-panel
    > .topbar
    #carajilloBreadcrumbsV2
    .carajillo-breadcrumb-separator-v2 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 8px !important;
        max-width: none !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;

        margin: 0 1px !important;
        padding: 0 !important;

        overflow: visible !important;
    }
}

/* CARAJILLO_TOOLS_TITLE_BREADCRUMBS_FIX_V1_END */

/* CARAJILLO_QUICK_LOCATIONS_STYLE_V1_START */

#addCurrentFolderLocationButton {
    display: none !important;
}

@media screen and (min-width: 761px) {
    .cc-location-context-menu {
        position: fixed;
        z-index: 2500;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        width: 286px;
        padding: 10px;
        color: var(--text, #102b46);
        background: #f7fbff;
        border: 1px solid var(--border, #c9dceb);
        border-radius: 14px;
        box-shadow: 0 18px 50px rgba(20, 57, 86, 0.22);
    }

    .cc-location-context-menu[hidden] {
        display: none !important;
    }

    .cc-location-context-title {
        display: grid;
        gap: 2px;
        padding: 5px 8px 9px;
        border-bottom: 1px solid var(--border, #d4e2ee);
    }

    .cc-location-context-title strong {
        overflow: hidden;
        font-size: 14px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-location-context-title span {
        color: var(--text-soft, #67829b);
        font-size: 11px;
        font-weight: 550;
    }

    .cc-location-context-item {
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        height: auto !important;
        max-height: none !important;
        padding: 6px 10px !important;
        color: var(--text, #102b46) !important;
        background: #ffffff !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        text-align: left !important;
        cursor: pointer !important;
    }

    .cc-location-context-item:hover {
        color: var(--accent-dark, #0875b8) !important;
        background: var(--accent-soft, #e7f5ff) !important;
        border-color: #d3e6f4 !important;
    }

    .cc-location-context-item.danger {
        color: #b83f4b !important;
    }

    .cc-location-context-item.danger:hover {
        color: #a62e3b !important;
        background: #fff0f2 !important;
        border-color: #f3cbd1 !important;
    }

    .cc-location-context-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: var(--accent-dark, #0875b8);
        background: var(--accent-soft, #e7f5ff);
        border: 1px solid #d2e6f6;
        border-radius: 9px;
    }

    .cc-location-context-item.danger .cc-location-context-icon {
        color: #b83f4b;
        background: #fff0f2;
        border-color: #f3cbd1;
    }

    .cc-location-context-icon svg,
    .cc-location-manage-modal .carajillo-location-symbol svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-location-context-divider {
        height: 1px;
        margin: 3px 2px;
        background: var(--border, #d4e2ee);
    }

    .cc-location-manage-modal {
        width: min(560px, calc(100vw - 34px));
    }

    .cc-location-manage-check-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .cc-location-manage-check-grid .carajillo-location-check {
        min-height: 76px;
        margin: 0;
    }
}

@media screen and (max-width: 760px) {
    #carajilloLocationContextMenu,
    #carajilloLocationManageOverlay {
        display: none !important;
    }
}

/* CARAJILLO_QUICK_LOCATIONS_STYLE_V1_END */