<?php
declare(strict_types=1);

session_start();
require_once __DIR__ . '/conexao.php';
require_once __DIR__ . '/telecom_helpers.php';

function destinoAposLogin(string $usuario): string
{
    return telecomNormalizar($usuario) === 'cynthia'
        ? 'dashboard_cynthia.php'
        : 'listar_os.php';
}

/*
|--------------------------------------------------------------------------
| Redireciona usuários já autenticados
|--------------------------------------------------------------------------
*/
if (!empty($_SESSION['user_id']) && !empty($_SESSION['usuario'])) {
    header(
        'Location: ' .
        destinoAposLogin((string) $_SESSION['usuario'])
    );
    exit;
}

$erro = '';
$usuarioDigitado = '';

/*
|--------------------------------------------------------------------------
| Processamento do login
|--------------------------------------------------------------------------
*/
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $usuario = trim((string) ($_POST['usuario'] ?? ''));
    $senha   = (string) ($_POST['senha'] ?? '');

    $usuarioDigitado = $usuario;

    if ($usuario === '' || $senha === '') {
        $erro = 'Preencha o usuário e a senha para continuar.';
    } else {
        $stmt = $mysqli->prepare(
            'SELECT id, usuario, senha
             FROM usuarios
             WHERE usuario = ?
             LIMIT 1'
        );

        if (!$stmt) {
            $erro = 'Não foi possível validar o acesso no momento.';
        } else {
            $stmt->bind_param('s', $usuario);
            $stmt->execute();

            $resultado = $stmt->get_result();
            $usuarioEncontrado = $resultado->fetch_assoc();

            if (
                $usuarioEncontrado &&
                password_verify($senha, (string) $usuarioEncontrado['senha'])
            ) {
                session_regenerate_id(true);

                $_SESSION['user_id'] = (int) $usuarioEncontrado['id'];
                $_SESSION['usuario'] = (string) $usuarioEncontrado['usuario'];
                $_SESSION['login_em'] = date('Y-m-d H:i:s');

                header(
                    'Location: ' .
                    destinoAposLogin(
                        (string) $usuarioEncontrado['usuario']
                    )
                );
                exit;
            }

            /*
             * Mensagem genérica para não revelar se o usuário existe.
             */
            $erro = 'Usuário ou senha incorretos. Verifique os dados informados.';

            $stmt->close();
        }
    }
}

function e(mixed $valor): string
{
    return htmlspecialchars((string) $valor, ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, viewport-fit=cover"
    >

    <meta
        name="description"
        content="Sistema institucional de manutenção e suporte da Gerência de Tecnologia da Prefeitura de Extrema."
    >

    <meta name="theme-color" content="#0b3b78">

    <title>Manutenção TI | Prefeitura de Extrema</title>

    <!-- Fonte -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet"
    >

    <!-- Bootstrap Icons -->
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    >

    <style>
        :root {
            --primary: #0b3b78;
            --primary-dark: #062852;
            --primary-light: #1764ad;

            --secondary: #009b72;
            --secondary-dark: #007456;

            --accent: #f2b705;

            --background: #eef4f9;
            --surface: #ffffff;
            --surface-soft: #f7fafc;

            --text: #122033;
            --text-soft: #607086;
            --text-light: #8492a6;

            --border: #dce5ee;
            --danger: #c72c41;
            --danger-soft: #fff1f3;

            --shadow-sm: 0 10px 30px rgba(11, 59, 120, 0.08);
            --shadow-md: 0 25px 65px rgba(11, 59, 120, 0.15);
            --shadow-lg: 0 40px 100px rgba(6, 40, 82, 0.22);

            --radius-sm: 14px;
            --radius-md: 22px;
            --radius-lg: 34px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            min-height: 100dvh;
            overflow-x: hidden;

            font-family:
                "Inter",
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            color: var(--text);

            background:
                radial-gradient(
                    circle at 12% 14%,
                    rgba(23, 100, 173, 0.16),
                    transparent 27rem
                ),
                radial-gradient(
                    circle at 88% 85%,
                    rgba(0, 155, 114, 0.12),
                    transparent 28rem
                ),
                linear-gradient(
                    145deg,
                    #f7fafc 0%,
                    #edf4f9 48%,
                    #e9f1f7 100%
                );
        }

        button,
        input {
            font: inherit;
        }

        button {
            -webkit-tap-highlight-color: transparent;
        }

        /*
        |--------------------------------------------------------------------------
        | Plano de fundo institucional
        |--------------------------------------------------------------------------
        */

        .background-grid {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;

            background-image:
                linear-gradient(
                    rgba(11, 59, 120, 0.035) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(11, 59, 120, 0.035) 1px,
                    transparent 1px
                );

            background-size: 54px 54px;

            mask-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.9),
                transparent 90%
            );
        }

        .government-bar {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 50;

            height: 6px;

            background: linear-gradient(
                90deg,
                var(--primary) 0 58%,
                var(--secondary) 58% 88%,
                var(--accent) 88% 100%
            );

            box-shadow: 0 4px 18px rgba(6, 40, 82, 0.2);
        }

        .floating-shape {
            position: fixed;
            z-index: 0;
            pointer-events: none;

            border-radius: 50%;
            filter: blur(1px);

            animation: floatingShape 9s ease-in-out infinite;
        }

        .floating-shape-one {
            top: -170px;
            left: -130px;

            width: 440px;
            height: 440px;

            border: 1px solid rgba(23, 100, 173, 0.12);

            background:
                radial-gradient(
                    circle at 65% 68%,
                    rgba(23, 100, 173, 0.14),
                    transparent 57%
                );
        }

        .floating-shape-two {
            right: -180px;
            bottom: -180px;

            width: 520px;
            height: 520px;

            border: 1px solid rgba(0, 155, 114, 0.12);

            background:
                radial-gradient(
                    circle at 35% 30%,
                    rgba(0, 155, 114, 0.13),
                    transparent 58%
                );

            animation-delay: 1.5s;
        }

        .floating-shape-three {
            top: 22%;
            right: 9%;

            width: 120px;
            height: 120px;

            border: 22px solid rgba(242, 183, 5, 0.08);

            animation-delay: 3s;
        }

        @keyframes floatingShape {
            0%,
            100% {
                transform: translate3d(0, 0, 0) rotate(0deg);
            }

            50% {
                transform: translate3d(0, -22px, 0) rotate(8deg);
            }
        }

        /*
        |--------------------------------------------------------------------------
        | Estrutura principal
        |--------------------------------------------------------------------------
        */

        .page {
            position: relative;
            z-index: 2;

            min-height: 100vh;
            min-height: 100dvh;

            display: flex;
            align-items: center;
            justify-content: center;

            padding:
                max(34px, env(safe-area-inset-top))
                22px
                max(28px, env(safe-area-inset-bottom));
        }

        .login-container {
            width: 100%;
            max-width: 1180px;

            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);

            overflow: hidden;

            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: var(--radius-lg);

            background: rgba(255, 255, 255, 0.68);

            backdrop-filter: blur(26px);
            -webkit-backdrop-filter: blur(26px);

            box-shadow:
                var(--shadow-lg),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);

            transform-style: preserve-3d;
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }

        /*
        |--------------------------------------------------------------------------
        | Área institucional
        |--------------------------------------------------------------------------
        */

        .institutional-panel {
            position: relative;
            isolation: isolate;
            overflow: hidden;

            min-height: 680px;
            padding: 56px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            color: #ffffff;

            background:
                radial-gradient(
                    circle at 80% 18%,
                    rgba(255, 255, 255, 0.15),
                    transparent 23rem
                ),
                radial-gradient(
                    circle at 16% 92%,
                    rgba(0, 155, 114, 0.34),
                    transparent 22rem
                ),
                linear-gradient(
                    145deg,
                    var(--primary-dark) 0%,
                    var(--primary) 52%,
                    #07527c 100%
                );
        }

        .institutional-panel::before {
            content: "";
            position: absolute;
            z-index: -1;

            top: 58px;
            right: -145px;

            width: 430px;
            height: 430px;

            border: 42px solid rgba(255, 255, 255, 0.045);
            border-radius: 50%;

            box-shadow:
                0 0 0 44px rgba(255, 255, 255, 0.025),
                0 0 0 88px rgba(255, 255, 255, 0.018);

            animation: rotateSeal 28s linear infinite;
        }

        .institutional-panel::after {
            content: "";
            position: absolute;
            z-index: -1;

            right: -10%;
            bottom: -190px;
            left: -10%;

            height: 340px;

            border-radius: 50% 50% 0 0;

            background:
                linear-gradient(
                    90deg,
                    transparent 49.8%,
                    rgba(255, 255, 255, 0.12) 50%,
                    transparent 50.2%
                ),
                repeating-linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.028) 0 70px,
                    rgba(255, 255, 255, 0.05) 70px 140px
                );

            transform: perspective(600px) rotateX(54deg);
            transform-origin: bottom;
        }

        @keyframes rotateSeal {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .institutional-top {
            position: relative;
            z-index: 2;
        }

        .department-badge {
            width: fit-content;

            display: inline-flex;
            align-items: center;
            gap: 10px;

            padding: 10px 15px;

            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;

            background: rgba(255, 255, 255, 0.1);

            box-shadow:
                0 16px 35px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);

            backdrop-filter: blur(12px);

            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .department-badge-icon {
            width: 29px;
            height: 29px;

            display: grid;
            place-items: center;

            border-radius: 10px;

            color: var(--primary-dark);
            background: var(--accent);

            box-shadow: 0 8px 20px rgba(242, 183, 5, 0.25);
        }

        .institutional-title {
            max-width: 650px;

            margin: 34px 0 0;

            font-size: clamp(39px, 5.1vw, 67px);
            line-height: 0.98;
            letter-spacing: -3.3px;
            font-weight: 900;
        }

        .institutional-title span {
            display: block;
            margin-top: 8px;

            color: #9ef2d7;

            text-shadow: 0 14px 38px rgba(0, 155, 114, 0.25);
        }

        .institutional-description {
            max-width: 630px;

            margin: 24px 0 0;

            color: rgba(255, 255, 255, 0.78);

            font-size: 16px;
            line-height: 1.75;
            font-weight: 500;
        }

        /*
        |--------------------------------------------------------------------------
        | Recursos
        |--------------------------------------------------------------------------
        */

        .feature-list {
            position: relative;
            z-index: 2;

            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 13px;

            margin-top: 38px;
        }

        .feature-card {
            min-height: 139px;
            padding: 18px;

            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 22px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.13),
                    rgba(255, 255, 255, 0.07)
                );

            box-shadow:
                0 18px 38px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);

            backdrop-filter: blur(12px);

            transform: translateZ(20px);

            transition:
                transform 0.25s ease,
                background 0.25s ease,
                border-color 0.25s ease;
        }

        .feature-card:hover {
            transform: translateY(-7px) translateZ(26px);
            border-color: rgba(255, 255, 255, 0.27);
            background: rgba(255, 255, 255, 0.15);
        }

        .feature-icon {
            width: 43px;
            height: 43px;

            display: grid;
            place-items: center;

            border-radius: 14px;

            color: var(--primary-dark);

            background:
                linear-gradient(
                    145deg,
                    #ffffff,
                    #dcecff
                );

            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.16);

            font-size: 20px;
        }

        .feature-card strong {
            display: block;
            margin-top: 15px;

            font-size: 13px;
            font-weight: 850;
            letter-spacing: 0.2px;
        }

        .feature-card small {
            display: block;
            margin-top: 6px;

            color: rgba(255, 255, 255, 0.65);

            font-size: 11px;
            line-height: 1.5;
            font-weight: 500;
        }

        .institutional-footer {
            position: relative;
            z-index: 2;

            display: flex;
            align-items: center;
            gap: 13px;

            margin-top: 34px;
            padding-top: 24px;

            border-top: 1px solid rgba(255, 255, 255, 0.13);

            color: rgba(255, 255, 255, 0.62);

            font-size: 12px;
            line-height: 1.5;
        }

        .institutional-footer-icon {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;

            display: grid;
            place-items: center;

            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 13px;

            background: rgba(255, 255, 255, 0.08);

            color: #9ef2d7;
            font-size: 17px;
        }

        /*
        |--------------------------------------------------------------------------
        | Área de login
        |--------------------------------------------------------------------------
        */

        .login-panel {
            position: relative;

            min-height: 680px;
            padding: 48px;

            display: flex;
            flex-direction: column;
            justify-content: center;

            background:
                radial-gradient(
                    circle at 100% 0,
                    rgba(23, 100, 173, 0.09),
                    transparent 20rem
                ),
                linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.98),
                    rgba(248, 251, 253, 0.97)
                );
        }

        .login-panel::before {
            content: "";
            position: absolute;

            top: 0;
            right: 0;
            left: 0;

            height: 5px;

            background: linear-gradient(
                90deg,
                var(--primary),
                var(--secondary),
                var(--accent)
            );
        }

        .mobile-government {
            display: none;
        }

        .login-header {
            text-align: center;
        }

        .logo-stage {
            position: relative;

            width: 118px;
            height: 118px;

            margin: 0 auto 21px;

            transform-style: preserve-3d;
            transform:
                perspective(800px)
                rotateX(3deg)
                rotateY(-5deg);

            animation: logoFloat 6s ease-in-out infinite;
        }

        .logo-shadow {
            position: absolute;

            right: 13px;
            bottom: -8px;
            left: 13px;

            height: 22px;

            border-radius: 50%;

            background: rgba(6, 40, 82, 0.18);
            filter: blur(11px);

            transform: translateZ(-20px);
        }

        .logo-border {
            position: relative;
            z-index: 2;

            width: 100%;
            height: 100%;

            padding: 5px;

            border-radius: 32px;

            background:
                linear-gradient(
                    145deg,
                    var(--primary),
                    var(--primary-light) 55%,
                    var(--secondary)
                );

            box-shadow:
                0 24px 45px rgba(11, 59, 120, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }

        .logo-box {
            width: 100%;
            height: 100%;

            display: grid;
            place-items: center;

            overflow: hidden;

            border: 1px solid rgba(11, 59, 120, 0.08);
            border-radius: 27px;

            background: #ffffff;
        }

        .logo-box img {
            display: block;

            max-width: 88px;
            max-height: 88px;

            object-fit: contain;
        }

        .logo-fallback {
            display: none;

            width: 78px;
            height: 78px;

            place-items: center;

            border-radius: 22px;

            color: var(--primary);

            background: #edf4fa;

            font-size: 34px;
        }

        @keyframes logoFloat {
            0%,
            100% {
                transform:
                    perspective(800px)
                    translateY(0)
                    rotateX(3deg)
                    rotateY(-5deg);
            }

            50% {
                transform:
                    perspective(800px)
                    translateY(-7px)
                    rotateX(0deg)
                    rotateY(3deg);
            }
        }

        .restricted-badge {
            width: fit-content;

            display: inline-flex;
            align-items: center;
            gap: 8px;

            margin-bottom: 15px;
            padding: 8px 12px;

            border: 1px solid #dce8f2;
            border-radius: 999px;

            color: var(--primary);

            background: #eff6fc;

            font-size: 10px;
            font-weight: 850;
            letter-spacing: 0.75px;
            text-transform: uppercase;
        }

        .restricted-badge i {
            color: var(--secondary);
        }

        .login-title {
            margin: 0;

            color: var(--text);

            font-size: 29px;
            line-height: 1.15;
            letter-spacing: -0.9px;
            font-weight: 900;
        }

        .login-subtitle {
            max-width: 390px;

            margin: 11px auto 27px;

            color: var(--text-soft);

            font-size: 13px;
            line-height: 1.65;
            font-weight: 500;
        }

        /*
        |--------------------------------------------------------------------------
        | Mensagem de erro
        |--------------------------------------------------------------------------
        */

        .alert-error {
            display: flex;
            align-items: flex-start;
            gap: 12px;

            margin-bottom: 20px;
            padding: 14px 15px;

            border: 1px solid #f4cbd2;
            border-radius: 17px;

            color: #932237;
            background: var(--danger-soft);

            box-shadow: 0 12px 26px rgba(199, 44, 65, 0.08);

            font-size: 12px;
            line-height: 1.5;
            font-weight: 650;

            animation: alertEnter 0.35s ease both;
        }

        .alert-error i {
            margin-top: 1px;
            color: var(--danger);
            font-size: 18px;
        }

        @keyframes alertEnter {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /*
        |--------------------------------------------------------------------------
        | Formulário
        |--------------------------------------------------------------------------
        */

        .form-group {
            margin-bottom: 17px;
        }

        .form-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;

            margin-bottom: 8px;

            color: #34465c;

            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.2px;
        }

        .field {
            position: relative;

            display: flex;
            align-items: center;

            overflow: hidden;

            border: 1px solid var(--border);
            border-radius: 18px;

            background: var(--surface-soft);

            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease,
                transform 0.2s ease;
        }

        .field:hover {
            border-color: #c5d4e1;
            background: #ffffff;
        }

        .field:focus-within {
            border-color: var(--primary-light);
            background: #ffffff;

            box-shadow:
                0 0 0 4px rgba(23, 100, 173, 0.11),
                0 14px 30px rgba(11, 59, 120, 0.08);

            transform: translateY(-1px);
        }

        .field-icon {
            width: 55px;
            min-width: 55px;
            height: 56px;

            display: grid;
            place-items: center;

            border-right: 1px solid var(--border);

            color: var(--primary);

            background:
                linear-gradient(
                    145deg,
                    #ffffff,
                    #eef5fb
                );

            font-size: 19px;
        }

        .form-control {
            width: 100%;
            height: 56px;

            border: 0;
            outline: 0;

            color: var(--text);
            background: transparent;

            padding: 0 14px;

            font-size: 13px;
            font-weight: 650;
        }

        .form-control::placeholder {
            color: #9aa8b8;
            font-weight: 500;
        }

        .form-control:-webkit-autofill,
        .form-control:-webkit-autofill:hover,
        .form-control:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--text);
            box-shadow: 0 0 0 1000px #ffffff inset;
            transition: background-color 5000s ease-in-out 0s;
        }

        .password-toggle {
            width: 52px;
            min-width: 52px;
            height: 56px;

            display: grid;
            place-items: center;

            border: 0;
            outline: 0;

            color: var(--text-soft);
            background: transparent;

            cursor: pointer;

            font-size: 18px;

            transition:
                color 0.2s ease,
                transform 0.2s ease,
                background 0.2s ease;
        }

        .password-toggle:hover {
            color: var(--primary);
            background: rgba(23, 100, 173, 0.06);
        }

        .password-toggle:active {
            transform: scale(0.92);
        }

        .caps-lock-warning {
            display: none;
            align-items: center;
            gap: 6px;

            margin-top: 8px;

            color: #a06600;

            font-size: 10px;
            font-weight: 700;
        }

        .caps-lock-warning.visible {
            display: flex;
        }

        /*
        |--------------------------------------------------------------------------
        | Botão
        |--------------------------------------------------------------------------
        */

        .login-button {
            position: relative;

            width: 100%;
            height: 58px;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            overflow: hidden;

            margin-top: 7px;

            border: 0;
            border-radius: 18px;

            color: #ffffff;

            background:
                linear-gradient(
                    135deg,
                    var(--primary-dark),
                    var(--primary) 55%,
                    var(--primary-light)
                );

            box-shadow:
                0 18px 34px rgba(11, 59, 120, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);

            cursor: pointer;

            font-size: 12px;
            font-weight: 850;
            letter-spacing: 0.55px;
            text-transform: uppercase;

            transition:
                transform 0.22s ease,
                box-shadow 0.22s ease,
                opacity 0.22s ease;
        }

        .login-button::before {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    105deg,
                    transparent 25%,
                    rgba(255, 255, 255, 0.23) 48%,
                    transparent 70%
                );

            transform: translateX(-120%);
            transition: transform 0.65s ease;
        }

        .login-button:hover {
            transform: translateY(-3px);

            box-shadow:
                0 24px 45px rgba(11, 59, 120, 0.29),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .login-button:hover::before {
            transform: translateX(120%);
        }

        .login-button:active {
            transform: translateY(0);
        }

        .login-button:disabled {
            cursor: wait;
            opacity: 0.82;
            transform: none;
        }

        .button-spinner {
            display: none;

            width: 17px;
            height: 17px;

            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: #ffffff;
            border-radius: 50%;

            animation: spinner 0.7s linear infinite;
        }

        .login-button.loading .button-spinner {
            display: block;
        }

        .login-button.loading .button-icon {
            display: none;
        }

        @keyframes spinner {
            to {
                transform: rotate(360deg);
            }
        }

        /*
        |--------------------------------------------------------------------------
        | Informações auxiliares
        |--------------------------------------------------------------------------
        */

        .security-notice {
            display: flex;
            align-items: flex-start;
            gap: 11px;

            margin-top: 20px;
            padding: 14px;

            border: 1px solid #dfe8f0;
            border-radius: 17px;

            color: var(--text-soft);
            background: #f4f8fb;

            font-size: 10px;
            line-height: 1.55;
            font-weight: 550;
        }

        .security-notice-icon {
            width: 33px;
            height: 33px;
            flex: 0 0 33px;

            display: grid;
            place-items: center;

            border-radius: 11px;

            color: var(--secondary-dark);
            background: rgba(0, 155, 114, 0.1);

            font-size: 15px;
        }

        .system-status {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;

            margin-top: 13px;
        }

        .status-item {
            padding: 10px 7px;

            border: 1px solid #e2e9f0;
            border-radius: 13px;

            text-align: center;

            color: #596b80;
            background: #ffffff;

            box-shadow: 0 8px 18px rgba(11, 59, 120, 0.035);

            font-size: 9px;
            font-weight: 750;
        }

        .status-item i {
            display: block;

            margin-bottom: 5px;

            color: var(--primary);
            font-size: 16px;
        }

        .login-footer {
            margin-top: 20px;
            padding-top: 17px;

            border-top: 1px solid #e2e9f0;

            text-align: center;

            color: var(--text-light);

            font-size: 9px;
            line-height: 1.6;
            font-weight: 600;
        }

        .login-footer strong {
            color: #536479;
            font-weight: 750;
        }

        .current-time {
            display: inline-flex;
            align-items: center;
            gap: 5px;

            margin-top: 5px;

            color: var(--primary);

            font-weight: 700;
        }

        /*
        |--------------------------------------------------------------------------
        | Responsividade
        |--------------------------------------------------------------------------
        */

        @media (max-width: 980px) {
            body {
                overflow-y: auto;
            }

            .page {
                align-items: flex-start;
                padding: 22px 15px 28px;
            }

            .login-container {
                max-width: 650px;
                grid-template-columns: 1fr;
                border-radius: 28px;
            }

            .login-panel {
                order: 1;
                min-height: auto;
                padding: 38px 32px 32px;
            }

            .institutional-panel {
                order: 2;
                min-height: auto;
                padding: 39px 32px 43px;
            }

            .mobile-government {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;

                width: fit-content;

                margin: 0 auto 20px;
                padding: 8px 12px;

                border: 1px solid #dce8f2;
                border-radius: 999px;

                color: var(--primary);
                background: #f0f6fb;

                font-size: 10px;
                font-weight: 800;
                letter-spacing: 0.4px;
                text-transform: uppercase;
            }

            .institutional-title {
                max-width: 570px;
                font-size: clamp(34px, 9vw, 52px);
                letter-spacing: -2.3px;
            }

            .institutional-description {
                font-size: 14px;
            }

            .feature-list {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .feature-card {
                min-height: 128px;
            }

            .institutional-panel::before {
                opacity: 0.7;
            }
        }

        @media (max-width: 620px) {
            .page {
                padding:
                    max(16px, env(safe-area-inset-top))
                    10px
                    max(20px, env(safe-area-inset-bottom));
            }

            .login-container {
                border-radius: 23px;
            }

            .login-panel {
                padding: 31px 18px 27px;
            }

            .institutional-panel {
                padding: 31px 19px 35px;
            }

            .logo-stage {
                width: 104px;
                height: 104px;
                margin-bottom: 18px;
            }

            .logo-border {
                border-radius: 28px;
            }

            .logo-box {
                border-radius: 23px;
            }

            .logo-box img {
                max-width: 76px;
                max-height: 76px;
            }

            .login-title {
                font-size: 25px;
            }

            .login-subtitle {
                margin-bottom: 23px;
                font-size: 12px;
            }

            .field-icon {
                width: 49px;
                min-width: 49px;
            }

            .form-control {
                font-size: 12px;
            }

            .feature-list {
                grid-template-columns: 1fr;
            }

            .feature-card {
                min-height: auto;

                display: grid;
                grid-template-columns: 43px 1fr;
                column-gap: 13px;
                align-items: center;
            }

            .feature-card strong {
                margin-top: 0;
            }

            .feature-card small {
                grid-column: 2;
            }

            .institutional-title {
                font-size: 35px;
                letter-spacing: -1.8px;
            }

            .institutional-description {
                font-size: 13px;
            }

            .institutional-footer {
                align-items: flex-start;
            }
        }

        @media (max-width: 370px) {
            .login-panel {
                padding-right: 14px;
                padding-left: 14px;
            }

            .institutional-panel {
                padding-right: 15px;
                padding-left: 15px;
            }

            .system-status {
                grid-template-columns: 1fr;
            }

            .status-item {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
            }

            .status-item i {
                margin: 0;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
    
        .public-request-access {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-top: 12px;
            padding: 12px;
            border: 1px solid #c9dfee;
            border-radius: 18px;
            color: #1d527d;
            background:
                radial-gradient(
                    circle at 100% 0,
                    rgba(0, 155, 114, 0.12),
                    transparent 10rem
                ),
                #eef7ff;
            box-shadow: 0 12px 27px rgba(11, 59, 120, 0.07);
            transition:
                transform 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        .public-request-access:hover {
            transform: translateY(-2px);
            border-color: #9ebfd8;
            box-shadow: 0 17px 34px rgba(11, 59, 120, 0.12);
        }

        .public-request-access-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            color: #ffffff;
            background: linear-gradient(145deg, #007456, #009b72);
            box-shadow: 0 11px 23px rgba(0, 155, 114, 0.2);
            font-size: 18px;
        }

        .public-request-access strong {
            display: block;
            font-size: 10px;
            font-weight: 900;
        }

        .public-request-access span {
            display: block;
            margin-top: 3px;
            color: #678098;
            font-size: 7px;
            line-height: 1.45;
        }

        .public-request-access-arrow {
            margin-left: auto;
            color: #0b3b78;
            font-size: 16px;
        }

</style>
</head>

<body>

<div class="government-bar"></div>
<div class="background-grid"></div>

<div class="floating-shape floating-shape-one"></div>
<div class="floating-shape floating-shape-two"></div>
<div class="floating-shape floating-shape-three"></div>

<main class="page">

    <section
        class="login-container"
        id="loginContainer"
        aria-label="Acesso ao Sistema de Manutenção TI"
    >

        <!-- =========================================================
             ÁREA INSTITUCIONAL
        ========================================================== -->
        <aside class="institutional-panel">

            <div class="institutional-top">

                <div class="department-badge">
                    <span class="department-badge-icon">
                        <i class="bi bi-building-fill-gear"></i>
                    </span>

                    Prefeitura de Extrema • Gerência de Tecnologia
                </div>

                <h1 class="institutional-title">
                    Tecnologia que mantém a
                    <span>Prefeitura funcionando.</span>
                </h1>

                <p class="institutional-description">
                    Ambiente institucional para registro, acompanhamento e
                    gerenciamento das ordens de serviço da Manutenção de TI.
                    Mais organização, rastreabilidade e agilidade para o
                    atendimento dos setores municipais.
                </p>

                <div class="feature-list">

                    <article class="feature-card">
                        <span class="feature-icon">
                            <i class="bi bi-clipboard2-check-fill"></i>
                        </span>

                        <strong>Ordens organizadas</strong>

                        <small>
                            Registre e acompanhe cada atendimento técnico.
                        </small>
                    </article>

                    <article class="feature-card">
                        <span class="feature-icon">
                            <i class="bi bi-pc-display-horizontal"></i>
                        </span>

                        <strong>Controle técnico</strong>

                        <small>
                            Centralize equipamentos, serviços e manutenções.
                        </small>
                    </article>

                    <article class="feature-card">
                        <span class="feature-icon">
                            <i class="bi bi-clock-history"></i>
                        </span>

                        <strong>Histórico completo</strong>

                        <small>
                            Consulte informações e atendimentos realizados.
                        </small>
                    </article>

                </div>

            </div>

            <div class="institutional-footer">

                <span class="institutional-footer-icon">
                    <i class="bi bi-shield-check"></i>
                </span>

                <span>
                    Ambiente de uso interno e exclusivo dos servidores
                    autorizados da Prefeitura de Extrema.
                </span>

            </div>

        </aside>

        <!-- =========================================================
             ÁREA DE LOGIN
        ========================================================== -->
        <section class="login-panel">

            <div class="mobile-government">
                <i class="bi bi-building-fill"></i>
                Sistema institucional
            </div>

            <header class="login-header">

                <div class="logo-stage">

                    <div class="logo-shadow"></div>

                    <div class="logo-border">
                        <div class="logo-box">

                            <img
                                src="assets/logo_pref.jpg"
                                alt="Prefeitura de Extrema"
                                onerror="
                                    this.style.display='none';
                                    this.nextElementSibling.style.display='grid';
                                "
                            >

                            <div class="logo-fallback">
                                <i class="bi bi-buildings-fill"></i>
                            </div>

                        </div>
                    </div>

                </div>

                <div class="restricted-badge">
                    <i class="bi bi-shield-lock-fill"></i>
                    Acesso restrito
                </div>

                <h2 class="login-title">
                    Bem-vindo ao Manutenção TI
                </h2>

                <p class="login-subtitle">
                    Informe suas credenciais institucionais para acessar
                    ordens de serviço, equipamentos e atendimentos técnicos.
                </p>

            </header>

            <?php if ($erro !== ''): ?>
                <div
                    class="alert-error"
                    role="alert"
                    aria-live="assertive"
                >
                    <i class="bi bi-exclamation-octagon-fill"></i>

                    <span>
                        <?= e($erro) ?>
                    </span>
                </div>
            <?php endif; ?>

            <form
                method="POST"
                id="loginForm"
                autocomplete="on"
                novalidate
            >

                <div class="form-group">

                    <label class="form-label" for="usuario">
                        <span>Usuário institucional</span>
                    </label>

                    <div class="field">

                        <span class="field-icon">
                            <i class="bi bi-person-fill"></i>
                        </span>

                        <input
                            type="text"
                            id="usuario"
                            name="usuario"
                            class="form-control"
                            placeholder="Digite seu usuário"
                            value="<?= e($usuarioDigitado) ?>"
                            autocomplete="username"
                            autocapitalize="none"
                            spellcheck="false"
                            maxlength="100"
                            required
                            autofocus
                        >

                    </div>

                </div>

                <div class="form-group">

                    <label class="form-label" for="senha">
                        <span>Senha de acesso</span>
                    </label>

                    <div class="field">

                        <span class="field-icon">
                            <i class="bi bi-lock-fill"></i>
                        </span>

                        <input
                            type="password"
                            id="senha"
                            name="senha"
                            class="form-control"
                            placeholder="Digite sua senha"
                            autocomplete="current-password"
                            required
                        >

                        <button
                            type="button"
                            class="password-toggle"
                            id="togglePassword"
                            aria-label="Mostrar senha"
                            title="Mostrar ou ocultar senha"
                        >
                            <i class="bi bi-eye-fill"></i>
                        </button>

                    </div>

                    <div
                        class="caps-lock-warning"
                        id="capsLockWarning"
                        aria-live="polite"
                    >
                        <i class="bi bi-capslock-fill"></i>
                        Caps Lock está ativado
                    </div>

                </div>

                <button
                    type="submit"
                    class="login-button"
                    id="loginButton"
                >
                    <span class="button-spinner"></span>

                    <i class="bi bi-box-arrow-in-right button-icon"></i>

                    <span id="loginButtonText">
                        Acessar sistema
                    </span>
                </button>

            </form>

            <a
                class="public-request-access"
                href="solicitar_os.php"
            >
                <span class="public-request-access-icon">
                    <i class="bi bi-clipboard2-plus-fill"></i>
                </span>

                <span>
                    <strong>Abrir solicitação sem login</strong>
                    <span>
                        Informe seus dados e o defeito antes de entregar
                        o equipamento à Gerência de Tecnologia.
                    </span>
                </span>

                <i class="bi bi-arrow-right public-request-access-arrow"></i>
            </a>

            <div class="security-notice">

                <span class="security-notice-icon">
                    <i class="bi bi-info-circle-fill"></i>
                </span>

                <span>
                    Utilize somente sua conta individual. As ações executadas
                    no sistema poderão ser vinculadas ao usuário autenticado.
                </span>

            </div>

            <div class="system-status">

                <div class="status-item">
                    <i class="bi bi-shield-check"></i>
                    Acesso seguro
                </div>

                <div class="status-item">
                    <i class="bi bi-diagram-3-fill"></i>
                    Gestão integrada
                </div>

                <div class="status-item">
                    <i class="bi bi-headset"></i>
                    Suporte interno
                </div>

            </div>

            <footer class="login-footer">
                Prefeitura de Extrema — Minas Gerais<br>

                <strong>
                    Desenvolvido pela Gerência de Tecnologia
                </strong>

                <div class="current-time">
                    <i class="bi bi-clock"></i>
                    <span id="currentDateTime">Carregando data...</span>
                </div>
            </footer>

        </section>

    </section>

</main>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.getElementById('loginForm');
    const loginButton = document.getElementById('loginButton');
    const loginButtonText = document.getElementById('loginButtonText');

    const usuarioInput = document.getElementById('usuario');
    const senhaInput = document.getElementById('senha');

    const togglePassword = document.getElementById('togglePassword');
    const capsLockWarning = document.getElementById('capsLockWarning');

    const currentDateTime = document.getElementById('currentDateTime');
    const loginContainer = document.getElementById('loginContainer');

    /*
    |--------------------------------------------------------------------------
    | Mostrar e ocultar senha
    |--------------------------------------------------------------------------
    */
    if (togglePassword && senhaInput) {
        togglePassword.addEventListener('click', () => {
            const senhaVisivel = senhaInput.type === 'text';
            const icon = togglePassword.querySelector('i');

            senhaInput.type = senhaVisivel ? 'password' : 'text';

            togglePassword.setAttribute(
                'aria-label',
                senhaVisivel ? 'Mostrar senha' : 'Ocultar senha'
            );

            if (icon) {
                icon.className = senhaVisivel
                    ? 'bi bi-eye-fill'
                    : 'bi bi-eye-slash-fill';
            }

            senhaInput.focus();
        });
    }

    /*
    |--------------------------------------------------------------------------
    | Aviso de Caps Lock
    |--------------------------------------------------------------------------
    */
    if (senhaInput && capsLockWarning) {
        const verificarCapsLock = (event) => {
            const capsAtivado =
                typeof event.getModifierState === 'function' &&
                event.getModifierState('CapsLock');

            capsLockWarning.classList.toggle('visible', capsAtivado);
        };

        senhaInput.addEventListener('keydown', verificarCapsLock);
        senhaInput.addEventListener('keyup', verificarCapsLock);

        senhaInput.addEventListener('blur', () => {
            capsLockWarning.classList.remove('visible');
        });
    }

    /*
    |--------------------------------------------------------------------------
    | Validação e estado de carregamento
    |--------------------------------------------------------------------------
    */
    if (loginForm && loginButton) {
        loginForm.addEventListener('submit', (event) => {
            const usuario = usuarioInput?.value.trim() ?? '';
            const senha = senhaInput?.value ?? '';

            if (usuario === '' || senha === '') {
                event.preventDefault();

                const campoVazio = usuario === ''
                    ? usuarioInput
                    : senhaInput;

                campoVazio?.focus();

                const field = campoVazio?.closest('.field');

                if (field) {
                    field.animate(
                        [
                            { transform: 'translateX(0)' },
                            { transform: 'translateX(-5px)' },
                            { transform: 'translateX(5px)' },
                            { transform: 'translateX(-3px)' },
                            { transform: 'translateX(0)' }
                        ],
                        {
                            duration: 320,
                            easing: 'ease-out'
                        }
                    );
                }

                return;
            }

            loginButton.disabled = true;
            loginButton.classList.add('loading');

            if (loginButtonText) {
                loginButtonText.textContent = 'Validando acesso...';
            }
        });
    }

    /*
    |--------------------------------------------------------------------------
    | Data e hora
    |--------------------------------------------------------------------------
    */
    const atualizarDataHora = () => {
        if (!currentDateTime) {
            return;
        }

        const agora = new Date();

        const dataFormatada = agora.toLocaleDateString('pt-BR', {
            weekday: 'long',
            day: '2-digit',
            month: 'long',
            year: 'numeric'
        });

        const horaFormatada = agora.toLocaleTimeString('pt-BR', {
            hour: '2-digit',
            minute: '2-digit'
        });

        const textoData =
            dataFormatada.charAt(0).toUpperCase() +
            dataFormatada.slice(1);

        currentDateTime.textContent =
            `${textoData} • ${horaFormatada}`;
    };

    atualizarDataHora();
    setInterval(atualizarDataHora, 30000);

    /*
    |--------------------------------------------------------------------------
    | Movimento 3D suave no desktop
    |--------------------------------------------------------------------------
    */
    const permiteMovimento =
        window.matchMedia('(pointer: fine)').matches &&
        !window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (loginContainer && permiteMovimento) {
        loginContainer.addEventListener('mousemove', (event) => {
            const rect = loginContainer.getBoundingClientRect();

            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;

            const centroX = rect.width / 2;
            const centroY = rect.height / 2;

            const rotacaoY =
                ((mouseX - centroX) / centroX) * 0.75;

            const rotacaoX =
                ((centroY - mouseY) / centroY) * 0.55;

            loginContainer.style.transform =
                `perspective(1400px)
                 rotateX(${rotacaoX}deg)
                 rotateY(${rotacaoY}deg)
                 translateY(-1px)`;
        });

        loginContainer.addEventListener('mouseleave', () => {
            loginContainer.style.transform =
                'perspective(1400px) rotateX(0deg) rotateY(0deg)';
        });
    }
});
</script>

</body>
</html>