/* Selección avanzada, tareas y centro de operaciones. */

/*
 * La barra estable debe permanecer siempre visible.
 */
#carajilloStableToolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/*
 * Estado de trabajo del botón de escaneo.
 */
#carajilloStableScan.carajillo-working {
    pointer-events: none;
    opacity: 0.62;
}

#carajilloStableScan.carajillo-working svg {
    animation: carajillo-direct-spin 0.8s linear infinite;
}

@keyframes carajillo-direct-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   UN POCO MÁS DE AIRE ENTRE ELEMENTOS
   ============================================================ */

.carajillo-selection-grid {
    gap: 14px !important;
}


/* ============================================================
   RECTÁNGULO DE SELECCIÓN
   ============================================================ */

#carajilloSelectionRectangle {
    position: fixed;
    z-index: 9000;

    display: none;

    pointer-events: none;

    background:
        rgba(
            65,
            151,
            211,
            0.13
        );

    border:
        1px solid
        rgba(
            45,
            134,
            194,
            0.82
        );

    border-radius: 5px;

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.42
        )
        inset;
}

#carajilloSelectionRectangle.active {
    display: block;
}


/* ============================================================
   TARJETAS TOCADAS DURANTE EL ARRASTRE
   ============================================================ */

.carajillo-marquee-hit {
    outline:
        2px solid
        rgba(
            56,
            145,
            207,
            0.68
        ) !important;

    outline-offset:
        -2px;

    background:
        rgba(
            220,
            240,
            253,
            0.65
        ) !important;
}


/*
 * Conservamos además una apariencia seleccionada aunque la clase
 * original de la aplicación cambie entre versiones.
 */
.carajillo-mouse-selected {
    border-color:
        #4397d1 !important;

    box-shadow:
        0 0 0 2px
        rgba(
            67,
            151,
            209,
            0.20
        ) !important;
}


/* Evita seleccionar accidentalmente textos durante el rectángulo. */
body.carajillo-selecting,
body.carajillo-selecting * {
    user-select: none !important;
}

body.carajillo-selecting {
    cursor: crosshair;
}


/* ============================================================
   CARAJILLO_ZIP_POLICY_AND_TREE_STYLES_V1
   ============================================================ */

.carajillo-zip-policy-modal {
    width: min(540px, calc(100vw - 32px));
}

.carajillo-zip-policy-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin: 10px 0;
    padding: 12px;

    border: 1px solid var(--border);
    border-radius: 12px;

    cursor: pointer;
}

.carajillo-zip-policy-option:hover {
    background: rgba(98, 174, 223, 0.08);
}

.carajillo-zip-policy-option input {
    margin-top: 3px;
}

.carajillo-zip-policy-option span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carajillo-zip-policy-option small {
    color: var(--text-muted);
    line-height: 1.4;
}

.carajillo-zip-tree-section {
    margin-top: 16px;
    padding-top: 14px;

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

.carajillo-zip-tree-title {
    margin-bottom: 9px;

    font-weight: 800;
}

.carajillo-zip-statistics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 10px;
}

.carajillo-zip-statistics span {
    padding: 4px 7px;

    color: var(--text-muted);
    background: var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: 8px;

    font-size: 11px;
}

.carajillo-zip-statistics .warning {
    color: #9b4d52;
    background: #fff3f3;
    border-color: #efc1c4;
}

.carajillo-zip-tree {
    max-height: 420px;
    overflow: auto;

    margin: 0;
    padding: 12px;

    color: var(--text);
    background: var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: 10px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size: 11px;
    line-height: 1.55;

    white-space: pre;
}

.carajillo-zip-skipped {
    margin-top: 10px;
}

.carajillo-zip-skipped summary {
    color: #9b4d52;
    font-weight: 700;
    cursor: pointer;
}

.carajillo-zip-skipped ul {
    padding-left: 19px;
}

.carajillo-zip-skipped li {
    margin: 8px 0;
}


/* ============================================================
   CARAJILLO_EXPLORER_ONLINE_STYLES_V1
   ============================================================ */


/* ============================================================
   BARRA DE OPERACIONES SIN PORCENTAJE FALSO
   ============================================================ */

/*
 * Mientras una operación está activa, la barra se mueve de lado
 * a lado. No se muestra un porcentaje porque el backend todavía
 * no proporciona progreso real.
 */
.carajillo-operation-card:not(.success):not(.error)
.carajillo-operation-bar {
    width: 34% !important;

    animation:
        carajillo-operation-indeterminate
        1.15s
        ease-in-out
        infinite;
}

@keyframes carajillo-operation-indeterminate {
    0% {
        transform: translateX(-120%);
    }

    50% {
        transform: translateX(95%);
    }

    100% {
        transform: translateX(320%);
    }
}

.carajillo-operation-card:not(.success):not(.error)
#carajilloOperationPercent {
    font-size: 0;
}

.carajillo-operation-card:not(.success):not(.error)
#carajilloOperationPercent::after {
    content: "En curso";

    font-size: 11px;
}


/* ============================================================
   MENÚ CONTEXTUAL
   ============================================================ */

.context-menu {
    width: 300px !important;
    min-width: 300px !important;
    max-height: calc(100vh - 20px);

    overflow-y: auto;

    padding: 7px !important;

    background:
        rgba(252, 254, 255, 0.985) !important;

    border:
        1px solid
        rgba(158, 190, 212, 0.85) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 18px 55px
        rgba(29, 58, 78, 0.22) !important;

    backdrop-filter:
        blur(18px);
}

.context-menu-section {
    padding:
        7px 10px 5px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.context-menu-separator {
    height: 1px;

    margin:
        6px 5px;

    background:
        var(--border);
}

.context-menu button {
    width: 100%;
    min-height: 39px;

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

    align-items: center;
    gap: 8px;

    padding:
        8px 10px !important;

    color:
        var(--text);

    background:
        transparent;

    border:
        1px solid transparent;

    border-radius:
        9px;

    text-align: left;
}

.context-menu button:hover:not(:disabled) {
    color:
        #235f86;

    background:
        #edf7fd;

    border-color:
        #c8e1f1;
}

.context-menu button:disabled {
    opacity: 0.42;
    cursor: default;
}

.context-menu button.danger {
    color:
        #a8424a;
}

.context-menu button.danger:hover {
    color:
        #912f38;

    background:
        #fff1f2;

    border-color:
        #efc4c8;
}

.context-menu-icon {
    width: 22px;
    height: 22px;

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

    color:
        #527b99;

    background:
        rgba(103, 170, 214, 0.10);

    border-radius:
        7px;

    font-weight:
        800;
}

.context-menu kbd {
    padding:
        2px 5px;

    color:
        var(--text-muted);

    background:
        rgba(220, 232, 240, 0.55);

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

    border-radius:
        5px;

    font-family:
        inherit;

    font-size:
        9px;
}


/* ============================================================
   DIÁLOGO DE POLÍTICA ZIP
   ============================================================ */

.carajillo-zip-policy-overlay-v2 {
    position: fixed;
    inset: 0;

    z-index: 5000;

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

    padding: 18px;

    background:
        rgba(35, 58, 75, 0.30);

    backdrop-filter:
        blur(7px);
}

.carajillo-zip-policy-card-v2 {
    width:
        min(
            540px,
            calc(100vw - 36px)
        );

    overflow: hidden;

    background:
        rgba(253, 254, 255, 0.99);

    border:
        1px solid
        #c4dae9;

    border-radius:
        17px;

    box-shadow:
        0 24px 70px
        rgba(28, 54, 72, 0.28);
}

.carajillo-zip-policy-card-v2 > header,
.carajillo-zip-policy-card-v2 > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        14px 16px;
}

.carajillo-zip-policy-card-v2 > header {
    border-bottom:
        1px solid
        var(--border);
}

.carajillo-zip-policy-card-v2 > footer {
    justify-content: flex-end;

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

.carajillo-zip-policy-card-v2 header p {
    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        12px;
}

.carajillo-zip-policy-card-v2 main {
    padding:
        12px 16px;
}

.carajillo-zip-policy-card-v2 label {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin:
        8px 0;

    padding:
        12px;

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

    border-radius:
        11px;

    cursor:
        pointer;
}

.carajillo-zip-policy-card-v2 label:hover {
    background:
        #f0f8fd;

    border-color:
        #b9d8ec;
}

.carajillo-zip-policy-card-v2 label span {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.carajillo-zip-policy-card-v2 small {
    color:
        var(--text-muted);

    line-height:
        1.45;
}


/* ============================================================
   CARAJILLO_EXPLORER_ONLINE_SEPARATED_STYLES_V1
   ============================================================ */

.carajillo-context-menu-online {
    position: fixed !important;
    z-index: 6000 !important;

    width: 310px !important;
    min-width: 310px !important;
    max-height: calc(100vh - 20px);

    overflow-y: auto;
}

.carajillo-operation-details-online {
    padding:
        0 14px 12px;
}

.carajillo-operation-details-toggle {
    padding: 3px 0;

    color: #36789f;
    background: transparent;

    border: 0;

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}

.carajillo-operation-details-toggle:hover {
    text-decoration: underline;
}

.carajillo-operation-details-content {
    margin-top: 8px;
    padding: 10px;

    background:
        rgba(232, 244, 251, 0.62);

    border:
        1px solid
        #c9dfed;

    border-radius:
        10px;
}

.carajillo-operation-details-content dl {
    display: grid;
    gap: 6px;

    margin: 0;
}

.carajillo-operation-details-content dl > div {
    display: grid;
    grid-template-columns:
        125px
        minmax(0, 1fr);

    gap: 8px;
}

.carajillo-operation-details-content dt {
    color: var(--text-muted);

    font-size: 10px;
}

.carajillo-operation-details-content dd {
    margin: 0;

    font-size: 10px;
    font-weight: 700;
}

.carajillo-operation-log-title {
    margin-top: 10px;
    margin-bottom: 5px;

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

.carajillo-operation-log {
    display: grid;
    gap: 3px;

    max-height: 100px;
    overflow-y: auto;

    padding: 7px;

    color: #526d80;
    background: rgba(255, 255, 255, 0.68);

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

    border-radius:
        7px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size: 9px;
}

.carajillo-operation-honesty {
    margin:
        8px 0 0;

    color:
        var(--text-muted);

    font-size:
        9px;

    line-height:
        1.4;
}


/* ============================================================
   CARAJILLO_FLOATING_OPERATION_AND_BACKGROUND_STYLES_V2
   ============================================================ */


/* El overlay deja libre toda la pantalla. */
#carajilloOperationOverlay.carajillo-operation-overlay-floating {
    position: fixed !important;

    inset:
        auto
        20px
        20px
        auto !important;

    z-index:
        4500 !important;

    width:
        min(
            430px,
            calc(100vw - 40px)
        ) !important;

    height:
        auto !important;

    display:
        block !important;

    padding:
        0 !important;

    background:
        transparent !important;

    backdrop-filter:
        none !important;

    pointer-events:
        none !important;
}


/* La clase hidden sigue ocultando correctamente el popup. */
#carajilloOperationOverlay.carajillo-operation-overlay-floating.hidden {
    display:
        none !important;
}


/* Solo la tarjeta captura eventos. */
#carajilloOperationCard.carajillo-operation-card-floating {
    position:
        relative !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    pointer-events:
        auto !important;

    box-shadow:
        0 18px 55px
        rgba(31, 58, 78, 0.25) !important;
}


/* Botón de plegado. */
.carajillo-operation-fold {
    flex:
        0 0 auto;

    width:
        28px;

    height:
        28px;

    margin-left:
        auto;

    color:
        #50748d;

    background:
        #edf6fc;

    border:
        1px solid
        #c4ddeb;

    border-radius:
        8px;

    font-size:
        18px;

    line-height:
        1;

    cursor:
        pointer;
}


/* Ocultar el cuerpo al plegar. */
#carajilloOperationCard.carajillo-operation-is-folded
.carajillo-operation-body,

#carajilloOperationCard.carajillo-operation-is-folded
.carajillo-operation-details-online {
    display:
        none !important;
}


/* Menú del fondo. */
.carajillo-background-menu-v2 {
    position:
        fixed !important;

    z-index:
        6200 !important;

    width:
        300px !important;

    min-width:
        300px !important;
}


/* ============================================================
   CARAJILLO_EMERGENCY_NON_BLOCKING_UI_V1
   EL PANEL DE OPERACIONES NUNCA BLOQUEA LA PÁGINA
   ============================================================ */


/*
 * El contenedor exterior ocupa solo la esquina inferior derecha.
 * Aunque algún estilo antiguo intente convertirlo en modal, estas
 * reglas tienen prioridad.
 */
#carajilloOperationOverlay {
    position: fixed !important;

    inset:
        auto
        18px
        18px
        auto !important;

    width:
        min(
            430px,
            calc(100vw - 36px)
        ) !important;

    height: auto !important;

    min-height: 0 !important;

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

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
}


/*
 * Cuando la operación no está visible, hidden debe seguir
 * funcionando.
 */
#carajilloOperationOverlay.hidden {
    display: none !important;
}


/*
 * Solo la tarjeta puede recibir clics.
 */
#carajilloOperationCard {
    position: relative !important;

    width: 100% !important;
    max-width: 430px !important;

    margin: 0 !important;

    pointer-events: auto !important;

    box-shadow:
        0 15px 45px
        rgba(30, 55, 75, 0.24) !important;
}


/*
 * El resto del cloud siempre permanece interactivo.
 */
body,
.app-shell,
.main-area,
.file-grid,
.files-grid,
.content-area {
    pointer-events: auto;
}


/*
 * Estado plegado.
 */
#carajilloOperationCard.carajillo-operation-is-folded
.carajillo-operation-body,

#carajilloOperationCard.carajillo-operation-is-folded
.carajillo-operation-details-online,

#carajilloOperationCard.carajillo-operation-folded
.carajillo-operation-body,

#carajilloOperationCard.carajillo-operation-folded
.carajillo-operation-details-online {
    display: none !important;
}


/*
 * El panel de detalles tiene límites para no ocupar media pantalla.
 */
.carajillo-operation-details-content {
    max-height: 280px;
    overflow-y: auto;
}


/* ============================================================
   CARAJILLO_ZIP_CONFLICT_FILE_STYLE_V1
   ============================================================ */

.carajillo-zip-conflict-file {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-bottom: 13px;
    padding: 11px;

    color: #8d3740;
    background: #fff2f3;

    border: 1px solid #efc3c7;
    border-radius: 10px;

    overflow-wrap: anywhere;
}

.carajillo-zip-conflict-file small {
    color: #9b5c62;
    line-height: 1.4;
}


/* ============================================================
   CARAJILLO_OPERATIONS_CENTER_STYLES_V1
   ============================================================ */


/* Ocultar el gestor antiguo de una sola operación. */
#carajilloOperationOverlay {
    display: none !important;
}


/* ============================================================
   COLUMNA DE OPERACIONES
   ============================================================ */

.carajillo-operations-center {
    position: fixed;

    right: 14px;
    bottom: 14px;

    z-index: 5200;

    width: min(
        330px,
        calc(100vw - 28px)
    );

    max-height: calc(
        100vh - 90px
    );

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        rgba(247, 251, 254, 0.97);

    border:
        1px solid
        #bfd7e7;

    border-radius:
        14px;

    box-shadow:
        0 16px 48px
        rgba(27, 54, 74, 0.20);

    backdrop-filter:
        blur(14px);
}

.carajillo-operations-center.empty {
    display: none;
}


/* ============================================================
   CABECERA
   ============================================================ */

.carajillo-operations-center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        9px 11px;

    border-bottom:
        1px solid
        #d3e4ef;
}

.carajillo-operations-center-header > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.carajillo-operations-center-header strong {
    font-size: 12px;
}

.carajillo-operations-counter {
    min-width: 19px;
    height: 19px;

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

    padding: 0 5px;

    color: #31739a;
    background: #e2f1fa;

    border-radius: 999px;

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

.carajillo-operations-clear {
    padding: 4px 7px;

    color: #52758d;
    background: transparent;

    border: 0;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.carajillo-operations-clear:hover {
    text-decoration: underline;
}


/* ============================================================
   LISTA
   ============================================================ */

.carajillo-operations-list {
    display: flex;
    flex-direction: column;
    gap: 7px;

    overflow-y: auto;

    padding: 8px;
}


/* ============================================================
   TARJETA
   ============================================================ */

.carajillo-operation-item {
    flex: 0 0 auto;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #ccdee9;

    border-radius: 10px;
}

.carajillo-operation-item.running {
    border-color: #b8d7eb;
}

.carajillo-operation-item.success {
    border-color: #b8dcc7;
}

.carajillo-operation-item.error {
    border-color: #efb9be;
}

.carajillo-operation-item.waiting {
    border-color: #efd49b;
}


/* ============================================================
   CABECERA DE TARJETA
   ============================================================ */

.carajillo-operation-item-header {
    display: grid;

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

    align-items: center;
    gap: 6px;

    padding: 8px;
}

.carajillo-operation-item-icon {
    width: 25px;
    height: 25px;

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

    color: #34749c;
    background: #e8f4fb;

    border-radius: 7px;

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

.carajillo-operation-item-heading {
    min-width: 0;

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

.carajillo-operation-item-heading strong,
.carajillo-operation-item-heading small {
    overflow: hidden;

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

.carajillo-operation-item-heading strong {
    font-size: 11px;
}

.carajillo-operation-item-heading small {
    color: #6c8799;
    font-size: 9px;
}

.carajillo-operation-item-fold,
.carajillo-operation-item-close {
    width: 24px;
    height: 24px;

    padding: 0;

    color: #55778e;
    background: #eff6fa;

    border:
        1px solid
        #d1e1ea;

    border-radius: 6px;

    cursor: pointer;
}

.carajillo-operation-item-close[hidden] {
    visibility: hidden;
    display: block;
}


/* ============================================================
   CUERPO
   ============================================================ */

.carajillo-operation-item-body {
    padding:
        0 8px 8px;
}

.carajillo-operation-item.folded
.carajillo-operation-item-body {
    display: none;
}


/* ============================================================
   BARRA INDETERMINADA REAL
   ============================================================ */

.carajillo-operation-indeterminate {
    position: relative;

    height: 5px;

    overflow: hidden;

    background: #e1edf4;

    border-radius: 999px;
}

.carajillo-operation-indeterminate span {
    position: absolute;
    inset: 0 auto 0 0;

    width: 34%;

    background:
        linear-gradient(
            90deg,
            #7bc1e9,
            #3d98cd
        );

    border-radius: inherit;

    animation:
        carajilloOperationMove
        1.15s
        ease-in-out
        infinite;
}

.carajillo-operation-item.success
.carajillo-operation-indeterminate span {
    width: 100%;

    background: #65b982;

    animation: none;
}

.carajillo-operation-item.error
.carajillo-operation-indeterminate span {
    width: 100%;

    background: #df7078;

    animation: none;
}

.carajillo-operation-item.waiting
.carajillo-operation-indeterminate span {
    width: 100%;

    background: #d9a746;

    animation: none;
}

@keyframes carajilloOperationMove {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(310%);
    }
}


/* ============================================================
   METADATOS
   ============================================================ */

.carajillo-operation-item-meta {
    display: flex;
    justify-content: space-between;

    gap: 8px;

    margin-top: 6px;

    color: #688397;

    font-size: 9px;
}

.carajillo-operation-request-details {
    display: grid;
    gap: 3px;

    margin:
        7px 0 0;

    padding: 6px;

    background: #f4f9fc;

    border-radius: 7px;
}

.carajillo-operation-request-details > div {
    display: grid;

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

    gap: 6px;
}

.carajillo-operation-request-details dt {
    color: #7690a2;
    font-size: 9px;
}

.carajillo-operation-request-details dd {
    min-width: 0;

    overflow: hidden;

    margin: 0;

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

    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   DETALLES
   ============================================================ */

.carajillo-operation-details-toggle-v2 {
    margin-top: 6px;
    padding: 0;

    color: #367ba4;
    background: transparent;

    border: 0;

    font-size: 9px;
    font-weight: 750;

    cursor: pointer;
}

.carajillo-operation-details-v2 {
    margin-top: 6px;
}

.carajillo-operation-endpoint {
    overflow-wrap: anywhere;

    color: #7890a0;

    font-family:
        ui-monospace,
        Consolas,
        monospace;

    font-size: 8px;
}

.carajillo-operation-log-v2 {
    max-height: 95px;

    overflow: auto;

    margin:
        5px 0 0;

    padding: 6px;

    color: #526e80;
    background: #f4f8fa;

    border:
        1px solid
        #d9e6ed;

    border-radius: 6px;

    font-family:
        ui-monospace,
        Consolas,
        monospace;

    font-size: 8px;
    line-height: 1.45;

    white-space: pre-wrap;
}


/* ============================================================
   RESULTADOS
   ============================================================ */

.carajillo-operation-result {
    margin-top: 6px;
    padding: 6px;

    overflow-wrap: anywhere;

    background: #f3f8fb;

    border-radius: 6px;

    font-size: 9px;
}

.carajillo-operation-item.success
.carajillo-operation-result {
    color: #34704a;
    background: #edf8f1;
}

.carajillo-operation-item.error
.carajillo-operation-result {
    color: #9c4148;
    background: #fff0f1;
}

.carajillo-operation-item.waiting
.carajillo-operation-result {
    color: #81621f;
    background: #fff8e8;
}


/* ============================================================
   CARAJILLO_CLASSIC_OPERATION_STACK_V1
   Varias tarjetas con el aspecto del panel antiguo.
   ============================================================ */

/* El centro de operaciones por columnas queda desactivado. */
#carajilloOperationsCenter,
.carajillo-operations-center {
    display: none !important;
}

/* Recuperamos la tarjeta clásica: ya no se oculta por la regla del
   sistema nuevo porque ahora vive dentro de este contenedor. */
.carajillo-operation-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 6200;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    width: min(430px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow-y: auto;

    padding: 2px;
    pointer-events: none;
}

.carajillo-operation-card-stacked {
    position: relative !important;
    flex: 0 0 auto;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    pointer-events: auto;
    box-shadow: 0 15px 45px rgba(30, 55, 75, 0.24) !important;

    animation: carajillo-operation-card-in 180ms ease-out;
}

.carajillo-operation-card-stacked .carajillo-operation-fold {
    margin-left: auto;
}

.carajillo-operation-card-stacked.carajillo-operation-is-folded
.carajillo-operation-body {
    display: none !important;
}

/* Mientras está trabajando no se enseña el botón Cerrar. */
.carajillo-operation-card-stacked:not(.success):not(.error)
.carajillo-operation-actions {
    display: none;
}

/* En pantallas estrechas dejamos un pequeño margen a ambos lados. */
@media (max-width: 700px) {
    .carajillo-operation-stack {
        right: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }
}


/* ============================================================
   CARAJILLO_SCROLL_CONTAINER_SELECTION_FIX_V1
   El scroll pertenece al cuadro de archivos, no a la página.
   ============================================================ */

.main-panel {
    height: calc(100vh - 92px);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.file-toolbar {
    flex: 0 0 auto;
}

.file-content {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#carajilloSelectionRectangle {
    position: absolute !important;
    z-index: 500 !important;
}



/* ============================================================
   CARAJILLO_CLIPBOARD_COLORS_V3
   ============================================================ */

.file-card.carajillo-clipboard-copy {
    outline: 3px solid #8b5cf6 !important;
    outline-offset: -3px !important;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, .18),
        0 8px 22px rgba(92, 62, 170, .14) !important;
}

.file-card.carajillo-clipboard-cut {
    outline: 3px dashed #ef7b45 !important;
    outline-offset: -3px !important;
    box-shadow:
        0 0 0 1px rgba(239, 123, 69, .16),
        0 8px 22px rgba(171, 78, 38, .12) !important;
    opacity: .72;
}

.file-card.carajillo-clipboard-copy::after,
.file-card.carajillo-clipboard-cut::after {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 10;
    padding: 4px 8px;
    border-radius: 999px;
    color: white;
    font: 700 10px/1 system-ui, sans-serif;
    pointer-events: none;
}

.file-card.carajillo-clipboard-copy::after {
    content: "COPIA";
    background: #8b5cf6;
}

.file-card.carajillo-clipboard-cut::after {
    content: "CORTE";
    background: #ef7b45;
}


/* ============================================================
   CARAJILLO_CLIPBOARD_VISUAL_V5

   Estos estilos están al final del CSS para que el estado del
   portapapeles tenga prioridad sobre el borde azul de selección.
   ============================================================ */

.file-card.carajillo-v5-copied {
    border-color: #8b5cf6 !important;
    outline: 4px solid #8b5cf6 !important;
    outline-offset: -4px !important;

    box-shadow:
        inset 0 0 0 3px #8b5cf6,
        0 0 0 1px rgba(139, 92, 246, .20),
        0 9px 24px rgba(83, 56, 154, .18)
        !important;
}

.file-card.carajillo-v5-cut {
    border-color: #ef7b45 !important;
    border-style: dashed !important;
    outline: 4px dashed #ef7b45 !important;
    outline-offset: -4px !important;

    box-shadow:
        inset 0 0 0 3px rgba(239, 123, 69, .86),
        0 0 0 1px rgba(239, 123, 69, .18),
        0 9px 24px rgba(155, 70, 34, .16)
        !important;

    opacity: .72;
}

.file-card.carajillo-v5-copied::after,
.file-card.carajillo-v5-cut::after {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 999 !important;

    display: block !important;
    padding: 4px 8px !important;

    border-radius: 999px !important;

    color: #ffffff !important;
    font:
        800 10px/1
        system-ui,
        sans-serif !important;

    letter-spacing: .03em !important;
    pointer-events: none !important;
}

.file-card.carajillo-v5-copied::after {
    content: "COPIA" !important;
    background: #8b5cf6 !important;
}

.file-card.carajillo-v5-cut::after {
    content: "CORTE" !important;
    background: #ef7b45 !important;
}