/*
 * Camada visual opcional para Admin e Agentes de Saúde.
 * Não altera formulários, IDs, permissões, fila offline ou sincronização.
 */
@media screen {
  body.layout-novo {
    --layout-bg-top: #dcece8;
    --layout-bg: #c8ddd8;
    --layout-bg-2: #b8d0ca;
    --layout-card: rgba(235, 246, 243, .96);
    --layout-card-strong: rgba(248, 252, 251, .92);
    --layout-text: #0f2c32;
    --layout-muted: #465f66;
    --layout-line: #96bbb5;
    --layout-primary: #046f66;
    --layout-primary-dark: #033f3c;
    --layout-soft: #b0d8d1;
    --layout-shadow: 0 16px 42px rgba(9, 45, 50, .18);
    color: var(--layout-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 10% -6%, rgba(4, 111, 102, .30), transparent 30rem),
      radial-gradient(circle at 88% 2%, rgba(12, 88, 170, .16), transparent 31rem),
      linear-gradient(180deg, var(--layout-bg-top), var(--layout-bg) 50%, var(--layout-bg-2));
    background-attachment: fixed;
  }

  body.layout-novo .companion-layout-control {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgba(4, 111, 102, .20);
    border-radius: 13px;
    background: rgba(247, 252, 250, .82);
    color: #0b4f4a;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
  }

  body.layout-novo .companion-layout-control select {
    width: auto;
    min-height: 30px;
    padding: 4px 26px 4px 8px;
    border-color: rgba(4, 111, 102, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    color: #0a3035;
    font-weight: 800;
  }

  /* Admin */
  body.layout-novo .login-wrap {
    background:
      radial-gradient(circle at 20% 0%, rgba(4, 111, 102, .28), transparent 26rem),
      linear-gradient(180deg, var(--layout-bg-top), var(--layout-bg));
  }

  body.layout-novo .login-wrap .login-card {
    border-color: rgba(4, 111, 102, .24);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(247, 252, 250, .98), rgba(218, 238, 233, .96));
    box-shadow: 0 24px 60px rgba(8, 51, 57, .22);
  }

  body.layout-novo .admin-brand-logo {
    display: block;
    width: 118px;
    max-width: 100%;
    height: auto;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 10px 28px rgba(8, 51, 57, .09);
  }

  body.layout-novo .login-wrap .admin-brand-logo {
    justify-self: center;
  }

  body.layout-novo .admin-brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  body.layout-novo .admin-brand-lockup .admin-brand-logo {
    width: 72px;
  }

  body.layout-novo #adminView .topbar {
    position: sticky;
    margin: 14px auto 0;
    width: min(1180px, calc(100% - 2rem));
    padding: 14px 16px;
    border: 1px solid rgba(4, 111, 102, .20);
    border-radius: 18px;
    background: rgba(226, 241, 237, .90);
    box-shadow: 0 12px 34px rgba(8, 51, 57, .14);
    backdrop-filter: blur(12px);
  }

  body.layout-novo #adminView .content {
    gap: 14px;
  }

  body.layout-novo #adminView .panel,
  body.layout-novo #adminView .summary article,
  body.layout-novo #adminView .profile-card,
  body.layout-novo #adminView .task-group,
  body.layout-novo #adminView .calc-preview,
  body.layout-novo #adminView .calc-grid article,
  body.layout-novo #adminView details {
    border-color: rgba(4, 111, 102, .20);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(246, 252, 250, .96), rgba(226, 242, 238, .92));
    box-shadow: 0 12px 28px rgba(8, 51, 57, .09);
  }

  body.layout-novo #adminView input,
  body.layout-novo #adminView select {
    border-color: rgba(4, 111, 102, .22);
    border-radius: 11px;
    background: rgba(255, 255, 255, .78);
    color: var(--layout-text);
  }

  body.layout-novo #adminView button {
    border-radius: 11px;
  }

  body.layout-novo #adminView button:not(.danger):not(.secondary) {
    border-color: transparent;
    background: linear-gradient(135deg, #0b857b, #046f66);
    color: #fff;
  }

  body.layout-novo #adminView .secondary {
    border-color: rgba(4, 111, 102, .20);
    background: rgba(247, 252, 250, .78);
    color: #06423d;
  }

  body.layout-novo #adminView .quick-config {
    border-color: rgba(4, 111, 102, .20);
    border-left-color: #0f8f84;
    border-radius: 16px;
    background: rgba(230, 245, 241, .82);
  }

  body.layout-novo #adminView .summary strong,
  body.layout-novo #adminView .calc-grid strong {
    color: #046f66;
  }

  body.layout-novo #adminView .task-chip-list label {
    border-color: rgba(4, 111, 102, .20);
    background: rgba(230, 245, 241, .86);
    color: #06423d;
  }

  /* Agentes de Saúde */
  body.layout-novo .wrap > .top {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(4, 111, 102, .20);
    border-radius: 18px;
    background: rgba(226, 241, 237, .88);
    box-shadow: 0 12px 34px rgba(8, 51, 57, .14);
  }

  body.layout-novo .wrap > .top .brand img {
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 10px 28px rgba(8, 51, 57, .09);
  }

  body.layout-novo .wrap > .top .brand {
    min-width: 0;
  }

  body.layout-novo .wrap > .top .brand h1 {
    max-width: 360px;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.05;
  }

  body.layout-novo .wrap > .panel,
  body.layout-novo .wrap > .panel-tabs,
  body.layout-novo .wrap .tutorial-card,
  body.layout-novo .wrap .queue-item,
  body.layout-novo .wrap .choice,
  body.layout-novo .wrap .info-card {
    border-color: rgba(4, 111, 102, .20);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(246, 252, 250, .96), rgba(226, 242, 238, .92));
    box-shadow: 0 12px 28px rgba(8, 51, 57, .09);
  }

  body.layout-novo .wrap .panel-tab {
    border-radius: 12px;
  }

  body.layout-novo .wrap .panel-tab.active,
  body.layout-novo .wrap .choice.active,
  body.layout-novo .wrap button[type="submit"],
  body.layout-novo .wrap #installAppButton {
    border-color: transparent;
    background: linear-gradient(135deg, #0b857b, #046f66);
    color: #fff;
  }

  body.layout-novo .wrap .panel-tab.active strong,
  body.layout-novo .wrap .choice.active strong {
    color: #fff;
  }

  body.layout-novo .wrap .secondary,
  body.layout-novo .wrap .pill {
    border-color: rgba(4, 111, 102, .20);
    background: rgba(247, 252, 250, .78);
    color: #06423d;
  }

  body.layout-novo .wrap input,
  body.layout-novo .wrap select,
  body.layout-novo .wrap textarea {
    border-color: rgba(4, 111, 102, .22);
    border-radius: 11px;
    background: rgba(255, 255, 255, .78);
    color: var(--layout-text);
  }
}

@media screen and (max-width: 760px) {
  body.layout-novo {
    background-attachment: scroll;
  }

  body.layout-novo #adminView .topbar,
  body.layout-novo .wrap > .top {
    position: static;
    display: grid;
    gap: 12px;
  }

  body.layout-novo #adminView .top-actions,
  body.layout-novo .wrap > .top > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body.layout-novo .companion-layout-control,
  body.layout-novo #adminIdentity,
  body.layout-novo #connectionStatus {
    grid-column: 1 / -1;
    width: 100%;
  }
}