/* =========================================================
   BRSYS APP V2
   Clean Premium + Dark Mode
   Base global visual do produto
========================================================= */

:root{
  color-scheme: light;

  /* Core */
  --bg:#f4f8fb;
  --bg-2:#eef5fa;
  --bg-3:#e7f0f7;
  --bg-4:#f8fbfd;

  --surface:#ffffff;
  --surface-2:#f8fbfd;
  --surface-3:#eef5fa;
  --surface-4:#e4eef7;
  --surface-5:#f2f7fb;
  --surface-glass:rgba(255,255,255,.86);

  --border:#d8e5ef;
  --border-strong:#bdd2e4;
  --border-soft:#e8f0f7;
  --border-faint:#f0f5f9;

  --text:#102033;
  --text-soft:#29415f;
  --muted:#607c9c;
  --muted-soft:#8298b3;
  --muted-faint:#9fb0c3;

  /* Brand */
  --primary:#1976b8;
  --primary-strong:#0f5f98;
  --primary-soft:#dff0fb;
  --primary-contrast:#ffffff;

  --accent:#19c6b7;
  --accent-strong:#0fa99c;
  --accent-soft:#dff9f6;
  --accent-contrast:#062f38;

  --secondary:#e7f0f8;
  --secondary-strong:#cfe0ef;

  /* Semantic */
  --success:#22a06b;
  --success-soft:#e8f7ef;
  --warning:#c78b1f;
  --warning-soft:#fff4df;
  --danger:#d84858;
  --danger-soft:#fdecef;
  --info:#1976b8;
  --info-soft:#e8f3fb;
  --featured:#6d5fe8;
  --featured-soft:#f0eeff;

  /* Components */
  --pill:#eef5fa;
  --pill-strong:#e2f8f5;

  --shadow-xl:0 34px 90px rgba(16,32,51,.13);
  --shadow-lg:0 24px 60px rgba(16,32,51,.11);
  --shadow-md:0 16px 38px rgba(16,32,51,.08);
  --shadow-sm:0 8px 22px rgba(16,32,51,.06);
  --shadow-xs:0 4px 12px rgba(16,32,51,.05);

  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --radius-xs:12px;

  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:18px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;

  --container-max:1280px;
  --content-max:1440px;
  --sidebar-width:240px;

  --kanban-col-width:238px;
  --kanban-gap:14px;

  --map-grid-room-width:280px;
  --map-grid-day-width:180px;
  --map-cell-radius:20px;
  --map-chip-radius:999px;
  --map-cell-shadow:0 10px 24px rgba(16,32,51,.06);
  --map-cell-shadow-hover:0 14px 30px rgba(16,32,51,.10);

  --map-free-bg:#eaf4ff;
  --map-free-bg-strong:#dcecff;
  --map-free-border:#c4daf3;
  --map-free-text:#245987;

  --map-checkin-bg:#e1f4ff;
  --map-checkin-bg-strong:#cdeaff;
  --map-checkin-border:#a9d5f5;
  --map-checkin-text:#135f94;

  --map-stay-bg:#e6f8ee;
  --map-stay-bg-strong:#d4f1df;
  --map-stay-border:#b5e4c8;
  --map-stay-text:#1d704a;

  --map-checkout-bg:#fff2dd;
  --map-checkout-bg-strong:#ffe8c5;
  --map-checkout-border:#ffd39a;
  --map-checkout-text:#865407;

  --map-cleaning-bg:#fff9dd;
  --map-cleaning-bg-strong:#fff0b8;
  --map-cleaning-border:#efdf8d;
  --map-cleaning-text:#746200;

  --map-maintenance-bg:#ffe9e9;
  --map-maintenance-bg-strong:#ffd8d8;
  --map-maintenance-border:#efb3b3;
  --map-maintenance-text:#8c3030;

  --map-blocked-bg:#f9e0e5;
  --map-blocked-bg-strong:#f3cfd8;
  --map-blocked-border:#e8aebb;
  --map-blocked-text:#7b2433;

  --map-inactive-bg:#f2f4f7;
  --map-inactive-bg-strong:#e7ecf1;
  --map-inactive-border:#d7dee7;
  --map-inactive-text:#606b78;
}

/* =========================================================
   DARK THEME
========================================================= */

html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark{
  color-scheme: dark;

  --bg:#07111f;
  --bg-2:#091827;
  --bg-3:#0c2033;
  --bg-4:#0e263c;

  --surface:#0d1d2f;
  --surface-2:#10243a;
  --surface-3:#132a42;
  --surface-4:#18334f;
  --surface-5:#10263c;
  --surface-glass:rgba(13,29,47,.88);

  --border:#1f3b58;
  --border-strong:#2e587c;
  --border-soft:#17314c;
  --border-faint:#10283f;

  --text:#f3f8fc;
  --text-soft:#c9d9e8;
  --muted:#8fa9c4;
  --muted-soft:#7892ad;
  --muted-faint:#617d9b;

  --primary:#4db8ff;
  --primary-strong:#7ecbff;
  --primary-soft:#102b43;
  --primary-contrast:#06111f;

  --accent:#28e0cd;
  --accent-strong:#16c8b7;
  --accent-soft:#0d3f3e;
  --accent-contrast:#042226;

  --secondary:#12283d;
  --secondary-strong:#1e405f;

  --success:#3ddc91;
  --success-soft:#103a2b;
  --warning:#f2b84b;
  --warning-soft:#3a2b10;
  --danger:#ff6474;
  --danger-soft:#3b1720;
  --info:#4db8ff;
  --info-soft:#102b43;
  --featured:#9b8cff;
  --featured-soft:#241f4a;

  --pill:#132a42;
  --pill-strong:#0e3a3a;

  --shadow-xl:0 34px 90px rgba(0,0,0,.36);
  --shadow-lg:0 24px 60px rgba(0,0,0,.30);
  --shadow-md:0 16px 38px rgba(0,0,0,.24);
  --shadow-sm:0 8px 22px rgba(0,0,0,.20);
  --shadow-xs:0 4px 12px rgba(0,0,0,.16);
}

/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
  min-width:0;
}

html,
body{
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(25,198,183,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(25,118,184,.10), transparent 30%),
    linear-gradient(180deg, var(--bg-4) 0%, var(--bg) 42%, var(--bg-2) 100%);
  color:var(--text);
  font-family:Inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  appearance:none;
  border:none;
  background:none;
}

img{
  max-width:100%;
  display:block;
}

h1,
h2,
h3,
h4,
p{
  margin:0;
}

h1{
  font-size:42px;
  line-height:1.02;
  letter-spacing:-.045em;
  color:var(--text);
}

h2{
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.035em;
  color:var(--text);
}

h3{
  font-size:20px;
  line-height:1.18;
  letter-spacing:-.025em;
  color:var(--text);
}

h4{
  font-size:16px;
  line-height:1.25;
  color:var(--text);
}

ul{
  margin:0;
  padding:0;
  list-style:none;
}

/* =========================================================
   APP LAYOUT
========================================================= */

.app-layout{
  display:flex;
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
}

.main-shell{
  min-height:100vh;
  width:100%;
  min-width:0;
  max-width:100%;
}

.page-shell{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:24px 24px 34px;
  min-width:0;
}

.app-shell{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  min-width:0;
}

.page-content{
  display:grid;
  gap:24px;
  min-width:0;
  width:100%;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,12,24,.48);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
  z-index:79;
}

.sidebar-overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}

.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:var(--sidebar-width);
  height:100vh;
  padding:16px 14px 14px;
  background:linear-gradient(180deg, var(--surface-glass), var(--surface-2));
  border-right:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  z-index:90;
  overflow-y:auto;
  overflow-x:hidden;
  transform:translateX(-104%);
  transition:transform .28s ease;
  flex-shrink:0;
}

.sidebar.is-open{
  transform:translateX(0);
}

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  padding:4px 4px 14px;
  border-bottom:1px solid var(--border-soft);
}

.sidebar-brand,
.topbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.sidebar-brand-badge,
.user-avatar{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--primary));
  color:var(--primary-contrast);
  font-size:14px;
  font-weight:900;
  box-shadow:var(--shadow-xs);
  flex-shrink:0;
}

.sidebar-brand-copy,
.sidebar-brand-text,
.topbar-brand-text{
  display:grid;
  gap:2px;
  min-width:0;
}

.sidebar-brand-copy strong,
.sidebar-brand-title{
  font-size:16px;
  font-weight:900;
  color:var(--text);
  line-height:1.1;
}

.sidebar-brand-copy small,
.sidebar-brand-subtitle{
  font-size:11px;
  color:var(--muted);
  line-height:1.22;
}

.sidebar-close,
.sidebar-toggle{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  color:var(--text-soft);
  background:var(--surface);
  cursor:pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.sidebar-close:hover,
.sidebar-toggle:hover{
  background:var(--surface-3);
  border-color:var(--border-strong);
  color:var(--text);
  transform:translateY(-1px);
}

.sidebar-nav{
  display:grid;
  gap:16px;
  padding:4px 2px 20px;
}

.sidebar-group{
  display:grid;
  gap:8px;
}

.sidebar-group-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted-soft);
  font-weight:900;
  padding:0 8px;
}

.sidebar-links{
  display:grid;
  gap:5px;
}

.sidebar-link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:11px 12px;
  border-radius:16px;
  color:var(--text-soft);
  border:1px solid transparent;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.sidebar-link:hover{
  background:var(--surface-2);
  border-color:var(--border-soft);
  color:var(--text);
  transform:translateY(-1px);
}

.sidebar-link.is-active{
  background:linear-gradient(180deg, var(--accent-soft), rgba(25,198,183,.10));
  border-color:rgba(25,198,183,.28);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.sidebar-link strong{
  font-size:15px;
  line-height:1.24;
}

.sidebar-link small{
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}

.sidebar-footer{
  margin-top:auto;
  padding-top:8px;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.topbar-left{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex:1;
  min-width:280px;
}

.topbar-brand h1{
  font-size:18px;
  line-height:1.18;
  letter-spacing:-.02em;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.hotel-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow-xs);
  max-width:100%;
}

.hotel-pill-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.hotel-pill-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted);
  font-weight:900;
}

.hotel-pill strong{
  font-size:15px;
  color:var(--text);
  line-height:1.2;
}

.hotel-pill span{
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}

/* =========================================================
   CARDS / BASE
========================================================= */

.card,
.summary-card,
.login-card,
.error-card,
.room-card,
.task-card,
.reservation-card,
.kpi-card{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
  min-width:0;
}

.card,
.summary-card,
.room-card,
.task-card,
.reservation-card,
.kpi-card{
  padding:22px;
}

.login-card,
.error-card{
  padding:28px;
}

.summary-card h2,
.card h2{
  margin-bottom:8px;
}

.summary-card p,
.card p{
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.section-block{
  display:grid;
  gap:18px;
  min-width:0;
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:4px;
  flex-wrap:wrap;
}

.section-title{
  margin-bottom:18px;
  font-size:24px;
}

.eyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.095em;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:900;
}

.muted-text{
  color:var(--muted);
  line-height:1.6;
}

.link-card{
  display:block;
  color:inherit;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.link-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-md);
}

/* =========================================================
   HERO
========================================================= */

.page-hero-card{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:20px;
  flex-wrap:wrap;
  background:
    radial-gradient(circle at top right, rgba(25,198,183,.12), transparent 30%),
    radial-gradient(circle at top left, rgba(25,118,184,.10), transparent 30%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border-color:var(--border);
}

.page-hero-copy{
  flex:1;
  min-width:280px;
}

.page-hero-text{
  margin-top:8px;
  font-size:17px;
  color:var(--muted);
  max-width:760px;
  line-height:1.65;
}

.inline-user-card{
  min-width:240px;
  max-width:290px;
  padding:16px 18px;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color:var(--border);
}

.user-meta{
  display:grid;
  gap:4px;
  min-width:0;
}

.user-name{
  font-weight:800;
  color:var(--text);
}

.user-email{
  font-size:13px;
  color:var(--muted);
  word-break:break-word;
}

/* =========================================================
   DASHBOARD / GRIDS
========================================================= */

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  min-width:0;
}

.dashboard-grid-2{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

.dashboard-grid-3{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.dashboard-grid-4{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.dashboard-stat-card{
  position:relative;
  overflow:hidden;
}

.dashboard-stat-card::before,
.kpi-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--primary));
  opacity:.95;
}

.dashboard-mini-card{
  display:grid;
  gap:8px;
}

.dashboard-section-split{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.95fr);
  gap:18px;
  min-width:0;
}

/* =========================================================
   KPI
========================================================= */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-bottom:28px;
}

.kpi-card{
  position:relative;
  overflow:hidden;
}

.kpi-label{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted-soft);
  margin-bottom:10px;
  font-weight:900;
}

.kpi-value{
  font-size:34px;
  line-height:1;
  font-weight:900;
  color:var(--text);
}

/* =========================================================
   BOTÕES
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 20px;
  min-height:48px;
  border:1px solid transparent;
  border-radius:16px;
  background:linear-gradient(135deg, var(--accent), var(--primary));
  color:var(--primary-contrast);
  font-weight:800;
  cursor:pointer;
  transition:
    transform .2s ease,
    opacity .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
  box-shadow:0 14px 28px rgba(25,198,183,.20);
  white-space:nowrap;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(25,198,183,.24);
}

.btn:disabled{
  opacity:.52;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.btn-secondary{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border-strong);
  box-shadow:none;
}

.btn-secondary:hover{
  background:var(--surface-3);
  border-color:var(--border-strong);
  box-shadow:none;
}

.btn-ghost{
  background:transparent;
  color:var(--text-soft);
  border:1px dashed var(--border-strong);
  box-shadow:none;
}

.btn-ghost:hover{
  background:var(--surface-3);
  border-style:solid;
}

.btn-sm{
  min-height:40px;
  padding:9px 13px;
  font-size:14px;
  border-radius:14px;
}

/* =========================================================
   FORMS
========================================================= */

.field{
  margin-bottom:18px;
  min-width:0;
}

.field label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:800;
  color:var(--text-soft);
}

.field input,
.field select,
select,
input[type="date"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  color:var(--text);
  font-size:15px;
  outline:none;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.field input:focus,
.field select:focus,
select:focus,
input:focus,
textarea:focus{
  border-color:var(--primary);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(25,118,184,.12);
}

textarea{
  resize:vertical;
  min-height:110px;
}

::placeholder{
  color:var(--muted-soft);
}

.grid-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  min-width:0;
}

/* =========================================================
   BADGES / STATUS
========================================================= */

.room-type,
.badge,
.status,
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--pill);
  border:1px solid var(--border);
  color:var(--text-soft);
  font-size:13px;
  font-weight:800;
}

.room-type{
  background:var(--pill-strong);
  color:var(--text);
  border-color:rgba(25,198,183,.24);
}

.badge.is-active,
.tag-payment.is-paid{
  background:var(--success-soft);
  color:var(--success);
  border-color:rgba(34,160,107,.24);
}

.badge.is-inactive{
  background:var(--danger-soft);
  color:var(--danger);
  border-color:rgba(216,72,88,.24);
}

.badge.is-available,
.tag-stage{
  background:var(--accent-soft);
  color:var(--accent-strong);
  border-color:rgba(25,198,183,.24);
}

.badge.is-featured{
  background:var(--featured-soft);
  color:var(--featured);
  border-color:rgba(109,95,232,.24);
}

.badge.is-order,
.tag-source{
  background:var(--info-soft);
  color:var(--primary);
  border-color:rgba(25,118,184,.18);
}

.tag-payment{
  background:var(--warning-soft);
  color:var(--warning);
  border-color:rgba(199,139,31,.24);
}

/* =========================================================
   KANBAN / VENDAS
========================================================= */

.kanban-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:8px;
}

.kanban-scroll::-webkit-scrollbar{
  height:10px;
}

.kanban-scroll::-webkit-scrollbar-thumb{
  background:var(--border-strong);
  border-radius:999px;
}

.kanban-scroll::-webkit-scrollbar-track{
  background:var(--surface-3);
  border-radius:999px;
}

.kanban-board{
  display:grid;
  grid-template-columns:repeat(11,minmax(var(--kanban-col-width),1fr));
  gap:var(--kanban-gap);
  align-items:start;
  min-width:max-content;
  width:max-content;
  max-width:none;
}

.kanban-column{
  display:grid;
  gap:14px;
  min-width:var(--kanban-col-width);
  max-width:var(--kanban-col-width);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px;
  box-shadow:var(--shadow-xs);
  min-height:100%;
}

.kanban-column-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-soft);
}

.kanban-column-header h3{
  font-size:16px;
  color:var(--text);
}

.kanban-column-header span{
  min-width:30px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--pill);
  border:1px solid var(--border);
  font-size:13px;
  font-weight:800;
  color:var(--text-soft);
}

.kanban-cards{
  display:grid;
  gap:12px;
  min-height:80px;
}

.kanban-cards .empty-state{
  border-radius:20px;
  padding:22px 14px;
  border:1px dashed var(--border-strong);
  background:var(--surface-2);
  text-align:center;
  color:var(--muted);
}

.kanban-card,
.kanban-card-sale{
  display:grid;
  gap:10px;
  padding:15px;
  border-radius:20px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
  min-width:0;
  position:relative;
  overflow:hidden;
}

.kanban-card-sale::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  border-radius:20px 0 0 20px;
  background:linear-gradient(180deg, var(--accent), var(--primary));
}

.kanban-card:hover,
.kanban-card-sale:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
}

.kanban-card strong,
.kanban-card-sale h4{
  font-size:16px;
  line-height:1.25;
  color:var(--text);
}

.kanban-card-line,
.kanban-card-sale .card-meta-line{
  font-size:14px;
  color:var(--muted);
  line-height:1.45;
  word-break:break-word;
}

.kanban-card-meta,
.kanban-card-sale .card-meta{
  display:grid;
  gap:8px;
  min-width:0;
}

.kanban-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.kanban-card-price{
  font-size:15px;
  font-weight:900;
  color:var(--primary);
  white-space:nowrap;
}

.kanban-card-tags,
.kanban-card-sale .card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag,
.kanban-card-sale .card-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid transparent;
}

/* =========================================================
   LISTS / TABLE BASE
========================================================= */

.rooms-grid,
.tasks-grid,
.reservations-list{
  display:grid;
  gap:18px;
  min-width:0;
}

.rooms-grid{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.tasks-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.reservations-list{
  grid-template-columns:1fr;
}

.room-card,
.task-card,
.reservation-card{
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.room-card:hover,
.task-card:hover,
.reservation-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-md);
}

.room-card h3,
.task-card h3,
.reservation-card h3{
  margin-bottom:12px;
  font-size:22px;
}

.room-meta,
.task-meta,
.reservation-meta{
  display:grid;
  gap:8px;
  font-size:15px;
  color:var(--muted);
}

.reservation-meta{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

.task-card .actions,
.reservation-card .actions{
  margin-top:16px;
}

.two-column-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
  margin-bottom:28px;
}

.list-stack{
  display:grid;
  gap:0;
}

.list-item{
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.list-item:last-child{
  border-bottom:none;
}

.list-item-title{
  font-weight:800;
  font-size:17px;
  margin-bottom:6px;
  color:var(--text);
}

.list-item-meta{
  font-size:14px;
  color:var(--muted);
}

/* =========================================================
   PLANOS
========================================================= */

.plan-card{
  display:grid;
  gap:14px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(25,198,183,.10), transparent 28%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border-color:var(--border);
}

.plan-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--accent), var(--primary));
  opacity:.98;
}

.plan-card.is-featured{
  border-color:rgba(25,198,183,.30);
  box-shadow:var(--shadow-md);
}

.plan-card.is-future::before{
  background:linear-gradient(90deg, var(--border-strong), var(--border));
}

.plan-intro{
  display:grid;
  gap:8px;
}

.plan-description{
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}

.plan-features{
  display:grid;
  gap:10px;
}

.plan-features div{
  display:flex;
  gap:10px;
  color:var(--text-soft);
  font-size:15px;
  line-height:1.5;
}

.plan-price-box{
  display:grid;
  gap:4px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(25,198,183,.24);
  background:linear-gradient(180deg, var(--accent-soft), var(--surface));
}

.plan-price-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
  font-weight:900;
}

.plan-price-value{
  font-size:26px;
  line-height:1.05;
  color:var(--accent-strong);
  font-weight:900;
}

.plan-price-note,
.plan-footnote{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.plan-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.roadmap-card{
  display:grid;
  gap:12px;
}

/* =========================================================
   MODAL
========================================================= */

.modal-shell{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:24px;
}

.modal-shell.is-hidden{
  display:none;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,12,24,.38);
  backdrop-filter:blur(6px);
}

.modal-card{
  position:relative;
  z-index:2;
  width:min(920px, 100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:24px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow-xl);
}

.modal-card details{
  overflow:hidden;
  background:var(--surface-2);
}

.modal-card summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-weight:800;
  color:var(--text);
}

.modal-card summary::-webkit-details-marker{
  display:none;
}

.modal-card summary::after{
  content:"+";
  font-size:20px;
  line-height:1;
  color:var(--primary);
}

.modal-card details[open] summary::after{
  content:"−";
}

/* =========================================================
   LOGIN / ERROS
========================================================= */

.center-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.gradient-screen{
  background:
    radial-gradient(circle at top left, rgba(25,198,183,.14), transparent 30%),
    radial-gradient(circle at top right, rgba(25,118,184,.14), transparent 32%),
    linear-gradient(135deg, var(--bg-4) 0%, var(--bg) 52%, var(--bg-2) 100%);
}

.login-wrapper{
  width:100%;
  max-width:420px;
}

.brand{
  text-align:center;
  margin-bottom:28px;
}

.brand h1{
  margin-bottom:8px;
}

.brand p{
  color:var(--muted);
  font-size:15px;
}

.footer-text{
  margin-top:16px;
  text-align:center;
  font-size:14px;
  color:var(--muted-soft);
}

.footer-text a{
  color:var(--primary);
}

.error-card{
  width:100%;
  max-width:560px;
  margin:0 auto;
  text-align:center;
}

.error-code{
  font-size:76px;
  line-height:1;
  font-weight:900;
  color:var(--primary);
  margin-bottom:14px;
}

.error-title{
  font-size:32px;
  margin-bottom:12px;
}

.error-description{
  margin-bottom:28px;
  font-size:16px;
  color:var(--muted);
  line-height:1.6;
}

.login-card{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
}

.login-card .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--info-soft);
  border:1px solid rgba(25,118,184,.16);
  color:var(--primary);
  margin-bottom:14px;
}

.login-card h2{
  font-size:30px;
  margin-bottom:10px;
}

.login-card p{
  color:var(--muted);
}

/* =========================================================
   HELPERS
========================================================= */

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
}

.empty-state{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  padding:24px;
  color:var(--muted);
  min-width:0;
}

.empty-mini{
  padding:14px;
  border-radius:var(--radius-sm);
  border:1px dashed var(--border-strong);
  background:var(--surface-2);
  color:var(--muted-soft);
  font-size:14px;
  text-align:center;
}

.text-center{ text-align:center; }
.is-hidden{ display:none !important; }

.max-w-420{ width:100%; max-width:420px; }
.max-w-560{ width:100%; max-width:560px; }
.max-w-760{ width:100%; max-width:760px; }
.max-w-880{ width:100%; max-width:880px; }
.w-full{ width:100%; }

.mb-8{ margin-bottom:8px; }
.mb-12{ margin-bottom:12px; }
.mb-16{ margin-bottom:16px; }
.mb-18{ margin-bottom:18px; }
.mb-20{ margin-bottom:20px; }
.mb-24{ margin-bottom:24px; }

.mt-8{ margin-top:8px; }
.mt-16{ margin-top:16px; }
.mt-18{ margin-top:18px; }
.mt-20{ margin-top:20px; }

.opacity-75{ opacity:.75; }
.opacity-82{ opacity:.82; }
.opacity-85{ opacity:.85; }

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.sidebar-link:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-close:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(25,118,184,.16);
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (min-width:1101px){
  .sidebar{
    transform:translateX(0);
  }

  .sidebar-close,
  .sidebar-overlay{
    display:none !important;
  }

  .main-shell{
    padding-left:var(--sidebar-width);
  }

  .sidebar-toggle{
    display:none;
  }
}

@media (max-width:1366px){
  :root{
    --kanban-col-width:220px;
    --kanban-gap:12px;
  }

  h1{
    font-size:38px;
  }

  .dashboard-section-split{
    grid-template-columns:1fr;
  }
}

@media (max-width:1180px){
  h1{
    font-size:36px;
  }
}

@media (max-width:1100px){
  .page-shell{
    padding:24px 20px 30px;
  }
}

@media (max-width:768px){
  h1{
    font-size:32px;
  }

  .page-shell{
    padding:20px 16px 26px;
  }

  .card,
  .summary-card,
  .room-card,
  .task-card,
  .reservation-card,
  .kpi-card{
    padding:18px;
  }

  .login-card,
  .error-card{
    padding:22px;
  }

  .error-code{
    font-size:56px;
  }

  .error-title{
    font-size:28px;
  }

  .kpi-value{
    font-size:30px;
  }

  .page-content{
    gap:22px;
  }

  .section-heading{
    align-items:stretch;
  }

  .section-heading .btn{
    width:100%;
  }

  .inline-user-card{
    width:100%;
    max-width:none;
  }

  .actions{
    width:100%;
  }

  .actions .btn,
  .actions a.btn,
  .plan-actions .btn{
    flex:1 1 calc(50% - 8px);
  }

  .kanban-board{
    display:flex;
    gap:16px;
    padding-bottom:8px;
    scroll-snap-type:x proximity;
    min-width:0;
    width:100%;
  }

  .kanban-column{
    min-width:86vw;
    max-width:86vw;
    scroll-snap-align:start;
  }

  .kanban-card,
  .kanban-card-sale{
    padding:14px;
  }

  .kanban-card-top{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:520px){
  h1{
    font-size:28px;
  }

  .page-shell{
    padding:16px 12px 22px;
  }

  .actions .btn,
  .actions a.btn,
  .plan-actions .btn{
    flex:1 1 100%;
  }

  .kpi-grid,
  .two-column-grid,
  .rooms-grid,
  .tasks-grid,
  .grid-form,
  .dashboard-grid,
  .dashboard-grid-2,
  .dashboard-grid-3,
  .dashboard-grid-4{
    grid-template-columns:1fr;
  }

  .reservation-meta{
    grid-template-columns:1fr;
  }

  .modal-shell{
    padding:14px;
  }

  .modal-card{
    padding:18px;
    max-height:calc(100vh - 28px);
  }

  .page-hero-text{
    font-size:16px;
  }

  .section-title{
    font-size:22px;
  }

  .topbar-left{
    min-width:100%;
  }

  .hotel-pill{
    width:100%;
  }

  .sidebar{
    width:min(84vw,300px);
  }
}

/* =========================================================
   MODULE TOOLBAR - TOPO LIMPO DAS PÁGINAS INTERNAS
========================================================= */

.module-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:4px 0 2px;
}

.module-toolbar h2{
  margin:0;
  color:var(--text);
  font-size:1.35rem;
  line-height:1.1;
  letter-spacing:-.035em;
}

.module-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.module-toolbar .muted-text{
  display:none;
}

@media (max-width:760px){
  .module-toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .module-toolbar-actions{
    width:100%;
    justify-content:flex-start;
  }

  .module-toolbar-actions .btn{
    flex:1 1 auto;
  }
}