/* ==========================================================================
   Boxti — Demonstração responsiva (aplicacoes-web-e-mobile.html)
   Uma janela única (a MESMA aplicação). Os botões Desktop/Tablet/Mobile só
   mudam a largura da janela; o conteúdo reflui sozinho via container queries
   — não troca de sistema, não recarrega, só se adapta.
   ========================================================================== */

.respo { margin-top: var(--space-7); }

/* Barra de dispositivos */
.respo__toolbar {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--color-card-border);
    border-radius: 999px;
    background-color: var(--color-card-bg);
    margin-bottom: var(--space-5);
}

.respo__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.respo__btn svg { width: 18px; height: 18px; }
.respo__btn:hover { color: var(--color-white); }
.respo__btn.is-active { color: var(--color-white); background-color: rgba(255, 255, 255, 0.08); }

/* Palco + janela */
.respo__stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;            /* recorta o frame em largura real quando escalado */
    min-height: 380px;           /* fallback sem JS; o JS ajusta a altura à escala */
    transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Largura REAL por dispositivo (definida no JS); quando não cabe na tela,
   o JS aplica transform: scale() para encaixar — sem mudar o layout real,
   então as container queries continuam vendo a largura verdadeira. */
.respo__device {
    width: 720px;
    height: 380px;
    flex-shrink: 0;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-alt);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform-origin: top center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* "Chrome" da janela (igual nos 3 — é a mesma app) */
.respo__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--color-divider);
    flex-shrink: 0;
}

.respo__dot { width: 9px; height: 9px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.18); }
.respo__url {
    margin-left: 8px;
    flex: 1;
    max-width: 55%;
    height: 14px;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.06);
}

/* A aplicação é o container observado pelas container queries */
.respo__app {
    container-type: inline-size;
    flex: 1;
    min-height: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Topbar */
.rapp__top { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rapp__brand { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(135deg, var(--color-blue), var(--color-lime)); }
.rapp__title { width: 84px; height: 9px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.2); }
.rapp__nav { display: none; gap: 8px; margin-left: auto; }
.rapp__nav span { width: 40px; height: 8px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.1); }
.rapp__burger { margin-left: auto; display: flex; flex-direction: column; gap: 3px; }
.rapp__burger i { width: 18px; height: 2px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.4); }

/* Corpo: barra lateral + conteúdo */
.rapp__body { flex: 1; min-height: 0; display: flex; gap: 12px; }

.rapp__side {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 46px;
    flex-shrink: 0;
    transition: width 0.45s ease;
}
.rapp__side-item { display: flex; align-items: center; gap: 8px; }
.rapp__side-item b { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; background-color: rgba(43, 125, 214, 0.4); }
.rapp__side-item--active b { background-color: var(--color-lime); }
.rapp__side-label { display: none; height: 7px; border-radius: 4px; flex: 1; background-color: rgba(255, 255, 255, 0.1); }

.rapp__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.rapp__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    transition: grid-template-columns 0.45s ease;
}
.rapp__card {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-card-border);
    border-radius: 10px;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rapp__card-num { width: 58%; height: 13px; border-radius: 5px; background-color: rgba(43, 125, 214, 0.55); }
.rapp__card-lbl { width: 82%; height: 7px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.12); }
.rapp__card:nth-child(2) .rapp__card-num { background-color: rgba(139, 197, 63, 0.55); }

.rapp__list { display: flex; flex-direction: column; gap: 8px; }
.rapp__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.03); }
.rapp__row b { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background-color: rgba(255, 255, 255, 0.12); }
.rapp__row-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.rapp__row-lines i { height: 6px; border-radius: 3px; background-color: rgba(255, 255, 255, 0.12); }
.rapp__row-lines i:first-child { width: 52%; }
.rapp__row-lines i:last-child { width: 78%; }
.rapp__row-tag { width: 32px; height: 14px; border-radius: 7px; flex-shrink: 0; background-color: rgba(43, 125, 214, 0.3); }

/* A MESMA app reflui conforme a largura da janela ----------------------------
   (tablet a partir de 380; desktop a partir de 560) */
@container (min-width: 380px) {
    .rapp__burger { display: none; }
    .rapp__nav { display: flex; }
    .rapp__side { display: flex; }
    .rapp__cards { grid-template-columns: 1fr 1fr; }
}

@container (min-width: 560px) {
    .rapp__side { width: 130px; }
    .rapp__side-label { display: block; }
    .rapp__cards { grid-template-columns: 1fr 1fr 1fr; }
}

.respo__caption {
    text-align: center;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-top: var(--space-3);
}
.respo__caption strong { color: var(--color-text-secondary); font-weight: var(--fw-semibold); }

@media (prefers-reduced-motion: reduce) {
    .respo__device, .rapp__side, .rapp__cards { transition: none; }
}