/* Migrado de style.css — layout/_responsive-extra.css */

/* SYSTEM OVERHAUL 2026 */

body {
    background:
        radial-gradient(circle at top left, rgba(201, 168, 76, 0.12), transparent 22%),
        radial-gradient(circle at top right, rgba(22, 57, 101, 0.28), transparent 24%),
        linear-gradient(180deg, #d6e0eb 0%, #c8d4e1 36%, #edf2f7 100%);
}

body::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 180px),
        radial-gradient(circle at 18% 0%, rgba(201, 168, 76, 0.10), transparent 22%),
        radial-gradient(circle at 80% 0%, rgba(18, 52, 93, 0.14), transparent 26%);
}

.topbar {
    min-height: 74px;
    padding: 10px 22px;
    background:
        linear-gradient(180deg, rgba(219, 229, 240, 0.98), rgba(205, 218, 233, 0.95));
    border-bottom: 1px solid rgba(28, 57, 92, 0.14);
    box-shadow: 0 20px 42px rgba(14, 32, 56, 0.12);
    backdrop-filter: blur(16px);
}

.topbar::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.52), transparent);
}

.brand-side,
.brand-center {
    background:
        linear-gradient(180deg, rgba(251, 253, 255, 0.95), rgba(234, 241, 248, 0.90));
    border: 1px solid rgba(25, 56, 93, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 14px 30px rgba(14, 32, 56, 0.08);
}

.brand-side {
    min-height: 52px;
    padding: 7px 15px;
    border-radius: 16px;
}

.brand-center {
    padding: 9px 20px;
    border-radius: 18px;
}

.brand-center strong {
    font-size: 28px;
    color: #17324f;
}

.brand-center span {
    color: #6a798d;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.page,
.bernoulli-page {
    padding-top: 28px;
    padding-bottom: 48px;
}

.hero-shell,
.card,
.event-log-panel,
.sidebar,
.viewer,
.table-wrapper,
.app-modal-dialog,
.home-hero-main,
.home-hero-panel,
.home-ops-card,
.home-history-card,
.upload-command-card,
.bernoulli-hero,
.bernoulli-form-card,
.bernoulli-log-card,
.bernoulli-help-card,
.bernoulli-track-card {
    background:
        linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(236, 243, 250, 0.97)) !important;
    border: 1px solid rgba(24, 55, 92, 0.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 22px 42px rgba(13, 31, 54, 0.08) !important;
}

.hero-shell,
.card,
.event-log-panel,
.sidebar,
.viewer,
.table-wrapper {
    border-radius: 30px !important;
}

.processamento-hero,
.processando-hero,
.validacao-hero,

.processamento-hero::before,
.processando-hero::before,
.validacao-hero::before,

.hero h1,
.home-hero-main h1,
.bernoulli-hero h1,
.section-head h2,
.card h2,
.viewer-header strong,
.sidebar-head h2 {
    color: #16304d !important;
    letter-spacing: -0.06em;
}

.hero p,
.card-description,
.home-hero-main p,
.bernoulli-hero p,
.sidebar-description,
.event-log-description,
.viewer-help,
.upload-command-note,
.home-flow-item span,
.home-ops-item p,
.home-history-copy span,
.summary-card p,
.stat-card span {
    color: #667789 !important;
}

.eyebrow,
.section-kicker,
.panel-kicker,
.section-badge,
.highlight-pill,
.home-history-tag,
.item-imagem-chip,
.item-imagem-pill,
.status-badge {
    background: linear-gradient(180deg, rgba(227, 236, 245, 0.98), rgba(212, 224, 238, 0.98)) !important;
    border: 1px solid rgba(27, 57, 93, 0.10) !important;
    color: #23456d !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.btn-primary,
.btn-secondary,
.btn-light,
.link-btn,
.sidebar-filter-btn,
.bernoulli-day-btn {
    min-height: 48px;
    border-radius: 16px;
    font-weight: 800;
}

.btn-primary {
    background: linear-gradient(180deg, #234c7d, #163759) !important;
    border: 1px solid rgba(20, 49, 81, 0.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 20px 34px rgba(22, 55, 89, 0.22) !important;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #1f446f, #14314f) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 22px 38px rgba(22, 55, 89, 0.24) !important;
}

.btn-secondary,
.btn-light,
.sidebar-filter-btn,
.bernoulli-day-btn {
    background: linear-gradient(180deg, rgba(248, 251, 254, 0.99), rgba(231, 239, 246, 0.97)) !important;
    border: 1px solid rgba(25, 56, 92, 0.12) !important;
    color: #1b385a !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 10px 22px rgba(14, 32, 56, 0.05) !important;
}

.btn-secondary:hover,
.btn-light:hover,
.sidebar-filter-btn:hover,
.bernoulli-day-btn:hover,
.sidebar-filter-btn.ativo,
.bernoulli-day-btn.ativo {
    background: linear-gradient(180deg, rgba(239, 246, 252, 0.99), rgba(220, 232, 244, 0.98)) !important;
    border-color: rgba(28, 57, 92, 0.18) !important;
}

.sidebar-filter-btn.ativo,
.bernoulli-day-btn.active,
.bernoulli-day-btn.ativo,
.corner-btn.ativo {
    background: linear-gradient(180deg, rgba(205, 222, 239, 0.78), rgba(189, 210, 231, 0.72)) !important;
    border-color: rgba(76, 112, 151, 0.22) !important;
    color: #1d3d61 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.64),
        0 10px 20px rgba(18, 55, 90, 0.08) !important;
}

.toolbar,
.table-toolbar,
.corner-toolbar {
    background:
        radial-gradient(circle at top right, rgba(28, 57, 92, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(247, 251, 254, 0.99), rgba(234, 242, 248, 0.98)) !important;
    border: 1px solid rgba(25, 56, 92, 0.11) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 14px 28px rgba(14, 32, 56, 0.05) !important;
}

.input-text,
.toolbar input,
.toolbar select,
.field-block input[type="file"],
.manual-form input,
.corner-toolbar select,
.table-toolbar input,
.table-toolbar select {
    background: rgba(250, 252, 255, 0.98) !important;
    border: 1px solid rgba(27, 57, 93, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

.upload-box,
.bernoulli-upload-box {
    background:
        radial-gradient(circle at top right, rgba(28, 57, 92, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(251, 253, 255, 0.99), rgba(237, 244, 250, 0.98)) !important;
    border: 1px dashed rgba(26, 57, 93, 0.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 16px 30px rgba(14, 32, 56, 0.05) !important;
}

.upload-box:hover,
.bernoulli-upload-box:hover {
    border-color: rgba(201, 168, 76, 0.44) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        0 22px 36px rgba(14, 32, 56, 0.08) !important;
}

.summary-card,
.stat-card,
.sidebar-stat,
.home-metric-card,
.home-ops-item,
.home-history-item,
.event-log-item,
.bernoulli-meta-item,
.bernoulli-rule-item,
.bernoulli-mini-card,
.bernoulli-log-stat,
.log-summary-item,
.item-imagem {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 251, 0.98)) !important;
    border: 1px solid rgba(26, 57, 92, 0.11) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 14px 26px rgba(14, 32, 56, 0.05) !important;
}

.summary-card:hover,
.stat-card:hover,
.home-metric-card:hover,
.home-ops-item:hover,
.home-history-item:hover,
.event-log-item:hover,
.item-imagem:hover,
.bernoulli-mini-card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 20px 34px rgba(14, 32, 56, 0.08) !important;
}

.summary-card strong,
.stat-card strong,
.sidebar-stat strong,
.home-metric-card strong,
.home-ops-item strong,
.home-history-copy strong,
.item-imagem-title {
    color: #193553 !important;
}

.table-wrapper:not(.validacao-table-wrapper) {
    overflow: hidden;
}

.validacao-table-wrapper {
    overflow-x: auto;
}

.table-wrapper table,
.validacao-table-wrapper table {
    background: rgba(252, 254, 255, 0.98);
}

.table-wrapper thead th,
.validacao-table-wrapper thead th {
    background: linear-gradient(180deg, rgba(228, 236, 245, 0.98), rgba(214, 225, 238, 0.98));
    color: #1d3d61;
    border-bottom: 1px solid rgba(25, 56, 92, 0.12);
}

.table-wrapper tbody tr:nth-child(even),
.validacao-table-wrapper tbody tr:nth-child(even) {
    background: rgba(242, 247, 251, 0.70);
}

.table-wrapper tbody tr:hover,
.validacao-table-wrapper tbody tr:hover {
    background: rgba(225, 235, 245, 0.58);
}

.home-hero,
.home-dashboard,
.bernoulli-layout,
.layout-correcao {
    gap: 24px !important;
}

.home-hero-main {
    padding: 30px 32px 26px !important;
    border-radius: 32px !important;
    background:
        radial-gradient(circle at top right, rgba(201, 168, 76, 0.16), transparent 24%),
        radial-gradient(circle at bottom left, rgba(25, 56, 92, 0.14), transparent 26%),
        linear-gradient(180deg, rgba(252, 254, 255, 0.99), rgba(234, 241, 248, 0.98)) !important;
}

.home-hero-main::before {
    inset: 26px auto 26px 0 !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, rgba(25, 56, 92, 0.92), rgba(25, 56, 92, 0.58)) !important;
    opacity: 0.88 !important;
}

.home-hero-main h1 {
    margin-top: 14px;
    max-width: 720px;
    font-size: 40px !important;
    line-height: 1.02 !important;
}

.home-hero-main p {
    max-width: 650px;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.7;
}

.home-hero-actions {
    margin-top: 20px !important;
    gap: 12px;
}

.home-hero-metrics {
    margin-top: 22px !important;
    gap: 14px;
}

.home-hero-panel {
    padding: 28px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.10), transparent 24%),
        radial-gradient(circle at bottom left, rgba(201, 168, 76, 0.12), transparent 28%),
        linear-gradient(180deg, #1d4675, #102c4b) !important;
    border: 1px solid rgba(16, 37, 65, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 42px rgba(10, 25, 45, 0.22) !important;
}

.home-hero-panel h2,
.home-hero-panel strong {
    color: #ffffff !important;
}

.home-hero-panel p,
.home-flow-item span {
    color: rgba(255, 255, 255, 0.80) !important;
}

.home-hero-panel .panel-kicker {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

.home-flow-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.07)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.upload-command-card,
.home-ops-card,
.home-history-card,
.home-event-panel {
    border-radius: 30px !important;
}

.page-correcao 

.page-correcao 

.corner-btn,
.icon-action-btn {
    color: #1b385a !important;
}

.corner-btn.ativo,
.icon-action-btn:disabled,
.btn-secondary:disabled,
.btn-light:disabled {
    opacity: 1;
}

.upload-dropzone-home {
    min-height: 182px !important;
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(247, 251, 254, 0.99), rgba(232, 240, 247, 0.98)) !important;
}

.viewer {
    background:
        radial-gradient(circle at top right, rgba(201, 168, 76, 0.07), transparent 20%),
        linear-gradient(180deg, rgba(252, 254, 255, 0.99), rgba(236, 243, 249, 0.98)) !important;
}

.app-modal-backdrop {
    background: rgba(7, 17, 36, 0.58);
    backdrop-filter: blur(8px);
}

.app-modal-dialog {
    border-radius: 28px !important;
}

@media (max-width: 900px) {
    .home-hero-main {
        padding: 28px 22px !important;
    }

    .home-hero-main h1 {
        font-size: 34px !important;
    }
}

.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

.btn-full {
    width: 100%;
    justify-content: center;
    border: none;
    outline: none;
}

.log-processamento {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fbff;
}

.log-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.log-topo strong {
    font-size: 14px;
}

.log-topo span {
    font-weight: 900;
    font-size: 18px;
}

.log-processamento .progress-bar {
    width: 100%;
    height: 14px;
    background: #e9edf5;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.log-processamento .progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.35s ease;
}

#log-mensagem {
    margin-top: 12px;
    font-weight: 700;
    color: var(--text);
}

#abrir-processamento {
    margin-top: 12px;
}