/* 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):
 * a full-width line pinned above the organization name, starting at the
 * sidebar's right edge.
 *
 * ## Stacking
 *
 * Second, under the extraction strip. Its `top` is that strip's height, which
 * defaults to 0px when the strip is absent, so one expression covers both cases.
 *
 * 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 la regla de la tira de
 * extracción; 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 la otra hoja gobierna igual que antes.
 *
 * ## Colour
 *
 * Casi sin color, y es la decisión. 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), still above the fixed header (100)
       and below the sidebar (105). */
    position: fixed;
    top: var(--lm-ep-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, two terms, each defaulting to 0px:
 * the arithmetic is the same whether this strip is alone or under the
 * extraction one, 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
 *
 * La regla de la tira de extracción, `body.lm-extraction-banner-on .app-header`,
 * pesa (0,2,1). Con una sola clase ésta empata y gana sólo por orden de carga;
 * repetida pesa (0,3,1) y gana siempre, cargue donde cargue (head.php la carga
 * después igual). Si pierde, el despeje se queda en el alto de la de extracción y
 * esta tira termina tapando el nombre de la organización.
 */
body.lm-resume-setup-on.lm-resume-setup-on .app-header {
    margin-top: calc(var(--lm-ep-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-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; }
}