/* Sistema Rossi Geradores — identidade preto e dourado.
   Pensado primeiro para o celular (uso no pátio, com uma mão) e escalado para TV. */

:root {
    --preto: #0d0d0d;
    --dourado: #ffd700;
    --dourado-escuro: #b8860b;
    --texto: #1a1a1a;
    --texto-suave: #5f5f5f;
    --fundo: #f4f4f1;
    --cartao: #ffffff;
    --borda: #dcdcd6;
    --verde: #1f7a3a;
    --verde-fundo: #e3f3e7;
    --vermelho: #b3261e;
    --vermelho-fundo: #fbe7e5;
    --ambar: #8a6100;
    --ambar-fundo: #fff4d1;
    --raio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    background: var(--fundo);
    color: var(--texto);
}

a { color: inherit; }

/* ---------- Cabeçalho ---------- */
.topo {
    background: #fff;
    color: var(--texto);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 4px solid var(--dourado);
    box-shadow: 0 2px 8px rgba(13, 13, 13, .08);
}
.topo .logo img { height: 44px; display: block; }
.menu-mobile { margin-left: auto; position: relative; }
.menu-mobile summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-weight: 600;
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary span { margin-left: 4px; }
.menu-mobile[open] summary, .menu-mobile summary:hover { background: #f5f0d8; }
.topo nav {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 2px;
    min-width: 190px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(13, 13, 13, .15);
}
@media (min-width: 701px) {
    .menu-mobile summary { display: none; }
    .menu-mobile:not([open]) > nav,
    .menu-mobile[open] > nav {
        position: static;
        display: flex;
        gap: 4px;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
.topo nav a, .topo nav button {
    color: var(--texto);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.topo nav a:hover, .topo nav button:hover { background: #f5f0d8; }
.topo nav a.ativo { color: #6b5000; background: #fff4c2; }
.topo nav form { margin: 0; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }

h1 { font-size: 24px; margin: 4px 0 16px; }
h2 { font-size: 18px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 3px solid var(--dourado); }

@media (max-width: 600px) {
    .topo { padding: 8px 12px; }
    .topo nav a, .topo nav button { padding: 8px 10px; }
    h1 { font-size: 21px; }
    .col-kva { display: none; }
}

/* ---------- Mensagens e alertas ---------- */
.mensagens { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.mensagens li, .alerta {
    padding: 12px 14px;
    border-radius: var(--raio);
    border-left: 5px solid;
    background: var(--cartao);
}
.mensagens .success { border-color: var(--verde); background: var(--verde-fundo); }
.mensagens .error, .alerta.erro { border-color: var(--vermelho); background: var(--vermelho-fundo); }
.mensagens .warning, .alerta.aviso { border-color: var(--dourado-escuro); background: var(--ambar-fundo); }
.mensagens .info { border-color: #555; }
.alertas { display: grid; gap: 8px; margin-bottom: 16px; }

/* ---------- Cartões e grade ---------- */
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* No painel as tabelas precisam de espaço: 2 colunas no computador, 3 na TV. */
.grade.painel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.grade > * { min-width: 0; }
.cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px;
}
.cartao.largo { grid-column: 1 / -1; }

.numeros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 16px; }
.numero {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 12px 14px;
}
.numero .valor { font-size: 30px; font-weight: 700; line-height: 1.1; }
.numero .rotulo { color: var(--texto-suave); font-size: 14px; }
.numero.disponivel .valor { color: var(--verde); }
.numero.locado .valor { color: var(--vermelho); }
.numero.manutencao .valor { color: var(--ambar); }

/* ---------- Tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
.tabela-cards { overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vazio { color: var(--texto-suave); font-style: italic; }
div.status-acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.suave { color: var(--texto-suave); font-size: 14px; }

@media (max-width: 700px) {
    .tabela-cards table,
    .tabela-cards tbody,
    .tabela-cards tr,
    .tabela-cards td { display: block; }
    .tabela-cards thead { display: none; }
    .tabela-cards tbody { display: grid; gap: 12px; }
    .tabela-cards tr {
        position: relative;
        min-width: 0;
        padding: 12px;
        background: var(--cartao);
        border: 1px solid var(--borda);
        border-radius: var(--raio);
        cursor: pointer;
    }
    .tabela-cards tr:hover { border-color: var(--dourado-escuro); }
    .tabela-cards td {
        display: grid;
        grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
        gap: 8px;
        min-width: 0;
        padding: 7px 0;
        border-bottom: 1px solid #ecece6;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    .tabela-cards td:last-child { border-bottom: 0; }
    .tabela-cards td::before {
        content: attr(data-label);
        color: var(--texto-suave);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .tabela-cards td:first-child::before { content: ''; }
    .tabela-cards td.nao-imprimir { display: block; padding-top: 10px; }
    .tabela-cards td.nao-imprimir::before { display: none; }
    .tabela-cards td[colspan] { display: block; }
    .tabela-cards td[colspan]::before { display: none; }
    .tabela-cards .acoes-tabela { justify-content: flex-start !important; }
}

/* ---------- Status ---------- */
.status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.status.disponivel { background: var(--verde-fundo); color: var(--verde); }
.status.locado { background: var(--vermelho-fundo); color: var(--vermelho); }
.status.manutencao { background: var(--ambar-fundo); color: var(--ambar); }
.status.ativo { background: var(--verde-fundo); color: var(--verde); }
.status.aguardando_retirada { background: var(--ambar-fundo); color: var(--ambar); }
.status.finalizado { background: #ececec; color: #555; }
.status.vencido { background: var(--vermelho); color: #fff; }

/* ---------- Botões ---------- */
.botao, button.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 2px solid var(--preto);
    background: var(--cartao);
    color: var(--preto);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.botao.principal { background: var(--dourado); border-color: var(--dourado); }
.botao.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.botao.pequeno { min-height: 36px; padding: 6px 12px; font-size: 14px; white-space: nowrap; }
.botao:hover { filter: brightness(.95); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
form.inline { display: inline; margin: 0; }

/* ---------- Formulários ---------- */
.formulario { max-width: 720px; }
.campo { margin-bottom: 16px; }
.campo label, .campo > .rotulo { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input[type=text], .campo input[type=date], .campo input[type=datetime-local], .campo input[type=number],
.campo input[type=password], .campo input[type=email], .campo select, .campo textarea {
    width: 100%;
    padding: 12px;
    font: inherit;
    font-size: 17px; /* evita o zoom automático do iPhone */
    line-height: 1.45;
    border: 1px solid #b9b9b1;
    border-radius: 8px;
    background: #fff;
}
.campo input[type=datetime-local] { min-height: 49px; color: var(--texto); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 3px solid rgba(184, 134, 11, .3);
    outline-offset: 1px;
    border-color: var(--dourado-escuro);
}
.campo .ajuda { font-size: 14px; color: var(--texto-suave); margin-top: 4px; }
.campo .erros, .erros-gerais { color: var(--vermelho); font-size: 14px; margin: 4px 0 0; padding-left: 18px; }
.erros-gerais { background: var(--vermelho-fundo); padding: 12px 12px 12px 30px; border-radius: 8px; margin-bottom: 16px; }
.dupla { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* Listas de marcação (geradores, caixas): alvo grande para o dedo */
/* O widget do Django gera <div><div><label>…</label></div>…</div>: a grade vai no div interno. */
.marcacoes > div { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.marcacoes div div { margin: 0; }
.marcacoes label {
    position: relative;
    display: flex; gap: 10px; align-items: center;
    padding: 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff;
    font-weight: 400; cursor: pointer; margin: 0;
}
.marcacoes input { width: 22px; height: 22px; accent-color: var(--preto); }
.marcacoes label.disponivel { border-color: #8ac79a; background: #f3fbf4; }
.marcacoes label:has(input:checked) { border-color: var(--preto); background: #fffbe0; }
.marcacoes label.indisponivel {
    border: 2px solid var(--vermelho);
    background: var(--vermelho-fundo);
    color: #7d1712;
    cursor: not-allowed;
}
.marcacoes label.indisponivel input { accent-color: var(--vermelho); }
.marcacoes label.indisponivel[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(320px, calc(100vw - 48px));
    padding: 9px 11px;
    border: 1px solid #7d1712;
    border-radius: 6px;
    background: #35100e;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
    box-shadow: 0 4px 12px rgba(13, 13, 13, .2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
}
.marcacoes label.indisponivel:hover::after,
.marcacoes label.indisponivel:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}
.escolha-radio > div { display: flex; gap: 8px; flex-wrap: wrap; }
.escolha-radio label { font-weight: 400; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.escolha-radio label:has(input:checked) { border-color: var(--preto); background: #fffbe0; }
.cabos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.cabos .campo { margin: 0; }

fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 16px 16px; margin: 0 0 16px; background: var(--cartao); min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }

/* ---------- Diesel ---------- */
.diesel-total { font-size: 40px; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }
.medidor { height: 12px; background: #e8e8e2; border-radius: 6px; overflow: hidden; margin: 6px 0 2px; }
.medidor span { display: block; height: 100%; background: var(--dourado-escuro); }
.medidor.baixo span { background: var(--vermelho); }
.tanque { margin-top: 12px; }

/* ---------- Painel: aviso de dado velho ---------- */
.atualizacao { text-align: center; color: var(--texto-suave); font-size: 14px; margin-top: 20px; }
.aviso-desatualizado {
    display: none;
    position: sticky; top: 0; z-index: 10;
    background: var(--vermelho); color: #fff; font-weight: 700;
    text-align: center; padding: 12px 16px; font-size: 18px;
}
body.desatualizado .aviso-desatualizado { display: block; }
body.desatualizado main { opacity: .55; }

/* ---------- Login ---------- */
.tela-login {
    background: linear-gradient(135deg, #fffdf6 0%, #f3f1ea 45%, #ece5cf 100%);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 16px;
}
.caixa-login {
    background: #fff;
    padding: 28px;
    border-radius: 14px;
    width: 100%;
    max-width: 380px;
    border: 1px solid #e5d9a8;
    box-shadow: 0 10px 28px rgba(18, 18, 18, .08);
}
.caixa-login .logo {
    background: #fff;
    border: 2px solid rgba(255, 215, 0, .7);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02);
}
.caixa-login .logo img { height: 56px; }
.caixa-login .botao { width: 100%; }

/* ---------- Modo TV: sem controles, letras grandes para leitura à distância ---------- */
body.tv main { max-width: none; padding: 20px 28px; }
body.tv .topo { justify-content: space-between; padding: 12px 28px; }
body.tv .topo .logo img { height: 64px; }
body.tv .relogio { color: var(--dourado); font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.tv .grade.painel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); }
@media (min-width: 1280px) {
    body.tv { font-size: 22px; }
    body.tv h2 { font-size: 30px; }
    body.tv th { font-size: 17px; }
    body.tv .status { font-size: 20px; padding: 4px 14px; }
    body.tv .numero .valor { font-size: 56px; }
    body.tv .numero .rotulo { font-size: 20px; }
    body.tv .diesel-total { font-size: 64px; }
    body.tv .alerta { font-size: 24px; }
    body.tv .atualizacao { font-size: 20px; }
}

/* ---------- Impressão (romaneio) ---------- */
@media print {
    .topo, .nao-imprimir, .mensagens { display: none !important; }
    body { background: #fff; font-size: 12pt; }
    main { padding: 0; max-width: none; }
    .cartao { border: 1px solid #999; break-inside: avoid; }
}

/* ---------- Utilitários de Listagens e Ações ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}
.filtros form { margin: 0; }
.acoes-tabela {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: #e6e6e2;
    color: var(--texto);
}
.badge.caixa { background: #e0ebf5; color: #154c79; }
.badge.disjuntor { background: #fdf0cd; color: #7a5400; }
.badge.destaque { background: var(--verde-fundo); color: var(--verde); }
.badge.alerta { background: var(--vermelho-fundo); color: var(--vermelho); }

.progresso-cabo {
    display: inline-block;
    width: 60px;
    height: 8px;
    background: #e0e0db;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 6px;
}
.progresso-cabo span {
    display: block;
    height: 100%;
    background: var(--verde);
}
.progresso-cabo.esgotado span {
    background: var(--vermelho);
}