* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    color: #e2e8f0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(37, 99, 235, 0.35),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(124, 58, 237, 0.30),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #020617,
            #0f172a
        );

    padding: 50px 20px;
}


/* ============================= */
/* FORMULÁRIO DE FILTRO */
/* ============================= */

form {
    width: 90%;
    max-width: 900px;

    margin: 0 auto 40px auto;

    padding: 30px;

    display: flex;
    flex-direction: column;

    background: rgba(15, 23, 42, 0.85);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(59, 130, 246, 0.06);

    backdrop-filter: blur(12px);
}


/* Remove os espaços do <br> */
form br {
    display: none;
}


/* ============================= */
/* LABELS */
/* ============================= */

label {
    margin-top: 15px;
    margin-bottom: 7px;

    color: #cbd5e1;

    font-size: 14px;
    font-weight: bold;
}


/* ============================= */
/* SELECT MAC */
/* ============================= */

select {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #334155;
    border-radius: 9px;

    background: #0f172a;

    color: white;

    font-size: 15px;

    outline: none;

    cursor: pointer;

    transition: 0.25s;
}


select:hover {
    border-color: #475569;
}


select:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.15),
        0 0 15px rgba(59, 130, 246, 0.10);
}


select option {
    background: #0f172a;
    color: white;
}


/* ============================= */
/* INPUTS DE DATA */
/* ============================= */

input {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #334155;
    border-radius: 9px;

    background: #0f172a;

    color: white;

    font-size: 15px;

    outline: none;

    transition: 0.25s;
}


input:hover {
    border-color: #475569;
}


input:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.15),
        0 0 15px rgba(59, 130, 246, 0.10);
}


/* Deixa o calendário compatível com o tema escuro */
input[type="datetime-local"] {
    color-scheme: dark;
}


/* ============================= */
/* BOTÃO FILTRAR */
/* ============================= */

button {
    margin-top: 25px;

    padding: 14px;

    border: none;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: white;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.25s;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.25);
}


button:hover {
    transform: translateY(-2px);

    filter: brightness(1.1);

    box-shadow:
        0 12px 25px rgba(37, 99, 235, 0.35);
}


button:active {
    transform: translateY(0);
}


/* ============================= */
/* TÍTULOS */
/* ============================= */

h3 {
    width: 90%;
    max-width: 900px;

    margin: 0 auto 15px auto;

    color: #f8fafc;

    font-size: 22px;
}


h2 {
    width: 90%;
    max-width: 900px;

    margin: 25px auto 15px auto;

    color: #f8fafc;

    font-size: 20px;
}


/* ============================= */
/* TABELA */
/* ============================= */

table {
    width: 90%;
    max-width: 900px;

    margin: 0 auto 40px auto;

    border-collapse: collapse;

    border: none;

    overflow: hidden;

    border-radius: 18px;

    background: rgba(15, 23, 42, 0.85);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(59, 130, 246, 0.06);

    backdrop-filter: blur(12px);
}


/* Remove border="1" do HTML visualmente */
table,
table td {
    border: none;
}


/* ============================= */
/* CÉLULAS */
/* ============================= */

td {
    padding: 16px;

    border-bottom: 1px solid #253044;

    color: #cbd5e1;

    text-align: center;
}


/* ============================= */
/* CABEÇALHO */
/* ============================= */

table tr:first-child {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );
}


table tr:first-child td {
    color: white;

    font-size: 15px;
    font-weight: bold;

    border-bottom: none;
}


/* ============================= */
/* LINHAS */
/* ============================= */

table tr:not(:first-child) {
    transition: 0.2s;
}


table tr:not(:first-child):hover {
    background: rgba(59, 130, 246, 0.10);
}


table tr:last-child td {
    border-bottom: none;
}


/* ============================= */
/* COLUNA "FUNÇÃO" */
/* ============================= */

table td:first-child {
    width: 40%;

    color: #93c5fd;

    font-weight: bold;
}


/* ============================= */
/* COLUNA "VALOR" */
/* ============================= */

table td:nth-child(2) {
    color: #86efac;

    font-size: 16px;
    font-weight: bold;
}


/* ============================= */
/* RESPONSIVO */
/* ============================= */

@media (max-width: 600px) {

    body {
        padding: 20px 10px;
    }


    form {
        width: 100%;

        padding: 20px;

        border-radius: 14px;
    }


    select,
    input {
        font-size: 16px;
    }


    h2,
    h3 {
        width: 100%;
    }


    table {
        width: 100%;

        border-radius: 14px;
    }


    td {
        padding: 12px 8px;

        font-size: 13px;
    }
}