*{box-sizing:border-box}
:root{--bg:#f3f8fb;--card:#fff;--border:#e3eef5;--text:#0f172a;--muted:#697a8d;--primary:#23a6d5;--primary2:#8cd0e6;--accent:#42d392}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;background:linear-gradient(180deg,var(--bg),#fff 60%);color:var(--text)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:rgba(255,255,255,.85);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--primary)}
nav a{margin-left:12px;text-decoration:none;color:var(--text);padding:8px 12px;border-radius:10px}
nav a:hover{background:var(--primary2);color:#052f49}.logout{color:#b91c1c}.client{color:#065f46}
.container{max-width:1180px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px rgba(35,166,213,.08);padding:16px;margin-bottom:16px}
h1{font-size:22px;margin:0 0 12px}h2{font-size:18px;margin:0 0 10px}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
th,td{padding:10px 12px;border-bottom:1px solid #eef4f9;text-align:left}
th{background:#f0faff;font-weight:700;color:#063b53}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none;border:1px solid var(--primary);background:var(--primary);color:#fff;font-weight:600}
.btn:hover{filter:brightness(1.05)}.btn-outline{background:#fff;color:var(--primary);border-color:var(--primary)}.btn-green{background:var(--accent);border-color:var(--accent);color:#053423}
.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stat{padding:16px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,var(--primary2))}
.progress{height:12px;background:#e8f7ff;border-radius:8px;overflow:hidden}
.progress>div{height:12px;background:linear-gradient(90deg,var(--accent),var(--primary));width:0%;transition:width .3s ease}
form .row{display:flex;flex-wrap:wrap;gap:12px}
form .row>div{flex:1;min-width:220px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff}
label{display:block;font-size:12px;color:#335266;margin-bottom:6px}
.muted{color:var(--muted);font-size:12px}.kpi{font-size:28px;font-weight:800;color:#052f49}.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#e6fff4;color:#065f46;border:1px solid #b4f2d5}
.login{max-width:420px;margin:64px auto}

/* ===== Tabela responsiva básica (scroll em telas estreitas) ===== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tabela base (desktop) */
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tbl thead th {
    text-align: left;
    background: #f5f5f7;
    color: #111827;
    font-weight: 600;
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.tbl tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.tbl tbody tr:hover {
    background: #fafafa;
}

.tbl .row-empty td {
    text-align: center;
    color: #6b7280;
}

/* Botões mais amigáveis ao toque */
.btn-sm-touch {
    padding: 10px 14px;
    line-height: 1.1;
    border-radius: 10px;
}

.btn-danger-soft {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.btn-danger-soft:hover {
    background: #fecaca;
}

/* Card padrão */
.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.card h1 {
    font-size: 1.25rem;
    margin: 0 0 10px 0;
}

/* ===== Layout “cartões” no mobile (sem perder a tabela no desktop) ===== */
@media (max-width: 640px) {
    .card {
        padding: 12px;
        border-radius: 12px;
    }

    .tbl thead {
        display: none;
        /* some o cabeçalho no mobile */
    }

    .tbl,
    .tbl tbody,
    .tbl tr,
    .tbl td {
        display: block;
        width: 100%;
    }

    .tbl tr {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 8px 10px;
    }

    .tbl tbody td {
        border: none;
        padding: 8px 6px;
    }

    /* Cada célula vira uma linha com label + valor */
    .tbl tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8rem;
        color: #6b7280;
        margin-bottom: 4px;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Ações como último item com respiro */
    .tbl tbody td[data-label="Ações"] {
        margin-top: 6px;
    }

    /* Toques maiores em botões e separação do botão Sair */
    .btn,
    .btn.btn-outline,
    .btn-sm-touch {
        width: 100%;
        text-align: center;
    }

    .logout-wrap {
        text-align: center !important;
    }
}

/* ===== Pequenos refinamentos para tablets ===== */
@media (min-width: 641px) and (max-width: 900px) {

    .tbl thead th,
    .tbl tbody td {
        padding: 10px 8px;
    }
}