/* ---------------------------------------------------------------------------
   Design System - Microgate Sorteio
   Estética tecnológica + mobile responsivo
--------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg: #1f1f1f;
    --bg-overlay: rgba(31, 31, 31, 0.92);
    --panel: #1a1a1a;
    --panel-2: #222222;
    --line: rgba(255, 255, 255, 0.08);
    --line-hover: rgba(255, 255, 255, 0.15);
    --led-green: #004AAD;
    --led-amber: #1a5fc7;
    --led-red: #ff5c5c;
    --led-blue: #5cc0ff;
    --text: #f5f5f7;
    --text-dim: #9ca3af;
    --glow-green: rgba(0, 74, 173, 0.12);
    --glow-amber: rgba(26, 95, 199, 0.12);
    --glow-blue: rgba(92, 192, 255, 0.12);
    --glow-red: rgba(255, 92, 92, 0.12);
    --radius: 10px;
    --radius-sm: 6px;
    --transition: 0.2s ease;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-image: url('../img/background.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000000;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-wrapper {
    background-color: var(--bg-overlay);
    width: 100%;
    position: relative;
}

.content-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.01) 2px,
            rgba(255, 255, 255, 0.01) 3px
        );
    pointer-events: none;
    z-index: 0;
}

.content-wrapper > * {
    position: relative;
    z-index: 1;
}

.boxed-layout {
    max-width: 1280px;
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
    min-height: 100vh;
}

/* --- Typography Scale --- */
.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.text-display {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.text-body {
    font-size: 1rem;
    line-height: 1.6;
}

.text-caption {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.text-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--led-amber);
    font-weight: 600;
}

/* --- Card System --- */
.card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.card:hover {
    border-color: var(--line-hover);
}

.card-glow {
    box-shadow: 0 0 0 1px var(--line), 0 4px 24px rgba(0, 0, 0, 0.3);
}

.card-glow:hover {
    box-shadow: 0 0 0 1px var(--line-hover), 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* --- Tech Button --- */
.btn-tech {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn-tech-primary {
    background: var(--led-green);
    color: #06110a;
    border-color: var(--led-green);
    box-shadow: 0 0 16px var(--glow-green);
}

.btn-tech-primary:hover {
    background: #1a5fc7;
    box-shadow: 0 0 24px rgba(0, 74, 173, 0.25);
}

.btn-tech-primary:active {
    transform: scale(0.97);
}

.btn-tech-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}

.btn-tech-secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line-hover);
}

.btn-tech-danger {
    background: transparent;
    color: var(--led-red);
    border-color: rgba(255, 92, 92, 0.3);
}

.btn-tech-danger:hover {
    background: rgba(255, 92, 92, 0.08);
    border-color: rgba(255, 92, 92, 0.5);
}

.btn-tech-full {
    width: 100%;
}

/* --- Input System --- */
.input-tech {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input-tech::placeholder {
    color: var(--text-dim);
    opacity: 0.7;
}

.input-tech:focus {
    border-color: var(--led-blue);
    box-shadow: 0 0 0 3px var(--glow-blue);
}

.input-tech:focus::placeholder {
    opacity: 0.4;
}

/* --- Header --- */
.desktop-nav {
    display: none;
}

.header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
}

@media (max-width: 984px) {
    .header-top #logo-link {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-top #mobile-menu-button {
        margin-left: auto;
    }
}

#header-placeholder {
    padding-bottom: 0;
    position: relative;
    z-index: 10;
}

.mobile-only {
    display: inline-flex;
}

.mobile-panel {
    display: block;
}

@media (min-width: 985px) {
    .desktop-nav {
        display: flex;
    }

    .header-top {
        justify-content: center;
    }

    .mobile-only,
    .mobile-panel {
        display: none;
    }
}

/* --- Badge System --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid;
}

.badge-green {
    color: var(--led-green);
    border-color: rgba(0, 74, 173, 0.3);
    background: rgba(0, 74, 173, 0.08);
}

.badge-amber {
    color: var(--led-amber);
    border-color: rgba(26, 95, 199, 0.3);
    background: rgba(26, 95, 199, 0.08);
}

.badge-red {
    color: var(--led-red);
    border-color: rgba(255, 92, 92, 0.3);
    background: rgba(255, 92, 92, 0.08);
}

.badge-blue {
    color: var(--led-blue);
    border-color: rgba(92, 192, 255, 0.3);
    background: rgba(92, 192, 255, 0.08);
}

/* --- Divider --- */
.divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-dim);
    font-size: 0.75rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* --- Status Bar --- */
.status-bar {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
    padding: 0.75rem 1rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Pulse Animation --- */
@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-glow {
    animation: pulse-glow 1.5s ease-in-out infinite;
}

/* --- Footer --- */
.footer-tech {
    padding: 4rem 1rem;
    background: var(--bg);
    color: var(--text-dim);
    border-top: 1px solid var(--line);
}

/* --- Utilities (Tailwind ausentes do build) --- */
.top-1\/2 { top: 50%; }
.left-3 { left: 0.75rem; }
.right-0 { right: 0; }
.border-l { border-left-width: 1px; }
.z-\[90\] { z-index: 90; }
.z-\[100\] { z-index: 100; }

#mobile-menu-button {
    position: relative;
    z-index: 110;
}

.translate-x-full {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#mobile-menu {
    transform: translateX(100%);
}

#mobile-menu.translate-x-0 {
    transform: translateX(0);
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.min-w-\[240px\] { min-width: 240px; }
.pl-10 { padding-left: 2.5rem; }
.pr-3 { padding-right: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pl-6 { padding-left: 1.5rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.ml-2 { margin-left: 0.5rem; }
.text-right { text-align: right; }
.text-amber-400 { color: #4d8fd6; }
.border-amber-400\/40 { border-color: rgb(77, 143, 214 / .4); }

/* --- Mobile Responsive --- */
@media (max-width: 640px) {
    .boxed-layout {
        box-shadow: none;
    }

    .content-wrapper::before {
        display: none;
    }

    .card {
        padding: 1.25rem;
    }

    .text-display {
        font-size: 1.5rem;
    }
}

/* --- Utilities Tailwind faltando no css/output.css --- */
.text-red-400 { color: #f87171; }
.text-blue-400 { color: #60a5fa; }
.text-emerald-400 { color: #34d399; }
.text-green-400 { color: #4d8fd6; }
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3\.5 { padding: 0.875rem; }
.gap-1\.5 { gap: 0.375rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.max-w-\[160px\] { max-width: 160px; }
.bg-\[#004AAD\] { background-color: #004AAD; }
.bg-\[#5cc0ff\] { background-color: #5cc0ff; }
.bg-\[#121212\] { background-color: #121212; }
.bg-black\/95 { background-color: rgb(0 0 0 / 0.95); }
.bg-white\/\[0\.03\] { background-color: rgb(255 255 255 / 0.03); }
.text-\[10px\] { font-size: 10px; }
.accent-green-500 { accent-color: #004AAD; }
.bg-red-500\/10 { background-color: rgb(239 68 68 / 0.1); }
.border-red-500\/30 { border-color: rgb(239 68 68 / 0.3); }
.bg-blue-500\/10 { background-color: rgb(59 130 246 / 0.1); }
.border-blue-500\/30 { border-color: rgb(59 130 246 / 0.3); }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-12 { margin-top: 3rem; }
.mt-6 { margin-top: 1.5rem; }
.break-words { overflow-wrap: break-word; word-break: break-word; }
.whitespace-pre-line { white-space: pre-line; }
.underline { text-decoration: underline; }
.cursor-not-allowed { cursor: not-allowed; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.animate-spin { animation: spin 1s linear infinite; }
.tracking-wider { letter-spacing: 0.05em; }
.max-w-3xl { max-width: 48rem; }

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

.hover\:text-white:hover { color: #fff; }
.hover\:text-gray-300:hover { color: #d1d5db; }
.hover\:text-red-300:hover { color: #fca5a5; }
.hover\:text-red-400:hover { color: #f87171; }

.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:px-0 { padding-left: 0; padding-right: 0; }
    .sm\:mx-0 { margin-left: 0; margin-right: 0; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:p-8 { padding: 2rem; }
    .sm\:gap-3 { gap: 0.75rem; }
    .sm\:gap-6 { gap: 1.5rem; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}

@media (min-width: 768px) {
    .md\:max-w-\[200px\] { max-width: 200px; }
    .md\:h-12 { height: 3rem; }
    .md\:w-auto { width: auto; }
    .md\:gap-10 { gap: 2.5rem; }
    .md\:gap-12 { gap: 3rem; }
    .md\:mt-16 { margin-top: 4rem; }
    .md\:flex-row { flex-direction: row; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Tooltip de Validação --- */
.campo-tooltip {
    position: absolute;
    left: 0;
    bottom: -6px;
    transform: translateY(100%);
    background: var(--panel-2);
    border: 1px solid rgba(255, 92, 92, 0.5);
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    color: var(--led-red);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    animation: tooltipIn 0.15s ease;
}

.campo-tooltip::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 16px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid rgba(255, 92, 92, 0.5);
}

.campo-tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 17px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--panel-2);
}

@keyframes tooltipIn {
    from { opacity: 0; transform: translateY(100%) translateY(-4px); }
    to { opacity: 1; transform: translateY(100%); }
}

/* Mensagem de topo no formulário */
.msg-topo {
    position: sticky;
    top: 0;
    z-index: 50;
    color: var(--led-blue);
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    --neon-r: 92;
    --neon-g: 192;
    --neon-b: 255;
    text-shadow:
        0 0 4px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.6),
        0 0 11px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.4),
        0 0 19px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.2);
    animation: pulse-neon 2s ease-in-out infinite;
}

@keyframes pulse-neon {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.6),
            0 0 11px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.4),
            0 0 19px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.2);
    }
    50% {
        text-shadow:
            0 0 2px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.3),
            0 0 5px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.2),
            0 0 8px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}