@layer telas {
    .aer-sistema {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .aer-sistema-conteudo {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .aer-wordmark {
        display: inline-flex;
        align-items: center;
        gap: .52em;
        color: var(--aer-texto);
        font-family: var(--aer-fonte-titulo);
        font-size: 19px;
        font-weight: var(--aer-peso-forte);
        font-stretch: 90%;
        letter-spacing: -.01em;
        line-height: 1.15;
        text-decoration: none;
        white-space: nowrap;
    }

    .aer-wordmark-barra {
        flex: 0 0 auto;
        width: max(var(--aer-regua), .14em);
        height: 1.15em;
        border-radius: 1px;
        background: var(--aer-marca);
    }

    .aer-regua-graduada {
        position: relative;
    }

        .aer-regua-graduada::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 15px;
            background:
                linear-gradient(var(--aer-marca), var(--aer-marca)) left top / var(--aer-regua) 100% no-repeat,
                repeating-linear-gradient(to bottom, var(--aer-borda-forte) 0 1px, transparent 1px 40px) var(--aer-regua) 0 / 12px 100% no-repeat,
                repeating-linear-gradient(to bottom, var(--aer-borda-forte) 0 1px, transparent 1px 8px) var(--aer-regua) 0 / 6px 100% no-repeat;
            pointer-events: none;
        }

    .aer-entrada {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .aer-entrada-marca {
        --aer-entrada-tinta: var(--aer-carmim-700);
        --aer-entrada-papel: #ffffff;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--aer-e5);
        padding: 28px 24px 0;
        overflow: hidden;
        background-color: var(--aer-entrada-tinta);
        color: var(--aer-entrada-papel);
    }

    [data-bs-theme="dark"] .aer-entrada-marca {
        --aer-entrada-tinta: var(--aer-carmim-900);
        --aer-entrada-papel: #ececee;
    }

    .aer-entrada-wordmark {
        align-self: flex-start;
        color: var(--aer-entrada-papel);
        font-size: 34px;
    }

        .aer-entrada-wordmark .aer-wordmark-barra {
            background: var(--aer-entrada-papel);
        }

    .aer-entrada-apoio {
        max-width: 30rem;
    }

        .aer-entrada-apoio h2 {
            margin: 0 0 var(--aer-e2);
            font-family: var(--aer-fonte-titulo);
            font-stretch: var(--aer-largura-titulo);
            font-weight: var(--aer-peso-forte);
            font-size: var(--aer-t-6);
            line-height: 1.15;
            color: inherit;
        }

        .aer-entrada-apoio p {
            margin: 0;
            font-size: var(--aer-t-4);
            line-height: 1.55;
            opacity: .86;
        }

    .aer-entrada-pulso {
        display: block;
        width: calc(100% + 48px);
        height: 56px;
        margin: 0 -24px;
        opacity: .6;
    }

        .aer-entrada-pulso path {
            fill: none;
            stroke: currentColor;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            vector-effect: non-scaling-stroke;
        }

    .aer-entrada-acesso {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 24px 48px;
    }

        .aer-entrada-acesso.aer-regua-graduada::before {
            top: 0;
            right: 0;
            bottom: auto;
            left: 0;
            width: auto;
            height: 15px;
            background:
                linear-gradient(var(--aer-marca), var(--aer-marca)) left top / 100% var(--aer-regua) no-repeat,
                repeating-linear-gradient(to right, var(--aer-borda-forte) 0 1px, transparent 1px 40px) 0 var(--aer-regua) / 100% 12px no-repeat,
                repeating-linear-gradient(to right, var(--aer-borda-forte) 0 1px, transparent 1px 8px) 0 var(--aer-regua) / 100% 6px no-repeat;
        }

    .aer-entrada-formulario {
        width: min(100%, 360px);
    }

        .aer-entrada-formulario h1 {
            margin: 0 0 var(--aer-e2);
            font-family: var(--aer-fonte-titulo);
            font-stretch: var(--aer-largura-titulo);
            font-weight: var(--aer-peso-forte);
            font-size: var(--aer-t-8);
            line-height: 1.1;
            letter-spacing: -.01em;
        }

        .aer-entrada-formulario form {
            display: grid;
            gap: var(--aer-e4);
        }

        .aer-entrada-formulario .alert {
            margin: 0;
        }

    .aer-entrada-subtitulo {
        margin: 0 0 var(--aer-e5);
        font-size: var(--aer-t-4);
        color: var(--aer-texto-2);
    }

    .btn-entrar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        font-size: var(--aer-t-4);
        font-weight: var(--aer-peso-medio);
    }

        .btn-entrar.is-loading:disabled {
            opacity: 1;
        }

    .btn-entrar-conteudo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .btn-entrar-seta {
        font-size: 20px;
        line-height: 1;
        transition: transform var(--aer-mov) var(--aer-curva);
    }

    .btn-entrar:not(:disabled):hover .btn-entrar-seta {
        transform: translateX(3px);
    }

    .btn-entrar-giro,
    .btn-entrar.is-loading .btn-entrar-seta {
        display: none;
    }

    .btn-entrar.is-loading .btn-entrar-giro {
        display: inline-block;
    }

    @media (min-width: 992px) {
        .aer-entrada {
            grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr);
            grid-template-rows: none;
        }

        .aer-entrada-marca {
            gap: var(--aer-e6);
            padding: clamp(40px, 6vw, 88px);
            padding-bottom: 0;
        }

        .aer-entrada-wordmark {
            margin-top: auto;
            font-size: clamp(52px, 5.4vw, 76px);
        }

        .aer-entrada-apoio h2 {
            font-size: var(--aer-t-8);
        }

        .aer-entrada-apoio p {
            font-size: var(--aer-t-5);
        }

        .aer-entrada-pulso {
            width: calc(100% + 2 * clamp(40px, 6vw, 88px));
            height: 112px;
            margin: auto calc(-1 * clamp(40px, 6vw, 88px)) clamp(32px, 6vh, 64px);
        }

        .aer-entrada-acesso {
            align-items: center;
            padding: 56px clamp(40px, 5vw, 72px);
        }

            .aer-entrada-acesso.aer-regua-graduada::before {
                top: 0;
                right: auto;
                bottom: 0;
                left: 0;
                width: 15px;
                height: auto;
                background:
                    linear-gradient(var(--aer-marca), var(--aer-marca)) left top / var(--aer-regua) 100% no-repeat,
                    repeating-linear-gradient(to bottom, var(--aer-borda-forte) 0 1px, transparent 1px 40px) var(--aer-regua) 0 / 12px 100% no-repeat,
                    repeating-linear-gradient(to bottom, var(--aer-borda-forte) 0 1px, transparent 1px 8px) var(--aer-regua) 0 / 6px 100% no-repeat;
            }
    }

    .aer-selecao {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .aer-selecao-topo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--aer-e4);
        min-height: 64px;
        padding: 10px clamp(16px, 4vw, 40px);
        border-bottom: 1px solid var(--aer-shell-borda);
        background-color: var(--aer-shell-fundo);
        box-shadow: inset 0 4px 0 var(--aer-marca-solida);
    }

    .aer-selecao-conta {
        display: flex;
        align-items: center;
        gap: var(--aer-e3);
        min-width: 0;
    }

        .aer-selecao-conta form {
            margin: 0;
        }

    .aer-selecao-usuario {
        display: none;
        min-width: 0;
        max-width: 32ch;
        overflow: hidden;
        font-size: var(--aer-t-2);
        color: var(--aer-texto-2);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (min-width: 768px) {
        .aer-selecao-usuario {
            display: block;
        }
    }

    .aer-tema-seletor {
        display: inline-flex;
        gap: 2px;
        padding: 2px;
        border: 1px solid var(--aer-borda-forte);
        border-radius: var(--aer-raio);
        background-color: var(--aer-superficie);
    }

        .aer-tema-seletor button {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: var(--aer-raio-p);
            background: transparent;
            color: var(--aer-texto-2);
            font-size: 18px;
            line-height: 1;
            transition: background-color var(--aer-mov-rapido) var(--aer-curva), color var(--aer-mov-rapido) var(--aer-curva);
        }

            .aer-tema-seletor button:hover {
                background-color: var(--aer-acao-sutil);
                color: var(--aer-texto);
            }

            .aer-tema-seletor button[aria-pressed="true"] {
                background-color: var(--aer-acao);
                color: var(--aer-sobre-acao);
            }

            .aer-tema-seletor button:focus-visible {
                outline: 0;
                box-shadow: var(--aer-foco);
            }

    .aer-selecao-miolo {
        width: min(100% - 32px, 640px);
        margin: clamp(32px, 8vh, 80px) auto 56px;
    }

        .aer-selecao-miolo h1 {
            margin: 0 0 var(--aer-e1);
            font-family: var(--aer-fonte-titulo);
            font-stretch: var(--aer-largura-titulo);
            font-weight: var(--aer-peso-forte);
            font-size: var(--aer-t-7);
            line-height: 1.15;
        }

    .aer-selecao-apoio {
        margin: 0 0 var(--aer-e5);
        font-size: var(--aer-t-3);
        color: var(--aer-texto-3);
    }

    .aer-selecao-filtro {
        margin-bottom: var(--aer-e4);
    }

    .aer-selecao-lista {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid var(--aer-borda-forte);
    }

        .aer-selecao-lista li {
            border-bottom: 1px solid var(--aer-borda);
        }

        .aer-selecao-lista a {
            position: relative;
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr) auto;
            align-items: center;
            gap: var(--aer-e3);
            min-height: 60px;
            padding: 10px 12px 10px 16px;
            color: var(--aer-texto);
            text-decoration: none;
            transition: background-color var(--aer-mov-rapido) var(--aer-curva);
        }

            .aer-selecao-lista a::before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: var(--aer-regua);
                background-color: var(--aer-marca);
                opacity: 0;
                transition: opacity var(--aer-mov-rapido) var(--aer-curva);
            }

            .aer-selecao-lista a:hover {
                background-color: var(--aer-superficie-2);
            }

                .aer-selecao-lista a:hover::before,
                .aer-selecao-lista a:focus-visible::before {
                    opacity: 1;
                }

            .aer-selecao-lista a:focus-visible {
                outline: 2px solid var(--aer-anel-foco);
                outline-offset: -2px;
            }

    .aer-selecao-icone {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--aer-borda-forte);
        border-radius: var(--aer-raio);
        color: var(--aer-texto-rotulo);
    }

        .aer-selecao-icone svg {
            width: 20px;
            height: 20px;
        }

    .aer-selecao-nome {
        font-size: var(--aer-t-4);
        font-weight: var(--aer-peso-medio);
        overflow-wrap: anywhere;
    }

    .aer-selecao-lista .mdi-chevron-right {
        font-size: 20px;
        color: var(--aer-texto-3);
    }

    .aer-selecao-vazio {
        margin: var(--aer-e4) 0 0;
        color: var(--aer-texto-3);
    }

    .aer-aviso-sistema {
        flex: 1 1 auto;
        display: grid;
        grid-template-rows: auto 1fr;
        padding: clamp(16px, 4vw, 40px);
    }

        .aer-aviso-sistema > .aer-wordmark {
            justify-self: start;
        }

    .aer-aviso-sistema-corpo {
        align-self: center;
        justify-self: center;
        width: min(100%, 560px);
        padding: var(--aer-e5) 0 var(--aer-e7) 40px;
    }

        .aer-aviso-sistema-corpo .aer-aviso-selo {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: var(--aer-e4);
            padding: 5px 10px 4px;
            font-size: 13px;
        }

            .aer-aviso-sistema-corpo .aer-aviso-selo .mdi {
                font-size: 16px;
                line-height: 1;
            }

        .aer-aviso-sistema-corpo h1 {
            margin: 0 0 var(--aer-e2);
            font-family: var(--aer-fonte-titulo);
            font-stretch: var(--aer-largura-titulo);
            font-weight: var(--aer-peso-forte);
            font-size: var(--aer-t-7);
            line-height: 1.15;
        }

        .aer-aviso-sistema-corpo > p {
            margin: 0 0 var(--aer-e5);
            font-size: var(--aer-t-4);
            color: var(--aer-texto-2);
        }

    .aer-aviso-sistema-corpo > .aer-aviso-sistema-id {
        margin: var(--aer-e5) 0 0;
        font-size: var(--aer-t-1);
        color: var(--aer-texto-3);
        overflow-wrap: anywhere;
    }

        .aer-aviso-sistema-id code {
            font-family: var(--aer-fonte-mono);
            font-size: inherit;
            color: var(--aer-texto-2);
        }

    .aer-leitura {
        width: min(100% - 32px, 720px);
        margin: 0 auto;
        padding: clamp(24px, 5vw, 56px) 0 64px;
    }

        .aer-leitura > .aer-wordmark {
            margin-bottom: var(--aer-e6);
        }

        .aer-leitura h1 {
            margin: 0 0 var(--aer-e4);
            font-family: var(--aer-fonte-titulo);
            font-stretch: var(--aer-largura-titulo);
            font-weight: var(--aer-peso-forte);
            font-size: var(--aer-t-7);
            line-height: 1.15;
        }

        .aer-leitura h2 {
            margin: var(--aer-e6) 0 var(--aer-e2);
            font-family: var(--aer-fonte-titulo);
            font-stretch: var(--aer-largura-titulo);
            font-weight: var(--aer-peso-forte);
            font-size: var(--aer-t-5);
        }

        .aer-leitura p {
            max-width: 68ch;
            margin: 0 0 var(--aer-e3);
            font-size: var(--aer-t-4);
            line-height: 1.65;
        }

    @media (prefers-reduced-motion: no-preference) {
        .aer-entrada-pulso {
            animation: aer-traca 1600ms var(--aer-curva) 150ms both;
        }
    }

    @keyframes aer-traca {
        from { clip-path: inset(0 100% 0 0); }
        to { clip-path: inset(0 0 0 0); }
    }

    @media (forced-colors: active) {
        .aer-tema-seletor button:focus-visible {
            outline: 2px solid CanvasText;
            outline-offset: 2px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .btn-entrar-seta {
            transition: none;
        }
    }
}