/*
============================================================
CARAJILLO CLOUD — DISEÑO PARA TELÉFONOS
============================================================

Este archivo se carga después de app.css.

Aquí no repetimos colores, iconos ni estilos generales.
Solo reajustamos la estructura cuando la pantalla es pequeña.
============================================================
*/


@media screen and (max-width: 760px) {

    /* ========================================================
       1. EVITAR DESBORDAMIENTO GENERAL
       ======================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        overscroll-behavior-x: none;
    }

    .app-view,
    .app-body,
    .main-area,
    .main-panel,
    .file-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* ========================================================
       2. CABECERA SUPERIOR
       ======================================================== */

    .topbar {
        min-height: 56px;

        gap: 5px;
        padding: 7px 6px;

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

        flex-wrap: nowrap;

        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }

    .topbar::-webkit-scrollbar {
        display: none;
    }

    .topbar-brand {
        flex: 0 0 auto;
        margin-right: 0;
    }

    .topbar-brand .cloud-logo {
        width: 30px;
        height: 24px;
    }

    .topbar-brand strong {
        display: none;
    }

    /*
    Todos los botones superiores conservan un tamaño táctil
    cómodo y no se encogen.
    */
    .topbar > button {
        flex: 0 0 38px;

        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;

        padding: 7px;
    }

    /*
    La ruta ocupa poco espacio, pero permite saber en qué
    carpeta estamos.
    */
    .breadcrumb {
        display: block;

        flex: 0 0 min(34vw, 150px);
        min-width: 80px;
        max-width: 150px;

        font-size: 12px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /*
    El buscador no debe ocupar media pantalla.
    */
    .search-box {
        flex: 0 0 145px;

        width: 145px;
        min-width: 145px;

        padding: 6px 8px;
    }

    .search-box input {
        width: 100%;
        min-width: 0;
    }

    /*
    En móvil mostramos solo la casilla.
    */
    .recursive-label {
        flex: 0 0 auto;
    }

    .recursive-label span {
        display: none;
    }


    /* ========================================================
       3. CUERPO PRINCIPAL
       ======================================================== */

    .app-body {
        min-height: calc(100dvh - 56px);
        display: block;
    }

    .main-area {
        padding: 5px;
    }

    .main-panel {
        min-height: calc(100dvh - 66px);

        border-radius: 12px;
    }


    /* ========================================================
       4. MENÚ LATERAL DE UBICACIONES
       ======================================================== */

    .locations-sidebar {
        position: fixed;

        top: 56px;
        bottom: 0;
        left: 0;

        width: min(82vw, 315px);
        min-width: min(82vw, 315px);
        height: auto;

        z-index: 300;

        background: rgba(255, 255, 255, 0.985);
        box-shadow:
            12px 0 28px
            rgba(27, 62, 88, 0.18);

        transform: translateX(0);

        transition:
            transform 180ms ease,
            opacity 150ms ease;
    }

    /*
    La clase collapsed la controla el módulo móvil.
    En móvil la aprovechamos para sacar completamente el panel.
    */
    .locations-sidebar.collapsed {
        width: min(82vw, 315px);
        min-width: min(82vw, 315px);

        opacity: 0;
        pointer-events: none;

        transform: translateX(-105%);
    }

    .locations-header {
        min-height: 52px;
        padding: 8px 10px;
    }

    .locations-list {
        height: calc(100% - 52px);
        padding: 7px;
    }

    .location-button {
        min-height: 50px;

        margin-bottom: 4px;
        padding: 8px 9px;
    }

    .location-symbol {
        width: 29px;
        height: 29px;
    }


    /* ========================================================
       5. BARRA DE ARCHIVOS
       ======================================================== */

    .file-toolbar {
        min-height: 49px;

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

        gap: 6px;
        padding: 6px 8px;

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

        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }

    .file-toolbar::-webkit-scrollbar {
        display: none;
    }

    /*
    Los botones movidos a esta barra no se aplastan.
    */
    .file-toolbar > button,
    .file-toolbar .button {
        flex: 0 0 auto;
    }

    .toolbar-spacer {
        display: none;
    }

    .selection-counter,
    #itemCounter {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 11px;
    }

    .view-select {
        flex: 0 0 auto;

        width: 122px;
        min-width: 122px;

        padding-inline: 7px;

        font-size: 12px;
    }


    /* ========================================================
       6. CONTENIDO DE ARCHIVOS
       ======================================================== */

    .file-content {
        min-height: calc(100dvh - 122px);

        padding: 6px;
        overflow-x: hidden;
    }

    .file-grid {
        width: 100%;
        min-width: 0;

        gap: 6px;
    }


    /* ========================================================
       7. VISTA DE LISTADO
       ======================================================== */

    /*
    En móvil dejamos solo:

        Nombre | Tamaño

    Tipo, modificado y permisos siguen visibles en el panel de
    información cuando se selecciona un elemento.
    */

    .file-content:has(.view-list)
    .file-list-sort-header {
        grid-template-columns:
            minmax(0, 1fr)
            82px !important;

        gap: 5px;

        padding-inline: 8px;
    }

    .file-content:has(.view-list)
    .file-list-sort-header
    > :nth-child(2),

    .file-content:has(.view-list)
    .file-list-sort-header
    > :nth-child(4),

    .file-content:has(.view-list)
    .file-list-sort-header
    > :nth-child(5) {
        display: none !important;
    }

    .view-list .file-card {
        grid-template-columns:
            43px
            minmax(0, 1fr)
            82px !important;

        gap: 6px;

        min-height: 52px;
        padding: 5px 7px;
    }

    /*
    Ocultamos las celdas adicionales de listado.
    */
    .view-list .file-list-type,
    .view-list .file-list-modified,
    .view-list .file-list-permissions {
        display: none !important;
    }

    .view-list .file-list-name {
        min-width: 0;
    }

    .view-list .file-name,
    .view-list .file-name-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .view-list .file-list-size {
        display: block !important;

        min-width: 0;

        font-size: 11px;
        text-align: right;
        white-space: nowrap;
    }

    /*
    Las previews e iconos de una fila no deben crecer demasiado.
    */
    .view-list .file-visual,
    .view-list .file-icon,
    .view-list .file-preview-media {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }


    /* ========================================================
       8. VISTA DE ICONOS
       ======================================================== */

    .view-small.file-grid,
    .view-medium.file-grid,
    .view-large.file-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 7px;
    }

    .view-small .file-card,
    .view-medium .file-card,
    .view-large .file-card {
        min-width: 0;
    }


    /* ========================================================
       9. PANEL DE INFORMACIÓN
       ======================================================== */

    /*
    En escritorio entra desde la derecha.

    En móvil se transforma en una hoja inferior.
    */
    .info-drawer {
        position: fixed;

        top: auto;
        left: 6px;
        right: 6px;
        bottom: 6px;

        width: auto;
        height: auto;
        max-height: calc(100dvh - 72px);

        z-index: 400;

        border-radius: 17px;

        transform: translateY(
            calc(100% + 22px)
        );
    }

    .info-drawer.open {
        transform: translateY(0);
    }

    .info-header {
        min-height: 49px;
        padding: 7px 10px;
    }

    .info-body {
        padding: 9px;
    }

    .info-preview {
        height: min(38vh, 230px);
    }


    /* ========================================================
       10. MODALES Y EDITOR
       ======================================================== */

    .modal,
    .modal-card,
    .editor-modal,
    .cc-editor-modal {
        width: calc(100vw - 12px) !important;
        max-width: none !important;

        height: calc(100dvh - 12px);
        max-height: none !important;

        margin: 6px !important;

        border-radius: 15px !important;
    }

    .editor-codemirror-toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;

        scrollbar-width: none;
    }

    .editor-codemirror-toolbar::-webkit-scrollbar {
        display: none;
    }


    /* ========================================================
       11. TAREAS Y AVISOS
       ======================================================== */

    .toast-stack,
    .task-stack,
    .carajillo-operation-stack {
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;

        width: auto !important;
        max-width: none !important;
    }

}


/* ==========================================================
   TELÉFONOS MUY ESTRECHOS
   ========================================================== */

@media screen and (max-width: 430px) {

    .breadcrumb {
        flex-basis: 100px;
        max-width: 100px;
    }

    .search-box {
        flex-basis: 125px;
        width: 125px;
        min-width: 125px;
    }

    .file-content:has(.view-list)
    .file-list-sort-header {
        grid-template-columns:
            minmax(0, 1fr)
            72px !important;
    }

    .view-list .file-card {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            72px !important;
    }

}


/* CARAJILLO_TOPBAR_GRID_REAL_MOBILE_V2 */

@media screen and (max-width: 760px) {

    /*
    ==========================================================
    1. TOPBAR MÓVIL
    ==========================================================

    Ocho columnas iguales.

    Cada botón ocupa una columna.
    Si hay más de ocho controles, continúan en la fila siguiente.
    */

    .topbar {
        display: grid !important;

        grid-template-columns:
            repeat(
                8,
                minmax(0, 1fr)
            ) !important;

        grid-auto-flow: row !important;
        grid-auto-rows: 40px !important;

        align-items: center !important;

        column-gap: 5px !important;
        row-gap: 5px !important;

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

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

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

        overflow: visible !important;
    }


    /*
    ==========================================================
    2. ELEMENTOS OCULTOS EN MÓVIL
    ==========================================================
    */

    #breadcrumb,
    .breadcrumb,
    .breadcrumbs,
    .carajillo-breadcrumbs,
    .carajillo-navigation-loader,

    .search-box,
    #searchInput,

    .recursive-label,
    #recursiveSearch {
        display: none !important;
    }


    /*
    El panel lateral de información desaparece completamente.
    */
    #infoDrawer,
    .info-drawer {
        display: none !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }


    /*
    Al estar oculto el panel de información, su botón tampoco
    resulta necesario en móvil.
    */
    #infoToggle {
        display: none !important;
    }


    /*
    ==========================================================
    3. MARCA
    ==========================================================
    */

    .topbar-brand {
        grid-column: span 1 !important;

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

        height: 40px !important;

        display: grid !important;
        place-items: center !important;

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

    .topbar-brand strong {
        display: none !important;
    }

    .topbar-brand .cloud-logo {
        width: 29px !important;
        height: 24px !important;

        margin: 0 !important;
    }


    /*
    ==========================================================
    4. ACCIONES DINÁMICAS COMO CELDAS
    ==========================================================
    */

    #carajilloTopActions,
    .carajillo-top-actions {
        display: contents !important;

        max-width: none !important;
        overflow: visible !important;
    }


    /*
    ==========================================================
    5. TODOS LOS BOTONES IGUALES
    ==========================================================
    */

    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar a.button,

    .carajillo-top-actions button,
    .carajillo-top-actions .button {
        grid-column: span 1 !important;

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

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

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

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

        border-radius: 11px !important;

        overflow: hidden !important;
    }


    /*
    ==========================================================
    6. CONTENIDO PRINCIPAL A TODO EL ANCHO
    ==========================================================
    */

    .app-view,
    .app-body,
    .main-area,
    .main-panel,
    .file-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

}


/*
En teléfonos especialmente estrechos utilizamos siete columnas.

Los botones mantienen un ancho táctil suficiente y se crea una
fila extra si es necesario.
*/

@media screen and (max-width: 430px) {

    .topbar {
        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            ) !important;

        grid-auto-rows: 38px !important;

        column-gap: 4px !important;
        row-gap: 4px !important;

        padding: 5px 4px !important;
    }

    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar a.button,

    .carajillo-top-actions button,
    .carajillo-top-actions .button {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 6px 3px !important;
    }

}

/* FIN_CARAJILLO_TOPBAR_GRID_REAL_MOBILE_V2 */

/* CARAJILLO_STABLE_TOOLBAR_GRID_MOBILE_FIX_V1 */

@media screen and (max-width: 760px) {

    .topbar {
        display: grid !important;

        grid-template-columns:
            repeat(
                8,
                minmax(0, 1fr)
            ) !important;

        grid-auto-flow: row !important;
        grid-auto-rows: 40px !important;

        column-gap: 5px !important;
        row-gap: 5px !important;

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

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

        padding: 6px !important;

        overflow: visible !important;
    }


    /*
    En móvil se ocultan navegación textual y búsqueda.
    */
    #breadcrumb,
    #carajilloBreadcrumbsV2,
    #carajilloBreadcrumbSpinnerV2,

    .topbar > .search-box,
    #searchInput,

    .topbar > .recursive-label,
    #recursiveSearch,

    #infoToggle {
        display: none !important;
    }


    .topbar > .topbar-brand {
        grid-column: span 1 !important;

        width: 100% !important;
        height: 40px !important;

        display: grid !important;
        place-items: center !important;

        padding: 0 !important;
    }


    .topbar-brand strong {
        display: none !important;
    }


    #carajilloStableToolbar {
        display: contents !important;
    }


    #carajilloTopActions,
    #carajilloIconToolbarV2 {
        display: none !important;
    }


    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar .carajillo-stable-action {
        grid-column: span 1 !important;

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

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

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

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

        border-radius: 10px !important;
    }

}


@media screen and (max-width: 430px) {

    .topbar {
        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            ) !important;

        grid-auto-rows: 38px !important;

        column-gap: 4px !important;
        row-gap: 4px !important;

        padding: 5px 4px !important;
    }


    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar .carajillo-stable-action {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

}

/* FIN_CARAJILLO_STABLE_TOOLBAR_GRID_MOBILE_FIX_V1 */


/* CARAJILLO_TOPBAR_FANCY_MOBILE_V1 */

@media screen and (max-width: 760px) {

    /*
    ==========================================================
    TOPBAR MÓVIL
    ==========================================================
    */

    .topbar {
        display: grid !important;

        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            ) !important;

        grid-auto-flow: row !important;
        grid-auto-rows: 40px !important;

        align-items: center !important;

        column-gap: 5px !important;
        row-gap: 5px !important;

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

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

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

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /*
    En móvil quitamos todo texto largo.
    */

    #breadcrumb,
    #carajilloBreadcrumbsV2,
    #carajilloBreadcrumbSpinnerV2,

    .topbar > .search-box,
    #searchInput,

    .topbar > .recursive-label,
    #recursiveSearch,

    #infoToggle {
        display: none !important;
    }


    /*
    Logo compacto.
    */

    .topbar > .topbar-brand {
        grid-column: span 1 !important;

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

        height: 40px !important;

        display: grid !important;
        place-items: center !important;

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


    .topbar-brand strong {
        display: none !important;
    }


    .topbar-brand .cloud-logo {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;

        height: 24px !important;

        margin: 0 !important;
    }


    /*
    Botones dinámicos como celdas individuales.
    */

    #carajilloStableToolbar {
        display: contents !important;
    }


    #carajilloTopActions,
    #carajilloIconToolbarV2 {
        display: none !important;
    }


    /*
    Todos los botones táctiles iguales.
    */

    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar .carajillo-stable-action {
        grid-column: span 1 !important;

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

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

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

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

        border-radius: 10px !important;

        overflow: hidden !important;
    }

}


/*
Pantalla móvil normal.
*/

@media screen and (max-width: 560px) {

    .topbar {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            ) !important;
    }

}


/*
Móvil estrecho.
*/

@media screen and (max-width: 420px) {

    .topbar {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            ) !important;

        grid-auto-rows: 38px !important;

        column-gap: 4px !important;
        row-gap: 4px !important;

        padding: 5px 4px !important;
    }


    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar .carajillo-stable-action {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 5px 3px !important;
    }

}


/*
Móviles muy estrechos.
*/

@media screen and (max-width: 340px) {

    .topbar {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;
    }

}

/* FIN_CARAJILLO_TOPBAR_FANCY_MOBILE_V1 */


/* CARAJILLO_TOPBAR_SQUARE_BUTTONS_MOBILE_V1 */

@media screen and (max-width: 760px) {

    :root {
        --cc-topbar-button-size: 40px;
        --cc-topbar-gap: 5px;
    }


    .topbar {
        display: grid !important;

        grid-template-columns:
            repeat(
                auto-fit,
                var(--cc-topbar-button-size)
            ) !important;

        grid-auto-columns:
            var(--cc-topbar-button-size) !important;

        grid-auto-rows:
            var(--cc-topbar-button-size) !important;

        grid-auto-flow: row !important;

        align-items: center !important;
        justify-content: start !important;

        column-gap: var(--cc-topbar-gap) !important;
        row-gap: var(--cc-topbar-gap) !important;

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

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

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

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /*
    Móvil: ocultamos elementos de texto largos.
    */
    #breadcrumb,
    #carajilloBreadcrumbsV2,
    #carajilloBreadcrumbSpinnerV2,

    .topbar > .search-box,
    #searchInput,

    .topbar > .recursive-label,
    #recursiveSearch,

    #infoToggle {
        display: none !important;
    }


    /*
    Logo: una única celda cuadrada.
    */
    .topbar > .topbar-brand {
        grid-column: span 1 !important;

        width: var(--cc-topbar-button-size) !important;
        min-width: var(--cc-topbar-button-size) !important;
        max-width: var(--cc-topbar-button-size) !important;

        height: var(--cc-topbar-button-size) !important;

        display: grid !important;
        place-items: center !important;

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


    .topbar-brand strong {
        display: none !important;
    }


    .topbar-brand .cloud-logo {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;

        height: 24px !important;

        margin: 0 !important;
    }


    /*
    Barra dinámica convertida en botones independientes.
    */
    #carajilloStableToolbar {
        display: contents !important;
    }


    #carajilloTopActions,
    #carajilloIconToolbarV2 {
        display: none !important;
    }


    /*
    Botones móviles exactamente cuadrados.
    */
    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar .carajillo-stable-action {
        grid-column: span 1 !important;

        width: var(--cc-topbar-button-size) !important;
        min-width: var(--cc-topbar-button-size) !important;
        max-width: var(--cc-topbar-button-size) !important;

        height: var(--cc-topbar-button-size) !important;
        min-height: var(--cc-topbar-button-size) !important;
        max-height: var(--cc-topbar-button-size) !important;

        flex: 0 0 var(--cc-topbar-button-size) !important;

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

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

        box-sizing: border-box !important;

        border-radius: 10px !important;

        overflow: hidden !important;
    }

}


/*
Móviles estrechos: conservamos el aspecto cuadrado reduciendo
ambas dimensiones simultáneamente.
*/

@media screen and (max-width: 420px) {

    :root {
        --cc-topbar-button-size: 38px;
        --cc-topbar-gap: 4px;
    }


    .topbar {
        padding: 5px 4px !important;
    }


    .topbar button,
    .topbar .button,
    .topbar .icon-button,
    .topbar .carajillo-stable-action {
        padding: 5px 3px !important;
    }

}

/* FIN_CARAJILLO_TOPBAR_SQUARE_BUTTONS_MOBILE_V1 */

/* CARAJILLO_RESPONSIVE_SHELL_MOBILE_V3
============================================================
ÚLTIMA CAPA RESPONSIVE
============================================================

Estas reglas ganan a los antiguos parches móviles y mantienen
visibles búsqueda y breadcrumbs. No cambian colores ni lógica.
============================================================
*/

@media screen and (max-width: 760px) {
    :root {
        --cc-topbar-control-size: 40px;
        --cc-topbar-control-gap: 5px;
        --cc-shell-gap: 6px;
        --cc-shell-padding: 6px;
        --cc-locations-panel-width: min(82vw, 300px);
        --cc-panel-tab-size: 40px;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #appView.app-view:not(.hidden) {
        grid-template-rows:
            auto
            auto
            minmax(0, 1fr) !important;
    }

    /* ------------------------------------------------------
       TOPBAR: SIN SCROLL HORIZONTAL, TODO ENVUELVE
       ------------------------------------------------------ */
    #appView > .topbar {
        display: flex !important;
        align-items: center !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap: var(--cc-topbar-control-gap) !important;

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

        padding: 6px !important;

        overflow: visible !important;
    }

    #appView > .topbar > .topbar-brand {
        flex: 0 0 var(--cc-topbar-control-size) !important;

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

        display: grid !important;
        place-items: center !important;

        padding: 0 !important;
    }

    #appView > .topbar .topbar-brand strong {
        display: none !important;
    }

    #appView > .topbar .topbar-brand .cloud-logo {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 24px !important;
        margin: 0 !important;
    }

    #appView > .topbar button,
    #appView > .topbar .button,
    #appView > .topbar .icon-button,
    #appView > .topbar .carajillo-stable-action {
        display: inline-flex !important;

        flex: 0 0 var(--cc-topbar-control-size) !important;

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

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

        padding: 6px 4px !important;
    }

    /* Se recuperan búsqueda y Recursiva: al no caber, saltan. */
    #appView > .topbar > .search-box {
        display: flex !important;
        flex: 1 1 180px !important;

        width: auto !important;
        min-width: 150px !important;
        max-width: none !important;
        height: var(--cc-topbar-control-size) !important;
    }

    #appView > .topbar > .search-box input,
    #searchInput {
        display: block !important;
    }

    #appView > .topbar > .recursive-label {
        display: flex !important;
        flex: 0 0 auto !important;
        height: var(--cc-topbar-control-size) !important;
    }

    #appView > .topbar > .recursive-label span {
        display: inline !important;
    }

    #recursiveSearch {
        display: inline-block !important;
    }

    /* ------------------------------------------------------
       BREADCRUMBS SIEMPRE VISIBLES
       ------------------------------------------------------ */
    #navigationRow.navigation-row {
        display: flex !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 5px 8px !important;
    }

    #carajilloBreadcrumbsV2.carajillo-breadcrumbs-row {
        display: flex !important;
        flex-wrap: wrap !important;
        min-height: 32px !important;
        font-size: 12px !important;
    }

    #carajilloBreadcrumbSpinnerV2 {
        display: inline-flex !important;
    }

    #navigationRow > #breadcrumb {
        display: none !important;
    }

    /* ------------------------------------------------------
       CAJA PRINCIPAL
       ------------------------------------------------------ */
    #contentLayout.content-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        padding: var(--cc-shell-padding) !important;
        gap: var(--cc-shell-gap) !important;
    }

    #contentLayout > .app-body {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        height: 100% !important;
    }

    #contentLayout .main-area,
    #contentLayout .main-panel,
    #contentLayout .file-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #contentLayout .main-area,
    #contentLayout .main-panel {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    /* Ubicaciones se superpone y conserva exactamente la altura
       de la caja central. */
    #contentLayout .locations-sidebar {
        display: block !important;

        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: var(--cc-locations-panel-width) !important;
        min-width: var(--cc-locations-panel-width) !important;
        max-width: var(--cc-locations-panel-width) !important;

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

        z-index: 60 !important;

        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    #contentLayout .locations-sidebar.collapsed {
        display: block !important;

        width: var(--cc-locations-panel-width) !important;
        min-width: var(--cc-locations-panel-width) !important;
        max-width: var(--cc-locations-panel-width) !important;

        opacity: 0 !important;
        transform: translateX(-110%) !important;
        pointer-events: none !important;
    }

    #contentLayout > #locationsToggle {
        display: inline-flex !important;
        left: calc(
            var(--cc-shell-padding)
            + var(--cc-locations-panel-width)
            - (var(--cc-panel-tab-size) / 2)
        ) !important;
    }

    #contentLayout:has(.locations-sidebar.collapsed) > #locationsToggle {
        left: calc(var(--cc-shell-padding) - 2px) !important;
    }

    /* En teléfono el panel de información se sacrifica para que
       el explorador conserve el máximo ancho. */
    #contentLayout > #infoDrawer,
    #contentLayout > .info-drawer,
    #contentLayout > #infoToggle {
        display: none !important;
    }

    /* ------------------------------------------------------
       DOS COLUMNAS TAMBIÉN EN MODO ICONOS GRANDES
       ------------------------------------------------------ */
    .view-large {
        --item-size: max(132px, calc((100vw - 34px) / 2));
        --thumb-height: clamp(122px, 39vw, 190px);
    }

    .file-grid {
        gap: 6px !important;
    }

    .file-content {
        padding: 6px !important;
    }
}

@media screen and (max-width: 420px) {
    :root {
        --cc-topbar-control-size: 38px;
        --cc-topbar-control-gap: 4px;
        --cc-panel-tab-size: 38px;
    }

    #appView > .topbar {
        padding: 5px 4px !important;
    }

    #appView > .topbar > .search-box {
        flex-basis: 155px !important;
        min-width: 135px !important;
    }

    #appView > .topbar > .recursive-label span {
        display: none !important;
    }

    .view-large {
        --item-size: max(122px, calc((100vw - 26px) / 2));
        --thumb-height: clamp(112px, 38vw, 165px);
    }
}

/* FIN_CARAJILLO_RESPONSIVE_SHELL_MOBILE_V3 */


/* CARAJILLO_MOBILE_FINISH_V4
============================================================
REMATE MÓVIL
============================================================
- El spinner de breadcrumbs desaparece al terminar.
- Información vuelve a estar disponible desde la topbar.
- El visor de imagen/vídeo aprovecha prácticamente toda la pantalla.
============================================================
*/

@media screen and (max-width: 760px) {
    /* El V3 lo mostraba siempre debido a display:inline-flex !important. */
    #carajilloBreadcrumbSpinnerV2:not(.active) {
        display: none !important;
    }

    #carajilloBreadcrumbSpinnerV2.active {
        display: inline-flex !important;
    }

    /* La información se abre como hoja inferior, no como columna. */
    #contentLayout.content-layout > #infoDrawer.info-drawer {
        position: fixed !important;
        top: auto !important;
        right: 4px !important;
        bottom: 4px !important;
        left: 4px !important;

        z-index: 430 !important;

        display: none !important;

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

        height: auto !important;
        max-height: calc(100dvh - 54px) !important;

        border-radius: 10px !important;

        opacity: 0 !important;
        transform: translateY(calc(100% + 14px)) !important;
        pointer-events: none !important;
    }

    #contentLayout.content-layout > #infoDrawer.info-drawer.open {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    #contentLayout #infoDrawer .info-header {
        min-height: 42px !important;
        padding: 4px 6px !important;
    }

    #contentLayout #infoDrawer .info-body {
        padding: 6px !important;
    }

    #contentLayout #infoDrawer .info-preview {
        height: min(42dvh, 300px) !important;
        margin-bottom: 7px !important;
        border-radius: 7px !important;
    }

    #contentLayout #infoDrawer .info-actions {
        gap: 4px !important;
        margin-top: 8px !important;
    }

    #contentLayout #infoDrawer .info-actions .button {
        min-height: 31px !important;
        padding: 4px 7px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }

    /* ------------------------------------------------------
       VISOR DE ARCHIVOS: CASI TODA LA PANTALLA PARA EL MEDIO
       ------------------------------------------------------ */
    .modal-backdrop:has(.viewer-modal) {
        padding: 2px !important;
    }

    .viewer-modal {
        width: calc(100vw - 4px) !important;
        min-width: 0 !important;
        max-width: none !important;

        height: calc(100dvh - 4px) !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        border-radius: 7px !important;
        border-width: 1px !important;
    }

    .viewer-modal .modal-header {
        flex: 0 0 auto !important;

        min-height: 40px !important;
        padding: 3px 4px !important;
        gap: 4px !important;
    }

    .viewer-modal .modal-header h3 {
        flex: 1 1 auto !important;
        min-width: 0 !important;

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

    .viewer-modal .modal-header > div {
        flex: 0 0 auto !important;
        gap: 3px !important;
    }

    .viewer-modal .modal-header .button {
        min-height: 29px !important;
        height: 29px !important;

        padding: 3px 6px !important;

        border-radius: 6px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .viewer-modal .modal-header .button.icon,
    .viewer-modal #viewerClose {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        padding: 3px !important;
        font-size: 18px !important;
    }

    .viewer-modal .modal-body {
        flex: 1 1 auto !important;

        display: flex !important;

        min-height: 0 !important;
        padding: 2px !important;
        overflow: hidden !important;
    }

    .viewer-modal .viewer-stage {
        flex: 1 1 auto !important;

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

        border-radius: 4px !important;
    }

    .viewer-modal .viewer-stage img,
    .viewer-modal .viewer-stage video {
        width: auto !important;
        height: auto !important;

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

        object-fit: contain !important;
    }

    .viewer-modal .viewer-stage video {
        width: 100% !important;
    }

    .viewer-modal .viewer-side-arrow {
        width: 33px !important;
        height: 47px !important;

        border-radius: 8px !important;
        font-size: 22px !important;
        opacity: 0.82 !important;
    }

    .viewer-modal .viewer-side-arrow.previous {
        left: 3px !important;
    }

    .viewer-modal .viewer-side-arrow.next {
        right: 3px !important;
    }
}

@media screen and (max-width: 390px) {
    .viewer-modal .modal-header h3 {
        font-size: 11px !important;
    }

    .viewer-modal .modal-header .button {
        padding-inline: 4px !important;
        font-size: 9px !important;
    }
}

/* FIN_CARAJILLO_MOBILE_FINISH_V4 */

/* CARAJILLO_MOBILE_INFO_ALWAYS_HIDDEN_V5 */
#infoToggle {
    display: none !important;
}

@media screen and (max-width: 760px) {
    #contentLayout.content-layout > #infoDrawer.info-drawer,
    #contentLayout.content-layout > #infoDrawer.info-drawer.open,
    #contentLayout > .info-drawer,
    #contentLayout > .info-drawer.open {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: none !important;
    }

    /*
     * El explorador ocupa todo el ancho disponible al desaparecer
     * completamente la columna o ventana de información.
     */
    #contentLayout.content-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* FIN_CARAJILLO_MOBILE_INFO_ALWAYS_HIDDEN_V5 */

/* CARAJILLO_MULTISELECT_CHECK_MOBILE_V2 */

@media screen and (max-width: 760px) {

    .multi-select-control {
        min-height: 34px;

        gap: 5px;
        padding-inline: 8px;

        font-size: 11px;
    }

    .multi-select-control input {
        width: 15px;
        height: 15px;
    }
}

/* FIN_CARAJILLO_MULTISELECT_CHECK_MOBILE_V2 */

/* CARAJILLO_MOBILE_NEXTCLOUD_INTEGRATED_V2_START */
/**
 * ============================================================
 * CARAJILLO CLOUD — INTERFAZ MÓVIL TIPO NEXTCLOUD
 * ============================================================
 *
 * Este archivo se carga después de mobile.css y solo en pantallas
 * de hasta 760 px. No altera la versión de escritorio.
 * ============================================================
 */


/* Los controles permanecen invisibles en escritorio. */
#ccMobileHeader,
#ccMobileSearchPanel,
#ccMobileFab,
#ccMobileSheetBackdrop,
#ccMobileClipboardBar {
    display: none;
}

@media screen and (max-width: 760px) {

    :root {
        --cc-mobile-header-height: 58px;
        --cc-mobile-safe-bottom:
            max(10px, env(safe-area-inset-bottom));
    }


    /* ========================================================
       1. ESTRUCTURA PRINCIPAL
       ======================================================== */

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

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

        grid-template-rows:
            var(--cc-mobile-header-height)
            minmax(0, 1fr) !important;

        height: 100vh !important;
        height: 100dvh !important;

        overflow: hidden !important;
    }

    /*
     * La barra antigua continúa en el DOM para conservar todos sus
     * botones, IDs y listeners. Solo deja de ocupar espacio en móvil.
     */
    #appView > .topbar,
    #appView > #navigationRow.navigation-row {
        display: none !important;
    }

    #appView > #contentLayout.content-layout {
        grid-column: 1 !important;
        grid-row: 2 !important;

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

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

        padding: 5px !important;

        overflow: hidden !important;
    }

    #contentLayout > .app-body,
    #contentLayout .main-area,
    #contentLayout .main-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

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

    #contentLayout .main-area {
        padding: 0 !important;
    }

    #contentLayout .main-panel {
        border-radius: 13px !important;
        overflow: hidden !important;
    }


    /* ========================================================
       2. BARRA SUPERIOR COMPACTA
       ======================================================== */

    #ccMobileHeader.cc-mobile-header {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: relative;
        z-index: 720;

        display: grid;
        grid-template-columns:
            42px
            minmax(0, 1fr)
            42px
            42px;

        align-items: center;
        gap: 8px;

        width: 100%;
        min-width: 0;
        height: var(--cc-mobile-header-height);

        padding:
            max(7px, env(safe-area-inset-top))
            8px
            7px;

        color: var(--text);
        background: rgba(255, 255, 255, 0.97);

        border-bottom: 1px solid var(--border);

        box-shadow:
            0 5px 18px
            rgba(36, 79, 111, 0.08);

        backdrop-filter: blur(11px);
        -webkit-backdrop-filter: blur(11px);
    }

    #ccMobileHeader.selection-mode {
        background: var(--accent-soft);
        border-bottom-color: #a8cee5;
    }

    .cc-mobile-square-button {
        width: 42px;
        min-width: 42px;
        max-width: 42px;

        height: 42px;
        min-height: 42px;
        max-height: 42px;

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

        margin: 0;
        padding: 8px;

        color: #315f7f;
        background: #ffffff;

        border: 1px solid var(--border-strong);
        border-radius: 11px;

        box-shadow: none;
        cursor: pointer;
    }

    .cc-mobile-square-button:active {
        transform: translateY(1px);
        background: var(--surface-blue);
    }

    .cc-mobile-square-button svg,
    .cc-mobile-fab svg,
    .cc-mobile-sheet svg,
    .cc-mobile-search-panel svg,
    .cc-mobile-clipboard-bar svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cc-mobile-heading {
        min-width: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 1px;
    }

    .cc-mobile-heading strong,
    .cc-mobile-heading span {
        display: block;
        min-width: 0;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cc-mobile-heading strong {
        color: var(--text);
        font-size: 15px;
        font-weight: 760;
        line-height: 1.18;
    }

    .cc-mobile-heading span {
        color: var(--text-soft);
        font-size: 10.5px;
        font-weight: 560;
        line-height: 1.22;
    }


    /* ========================================================
       3. BÚSQUEDA DESPLEGABLE
       ======================================================== */

    #ccMobileSearchPanel.cc-mobile-search-panel {
        position: fixed;
        z-index: 1000;

        top: calc(
            var(--cc-mobile-header-height)
            + max(5px, env(safe-area-inset-top))
        );
        left: 7px;
        right: 7px;

        display: grid;
        grid-template-columns:
            24px
            minmax(0, 1fr)
            34px;

        align-items: center;
        gap: 6px;

        min-height: 48px;
        padding: 5px 6px 5px 10px;

        background: #ffffff;
        border: 1px solid var(--border-strong);
        border-radius: 13px;

        box-shadow:
            0 13px 32px
            rgba(23, 61, 88, 0.18);
    }

    #ccMobileSearchPanel.hidden {
        display: none !important;
    }

    .cc-mobile-search-icon {
        display: inline-flex;
        color: var(--text-soft);
    }

    #ccMobileSearchInput {
        width: 100%;
        min-width: 0;
        height: 36px;

        margin: 0;
        padding: 0 4px;

        color: var(--text);
        background: transparent;

        border: 0;
        outline: 0;

        font: inherit;
        font-size: 14px;
    }

    .cc-mobile-search-close,
    .cc-mobile-sheet-close {
        width: 34px;
        min-width: 34px;
        height: 34px;

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

        margin: 0;
        padding: 6px;

        color: var(--text-soft);
        background: #ffffff;
        border: 1px solid var(--border);
        border-radius: 9px;
    }


    /* ========================================================
       4. EXPLORADOR SIN BARRA DE BOTONES
       ======================================================== */

    .main-panel > .file-toolbar {
        display: none !important;
    }

    #fileContent.file-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

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

        padding: 7px !important;
        overflow: auto !important;
        overscroll-behavior: contain;
    }

    #fileContent .file-card {
        touch-action: pan-y;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;

        transition:
            transform 120ms ease,
            box-shadow 140ms ease,
            border-color 140ms ease,
            background 140ms ease;
    }

    #fileContent .file-card.cc-mobile-pressing {
        transform: scale(0.975);
        border-color: #8bbbd9 !important;
        box-shadow:
            0 0 0 3px
            rgba(76, 157, 205, 0.13) !important;
    }

    #fileContent .file-card.selected {
        box-shadow:
            0 0 0 3px
            rgba(64, 151, 204, 0.18) !important;
    }

    /* Marca de selección visible sin tapar la preview. */
    #fileContent .file-card.selected::after {
        content: "✓";

        position: absolute;
        top: 7px;
        right: 7px;
        z-index: 5;

        width: 25px;
        height: 25px;

        display: grid;
        place-items: center;

        color: #ffffff;
        background: var(--accent);

        border: 2px solid #ffffff;
        border-radius: 8px;

        box-shadow:
            0 3px 8px
            rgba(31, 92, 129, 0.24);

        font-size: 14px;
        font-weight: 800;
        line-height: 1;
    }

    #fileContent .file-card {
        position: relative;
    }


    /* ========================================================
       5. PANEL DE UBICACIONES
       ======================================================== */

    #contentLayout .locations-sidebar {
        position: fixed !important;

        top: var(--cc-mobile-header-height) !important;
        bottom: 0 !important;
        left: 0 !important;

        width: min(86vw, 330px) !important;
        min-width: min(86vw, 330px) !important;
        max-width: min(86vw, 330px) !important;
        height: auto !important;

        z-index: 900 !important;

        border-radius: 0 16px 16px 0 !important;

        box-shadow:
            13px 0 32px
            rgba(24, 62, 88, 0.2) !important;
    }

    #contentLayout .locations-sidebar.collapsed {
        width: min(86vw, 330px) !important;
        min-width: min(86vw, 330px) !important;
        max-width: min(86vw, 330px) !important;

        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-106%) !important;
    }


    /* ========================================================
       6. BOTÓN CUADRADO +
       ======================================================== */

    #ccMobileFab.cc-mobile-fab {
        position: fixed;
        z-index: 840;

        right: 13px;
        bottom: var(--cc-mobile-safe-bottom);

        width: 54px;
        min-width: 54px;
        height: 54px;
        min-height: 54px;

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

        margin: 0;
        padding: 11px;

        color: var(--accent-dark);
        background: #ffffff;

        border: 1px solid #9dc8e2;
        border-radius: 14px;

        box-shadow:
            0 10px 25px
            rgba(28, 91, 132, 0.22);
    }

    #ccMobileFab:active {
        transform: translateY(1px) scale(0.98);
        background: var(--surface-blue);
    }

    #ccMobileFab.hidden {
        display: none !important;
    }


    /* ========================================================
       7. MENÚ INFERIOR
       ======================================================== */

    #ccMobileSheetBackdrop.cc-mobile-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1300;

        display: flex;
        align-items: flex-end;
        justify-content: stretch;

        padding-top: 52px;

        background:
            rgba(22, 48, 67, 0.28);

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    #ccMobileSheetBackdrop.hidden {
        display: none !important;
    }

    #ccMobileSheet.cc-mobile-sheet {
        width: 100%;
        max-height: min(82dvh, 720px);

        display: flex;
        flex-direction: column;

        padding-bottom:
            max(8px, env(safe-area-inset-bottom));

        background: #ffffff;
        border: 1px solid var(--border);
        border-bottom: 0;
        border-radius: 20px 20px 0 0;

        box-shadow:
            0 -16px 40px
            rgba(24, 58, 81, 0.2);

        overflow: hidden;

        animation:
            cc-mobile-sheet-in
            170ms ease-out;
    }

    @keyframes cc-mobile-sheet-in {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .cc-mobile-sheet-handle {
        width: 42px;
        height: 4px;

        flex: 0 0 auto;

        margin: 8px auto 3px;

        background: #c8d9e5;
        border-radius: 999px;
    }

    .cc-mobile-sheet-header {
        min-height: 48px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;
        padding: 5px 10px 7px 14px;

        border-bottom: 1px solid var(--border);
    }

    .cc-mobile-sheet-header strong {
        min-width: 0;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        color: var(--text);
        font-size: 15px;
        font-weight: 760;
    }

    .cc-mobile-sheet-body {
        min-height: 0;

        padding: 5px 7px 10px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .cc-mobile-menu-section {
        padding: 13px 9px 5px;

        color: var(--text-soft);

        font-size: 10px;
        font-weight: 760;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .cc-mobile-menu-item {
        width: 100%;
        min-height: 50px;

        display: grid;
        grid-template-columns:
            36px
            minmax(0, 1fr)
            auto;

        align-items: center;
        gap: 8px;

        margin: 0;
        padding: 7px 9px;

        color: var(--text);
        background: transparent;

        border: 0;
        border-radius: 11px;

        text-align: left;
    }

    .cc-mobile-menu-item:active:not(:disabled) {
        background: var(--surface-blue);
    }

    .cc-mobile-menu-item:disabled {
        opacity: 0.42;
    }

    .cc-mobile-menu-item.danger {
        color: var(--danger);
    }

    .cc-mobile-menu-item.checked {
        background: var(--accent-soft);
    }

    .cc-mobile-menu-icon {
        width: 34px;
        height: 34px;

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

        color: #36789f;
        background: #f4f9fc;

        border: 1px solid #d7e7f1;
        border-radius: 9px;
    }

    .cc-mobile-menu-item.danger
    .cc-mobile-menu-icon {
        color: var(--danger);
        background: #fff7f7;
        border-color: #f0d3d3;
    }

    .cc-mobile-menu-copy {
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .cc-mobile-menu-copy strong,
    .cc-mobile-menu-copy small {
        min-width: 0;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cc-mobile-menu-copy strong {
        color: inherit;
        font-size: 13px;
        font-weight: 680;
    }

    .cc-mobile-menu-copy small {
        color: var(--text-soft);
        font-size: 10.5px;
        font-weight: 520;
    }

    .cc-mobile-menu-check {
        width: 25px;
        height: 25px;

        display: grid;
        place-items: center;

        color: #ffffff;
        background: var(--accent);
        border-radius: 8px;

        font-size: 13px;
        font-weight: 800;
    }


    /* ========================================================
       8. BARRA DEL PORTAPAPELES
       ======================================================== */

    #ccMobileClipboardBar.cc-mobile-clipboard-bar {
        position: fixed;
        z-index: 835;

        left: 9px;
        right: 78px;
        bottom: var(--cc-mobile-safe-bottom);

        min-height: 52px;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto
            32px;

        align-items: center;
        gap: 6px;

        padding: 6px 6px 6px 11px;

        color: var(--text);
        background: rgba(255, 255, 255, 0.98);

        border: 1px solid var(--border-strong);
        border-radius: 13px;

        box-shadow:
            0 10px 25px
            rgba(24, 62, 88, 0.18);

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #ccMobileClipboardBar.hidden {
        display: none !important;
    }

    #ccMobileClipboardText {
        min-width: 0;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        color: var(--text-soft);
        font-size: 10.5px;
        font-weight: 620;
    }

    #ccMobileClipboardPaste {
        min-height: 36px;

        margin: 0;
        padding: 0 10px;

        color: var(--accent-dark);
        background: var(--accent-soft);

        border: 1px solid #a9d0e7;
        border-radius: 9px;

        font-size: 11px;
        font-weight: 730;
        white-space: nowrap;
    }

    #ccMobileClipboardCancel {
        width: 32px;
        height: 32px;

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

        margin: 0;
        padding: 6px;

        color: var(--text-soft);
        background: transparent;
        border: 0;
        border-radius: 8px;
    }


    /* ========================================================
       9. MODALES POR ENCIMA DE LA NUEVA BARRA
       ======================================================== */

    #modalBackdrop.modal-backdrop {
        z-index: 1500 !important;
    }

    .toast-stack,
    .task-stack,
    .carajillo-operation-stack {
        z-index: 1700 !important;
    }


    /* ========================================================
       10. ELEMENTOS ANTIGUOS QUE YA NO SON NECESARIOS EN MÓVIL
       ======================================================== */

    #multiSelectMode,
    .multi-select-control,
    #infoDrawer,
    .info-drawer {
        display: none !important;
    }
}
/* CARAJILLO_MOBILE_NEXTCLOUD_INTEGRATED_V2_END */

/* CARAJILLO_STABILITY_MOBILE_V2_START */
#ccMobileSheet.cc-mobile-add-sheet {
    min-height: 230px !important;
    max-height: min(70dvh, 520px) !important;
}

#ccMobileSheet.cc-mobile-add-sheet
#ccMobileSheetBody.cc-mobile-sheet-body {
    flex: 1 1 auto !important;
    min-height: 150px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;

    padding: 10px 10px 15px !important;
    overflow-y: auto !important;
}

#ccMobileSheet.cc-mobile-add-sheet
.cc-mobile-hotfix-add-action {
    position: relative;
    z-index: 2;

    min-height: 68px !important;
    flex: 0 0 auto;

    padding: 9px 10px !important;

    color: var(--text) !important;
    background: #f7fbfe !important;
    border: 1px solid #d3e5f0 !important;
    border-radius: 13px !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;
}

#ccMobileSheet.cc-mobile-add-sheet
.cc-mobile-hotfix-add-action:active {
    background: #e8f4fb !important;
    border-color: #9fc9e2 !important;
}

#modalBackdrop.modal-backdrop:has(.viewer-modal.cc-stable-viewer) {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
}

#modalBackdrop > .viewer-modal.cc-stable-viewer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    border: 0 !important;
    border-radius: 0 !important;
}

.viewer-modal.cc-stable-viewer > .modal-header {
    min-height: 52px !important;

    padding:
        max(6px, env(safe-area-inset-top))
        7px
        6px
        11px !important;
}

.viewer-modal.cc-stable-viewer
.cc-stable-viewer-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 8px !important;
    border-radius: 9px !important;
}

.viewer-modal.cc-stable-viewer
.cc-stable-viewer-button svg {
    width: 18px !important;
    height: 18px !important;
}

.viewer-modal.cc-stable-viewer .viewer-side-arrow {
    width: 34px !important;
    height: 54px !important;
    opacity: 0.55;
}

.viewer-modal.cc-stable-viewer .viewer-stage,
.viewer-modal.cc-stable-viewer #viewerMedia {
    touch-action: pan-y pinch-zoom !important;
}
/* CARAJILLO_STABILITY_MOBILE_V2_END */