:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#273449; --line:#334155;
  --txt:#e2e8f0; --muted:#94a3b8; --brand:#38bdf8; --brand2:#0ea5e9;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt);line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Layout dashboard ---- */
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0}
.brand{padding:18px;font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.who{padding:12px 18px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.who b{color:var(--txt);display:block;font-size:13px}
.sidebar nav{padding:10px;flex:1}
.sidebar nav a{display:block;color:var(--muted);padding:10px 12px;border-radius:8px;font-size:14px;margin-bottom:2px}
.sidebar nav a:hover{background:var(--panel2);color:var(--txt);text-decoration:none}
.sidebar nav a.active{background:var(--brand2);color:#fff;font-weight:600}
.sidebar .foot{padding:14px 18px;border-top:1px solid var(--line)}
.sidebar .foot a{font-size:13px;color:var(--muted)}
.content{flex:1;padding:24px 28px;overflow:auto}

/* ---- Head/topbar público ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--panel)}
.topbar .brand{border:none;padding:0}
.topbar .links a{margin-left:18px;font-size:14px}

/* ---- Componentes ---- */
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.head h1{font-size:22px}
.head .sub{color:var(--muted);font-size:13px;margin-top:4px}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h2{font-size:15px;margin-bottom:12px}
.kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-size:28px;font-weight:700;margin-top:6px}
.kpi .d{font-size:12px;margin-top:6px;color:var(--muted)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}

.badge{font-size:11px;padding:3px 9px;border-radius:99px;font-weight:600;display:inline-block}
.b-ativo,.b-aprovado,.b-disponivel{background:rgba(34,197,94,.15);color:#4ade80}
.b-pendente{background:rgba(245,158,11,.15);color:#fbbf24}
.b-suspenso,.b-recusado,.b-cancelado,.b-manutencao{background:rgba(239,68,68,.15);color:#f87171}
.b-ocupado,.b-confirmada,.b-em_estadia{background:rgba(59,130,246,.15);color:#60a5fa}
.b-sujo{background:rgba(245,158,11,.15);color:#fbbf24}
.b-limpeza{background:rgba(168,85,247,.15);color:#c084fc}

.btn{background:var(--brand2);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;display:inline-block}
.btn:hover{background:var(--brand);text-decoration:none}
.btn.sec{background:var(--panel2);border:1px solid var(--line);color:var(--txt)}
.btn.bad{background:var(--bad)}
.btn.ok{background:var(--ok)}
.btn.sm{padding:6px 11px;font-size:12px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;color:var(--muted)}
input,select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:14px;width:100%}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row .field{flex:1;min-width:140px}

.msg{padding:11px 13px;border-radius:8px;font-size:13px;margin-bottom:14px}
.msg.ok{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.msg.err{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.pill{font-size:11px;padding:3px 9px;border-radius:99px;background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.muted{color:var(--muted)}
.right{text-align:right}

/* ---- Público (auth/checkout) ---- */
.auth-wrap{max-width:440px;margin:48px auto;padding:0 16px}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
.auth-card h1{font-size:22px;margin-bottom:6px}
.auth-card .sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.center{text-align:center}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:10px 0}
.plan{border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;background:var(--panel2)}
.plan.sel{border-color:var(--brand);box-shadow:0 0 0 2px rgba(56,189,248,.3)}
.plan .pn{font-weight:700}
.plan .pp{font-size:20px;font-weight:700;margin:6px 0;color:var(--brand)}
.plan .pd{font-size:11px;color:var(--muted)}
.hero{max-width:880px;margin:60px auto;padding:0 24px;text-align:center}
.hero h1{font-size:38px;line-height:1.15;margin-bottom:14px}
.hero p{color:var(--muted);font-size:17px;max-width:600px;margin:0 auto 26px}

/* --- Cards de quartos/recursos (substitui a tabela em "estilo relatório") --- */
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.room-card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px}
.room-card .rc-nome{font-weight:700;font-size:16px}
.room-card .rc-meta{font-size:12px;color:var(--muted)}
.room-card form{margin:0}
.room-card .btn.sm{padding:8px 10px;font-size:12px;width:100%;text-align:center}
.room-card.st-disponivel{border-left-color:#22c55e}
.room-card.st-ocupado{border-left-color:#3b82f6}
.room-card.st-sujo{border-left-color:#f59e0b}
.room-card.st-limpeza{border-left-color:#a855f7}
.room-card.st-manutencao{border-left-color:#ef4444}

/* --- Lista em cards (reservas, tarifas, amenidades, equipe) --- */
.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.item-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:7px}
.item-card .ic-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.item-card .ic-nome{font-weight:700;font-size:15px}
.item-card .ic-row{font-size:12.5px;color:var(--muted)}
.item-card .ic-row b{color:var(--txt);font-weight:600}
.item-card .ic-actions{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.item-card .ic-actions form{margin:0}
.item-card.inativo{opacity:.55}
.item-card.st-confirmada{border-left:4px solid #3b82f6}
.item-card.st-em_estadia{border-left:4px solid #22c55e}
.item-card.st-finalizada{border-left:4px solid var(--muted)}
.item-card.st-cancelada{border-left:4px solid #ef4444}
.sec-tit{font-size:15px;font-weight:700;margin:6px 0 12px}

/* =====================================================================
   Fundo de turismo (desfocado + tom) + vidro/liquid glass
   ===================================================================== */
body{position:relative;background:#0d1a30}
body::before{content:'';position:fixed;inset:0;z-index:-2;
  background:url('/img/fundo-turismo.png') center/cover no-repeat;
  filter:blur(5px) saturate(1.15);transform:scale(1.06)}
body::after{content:'';position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(10,22,44,.70), rgba(9,19,36,.82))}

/* superfícies translúcidas (o pôr do sol aparece por trás) */
.sidebar,.topbar{background:rgba(18,28,48,.60);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-color:rgba(255,255,255,.08)}
.card,.item-card,.room-card,.auth-card{background:rgba(24,35,56,.60);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(5,15,30,.32)}
.auth-card{box-shadow:0 22px 55px rgba(4,12,28,.5)}

/* botões liquid glass */
.btn{background:linear-gradient(180deg, rgba(96,205,255,.32), rgba(14,165,233,.44));
  border:1px solid rgba(255,255,255,.30);color:#fff;text-shadow:0 1px 1px rgba(0,18,38,.28);
  -webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);
  box-shadow:0 6px 16px rgba(4,20,40,.28), inset 0 1px 0 rgba(255,255,255,.42)}
.btn:hover{background:linear-gradient(180deg, rgba(120,215,255,.44), rgba(30,175,240,.56));text-decoration:none}
.btn.sec{background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.22);color:var(--txt);text-shadow:none}
.btn.sec:hover{background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10))}
.btn.ok{background:linear-gradient(180deg, rgba(74,222,128,.42), rgba(34,197,94,.55));border-color:rgba(255,255,255,.30)}
.btn.bad{background:linear-gradient(180deg, rgba(248,113,113,.42), rgba(239,68,68,.55));border-color:rgba(255,255,255,.30)}

/* ===================== Responsivo (celular / tablet) ===================== */
.mobile-bar{display:none}
.nav-backdrop{display:none}
@media (max-width:820px){
  .layout{display:block}
  .mobile-bar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;
    padding:11px 14px;background:rgba(16,26,46,.82);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-bar .nav-burger{font-size:22px;line-height:1;background:none;border:none;color:var(--txt);cursor:pointer;padding:2px 8px}
  .mobile-bar .mb-brand{font-weight:700;display:flex;align-items:center;gap:8px;font-size:16px}
  .mobile-bar .mb-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);display:inline-block}
  .sidebar{position:fixed;top:0;left:0;height:100dvh;width:250px;z-index:40;
    transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
  body.nav-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.55)}
  body.nav-open .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .content{padding:16px 14px}
  .topbar{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .head{flex-wrap:wrap}
  .head h1{font-size:20px}
  .row{flex-wrap:wrap}
  .row .field{min-width:0;flex:1 1 100%}
  .grid[style*="repeat(5"]{grid-template-columns:1fr 1fr !important}  /* kanban de tarefas */
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .auth-wrap{margin:24px auto}
}
.tscroll{overflow-x:auto}

/* ---- assinatura (canvas) ---- */
.sig-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.sig-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#sigCanvas{background:#fff;border:1px solid var(--line);border-radius:8px;touch-action:none;width:100%;max-width:380px;display:block;cursor:crosshair}
.sig-actions{display:flex;gap:8px;align-items:center;margin-top:12px}