@layer base, telas;

@layer telas {
    .ent-corpo,
    .sa-body {
        margin: 0;
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--ias-fundo);
        color: var(--ias-texto);
        font-family: var(--ias-fonte);
        font-size: var(--ias-t-4);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
    }

        .ent-corpo *,
        .ent-corpo *::before,
        .ent-corpo *::after,
        .sa-body *,
        .sa-body *::before,
        .sa-body *::after {
            box-sizing: border-box;
        }

    :where(.ent-corpo, .sa-body) a {
        color: var(--ias-acento-texto);
        text-decoration: none;
    }

    :where(.ent-corpo, .sa-body) a:hover {
        text-decoration: underline;
    }

    :where(.ent-corpo, .sa-body) :is(h1, h2, p) {
        margin: 0;
    }

    .ent-marca {
        display: inline-flex;
        align-items: baseline;
        gap: 10px;
        color: var(--ias-shell-texto);
    }

    .ent-marca-barra {
        align-self: center;
        flex: 0 0 auto;
        width: var(--ias-regua);
        height: 28px;
        border-radius: 2px;
        background: var(--ias-shell-regua);
    }

    .ent-marca-nome {
        font-family: var(--ias-fonte-titulo);
        font-size: 1.75rem;
        font-weight: var(--ias-peso-forte);
        letter-spacing: -.035em;
        line-height: 1;
    }

    .ent-marca-apoio {
        font-size: var(--ias-t-3);
        color: var(--ias-shell-texto-2);
    }

    .ent-tela {
        display: grid;
        grid-template-columns: minmax(300px, 5fr) 7fr;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .ent-painel {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--ias-e6);
        padding: clamp(24px, 5vw, 56px);
        background: var(--ias-shell-fundo);
        border-right: 1px solid var(--ias-shell-borda);
        color: var(--ias-shell-texto);
    }

    .ent-painel-texto {
        max-width: 34ch;
        margin-block: auto;
    }

    .ent-painel,
    .sa-faixa {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .ent-ecg {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 96px;
        width: 100%;
        height: 96px;
        opacity: .22;
        pointer-events: none;
    }

        .ent-ecg path {
            fill: none;
            stroke: #fff;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1400;
            stroke-dashoffset: 1400;
            animation: ent-ecg 6s ease-in-out .5s infinite;
        }

    .sa-faixa .ent-ecg {
        bottom: 6px;
        height: 56px;
    }

    @keyframes ent-ecg {
        0% {
            stroke-dashoffset: 1400;
        }

        55%, 100% {
            stroke-dashoffset: 0;
        }
    }

    .ent-painel-titulo {
        font-family: var(--ias-fonte-titulo);
        font-size: var(--ias-t-8);
        font-weight: var(--ias-peso-forte);
        line-height: 1.15;
        letter-spacing: -.025em;
    }

    .ent-painel-apoio {
        margin-top: var(--ias-e3);
        color: var(--ias-shell-texto-2);
    }

    .ent-conteudo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(24px, 5vw, 56px);
    }

    .ent-limite {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .ent-titulo {
        font-family: var(--ias-fonte-titulo);
        font-size: var(--ias-t-8);
        font-weight: var(--ias-peso-forte);
        letter-spacing: -.025em;
        line-height: 1.15;
    }

    .ent-apoio {
        margin-top: var(--ias-e2);
        color: var(--ias-texto-2);
    }

    .ent-alerta {
        display: flex;
        align-items: flex-start;
        gap: var(--ias-e2);
        margin-top: var(--ias-e5);
        padding: 10px 14px;
        border: 1px solid rgba(var(--ias-negativo-rgb), .3);
        border-radius: var(--ias-raio-p);
        background: var(--ias-negativo-sutil);
        font-size: var(--ias-t-3);
    }

        .ent-alerta svg {
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            margin-top: 1px;
            color: var(--ias-negativo);
        }

    .ent-botao {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--ias-e2);
        min-height: 44px;
        padding: 0 var(--ias-e5);
        border: 1px solid transparent;
        border-radius: var(--ias-raio);
        background: var(--ias-acento);
        color: var(--ias-sobre-acento);
        font: inherit;
        font-weight: var(--ias-peso-medio);
        cursor: pointer;
        transition: background-color var(--ias-mov-rapido) ease;
    }

        .ent-botao:hover {
            background: var(--ias-acento-hover);
            color: var(--ias-sobre-acento);
            text-decoration: none;
        }

        .ent-botao:active {
            background: var(--ias-acento-ativo);
        }

        .ent-botao:focus-visible {
            outline: none;
            box-shadow: var(--ias-foco);
        }

        .ent-botao[disabled] {
            background: var(--ias-neutro);
            opacity: .65;
            cursor: not-allowed;
        }

        .ent-botao[aria-busy="true"] {
            cursor: progress;
        }

    .ent-botao--cheio {
        width: 100%;
        margin-top: var(--ias-e5);
    }

    .ent-botao--discreto {
        border-color: var(--ias-borda-campo);
        background: transparent;
        color: var(--ias-texto);
    }

        .ent-botao--discreto:hover {
            background: var(--ias-superficie-3);
            color: var(--ias-texto);
        }

    .ent-botao-icone {
        width: 20px;
        height: 20px;
    }

    .ent-acoes {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ias-e2);
        margin-top: var(--ias-e5);
    }

    .ent-rodape {
        margin-top: var(--ias-e6);
        font-size: var(--ias-t-1);
        color: var(--ias-texto-3);
    }

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

    .ent-faixa {
        padding: var(--ias-e4) clamp(20px, 6vw, 64px);
        background: var(--ias-shell-fundo);
    }

    .ent-sistema-corpo {
        flex: 1 1 auto;
        display: grid;
        place-items: center;
        padding: var(--ias-e6) var(--ias-e4);
    }

    .ent-sistema-cartao {
        width: 100%;
        max-width: 460px;
    }

    .ent-sistema-cartao .ent-titulo {
        font-size: var(--ias-t-7);
    }

    @media (max-width: 899.98px) {
        .ent-tela {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto 1fr;
        }

        .ent-painel {
            gap: var(--ias-e4);
            padding: var(--ias-e5) clamp(20px, 6vw, 64px);
        }

        .ent-painel-texto {
            display: none;
        }

        .ent-ecg {
            bottom: 0;
            height: 100%;
        }

        .ent-conteudo {
            justify-content: flex-start;
            padding-top: var(--ias-e6);
        }
    }

    .sa-tela {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .sa-limite {
        width: 100%;
        max-width: 1040px;
        margin: 0 auto;
        padding-left: clamp(20px, 4vw, 48px);
        padding-right: clamp(20px, 4vw, 48px);
    }

    .sa-faixa {
        flex: 0 0 auto;
        padding: var(--ias-e5) 0 72px;
        background: var(--ias-shell-fundo);
    }

    .sa-corpo {
        flex: 1 1 auto;
        padding: clamp(24px, 4vh, 44px) 0 var(--ias-e6);
    }

    .sa-cabecalho {
        margin-bottom: var(--ias-e5);
    }

    .sa-titulo {
        font-family: var(--ias-fonte-titulo);
        font-size: var(--ias-t-8);
        font-weight: var(--ias-peso-forte);
        letter-spacing: -.025em;
        line-height: 1.15;
    }

    .sa-identidade {
        margin-top: var(--ias-e2);
        color: var(--ias-texto-2);
    }

        .sa-identidade .mdi {
            margin-right: 4px;
            vertical-align: -3px;
            color: var(--ias-texto-3);
        }

        .sa-identidade strong {
            color: var(--ias-texto);
        }

    .sa-sair {
        margin-left: var(--ias-e2);
        padding-left: var(--ias-e3);
        border-left: 1px solid var(--ias-borda-forte);
        font-weight: var(--ias-peso-medio);
        white-space: nowrap;
    }

    .sa-aviso {
        display: flex;
        align-items: flex-start;
        gap: var(--ias-e2);
        margin-bottom: var(--ias-e5);
        padding: 10px 14px;
        border: 1px solid rgba(var(--ias-info-rgb), .3);
        border-radius: var(--ias-raio-p);
        background: var(--ias-info-sutil);
        font-size: var(--ias-t-3);
    }

    .sa-aviso--warning {
        border-color: rgba(var(--ias-atencao-rgb), .3);
        background: var(--ias-atencao-sutil);
    }

    .sa-aviso--error {
        border-color: rgba(var(--ias-negativo-rgb), .3);
        background: var(--ias-negativo-sutil);
    }

    .sa-aviso--success {
        border-color: rgba(var(--ias-positivo-rgb), .3);
        background: var(--ias-positivo-sutil);
    }

    .sa-eyebrow {
        font-size: var(--ias-t-1);
        font-weight: var(--ias-peso-forte);
        color: var(--ias-texto-2);
    }

    .sa-secao-cabeca {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--ias-e3);
        margin-bottom: var(--ias-e3);
    }

    .sa-contagem {
        font-size: var(--ias-t-1);
        font-weight: var(--ias-peso-medio);
        color: var(--ias-texto-2);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .sa-colunas {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ias-e6);
        align-items: start;
    }

    @media (min-width: 992px) {
        .sa-colunas {
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 40px;
        }

        .sa-colunas--unica {
            grid-template-columns: minmax(0, 600px);
        }
    }

    .sa-coluna {
        min-width: 0;
        max-width: 100%;
    }

    .sa-busca {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: var(--ias-e3);
    }

        .sa-busca .mdi {
            position: absolute;
            left: 12px;
            font-size: 18px;
            color: var(--ias-texto-3);
            pointer-events: none;
        }

        .sa-busca input {
            width: 100%;
            height: 42px;
            padding: 0 12px 0 38px;
            border: 1px solid var(--ias-borda-campo);
            border-radius: var(--ias-raio);
            background: var(--ias-superficie);
            color: var(--ias-texto);
            font: inherit;
        }

            .sa-busca input::placeholder {
                color: var(--ias-texto-3);
            }

            .sa-busca input:focus {
                outline: none;
                border-color: var(--ias-acento);
                box-shadow: var(--ias-foco);
            }

    .sa-lista {
        max-height: min(52vh, 520px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--ias-borda);
        border-radius: var(--ias-raio);
        background-color: var(--ias-superficie);
        background-image:
            linear-gradient(var(--ias-superficie) 30%, transparent),
            linear-gradient(transparent, var(--ias-superficie) 70%),
            radial-gradient(farthest-side at 50% 0, rgba(var(--ias-texto-rgb), .14), transparent),
            radial-gradient(farthest-side at 50% 100%, rgba(var(--ias-texto-rgb), .14), transparent);
        background-repeat: no-repeat;
        background-position: 0 0, 0 100%, 0 0, 0 100%;
        background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px;
        background-attachment: local, local, scroll, scroll;
    }

    .sa-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--ias-e3);
        padding: 12px var(--ias-e4);
        border-bottom: 1px solid var(--ias-borda);
        color: var(--ias-texto);
    }

    .sa-body .sa-item:hover {
        background: var(--ias-superficie-2);
        color: var(--ias-texto);
        text-decoration: none;
    }

    .sa-bloco:last-child .sa-item:last-child {
        border-bottom: 0;
    }

    .sa-item:focus-visible {
        outline: 2px solid var(--ias-anel-foco);
        outline-offset: -2px;
    }

    .sa-item[hidden],
    .sa-bloco[hidden] {
        display: none;
    }

    .sa-item-icone {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: var(--ias-raio-p);
        background: var(--ias-neutro-sutil);
        color: var(--ias-neutro);
        font-size: 18px;
    }

    .sa-item--clinica .sa-item-icone {
        background: var(--ias-pj-clinica-sutil);
        color: var(--ias-pj-clinica);
    }

    .sa-item--empresa .sa-item-icone {
        background: var(--ias-pj-empresa-sutil);
        color: var(--ias-pj-empresa);
    }

    .sa-item--convenio .sa-item-icone {
        background: var(--ias-pj-convenio-sutil);
        color: var(--ias-pj-convenio);
    }

    .sa-item-corpo {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: var(--ias-e2);
    }

    .sa-item-nome {
        min-width: 0;
        font-weight: var(--ias-peso-medio);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sa-item-meta {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 42%;
        font-size: var(--ias-t-2);
        color: var(--ias-texto-2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .sa-item-meta::before {
            content: "\00B7";
            margin-right: var(--ias-e2);
            color: var(--ias-texto-3);
        }

    .sa-item-seta {
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 19px;
        color: var(--ias-texto-3);
        transition: transform var(--ias-mov-rapido) ease, color var(--ias-mov-rapido) ease;
    }

    .sa-item:hover .sa-item-seta,
    .sa-pass:hover .sa-item-seta {
        color: var(--ias-acento-texto);
        transform: translateX(2px);
    }

    .sa-item.is-loading,
    .sa-pass.is-loading {
        pointer-events: none;
        background: var(--ias-superficie-2);
    }

        .sa-item.is-loading .sa-item-seta,
        .sa-pass.is-loading .sa-item-seta {
            color: transparent;
        }

            .sa-item.is-loading .sa-item-seta::after,
            .sa-pass.is-loading .sa-item-seta::after {
                content: "";
                position: absolute;
                right: var(--ias-e4);
                top: 50%;
                width: 15px;
                height: 15px;
                margin-top: -8px;
                border: 2px solid rgba(var(--ias-acento-rgb), .25);
                border-top-color: var(--ias-acento);
                border-radius: 50%;
                animation: sa-girar .7s linear infinite;
            }

    @keyframes sa-girar {
        to {
            transform: rotate(360deg);
        }
    }

    .sa-grupo-cabeca {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: var(--ias-e2);
        padding: 8px var(--ias-e4);
        border-bottom: 1px solid var(--ias-borda);
        background: var(--ias-neutro-sutil);
        font-size: var(--ias-t-1);
        font-weight: var(--ias-peso-forte);
        color: var(--ias-neutro);
    }

    .sa-bloco--clinica .sa-grupo-cabeca {
        background: var(--ias-pj-clinica-sutil);
        color: var(--ias-pj-clinica);
    }

    .sa-bloco--empresa .sa-grupo-cabeca {
        background: var(--ias-pj-empresa-sutil);
        color: var(--ias-pj-empresa);
    }

    .sa-bloco--convenio .sa-grupo-cabeca {
        background: var(--ias-pj-convenio-sutil);
        color: var(--ias-pj-convenio);
    }

    .sa-grupo-cabeca span {
        margin-left: auto;
        font-variant-numeric: tabular-nums;
    }

    .sa-sem-resultado {
        display: none;
        padding: 20px var(--ias-e4);
        color: var(--ias-texto-2);
    }

    .sa-sem-resultado.is-on {
        display: block;
    }

    /* Busca de empresas e convênios do Desenvolvedor: o servidor procura, a lista não vem inteira. */
    * + .sa-secao-pj {
        margin-top: var(--ias-e6);
    }

    .sa-nota-busca {
        margin: 0;
        font-size: var(--ias-t-1);
        color: var(--ias-texto-2);
    }

    .sa-lista + .sa-nota-busca {
        margin-top: var(--ias-e3);
    }

    .sa-passes {
        display: flex;
        flex-direction: column;
        gap: var(--ias-e3);
    }

    .sa-pass {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--ias-e3);
        padding: 12px var(--ias-e3);
        border: 1px solid var(--ias-borda);
        border-radius: var(--ias-raio);
        background: var(--ias-superficie);
        color: var(--ias-texto);
        transition: border-color var(--ias-mov-rapido) ease;
    }

    .sa-body .sa-pass:hover {
        border-color: var(--ias-acento);
        color: var(--ias-texto);
        text-decoration: none;
    }

    .sa-pass:focus-visible {
        outline: 2px solid var(--ias-anel-foco);
        outline-offset: 1px;
    }

    .sa-pass-icone {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: var(--ias-raio-p);
        background: var(--ias-acento-sutil);
        color: var(--ias-acento-texto);
        font-size: 19px;
    }

    .sa-pass-corpo {
        flex: 1 1 auto;
        min-width: 0;
    }

        .sa-pass-corpo b {
            display: block;
            font-weight: var(--ias-peso-medio);
            line-height: 1.3;
        }

        .sa-pass-corpo span {
            display: block;
            font-size: var(--ias-t-2);
            color: var(--ias-texto-2);
        }

    .sa-pass--xavier {
        padding: var(--ias-e4);
        overflow: hidden;
        border: 1px solid rgba(255, 200, 0, .45);
        color: #fff;
        background-color: #06070a;
    }

        .sa-pass--xavier::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, rgba(6, 7, 10, .96) 0%, rgba(6, 7, 10, .82) 45%, rgba(6, 7, 10, .4) 100%), url("../xmen/img/xavier-cerebro.jpg") center 20% / cover no-repeat;
        }

    .sa-body .sa-pass--xavier:hover {
        color: #fff;
        border-color: rgba(255, 200, 0, .9);
    }

    .sa-pass--xavier .sa-pass-icone {
        position: relative;
        z-index: 1;
        width: 40px;
        height: 40px;
        border: 2px solid #ffc800;
        background: rgba(255, 200, 0, .1);
        color: #ffc800;
        font-size: 1.3rem;
        font-weight: 900;
    }

    .sa-pass--xavier .sa-pass-corpo {
        position: relative;
        z-index: 1;
    }

        .sa-pass--xavier .sa-pass-corpo span {
            font-size: var(--ias-t-1);
            font-weight: var(--ias-peso-forte);
            color: #ffc800;
        }

    .sa-pass--xavier .sa-item-seta {
        position: relative;
        z-index: 1;
        color: #ffc800;
    }

    .sa-vazio {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: var(--ias-e5);
        padding: var(--ias-e5);
        border: 1px solid var(--ias-borda);
        border-radius: var(--ias-raio);
        background: var(--ias-superficie);
    }

        .sa-vazio .mdi {
            margin-bottom: 4px;
            font-size: 26px;
            color: var(--ias-texto-3);
        }

        .sa-vazio b {
            font-weight: var(--ias-peso-forte);
        }

        .sa-vazio span {
            color: var(--ias-texto-2);
        }

    .sa-rodape {
        flex: 0 0 auto;
        padding: var(--ias-e4) 0 var(--ias-e5);
        font-size: var(--ias-t-1);
        color: var(--ias-texto-3);
    }

    @media (prefers-reduced-motion: reduce) {
        .ent-ecg path {
            animation: none;
            stroke-dashoffset: 0;
        }

        .ent-botao,
        .sa-item,
        .sa-pass,
        .sa-item-seta {
            transition: none;
        }

        .sa-item.is-loading .sa-item-seta::after,
        .sa-pass.is-loading .sa-item-seta::after {
            animation: none;
        }
    }
}