/* RD-2829 — la puerta de vuelta a un setup a medio hacer.
 *
 * Hubo una segunda tira acá, de una sola vez al terminar el asistente. Salió:
 * en ese momento la de extracción ya está en pantalla justo arriba diciendo qué
 * se importa y cuánto falta, con números reales.
 *
 * Geometry is the extraction strip's (css/integrations/extraction-progress-banner.css),
 * the same one the pending-emails strip borrowed: a full-width line pinned above
 * the organization name, starting at the sidebar's right edge.
 *
 * ## Stacking
 *
 * Third of three, and last. Its `top` is the sum of the two above it — both
 * variables default to 0px when their strip is absent, so one expression covers
 * every combination instead of a rule per pairing.
 *
 * The clearance the body owes is the same sum plus this strip's own height, and
 * it is written ONCE for that reason. Tiene que ganarle a las reglas de las
 * otras dos hojas; cómo lo consigue está explicado abajo, sobre la regla misma.
 * Es seguro porque la suma es correcta en toda combinación: cuando esta tira no
 * está, su clase de body tampoco, y las otras hojas gobiernan igual que antes.
 *
 * ## Colour
 *
 * Casi sin color, y es la decisión. La tira de emails pendientes es ámbar
 * porque dice que algo NO pasó y tiene una sola oportunidad de decirlo. Ésta
 * lleva apenas un borde izquierdo en el azul de marca: es persistente y es la
 * única puerta de vuelta a un setup sin terminar, así que tiene que sobrevivir a
 * que la pasen de largo en todas las páginas — pero sigue siendo un renglón, no
 * un cartel.
 */

.ct-resume-setup {
    --ct-rs-ink: #3f4254;          /* --bs-gray-700: the product's body ink */
    --ct-rs-tint: #f9fafb;
    --ct-rs-border: #e4e6ef;
    --ct-rs-accent: #419fff;       /* Leanmote blue */
    --ct-rs-ease: cubic-bezier(0.23, 1, 0.32, 1);

    /* Below the extraction strip (101) and the pending-emails strip (101),
       still above the fixed header (100) and below the sidebar (105). */
    position: fixed;
    top: calc(var(--lm-ep-height, 0px) + var(--lm-pe-height, 0px));
    left: 0;
    right: 0;
    z-index: 101;
    margin: 0;
    background: var(--ct-rs-tint);
    border-bottom: 1px solid var(--ct-rs-border);
    color: var(--ct-rs-ink);
    font-size: 0.9375rem;
    line-height: 1.4;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms var(--ct-rs-ease), transform 200ms var(--ct-rs-ease),
                left 300ms ease, top 200ms var(--ct-rs-ease);
}

/* El único color de la tira, y es un borde de 3px. */
.ct-resume-setup {
    box-shadow: inset 3px 0 0 0 var(--ct-rs-accent);
}

/* One line by default and by intent. */
.ct-resume-setup__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
}

.ct-resume-setup__icon {
    flex: 0 0 auto;
    color: var(--ct-rs-accent);
    font-size: 1.1rem;
}

.ct-resume-setup__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ct-resume-setup__cta {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 6px;
    /* #419fff carries white at about 2.9:1 — under AA for text this size. This
       is the same hue held to 4.5:1, the way the amber strip solved it. */
    background: #0a58a8;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms var(--ct-rs-ease), transform 150ms var(--ct-rs-ease);
}

.ct-resume-setup__cta:hover {
    background: #084683;
    color: #fff;
}

.ct-resume-setup__cta:active {
    transform: scale(0.98);
}

.ct-resume-setup__cta:focus-visible {
    outline: 2px solid var(--ct-rs-accent);
    outline-offset: 2px;
}

/*
 * Clear the fixed sidebar. The same attribute, breakpoint and variables as the
 * other two strips, so collapsing the sidebar moves all three together and
 * mobile — where the sidebar is a drawer — keeps all three full width.
 */
@media (min-width: 992px) {
    [data-kt-app-sidebar-fixed="true"] .ct-resume-setup {
        left: calc(
            var(--bs-app-sidebar-width) + var(--bs-app-sidebar-gap-start, 0px) +
                var(--bs-app-sidebar-gap-end, 0px)
        );
    }
}

/*
 * Room for whatever is up. One expression, three terms, each defaulting to 0px:
 * the arithmetic is the same whether this strip is alone or third in the stack,
 * so there is no combination left to forget. The additive property choice is the
 * extraction banner's and is kept — `margin-top` on the fixed header,
 * `padding-top` on the wrapper.
 *
 * ## Por qué la clase va DOS VECES
 *
 * No es un adorno: sin eso la suma no se aplica en dos de las ocho
 * combinaciones. Las reglas de pending-emails-banner.css son
 * `body.lm-pending-emails-on:not(.lm-extraction-banner-on) .app-header` y
 * `body.lm-pending-emails-on.lm-extraction-banner-on .app-header` — las dos
 * pesan (0,3,1), porque `:not()` aporta la especificidad de su argumento. Con
 * una sola clase esta regla pesa (0,2,1) y PIERDE contra ellas, así que con la
 * tira de emails pendientes arriba a la vez que ésta el despeje se quedaba en
 * `ep+pe` y esta tira terminaba tapando el nombre de la organización.
 *
 * Repetida empata en (0,3,1) y gana por orden de carga, que es último en
 * head.php a propósito y está fijado por su test. Es el mismo mecanismo por el
 * que pending-emails le gana a extraction.
 */
body.lm-resume-setup-on.lm-resume-setup-on .app-header {
    margin-top: calc(
        var(--lm-ep-height, 0px) + var(--lm-pe-height, 0px) + var(--lm-rs-height, 0px)
    );
}

body.lm-resume-setup-on.lm-resume-setup-on .app-wrapper {
    padding-top: calc(
        var(--lm-ep-height, 0px) + var(--lm-pe-height, 0px) + var(--lm-rs-height, 0px)
    );
}

/* El estado previo a la entrada, que pone el JS. Misma distancia y mismo
   presupuesto sub-300ms que su vecina: cae desde su propia altura en vez de
   aparecer con un fundido de unos pocos píxeles, porque lo que un ojo camino al
   contenido engancha es el movimiento sobre una distancia real.

   Sin `.is-hiding`: la tira no se cierra, se va cuando el setup termina y en ese
   momento ya no se renderiza. */
.ct-resume-setup.is-entering {
    opacity: 0;
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .ct-resume-setup { transition: none; }
    .ct-resume-setup__cta { transition: none; }
}