@charset "utf-8";

@media screen {

    :root {
        --glass-bg: rgba(255, 255, 255, 0.62);
        --glass-bg-forte: rgba(255, 255, 255, 0.88);
        --glass-bg-escuro: rgba(30, 36, 44, 0.80);
        --glass-borda: rgba(255, 255, 255, 0.65);
        --glass-borda-escura: rgba(255, 255, 255, 0.08);
        --glass-blur: 12px;
        --glass-sombra: 0 4px 24px rgba(31, 41, 55, 0.10);
        --glass-radius: 10px;
        --glass-texto: var(--cor-texto);
        --glass-foco-rgb: var(--cor-primaria-rgb);
        --btn-primary-rgb: var(--cor-primaria-rgb);
        --btn-success-rgb: 47, 158, 85;
        --btn-info-rgb: 43, 108, 176;
        --btn-warning-rgb: 217, 142, 31;
        --btn-danger-rgb: 209, 67, 67;
    }

    /* ---------- Fundo ---------- */

    :root {
        --glass-fundo:
            radial-gradient(circle at 10% 15%, rgba(209, 155, 61, 0.28) 0, transparent 45%),
            radial-gradient(circle at 90% 85%, rgba(76, 140, 110, 0.22) 0, transparent 45%),
            radial-gradient(circle at 85% 10%, rgba(99, 145, 200, 0.18) 0, transparent 40%),
            linear-gradient(135deg, #f7f1e8 0%, #eef3ee 50%, #eaf0f6 100%);
    }

    html {
        min-height: 100%;
        background: var(--glass-fundo);
        background-attachment: fixed;
    }

    body {
        background: transparent;
        color: var(--glass-texto);
    }

    /* ---------- Superfícies com blur ---------- */

    .navbar-default.navbar-fixed-top,
    .panel,
    .modal-content,
    .dropdown-menu,
    .popover {
        background-color: var(--glass-bg);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
        backdrop-filter: blur(var(--glass-blur)) saturate(140%);
        border: 1px solid var(--glass-borda);
        box-shadow: var(--glass-sombra);
    }

    /* Panel envolve modais: backdrop-filter o tornaria referência do modal e o prenderia atrás do backdrop. */
    .panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .navbar-default.navbar-fixed-top {
        background-color: rgba(var(--btn-primary-rgb), .88);
        background-image: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(255, 255, 255, .06));
        border-width: 0 0 1px 0;
        border-color: rgba(255, 255, 255, .18);
        border-radius: 0;
        box-shadow: 0 4px 18px rgba(var(--btn-primary-rgb), .25);
    }

    .panel {
        border-radius: var(--glass-radius);
    }

    .panel-body {
        background-color: rgba(255, 255, 255, 0.35);
    }

    .panel > .panel-heading {
        border-top-left-radius: calc(var(--glass-radius) - 1px);
        border-top-right-radius: calc(var(--glass-radius) - 1px);
    }

    .panel > .panel-footer {
        border-bottom-left-radius: calc(var(--glass-radius) - 1px);
        border-bottom-right-radius: calc(var(--glass-radius) - 1px);
    }

    .panel-default > .panel-heading {
        background-color: rgba(255, 255, 255, 0.55);
        border-bottom-color: rgba(31, 41, 55, 0.08);
        color: var(--glass-texto);
        font-weight: bold;
    }

    .panel-primary > .panel-heading,
    .panel-success > .panel-heading,
    .panel-info > .panel-heading,
    .panel-warning > .panel-heading,
    .panel-danger > .panel-heading {
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    }

    .panel-footer {
        background-color: rgba(255, 255, 255, 0.45);
        border-top-color: rgba(31, 41, 55, 0.08);
    }

    .modal-content {
        background-color: rgba(255, 255, 255, 0.82);
        border-radius: var(--glass-radius);
        box-shadow: 0 12px 40px rgba(31, 41, 55, 0.25);
    }

    .modal-header,
    .modal-footer {
        border-color: rgba(31, 41, 55, 0.08);
    }

    .modal-backdrop.in {
        opacity: 0.35;
    }

    .modal-backdrop {
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.90);
        border-radius: 8px;
    }

    /* ---------- Menu lateral ---------- */

    .nav-side-menu {
        background-color: var(--glass-bg-escuro);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
        backdrop-filter: blur(var(--glass-blur)) saturate(140%);
        border-right: 1px solid var(--glass-borda-escura);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
    }

    .nav-side-menu .brand {
        background-color: rgba(0, 0, 0, 0.18);
    }

    #barra_menu_lateral {
        background-color: transparent !important;
    }

    .nav-side-menu li {
        border-left-color: transparent;
        border-bottom-color: var(--glass-borda-escura);
    }

    .nav-side-menu ul .sub-menu li,
    .nav-side-menu li .sub-menu li {
        background-color: rgba(0, 0, 0, 0.22);
        border-bottom-color: var(--glass-borda-escura);
    }

    .nav-side-menu li:hover,
    .nav-side-menu ul .active,
    .nav-side-menu li .active {
        background-color: rgba(255, 255, 255, 0.10);
    }

    .nav-side-menu ul .sub-menu li:hover,
    .nav-side-menu li .sub-menu li:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .nav-side-menu li:hover {
        -webkit-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
    }

    /* ---------- Tabelas ---------- */

    .table,
    table.dataTable {
        background-color: var(--glass-bg-forte);
    }

    .panel > .table,
    .panel > .table-responsive > .table {
        background-color: rgba(255, 255, 255, 0.80);
    }

    .table > thead > tr > th {
        background-color: rgba(31, 41, 55, 0.04);
        border-bottom-color: rgba(31, 41, 55, 0.15);
    }

    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th {
        border-top-color: rgba(31, 41, 55, 0.08);
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: rgba(31, 41, 55, 0.025);
    }

    .table-hover > tbody > tr:hover {
        background-color: rgba(209, 155, 61, 0.10);
    }

    /* ---------- Formulários ---------- */

    .form-control,
    .input-group-addon,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,
    .bootstrap-select > .dropdown-toggle {
        background-color: var(--glass-bg-forte);
        border-color: rgba(31, 41, 55, 0.18);
    }

    .form-control:focus,
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default.select2-container--open .select2-selection--single {
        background-color: #fff;
        border-color: rgba(var(--glass-foco-rgb), .55);
        box-shadow: 0 0 0 3px rgba(var(--glass-foco-rgb), .15);
        -webkit-box-shadow: 0 0 0 3px rgba(var(--glass-foco-rgb), .15);
    }

    .form-control[disabled],
    .form-control[readonly] {
        background-color: rgba(238, 238, 238, 0.85);
    }

    .select2-dropdown,
    .tt-menu,
    .datepicker.dropdown-menu {
        background-color: rgba(255, 255, 255, 0.95);
        border-color: rgba(31, 41, 55, 0.15);
        box-shadow: var(--glass-sombra);
    }

    /* ---------- Botões, alertas, rótulos ---------- */

    .btn {
        -webkit-transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
        transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
        --btn-rgb: 255, 255, 255;
        --btn-alpha: .60;
        --btn-borda: rgba(31, 41, 55, .14);
        --btn-sombra: 31, 41, 55;
        --btn-sombra-alpha: .10;
        --btn-texto: var(--glass-texto);
    }

    .btn:not(.btn-link) {
        color: var(--btn-texto);
        background-color: rgba(var(--btn-rgb), var(--btn-alpha)) !important;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%);
        border: 1px solid var(--btn-borda) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px rgba(var(--btn-sombra), var(--btn-sombra-alpha));
        -webkit-backdrop-filter: blur(8px) saturate(160%);
        backdrop-filter: blur(8px) saturate(160%);
    }

    .btn-primary,
    .btn-success,
    .btn-info,
    .btn-pesagem,
    .btn-warning,
    .btn-danger {
        --btn-alpha: .78;
        --btn-borda: rgba(255, 255, 255, .55);
        --btn-sombra-alpha: .30;
        --btn-texto: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    }

    .btn-primary { --btn-rgb: var(--btn-primary-rgb); --btn-sombra: var(--btn-primary-rgb); }
    .btn-success { --btn-rgb: var(--btn-success-rgb); --btn-sombra: var(--btn-success-rgb); }
    .btn-info,
    .btn-pesagem { --btn-rgb: var(--btn-info-rgb); --btn-sombra: var(--btn-info-rgb); }
    .btn-warning { --btn-rgb: var(--btn-warning-rgb); --btn-sombra: var(--btn-warning-rgb); }
    .btn-danger { --btn-rgb: var(--btn-danger-rgb); --btn-sombra: var(--btn-danger-rgb); }

    .btn:not(.btn-link):not(:disabled):not(.disabled):hover,
    .btn:not(.btn-link):not(:disabled):not(.disabled):focus,
    .open > .dropdown-toggle.btn:not(.btn-link) {
        --btn-alpha: .85;
        color: var(--btn-texto);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(var(--btn-sombra), calc(var(--btn-sombra-alpha) + .10));
    }

    .btn.btn-default:not(:disabled):not(.disabled):hover,
    .btn.btn-default:not(:disabled):not(.disabled):focus,
    .open > .dropdown-toggle.btn.btn-default {
        --btn-alpha: .95;
        --btn-borda: rgba(31, 41, 55, .22);
    }

    .btn:not(.btn-link):not(:disabled):not(.disabled):active,
    .btn:not(.btn-link).active {
        transform: translateY(1px);
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, .15);
    }

    .btn.btn:disabled,
    .btn.btn.disabled,
    fieldset[disabled] .btn.btn {
        --btn-rgb: 107, 114, 128;
        --btn-alpha: .14;
        --btn-borda: rgba(107, 114, 128, .22);
        --btn-texto: #6b7280;
        opacity: 1;
        color: var(--btn-texto);
        text-shadow: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    }

    .btn-xs,
    .table .btn {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #botoes_menu .btn {
        --btn-alpha: 0;
        background-image: none;
        border-color: transparent !important;
        box-shadow: none;
        text-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #botoes_menu .btn:hover {
        --btn-rgb: 255, 255, 255;
        --btn-alpha: .12;
        color: #fff;
        box-shadow: none;
    }

    .alert {
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(31, 41, 55, 0.06);
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:focus,
    .nav-tabs > li.active > a:hover {
        background-color: var(--glass-bg-forte);
    }

    /* ---------- Login ---------- */

    .login-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .45) 100%);
    }

    /* ---------- Entrada da página ---------- */

    @keyframes glass-entrada {
        from {
            opacity: .6;
        }

        to {
            opacity: 0;
            visibility: hidden;
        }
    }

    @keyframes glass-subida {
        from {
            padding-top: 4px;
        }

        to {
            padding-top: 0;
        }
    }

    /* Sem transform/opacity: o container não pode virar referência dos modais que abrem no carregamento. */
    body > .container-fluid {
        animation: glass-subida .25s ease-out;
        animation-composition: add;
    }

    /* Fica abaixo da navbar (1000), do menu (1001) e dos modais (1040+), cobrindo só o conteúdo. */
    body > .container-fluid::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 999;
        background: var(--glass-fundo);
        pointer-events: none;
        animation: glass-entrada .25s ease-out forwards;
    }

    @media (prefers-reduced-motion: reduce) {
        body > .container-fluid {
            animation: none;
        }

        body > .container-fluid::before {
            display: none;
        }
    }

    /* ---------- Fallback sem backdrop-filter ---------- */

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .navbar-default.navbar-fixed-top {
            background-color: rgba(var(--btn-primary-rgb), .97);
        }

        .panel,
        .modal-content,
        .dropdown-menu,
        .popover,
        #loginbox .panel {
            background-color: rgba(255, 255, 255, 0.96);
        }

        .nav-side-menu {
            background-color: #2e353d;
        }

        .btn-primary,
        .btn-success,
        .btn-info,
        .btn-pesagem,
        .btn-warning,
        .btn-danger {
            --btn-alpha: .92;
        }
    }
}