/*=====================================================================
  LOGIN

  Estilo das telas de entrada: Default (login) e Recuperar_Senha. As
  cores saem dos tokens do Home.css, entao o tema claro e o escuro vem
  de graca e a tela acompanha o resto do portal.
=====================================================================*/

        /* =====================================================================
           LOGIN

           A tela e dividida em dois: o palco, que e da marca, e o painel de
           acesso, que e do formulario. As cores saem dos tokens do Home.css,
           entao claro e escuro vem de graca e a tela acompanha o portal.
           ===================================================================== */
        .fio {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            z-index: 10;
            background: linear-gradient(90deg, #1f93f2, #0c71de 40%, #27cb84 75%, #1f93f2);
        }

        .tela-login {
            display: flex;
            height: 100vh;
        }

        /* ---------- Palco ---------- */
        .palco {
            position: relative;
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
            /* Folga minima entre marca, texto e mural: sem ela, em tela baixa
               o space-between zerava o respiro e um bloco encostava no outro. */
            row-gap: 24px;
            min-width: 0;
            padding: 38px 0 32px 58px;
            background: var(--palco);
            overflow: hidden;
        }

            .palco::before {
                content: "";
                position: absolute;
                inset: 0;
                background-image: linear-gradient(var(--palco-malha) 1px, transparent 1px), linear-gradient(90deg, var(--palco-malha) 1px, transparent 1px);
                background-size: 62px 62px;
                mask-image: radial-gradient(120% 90% at 20% 10%, #000 20%, transparent 75%);
                -webkit-mask-image: radial-gradient(120% 90% at 20% 10%, #000 20%, transparent 75%);
            }

            .palco::after {
                content: "";
                position: absolute;
                width: 70%;
                height: 70%;
                top: -18%;
                right: -12%;
                border-radius: 50%;
                background: radial-gradient(circle at 40% 40%, var(--palco-brilho-1), transparent 62%);
                pointer-events: none;
            }

        .palco-brilho {
            position: absolute;
            width: 46%;
            height: 46%;
            bottom: -14%;
            left: 6%;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 50%, var(--palco-brilho-2), transparent 64%);
            pointer-events: none;
        }

        .cidade {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 200px;
            background: url('../img/city.png') repeat-x bottom left / auto 200px;
            opacity: var(--cidade);
            filter: brightness(0) invert(1);
            pointer-events: none;
        }

        .palco-topo {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 58px;
        }

        /* A logo co-branding (ADMEX | Participacoes Unimed) e longa e ja traz o
           proprio divisor: o nome do produto desce para baixo dela em vez de
           disputar a mesma linha. Sem opacidade, senao o laranja e o verde da
           Unimed desbotam no azul. */
        .palco-marca {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 0 1 auto;
            min-width: 0;
            margin-right: 16px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .75);
        }

            /* Medida pela largura, com a altura vindo da proporcao: no celular
               ela encolhe sozinha para caber ao lado do selo da entidade. */
            .palco-marca img {
                display: block;
                width: 300px;
                max-width: 100%;
                height: auto;
                margin-bottom: 9px;
            }

            .palco-marca span {
                white-space: nowrap;
            }

        .palco-entidade {
            display: flex;
            align-items: center;
            padding: 8px 16px 8px 8px;
            border: 1px solid var(--vidro-borda);
            border-radius: 30px;
            background: var(--vidro);
            backdrop-filter: blur(6px);
        }

            .palco-entidade .palco-entidade-selo {
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                margin-right: 11px;
                border-radius: 50%;
                background: rgba(255, 255, 255, .2);
                color: #fff;
                font-size: 12px;
            }

                .palco-entidade .palco-entidade-selo svg {
                    width: 13px;
                }

        .palco-entidade-texto b {
            display: block;
            font-size: 12.5px;
            font-weight: 700;
            letter-spacing: .3px;
            color: #fff;
        }

        .palco-texto {
            position: relative;
            z-index: 2;
            max-width: 560px;
            padding-right: 40px;
        }

        .palco-selo {
            display: inline-flex;
            align-items: center;
            margin-bottom: 20px;
            padding: 6px 14px 6px 8px;
            border: 1px solid var(--vidro-borda);
            border-radius: 20px;
            background: var(--vidro);
            backdrop-filter: blur(6px);
            font-size: 11px;
            font-weight: 600;
            color: #fff;
        }

            .palco-selo i, .palco-selo svg {
                margin-right: 9px;
                font-size: 11px;
                opacity: .9;
            }

            .palco-selo svg {
                width: 11px;
            }

        .palco-titulo {
            margin: 0 0 16px;
            font-size: 44px;
            font-weight: 300;
            line-height: 1.12;
            letter-spacing: -1.2px;
            color: #fff;
        }

            .palco-titulo b {
                display: block;
                font-weight: 700;
            }

        .palco-sub {
            margin: 0 0 24px;
            font-size: 14px;
            line-height: 1.75;
            color: var(--vidro-texto);
        }

        /* Duas colunas de largura igual: solto, cada atalho ficava de um
           tamanho e a grade parecia torta. */
        .palco-itens {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 240px));
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .palco-itens li {
                display: flex;
                align-items: center;
                padding: 9px 16px 9px 10px;
                border: 1px solid var(--vidro-borda);
                border-radius: 22px;
                background: var(--vidro);
                backdrop-filter: blur(6px);
                font-size: 12px;
                font-weight: 500;
                color: #fff;
            }

                /* O circulo fica no span, nunca no proprio icone: svg ignora o
                   padding para escalar o desenho e, como o Font Awesome usa
                   overflow visivel, o icone vazava em tamanho natural. */
                .palco-itens li .chip-icone {
                    width: 24px;
                    height: 24px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex: 0 0 auto;
                    margin-right: 10px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, .16);
                    font-size: 10px;
                }

                    .palco-itens li .chip-icone svg {
                        width: 11px;
                    }

        /* ---------- Mural (o antigo carrossel) ---------- */
        .base {
            position: relative;
            z-index: 2;
            max-width: 660px;
            padding-right: 20px;
        }

        .mural {
            position: relative;
            border: 1px solid var(--vidro-borda);
            border-radius: 18px;
            background: var(--vidro);
            backdrop-filter: blur(10px);
            overflow: hidden;
            transition: background .35s ease, border-color .35s ease;
        }

            /* Imagem nao aceita moldura: o comunicado da entidade ja chega com
               fundo e arte propria. */
            .mural.e-imagem {
                border-color: transparent;
                background: transparent;
                backdrop-filter: none;
            }

        /* O tamanho do mural e todo do CSS, sem script: os itens ficam um por
           cima do outro na mesma celula do grid (grid-area 1 / 1) e a celula
           assume a altura do maior - o banner na proporcao dele (o servidor
           manda width/height da imagem, entao o espaco existe antes de ela
           baixar) ou a mensagem mais longa naquela largura. Assim o mural ja
           abre no tamanho final, acompanha qualquer largura de tela e nao
           muda de tamanho na troca entre os itens. */
        .mural-palco {
            position: relative;
            display: grid;
            min-height: var(--mural-altura);
        }

        .mural-item {
            grid-area: 1 / 1;
            display: flex;
            align-items: center;
            padding: 18px 22px;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity .45s ease, transform .45s ease;
            pointer-events: none;
        }

            .mural-item.on {
                opacity: 1;
                transform: none;
                pointer-events: auto;
            }

            .mural-item.banner {
                padding: 0;
            }

                /* Altura pela proporcao da imagem, com teto para o comunicado
                   nao engolir a tela em monitor largo (contain: no teto ele
                   encolhe inteiro em vez de ser cortado). Quando a mensagem
                   mais longa pede mais altura que o banner, ele fica
                   centralizado na faixa. */
                .mural-item.banner img {
                    display: block;
                    width: 100%;
                    height: auto;
                    max-height: 220px;
                    object-fit: contain;
                    border-radius: 17px;
                }

        .mural-icone {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            margin-right: 16px;
            border-radius: 13px;
            background: var(--vidro-forte);
            color: #fff;
            font-size: 15px;
        }

            .mural-icone svg {
                width: 15px;
            }

            .mural-icone svg {
                width: 15px;
            }

        .mural-texto b {
            display: block;
            margin-bottom: 3px;
            font-size: 13px;
            font-weight: 700;
            color: #fff;
        }

        .mural-texto p {
            margin: 0;
            font-size: 12px;
            line-height: 1.6;
            color: var(--vidro-texto);
        }

        .mural-texto a {
            color: #fff;
            font-weight: 600;
            text-decoration: underline;
            cursor: pointer;
        }

        /* Em mensagem os pontos ficam no canto do proprio cartao; quando o item
           e imagem eles descem para fora, senao tapam as marcas do banner. */
        .mural-pontos {
            position: relative;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            min-height: 14px;
            margin: -26px 20px 22px 0;
            transition: margin .35s ease;
        }

        .mural.e-imagem + .mural-pontos {
            margin: 12px 2px 18px 0;
        }

        /* Comunicado da entidade (o servidor poe o com-banner no palco quando
           ha bannerPageDefault para a entidade): o banner era espremido nos
           640px da mensagem e ficava ilegivel. A base passa a ir ate 1040px e
           todos os itens usam a mesma area (o grid do .mural-palco), para o
           mural nao mudar de tamanho a cada troca. Os pontos ficam
           sempre fora do cartao, pelo mesmo motivo. A maquete sobe para dar
           lugar ao banner. Abaixo de 1240px ela ja some e abaixo de 860px a
           base toda sai, como antes. */
        .palco.com-banner .base {
            max-width: 1040px;
        }

            .palco.com-banner .mural-pontos {
                margin: 12px 2px 18px 0;
            }

            .palco.com-banner .mural-item {
                padding: 22px 30px;
            }

                .palco.com-banner .mural-item.banner {
                    padding: 0;
                }

            /* Na area maior a mensagem acompanha, senao fica perdida no cartao. */
            .palco.com-banner .mural-icone {
                width: 46px;
                height: 46px;
                margin-right: 18px;
                font-size: 17px;
            }

                .palco.com-banner .mural-icone svg {
                    width: 17px;
                }

            .palco.com-banner .mural-texto b {
                margin-bottom: 4px;
                font-size: 15px;
            }

            .palco.com-banner .mural-texto p {
                font-size: 13px;
            }

        .palco.com-banner .maquete {
            bottom: 270px;
        }

        .ponto {
            width: 7px;
            height: 7px;
            margin-left: 6px;
            padding: 0;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, .4);
            cursor: pointer;
            transition: all .2s;
        }

            .ponto:first-child {
                margin-left: 0;
            }

            .ponto:hover {
                background: rgba(255, 255, 255, .7);
            }

            .ponto.on {
                width: 20px;
                border-radius: 4px;
                background: #fff;
            }

            /* O clique deixava o contorno de foco preto do navegador em volta
               do ponto; o anel fica so para quem navega pelo teclado. */
            .ponto:focus {
                outline: none;
            }

            .ponto:focus-visible {
                outline: 2px solid rgba(255, 255, 255, .8);
                outline-offset: 2px;
            }

        /* A razao social e longa e nao pode ser cortada: quando nao couber, o
           rodape desce de linha. O que nao pode e o link quebrar no meio, por
           isso so ele e o separador ficam inteiros. */
        .palco-rodape {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            row-gap: 4px;
            font-size: 11px;
            line-height: 1.5;
            color: rgba(255, 255, 255, .55);
        }

            .palco-rodape a, .palco-rodape .separador {
                flex: 0 0 auto;
                white-space: nowrap;
            }

            .palco-rodape a {
                color: rgba(255, 255, 255, .8);
                font-weight: 600;
                text-decoration: none;
            }

                .palco-rodape a:hover {
                    color: #fff;
                    text-decoration: underline;
                }

            .palco-rodape .separador {
                margin: 0 10px;
                opacity: .45;
            }

        /* O selo da ANS fica guardado: o arquivo da maioria das entidades e um
           retangulo branco vazio, e o numero ja vem dentro da logo. O controle
           continua na pagina para o parametro nao se perder. */
        /* Controle que o code-behind preenche mas a tela nao mostra. */
        .controle-oculto {
            display: none;
        }

        .selo-ans {
            display: none;
        }

        /* O aviso do reCAPTCHA e do proprio Google e fica no canto: so garante
           que ele nao passe por baixo do painel. */
        .grecaptcha-badge {
            z-index: 20 !important;
        }

        /* ---------- Maquete do portal ---------- */
        .maquete {
            position: absolute;
            right: -18px;
            bottom: 160px;
            z-index: 1;
            width: 410px;
            transform: perspective(1500px) rotateY(-17deg) rotateX(6deg) rotate(-2deg);
            transform-origin: right bottom;
            mask-image: linear-gradient(to right, transparent, #000 26%);
            -webkit-mask-image: linear-gradient(to right, transparent, #000 26%);
            pointer-events: none;
        }

        .peca {
            padding: 15px 17px;
            margin-bottom: 13px;
            border: 1px solid var(--borda);
            border-radius: 16px;
            background: var(--cartao);
            box-shadow: 0 26px 50px rgba(6, 25, 55, .3);
            animation: flutuar 9s ease-in-out infinite alternate;
        }

            .peca:nth-child(2) {
                margin-left: 40px;
                animation-delay: -3s;
            }

            .peca:nth-child(3) {
                margin-left: 12px;
                animation-delay: -6s;
            }

        @keyframes flutuar {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-12px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .peca {
                animation: none;
            }
        }

        .peca-empresa {
            display: flex;
            align-items: center;
            padding: 17px;
            border: none;
            background: linear-gradient(120deg, #0b5fbd, #1f93f2);
        }

            .peca-empresa .peca-icone {
                width: 36px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                margin-right: 13px;
                border-radius: 12px;
                background: rgba(255, 255, 255, .2);
                color: #fff;
                font-size: 14px;
            }

                .peca-empresa .peca-icone svg {
                    width: 15px;
                }

        .peca-empresa-texto b {
            display: block;
            font-size: 12.5px;
            font-weight: 700;
            color: #fff;
        }

        .peca-empresa-texto span {
            font-size: 10px;
            color: rgba(255, 255, 255, .72);
        }

        .peca-kpis {
            display: flex;
            padding: 0;
            border: none;
            background: none;
            box-shadow: none;
        }

        .kpi {
            flex: 1;
            padding: 13px 15px;
            border: 1px solid var(--borda);
            border-radius: 14px;
            background: var(--cartao);
            box-shadow: 0 20px 40px rgba(6, 25, 55, .26);
        }

            .kpi + .kpi {
                margin-left: 11px;
            }

            .kpi span {
                display: block;
                font-size: 8.5px;
                font-weight: 700;
                letter-spacing: .6px;
                text-transform: uppercase;
                color: var(--texto-fraco);
            }

            .kpi b {
                display: block;
                margin-top: 4px;
                font-size: 21px;
                font-weight: 700;
                color: var(--texto);
            }

            .kpi.verde b {
                color: var(--ok);
            }

        .peca-fatura {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .fatura-texto span {
            display: block;
            font-size: 8.5px;
            font-weight: 700;
            letter-spacing: .6px;
            text-transform: uppercase;
            color: var(--texto-fraco);
        }

        .fatura-texto b {
            display: block;
            margin-top: 3px;
            font-size: 16px;
            font-weight: 700;
            color: var(--texto);
        }

        .selo-ok {
            padding: 5px 11px;
            border: 1px solid var(--ok-borda);
            border-radius: 14px;
            background: var(--ok-veu);
            font-size: 9.5px;
            font-weight: 700;
            color: var(--ok);
        }

        /* ---------- Painel de acesso ---------- */
        .acesso {
            position: relative;
            z-index: 3;
            display: flex;
            flex-direction: column;
            flex: 0 0 470px;
            padding: 40px 56px 30px;
            background: var(--cartao);
            box-shadow: -30px 0 70px rgba(6, 25, 55, .22);
            overflow-y: auto;
        }

            /* Em janela baixa o flex espremia os filhos e achatava o botao:
               aqui ninguem encolhe, o painel e que rola. */
            .acesso > * {
                flex: 0 0 auto;
            }

        .acesso-topo {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .acesso-logo img {
            max-width: 190px;
            max-height: 52px;
        }

        .acesso-entidade {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--borda);
            font-size: 11px;
            line-height: 1.6;
            color: var(--texto-fraco);
        }

            .acesso-entidade b {
                color: var(--texto-medio);
            }

        .tema {
            display: flex;
            flex: 0 0 auto;
            padding: 3px;
            border: 1px solid var(--borda);
            border-radius: 20px;
            background: var(--cartao-2);
        }

        .tema-botao {
            width: 30px;
            height: 26px;
            border: none;
            border-radius: 16px;
            background: none;
            color: var(--texto-fraco);
            font-size: 11px;
            cursor: pointer;
            transition: all .16s;
        }

            .tema-botao:hover {
                color: var(--azul);
            }

            .tema-botao.on {
                background: var(--azul-veu);
                color: var(--azul);
            }

        .acesso-titulo {
            margin: 0 0 6px;
            font-size: 25px;
            font-weight: 700;
            letter-spacing: -.5px;
            color: var(--texto);
        }

        .acesso-sub {
            margin: 0 0 26px;
            font-size: 12.5px;
            line-height: 1.6;
            color: var(--texto-fraco);
        }

        .campo {
            margin-bottom: 16px;
        }

        .rotulo {
            display: block;
            margin-bottom: 8px;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            color: var(--texto-fraco);
        }

        .entrada {
            display: flex;
            align-items: center;
            min-height: 50px;
            border: 1.5px solid var(--borda);
            border-radius: 13px;
            background: var(--cartao-2);
            transition: border-color .18s, box-shadow .18s, background .18s;
        }

            .entrada:focus-within {
                border-color: var(--azul-claro);
                background: var(--cartao);
                box-shadow: 0 0 0 4px var(--azul-veu);
            }

            /* O Font Awesome em JS troca o <i> por um <svg>, e svg com largura
               fixa estica o desenho: aqui o espaço vem da margem, nao da
               largura, e os dois ficam iguais. */
            .entrada > i, .entrada > svg {
                flex: 0 0 auto;
                margin: 0 13px 0 16px;
                font-size: 15px;
                color: var(--texto-apagado);
                transition: color .18s;
            }

            .entrada > svg {
                width: 15px;
            }

            .entrada:focus-within > i, .entrada:focus-within > svg {
                color: var(--azul);
            }

            .entrada input {
                flex: 1;
                width: 100%;
                padding: 14px 14px 14px 0;
                border: none;
                background: none;
                font-family: inherit;
                font-size: 14px;
                color: var(--texto);
                outline: none;
            }

                .entrada input::placeholder {
                    color: var(--texto-apagado);
                }

        .olho {
            padding: 0 15px;
            border: none;
            background: none;
            color: var(--texto-fraco);
            font-size: 14px;
            cursor: pointer;
        }

            .olho:hover {
                color: var(--azul);
            }

        .linha {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 18px 0 24px;
            font-size: 12px;
        }

        .lembrar {
            display: flex;
            align-items: center;
            margin: 0;
            color: var(--texto-medio);
            cursor: pointer;
            user-select: none;
        }

            .lembrar input {
                position: absolute;
                opacity: 0;
                pointer-events: none;
            }

        .marcador {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            margin-right: 9px;
            border: 1.5px solid var(--borda);
            border-radius: 6px;
            background: var(--cartao-2);
            color: #fff;
            font-size: 9px;
            transition: all .15s;
        }

            .marcador i, .marcador svg {
                opacity: 0;
                transform: scale(.6);
                transition: all .15s;
            }

        .lembrar input:checked + .marcador {
            border-color: var(--azul);
            background: var(--azul);
        }

            .lembrar input:checked + .marcador i, .lembrar input:checked + .marcador svg {
                opacity: 1;
                transform: none;
            }

        .link {
            color: var(--azul);
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
        }

            .link:hover {
                color: var(--azul-escuro);
                text-decoration: underline;
            }

        .btn-acesso {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 100%;
            height: 50px;
            min-height: 50px;
            border: none;
            border-radius: 13px;
            font-family: inherit;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all .18s;
            background: var(--azul);
            color: #fff;
            box-shadow: 0 12px 26px rgba(12, 113, 222, .32);
        }

            .btn-acesso:hover, .btn-acesso:focus {
                background: var(--azul-escuro);
                color: #fff;
                transform: translateY(-1px);
                box-shadow: 0 16px 32px rgba(12, 113, 222, .38);
            }

            .btn-acesso i, .btn-acesso svg {
                margin-left: 10px;
                font-size: 12px;
                transition: transform .18s;
            }

            .btn-acesso:hover i, .btn-acesso:hover svg {
                transform: translateX(3px);
            }

        /* Acao secundaria (o Voltar da recuperacao de senha): mesmo corpo do
           botao principal, sem o peso da cor cheia. */
        .btn-acesso.btn-voltar {
            margin-top: 12px;
            border: 1.5px solid var(--borda);
            background: var(--cartao);
            color: var(--texto);
            text-decoration: none;
            box-shadow: none;
        }

            .btn-acesso.btn-voltar:hover {
                border-color: var(--azul-borda);
                background: var(--azul-veu);
                color: var(--azul);
                transform: none;
                box-shadow: none;
            }

            .btn-acesso.btn-voltar i, .btn-acesso.btn-voltar svg {
                margin: 0 9px 0 0;
            }

            .btn-acesso.btn-voltar:hover i, .btn-acesso.btn-voltar:hover svg {
                transform: none;
            }

        /* =====================================================================
           SELECIONE SEU CADASTRO

           Quando o CPF/CNPJ tem mais de um cadastro, o conteudo do painel
           desliza para o lado e entra a escolha - o mesmo movimento de antes,
           so que dentro do painel, sem trocar a tela inteira.
           ===================================================================== */
        .painel-acesso {
            transition: transform .45s cubic-bezier(.2, .8, .3, 1), opacity .35s ease;
        }

            .painel-acesso.fora-esquerda, .painel-acesso.fora-direita {
                position: absolute;
                left: 56px;
                right: 56px;
                opacity: 0;
                pointer-events: none;
            }

            .painel-acesso.fora-esquerda {
                transform: translateX(-40px);
            }

            .painel-acesso.fora-direita {
                transform: translateX(40px);
            }

        .planos {
            margin-bottom: 26px;
        }

        .plano {
            position: relative;
            display: flex;
            align-items: center;
            margin: 0 0 10px;
            padding: 14px 16px;
            border: 1.5px solid var(--borda);
            border-radius: 14px;
            background: var(--cartao-2);
            cursor: pointer;
            transition: border-color .18s, background .18s, box-shadow .18s;
        }

            .plano:hover {
                border-color: var(--azul-borda);
                background: var(--azul-veu);
            }

            .plano input {
                position: absolute;
                opacity: 0;
                pointer-events: none;
            }

            .plano.marcado {
                border-color: var(--azul);
                background: var(--azul-veu);
                box-shadow: 0 0 0 3px var(--azul-veu);
            }

        .plano-marca {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            margin-right: 13px;
            border: 2px solid var(--borda);
            border-radius: 50%;
            background: var(--cartao);
            transition: all .18s;
        }

        .plano.marcado .plano-marca {
            border-color: var(--azul);
            border-width: 5px;
        }

        .plano-texto {
            flex: 1;
            min-width: 0;
            font-size: 12.5px;
            font-weight: 600;
            line-height: 1.4;
            color: var(--texto);
        }

        /* A cor vem do servidor (BackGroundColorHex), como ja vinha. */
        .plano-situacao {
            flex: 0 0 auto;
            align-self: flex-start;
            margin-left: 12px;
            padding: 3px 10px;
            border-radius: 12px;
            color: #fff;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .4px;
        }

        .apoio {
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid var(--borda);
            font-size: 12px;
            line-height: 1.8;
            color: var(--texto-fraco);
        }

            .apoio b {
                display: block;
                margin-bottom: 2px;
                font-size: 12.5px;
                color: var(--texto);
            }

        .apoio-linha {
            display: flex;
            align-items: flex-start;
        }

            .apoio-linha > i, .apoio-linha > svg {
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                margin-right: 12px;
                border-radius: 10px;
                background: var(--azul-veu);
                color: var(--azul);
                font-size: 12px;
            }

        /* O onSubmit do page_default.js escreve o erro aqui dentro. */
        .login-erro .alert {
            margin-bottom: 18px;
            padding: 12px 14px;
            border: 1px solid var(--critico);
            border-radius: 12px;
            background: var(--critico-veu);
            font-size: 12px;
            line-height: 1.5;
            color: var(--critico);
        }

            .login-erro .alert i, .login-erro .alert svg {
                margin-right: 9px;
            }

            .login-erro .alert ul {
                padding-left: 0;
            }

                .login-erro .alert ul li {
                    color: var(--critico) !important;
                }

            /* Aviso montado pelo MontarErroLogin: titulo e mensagem empilhados
               na mesma margem. Quebre a mensagem em quantas linhas quebrar, o
               titulo nao sai do lugar. */
            .login-erro .alert.aviso-erro {
                display: block;
                padding: 12px 16px;
            }

                .aviso-erro-texto b {
                    display: block;
                    font-size: 12.5px;
                    font-weight: 700;
                    line-height: 1.3;
                }

                .aviso-erro-texto span {
                    display: block;
                    margin-top: 2px;
                    line-height: 1.5;
                }

        .acesso-rodape {
            margin-top: auto;
            padding-top: 24px;
            font-size: 10.5px;
            line-height: 1.7;
            color: var(--texto-apagado);
        }

        #txtCaptcha {
            display: none;
        }

        /* ---------- Modal Solicite sua senha ---------- */
        .solicite-svg {
            margin-bottom: 14px;
            text-align: center;
            color: var(--azul);
        }

        #svgFill {
            fill: var(--azul-veu);
        }

        .modal-content {
            border: 1px solid var(--borda);
            border-radius: 18px;
            background: var(--cartao);
            color: var(--texto);
        }

        .modal-header, .modal-footer {
            border-color: var(--borda);
        }

        .btn-Fechar {
            padding: 9px 22px;
            border: none;
            border-radius: 22px;
            background: var(--azul);
            color: #fff;
            font-size: 12.5px;
            font-weight: 600;
        }

            .btn-Fechar:hover {
                background: var(--azul-escuro);
                color: #fff;
            }

        /* ---------- Responsivo ---------- */
        @media screen and (max-width: 1240px) {
            .maquete {
                display: none;
            }

            .palco {
                padding-left: 44px;
            }

            .palco-titulo {
                font-size: 38px;
            }

            .acesso {
                flex-basis: 420px;
                padding: 36px 40px 28px;
            }
        }

        /* ---------- Tela baixa (notebook) ----------
           O palco inteiro pede uns 680px de altura e o notebook costuma ter
           entre 580 e 730 de area util: sem estas faixas os blocos eram
           espremidos um contra o outro. Vale so para o layout lado a lado;
           abaixo de 860px de largura manda o bloco de baixo. O que sai
           primeiro e o que e so enfeite (maquete, selo, subtitulo); os atalhos
           e o mural saem por ultimo. */
        @media screen and (min-width: 861px) and (max-height: 760px) {
            .palco {
                padding-top: 30px;
                padding-bottom: 24px;
            }

            .palco-selo {
                margin-bottom: 14px;
            }

            .palco-titulo {
                margin-bottom: 12px;
                font-size: 36px;
            }

            .palco-sub {
                margin-bottom: 16px;
            }

            .palco-itens {
                gap: 10px;
            }

                .palco-itens li {
                    padding: 6px 14px 6px 8px;
                }
        }

        @media screen and (min-width: 861px) and (max-height: 680px) {
            .maquete, .palco-selo, .palco-sub {
                display: none;
            }
        }

        @media screen and (min-width: 861px) and (max-height: 560px) {
            .palco-itens {
                display: none;
            }
        }

        @media screen and (min-width: 861px) and (max-height: 440px) {
            .mural, .mural-pontos {
                display: none;
            }
        }

        @media screen and (max-width: 860px) {
            :root {
                --mural-altura: 86px;
            }

            .tela-login {
                flex-direction: column;
                height: auto;
                min-height: 100vh;
            }

            /* O respiro embaixo e o que separa a faixa da marca do painel de
               login, que sobe 20px por cima dela. */
            .palco {
                flex: 0 0 auto;
                padding: 24px 22px 54px;
            }

            .palco-topo {
                padding-right: 0;
                margin-bottom: 22px;
            }

            .palco-entidade {
                padding: 5px 12px 5px 5px;
            }

                .palco-entidade .palco-entidade-selo {
                    width: 26px;
                    height: 26px;
                    margin-right: 9px;
                }

            .palco-titulo {
                margin: 0;
                font-size: 25px;
                letter-spacing: -.6px;
            }

            /* Aqui a faixa e so apresentacao: o mural, os atalhos e o rodape
               saem, como era antes, para o login aparecer sem rolagem. */
            .palco-selo, .palco-itens, .palco-rodape, .palco-sub, .base {
                display: none;
            }

            .palco-marca, .palco-entidade-texto b {
                white-space: nowrap;
            }

            .palco-marca {
                font-size: 10px;
                letter-spacing: 2px;
            }

                .palco-marca img {
                    width: 220px;
                    margin-bottom: 6px;
                }

            .cidade {
                height: 120px;
                background-size: auto 120px;
            }

            .acesso {
                flex: 1 1 auto;
                padding: 26px 22px 24px;
                box-shadow: none;
                border-radius: 22px 22px 0 0;
                margin-top: -20px;
            }
        }

        /* Celular estreito: a marca da plataforma fica so na logo. O nome do
           produto ja esta no titulo logo abaixo, e sem ele a faixa nao cresce. */
        @media screen and (max-width: 620px) {
            .palco-marca span {
                display: none;
            }

                .palco-marca img {
                    margin-bottom: 0;
                }

            .palco-titulo {
                font-size: 23px;
            }
        }