:root {
    --cor-escura: #333;
    --cor-destaque: #f39c12;
    --cor-verde: #4CAF50;
    --cor-vermelho: #f44336;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}

.app-navbar {
    background-color: var(--cor-escura);
    border-bottom: 3px solid var(--cor-destaque);
}

.app-navbar .navbar-brand {
    color: var(--cor-destaque) !important;
    font-size: 24px;
    font-weight: bold;
}

.app-navbar .nav-link { color: #fff !important; }
.app-navbar .nav-link:hover { color: var(--cor-destaque) !important; }

.app-container {
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.app-footer {
    background-color: var(--cor-escura);
    color: var(--cor-destaque);
    padding: 16px;
    text-align: center;
}

h1.page-title {
    color: var(--cor-escura);
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.table th, .table td {
    text-align: center;
    vertical-align: middle;
}

.acao-icone { width: 22px; height: 22px; }

/* --- Grade de máquinas --- */
.maquinas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.card-maquina {
    width: 300px;
    position: relative;
    text-align: center;
}

/* A imagem do tablet dimensiona o cartão (sem depender de aspect-ratio). */
.card-maquina .card-fundo {
    display: block;
    width: 100%;
    height: auto;
}

/* "Tela" do tablet: onde as informações da máquina são exibidas. */
.card-maquina .maquina-tela {
    position: absolute;
    left: 10%;
    right: 9%;
    top: 10%;
    bottom: 13%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 6px 4px;
    font-size: 20px;
    line-height: 1.3;
    color: #1a1a1a;
}
.card-maquina .maquina-tela h5 { margin: 2px 0 6px; font-size: 25px; }
.card-maquina .maquina-tela .acoes { margin-top: auto; padding-top: 8px; }
.card-maquina .maquina-tela .acoes .btn { margin: 2px; padding: 2px 8px; font-size: 20px; }
.card-maquina .maquina-tela form { display: inline; }
.valor-positivo { color: #0000ff; font-weight: bold; }
.valor-negativo { color: #ff0000; font-weight: bold; }
.badge-adulterada {
    background: var(--cor-vermelho);
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 11px;
}

/* --- Login --- */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}
.login-card {
    max-width: 380px;
    width: 100%;
    padding: 28px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.login-card img { display: block; margin: 0 auto 16px; max-width: 120px; }