/* ==========================================================================
   Tela de entrada do CLIENTE — folha exclusiva.

   Por que este arquivo existe em vez de editar `login.css`: aquele é
   compartilhado com `public/admin/login.php`, que está na baseline congelada
   do painel. Mexer nele mudaria o login administrativo junto. Aqui tudo vive
   sob `.pl-auth`, então nenhuma regra alcança outra página — inclusive as
   sobreposições de `.btn-primary`, que ficam presas ao escopo.

   A ideia da composição: o cartão é uma TELA, e a página é a sala. Uma
   hairline atravessa o topo e o brilho dela se concentra no eixo do cartão,
   como um facho de projeção; a borda superior do cartão capta essa luz. É o
   único gesto decorativo — o resto é preto, grafite e espaçamento.
   ========================================================================== */

.pl-auth {
    /* ── O vermelho da Play TV ────────────────────────────────────────────
       Extraído da própria arte local da marca: o tom dominante do logo é
       #f00000, com #e40000 e #d80000 na mesma família. `--brand-red` é uma
       variável DESTA tela — `accent_color()` continua valendo para o resto do
       site e não foi tocado. É o único ponto de cor aqui. */
    --brand-red:      #e00d0d;
    --brand-red-alto: #ff2a2a;

    /* Paleta de superfície. */
    --pl-void:   #06070a;
    --pl-panel:  #0f1117;
    --pl-field:  #14171f;
    --pl-line:   rgba(255,255,255,.08);
    --pl-line-2: rgba(255,255,255,.14);
    --pl-ink:    #eef1f6;
    --pl-muted:  rgba(238,241,246,.52);
    --pl-danger: #ff9a9a;
    --pl-warn:   #ffd98a;

    --pl-radius: 16px;
    --pl-gap:    18px;

    /* Tipos: sem fonte externa. A personalidade vem do RASTREIO — rótulos em
       caixa alta bem espaçada contra uma linha de display compacta. */
    --pl-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    position: relative;
    /* `border-box` é obrigatório aqui: com o padrão `content-box`, o
       `min-height: 100dvh` soma o padding por fora, a seção fica mais alta que
       a tela e o cartão DESCE em vez de subir — foi o que aconteceu na
       primeira tentativa de elevar o formulário. */
    box-sizing: border-box;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    /* O cartão sobe ~6% da altura útil: centro ÓTICO, não o matemático. Feito
       por padding assimétrico, e não por margem negativa, para não quebrar em
       telas baixas — o `justify-content: center` continua mandando. */
    padding: 40px 20px calc(40px + 12vh + env(safe-area-inset-bottom, 0px));
    background: var(--pl-void);
    color: var(--pl-ink);
    font-family: var(--pl-sans);
    overflow-x: clip;
}

/* ── O fundo: mosaico de capas ────────────────────────────────────────────
   Três camadas, nesta ordem, todas fixas e fora do fluxo:

     1. `.pl-mosaico`  — a parede de pôsteres. Arte LOCAL, gerada uma vez por
        `tools/mosaico-login.py` a partir das capas que já estavam no cache do
        próprio servidor. Nada é buscado em API, CDN ou fornecedor quando
        alguém abre o login: é um `.webp` servido por este domínio.
     2. `::before`     — máscara preta translúcida. Escurece o suficiente para
        o texto ler, e de menos para as capas sumirem — elas têm de continuar
        perceptíveis.
     3. `::after`      — vinheta, só para fechar as bordas.

   O conteúdo vem depois, em `z-index: 1`. */
.pl-mosaico {
    position: fixed;
    inset: 0;
    background-image: url("/assets/login/mosaico-desktop-v7.webp");
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
.pl-auth::before {
    content: "";
    position: fixed; inset: 0;
    background:
        /* Camada CHAPADA por cima de tudo: escurece todas as capas na mesma
           medida, sem tratar nenhuma de forma diferente. */
        linear-gradient(rgba(3,4,7,.22), rgba(3,4,7,.22)),
        linear-gradient(180deg, rgba(4,5,8,.84) 0%, rgba(4,5,8,.74) 42%, rgba(4,5,8,.90) 100%);
    pointer-events: none;
    z-index: 0;
}
.pl-auth::after {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(120% 85% at 50% 45%, transparent 30%, rgba(0,0,0,.72) 100%),
        radial-gradient(60% 45% at 50% 52%,
            color-mix(in srgb, var(--brand-red) 10%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Só o CARTÃO precisa subir de camada. Marca, mosaico e faixas do
   enquadramento têm posicionamento próprio, e uma declaração `position:
   relative` genérica os devolvia ao fluxo: a marca ia parar centrada acima do
   cartão, e as duas faixas passavam a OCUPAR ALTURA, empurrando o formulário
   para baixo. Os dois defeitos vieram da mesma regra generosa demais. */
.pl-auth > .pl-card { position: relative; z-index: 1; }
/* Fora da faixa do enquadramento, as barras não existem visualmente e também
   não podem ocupar altura. */
.pl-frame { position: fixed; left: 0; right: 0; height: 0; pointer-events: none; z-index: 0; }

/* ── Marca, no canto superior esquerdo ──────────────────────────────────── */
.pl-brand {
    position: absolute;
    z-index: 2;
    top: clamp(18px, 3.4vh, 34px);
    left: clamp(18px, 3.2vw, 46px);
    display: flex;
    align-items: center;
    user-select: none;
    cursor: default;
}
/* Um véu escuro só sob o canto da marca. O logo é uma arte escura e, sobre um
   pôster claro, ele desaparecia. Isto dá o fundo que falta sem escurecer o
   mosaico inteiro. */
.pl-brand::before {
    content: "";
    position: absolute;
    left: -34px; top: 50%;
    width: 470px; height: 315px;
    transform: translateY(-50%);
    background: radial-gradient(60% 60% at 34% 50%,
        rgba(0,0,0,.86) 0%, rgba(0,0,0,.45) 45%, transparent 75%);
    pointer-events: none;
    z-index: -1;
}
.pl-brand__logo {
    height: clamp(66px, 10.4vh, 123px);
    width: auto;
    max-width: 400px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    /* A arte é escura; sobre o mosaico ela precisa de peso próprio. A sombra
       separa do fundo sem tingir nem lavar o desenho. */
    filter: brightness(1.2) saturate(1.05)
            drop-shadow(0 3px 18px rgba(0,0,0,.95))
            drop-shadow(0 0 34px rgba(0,0,0,.7));
}

/* ── Cartão ─────────────────────────────────────────────────────────────── */
/* Painel translúcido: as capas continuam se insinuando atrás dele, mas o
   texto tem fundo suficiente para ler. O desfoque é o que segura o contraste
   sem precisar de mais preto. */
.pl-card {
    width: 100%;
    max-width: 420px;
    background: rgba(9, 10, 14, .82);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--pl-radius);
    padding: 30px 28px 24px;
    box-shadow:
        0 1px 0 0 color-mix(in srgb, var(--brand-red) 30%, transparent) inset,
        0 40px 90px -30px rgba(0,0,0,.95);
}
/* Onde não há suporte a desfoque, compensa com opacidade. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pl-card { background: rgba(9, 10, 14, .94); }
}

.pl-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-red) 72%, #ffffff);
    margin-bottom: 10px;
}
.pl-title {
    margin: 0 0 6px;
    font-size: 25px;
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--pl-ink);
}
.pl-sub {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pl-muted);
}

/* ── Campos ─────────────────────────────────────────────────────────────── */
.pl-form { display: flex; flex-direction: column; gap: var(--pl-gap); }

.pl-field { display: block; }
.pl-field__label {
    display: block;
    margin-bottom: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
.pl-auth input[type="text"],
.pl-auth input[type="password"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    background: var(--pl-field);
    border: 1px solid var(--pl-line);
    border-radius: 11px;
    color: var(--pl-ink);
    font-family: inherit;
    font-size: 15px;              /* 16px-ish evita o zoom do iOS ao focar */
    line-height: 1.2;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.pl-auth input::placeholder { color: rgba(238,241,246,.28); }
.pl-auth input[type="text"]:hover,
.pl-auth input[type="password"]:hover { border-color: var(--pl-line-2); }
.pl-auth input[type="text"]:focus,
.pl-auth input[type="password"]:focus {
    outline: none;
    background: #171b24;
    border-color: color-mix(in srgb, var(--brand-red) 62%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-red) 22%, transparent);
}
/* Autofill do Chrome: sem isto o campo volta a branco e o texto some. */
.pl-auth input:-webkit-autofill,
.pl-auth input:-webkit-autofill:hover,
.pl-auth input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pl-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--pl-field) inset;
    box-shadow: 0 0 0 1000px var(--pl-field) inset;
    caret-color: var(--pl-ink);
    transition: background-color 9999s ease-in-out 0s;
}

/* ── Lembrar ────────────────────────────────────────────────────────────── */
.pl-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: -2px;
}
.pl-auth .pl-remember input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--brand-red);
    cursor: pointer;
    flex-shrink: 0;
}
.pl-remember label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pl-muted);
    cursor: pointer;
}

/* ── Botão ──────────────────────────────────────────────────────────────
   Sobrepõe `.btn-primary` SÓ aqui dentro: o global mistura o azul da marca
   com um vermelho fixo, e o resultado é um degradê que não pertence a
   nenhuma das duas cores. Aqui o destaque é sólido e inequívoco. */
.pl-auth .btn-primary,
.pl-submit {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--brand-red);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--brand-red) 90%, transparent);
    transition: filter .16s ease, transform .16s ease;
}
.pl-auth .btn-primary:hover:not(:disabled) { filter: brightness(1.09); }
.pl-auth .btn-primary:active:not(:disabled) { transform: translateY(1px); }
.pl-auth .btn-primary:disabled { opacity: .62; cursor: default; }

/* Foco visível e consistente em tudo que recebe teclado. */
.pl-auth a:focus-visible,
.pl-auth button:focus-visible,
.pl-auth input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-red) 85%, #ffffff);
    outline-offset: 2px;
}

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.pl-alert {
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 1.45;
    border: 1px solid;
}
.pl-alert--erro {
    background: rgba(255,86,86,.08);
    border-color: rgba(255,86,86,.26);
    color: var(--pl-danger);
}
.pl-alert--aviso {
    background: rgba(255,193,7,.08);
    border-color: rgba(255,193,7,.26);
    color: var(--pl-warn);
}

/* ── Rodapé do cartão ───────────────────────────────────────────────────── */
/* O rodapé só existe quando há algum link para mostrar. Sem ele, o cartão
   termina no botão — sem divisor e sem espaço reservado. */
.pl-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--pl-line);
}
.pl-links a {
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-muted);
    text-decoration: none;
    transition: color .16s ease;
}
.pl-links a:hover { color: var(--pl-ink); }

/* ── Enquadramento cinematográfico, só onde há altura para ele ──────────── */
@media (min-width: 1024px) and (min-height: 720px) {
    .pl-frame {
        position: fixed;
        left: 0; right: 0;
        height: 9vh;
        pointer-events: none;
        z-index: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.9), transparent);
    }
    .pl-frame--baixo {
        bottom: 0;
        background: linear-gradient(0deg, rgba(0,0,0,.9), transparent);
    }
    .pl-frame--topo { top: 0; }
    .pl-card { padding: 34px 32px 26px; }
    .pl-title { font-size: 27px; }
}

/* ── Telas estreitas ─────────────────────────────────────────────────────
   Recorte próprio, em pé, em vez de espremer o deitado. E um pouco mais de
   preto atrás do cartão, porque a coluna é estreita e o texto encosta nas
   capas. */
@media (max-width: 640px) {
    .pl-mosaico { background-image: url("/assets/login/mosaico-celular-v7.webp"); }
    .pl-auth::before {
        background: linear-gradient(rgba(3,4,7,.24), rgba(3,4,7,.24)),
                    linear-gradient(180deg, rgba(4,5,8,.84) 0%, rgba(4,5,8,.78) 40%, rgba(4,5,8,.92) 100%);
    }
    .pl-auth {
        gap: 20px;
        padding: clamp(78px, 15vh, 110px) 16px calc(26px + env(safe-area-inset-bottom, 0px));
        justify-content: center;
    }
    .pl-frame { display: none; }
    .pl-card { padding: 24px 20px 18px; border-radius: 14px; background: rgba(9,10,14,.88); }
    .pl-title { font-size: 22px; }
    .pl-sub { margin-bottom: 18px; }
}

/* Aparelho muito baixo (teclado aberto): encolhe o supérfluo, nunca o botão. */
@media (max-height: 620px) {
    .pl-auth { justify-content: flex-start; padding-top: 72px; }
    .pl-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-auth *,
    .pl-auth *::before,
    .pl-auth *::after {
        animation: none !important;
        transition: none !important;
    }
}