/* ===========================================================================
   MOLDURA DA TELA DE LOGIN (admin/index) - shell, hero, card, campos, modais.

   Estava em nove blocos <style> dentro de index/index.phtml, o que impedia
   qualquer outra porta de login de reaproveitar a tela sem copiar CSS. Aqui os
   nove viraram um arquivo, NA MESMA ORDEM - em CSS quem vem depois ganha, entao
   a ordem entre os blocos e o comportamento; nao reordene as secoes abaixo.

   Quem consome: o login do Galileu, a pele easii (public/easii/css/easii-login.css,
   carregado DEPOIS deste) e a pele cantina (public/cantina-perfil/css/
   cantina-login.css). Marca e cor ficam nos arquivos de pele; aqui e so estrutura.
   =========================================================================== */

/* ------------------------------------------------------------------ bloco 1 */
    :root {
        --galileu-login-primary: var(--galileu-theme-primary, #2F55D4);
        --galileu-login-primary-dark: var(--galileu-theme-primary-dark, #2649B3);
        --galileu-login-bg: #ffffff;
        --galileu-login-border: #dbe2ee;
        --galileu-login-title: #1f2a3a;
        --galileu-login-text: #304057;
        --galileu-login-muted: #667085;
    }

    .galileu-auth-shell,
    .galileu-auth-shell * {
        box-sizing: border-box;
    }

    .galileu-auth-shell {
        min-height: 100vh;
        display: grid;
        /*grid-template-columns: minmax(460px, 42vw) minmax(0, 1fr);*/
        padding: 0;
        background: #fff;
    }

    /* FORMULÁRIO À ESQUERDA */
    .galileu-auth-card {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .galileu-auth-card__body {
        width: 100%;
        max-width: 520px;
        padding: 54px 64px;
    }

    .galileu-auth-brand {
        justify-content: flex-start;
        margin-bottom: 64px;
    }

    .galileu-auth-brand img,
    .admin-login-brand img {
        max-width: 300px;
        max-height: 92px;
        margin: 0;
    }

    .galileu-auth-card__headline {
        text-align: left;
        margin-bottom: 28px;
    }

    .galileu-auth-card__headline h2 {
        margin: 0;
        color: var(--galileu-login-title);
        font-size: 30px;
        line-height: 1.2;
        font-weight: 800;
    }

    .galileu-auth-card__headline p {
        margin: 8px 0 0;
        color: var(--galileu-login-muted);
        font-size: 15px;
        line-height: 1.5;
    }

    .galileu-auth-form-group {
        margin-bottom: 24px;
    }

    .galileu-auth-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .galileu-auth-label,
    .galileu-auth-form-group > label,
    .galileu-auth-label-row > label {
        display: block;
        margin: 0 0 8px;
        color: var(--galileu-login-text);
        font-size: 14px !important;
        font-weight: 700;
    }

    .galileu-auth-label-row > label {
        margin: 0;
    }

    .galileu-auth-link {
        color: var(--galileu-login-primary) !important;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
    }

    .galileu-auth-link:hover {
        text-decoration: underline !important;
    }

    .galileu-auth-input,
    .galileu-auth-card .form-control,
    .galileu-auth-card input.form-control {
        height: 52px;
        min-height: 52px;
        border: 1px solid #cfd8e3;
        border-radius: 6px;
        background: #fff;
        color: var(--galileu-login-title);
        font-size: 15px !important;
        font-weight: 500;
        padding: 12px 14px;
        box-shadow: none;
    }

    .galileu-auth-card .form-control:focus,
    .galileu-auth-input:focus {
        border-color: var(--galileu-login-primary);
        box-shadow: 0 0 0 3px rgba(47, 85, 212, .12);
        outline: 0;
    }

    .galileu-auth-input-group.input-group {
        width: 100%;
    }

    .galileu-auth-input-group.input-group .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .galileu-auth-input-group .input-group-addon {
        min-width: 54px;
        border: 1px solid #cfd8e3;
        border-left: 0;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        background: #fff;
        color: #64748b;
        text-align: center;
        vertical-align: middle;
    }

    .galileu-auth-actions {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 28px;
    }

    .galileu-auth-button,
    .admin-button-access {
        min-height: 54px;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        border-color: var(--galileu-login-primary) !important;
        background: var(--galileu-login-primary) !important;
        color: #fff !important;
        box-shadow: none;
    }

    .galileu-auth-button:hover,
    .admin-button-access:hover {
        background: var(--galileu-login-primary-dark) !important;
        border-color: var(--galileu-login-primary-dark) !important;
    }

    .galileu-auth-divider,
    .admin-login-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #98a2b3;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin: 8px 0;
    }

    .galileu-auth-divider:before,
    .galileu-auth-divider:after,
    .admin-login-divider:before,
    .admin-login-divider:after {
        content: "";
        height: 1px;
        flex: 1;
        background: #edf1f7;
    }

    .galileu-auth-social-group,
    .admin-login-social-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: none;
        margin: 0;
    }

    .admin-google-button-holder {
        display: flex;
        justify-content: flex-start;
    }



    .admin-apple-button,
    .admin-microsoft-button {
        width: 100%;
        min-height: 48px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 700;
    }

    .admin-apple-button {
        border: 1px solid #111827;
        background: #111827;
        color: #fff;
    }

    .admin-microsoft-button {
        border: 1px solid #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .galileu-auth-footer,
    .admin-panel-footer {
        margin-top: 38px;
    }



    .galileu-auth-portal-card,
    .admin-portal-card {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none !important;
        color: var(--galileu-login-primary) !important;
        font-size: 14px;
        font-weight: 700;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .galileu-auth-portal-card:hover,
    .admin-portal-card:hover {
        text-decoration: underline !important;
    }

    /* HERO À DIREITA */
    .galileu-auth-hero {
        grid-column: 1;
        grid-row: 1;
        min-height: 100vh;
        margin: 0;
        padding: 80px 70px;
        border-radius: 0;
        background:
            radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 25%),
            radial-gradient(circle at 90% 78%, rgba(255,255,255,.16), transparent 30%),
            linear-gradient(135deg, #0875d1 0%, #0998ee 52%, #006ec7 100%);
        color: #fff;
        display: flex;
        align-items: center;
        text-align: left;
        overflow: hidden;
    }

    .galileu-auth-hero__inner {
        max-width: 680px;
        margin: 0;
        position: relative;
        z-index: 2;
    }

    .galileu-auth-hero__logo {
        height: 72px;
        max-width: 340px;
        object-fit: contain;
        margin-bottom: 44px;
    }

    .galileu-auth-hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        padding: 6px 16px;
        margin-bottom: 28px;
        border: 1px solid rgba(255,255,255,.34);
        border-radius: 999px;
        background: rgba(255,255,255,.13);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
    }

    .galileu-auth-hero__title {
        margin: 0;
        font-size: 48px;
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: -.03em;
    }

    .galileu-auth-hero__subtitle {
        margin: 24px 0 0;
        max-width: 560px;
        color: rgba(255,255,255,.9);
        font-size: 22px;
        line-height: 1.45;
    }

    /* remove bolhas antigas muito agressivas */
    .galileu-auth-hero:before,
    .galileu-auth-hero:after {
        content: "";
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
    }

    .galileu-auth-hero:before {
        width: 520px;
        height: 520px;
        right: -180px;
        top: -140px;
        background: rgba(255,255,255,.08);
    }

    .galileu-auth-hero:after {
        width: 620px;
        height: 620px;
        left: -240px;
        bottom: -260px;
        border: 1px solid rgba(255,255,255,.16);
    }

    /* Compatibilidade */
    .admin-login-brand {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 24px;
        text-align: left;
    }

    .admin-google-panel {
        margin-top: 0;
        padding: 0;
    }

    .admin-login-actions {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Modal lateral direita */
    .modal-right-side {
        padding-right: 0 !important;
    }

    .modal-right-side .modal-dialog {
        position: fixed;
        top: 0;
        right: 0;
        margin: 0;
        width: 50vw;
        max-width: 50vw;
        height: 100vh;
        transform: translateX(100%) !important;
        transition: transform .35s ease-in-out !important;
    }

    .modal-right-side.in .modal-dialog {
        transform: translateX(0) !important;
    }

    .modal-right-side .modal-content {
        height: 100vh;
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .modal-right-side .modal-header {
        flex-shrink: 0;
        border-bottom: 1px solid #eef2f7;
        padding: 20px 24px;
    }

    .modal-right-side .modal-title {
        color: var(--galileu-login-title);
        font-weight: 800;
    }

    .modal-right-side .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
    }

    .footer-escolha {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 16px 24px;
        border-top: 1px solid #eef2f7;
    }

    .botao-acessar {
        height: 52px;
        border-radius: 8px !important;
        font-weight: 800;
    }

    /* Escola */
    .galileu-school-session {
        text-align: center;
        margin-bottom: 22px;
        color: var(--galileu-login-muted);
        font-size: 13px;
    }

    .card-escola {
        background: #fff;
        border-radius: 14px;
        padding: 18px 20px;
        margin-bottom: 14px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all .2s ease;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .card-escola:hover {
        border-color: #d6dcff;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(47,85,212,.08);
    }

    .card-escola.active {
        border-color: var(--galileu-login-primary);
        background: #eef4ff;
    }

    .card-escola input {
        display: none;
    }

    .card-escola-nome {
        font-weight: 800;
        font-size: 15px;
        color: var(--galileu-login-title);
    }

    /* Modal central */
    .galileu-auth-modal .modal-content {
        border: 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(15,23,42,.18);
    }

    .galileu-auth-modal .modal-header {
        border-bottom: 1px solid #eef2f7;
        padding: 18px 22px;
    }

    .galileu-auth-modal .modal-title {
        color: var(--galileu-login-title);
        font-weight: 800;
    }

    .galileu-auth-modal .modal-body {
        padding: 22px;
    }

    /* Notebook */
    @media (max-width: 1199px) {
        .galileu-auth-shell {
            /*grid-template-columns: minmax(420px, 46vw) minmax(0, 1fr);*/
        }

        .galileu-auth-card__body {
            padding: 44px 48px;
        }

        .galileu-auth-hero {
            padding: 64px 52px;
        }

        .galileu-auth-hero__title {
            font-size: 40px;
        }

        .galileu-auth-hero__subtitle {
            font-size: 19px;
        }
    }

    /* Tablet e mobile: empilha */
    @media (max-width: 991px) {
        .galileu-auth-shell {
            display: block;
            min-height: 100vh;
            background: #fff;
        }

        .galileu-auth-hero {
            min-height: auto;
            padding: 34px 20px 88px;
            text-align: center;
            display: block;
        }

        .galileu-auth-hero__inner {
            margin: 0 auto;
        }

        .galileu-auth-hero__logo {
            height: 54px;
            margin-bottom: 18px;
        }

        .galileu-auth-hero__title {
            font-size: 28px;
        }

        .galileu-auth-hero__subtitle {
            font-size: 16px;
            margin-left: auto;
            margin-right: auto;
        }

        .galileu-auth-card {
            min-height: auto;
            margin-top: -58px;
            border-radius: 24px 24px 0 0;
            box-shadow: 0 -12px 36px rgba(15,23,42,.12);
        }

        .galileu-auth-card__body {
            max-width: 560px;
            margin: 0 auto;
            padding: 34px 24px 28px;
        }

        .galileu-auth-brand {
            justify-content: center;
            margin-bottom: 28px;
        }

        .galileu-auth-card__headline {
            text-align: center;
        }

        .modal-right-side .modal-dialog {
            width: 100vw;
            max-width: 100vw;
        }
    }

    @media (max-width: 480px) {
        .galileu-auth-card__body {
            padding: 28px 18px 22px;
        }

        .galileu-auth-label-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }

        .galileu-auth-brand img {
            max-width: 250px;
        }
    }

/* ------------------------------------------------------------------ bloco 2 */
    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }

    .galileu-auth-shell {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        margin-left: calc(50% - 50vw);
        /*grid-template-columns: minmax(520px, 44vw) minmax(0, 1fr);*/
    }

    .galileu-auth-card__body {
        max-width: 560px;
        padding-left: 72px;
        padding-right: 72px;
    }

    .galileu-auth-hero {
        width: 100%;
        min-width: 0;
    }

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

    .galileu-auth-card__body {
        max-width: 470px !important;
        padding: 24px 42px 18px !important;
    }

    /* Logo */
    .galileu-auth-brand {
        margin-bottom: 20px !important;
    }

    .galileu-auth-brand img {
        max-width: 230px !important;
        max-height: 64px !important;
    }

    /* Headline */
    .galileu-auth-card__headline {
        margin-bottom: 16px !important;
    }

    .galileu-auth-card__headline h2 {
        font-size: 22px !important;
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
    }

    .galileu-auth-card__headline p {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Espaçamento entre campos */
    .galileu-auth-form-group {
        margin-bottom: 12px !important;
    }

    /* Labels */
    .galileu-auth-label,
    .galileu-auth-link {
        font-size: 12px !important;
    }

    /* Inputs */
    .galileu-auth-input,
    .galileu-auth-card .form-control,
    .galileu-auth-card input.form-control {
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
    }

    /* Botão olho */
    .galileu-auth-input-group .input-group-addon {
        min-width: 40px !important;
        padding: 0 10px !important;
    }

    /* Botão principal */
    .galileu-auth-button,
    .admin-button-access {
        min-height: 42px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }

    /* Área ações */
    .galileu-auth-actions {
        margin-top: 14px !important;
        gap: 8px !important;
    }

    /* Divider */
    .galileu-auth-divider,
    .admin-login-divider {
        margin: 0 !important;
        font-size: 10px !important;
    }

    /* Social login */
    .galileu-auth-social-group,
    .admin-login-social-group {
        gap: 6px !important;
    }
    .admin-google-button-holder {
        width: 100% !important;
        display: block !important;
    }

    .admin-google-button-holder > div {
        width: 100% !important;
    }

    .admin-google-button-holder {
        width: 100%;
        overflow: hidden;
        border-radius: 6px;
    }

    .admin-google-button-holder > div {
        width: 100% !important;
    }

    .g_id_signin {
        width: 100% !important;
    }

    .admin-apple-button,
    .admin-microsoft-button {
        min-height: 38px !important;
        font-size: 12px !important;
    }

    /* Rodapé */
    .galileu-auth-footer,
    .admin-panel-footer {
        margin-top: 12px !important;
    }

    .galileu-auth-portal-links,
    .admin-portal-links {
        margin-top: 10px !important;
        padding-top: 10px !important;
        gap: 6px !important;
    }

    .galileu-auth-portal-card,
    .admin-portal-card {
        min-height: 30px !important;
        font-size: 12px !important;
    }

    /* HERO DIREITA MAIS COMPACTO */

    .galileu-auth-hero {
        padding: 30px 50px !important;
        align-items: flex-start !important;
    }

    .galileu-auth-hero__logo {
        height: 48px !important;
        margin-bottom: 18px !important;
    }

    .galileu-auth-hero__eyebrow {
        min-height: 28px !important;
        padding: 4px 12px !important;
        margin-bottom: 14px !important;
        font-size: 12px !important;
    }

    .galileu-auth-hero__title {
        font-size: 30px !important;
        line-height: 1.08 !important;
        max-width: 520px;
    }

    .galileu-auth-hero__subtitle {
        margin-top: 12px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        max-width: 500px;
    }

    /* Bolha menor */
    .galileu-auth-hero:before {
        width: 420px !important;
        height: 420px !important;
        right: -120px !important;
        top: -120px !important;
    }

    /* Desktop menor */
    @media (max-height: 900px) {

        .galileu-auth-card__body {
            padding-top: 16px !important;
        }

        .galileu-auth-brand {
            margin-bottom: 14px !important;
        }

        .galileu-auth-card__headline {
            margin-bottom: 10px !important;
        }

        .galileu-auth-form-group {
            margin-bottom: 8px !important;
        }

        .galileu-auth-actions {
            margin-top: 10px !important;
        }

        .galileu-auth-footer,
        .admin-panel-footer {
            margin-top: 8px !important;
        }
    }

/* ------------------------------------------------------------------ bloco 3 */
    /* Remove rolagem causada pelo layout antigo do login */
    html,
    body {
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
    }

    /* Neutraliza wrappers antigos do login */
    #main,
    .login-form,
    .login-form .reset,
    .login-form .row,
    .login-form [class*="col-sm-"],
    .login-form .mx-5,
    .login-form .mx-md-0 {
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* A regra acima alcanca TUDO que esteja dentro de .login-form - inclusive as modais do
       login (recuperar senha, escolher escola, 2a etapa), que sao renderizadas dentro dele.
       Cada linha/coluna delas ganhava 100vh: na modal "Esqueci minha senha" o campo de e-mail
       ia parar ~500px abaixo do proprio rotulo, com um vazio no meio. Aqui a altura forcada
       para na porta da modal (o resto da regra continua valendo, para nao mexer no layout). */
    .login-form .modal .row,
    .login-form .modal [class*="col-sm-"],
    .login-form .modal .mx-5,
    .login-form .modal .mx-md-0 {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Remove sombra e estrutura antiga */
    .login-form {
        box-shadow: none !important;
        flex: none !important;
    }

    /* Esconde o footer antigo que cria altura extra */
    .login-form > footer,
    footer.py-4 {
        display: none !important;
    }

    /* O login passa a controlar 100% da tela */
    .galileu-auth-shell {
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        /*grid-template-columns: minmax(430px, 40vw) minmax(0, 1fr) !important;*/
    }

    /* Colunas sem ultrapassar a viewport */
    .galileu-auth-card,
    .galileu-auth-hero {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    /* Conteúdo do formulário menor e sem scroll */
    .galileu-auth-card {
        align-items: flex-start !important;
    }

    .galileu-auth-card__body {
        max-width: 430px !important;
        padding: 18px 36px 12px !important;
    }

    /* Compactação extra */
    .galileu-auth-brand {
        margin-bottom: 12px !important;
    }

    .galileu-auth-brand img {
        max-width: 210px !important;
        max-height: 58px !important;
    }

    .galileu-auth-form-group {
        margin-bottom: 7px !important;
    }

    .galileu-auth-input,
    .galileu-auth-card .form-control,
    .galileu-auth-card input.form-control {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 13px !important;
    }

    .galileu-auth-button,
    .admin-button-access {
        min-height: 40px !important;
        font-size: 14px !important;
    }

    .galileu-auth-actions {
        margin-top: 8px !important;
        gap: 6px !important;
    }

    .form-group.mt-4 {
        margin-top: 8px !important;
    }

    .galileu-auth-social-group,
    .admin-login-social-group {
        gap: 6px !important;
    }

    .admin-apple-button,
    .admin-microsoft-button {
        min-height: 36px !important;
        font-size: 12px !important;
    }

    /* Portais mais compactos */
    .galileu-auth-footer,
    .admin-panel-footer {
        margin-top: 8px !important;
    }

    .galileu-auth-portal-links,
    .admin-portal-links {
        margin-top: 8px !important;
        padding-top: 8px !important;
        gap: 4px !important;
    }

    /* Hero sem espaço sobrando */
    .galileu-auth-hero {
        padding: 26px 46px !important;
    }

/* ------------------------------------------------------------------ bloco 4 */
    @media (max-width: 767px) {
        html,
        body {
            height: auto !important;
            min-height: 100% !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            background: #fff !important;
        }

        .galileu-auth-shell {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            min-height: 100vh !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            background: #fff !important;
        }

        .galileu-auth-hero {
            display: none !important;
        }

        .galileu-auth-card {
            width: 100% !important;
            height: auto !important;
            min-height: 100vh !important;
            max-height: none !important;
            margin: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            overflow: visible !important;
            display: flex !important;
            align-items: flex-start !important;
            justify-content: center !important;
        }

        .galileu-auth-card__body {
            width: 100% !important;
            max-width: 420px !important;
            padding: 28px 22px 24px !important;
            margin: 0 auto !important;
        }

        .galileu-auth-brand {
            justify-content: center !important;
            margin-bottom: 22px !important;
        }

        .galileu-auth-brand img {
            max-width: 220px !important;
            max-height: 64px !important;
        }

        .galileu-auth-form-group {
            margin-bottom: 12px !important;
        }

        .galileu-auth-input,
        .galileu-auth-card .form-control,
        .galileu-auth-card input.form-control {
            height: 44px !important;
            min-height: 44px !important;
            font-size: 14px !important;
        }

        .galileu-auth-button,
        .admin-button-access {
            min-height: 44px !important;
            font-size: 15px !important;
        }

        .admin-google-button-holder {
            justify-content: center !important;
        }

    }

/* ------------------------------------------------------------------ bloco 5 */
    @media screen and (max-width: 991px) {
        .galileu-auth-hero,
        .galileu-auth-hero *,
        .galileu-auth-hero:before,
        .galileu-auth-hero:after {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            min-height: 0 !important;
            max-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
        }

        .galileu-auth-shell {
            display: block !important;
            width: 100% !important;
            min-height: 100vh !important;
            height: auto !important;
            background: #fff !important;
            overflow: visible !important;
        }

        .galileu-auth-card {
            width: 100% !important;
            min-height: 100vh !important;
            height: auto !important;
            margin: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            display: flex !important;
            justify-content: center !important;
            align-items: flex-start !important;
            overflow: visible !important;
        }

        .galileu-auth-card__body {
            width: 100% !important;
            max-width: 420px !important;
            padding: 28px 22px 24px !important;
            margin: 0 auto !important;
        }
    }

/* ------------------------------------------------------------------ bloco 6 */
    /* =========================
   SOCIAL LOGIN FULL WIDTH
========================= */

    .galileu-auth-social-group,
    .admin-login-social-group {
        width: 100% !important;
    }

    .galileu-auth-social-group > div,
    .admin-login-social-group > div {
        width: 100% !important;
    }

    /* GOOGLE */
    .admin-google-button-holder {
        display: flex !important;
        width: 100% !important;
    }



    .g_id_signin {
        width: 100% !important;
    }

    /* APPLE + MICROSOFT */
    .admin-apple-button,
    .admin-microsoft-button {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .galileu-auth-card__body {
        max-width: 430px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .admin-google-button-holder {
        width: 100% !important;
        overflow: visible !important;
    }


    .galileu-auth-card__body {
        max-width: 430px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .admin-google-button-holder {
        width: 390px !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .admin-google-button-holder > div,
    .g_id_signin {
        width: 390px !important;
        max-width: 100% !important;
    }

    .admin-google-button-holder iframe {
        width: 400px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
        margin: 0 !important;
        position:relative!important;
        left:-10px!important;
    }

    .galileu-auth-portal-links,
    .admin-portal-links {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .galileu-auth-portal-card,
    .admin-portal-card {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        min-height: 44px;
        padding: 10px 14px;

        border: 1px solid #dbe4f0;
        border-radius: 8px;

        background: #fff;
        text-decoration: none !important;

        transition: all .2s ease;
    }

    .galileu-auth-portal-card:hover,
    .admin-portal-card:hover {
        border-color: #2F55D4;
        background: #f5f8ff;
    }

    .galileu-auth-portal-title,
    .admin-portal-title {
        white-space: nowrap;
        font-size: 13px;
        font-weight: 700;
    }


/* ------------------------------------------------------------------ bloco 7 */
    .galileu-auth-hero {
        position: relative;
        overflow: hidden;
    }

    .galileu-login-lottie {
        /*position: absolute;
        right: -140px;
        bottom: -80px;*/
        width: 100%;
        max-width: 780px;
        height: 520px;
        opacity: .28;
        z-index: 1;
        pointer-events: none;
    }

    .galileu-auth-hero__inner {
        position: relative;
        z-index: 2;
    }

    @media (max-width: 991px) {
        .galileu-login-lottie {
            display: none !important;
        }
    }

/* ------------------------------------------------------------------ bloco 8 */
    .galileu-auth-hero {
        position: relative !important;
        isolation: isolate;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 5px;
    }

    .galileu-auth-hero__inner {
        position: relative;
        z-index: 3 !important;

        width: 100%;
        max-width: 720px;

        text-align: left;
    }

    .galileu-login-lottie {
        position: relative !important;

        width: 100%;
        max-width: 760px;

        z-index: 1 !important;

        opacity: 1 !important;
        mix-blend-mode: screen;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .galileu-login-lottie svg {
        width: 100% !important;
        height: 100% !important;
    }

    .galileu-auth-hero:before,
    .galileu-auth-hero:after {
        z-index: 0 !important;
    }

    /* METADE E METADE - SO NO DESKTOP.

       Esta regra nasceu sem media query e, sendo a ultima do arquivo a falar de largura,
       vencia tambem no celular: o cartao do formulario ficava com 50vw (188px num aparelho
       de 375px) e campo, botao e logo encolhiam junto. No login do Galileu isso passava
       despercebido por acidente - o <form> tambem carrega .galileu-admin-form-layout-v2, e
       aquela regra, com duas classes, ganhava desta aqui. A cantina, que usa a mesma moldura
       com uma <div>, nao tinha o acidente e apareceu quebrada.

       Abaixo de 992px quem manda sao os blocos responsivos: hero escondido, cartao 100%. */
    @media (min-width: 992px) {
        .galileu-auth-hero,
        .galileu-auth-card {
            width: 50vw !important;
            height: 100vh !important;
            min-width: 0 !important;
        }
    }

    .galileu-auth-card {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
    }

    /* MOBILE */
    @media (max-width: 991px) {
        .galileu-auth-card {
            align-items: flex-start !important;
            justify-content: flex-start !important;
            min-height: auto !important;
            padding-top: 24px !important;
        }

        .galileu-auth-hero{
            display:none!important;
        }
    }

/* ------------------------------------------------------------------ bloco 9 */
    /* =========================================================
MODAL PREMIUM - ESCOLHER ESCOLA
========================================================= */

    .modal-right-side {
        padding-right: 0 !important;
        overflow: hidden !important;
    }

    .modal-right-side .modal-dialog {
        position: fixed;
        top: 0;
        right: 0;
        margin: 0 !important;

        width: 50vw;
        max-width: 50vw;
        height: 100vh;

        transform: translateX(100%) !important;
        transition: transform .35s cubic-bezier(.22,.61,.36,1) !important;
    }

    .modal-right-side.in .modal-dialog {
        transform: translateX(0) !important;
    }

    .modal-right-side .modal-content {
        height: 100vh;
        border: 0 !important;
        border-radius: 0 !important;

        background:
            radial-gradient(circle at top right, rgba(47,85,212,.03), transparent 24%),
            #f8fafc;

        display: flex;
        flex-direction: column;

        box-shadow:
            -10px 0 40px rgba(15,23,42,.08),
            -2px 0 8px rgba(15,23,42,.05);
    }

    /* =========================================================
       HEADER
    ========================================================= */

    .modal-right-side .modal-header {
        flex-shrink: 0;

        /* Enxuto de proposito: com o titulo grande + este padding, a etapa do codigo
           empurrava o campo de 6 digitos para fora da area visivel (o corpo rola, e o
           rodape fixo cobria o resto). Ver o bloco .modal-title logo abaixo. */
        padding: 18px 30px 14px;

        border: 0 !important;
        background: #fff;

        box-shadow: 0 1px 0 rgba(15,23,42,.06);
    }

    .modal-right-side .close {
        opacity: 1 !important;
        font-size: 30px;
        font-weight: 300;
        color: #64748b;
        text-shadow: none;
    }

    .modal-right-side .close:hover {
        color: #0f172a;
    }

    .modal-right-side .modal-title {
        margin: 0;

        color: #0f172a;
        /* 18px, e nao 20/22/26: medido nesta largura (painel de 50vw, ~380px uteis), o
           titulo 'Confirme o codigo enviado por e-mail' so cabe em UMA linha a partir de
           18px - em 20px ele ainda quebra em duas (50px de altura contra 23px). Cada linha
           extra do cabecalho sai do orcamento vertical do campo de 6 digitos, que era o
           que estava caindo fora da area visivel. */
        font-size: 18px;
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    /* =========================================================
       BODY
    ========================================================= */

    .modal-right-side .modal-body {
        flex: 1;
        overflow-y: auto;

        /* O 140px do rodape CONTINUA: e o que impede o rodape fixo de cobrir o ultimo
           elemento. Quem foi reduzido e o topo. */
        padding: 18px 34px 140px;
    }

    /* =========================================================
       SESSÃO USUÁRIO
    ========================================================= */

    .galileu-school-session {
        display: flex;
        align-items: center;
        gap: 12px;

        margin-bottom: 12px;

        padding: 10px 16px;

        border-radius: 14px;

        background: #eef4ff;
        border: 1px solid #dbe7ff;

        color: #42526b;
        font-size: 14px;
    }

    .galileu-school-session strong {
        color: #0f172a;
        font-weight: 800;
    }

    /* =========================================================
       TEXTO AUXILIAR
    ========================================================= */

    .modal-right-side .help-block {
        margin-bottom: 18px !important;

        color: #64748b;
        font-size: 14px;
        line-height: 1.5;
    }

    /* =========================================================
       LISTA DE ESCOLAS
    ========================================================= */

    #div-lista-escolas {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* CARD ESCOLA */

    .card-escola {
        position: relative;

        display: flex;
        align-items: center;
        gap: 16px;

        min-height: 86px;

        padding: 18px 20px;

        border-radius: 18px;

        background: #fff;

        border: 2px solid transparent;

        cursor: pointer;

        transition:
            border-color .18s ease,
            transform .18s ease,
            box-shadow .18s ease,
            background .18s ease;

        box-shadow:
            0 1px 2px rgba(15,23,42,.04),
            0 4px 14px rgba(15,23,42,.03);
    }

    .card-escola:hover {
        transform: translateY(-2px);

        border-color: rgba(47,85,212,.24);

        box-shadow:
            0 10px 28px rgba(47,85,212,.10),
            0 4px 10px rgba(15,23,42,.05);
    }

    .card-escola.active {
        border-color: #2F55D4;
        background: #eef4ff;

        box-shadow:
            0 12px 28px rgba(47,85,212,.16),
            inset 0 0 0 1px rgba(47,85,212,.06);
    }

    /* RADIO CUSTOM */

    .card-escola:before {
        content: "";

        width: 22px;
        height: 22px;

        border-radius: 999px;

        border: 2px solid #cbd5e1;

        flex-shrink: 0;

        transition: all .18s ease;
    }

    .card-escola.active:before {
        border-color: #2F55D4;
        box-shadow: inset 0 0 0 5px #2F55D4;
    }

    /* NOME ESCOLA */

    .card-escola-nome {
        color: #0f172a;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 800;
    }

    /* INPUT HIDDEN */

    .card-escola input {
        display: none !important;
    }

    /* =========================================================
       DUPLA AUTENTICAÇÃO
    ========================================================= */

    #div-duplaautenticacao {
        margin-top: 28px;

        padding: 24px;

        border-radius: 20px;

        background: #fff;

        border: 1px solid #e5e7eb;

        box-shadow:
            0 2px 10px rgba(15,23,42,.04);
    }

    /* =========================================================
       CÓDIGO
    ========================================================= */

    #tx_codigoautenticacao {
        width: 100% !important;

        height: 72px !important;

        border: 0 !important;
        background: transparent !important;

        color: #0f172a;

        font-size: 42px !important;
        font-weight: 800 !important;
        letter-spacing: 18px;

        text-align: center;

        outline: 0 !important;

        padding-left: 18px !important;
    }

    /* =========================================================
       MASTER
    ========================================================= */

    #div-duplaautenticacaomaster {
        margin-top: 28px;

        padding: 24px;

        border-radius: 20px;

        background: #fff;

        border: 1px solid #e5e7eb;
    }

    /* =========================================================
       FOOTER
    ========================================================= */

    .footer-escolha {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        padding: 22px 34px;

        background: rgba(255,255,255,.92);

        backdrop-filter: blur(18px);

        border-top: 1px solid rgba(15,23,42,.06);
    }

    .botao-acessar {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100%;

        height: 56px;

        border: 0 !important;
        border-radius: 14px !important;

        /* Cor da PELE, nao azul fixo: este botao serve tambem as modais (o "Continuar"
           da segunda etapa), e ali o gradiente cravado deixava um botao azul do Galileu
           dentro da tela roxa do easii, da vermelha da cantina e da azul-petroleo do
           controle de acesso. As tres peles ja definem --galileu-login-primary; o fallback
           mantem o azul de antes onde nao ha pele. */
        background: linear-gradient(135deg, var(--galileu-login-primary,#2F55D4) 0%, var(--galileu-login-primary-dark,#1D4ED8) 100%) !important;

        color: #fff !important;

        font-size: 16px !important;
        font-weight: 800 !important;
        letter-spacing: -.01em;

        box-shadow:
            0 10px 24px rgba(47,85,212,.24);

        transition:
            transform .18s ease,
            box-shadow .18s ease;
    }

    .botao-acessar:hover {
        transform: translateY(-1px);

        box-shadow:
            0 14px 30px rgba(47,85,212,.28);
    }

    /* =========================================================
       SCROLLBAR
    ========================================================= */

    .modal-right-side .modal-body::-webkit-scrollbar {
        width: 10px;
    }

    .modal-right-side .modal-body::-webkit-scrollbar-thumb {
        background: rgba(100,116,139,.25);
        border-radius: 999px;
    }

    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 991px) {

        .modal-right-side .modal-dialog {
            width: 100vw !important;
            max-width: 100vw !important;
        }

        .modal-right-side .modal-header {
            padding: 14px 20px 12px;
        }

        .modal-right-side .modal-title {
            font-size: 18px;
        }

        .modal-right-side .modal-body {
            padding: 14px 20px 120px;
        }

        .footer-escolha {
            padding: 18px 20px;
        }

        .card-escola {
            min-height: 78px;
            padding: 16px;
        }

        .card-escola-nome {
            font-size: 15px;
        }

        #tx_codigoautenticacao {
            font-size: 34px !important;
            letter-spacing: 14px;
        }
    }

/* ------------------------------------------------------------------ modal enxuta
   .galileu-auth-modal-slim - a caixa de acao curta do login (recuperar senha e
   afins), na mesma linguagem do formulario: mesma cor de marca (via variavel),
   mesma altura de campo e de botao. Nasceu no login do Galileu e serve tambem a
   cantina, que compartilha esta moldura.

   Ficava por #id dentro de _login-modais.phtml, o que a prendia aquela tela. */
    /* MODAL "ESQUECI MINHA SENHA"
       Segue a mesma linguagem do formulario de login (mesmas variaveis de cor, mesma
       altura de campo e de botao), entao ela ja nasce certa nos DOIS produtos: no easii
       --galileu-login-primary e roxo, no Galileu e azul. Nada de cor cravada aqui.
       Seletores por #id de proposito: o CSS do login continua vindo depois desta view
       e sobrescreveria regras de classe. */
    .galileu-auth-modal-slim .modal-dialog {
        width: 440px;
        max-width: calc(100% - 24px);
        margin-top: 8vh;
        /* O tema do admin deixa um translateY(-25%) do Bootstrap 3 valendo mesmo depois de a
           modal abrir (classe .in): a caixa sobe ~90px e o topo dela sai da tela - no celular
           o titulo ficava cortado. Aqui a posicao e so a margem. */
        transform: none !important;
    }

    .galileu-auth-modal-slim .modal-content {
        border: 0;
        border-radius: 14px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
        overflow: hidden;
    }

    .galileu-auth-modal-slim .modal-header {
        position: relative;
        padding: 28px 28px 4px;
        border-bottom: 0;
        /* o tema do admin poe uma sombra sob o cabecalho da modal; aqui ela desenhava um
           risco cinza no meio do card, que agora e continuo do titulo ao botao */
        box-shadow: none;
        text-align: left;
    }

    .galileu-auth-modal-slim .modal-header .close {
        position: absolute;
        top: 14px;
        right: 16px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #64748b;
        font-size: 26px;
        font-weight: 300;
        line-height: 1;
        opacity: .6;
        text-shadow: none;
        cursor: pointer;
    }

    .galileu-auth-modal-slim .modal-header .close:hover {
        opacity: 1;
    }

    .galileu-auth-modal-slim .galileu-recuperar__icone {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-bottom: 16px;
        border-radius: 12px;
        background: var(--galileu-login-primary, #2F55D4);
        color: #fff;
        font-size: 19px;
    }

    .galileu-auth-modal-slim .modal-title {
        margin: 0;
        color: var(--galileu-login-title, #1f2a3a);
        font-size: 21px;
        font-weight: 800;
        line-height: 1.25;
        text-align: left !important;
    }

    .galileu-auth-modal-slim .galileu-recuperar__sub {
        margin: 8px 0 0;
        color: var(--galileu-login-muted, #667085);
        font-size: 14px;
        line-height: 1.5;
    }

    .galileu-auth-modal-slim .modal-body {
        padding: 20px 28px 28px;
    }

    .galileu-auth-modal-slim .galileu-auth-form-group {
        margin-bottom: 18px;
    }

    .galileu-auth-modal-slim .galileu-auth-label {
        display: block;
        margin: 0 0 8px;
        color: var(--galileu-login-text, #304057);
        font-size: 14px !important;
        font-weight: 700;
    }

    .galileu-auth-modal-slim .form-control {
        height: 48px;
        min-height: 48px;
        border: 1px solid #cfd8e3;
        border-radius: 6px;
        font-size: 15px !important;
        box-shadow: none;
    }

    .galileu-auth-modal-slim .form-control:focus {
        border-color: var(--galileu-login-primary, #2F55D4);
        box-shadow: 0 0 0 3px rgba(47, 85, 212, .12);
    }

    .galileu-auth-modal-slim .input-group-addon {
        min-width: 52px;
        border: 1px solid #cfd8e3;
        border-left: 0;
        background: #fff;
        color: #94a3b8;
    }

    .galileu-auth-modal-slim .galileu-recuperar__enviar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        margin: 0;
        border: 0;
        border-radius: 8px !important;
        background: var(--galileu-login-primary, #2F55D4) !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        cursor: pointer;
    }

    .galileu-auth-modal-slim .galileu-recuperar__enviar:hover {
        background: var(--galileu-login-primary-dark, #2649B3) !important;
    }

    .galileu-auth-modal-slim .galileu-recuperar__voltar {
        display: block;
        width: 100%;
        margin-top: 12px;
        padding: 10px 0;
        border: 0;
        background: transparent;
        color: var(--galileu-login-muted, #667085);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .galileu-auth-modal-slim .galileu-recuperar__voltar:hover {
        color: var(--galileu-login-primary, #2F55D4);
        text-decoration: underline;
    }

    /* Celular: a modal ocupa a largura util e o alvo de toque cresce. */
    @media (max-width: 575px) {
        .galileu-auth-modal-slim .modal-dialog {
            width: auto;
            margin: 12px;
            margin-top: 24px;
        }

        .galileu-auth-modal-slim .modal-header {
            padding: 22px 20px 4px;
        }

        .galileu-auth-modal-slim .modal-body {
            padding: 16px 20px 22px;
        }

        .galileu-auth-modal-slim .form-control,
        .galileu-auth-modal-slim .galileu-recuperar__enviar {
            min-height: 50px;
        }
    }

/* ------------------------------------------------------------------ codigo de 6 digitos
   .galileu-otp - a etapa do segundo fator. Uma caixa por digito, que e como o resto do
   mundo faz hoje: le-se e digita-se sem contar caractere, e no celular o teclado numerico
   abre sozinho (inputmode). O campo que o JS envia continua existindo, oculto, com a juncao
   dos digitos - a tela mudou, o contrato com o servidor nao. */

.galileu-otp {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.galileu-otp-digito {
    width: 46px;
    height: 56px;
    padding: 0;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    background: #fff;
    color: var(--galileu-login-title, #1f2a3a);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    box-shadow: none;
}

.galileu-otp-digito:focus {
    border-color: var(--galileu-login-primary, #2F55D4);
    box-shadow: 0 0 0 3px rgba(47, 85, 212, .12);
    outline: 0;
}

/* Telas estreitas: seis caixas de 46px + gaps nao cabem em 320px de largura util. */
@media (max-width: 400px) {
    .galileu-otp {
        gap: 6px;
    }

    .galileu-otp-digito {
        width: 40px;
        height: 50px;
        font-size: 21px;
    }
}

/* ------------------------------------------------------------------ cards de escolha
   A lista de escolas ficou alta demais: cartao de ~62px de altura com nome em 16px para
   uma linha de texto. Com duas ou tres escolas a lista ja empurrava a etapa do codigo para
   fora da area visivel do painel, e no celular pior ainda.

   Vem por ULTIMO porque o CSS do login tem varias camadas para o mesmo cartao (o arquivo
   nasceu de nove blocos <style> na ordem em que estavam) - aqui a medida final fica num
   lugar so, em vez de caçar qual das camadas estava vencendo. */

.card-escola {
    padding: 11px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    gap: 11px;
}

.card-escola-nome {
    font-size: 14px;
    line-height: 1.3;
}

.card-escola:before {
    width: 18px;
    height: 18px;
}

.card-escola.active:before {
    box-shadow: inset 0 0 0 4px var(--galileu-login-primary, #2F55D4);
    border-color: var(--galileu-login-primary, #2F55D4);
}

/* ------------------------------------------------------------------ outros acessos
   A lista de portas do sistema no rodape do cartao. Sao ATALHOS, nao acoes principais:
   ficam menores que o botao de entrar e em duas colunas, para caber sem empurrar o
   formulario para fora da tela quando o produto tem quatro ou cinco vizinhos. */

.galileu-auth-portas__rotulo {
    margin-bottom: 10px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.galileu-auth-portas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.galileu-auth-portas .galileu-auth-portal-card {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
}

.galileu-auth-portas .galileu-auth-portal-card:hover {
    border-color: var(--galileu-login-primary, #2F55D4);
    background: #f8fafc;
    text-decoration: none !important;
}

.galileu-auth-portas .galileu-auth-portal-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Celular: uma coluna - dois cartoes lado a lado cortariam "Portal dos Pais e Alunos". */
@media (max-width: 480px) {
    .galileu-auth-portas {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   VITRINE DE MODULOS (rodape do login)

   O rodape tinha uma fileira de botoes com o nome de cada porta. Com cinco
   produtos aquilo virou uma parede de nomes que nao explicava nada - quem nao
   conhece o portfolio nao descobria o que e "Controle de Acesso" nem por que
   existe uma porta de Captacao. Agora e um botao so, que abre esta vitrine com
   a logo, uma frase e o link de cada produto.

   As cores saem das variaveis da PELE (--galileu-login-primary), entao a modal
   chega vestida do produto em que a pessoa esta - sem uma regra por marca.
   ========================================================= */

.galileu-auth-modulos-abrir {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.galileu-auth-modulos-abrir i {
    color: var(--galileu-login-primary, #2F55D4);
    font-size: 15px;
}

.galileu-auth-modulos-abrir small {
    margin-left: auto;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.galileu-auth-modulos-abrir:hover {
    border-color: var(--galileu-login-primary, #2F55D4);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.galileu-auth-modulos {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.galileu-auth-modulos[hidden] { display: none; }

body.galileu-auth-modulos-aberta { overflow: hidden; }

.galileu-auth-modulos__fundo {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}

.galileu-auth-modulos__caixa {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 22px 22px 26px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .28);
}

.galileu-auth-modulos__topo {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.galileu-auth-modulos__topo h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.galileu-auth-modulos__topo p {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: #64748b;
}

.galileu-auth-modulos__fechar {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 15px;
    cursor: pointer;
}

.galileu-auth-modulos__fechar:hover { background: #e2e8f0; }

.galileu-auth-modulos__lista {
    display: grid;
    gap: 10px;
}

.galileu-auth-modulos__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.galileu-auth-modulos__card:hover,
.galileu-auth-modulos__card:focus {
    border-color: var(--galileu-login-primary, #2F55D4);
    background: #f8fafc;
    transform: translateY(-1px);
    text-decoration: none;
}

.galileu-auth-modulos__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    flex: 0 0 84px;
}

.galileu-auth-modulos__marca img {
    width: 100%;
    height: auto;
    max-height: 34px;
    object-fit: contain;
}

.galileu-auth-modulos__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .06);
    color: #475569;
    font-size: 17px;
}

.galileu-auth-modulos__texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.galileu-auth-modulos__texto strong {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
}

.galileu-auth-modulos__texto span {
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
}

.galileu-auth-modulos__ir {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--galileu-login-primary, #2F55D4);
}

/* CELULAR: o "Entrar" sai da linha e o cartao vira duas linhas - com cinco produtos,
   apertar tudo numa linha so espremia o resumo ate ficar ilegivel. */
@media (max-width: 575px) {
    .galileu-auth-modulos__card {
        flex-wrap: wrap;
        gap: 10px;
    }

    .galileu-auth-modulos__marca { width: 68px; flex: 0 0 68px; }
    .galileu-auth-modulos__ir { margin-left: 0; width: 100%; }
}