/* ============================================================
   CSS DA TELA: index  (ponto unico: assets/css/telas/)
   Tela com layout PROPRIO — carregado por <link> no lugar onde o
   <style> estava (a ordem do CSS fica identica).
   Regra: a tela NAO tem CSS proprio; a paleta vem do TEMA
   (assets/temas/<tema>/tema.css) via var(--cor-*).
   Gerado por ferramentas/centralizar_css_sem_layout.php em 24/09/2026 00:35
   ============================================================ */

        /* ============================================================
           RESET & BASE
        ============================================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background-color: rgb(var(--cor-fundo-0-rgb));
            color: rgb(var(--cor-txt-3-rgb));
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;

            /* ========================================================
               FUNDO DA TELA DE ENTRADA — quem decide é o TEMA
               (tokens --login-* em assets/temas/<tema>/tema.css).
               Camadas, do topo para a base:
                 1) brilho da marca          -> --login-halo
                 2) véu sobre a foto         -> --login-veu-1 / --login-veu-2
                 3) foto de fundo            -> --login-foto  ('none' = sem foto)
               Tema `pavimentopro` (pavimentação, escuro): foto de campo +
               véu escuro + brilho dourado = visual de sempre.
               Tema `safplan`/`zephyr` (claros): superfície clara, sem foto.
               Os valores entre parênteses são o fallback para um tema que
               ainda não declare os tokens (mantém o visual anterior).
               ⚠️ O caminho da foto é relativo a ESTE arquivo
               (assets/css/telas/ → ../../img/x = assets/img/x).
            ======================================================== */
            background-image:
                radial-gradient(ellipse at 50% 0%, var(--login-halo, rgb(var(--cor-primaria-rgb) / 0.05)) 0%, transparent 65%),
                linear-gradient(var(--login-veu-1, rgba(6, 6, 6, 0.82)), var(--login-veu-2, rgba(6, 6, 6, 0.93))),
                var(--login-foto, url('../../img/fundo_login.jpeg'));
            background-size: cover, cover, cover;
            background-position: center, center, center;
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-attachment: fixed, fixed, fixed;
        }

        /* ============================================================
           TAB SWITCHER (acima do card flip)
        ============================================================ */
        .tab-switcher {
            display: flex;
            gap: 4px;
            background: rgb(var(--cor-fundo-4-rgb));
            border: 1px solid rgb(var(--cor-borda-rgb));
            border-radius: 14px;
            padding: 4px;
            margin-bottom: 16px;
            width: 100%;
            max-width: 420px;
        }

        .tab-btn {
            flex: 1;
            padding: 9px 0;
            border: none;
            background: transparent;
            color: rgb(var(--cor-txt-2-rgb));
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            border-radius: 10px;
            cursor: pointer;
            transition: color 0.25s, background 0.25s;
            outline: none;
        }
        .tab-btn:focus-visible {
            outline: 2px solid var(--cor-primaria);
            outline-offset: 2px;
        }
        .tab-btn.active {
            background: rgb(var(--cor-primaria-rgb) / 0.10);
            color: var(--cor-primaria);
            border-bottom: 2px solid var(--cor-primaria);
        }
        .tab-btn:not(.active):hover { color: rgb(var(--cor-txt-3-rgb)); }

        /* ============================================================
           FLIP CARD — ESTRUTURA 3D
        ============================================================ */
        .flip-scene {
            perspective: 1200px;
            width: 100%;
            max-width: 420px;
        }

        .flip-inner {
            position: relative;
            width: 100%;
            min-height: 420px;
            transform-style: preserve-3d;
            transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
            will-change: transform;
        }

        .flip-inner.flipped {
            transform: rotateY(180deg);
        }

        .flip-face {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            /* SUPERFÍCIE = papel de CARTÃO no tema (escuro #1a1a1a = o de sempre;
               claro #FFFFFF = cartão branco sobre o fundo claro). */
            background: rgb(var(--cor-superficie-rgb));
            border: 1px solid rgb(var(--cor-borda-rgb));
            border-radius: 20px;
            padding: 36px 32px 28px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .flip-face::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cor-primaria), transparent);
            border-radius: 20px 20px 0 0;
        }

        .flip-face-back {
            transform: rotateY(180deg);
        }

        /* Acessibilidade: ignora elementos focáveis na face oculta */
        .flip-inner:not(.flipped) .flip-face-back a,
        .flip-inner:not(.flipped) .flip-face-back button,
        .flip-inner:not(.flipped) .flip-face-back input {
            visibility: hidden;
            pointer-events: none;
        }
        .flip-inner.flipped .flip-face-front a,
        .flip-inner.flipped .flip-face-front button,
        .flip-inner.flipped .flip-face-front input {
            visibility: hidden;
            pointer-events: none;
        }
        .flip-inner:not(.flipped) .flip-face-front a,
        .flip-inner:not(.flipped) .flip-face-front button,
        .flip-inner:not(.flipped) .flip-face-front input {
            visibility: visible;
            pointer-events: auto;
        }
        .flip-inner.flipped .flip-face-back a,
        .flip-inner.flipped .flip-face-back button,
        .flip-inner.flipped .flip-face-back input {
            visibility: visible;
            pointer-events: auto;
        }

        /* ============================================================
           LOGO / CABEÇALHO
        ============================================================ */
        .logo-block { text-align: center; margin-bottom: 32px; }
        .logo-title {
            font-size: 28px;
            font-weight: 900;
            font-style: italic;
            letter-spacing: -0.03em;
            color: rgb(var(--cor-txt-3-rgb));
        }
        .logo-title span { color: var(--cor-primaria); }
        .logo-sub {
            font-size: 9px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: rgb(var(--cor-txt-1-rgb));
            margin-top: 6px;
        }

        /* ============================================================
           FORMULÁRIO (FRENTE E VERSO)
        ============================================================ */
        .field-group { position: relative; margin-bottom: 20px; }

        .input-floating {
            width: 100%;
            background: rgb(var(--cor-fundo-0-rgb));
            color: rgb(var(--cor-txt-3-rgb));
            border: 1px solid rgb(var(--cor-borda-1-rgb));
            border-radius: 10px;
            padding: 22px 16px 8px;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            outline: none;
            transition: border-color 0.25s, box-shadow 0.25s;
        }
        .input-floating:focus {
            border-color: var(--cor-primaria);
            box-shadow: 0 0 0 3px rgb(var(--cor-primaria-rgb) / 0.12);
        }
        .input-floating::placeholder { color: transparent; }

        .field-label {
            position: absolute;
            left: 16px;
            top: 15px;
            font-size: 13px;
            font-weight: 600;
            color: rgb(var(--cor-txt-2-rgb));
            pointer-events: none;
            transition: all 0.2s ease;
        }
        .input-floating:focus + .field-label,
        .input-floating:not(:placeholder-shown) + .field-label {
            top: 6px;
            font-size: 9px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--cor-primaria);
        }

        .btn-submit {
            width: 100%;
            background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura, var(--cor-primaria)) 100%);
            color: rgb(var(--cor-sobre-primaria-rgb));
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            border: none;
            border-radius: 10px;
            padding: 16px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            margin-top: 8px;
        }
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgb(var(--cor-primaria-rgb) / 0.3);
        }
        .btn-submit:active { transform: translateY(0); }
        .btn-submit:disabled {
            background: rgb(var(--cor-fundo-4-rgb));
            color: rgb(var(--cor-txt-2-rgb));
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .auth-error {
            background: rgb(var(--cor-perigo-rgb) / 0.10);
            border: 1px solid rgb(var(--cor-perigo-rgb) / 0.35);
            color: rgb(var(--cor-perigo-rgb));
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 12px;
            text-align: center;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        /* ============================================================
           OFFLINE PANEL (Frente)
        ============================================================ */
        .offline-panel { display: flex; flex-direction: column; gap: 12px; }
        .offline-badge {
            background: rgb(var(--cor-primaria-rgb) / 0.08);
            border: 1px solid rgb(var(--cor-primaria-rgb) / 0.2);
            border-radius: 10px;
            padding: 12px 16px;
            text-align: center;
        }
        .offline-badge-title { font-size: 10px; font-weight: 900; color: var(--cor-primaria); text-transform: uppercase; letter-spacing: 0.15em; }
        .offline-badge-sync  { font-size: 9px; color: rgb(var(--cor-txt-2-rgb)); margin-top: 4px; font-weight: 700; }

        .offline-links { display: flex; flex-direction: column; gap: 8px; }
        .offline-link {
            display: block;
            width: 100%;
            padding: 14px;
            text-align: center;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s;
        }
        .offline-link-primary {
            background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura, var(--cor-primaria)));
            color: rgb(var(--cor-sobre-primaria-rgb));
        }
        .offline-link-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(var(--cor-primaria-rgb) / 0.25); }
        .offline-link-ghost {
            background: transparent;
            border: 1px solid rgb(var(--cor-primaria-rgb) / 0.25);
            color: var(--cor-primaria);
        }
        .offline-link-ghost:hover { background: rgb(var(--cor-primaria-rgb) / 0.05); border-color: var(--cor-primaria); }

        .btn-toggle-online {
            background: none; border: none; cursor: pointer;
            font-size: 9px; font-weight: 900; color: rgb(var(--cor-txt-1-rgb));
            text-transform: uppercase; letter-spacing: 0.12em;
            transition: color 0.2s;
            font-family: 'Inter', sans-serif;
            padding: 12px 0 0;
        }
        .btn-toggle-online:hover { color: var(--cor-primaria); }

        .offline-nocache-warn {
            background: rgb(var(--cor-alerta-rgb) / 0.08);
            border: 1px solid rgb(var(--cor-alerta-rgb) / 0.25);
            color: rgb(var(--cor-alerta-rgb));
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 11px;
            text-align: center;
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .page-footer {
            font-size: 9px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: rgb(var(--cor-txt-2-rgb));
            text-align: center;
            margin-top: 14px;
        }

        .u-hidden { display: none !important; }

        /* ============================================================
           RESPONSIVIDADE POR DISPOSITIVO
           Smartphone (≤640px) · Tablet (641–1024px) · Desktop (≥1025px)
        ============================================================ */

        /* ── SMARTFONE (≤640px) ── */
        @media (max-width: 640px) {
            body { padding: 12px; }

            .tab-switcher { border-radius: 12px; margin-bottom: 12px; }
            .tab-btn { padding: 11px 0; font-size: 12px; letter-spacing: 0.1em; }

            .flip-scene { max-width: 100%; }
            .flip-inner { min-height: 0; } /* altura controlada por JS (ajustarAlturaFlip) */
            .flip-face {
                padding: 28px 20px 24px;
                border-radius: 16px;
            }
            .flip-face::before { border-radius: 16px 16px 0 0; }

            .logo-block { margin-bottom: 24px; }
            .logo-title { font-size: 26px; }
            .logo-sub { font-size: 10px; margin-top: 8px; letter-spacing: 0.18em; }

            .field-group { margin-bottom: 18px; }
            .input-floating {
                padding: 24px 16px 10px;
                font-size: 16px; /* ≥16px evita zoom automático do iOS */
                border-radius: 12px;
            }
            .field-label { left: 16px; top: 17px; font-size: 14px; }
            .input-floating:focus + .field-label,
            .input-floating:not(:placeholder-shown) + .field-label { top: 7px; font-size: 10px; }

            .btn-submit { font-size: 13px; padding: 18px; border-radius: 12px; }

            .auth-error { font-size: 13px; padding: 12px 14px; }

            .offline-badge { padding: 14px 16px; }
            .offline-badge-title { font-size: 12px; }
            .offline-badge-sync { font-size: 11px; }
            .offline-link { padding: 16px; font-size: 12px; }
            .btn-toggle-online { font-size: 11px; padding: 14px 0 0; }
            .offline-nocache-warn { font-size: 13px; padding: 12px 14px; }

            .page-footer { font-size: 11px; margin-top: 16px; }
        }

        /* ── TABLET (641–1024px) ── */
        @media (min-width: 641px) and (max-width: 1024px) {
            body { padding: 1.5rem; }

            .tab-btn { font-size: 11px; }

            .flip-scene { max-width: 460px; }
            .flip-inner { min-height: 460px; }
            .flip-face { padding: 42px 38px 32px; border-radius: 22px; }

            .logo-title { font-size: 30px; }
            .logo-sub { font-size: 10px; }

            .input-floating { font-size: 15px; padding: 24px 18px 10px; }
            .field-label { font-size: 14px; top: 17px; left: 18px; }
            .input-floating:focus + .field-label,
            .input-floating:not(:placeholder-shown) + .field-label { top: 7px; font-size: 10px; }

            .btn-submit { font-size: 12px; padding: 18px; }

            .auth-error { font-size: 13px; }
            .offline-link { font-size: 11px; }
            .page-footer { font-size: 10px; }
        }

        /* Previne zoom ao tocar duas vezes em telas sensíveis */
        @media (max-width: 1024px) {
            input, button, a { touch-action: manipulation; }
        }