/* ========================================================================== */
/*                   Vortex System - Folha de Estilos FULL                   */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/*                                  Variáveis                                 */
/* -------------------------------------------------------------------------- */
:root {
    --primary-green: #018d01;
    --dark-bg: #141414;
    --content-bg: #262626;
    --border-color: #2a2a2a;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --danger-color: #ff4040;
    --warning-color: #ffaa00;
    --info-color: #00bfff;
    --success-color: var(--primary-green);
    --font-primary: 'Roboto', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
}

/* -------------------------------------------------------------------------- */
/*                                Reset Básico                                */
/* -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-size-base); }
body {
    font-family: var(--font-primary);
    background-color: var(--dark-bg);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary-green); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* -------------------------------------------------------------------------- */
/*                                  Estrutura                                 */
/* -------------------------------------------------------------------------- */
.wrapper, .wrapper-full {
    width: 92%;
    max-width: 600px;
    margin: 1.5rem auto;
    padding: 1rem;
}
.wrapper-full { max-width: 1200px; }

.navbar {
    background-color: var(--content-bg);
    padding: 0.75rem 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.logo-container .logo-img { max-height: 28px; width: auto; display: block; }
.logo-container .logo-text {
    color: var(--primary-green);
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: bold;
}
.user-info { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; }
.user-info span { font-size: var(--font-size-sm); color: var(--text-secondary); }
.user-info .perfil-link { color: var(--text-secondary); font-weight: 700; text-decoration: none; }

/* -------------------------------------------------------------------------- */
/*                                  Page Header                                */
/* -------------------------------------------------------------------------- */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-weight: 700;
}
.page-header h1 small {
    display: block;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 400;
}
.page-header p { color: var(--text-secondary); font-size: var(--font-size-base); }

/* -------------------------------------------------------------------------- */
/*                                Content Sections                            */
/* -------------------------------------------------------------------------- */
.content-section {
    background-color: var(--content-bg);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 8px rgba(1, 141, 1, 0.2);
}
.content-section h2 {
    font-size: var(--font-size-lg);
    color: var(--primary-green);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/*                                  Componentes                               */
/* -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn i { margin-right: 0.5rem; }
.btn-primary { background-color: var(--primary-green); color: var(--dark-bg); border-color: var(--primary-green); }
.btn-primary:hover { background-color: #fff; color: #000; border-color: #fff; }
.btn-secondary { background-color: transparent; color: var(--text-secondary); border-color: var(--text-secondary); }
.btn-secondary:hover { background-color: var(--text-secondary); color: var(--dark-bg); }
.btn-success { background-color: var(--success-color); color: var(--dark-bg); border-color: var(--success-color); }
.btn-danger { background-color: var(--danger-color); color: var(--text-primary); border-color: var(--danger-color); }
.btn-warning { background-color: var(--warning-color); color: var(--dark-bg); border-color: var(--warning-color); }
.btn-info { background-color: var(--info-color); color: var(--dark-bg); border-color: var(--info-color); }
.btn-admin { background-color: #6a0dad; color: var(--text-primary); border-color: #6a0dad; }

/* Botão Home fixo (canto inferior direito) */
.btn-home {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: var(--primary-green);
    color: var(--dark-bg);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 0 8px rgba(1,141,1,0.6);
    z-index: 1100;
}

/* Botão Ver Sinais Ativos centralizado com ícone radar */
.ver-sinais-container { display: flex; justify-content: center; margin: 1.5rem 0; }
.ver-sinais-container .btn-primary i { margin-right: 0.5rem; }

/* -------------------------------------------------------------------------- */
/*                                  Alerts                                     */
/* -------------------------------------------------------------------------- */
.alert { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 6px; font-size: var(--font-size-sm); }
.alert-danger { background-color: rgba(255, 64, 64, 0.1); border: 1px solid var(--danger-color); color: var(--danger-color); }
.alert-success { background-color: rgba(0, 255, 65, 0.1); border: 1px solid var(--primary-green); color: var(--primary-green); }
.alert-info { background-color: rgba(0, 191, 255, 0.1); border: 1px solid var(--info-color); color: var(--info-color); }

/* -------------------------------------------------------------------------- */
/*                                Formulários                                  */
/* -------------------------------------------------------------------------- */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: var(--font-size-sm); color: var(--text-secondary); }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="number"], .form-group input[type="date"], .form-group input[type="time"], .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--primary-green);
    border-radius: 6px;
    background-color: var(--dark-bg);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}
.form-group input:focus { outline: none; border-color: var(--primary-green); box-shadow: 0 0 0 2px rgba(1,141,1,0.2); }
.form-group small { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 0.25rem; display: block; }
.form-divider { border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0; }

/* -------------------------------------------------------------------------- */
/*                                 Cards e KPIs                                */
/* -------------------------------------------------------------------------- */
.kpi-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.kpi-card { background-color: var(--content-bg); padding: 0.75rem; border-radius: 8px; text-align: center; box-shadow: 0 4px 8px rgba(1,141,1,0.2); border: 1px solid var(--primary-green); }
.kpi-card span { font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; }
.kpi-card p { font-size: 1.5rem; font-weight: bold; margin-top: 0.25rem; font-family: var(--font-mono); color: var(--text-primary); }
.kpi-card.green p { color: var(--primary-green); }
.kpi-card.red p { color: var(--danger-color); }

/* -------------------------------------------------------------------------- */
/*                                Sinais / Lista                               */
/* -------------------------------------------------------------------------- */
.sinais-container { display: grid; gap: 1rem; }
.sinal-card {
    background-color: var(--content-bg);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--primary-green);
    font-size: var(--font-size-sm);
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(1,141,1,0.2);
}
.sinal-header { display: flex; justify-content: space-between; padding: 0.5rem 0; color: var(--text-secondary); }
.sinal-body .evento { color: var(--primary-green); font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; display: block; }
.sinal-liga { color: var(--primary-green); font-weight: 400; }
.sinal-info-block p { margin: 0.25rem 0; color: var(--text-primary); }
.sinal-details { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-primary); display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sinal-details span { margin-right: 0.25rem; white-space: nowrap; }
.sinal-footer { margin-top: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); }
.status-premium { color: var(--primary-green); font-weight: bold; }
.status-resultado-aguardando { color: var(--warning-color); font-weight: 700; }
.status-resultado-green { color: var(--primary-green); font-weight: 700; }
.status-resultado-red { color: var(--danger-color); font-weight: 700; }

/* Botão voltar no canto inferior direito */
.btn-voltar { position: fixed; bottom: 1rem; right: 1rem; z-index: 1100; }

/* Centralizar botão ver histórico completo */
.ver-historico-container { display: flex; justify-content: center; margin: 1rem 0; }

/* -------------------------------------------------------------------------- */
/*                                Responsividade                               */
/* -------------------------------------------------------------------------- */
@media (min-width: 700px) {
    .wrapper { max-width: 720px; }
    .kpi-container { grid-template-columns: repeat(2, 1fr); } /* 2 por linha */
}
@media (min-width: 1100px) { .wrapper-full { max-width: 1100px; } }

<style>
/* ========================================================================== */
/*                        Tabelas Paralax - admin_financeiro                   */
/* ========================================================================== */
.table-paralax {
    width: 100%;
    table-layout: auto; /* células se ajustam ao conteúdo */
    border-collapse: separate;
    border-spacing: 0 8px; /* espaçamento vertical entre linhas */
}

.table-paralax th, .table-paralax td {
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}

.table-paralax th {
    background-color: var(--content-bg);
    color: var(--primary-green);
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
}

.table-paralax tr {
    background-color: var(--content-bg);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.table-paralax tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.table-paralax td {
    border-top: 1px solid var(--border-color);
}

.table-responsive {
    overflow-x: auto;
}
</style>