:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    #302d29;

  background:
    #f4f1eb;

  font-synthesis:
    none;
}

* {
  box-sizing:
    border-box;
}

body {
  margin:
    0;

  min-height:
    100vh;

  background:
    linear-gradient(
      135deg,
      #f7f5f0 0%,
      #eee9df 100%
    );
}

button,
input {
  font:
    inherit;
}

button {
  cursor:
    pointer;
}

.hidden {
  display:
    none !important;
}

.login-page {
  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    32px;
}

.login-card {
  width:
    min(
      430px,
      100%
    );

  padding:
    42px;

  background:
    rgba(
      255,
      255,
      255,
      0.95
    );

  border:
    1px solid
    #e5dfd3;

  border-radius:
    24px;

  box-shadow:
    0 30px 80px
    rgba(
      50,
      43,
      31,
      0.12
    );
}

.brand-mark {
  width:
    52px;

  height:
    52px;

  border-radius:
    16px;

  display:
    grid;

  place-items:
    center;

  background:
    #c6a96b;

  color:
    white;

  font-weight:
    800;

  font-size:
    20px;

  box-shadow:
    0 10px 30px
    rgba(
      198,
      169,
      107,
      0.28
    );
}

.login-card h1 {
  margin:
    24px 0 8px;

  font-size:
    28px;
}

.login-card p {
  margin:
    0 0 30px;

  color:
    #7a746b;

  line-height:
    1.5;
}

.field {
  display:
    grid;

  gap:
    7px;

  margin-bottom:
    16px;
}

.field label {
  font-size:
    13px;

  font-weight:
    700;

  color:
    #5b554d;
}

.field input {
  width:
    100%;

  padding:
    13px 14px;

  border:
    1px solid
    #dcd5c9;

  border-radius:
    11px;

  outline:
    none;

  background:
    #fff;
}

.field input:focus {
  border-color:
    #c6a96b;

  box-shadow:
    0 0 0 3px
    rgba(
      198,
      169,
      107,
      0.15
    );
}

.primary-button {
  width:
    100%;

  border:
    0;

  border-radius:
    11px;

  padding:
    13px 18px;

  background:
    #342f29;

  color:
    white;

  font-weight:
    700;
}

.primary-button:hover {
  background:
    #201d1a;
}

.error {
  min-height:
    20px;

  margin:
    10px 0;

  color:
    #a33d3d;

  font-size:
    13px;
}

.shell {
  min-height:
    100vh;

  display:
    grid;

  grid-template-columns:
    250px
    1fr;
}

.sidebar {
  padding:
    28px 20px;

  background:
    #312d28;

  color:
    white;

  display:
    flex;

  flex-direction:
    column;

  min-height:
    100vh;
}

.brand {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    0 6px 28px;
}

.brand strong {
  display:
    block;

  font-size:
    15px;
}

.brand span {
  display:
    block;

  margin-top:
    3px;

  color:
    #bcb5aa;

  font-size:
    12px;
}

.nav {
  display:
    grid;

  gap:
    7px;
}

.nav-item {
  padding:
    11px 13px;

  border-radius:
    10px;

  color:
    #d8d2c8;

  font-size:
    14px;

  font-weight:
    600;
}

.nav-item.active {
  background:
    rgba(
      198,
      169,
      107,
      0.16
    );

  color:
    #efdba9;
}

.sidebar-footer {
  margin-top:
    auto;

  padding:
    20px 6px 0;

  color:
    #aaa399;

  font-size:
    12px;
}

.content {
  padding:
    36px 42px 60px;

  min-width:
    0;
}

.topbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    32px;
}

.eyebrow {
  margin:
    0 0 6px;

  color:
    #9b7f45;

  font-size:
    12px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}

.topbar h1 {
  margin:
    0;

  font-size:
    30px;
}

.actions {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.secondary-button,
.new-button,
.logout-button {
  border-radius:
    10px;

  padding:
    10px 14px;

  font-weight:
    700;

  border:
    1px solid
    #d9d1c4;

  background:
    white;

  color:
    #49443d;
}

.new-button {
  border-color:
    #342f29;

  background:
    #342f29;

  color:
    white;
}

.summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;

  margin-bottom:
    26px;
}

.summary-card {
  padding:
    22px;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  border:
    1px solid
    #e3ddd2;

  border-radius:
    16px;
}

.summary-card span {
  color:
    #817a70;

  font-size:
    13px;
}

.summary-card strong {
  display:
    block;

  margin-top:
    8px;

  font-size:
    30px;
}

.section-title {
  margin:
    0 0 14px;

  font-size:
    18px;
}

.instances {
  display:
    grid;

  gap:
    13px;
}

.instance {
  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  border:
    1px solid
    #e3ddd2;

  border-radius:
    16px;

  padding:
    20px 22px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    20px;

  align-items:
    center;
}

.instance-main {
  min-width:
    0;
}

.instance-name {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-bottom:
    7px;
}

.instance-name strong {
  font-size:
    16px;
}

.status-dot {
  width:
    9px;

  height:
    9px;

  border-radius:
    999px;

  background:
    #aaa;
}

.status-dot.online {
  background:
    #3f9d68;

  box-shadow:
    0 0 0 4px
    rgba(
      63,
      157,
      104,
      0.12
    );
}

.status-dot.offline {
  background:
    #bd4a4a;
}

.domain {
  color:
    #777066;

  font-size:
    13px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    12px;
}

.badge {
  padding:
    5px 8px;

  border-radius:
    999px;

  background:
    #f2eee6;

  color:
    #665f55;

  font-size:
    11px;

  font-weight:
    700;
}

.instance-status {
  text-align:
    right;

  min-width:
    105px;
}

.instance-status strong {
  display:
    block;

  font-size:
    12px;
}

.instance-status span {
  display:
    block;

  margin-top:
    5px;

  color:
    #888177;

  font-size:
    11px;
}

.modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    100;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(
      22,
      20,
      17,
      0.48
    );

  backdrop-filter:
    blur(
      4px
    );
}

.modal {
  width:
    min(
      560px,
      100%
    );

  border-radius:
    20px;

  background:
    white;

  padding:
    28px;

  box-shadow:
    0 30px 100px
    rgba(
      0,
      0,
      0,
      0.24
    );
}

.modal h2 {
  margin:
    0 0 8px;
}

.modal p {
  color:
    #777066;

  line-height:
    1.55;
}

.modal-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}

.modal-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    9px;

  margin-top:
    24px;
}

.notice {
  padding:
    12px 14px;

  margin:
    16px 0;

  border-radius:
    10px;

  background:
    #faf6eb;

  border:
    1px solid
    #eadcb8;

  color:
    #6b5933;

  font-size:
    13px;
}

@media (
  max-width: 900px
) {
  .shell {
    grid-template-columns:
      1fr;
  }

  .sidebar {
    display:
      none;
  }

  .content {
    padding:
      26px 18px 50px;
  }

  .summary {
    grid-template-columns:
      1fr;
  }
}

@media (
  max-width: 600px
) {
  .topbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .actions {
    width:
      100%;
  }

  .new-button,
  .secondary-button {
    flex:
      1;
  }

  .instance {
    grid-template-columns:
      1fr;
  }

  .instance-status {
    text-align:
      left;
  }

  .modal-grid {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   MARCELLA_PLATFORM_VALIDATE_V1
   Nova clínica - validação de provisionamento
   ========================================================= */

.modal--provision {
  width:
    min(
      760px,
      calc(
        100vw - 32px
      )
    );

  max-height:
    calc(
      100vh - 40px
    );

  overflow:
    auto;
}

.modal-heading {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;
}

.modal-heading h2 {
  margin:
    0;
}

.modal-description {
  margin:
    10px 0 18px !important;
}

.modal-close {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid #ddd5c8;

  border-radius:
    10px;

  background:
    #fff;

  color:
    #5f584e;

  font-size:
    22px;

  line-height:
    1;
}

.domain-field {
  display:
    flex;

  align-items:
    stretch;
}

.domain-field input {
  border-radius:
    11px 0 0 11px;
}

.domain-field span {
  display:
    flex;

  align-items:
    center;

  padding:
    0 12px;

  border:
    1px solid #dcd5c9;

  border-left:
    0;

  border-radius:
    0 11px 11px 0;

  background:
    #f5f1e9;

  color:
    #777066;

  white-space:
    nowrap;

  font-size:
    12px;
}

.areas-box {
  margin-top:
    6px;

  padding:
    16px;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    14px;

  border:
    1px solid #e2dbcf;

  border-radius:
    12px;

  background:
    #faf8f4;
}

.areas-title {
  width:
    100%;

  color:
    #5b554d;

  font-size:
    13px;

  font-weight:
    700;
}

.area-option {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #4e4942;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;
}

.area-option input {
  width:
    17px;

  height:
    17px;

  accent-color:
    #a7833e;
}

.validation-result {
  margin-top:
    18px;

  padding:
    18px;

  border:
    1px solid #ddd5c8;

  border-radius:
    14px;

  background:
    #faf9f7;
}

.validation-result--ok {
  border-color:
    #bad9c6;

  background:
    #f4faf6;
}

.validation-result--fail {
  border-color:
    #e5c3bd;

  background:
    #fff7f5;
}

.validation-header {
  display:
    grid;

  gap:
    4px;

  margin-bottom:
    16px;
}

.validation-header strong {
  font-size:
    15px;
}

.validation-header span {
  color:
    #756e65;

  font-size:
    12px;
}

.validation-checks {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px 14px;
}

.validation-check {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #5f594f;

  font-size:
    12px;
}

.validation-icon {
  width:
    20px;

  height:
    20px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  border-radius:
    999px;

  font-weight:
    900;
}

.validation-icon.ok {
  background:
    #ddefe4;

  color:
    #277448;
}

.validation-icon.fail {
  background:
    #f5ded9;

  color:
    #a23e33;
}

.validation-proposal {
  margin-top:
    18px;

  padding-top:
    16px;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    13px;

  border-top:
    1px solid #e0d9cd;
}

.validation-proposal div {
  min-width:
    0;
}

.validation-proposal span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    #8b8378;

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .06em;
}

.validation-proposal strong {
  display:
    block;

  overflow-wrap:
    anywhere;

  color:
    #423d36;

  font-size:
    12px;
}

.validation-safe {
  margin-top:
    16px;

  padding:
    10px 12px;

  border-radius:
    9px;

  background:
    rgba(
      198,
      169,
      107,
      .14
    );

  color:
    #6a5936;

  font-size:
    11px;

  font-weight:
    700;
}

.new-button:disabled {
  cursor:
    wait;

  opacity:
    .65;
}

@media (
  max-width: 680px
) {
  .validation-checks,
  .validation-proposal {
    grid-template-columns:
      1fr;
  }

  .domain-field {
    display:
      block;
  }

  .domain-field input {
    border-radius:
      11px;
  }

  .domain-field span {
    margin-top:
      5px;

    padding:
      0;

    border:
      0;

    background:
      transparent;
  }
}