/* ======================================================================
           MedOrbis · Login
           Cores da marca em variáveis — ajuste os hex aqui se tiver o guia oficial.
           Cores REAIS da marca (extraídas do logo.svg):
             marinho #16264a · dourado #c9a24a · verde do portal #0e5148
           ====================================================================== */
        :root {
            --mo-marinho:      #16264a;  /* azul-marinho da marca (ORBIS, símbolo, botão) */
            --mo-marinho-hover:#1e3566;  /* hover do botão                        */
            --mo-dourado:      #c9a24a;  /* dourado da marca (MED, círculo) = destaque */
            --mo-dourado-claro:#e0bd6a;  /* dourado mais claro p/ realce em fundo escuro */
            --mo-verde-escuro: #0b3d3a;  /* fundo do gradiente (topo)             */
            --mo-verde-fundo:  #0e5148;  /* fundo do gradiente (base, = portal)   */
            --mo-verde:        #126a5c;  /* verde intermediário do gradiente      */
            --mo-tinta:        #16264a;  /* texto forte (= marinho)               */
            --mo-cinza:        #6b7a90;  /* texto secundário                      */
            --mo-borda:        #d7deea;
            --mo-erro-bg:      #fdecec;
            --mo-erro-tx:      #b3261e;
            --mo-erro-bd:      #f5c2c0;
        }

        * { box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            margin: 0;
            font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: var(--mo-tinta);
            /* gradiente diagonal da marca */
            background: linear-gradient(135deg, var(--mo-verde-escuro) 0%, var(--mo-verde-fundo) 55%, var(--mo-verde) 140%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        /* textura sutil de "órbita" no fundo (círculos concêntricos translúcidos) */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background:
                radial-gradient(circle at 18% 30%, rgba(255,255,255,.06) 0 1px, transparent 1px) 0 0/ 46px 46px,
                radial-gradient(600px 600px at 85% 20%, rgba(201,162,74,.14), transparent 60%),
                radial-gradient(700px 700px at 15% 90%, rgba(201,162,74,.12), transparent 60%);
            pointer-events: none;
        }

        .login-wrap {
            position: relative;
            width: 100%;
            max-width: 420px;
        }

        /* marca acima do card */
        .brand {
            text-align: center;
            margin-bottom: 22px;
        }
        .brand img {
            height: 44px;
            width: auto;
            display: block;
        }
        /* badge branco que emoldura o logo colorido — destaca sobre o fundo verde */
        .brand .logo-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            padding: 14px 22px;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(0,0,0,.18);
        }
        .brand .tagline {
            margin: 14px auto 0;
            max-width: 340px;
            color: rgba(255,255,255,.85);
            font-size: 14px;
            line-height: 1.5;
        }
        .brand .tagline strong { color: var(--mo-dourado-claro); font-weight: 600; }
        /* selo "eyebrow" — a linha de posicionamento do site, em dourado */
        .brand .eyebrow {
            display: inline-block;
            margin: 18px 0 0;
            padding: 5px 14px;
            border: 1px solid rgba(201,162,74,.45);
            border-radius: 999px;
            color: var(--mo-dourado-claro);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        /* card do formulário */
        .card {
            background: #fff;
            border-radius: 16px;
            padding: 32px 28px 28px;
            box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.12);
        }
        .card h1 {
            margin: 0 0 4px;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -.2px;
        }
        .card .sub {
            margin: 0 0 22px;
            color: var(--mo-cinza);
            font-size: 14px;
        }

        .field { margin-bottom: 16px; }
        .lembrar { display:flex; gap:9px; align-items:flex-start; margin:0 0 18px;
                   cursor:pointer; font-size:.88rem; line-height:1.45; }
        .lembrar input { margin-top:3px; width:16px; height:16px; flex:none; cursor:pointer; }
        .lembrar small { display:block; opacity:.7; font-size:.78rem; margin-top:2px; }
        .field label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--mo-tinta);
            margin-bottom: 6px;
        }
        .field input {
            width: 100%;
            padding: 12px 14px;
            font-size: 15px;
            border: 1px solid var(--mo-borda);
            border-radius: 10px;
            outline: none;
            transition: border-color .15s, box-shadow .15s;
            background: #fbfcfe;
        }
        .field input:focus {
            border-color: var(--mo-marinho);
            box-shadow: 0 0 0 3px rgba(22,38,74,.13);
            background: #fff;
        }

        .btn {
            width: 100%;
            margin-top: 6px;
            padding: 13px 16px;
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            background: var(--mo-marinho);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: filter .15s, transform .02s;
        }
        .btn:hover  { background: var(--mo-marinho-hover); }
        .btn:active { transform: translateY(1px); }

        .alert {
            background: var(--mo-erro-bg);
            color: var(--mo-erro-tx);
            border: 1px solid var(--mo-erro-bd);
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 14px;
            margin-bottom: 18px;
        }

        .foot {
            text-align: center;
            margin-top: 20px;
            color: rgba(255,255,255,.7);
            font-size: 12px;
        }

        @media (max-width: 480px) {
            .card { padding: 26px 20px 22px; border-radius: 14px; }
        }

/* [30/09 · Zioti] /educacional — a porta do MedOrbis Educacional (mesmo login, cara do produto) */
body.edu .edu-iris { display:block; margin:14px auto 0; width:92px; height:92px; border-radius:50%; overflow:hidden;
    border:3px solid var(--mo-dourado); box-shadow:0 8px 24px rgba(0,0,0,.25); }
body.edu .edu-iris img { width:100%; height:100%; object-fit:cover; display:block; }
body.edu .edu-ajuda { margin-top:14px; text-align:center; font-size:.86rem; line-height:1.4; }
body.edu .edu-ajuda a { color:var(--mo-cinza); text-decoration:none; }
body.edu .edu-ajuda a b { color:#128c4a; }
body.edu .edu-ajuda a:hover b { text-decoration:underline; }