@font-face {
    font-family: "Roboto Condensed";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/roboto-condensed.woff2") format("woff2-variations"),
         url("../fonts/roboto-condensed.woff2") format("woff2");
}
body {
    margin: 0;
    font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.4;
    color: #5b6b7f;
    background: #f6f7f9;
}
input {
    box-shadow: none;
    display: block;
    -webkit-appearance: none;
}
a {
    color: #232e3c;
    text-decoration: none;
    transition: color .2s ease;
}
a:focus, a:hover { text-decoration: none; }

/* ==========================================================================
   Mensagens de feedback — soft tint com barra lateral
   --------------------------------------------------------------------------
   HTML e FIXO (Source\Support\Message::render()): <div class='message error
   icon-warning'>texto</div>. Sem filhos possiveis, entao o icone sai em
   ::before (vira flex item; o texto solto forma um flex item anonimo) e a
   barra de acento em ::after absoluto, fora do fluxo flex.

   Icones Tabler como data URI: a tela de auth e standalone, nao carrega o
   sprite nem o vendor.css — <use href> nao funcionaria aqui.

   ATENCAO as classes: getType() devolve "error icon-warning", nunca "danger".
   O CSS antigo estilizava .danger, que o PHP jamais emitiu — erro de login
   (DT_ERROR, index.php:81) renderizava sem estilo. .danger fica so como alias.

   O warning e ambar amarelado de proposito: laranja colidiria com o #ed4700
   da marca e seria lido como elemento de marca, nao como alerta.
   ========================================================================== */
/* Fluxo de BLOCO, nao flex. As mensagens vem com rotulo em negrito embutido
   ("<b>Sucesso ao deslogar:</b> Sua sessao foi finalizada."), e num container
   flex cada ELEMENTO filho vira um flex item proprio — so nos de texto e que
   sao agrupados em item anonimo. O <b> virava uma coluna e o texto outra, cada
   uma quebrando em duas linhas. Com bloco + icone absoluto, todo o conteudo
   inline flui como um paragrafo unico com recuo pendente. */
.message {
    position: relative;
    display: block;
    margin: 0 0 20px;
    padding: 12px 14px 12px 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: break-word;
    animation: message-in 180ms ease-out both;
}
.message:empty { display: none; }
.message::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 13px;
    width: 18px;
    height: 18px;
    background: center / 18px 18px no-repeat;
}
.message::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
}
.message a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.message.warning { background: rgba(217, 119, 6, .10); border-color: rgba(217, 119, 6, .28); color: #92400e; }
.message.warning::after { background: #d97706; }
.message.warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392400e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

.message.success { background: rgba(22, 163, 74, .10); border-color: rgba(22, 163, 74, .28); color: #166534; }
.message.success::after { background: #16a34a; }
.message.success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E"); }

.message.info { background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .28); color: #1e40af; }
.message.info::after { background: #2563eb; }
.message.info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E"); }

.message.error,
.message.errorPlan,
.message.danger { background: rgba(220, 38, 38, .10); border-color: rgba(220, 38, 38, .28); color: #991b1b; }
.message.error::after,
.message.errorPlan::after,
.message.danger::after { background: #dc2626; }
.message.error::before,
.message.errorPlan::before,
.message.danger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23991b1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }

/* Shake so no erro: e o unico tipo em que nao perceber custa uma nova
   tentativa de login. Compensa a discricao do tint sem virar bloco solido. */
.message.error,
.message.errorPlan,
.message.danger {
    animation: message-in 180ms ease-out both, message-shake 420ms cubic-bezier(.36, .07, .19, .97) 120ms both;
}

@keyframes message-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@keyframes message-shake {
    0%, 100% { transform: translateX(0); }
    15%, 65% { transform: translateX(-4px); }
    35%, 85% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .message,
    .message.error,
    .message.errorPlan,
    .message.danger { animation: none; }
}

.btn {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: background-color .2s ease, color .2s ease;
}
.btn-primary {
    width: 100% !important;
    background-color: #ed4700;
    color: #fff;
}
/* CTA mais estreito p/ aliviar o peso do preenchimento laranja, sem mexer na
   altura — 40px e o piso confortavel de alvo de toque, e encolher deixaria o
   botao ainda mais baixo que os inputs (43px). max-width em vez de porcentagem:
   em tela estreita segue largura total, que e o certo p/ CTA no mobile.
   O `.btn-group .btn-primary` existe porque o @media 1240px (fim do arquivo)
   tambem casa em (0,2,0) e viria depois; ele foi escopado com :not(.btn-primary)
   para nao sobrescrever o margin auto daqui. */
.btn-primary,
.btn-group .btn-primary {
    display: block;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.btn-primary:hover { background-color: #d13f00; }
.btn-primary:disabled {
    transition: none;
    color: transparent !important;
    min-height: 1.6rem;
    pointer-events: none;
    position: relative;
    background-color: #c3cbd6;
}
/* box-sizing NAO e herdado por pseudo-elemento: sem o border-box abaixo, o
   ::after roda em content-box e a caixa real vira 1.2rem + 2x.2rem de borda =
   1.6rem, enquanto a margem negativa compensava so .6rem — o spinner saia .2rem
   deslocado p/ direita e p/ baixo. Com border-box, width ja inclui a borda e a
   metade exata (-.8rem) centraliza. Nao da p/ usar translate(-50%,-50%) aqui:
   a keyframe de rotacao sobrescreve o transform inteiro. */
.btn-primary:disabled::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6rem;
    height: 1.6rem;
    margin: -.8rem 0 0 -.8rem;
    border: .2rem solid #fff;
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: loading 650ms infinite linear;
}
@keyframes loading { to { transform: rotate(360deg); } }
/* Acao secundaria: e um link vestido de botao, entao herdava do .btn o mesmo
   600/14px do CTA primario e disputava atencao com ele. Peso normal e um degrau
   menor devolvem a hierarquia — "Entrar" fica o unico elemento pesado do bloco. */
.btn-flat {
    color: #6c7a91;
    background: transparent;
    font-weight: 400;
    font-size: 13px;
}
.btn-flat:hover { color: #232e3c; }

#login-wrap {
    min-height: 100vh;
    display: flex;
}
.login-card {
    flex: 33%;
    max-width: 500px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: #fff;
    box-shadow: 5px 0 35px 10px #00000020;
    position: relative;
    z-index: 100;
}
@media (min-width: 1000px) {
    .login-card { padding: 48px; }
}
.login-card-form {
    margin-top: 40px;
    width: 100%;
}
/* Titulo/subtitulo das telas de recuperacao. Sem regra, o h3 e o p caiam nas
   margens do navegador (h3 = 1em em cima e embaixo), mesmo problema que o
   .login-card-header tinha. */
/* Titulo discreto: o card ja empilha marca (32px) e slogan (15px) antes daqui.
   Um terceiro nivel em 20px/600 virava o segundo elemento mais pesado da tela
   e competia com o CTA. O peso 500 e quem faz o trabalho de recuar a hierarquia;
   18px mantem a legibilidade sem devolver o destaque de cabecalho. */
.login-card-form h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}
.login-card-form .sub-secundary-text {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
}

/* O cabecalho nao tinha regra nenhuma: o espaco entre titulo e slogan vinha das
   margens do proprio navegador (h1 .67em ~21px, h5 1.67em ~25px; colapsam em
   ~25px). Valor acidental. Aqui o lockup de marca fica explicito — logo, titulo
   e slogan como um bloco so. */
.login-card-header {
    width: 100%;
}
.login-card-header h1 {
    margin: 16px 0 0;
    line-height: 1.15;
}
.login-card-header h5 {
    margin: 6px 0 0;
    font-weight: 400;
    line-height: 1.3;
}

.text-main { color: #232e3c; font-size: 32px; }
.text-muted { color: #6c7a91; font-size: 15px; letter-spacing: .5px; }
.text-secundary { color: #232e3c; }
.sub-secundary-text { color: #5b6b7f; }

.input-group {
    position: relative;
    margin-bottom: 18px;
    text-align: left;
}
.input-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 40px 10px 12px;
    border: 1px solid #d8dce1;
    border-radius: 6px;
    background: #fff;
    color: #232e3c;
    /* Controle de formulario NAO herda font-family do body — o UA impoe a fonte
       de sistema. Sem esta linha os campos saiam em Arial/system-ui enquanto o
       resto da tela usava Roboto Condensed. O .btn ja resolve isso na linha 48. */
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-group input:focus {
    border-color: #ed4700;
    box-shadow: 0 0 0 .1rem rgba(237, 71, 0, .18);
    outline: none;
}
.input-group input:only-child { padding-right: 12px; }
.m-i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9aa6b5;
    pointer-events: none;
}
input:focus + .m-i:not(.show-hide-pass) { color: #ed4700; }

/* O toggle e um <button> — precisa dos resets, senao herda fundo/borda do UA.
   Cor neutra em repouso (igual .m-i) e destaque so no hover/foco, como o
   .intg-pass-toggle do painel interno. */
.show-hide-pass {
    pointer-events: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9aa6b5;
    transition: color .15s ease;
}
.show-hide-pass:hover,
.show-hide-pass:focus-visible { color: #ed4700; }
.show-hide-pass:focus-visible {
    outline: 2px solid rgba(237, 71, 0, .45);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Alvo de 28px (o slot .m-i tem 20px, abaixo do minimo confortavel de toque).
   right recuado de 12 p/ 8 mantem o centro optico do icone no mesmo lugar:
   12+10 = 8+14 = 22px da borda. Cabe nos 40px de padding-right do input. */
.show-hide-pass {
    width: 28px;
    height: 28px;
    right: 8px;
}
.show-hide-pass svg { width: 20px; height: 20px; }

/* Sem isso o Edge desenha o proprio olho ao lado do nosso — e o nativo some
   depois do blur e nao volta, que era a queixa original. */
.input-group input[type="password"]::-ms-reveal,
.input-group input[type="password"]::-ms-clear { display: none; }

/* Regra herdada que tentava por os botoes lado a lado. Nunca produziu isso: o
   .btn-primary carrega width:100%!important e o .btn-flat e um <a> inline, onde
   width nao se aplica. Fica escopada fora do .btn-primary para nao anular o
   margin auto que centraliza o CTA. */
@media (min-width: 1240px) {
    .btn-group .btn:not(.btn-primary) { width: 48%; margin-right: 2%; }
    .btn-group .btn:last-child { margin-right: 0; }
}

.login-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
}
.login-card-footer p { margin: 0; font-size: 12px; }

@media (max-width: 930px) {
    .login-image { display: none; }
    .login-card { flex: 100%; max-width: 100%; }
    .login-card-form { max-width: 500px; }
}