/* Recanto Barão · estilos do PDV (um arquivo, na mesma ordem de antes). */

/* ===== Base: layout, menu, painéis, tabelas, formulários, login ===== */
@font-face {
  font-family: RecantoText;
  src: local("Segoe UI");
}
* {
  box-sizing: border-box;
}
html {
  background: #f5f3eb;
  color: #233c32;
  font:
    15px RecantoText,
    "Segoe UI",
    Arial,
    sans-serif;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
a {
  color: #285a43;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
.serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
h1 {
  font-size: 42px;
  letter-spacing: -1.4px;
  line-height: 1.15;
}
h2 {
  font-size: 28px;
  letter-spacing: -0.6px;
}
h3 {
  font-size: 16px;
}
p {
  line-height: 1.65;
}
.muted {
  color: #6c7b70;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #758273;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.monogram {
  width: 43px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 22px 22px 5px 5px;
  font-family: Georgia, serif;
  font-size: 27px;
}
.brand-name {
  font-family: Georgia, serif;
  font-size: 23px;
  line-height: 1.1;
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 2.6px;
  margin-top: 8px;
  text-transform: uppercase;
}
.sidebar {
  width: 246px;
  padding: 38px 24px 24px;
  background: #203f34;
  color: #f3f0e5;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.sidebar .brand {
  padding: 0 5px 37px;
  border-bottom: 1px solid #ffffff1a;
}
.nav-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #a9b7a0;
  margin: 31px 15px 15px;
}
.nav {
  display: grid;
  gap: 7px;
  align-content: start;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #ffffff3d transparent;
}
.nav button {
  color: #cdd8cb;
  border: 0;
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-radius: 8px;
  font-size: 14px;
}
.nav button:hover {
  background: #ffffff0d;
}
.nav button.active {
  background: #e6ebda;
  color: #213f34;
  font-weight: 600;
}
.icon {
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 20px;
  flex-shrink: 0;
}
/* Telas baixas (notebook, celular deitado): o menu rola e o bloco com o nome e
   o botão Sair continua sempre à vista, no rodapé da barra. */
@media (max-height: 880px) {
  .sidebar {
    padding-top: 24px;
  }
  .sidebar .brand {
    padding-bottom: 22px;
  }
  .sidebar .nav-label {
    margin: 16px 15px 10px;
  }
  .sidebar .nav button {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .sidebar-bottom .location {
    display: none;
  }
  .sidebar-bottom {
    padding-top: 12px;
  }
  .user {
    margin-top: 12px;
  }
}
.location {
  border: 1px solid #ffffff24;
  padding: 16px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.8;
  color: #bacab5;
}
.location strong {
  display: block;
  color: #e6ecdc;
  font-size: 12px;
}
.user {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #bccba9;
  color: #244332;
  font-weight: 600;
  flex-shrink: 0;
}
.user strong {
  display: block;
  font-size: 12px;
}
.user small {
  font-size: 10px;
  color: #c1cdbb;
}
.user .icon-button {
  margin-left: auto;
  color: #d8e2d2;
}
.icon-button {
  background: none;
  border: 0;
  padding: 8px;
  color: #456249;
  border-radius: 6px;
}
.icon-button:hover {
  background: #8da87b22;
}
.main {
  margin-left: 246px;
  min-height: 100vh;
}
.topbar {
  height: 76px;
  border-bottom: 1px solid #dbe0d3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 44px;
  background: #fbfaf5;
}
.breadcrumb {
  font-size: 12px;
  color: #82917f;
}
.breadcrumb b {
  font-weight: 500;
  color: #304d3d;
  margin-left: 8px;
}
.top-right {
  display: flex;
  align-items: center;
  gap: 23px;
  font-size: 12px;
  color: #65775f;
}
.live {
  display: flex;
  align-items: center;
  gap: 7px;
}
.live:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6c8d55;
}
.content {
  padding: 36px 44px 40px;
  max-width: 1600px;
  margin: auto;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.heading h1 {
  margin: 9px 0 9px;
}
.heading p {
  font-size: 13px;
  color: #75806e;
}
.btn {
  border: 1px solid #cbd4bf;
  background: #fbfcf6;
  color: #2d4e3b;
  padding: 11px 17px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-height: 42px;
}
.btn:hover {
  background: #e9eedf;
}
.btn.primary {
  background: #2a513c;
  border-color: #2a513c;
  color: #fff;
}
.btn.primary:hover {
  background: #1e3d2d;
}
.btn.danger {
  color: #954c3d;
  background: #fff5ef;
  border-color: #e4c5b9;
}
.btn.small {
  padding: 7px 11px;
  min-height: 34px;
  font-size: 12px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 27px;
}
.stat {
  border: 1px solid #dce0d1;
  border-radius: 11px;
  background: #fffefa;
  padding: 21px 23px;
  min-height: 135px;
}
.stat-label {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #68765e;
}
.stat-label .icon {
  color: #8c9b7c;
  width: 18px;
}
.stat-value {
  font-family: Georgia, serif;
  font-size: 39px;
  letter-spacing: -1px;
  margin: 10px 0 7px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-value small {
  font-size: 21px;
  color: #6c7f61;
}
.stat-note {
  font-size: 11px;
  color: #7a8672;
}
.stat.emphasis {
  background: #e6ecd9;
  border-color: #d9e1c8;
}
.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}
.panel {
  background: #fffefa;
  border: 1px solid #dce0d1;
  border-radius: 11px;
  overflow: hidden;
}
.panel-header {
  padding: 23px 25px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-header h2 {
  font-size: 24px;
}
.panel-header p {
  font-size: 11px;
  color: #839077;
  margin-top: 6px;
}
.text-button {
  border: 0;
  background: transparent;
  color: #517148;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  padding: 8px 0;
}
.tabs {
  display: flex;
  gap: 21px;
  padding: 0 25px;
  border-bottom: 1px solid #e4e7dc;
}
.tabs button {
  font-size: 12px;
  border: 0;
  background: none;
  padding: 12px 0;
  color: #7d8875;
  position: relative;
}
.tabs button.active {
  color: #2d513b;
  font-weight: 600;
  border-bottom: 2px solid #466340;
}
.tabs button span {
  font-size: 10px;
  border-radius: 5px;
  background: #eef0e5;
  padding: 3px 6px;
  margin-left: 5px;
}
.guest-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 25px;
  border-bottom: 1px solid #eef0e6;
}
.guest-row:last-child {
  border-bottom: 0;
}
.guest-avatar {
  background: #eeede1;
  border-radius: 9px;
  width: 41px;
  height: 43px;
  display: grid;
  place-items: center;
  color: #678054;
  font-family: Georgia, serif;
  font-size: 17px;
  flex-shrink: 0;
}
.guest-details {
  min-width: 0;
  flex: 1;
}
.guest-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.guest-sub {
  font-size: 11px;
  color: #788570;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 11px;
}
.guest-side {
  text-align: right;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.guest-side small {
  font-size: 10px;
  color: #7f8b75;
}
.badge {
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.badge:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.confirmed {
  color: #77621f;
  background: #f1ebd2;
}
.ongoing {
  color: #3e6944;
  background: #e4edda;
}
.finished {
  color: #587887;
  background: #e8eff0;
}
.cancelled {
  color: #a26855;
  background: #f6e8df;
}
.room-strip {
  margin-top: 24px;
}
.room-strip .panel-header {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
.room-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.room-mini {
  border: 1px solid #d9decf;
  background: #fffefa;
  border-radius: 9px;
  padding: 17px 15px;
}
.room-mini .icon {
  color: #81936e;
  width: 22px;
  height: 22px;
  margin-bottom: 15px;
}
.room-mini h3 {
  font-size: 12px;
  margin-bottom: 7px;
}
.room-mini p {
  font-size: 10px;
  color: #7d8b70;
}
.room-mini .badge {
  margin-top: 14px;
  font-size: 9px;
}
.welcome-card {
  background: #e4ead5;
  border: 1px solid #d8dfc8;
  border-radius: 11px;
  padding: 25px;
}
.welcome-card .eyebrow {
  color: #748765;
}
.welcome-card h2 {
  font-size: 30px;
  line-height: 1.18;
  margin: 15px 0 12px;
  color: #3d5c37;
}
.welcome-card p {
  font-size: 12px;
  color: #65785c;
}
.rule {
  height: 1px;
  background: #cad4bb;
  margin: 22px 0;
}
.breakfast-number {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 15px 0 8px;
}
.breakfast-number strong {
  font-family: Georgia, serif;
  font-size: 40px;
  font-weight: 400;
}
.breakfast-number span {
  font-size: 12px;
}
.aside-note {
  padding: 24px 6px;
  font-size: 12px;
  color: #7c8872;
  line-height: 1.7;
}
.aside-note strong {
  color: #506342;
  display: block;
  margin-bottom: 6px;
}
.footer {
  font-size: 10px;
  color: #8a957e;
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #dce1d2;
}
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 21px;
  flex-wrap: wrap;
}
.search {
  flex: 1;
  min-width: 180px;
}
.field {
  display: grid;
  gap: 7px;
  font-size: 12px;
  color: #516447;
}
.field input,
.field select,
.field textarea,
.toolbar input,
.toolbar select {
  width: 100%;
  border: 1px solid #cdd5c1;
  background: #fffefa;
  border-radius: 6px;
  padding: 11px 12px;
  color: #2c4535;
  min-height: 43px;
  outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.toolbar input:focus,
.toolbar select:focus {
  border-color: #557e4a;
  box-shadow: 0 0 0 3px #7c9e6020;
}
.field small {
  font-size: 10px;
  color: #7f8c73;
  line-height: 1.5;
}
.toolbar select {
  width: auto;
}
.field textarea {
  min-height: 80px;
  resize: vertical;
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
}
th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #80906e;
  background: #f6f7ef;
  padding: 14px 19px;
  font-weight: 600;
}
td {
  padding: 17px 19px;
  border-top: 1px solid #ebeee2;
  color: #536546;
}
td strong {
  color: #314b37;
  display: block;
  font-size: 12px;
  font-weight: 600;
}
td small {
  display: block;
  font-size: 10px;
  color: #8a957d;
  margin-top: 5px;
}
.numeric {
  font-variant-numeric: tabular-nums;
}
.right {
  text-align: right;
}
.table-footer {
  padding: 15px 20px;
  font-size: 11px;
  color: #8a957c;
  border-top: 1px solid #e5e9dd;
}
/* Aviso da ficha do hóspede dentro da reserva: chama a atenção quando falta. */
.ficha-line {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.6;
}
.ficha-line small {
  width: 100%;
  font-size: 11px;
  opacity: 0.85;
}
.ficha-line span {
  flex: 1;
  min-width: 200px;
}
.ficha-alerta {
  background: #fbf0d8;
  border-left: 4px solid #d79a2b;
  color: #7b6539;
}
.ficha-alerta .btn {
  background: #d79a2b;
  border-color: #c78f25;
  color: #fff;
}
.ficha-alerta .btn:hover {
  background: #c28722;
}
.ficha-ok {
  background: #eef3e3;
  border-left: 4px solid #6f9152;
  color: #4c6438;
}
/* Rodapé da reserva: ações que mudam a vida da estadia, longe do resto. */
.danger-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid #e3e8d8;
}
.archive-line {
  padding: 14px 20px;
  border-top: 1px solid #e5e9dd;
  display: grid;
  gap: 3px;
  justify-items: start;
}
.archive-line small {
  color: #8a957c;
  font-size: 11px;
}
.row-actions {
  flex-wrap: wrap;
  align-items: center;
}
.empty {
  text-align: center;
  padding: 43px 22px;
  color: #76846b;
  font-size: 13px;
  line-height: 1.7;
}
.empty strong {
  display: block;
  color: #385337;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 7px;
}
.empty .btn {
  margin-top: 15px;
}
.financial-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.financial-stats .stat-value {
  font-size: 34px;
}
.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.section-gap {
  margin-top: 24px;
}
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.company-card {
  display: grid;
  gap: 10px;
  align-content: start;
  background: #fbfaf4;
  border: 1px solid #e6e3d4;
  border-radius: 14px;
  padding: 16px;
}
.company-card small {
  display: block;
  color: #5d6b5a;
  font-size: 12px;
}
.company-numbers {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: #5d6b5a;
}
.pending-amount {
  color: #8a6d1f;
}
.company-badge {
  margin-top: 4px;
}
.checklist-head {
  font-size: 17px;
  margin: 0 0 4px;
}
.payment-checklist .muted {
  margin: 0 0 4px;
}
.day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.dupe-row {
  border-top: 1px solid #e6e3d4;
  padding-top: 14px;
  margin-top: 14px;
}
.dupe-name {
  display: block;
  margin-bottom: 8px;
}
.dupe-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dupe-side {
  display: grid;
  gap: 4px;
  justify-items: start;
  background: #fbfaf4;
  border: 1px solid #e6e3d4;
  border-radius: 12px;
  padding: 14px;
}
.dupe-side small {
  color: #5d6b5a;
  font-size: 12px;
}
.history-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.history-line {
  border-left: 3px solid #cfdac4;
  padding-left: 12px;
  font-size: 13px;
}
.history-line small {
  display: block;
  color: #5d6b5a;
  margin-top: 2px;
}
@media (max-width: 700px) {
  .dupe-pair {
    grid-template-columns: 1fr;
  }
}
.guest-file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid #eceadd;
  padding: 10px 0;
}
.guest-file small {
  color: #5d6b5a;
  font-size: 12px;
  margin-right: auto;
}
.doc-preview {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #f1efe3;
  border-radius: 12px;
}
.vigia-panel .category-row {
  align-items: start;
  gap: 14px;
}
.vigia-panel .category-row small {
  display: block;
  color: #5d6b5a;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 2px;
}
.category-row {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #edf0e6;
  font-size: 12px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.room-card {
  padding: 26px;
}
.room-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.room-card .room-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #e8eddc;
  color: #66814e;
  display: grid;
  place-items: center;
}
.room-card h2 {
  margin-top: 23px;
  font-size: 27px;
}
.room-card p {
  font-size: 12px;
  color: #859275;
  margin-top: 7px;
}
.room-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  border-top: 1px solid #e1e7d6;
  margin-top: 23px;
  padding-top: 20px;
}
.room-metrics label {
  display: block;
  font-size: 10px;
  color: #7c8b6d;
  margin-bottom: 9px;
}
.room-metrics strong {
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.note {
  padding: 16px 19px;
  background: #eceede;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.65;
  color: #64754f;
  margin-top: 20px;
}
.note.warn {
  background: #f6eedc;
  color: #7b6539;
}
.login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.login-story {
  background: #203f34;
  color: #edeedf;
  padding: 58px 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-story .brand {
  align-self: start;
}
.login-story .brand-name {
  font-size: 29px;
}
.login-story .monogram {
  width: 51px;
  height: 56px;
  font-size: 33px;
}
.login-story h1 {
  font-size: 66px;
  line-height: 1.06;
  letter-spacing: -2px;
  margin: 50px 0 25px;
  max-width: 480px;
  color: #e9ecd9;
}
.login-story h1 em {
  font-weight: 400;
  color: #b7c5a0;
}
.login-story p {
  color: #bac9b1;
  font-size: 14px;
  max-width: 350px;
  line-height: 1.8;
}
.story-bottom {
  margin-top: 60px;
  border-top: 1px solid #ffffff21;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1px;
  color: #b9c8ac;
}
.login-form-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}
.login-box {
  max-width: 365px;
  width: 100%;
}
.login-box h2 {
  font-size: 37px;
  margin: 13px 0;
}
.login-box > p {
  font-size: 13px;
  color: #7c876f;
  margin-bottom: 28px;
}
.login-box form {
  display: grid;
  gap: 19px;
}
.login-box .btn {
  margin-top: 5px;
  width: 100%;
  padding: 14px;
}
.login-box .privacy {
  font-size: 10px;
  line-height: 1.7;
  color: #88937b;
  text-align: center;
  margin-top: 23px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.full {
  grid-column: 1/-1;
}
.check-field {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #526545;
}
.check-field input {
  accent-color: #3e6742;
  width: 18px;
  height: 18px;
}
.form-section {
  grid-column: 1/-1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #859572;
  text-transform: uppercase;
  border-bottom: 1px solid #e0e7d5;
  padding: 8px 0 12px;
}
.form-error {
  font-size: 12px;
  line-height: 1.6;
  color: #9b4737;
  display: none;
  padding: 11px 14px;
  background: #f7e9df;
  border-radius: 6px;
}
.form-error:not(:empty) {
  display: block;
}
dialog {
  border: 1px solid #ccd7bd;
  border-radius: 14px;
  padding: 0;
  max-width: 700px;
  width: calc(100% - 30px);
  max-height: 92dvh;
  background: #fafbf4;
  color: #28432f;
  box-shadow: 0 20px 80px #15332340;
}
dialog::backdrop {
  background: #0c261c85;
  backdrop-filter: blur(3px);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px 27px;
  border-bottom: 1px solid #e1e8d6;
}
.modal-header h2 {
  font-size: 27px;
}
.modal-body {
  padding: 24px 27px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e1e8d6;
  padding-top: 20px;
  margin-top: 24px;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #244a34;
  color: #f3f6e8;
  padding: 14px 24px;
  border-radius: 8px;
  box-shadow: 0 6px 30px #19352233;
  z-index: 1000;
  display: none;
  font-size: 13px;
  max-width: 90vw;
}
#toast.visible {
  display: block;
}
.mobile-top {
  display: none;
}
.loading {
  padding: 80px;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 25px;
}
.guide {
  padding: 25px;
}
.guide h3 {
  margin: 21px 0 9px;
}
.guide h3:first-child {
  margin-top: 0;
}
.guide p,
.guide ol {
  font-size: 13px;
  line-height: 1.8;
  color: #6c7c5b;
}
.guide li {
  margin-bottom: 10px;
}
.guide a {
  font-weight: 600;
}
.room-mini button {
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  padding: 0;
  width: 100%;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #9aaf73;
  outline-offset: 3px;
}
.demo-tag {
  color: #6b6f31;
  background: #e6e4c1;
  padding: 7px 10px;
  font-size: 11px;
  border-radius: 6px;
}
.error-page {
  margin: 40px auto;
  padding: 30px;
  max-width: 600px;
}
.amount-owed {
  color: #91732e;
}
@media (min-width: 1500px) {
  .content {
    padding-top: 45px;
  }
  .grid-main {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .guest-row {
    padding-top: 23px;
    padding-bottom: 23px;
  }
  .welcome-card {
    padding: 30px;
  }
}
@media (max-width: 1150px) {
  .sidebar {
    width: 210px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .main {
    margin-left: 210px;
  }
  .content {
    padding: 30px 26px;
  }
  .topbar {
    padding: 0 26px;
  }
  .grid-main {
    grid-template-columns: minmax(0, 1fr) 255px;
  }
  .stat {
    padding: 18px 16px;
  }
  .stat-value {
    font-size: 34px;
  }
  .guest-row {
    padding: 17px;
  }
  .guest-sub {
    gap: 5px;
  }
  .room-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .login-story {
    padding: 45px;
  }
  .login-story h1 {
    font-size: 56px;
  }
  .brand-name {
    font-size: 21px;
  }
}
@media (max-width: 900px) {
  .sidebar {
    width: 185px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .sidebar .brand {
    gap: 8px;
  }
  .brand-name {
    font-size: 18px;
  }
  .brand small {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .monogram {
    width: 35px;
    height: 40px;
    font-size: 24px;
  }
  .main {
    margin-left: 185px;
  }
  .topbar {
    height: 64px;
  }
  .top-right .date-label {
    display: none;
  }
  .content {
    padding: 26px 20px;
  }
  .heading h1 {
    font-size: 34px;
  }
  .grid-main {
    grid-template-columns: 1fr;
  }
  .aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .financial-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .financial-stats .stat-value {
    font-size: 26px;
  }
  .two-cols {
    grid-template-columns: 1fr;
  }
  .room-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .welcome-card h2 {
    font-size: 25px;
  }
  .login-story {
    padding: 35px;
  }
  .login-story h1 {
    font-size: 47px;
  }
  .login-form-area {
    padding: 35px;
  }
  .login-story .brand-name {
    font-size: 23px;
  }
}
@media (max-width: 650px) {
  .sidebar {
    display: none;
    top: 63px;
    width: 245px;
    padding: 22px;
    box-shadow: 12px 0 30px #18312133;
  }
  .sidebar.open {
    display: flex;
  }
  .sidebar .brand {
    display: none;
  }
  .sidebar .nav-label {
    margin-top: 12px;
  }
  .main {
    margin-left: 0;
  }
  .topbar {
    display: none;
  }
  .mobile-top {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 20;
    height: 63px;
    background: #203f34;
    color: #e9efdc;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }
  .mobile-top .icon-button {
    color: inherit;
  }
  .mobile-top .brand-name {
    font-size: 20px;
  }
  .mobile-top small {
    font-size: 9px;
    color: #b8c8ab;
  }
  .content {
    padding: 25px 17px 30px;
  }
  .heading {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 23px;
  }
  .heading h1 {
    font-size: 33px;
    margin-top: 7px;
  }
  .heading .eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .heading p {
    font-size: 12px;
  }
  .heading > .btn {
    padding: 10px;
    min-height: 40px;
    font-size: 11px;
    margin-top: 24px;
  }
  .heading > .btn .icon {
    width: 15px;
  }
  .stats {
    gap: 10px;
    margin-bottom: 20px;
  }
  .stat {
    padding: 17px 15px;
    min-height: 123px;
  }
  .stat-label {
    font-size: 11px;
  }
  .stat-value {
    font-size: 34px;
  }
  .stat-note {
    font-size: 10px;
  }
  .grid-main {
    gap: 20px;
  }
  .panel-header {
    padding: 20px 17px;
  }
  .panel-header h2 {
    font-size: 23px;
  }
  .tabs {
    padding: 0 17px;
    gap: 17px;
  }
  .tabs button {
    font-size: 11px;
  }
  .guest-row {
    padding: 17px 14px;
    gap: 10px;
  }
  .guest-avatar {
    width: 34px;
    height: 37px;
    font-size: 14px;
  }
  .guest-name {
    font-size: 12px;
  }
  .guest-sub {
    font-size: 10px;
  }
  .guest-side .badge {
    font-size: 9px;
    padding: 5px 6px;
  }
  .guest-side small {
    font-size: 9px;
  }
  .guest-side {
    gap: 6px;
  }
  .room-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .aside {
    grid-template-columns: 1fr;
  }
  .aside-note {
    padding: 0 4px;
  }
  .welcome-card {
    padding: 23px;
  }
  .footer {
    font-size: 9px;
    gap: 12px;
    line-height: 1.6;
  }
  .financial-stats {
    grid-template-columns: 1fr 1fr;
  }
  .financial-stats .stat:last-child {
    grid-column: 1/-1;
  }
  .financial-stats .stat-value {
    font-size: 29px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .room-card {
    padding: 22px;
  }
  .login {
    grid-template-columns: 1fr;
  }
  .login-story {
    padding: 28px 25px;
  }
  .login-story h1 {
    font-size: 38px;
    margin: 30px 0 10px;
    max-width: 330px;
  }
  .login-story p {
    font-size: 12px;
  }
  .login-story .brand-name {
    font-size: 23px;
  }
  .login-story .monogram {
    width: 38px;
    height: 42px;
    font-size: 25px;
  }
  .story-bottom {
    display: none;
  }
  .login-form-area {
    padding: 32px 25px 42px;
    align-items: start;
  }
  .login-box {
    max-width: 450px;
  }
  .login-box h2 {
    font-size: 31px;
  }
  .login-box > p {
    margin-bottom: 23px;
  }
  .login-box form {
    gap: 17px;
  }
  .login-box .field input {
    font-size: 16px;
  }
  .form-grid {
    gap: 15px;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
  .modal-header {
    padding: 20px;
  }
  .modal-header h2 {
    font-size: 24px;
  }
  .modal-body {
    padding: 20px;
  }
  .form-grid .field {
    grid-column: 1/-1;
  }
  .form-grid .half-mobile {
    grid-column: auto;
  }
  .toolbar {
    gap: 9px;
  }
  .toolbar .search {
    flex-basis: 100%;
  }
  .toolbar select {
    flex: 1;
    font-size: 12px;
  }
  th,
  td {
    padding-left: 14px;
    padding-right: 14px;
  }
  .guide {
    padding: 21px;
  }
  .guide p,
  .guide ol {
    font-size: 12px;
  }
  .room-metrics strong {
    font-size: 18px;
  }
}

/* ===== Agenda, calendário de datas, preços da reserva, café e limpeza ===== */
[hidden] {
  display: none !important;
}
.date-input {
  display: flex;
  border: 1px solid #cdd5c1;
  border-radius: 7px;
  background: #fffefa;
  overflow: hidden;
}
.date-input input {
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 0;
  flex: 1;
}
.date-input button {
  border: 0;
  border-left: 1px solid #e2e7d7;
  background: #edf1e2;
  color: #41603a;
  width: 43px;
  flex-shrink: 0;
  cursor: pointer;
}
.date-dialog {
  width: 365px;
  padding: 20px;
  border-radius: 13px;
  overflow: visible;
}
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 17px;
}
.picker-header > button {
  border: 1px solid #ced9bf;
  border-radius: 7px;
  background: #f0f4e7;
  color: #395a34;
  font-size: 25px;
  width: 35px;
  height: 36px;
}
.picker-header > div {
  display: flex;
  gap: 5px;
}
.picker-header select,
.picker-header input {
  padding: 7px 5px;
  background: #fffef8;
  border: 1px solid #d4dfc6;
  border-radius: 5px;
  color: #2c4a32;
  font: inherit;
  font-size: 12px;
}
.picker-header input {
  width: 72px;
}
.picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.picker-days > span {
  text-align: center;
  font-size: 10px;
  color: #8a987d;
  padding-bottom: 8px;
}
.picker-days button {
  border: 0;
  background: #f0f3e8;
  color: #3e583a;
  border-radius: 6px;
  min-height: 37px;
  font-size: 12px;
}
.picker-days button:hover,
.month-grid button:hover {
  background: #dce6ce;
}
.picker-days .selected,
.month-grid .selected {
  background: #33563a;
  color: white;
}
.picker-days button:disabled {
  opacity: 0.25;
  cursor: default;
}
.picker-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.month-grid button {
  font-size: 12px;
  border: 1px solid #d7e1ca;
  background: #f0f4e7;
  padding: 11px 4px;
  border-radius: 6px;
  color: #3c5e36;
}
.picker-close {
  width: 100%;
  margin-top: 17px;
}
.reservation-calendar {
  margin-bottom: 25px;
}
.calendar-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}
.calendar-nav strong {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  min-width: 155px;
}
.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 25px;
  padding: 0 25px 24px;
}
.availability-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}
.weekday {
  text-align: center;
  font-size: 10px;
  color: #879575;
  padding: 5px 0 9px;
}
.calendar-day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 66px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #eff3e5;
  color: #3d6238;
  position: relative;
}
.calendar-day strong {
  font-size: 16px;
  font-weight: 600;
}
.calendar-day small {
  font-size: 9px;
}
.calendar-day.available {
  background: #edf3e4;
  border-color: #e0e8d4;
}
.calendar-day.part-booked {
  background: #f4ecd1;
  color: #8c702a;
  border-color: #e8dcae;
}
.calendar-day.full-booked {
  background: #f4e1d9;
  color: #a85843;
  border-color: #e8cbbb;
}
.calendar-day.chosen {
  outline: 2px solid #315338;
  outline-offset: 1px;
}
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  font-size: 10px;
  color: #788768;
  margin-top: 17px;
}
.calendar-legend span:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  background: #b4caa0;
}
.calendar-legend .legend-some:before {
  background: #cdb764;
}
.calendar-legend .legend-full:before {
  background: #cb8d77;
}
.calendar-rule {
  font-size: 10px;
  color: #8a967e;
  margin-top: 10px;
}
.availability-detail {
  background: #f2f5e9;
  padding: 21px;
  border-radius: 9px;
}
.availability-detail h3 {
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  margin: 9px 0 20px;
}
.day-room {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 0;
  border-top: 1px solid #dce5cf;
}
.day-room > div {
  flex: 1;
  min-width: 0;
}
.day-room strong {
  font-size: 11px;
  display: block;
}
.day-room small {
  font-size: 10px;
  display: block;
  color: #879477;
  line-height: 1.5;
  margin-top: 5px;
}
.day-room .clean-warning {
  color: #9c7c28;
}
.room-emoji {
  font-size: 24px;
}
.room-emoji.big {
  font-size: 42px;
}
.day-room .btn {
  font-size: 10px;
  padding: 6px 8px;
  min-height: 30px;
}
.cleaning-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  padding: 0 24px 24px;
}
.clean-card {
  padding: 18px 15px;
  border: 1px solid #dce4ce;
  border-radius: 9px;
  background: #edf2e4;
}
.clean-card > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 16px;
}
.clean-card label {
  display: grid;
  gap: 7px;
  font-size: 10px;
  color: #667956;
}
.clean-card select {
  width: 100%;
  padding: 9px 6px;
  border: 1px solid #cbd6bd;
  background: #fffef8;
  border-radius: 6px;
  color: #3d5836;
  font-size: 11px;
}
.clean-pending {
  background: #fbefc7;
  border-color: #e7cc75;
}
.clean-doing {
  background: #e6eff2;
  border-color: #b8d2dc;
}
.clean-done {
  background: #eef3e5;
}
.breakfast-line {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid #cdd8bc;
  font-size: 11px;
}
/* O horário é a informação que manda na cozinha: vem primeiro e maior. */
.breakfast-line strong {
  font-size: 13px;
  color: #2d4e3b;
}
.breakfast-line small {
  color: #70825f;
}
.breakfast-line span {
  font-weight: 600;
  color: #5c6e4d;
}
.person-price {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 15px;
  margin-bottom: 10px;
  background: #eff3e6;
  border: 1px solid #dce5ce;
  border-radius: 8px;
}
.person-price .field {
  font-size: 10px;
}
.price-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: #e6edd9;
  border: 1px solid #d1ddbf;
  padding: 19px;
  border-radius: 8px;
}
.price-summary > div {
  display: grid;
  gap: 6px;
}
.price-summary > div:last-child {
  grid-column: 1/-1;
  border-top: 1px solid #ccdaba;
  padding-top: 13px;
}
.price-summary strong {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}
.price-summary small,
.price-summary span {
  font-size: 10px;
  color: #6e815a;
}
.reservation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.reservation-actions .btn {
  font-size: 11px;
}
.attachment-list {
  display: grid;
  gap: 15px;
}
.attachment-card {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid #dce5ce;
  padding: 13px;
  border-radius: 8px;
}
.attachment-card img {
  width: 90px;
  height: 72px;
  object-fit: cover;
  border-radius: 5px;
}
.attachment-card > div {
  flex: 1;
  min-width: 0;
}
.attachment-card a {
  overflow-wrap: anywhere;
  font-size: 12px;
}
.attachment-card small {
  display: block;
  color: #8a977b;
  font-size: 10px;
  margin-top: 6px;
}
.pdf-icon {
  max-width: 90px;
  height: 72px;
  display: grid;
  place-items: center;
  background: #e9efd9;
  border-radius: 5px;
  color: #79935e;
}
.field input[type="file"] {
  font-size: 12px;
  padding: 14px;
  border-style: dashed;
}
.field input[type="file"]::file-selector-button {
  padding: 7px 10px;
  margin-right: 10px;
  border: 0;
  border-radius: 5px;
  background: #dfe9d2;
  color: #355334;
}
.form-grid .full.form-grid {
  grid-column: 1/-1;
}
.table-wrap .text-button {
  margin-left: 8px;
}
#legacy-total > small {
  font-size: 11px;
  color: #83916e;
}
#legacy-total {
  padding: 15px;
  background: #f2ebd3;
  border-radius: 7px;
}
@media (max-width: 1100px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }
  .availability-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .availability-detail > .eyebrow,
  .availability-detail > h3 {
    grid-column: 1/-1;
  }
  .cleaning-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .reservation-calendar .panel-header {
    display: block;
  }
  .calendar-nav {
    justify-content: space-between;
    margin-top: 18px;
  }
  .calendar-nav strong {
    font-size: 12px;
  }
  .calendar-layout {
    padding: 0 12px 17px;
    gap: 18px;
  }
  .availability-grid {
    gap: 4px;
  }
  .calendar-day {
    min-height: 54px;
    border-radius: 5px;
    gap: 4px;
  }
  .calendar-day strong {
    font-size: 13px;
  }
  .calendar-day small {
    font-size: 8px;
  }
  .availability-detail {
    display: block;
    padding: 17px;
  }
  .availability-detail h3 {
    font-size: 24px;
  }
  .calendar-legend {
    gap: 11px;
    font-size: 9px;
  }
  .cleaning-grid {
    gap: 10px;
    padding: 0 14px 18px;
  }
  .clean-card {
    padding: 14px 10px;
  }
  .clean-card > div {
    display: grid;
    font-size: 11px;
  }
  .clean-card select {
    font-size: 11px;
  }
  .person-price {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 13px;
  }
  .person-price .field:first-child {
    grid-column: 1/-1;
  }
  .person-price .field {
    grid-column: auto;
  }
  .person-price input {
    font-size: 15px;
  }
  .price-summary {
    gap: 13px;
    padding: 15px;
  }
  .price-summary strong {
    font-size: 23px;
  }
  .date-dialog {
    width: calc(100% - 30px);
    max-width: 365px;
    padding: 17px;
  }
  .date-input input {
    font-size: 16px;
  }
  .attachment-card img {
    width: 62px;
    height: 60px;
  }
  .attachment-card {
    gap: 9px;
    padding: 10px;
  }
  .reservation-actions .btn {
    width: 100%;
  }
  .cleaning-board .panel-header {
    align-items: flex-start;
    gap: 7px;
  }
  .cleaning-board .panel-header h2 {
    font-size: 22px;
  }
  .cleaning-board .panel-header .badge {
    font-size: 9px;
  }
  .price-summary > div:last-child strong {
    font-size: 29px;
  }
}

/* ===== Diárias e mensagens para o hóspede ===== */
.rate-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.rate-card {
  padding: 28px;
}
.rate-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 21px;
}
.rate-card h2 {
  font-size: 30px;
}
.rate-card > p {
  font-size: 12px;
  color: #7b8c6c;
  margin-top: 13px;
}
.rate-card .rate-big {
  font-family: Georgia, serif;
  font-size: 38px;
  line-height: 1.2;
  color: #345335;
  margin: 24px 0 16px;
}
.rate-big small {
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
  display: block;
  margin-top: 8px;
  color: #7b8b6c;
}
.chalet-rate {
  background: #e9efdf;
  border-color: #d1debf;
}
.package-comparison {
  display: grid;
  gap: 10px;
  border-top: 1px solid #ccd9bb;
  border-bottom: 1px solid #ccd9bb;
  padding: 17px 0;
  margin: 20px 0;
}
.package-comparison > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.package-comparison strong {
  font-variant-numeric: tabular-nums;
}
.rate-card .read-only-note {
  font-size: 10px;
  margin-top: 26px;
  color: #8a957e;
}
.message-actions {
  padding: 20px 0;
  border-top: 1px solid #dbe5ce;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.message-actions h3,
.message-actions p {
  width: 100%;
}
.message-actions p {
  font-size: 12px;
  color: #7e8e6e;
  margin-bottom: 8px;
}
.message-actions > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.message-actions .btn {
  font-size: 12px;
}
.row-actions {
  display: flex;
  gap: 7px;
}
.message-sharing {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 21px;
}
.message-sharing .field {
  flex: 1;
}
.message-caption {
  font-size: 11px;
  color: #8a977b;
  margin-top: 18px;
}
#guest-message {
  font-size: 14px;
  line-height: 1.65;
  min-height: 370px;
  resize: vertical;
}
#whatsapp-draft[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.nav button {
  padding-top: 11px;
  padding-bottom: 11px;
}
.nav-label {
  margin-top: 23px;
}
.sidebar .brand {
  padding-bottom: 28px;
}
.sidebar .location {
  font-size: 10px;
  padding: 12px;
}
@media (max-width: 650px) {
  .rate-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rate-card {
    padding: 23px;
  }
  .rate-card h2 {
    font-size: 28px;
  }
  .rate-card .rate-big {
    font-size: 37px;
  }
  .message-sharing {
    display: grid;
  }
  .message-actions .btn,
  .message-actions > div {
    width: 100%;
  }
  #guest-message {
    font-size: 16px;
    min-height: 350px;
  }
  .guide .panel-header {
    display: block;
    padding: 0 0 20px;
  }
  .guide .panel-header .btn {
    margin-top: 15px;
  }
  .sidebar-bottom .location {
    display: none;
  }
  .sidebar-bottom {
    padding-top: 10px;
  }
  .sidebar .nav {
    gap: 3px;
  }
}

/* ===== Chegadas, perfil, orçamentos e Regras e guias ===== */
.arrival-spotlight {
  background: #254c3d;
  color: #fff9e9;
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 30px;
}
.arrival-spotlight h2 {
  font-size: 32px;
  margin: 8px 0;
}
.arrival-spotlight .eyebrow {
  color: #d0dbae;
}
.arrival-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.arrival-tile {
  border: 1px solid #7c9e87;
  background: #fffdf3;
  color: #244737;
  border-radius: 14px;
  text-align: left;
  padding: 18px;
  display: grid;
  gap: 10px;
  cursor: pointer;
  font: inherit;
}
.arrival-tile strong {
  font-size: 20px;
}
.arrival-tile .badge {
  justify-self: start;
}
.profile-hero {
  display: flex;
  gap: 18px;
  align-items: center;
  background: #ecf0df;
  padding: 20px;
  border-radius: 16px;
}
.profile-hero h2 {
  margin: 0;
}
.profile-hero small {
  overflow-wrap: anywhere;
}
.profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.profile-metrics div {
  background: #f4eddb;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 5px;
}
.profile-metrics strong {
  font-size: 30px;
  color: #254c3d;
}
.profile-metrics span {
  font-size: 12px;
}
.profile-rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-rooms div {
  border: 1px solid #d6dfc5;
  padding: 12px;
  border-radius: 10px;
  display: grid;
  gap: 7px;
}
.profile-booking {
  border: 1px solid #d6dfc5;
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0;
}
.profile-booking > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.timeline-item {
  border-left: 3px solid #92a879;
  padding: 5px 0 15px 20px;
  margin: 12px 0;
}
.timeline-item time {
  display: block;
  color: #6a785a;
  font-size: 12px;
  margin-bottom: 7px;
}
.timeline-item p {
  margin: 5px 0;
}
.danger {
  border-color: #b56651 !important;
  color: #9d3e2d !important;
}
#profile-timeline,
#profile-bookings {
  max-height: 480px;
  overflow: auto;
}
@media (max-width: 700px) {
  .arrival-grid {
    grid-template-columns: 1fr;
  }
  .arrival-spotlight {
    padding: 20px;
  }
  .profile-hero {
    align-items: flex-start;
  }
  .profile-rooms {
    grid-template-columns: 1fr;
  }
  .profile-metrics {
    gap: 5px;
  }
  .profile-metrics div {
    padding: 10px;
  }
}

/* ===== Fotos das acomodações e checklist de pagamento ===== */
.room-photo-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 0;
}
.room-photo-strip > a,
.room-photo-strip > div {
  flex: 0 0 210px;
}
.room-photo-strip img {
  width: 210px;
  height: 145px;
  object-fit: cover;
  border-radius: 12px;
}
.payment-checklist {
  margin-bottom: 20px;
}
.payment-checklist h3 {
  margin-top: 0;
}

/* ===== Pix, Booking e Airbnb ===== */
.pix-card {
  max-width: 900px;
}
.pix-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  align-items: start;
}
.pix-qr {
  width: 280px;
  height: 280px;
  background: #fff;
  border: 10px solid #fff;
  border-radius: 16px;
  box-shadow: 0 5px 22px #18372b22;
}
.pix-qr img {
  width: 100%;
  height: 100%;
  display: block;
}
.pix-copy textarea {
  font-family: monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.pix-copy .btn {
  margin-top: 5px;
}
@media (max-width: 700px) {
  .pix-content {
    grid-template-columns: 1fr;
  }
  .pix-qr {
    margin: auto;
  }
}
.material-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #dce4d3;
}
.material-card strong,
.material-card small {
  display: block;
}
.material-card small {
  margin-top: 4px;
  color: #71816d;
  font-size: 12px;
}
.material-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.guest-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.text-button.danger {
  color: #9d3e2d;
}
@media (max-width: 700px) {
  .material-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .material-actions {
    justify-content: flex-start;
  }
  .guest-actions {
    justify-content: flex-start;
  }
}
.booking-import-panel .panel-header {
  align-items: flex-start;
}
.booking-import-panel .panel-header .btn {
  flex-shrink: 0;
}
.arrival-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.arrival-tile-main {
  display: grid;
  gap: 8px;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  width: 100%;
}
.arrival-tile-main .badge {
  justify-self: start;
}
.arrival-tile-main strong {
  font-size: 13px;
}
.arrival-tile-main small {
  font-size: 10px;
  color: #7b8874;
}
.hide-external {
  text-align: left;
}
.external-panel-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.external-panel-actions .section-gap {
  margin-top: 0;
}
.arrival-spotlight > .btn {
  margin-top: 14px;
}
.breakfast-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.breakfast-day {
  border: 1px solid #cad4bb;
  background: #edf2e3;
  border-radius: 10px;
  padding: 14px;
}
.breakfast-day h3 {
  color: #3d5c37;
  font-size: 18px;
  margin: 4px 0 7px;
}
.breakfast-day .breakfast-number {
  margin: 8px 0 10px;
}
.breakfast-line {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid #d5dec8;
  font-size: 11px;
}
.breakfast-line strong {
  font-size: 11px;
  color: #3f5d3c;
}
.breakfast-line span,
.breakfast-line small {
  color: #65785c;
  font-size: 10px;
}
.breakfast-empty {
  font-size: 11px;
  color: #65785c;
}
.breakfast-day .note.warn {
  padding: 9px;
  margin-top: 10px;
  font-size: 10px;
}
@media (max-width: 700px) {
  .breakfast-preview {
    grid-template-columns: 1fr;
  }
}

/* ===== Selos de pagamento ===== */
.badge.pay-paid {
  color: #2f6b3d;
  background: #dcefdf;
}
.badge.pay-pending {
  color: #8a6a12;
  background: #fbecc4;
}
.payment-history-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}

/* ===== Avisos Telegram ===== */
.notification-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}
.notification-summary h2 {
  font-size: 24px;
  margin: 8px 0;
}
.notification-summary p {
  max-width: 780px;
}
.notification-steps {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.notification-steps h3 {
  padding-top: 14px;
  border-top: 1px solid #dce4d3;
}
.notification-steps .message-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.notification-steps input {
  max-width: 100%;
}
.notification-help {
  margin-top: 24px;
}
.notification-help h2 {
  margin-bottom: 10px;
}
.notification-help p {
  max-width: 760px;
}
@media (max-width: 700px) {
  .notification-summary {
    align-items: stretch;
    flex-direction: column;
  }
  .notification-summary h2 {
    font-size: 23px;
  }
  .notification-summary .btn {
    width: 100%;
  }
}

/* ===== Página dos hóspedes e envio dos guias ===== */
.guide-link-panel {
  padding: 26px;
  margin-bottom: 24px;
  background: #f0f4e7;
}
.guide-link-panel h2 {
  margin: 7px 0 10px;
  font-size: 29px;
}
.guide-link-panel p {
  font-size: 13px;
  line-height: 1.6;
}
.guide-link-panel .field {
  margin: 16px 0;
}
.guide-link-panel .field input {
  width: 100%;
  font-size: 13px;
}
.guide-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.guide-download-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #e0e6d6;
}
.guide-download-row small {
  display: block;
  font-size: 11px;
  color: #687b60;
  overflow-wrap: anywhere;
  margin-top: 6px;
}
.guide-download-row strong {
  font-size: 14px;
}
#guide-whatsapp[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
#guide-share-text {
  min-height: 175px;
  resize: vertical;
}
@media (max-width: 600px) {
  .guide-link-panel {
    padding: 21px;
  }
  .guide-link-actions .btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
  .guide-download-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .guide-download-row .guide-link-actions {
    width: 100%;
  }
  #guide-share-phone,
  #guide-share-text {
    font-size: 16px;
  }
}

/* ===== Ajustes da versão 9.1 ===== */
.channel-count {
  font-weight: 600;
}
.channel-booking {
  color: #1755a0;
}
.channel-airbnb {
  color: #a33148;
}
.channel-mixed {
  color: #6d5324;
}
#upload-progress progress {
  width: 100%;
}
.stay-card {
  padding: 18px;
}
.pay-waiting {
  background: #e3ecf6;
  color: #1f4f82;
}
.receivables-panel .row-actions {
  align-items: center;
}
.forgot-password {
  margin-top: 14px;
}
.telegram-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e4e7da;
}
.telegram-person small {
  display: block;
  color: #75866a;
}
.telegram-person.pending strong {
  color: #8a6a12;
}