/* Identidade visual Lotriva (v2) — inspirado no mock aprovado (docs/.PlanTasks/.../mocks/v2/login-tmselite.html),
   adaptado para reaproveitar ao maximo os recursos do projeto em vez de reproduzir o codigo do mock ao pe da
   letra. Sem @font-face nem link externo: "Inter" nao esta hospedada no projeto e cai, sem custo de rede, para o
   fallback ("Segoe UI"/Arial/sans-serif — fontes de sistema). Icones de botao (olho, seta) usam Font Awesome
   5.11.2 Pro ja self-hosted do projeto (~/css/base) em vez do SVG inline do mock; o diagrama de rede do painel de
   marca continua SVG inline por ser ilustracao propria, sem equivalente nos recursos do projeto. */

:root {
    color-scheme: light;
    --purple: #8b31d6;
    --ink: #100b20;
    --muted: #80749d;
    --pink: #eda2cb;
}

* { box-sizing: border-box; }

body.login-lotriva {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #fbfaff;
}

.login-lotriva button, .login-lotriva input { font: inherit; }
.login-lotriva button, .login-lotriva a, .login-lotriva input { -webkit-tap-highlight-color: transparent; }
.login-lotriva button, .login-lotriva a { touch-action: manipulation; }
.login-lotriva button:focus-visible, .login-lotriva a:focus-visible { outline: 3px solid #c178f0; outline-offset: 5px; }

.screen {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 56.5% 43.5%;
}

/* Painel de marca (esquerda) */
.brand {
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 4.5vw, 78px);
    color: #fff;
    background: radial-gradient(ellipse at 48% 67%, #2b124644, transparent 55%), linear-gradient(135deg, #140c25, #0c0818 75%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eyebrow { font-size: 13px; letter-spacing: .34em; color: #c4b4e7; margin: 0 0 30px; }
.brand h1 { font-size: clamp(48px, 5.05vw, 84px); line-height: 1.03; font-weight: 500; letter-spacing: -.045em; margin: 0 0 20px; }
.brand h1 span { color: var(--pink); }
.intro { font-size: clamp(17px, 1.45vw, 24px); line-height: 1.5; color: #c6bbdf; margin: 0; max-width: 520px; }

.network { width: calc(100% + 60px); margin: -8px -30px 8px; display: block; overflow: visible; flex-shrink: 0; }
.network .orbit { fill: none; stroke: #7835a4; stroke-width: 1; opacity: .6; }
.network .route { fill: none; stroke: url(#login-lotriva-line); stroke-width: 1.5; }
.network .dotted {
    stroke-dasharray: 2 8;
    stroke: #c789e8;
    fill: none;
    opacity: .65;
    animation: login-dotted-flow 3s linear infinite;
}
.network .node {
    fill: url(#login-lotriva-node);
    stroke: #a24ee2;
    stroke-width: 1.5;
    filter: url(#login-lotriva-glow);
    transform-origin: 0 0;
    animation: login-node-breathe 3.6s ease-in-out infinite;
}
.network .node--1 { animation-delay: 0s; }
.network .node--2 { animation-delay: .5s; }
.network .node--3 { animation-delay: 1s; }
.network .node--4 { animation-delay: 1.5s; }
.network .node--5 { animation-delay: 2s; }
.network .icon { fill: none; stroke: #ddcafa; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.network text { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.network .label { font-size: 11px; letter-spacing: 2px; fill: #d5c3f2; text-anchor: middle; }
.network .spark { fill: #e98bc6; filter: url(#login-lotriva-glow); }
.network .spark circle { animation: login-spark-twinkle 2.2s ease-in-out infinite; }
.network .spark circle:nth-child(2) { animation-delay: .3s; }
.network .spark circle:nth-child(3) { animation-delay: .6s; }
.network .spark circle:nth-child(4) { animation-delay: .9s; }
.network .spark circle:nth-child(5) { animation-delay: 1.2s; }
.network .spark circle:nth-child(6) { animation-delay: 1.5s; }
.network .spark circle:nth-child(7) { animation-delay: 1.8s; }
.network .plaque { animation: login-plaque-pulse 4s ease-in-out infinite; }

@keyframes login-dotted-flow {
    to { stroke-dashoffset: -20; }
}
@keyframes login-node-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
@keyframes login-spark-twinkle {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}
@keyframes login-plaque-pulse {
    0%, 100% { stroke-width: 1.5; }
    50% { stroke-width: 2.4; }
}

.values { font-size: 13px; letter-spacing: .2em; color: #c8b8e6; margin: 8px 0 0; }

/* Painel de formulario (direita) */
/* Textura tecnologica no fundo claro: grade de pontos + eco (bem sutil) dos circuitos/nos do
   painel de marca, para quebrar o vazio sem reduzir o contraste do formulario. Camadas de cima
   para baixo: circuito canto superior-direito, circuito canto inferior-esquerdo, grade de pontos,
   gradiente base. */
.access {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(38px, 5.7vw, 100px) clamp(32px, 5.5vw, 96px) 30px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='260' cy='0' r='90' fill='none' stroke='rgba(139,49,214,0.10)' stroke-width='1'/%3E%3Ccircle cx='260' cy='0' r='150' fill='none' stroke='rgba(139,49,214,0.06)' stroke-width='1'/%3E%3Cpath d='M150 40 Q190 90 150 140 T90 200' fill='none' stroke='rgba(139,49,214,0.14)' stroke-width='1.2'/%3E%3Cpath d='M210 15 Q225 70 175 95' fill='none' stroke='rgba(199,137,232,0.22)' stroke-width='1' stroke-dasharray='2 7'/%3E%3Ccircle cx='150' cy='140' r='3.5' fill='rgba(139,49,214,0.22)'/%3E%3Ccircle cx='175' cy='95' r='2.5' fill='rgba(199,137,232,0.3)'/%3E%3Ccircle cx='90' cy='200' r='3' fill='rgba(139,49,214,0.16)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Ccircle cx='0' cy='220' r='80' fill='none' stroke='rgba(139,49,214,0.09)' stroke-width='1'/%3E%3Cpath d='M40 130 Q80 160 60 200' fill='none' stroke='rgba(139,49,214,0.13)' stroke-width='1.2'/%3E%3Cpath d='M20 90 Q55 120 45 165' fill='none' stroke='rgba(199,137,232,0.2)' stroke-width='1' stroke-dasharray='2 7'/%3E%3Ccircle cx='60' cy='200' r='3' fill='rgba(139,49,214,0.2)'/%3E%3Ccircle cx='45' cy='165' r='2.5' fill='rgba(199,137,232,0.28)'/%3E%3C/svg%3E"),
        radial-gradient(circle, rgba(139, 49, 214, 0.12) 1.4px, transparent 1.6px),
        radial-gradient(ellipse at 70% 20%, #fff, #fbfaff 75%);
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-position: top right, bottom left, 0 0, 0 0;
    background-size: 260px 260px, 220px 220px, 30px 30px, auto;
}

.login-box-lotriva { width: 100%; max-width: 490px; margin: auto; }
.logo-lotriva { width: min(100%, 450px); height: auto; display: block; margin-bottom: 22px; }

/* CTA para o site institucional: precisa ter presenca/atrativo mas sem competir com o titulo do
   produto/formulario logo abaixo, por isso e um pill pequeno, nao um botao cheio. */
.brand-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 26px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid #d9c6f0;
    background: #faf5ff;
    color: var(--purple);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.brand-cta:hover { background: #f1e4fb; border-color: #c9a6ec; }
.brand-cta:active { transform: translateY(1px); }
.brand-cta i { font-size: 11px; transition: transform .15s; }
.brand-cta:hover i { transform: translateX(3px); }

.product { font-size: clamp(42px, 4.1vw, 66px); letter-spacing: -.055em; font-weight: 650; line-height: 1; margin: 0; }
.product span { color: var(--purple); }
.description { font-size: 20px; color: var(--muted); margin: 6px 0 44px; }

.access h2 { font-size: 30px; letter-spacing: -.035em; margin: 0 0 8px; font-weight: 650; }
.welcome { font-size: 17px; color: #75668e; margin: 0 0 30px; }

.field {
    margin-bottom: 24px;
    position: relative;
}
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.input-wrap { position: relative; }
.access input {
    width: 100%;
    height: 54px;
    border: 1px solid #d4cae5;
    border-radius: 10px;
    background: #ffffff90;
    color: var(--ink);
    padding: 0 18px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.access input::placeholder { color: #9b90ae; }
.access input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #8b31d616; }
.access input[type=password] { padding-right: 54px; }

.reveal {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: #89769e;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.reveal i { font-size: 18px; }

.recovery { text-align: right; margin: -10px 0 30px; }
.access a:not(.submit) { color: var(--purple); text-underline-offset: 3px; }
.recovery a { font-size: 14px; font-weight: 600; }

.submit {
    height: 56px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(105deg, #8b31d6, #8a20e3);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    transition: filter .15s, transform .15s;
}
.submit:hover { filter: brightness(1.08); }
.submit:active { transform: translateY(1px); }
.submit i { font-size: 16px; }

/* Estado de carregamento (login em progresso, ver login.js): anel pulsando pra reforcar o disabled
   visualmente, alem do icone fa-spinner girando ja inserido no proprio texto do botao. */
.submit:disabled, .submit.disabled {
    cursor: not-allowed;
    filter: brightness(.96);
    animation: login-pulse 1.6s ease-in-out infinite;
}
.submit:disabled:hover, .submit.disabled:hover { filter: brightness(.96); }

@keyframes login-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 49, 214, .35); }
    50% { box-shadow: 0 0 0 9px rgba(139, 49, 214, 0); }
}

.support { text-align: center; color: #75668e; font-size: 14px; margin: 30px 0 0; }
.support a { text-decoration: none; font-weight: 600; }

.footer-lotriva { display: flex; justify-content: flex-end; align-items: center; gap: 20px; color: #9a8cb1; font-size: 12px; margin-top: 52px; }
.footer-lotriva a { color: inherit; text-decoration: none; padding-left: 20px; border-left: 1px solid #d9cee8; }

@media (min-width: 761px) { .network { max-height: 42svh; } }
@media (min-width: 1600px) { .brand { padding-top: 65px; padding-bottom: 60px; } }
@media (max-width: 1100px) {
    .brand { padding: 40px 32px; }
    .access { padding: 44px 32px 26px; }
    .eyebrow { font-size: 11px; }
    .logo-lotriva { margin-bottom: 18px; }
    .brand-cta { margin-bottom: 20px; }
    .description { margin-bottom: 32px; }
    .network { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }
    .values { font-size: 10px; }
    .intro { font-size: 17px; }
}
@media (max-width: 760px) {
    .screen { display: flex; flex-direction: column; }
    .access {
        order: 0;
        min-height: 100svh;
        padding: 36px 26px 22px;
        background-image: radial-gradient(circle, rgba(139, 49, 214, 0.1) 1.3px, transparent 1.5px), radial-gradient(ellipse at 70% 20%, #fff, #fbfaff 75%);
        background-repeat: repeat, no-repeat;
        background-position: 0 0, 0 0;
        background-size: 24px 24px, auto;
    }
    .brand { order: 1; padding: 48px 32px; }
    .login-box-lotriva { max-width: 420px; }
    .logo-lotriva { width: 260px; margin-bottom: 14px; }
    .brand-cta { margin-bottom: 20px; padding: 8px 16px; font-size: 12px; }
    .product { font-size: 48px; }
    .description { font-size: 18px; margin-bottom: 32px; }
    .footer-lotriva { justify-content: center; margin-top: 38px; }
    .network { max-width: 650px; align-self: center; }
    .brand h1 { font-size: 54px; }
    .values { font-size: 11px; }
    .welcome { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-lotriva * { transition: none !important; }
    .submit.disabled, .submit:disabled { animation: none; }
    .network .dotted, .network .node, .network .spark circle, .network .plaque { animation: none; }
}