/* responsivo: estilos compartilhados. */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (min-width: 1600px) {
  .workspace {
    max-width: 1480px;
    margin: auto;
  }
  .shell {
    gap: 32px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 194px;
    padding-left: 9px;
    padding-right: 9px;
  }
  .shell {
    gap: 18px;
    padding: 15px;
  }
  .brand {
    font-size: 19px;
    padding-left: 6px;
  }
  .nav-item {
    font-size: 12px;
    padding: 12px 9px;
    gap: 10px;
  }
  .split,
  .split.wide {
    grid-template-columns: minmax(220px, 34%) 1fr;
  }
  .card {
    padding: 19px;
  }
  .chat-info {
    width: 210px;
  }
  .chat-list {
    width: 225px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .settings {
    grid-template-columns: 200px 1fr;
  }
  .head {
    align-items: flex-start;
  }
  h1 {
    font-size: 29px;
  }
}
@media (max-width: 950px) {
  .sidebar {
    width: 72px;
  }
  .brand {
    justify-content: center;
    padding-bottom: 24px;
  }
  .brand div {
    display: none;
  }
  .brand .icon {
    width: 37px;
  }
  .nav-item {
    justify-content: center;
    font-size: 0;
    padding: 14px;
  }
  .nav-item .icon {
    width: 22px;
    height: 22px;
  }
  .settings {
    grid-template-columns: 170px 1fr;
  }
  .chat-info {
    position: fixed;
    right: 20px;
    top: 150px;
    bottom: 30px;
    overflow: auto;
    width: 290px;
    box-shadow: 0 10px 50px #0003;
    z-index: 20;
  }
  .demo {
    max-width: 220px;
  }
  .chat-list {
    width: 220px;
  }
  .reminder-row {
    grid-template-columns: 1fr 1fr 0.6fr;
  }
  .reminder-row > :last-child {
    grid-column: 1/-1;
    justify-self: end;
  }
  .grid2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .shell {
    padding: 10px;
    gap: 0;
  }
  .sidebar {
    position: fixed;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 225px;
    height: auto;
    transform: translateX(-250px);
    transition: transform 0.25s;
    box-shadow: 0 20px 80px #23244140;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar.open .brand div {
    display: block;
  }
  .sidebar.open .nav-item {
    font-size: 13px;
    justify-content: flex-start;
  }
  .mobile-menu {
    display: flex;
    margin-right: 8px;
  }
  .workspace {
    padding: 5px 0 20px;
    width: 100%;
  }
  .topbar {
    margin-bottom: 22px;
  }
  .demo {
    font-size: 9px;
  }
  .head {
    display: block;
    margin-bottom: 22px;
  }
  .head .actions {
    margin-top: 16px;
  }
  h1 {
    font-size: 28px;
  }
  .head p {
    font-size: 13px;
  }
  .split,
  .split.wide {
    grid-template-columns: 1fr;
  }
  .split > .card:first-child {
    max-height: 320px;
    overflow: auto;
  }
  .card {
    padding: 18px;
    border-radius: 16px;
  }
  .metrics {
    gap: 10px;
  }
  .metric {
    padding: 15px;
    gap: 8px;
  }
  .metric strong {
    font-size: 25px;
  }
  .metric small {
    font-size: 10px;
  }
  .welcome {
    padding: 22px;
  }
  .welcome h2 {
    font-size: 23px;
  }
  .welcome .art {
    display: none;
  }
  .profile small {
    display: none;
  }
  .tabs {
    gap: 5px;
  }
  .tab {
    padding: 10px;
    font-size: 11px;
    flex: 1;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field.full {
    grid-column: auto;
  }
  .settings {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    display: flex;
    overflow: auto;
    padding: 8px;
  }
  .settings-nav button {
    width: auto;
    white-space: nowrap;
    padding: 12px;
  }
  .settings-nav button small {
    display: none;
  }
  .settings-nav button .icon {
    display: none;
  }
  .setting-section {
    padding: 20px 0;
  }
  .theme-options {
    gap: 8px;
  }
  .theme-choice {
    font-size: 12px;
    padding: 8px;
  }
  .theme-preview {
    height: 50px;
  }
  .reminder-row {
    grid-template-columns: 1fr auto;
    gap: 10px;
    font-size: 12px;
  }
  .reminder-row > *:nth-child(2) {
    grid-column: 1;
  }
  .reminder-row > *:nth-child(3) {
    grid-row: 1;
    grid-column: 2;
  }
  .reminder-row > :last-child {
    grid-column: 2;
    grid-row: 2;
  }
  .chat-layout {
    height: calc(100dvh - 240px);
    min-height: 480px;
    gap: 8px;
  }
  .chat-list {
    width: 64px;
    padding: 10px 5px;
  }
  .chat-list .search,
  .chat-list .tabs,
  .chat-list .section-label,
  .chat-list .list-item .grow,
  .chat-list .list-item .badge-count,
  .chat-list > .foot {
    display: none;
  }
  .chat-list .list-item {
    padding: 12px 5px;
    justify-content: center;
  }
  .chat-main {
    padding: 14px;
  }
  .chat-header h3 {
    font-size: 14px;
  }
  .chat-header .bubble-icon {
    display: none;
  }
  .message {
    max-width: 95%;
    gap: 6px;
  }
  .message .text {
    font-size: 12px;
    padding: 10px;
  }
  .messages .avatar {
    width: 25px;
    height: 25px;
    font-size: 20px;
  }
  .chat-info {
    top: 200px;
    right: 10px;
    bottom: 20px;
  }
  .assistant-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .assistant-action {
    padding: 14px 10px;
    display: block;
  }
  .assistant-action .icon {
    margin-bottom: 6px;
  }
  .login {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .login-art {
    display: none;
  }
  .reference-grid {
    grid-template-columns: 1fr;
  }
  .foot {
    flex-wrap: wrap;
  }
  .btn {
    font-size: 12px;
  }
  .details-grid {
    padding: 14px;
    gap: 15px;
  }
  .log {
    gap: 10px;
  }
  .log time {
    font-size: 10px;
  }
  .changes {
    flex-direction: column;
    gap: 8px;
  }
  .modal {
    padding: 22px;
  }
  .reminder-header {
    display: none;
  }
}

/* Narrow screens keep each section on its own row, including custom desktop grids. */
@media (max-width: 700px) {
  .split[style] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .head .actions {
    gap: 7px;
  }
  .details-grid .datum {
    overflow-wrap: anywhere;
  }
  .chat-header {
    gap: 5px;
  }
  .chat-header button {
    gap: 4px;
  }
  .chat-header h3 {
    overflow-wrap: anywhere;
  }
  .composer .iconbtn {
    min-width: 30px;
  }
  .reminder-row .btn {
    white-space: normal;
    text-align: center;
  }
  .setting-section .tabs {
    flex-wrap: wrap;
  }
  .theme-options {
    min-width: 0;
  }
  .theme-choice {
    min-width: 0;
  }
}
@media (min-width: 701px) and (max-width: 950px) {
  .nav-item {
    font-size: 0;
  }
}
@media (max-width: 700px) {
  .sidebar .nav-item {
    font-size: calc(13px * var(--scale));
  }
}

table,
.btn,
.patient,
.list-item,
.datum {
  font-size: calc(13px * var(--scale));
}