/*
 * "Relatório completo" nas calculadoras piloto (toolreports, 27/10/2026).
 *
 * Só o que a plataforma ainda não tinha: o grupo de ações do cabeçalho do
 * resumo (Exportar PDF + Relatório completo) e o código de conferência na
 * modal. Botões, modal (.auth-modal.feedback-modal), avisos (.condition-alert)
 * e dicas (.form-hint, .field-description) são os da plataforma (app.css).
 * Estilos da página pública /r/<código>/ ficam em outro arquivo.
 */

/* Cabeçalho do resumo: título à esquerda, ações à direita. Quando falta
   espaço, o grupo desce para a linha de baixo e os botões quebram sem
   rolagem lateral. */
.summary-card__header > .toolreport-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
    margin-left: auto;
}

.toolreport-actions > .icon-text-button {
    min-width: 0;
}

/* Código de conferência: a pessoa lê e digita, então vai com mais peso e
   algarismos de largura fixa. */
.toolreport-modal .toolreport-code {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

/* Prévia ao lado do formulário (28/10/2026). Só esta modal muda: a largura
   maior vale enquanto o formulário está aberto (data-toolreport-layout, posto
   pelo emitir.js); convite, aviso e "Relatório gerado" seguem na largura de
   .feedback-modal. Nada aqui alcança as outras modais da plataforma. */
.toolreport-modal[data-toolreport-layout="previa"] {
    width: min(64rem, 100%);
}

.toolreport-modal .toolreport-form {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
}

/* Os campos seguem o espaçamento que tinham no corpo da modal. */
.toolreport-modal .toolreport-form__fields {
    display: grid;
    gap: inherit;
    min-width: 0;
}

.toolreport-modal .toolreport-preview {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.toolreport-modal .toolreport-preview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.toolreport-modal .toolreport-preview__head small {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.toolreport-modal .toolreport-preview__tag {
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--surface);
    background: var(--ink);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A folha: proporção do A4, a primeira página inteira e mais nada. O iframe
   tem o tamanho real da folha e o emitir.js o reduz até caber na coluna. */
.toolreport-modal .toolreport-preview__sheet {
    position: relative;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.toolreport-modal .toolreport-preview__sheet iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 210mm;
    height: 297mm;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.toolreport-modal .toolreport-preview__state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: var(--space-4);
    color: var(--muted);
    background: var(--surface-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.toolreport-modal .toolreport-preview__state[hidden] {
    display: none;
}

/* Abas Opções e Prévia: só no celular, no visual do seletor de visão da
   plataforma (.business-view-switch, que não carrega nas calculadoras). */
.toolreport-modal .toolreport-switch {
    display: none;
}

/* Celular: o grupo ocupa a linha inteira e cada botão divide o espaço; se não
   couberem lado a lado (320 px), cada um fica numa linha. */
@media (max-width: 47.5rem) {
    .summary-card__header > .toolreport-actions {
        flex: 1 1 100%;
        justify-content: stretch;
        margin-left: 0;
    }

    .toolreport-actions > .icon-text-button {
        flex: 1 1 auto;
    }

    .toolreport-modal .toolreport-switch {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-1);
        margin: var(--space-3) var(--space-4) 0;
        padding: var(--space-1);
        border: var(--border-width) solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface-muted);
    }

    .toolreport-modal .toolreport-switch button {
        min-width: 0;
        min-height: var(--control-sm);
        padding-inline: var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--muted);
        background: transparent;
        font-family: var(--font-sans);
        font-weight: 600;
    }

    .toolreport-modal .toolreport-switch button[aria-selected="true"] {
        color: var(--ink);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .toolreport-modal .toolreport-switch button:focus-visible {
        outline: 2px solid var(--accent-2);
        outline-offset: 2px;
    }

    .toolreport-modal .toolreport-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .toolreport-modal .toolreport-form[data-toolreport-view="opcoes"] .toolreport-preview,
    .toolreport-modal .toolreport-form[data-toolreport-view="previa"] .toolreport-form__fields {
        display: none;
    }
}