/*
 * Skin "Nuvem suave" (Opção E, aprovada pelo cliente) — porte fiel da
 * estrutura do artefato aprovado (.frame > .side-card + .main), não mais
 * uma tentativa de reskin por cima da moldura antiga.
 *
 * Ativado por ClinicaMedico::usaLayoutNovo(). layouts/app.blade.php decide
 * qual moldura completa emitir (.frame/.side-card/.main aqui, ou
 * .main-container/.main-side-nav/.main-content na skin atual) — nenhuma
 * página de conteúdo precisa saber qual das duas está ativa.
 *
 * partials/inc_sidebar.blade.php é compartilhado pelas duas skins (mesma
 * lógica de menu por perfil) — só ganha a classe "side-card" e o bloco de
 * marca quando esta skin está ativa; a lista de itens continua sendo
 * <ul class="main-side-menu"><li class="side-menu-item"><a>...</a></li>,
 * só estilizada de outro jeito aqui (não precisa duplicar HTML).
 */

body.skin-nuvem-suave {
  --paper: #e9f2fa;
  --surface: #ffffff;
  --surface-2: #f0f5fa;
  --line: #dfe8f1;
  --ink: #22303e;
  --slate: #62717f;
  --slate-soft: #8d9aa7;
  --blue: #3395de;
  --blue-deep: #1e79bc;
  --blue-wash: #e3f1fc;
  --orange: #f7921c;
  --orange-deep: #d97c0d;
  --orange-wash: #fdf0df;
  --success: #21a06d;
  --success-wash: #e2f5ec;
  --danger: #d6493f;
  --danger-wash: #fceceb;
  --shadow: 0 2px 4px rgba(30,60,90,.04), 0 14px 34px -16px rgba(30,60,90,.18);
  --radius: 18px;
  --radius-sm: 12px;

  background: var(--paper);
  color: var(--ink);
  font-family: Montserrat, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.skin-nuvem-suave * { box-sizing: border-box; }
body.skin-nuvem-suave h1,
body.skin-nuvem-suave h2,
body.skin-nuvem-suave h3 { text-wrap: balance; }

/* ---------- Menu mobile (próprio desta skin, independente do collapse antigo) ---------- */
body.skin-nuvem-suave .mobile-menu-btn {
  display: none;
  position: fixed; top: 14px; left: 14px; z-index: 61;
  width: 40px; height: 40px; border-radius: 99px; border: none;
  background: var(--surface); color: var(--slate); cursor: pointer;
  box-shadow: var(--shadow);
  align-items: center; justify-content: center;
}
body.skin-nuvem-suave .mobile-menu-btn svg { width: 18px; height: 18px; }
body.skin-nuvem-suave .mobile-menu-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 59;
  background: rgba(10,20,35,.45);
}

/* ---------- Moldura ---------- */
body.skin-nuvem-suave .frame {
  display: flex; gap: 18px;
  padding: 18px;
  min-height: 100vh;
  max-width: 1400px; margin: 0 auto;
  align-items: flex-start;
}

/* ---------- Sidebar flutuante (reaproveita partials/inc_sidebar.blade.php) ---------- */
body.skin-nuvem-suave .side-card {
  width: 240px; flex: none;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 14px;
  align-self: flex-start;
  position: sticky; top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  scrollbar-width: thin;
}
body.skin-nuvem-suave .side-card::-webkit-scrollbar { width: 6px; }
body.skin-nuvem-suave .side-card::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
body.skin-nuvem-suave .side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; }
body.skin-nuvem-suave .brand-tile {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(51,149,222,.55);
}
body.skin-nuvem-suave .brand-tile img { width: 25px; height: auto; }
body.skin-nuvem-suave .brand-name { line-height: 1.15; }
body.skin-nuvem-suave .brand-name b { display: block; font-size: 13px; font-weight: 700; }
body.skin-nuvem-suave .brand-name small { color: var(--blue); font-size: 11px; font-weight: 600; }

body.skin-nuvem-suave .main-side-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
body.skin-nuvem-suave .side-menu-item {
  display: block;
  margin: 2px 0;
}
body.skin-nuvem-suave .side-menu-item > a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--slate); text-decoration: none;
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
body.skin-nuvem-suave .side-menu-item > a:hover { background: var(--surface-2); color: var(--ink); }
body.skin-nuvem-suave .side-menu-item > a.is-active {
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(51,149,222,.65);
}
body.skin-nuvem-suave .side-menu-item > a i { width: 17px; text-align: center; flex: none; }
body.skin-nuvem-suave .side-menu-item > a .fa-lock { width: auto; margin-left: 4px; opacity: .7; font-size: .78em !important; }
body.skin-nuvem-suave .item-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate-soft); padding: 16px 12px 6px; display: block;
}
body.skin-nuvem-suave .main-side-menu > .side-menu-item:first-child .item-label { padding-top: 0; }

/* ---------- Área principal ---------- */
body.skin-nuvem-suave .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* .main só espaça (gap:16px) seus FILHOS DIRETOS — quando vários .card
   ficam dentro de um único <form> (usuario/meucadastro.blade.php), o form
   é o filho direto e os cards dentro dele ficam colados (.card não tem
   margem própria). Aplicado só aqui via .stack por enquanto — se ficar
   bom, replicar pras outras telas com o mesmo padrão (várias .card num
   <form> só, ex.: medico/cadastro.blade.php). */
body.skin-nuvem-suave form.stack { display: flex; flex-direction: column; gap: 16px; }

body.skin-nuvem-suave .top-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
body.skin-nuvem-suave .top-row .greet { flex: 1; min-width: 0; }
body.skin-nuvem-suave .top-row .greet h1 { font-size: 19px; font-weight: 700; margin: 0; }
body.skin-nuvem-suave .top-row .greet .sub { font-size: 12.5px; color: var(--slate); margin-top: 3px; }

body.skin-nuvem-suave .icon-btn {
  width: 38px; height: 38px; border-radius: 99px; border: none;
  background: var(--surface); color: var(--slate); cursor: pointer; flex: none;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .icon-btn:hover { color: var(--blue-deep); }
body.skin-nuvem-suave .icon-btn i { font-size: 14px; }
body.skin-nuvem-suave .icon-btn .notification-number {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 99px; min-width: 15px; height: 15px; line-height: 15px; text-align: center;
}
body.skin-nuvem-suave .icon-btn { position: relative; }

/* Usa o mesmo comportamento de abrir/fechar já existente
   (.js-show-user-actions / .show-user-actions), só reestilizado. */
body.skin-nuvem-suave .user-block { position: relative; }
body.skin-nuvem-suave .user-profile-button {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer;
  border: none; font-family: inherit;
}
body.skin-nuvem-suave .user-profile-img {
  width: 29px; height: 29px; border-radius: 99px; flex: none; object-fit: cover;
  background: linear-gradient(155deg, var(--orange) 0%, #c26e08 100%);
}
body.skin-nuvem-suave .user-profile-initials {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
body.skin-nuvem-suave .user-profile-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
body.skin-nuvem-suave .user-profile-icon { font-size: 11px; color: var(--slate-soft); }
body.skin-nuvem-suave .actions-block {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow);
  min-width: 180px; padding: 8px;
}
body.skin-nuvem-suave .show-user-actions .actions-block { display: block; }
body.skin-nuvem-suave .actions-block ul { list-style: none; margin: 0; padding: 0; }
body.skin-nuvem-suave .actions-block .user-profile-name {
  display: block; padding: 8px 10px 10px; font-size: 12.5px; color: var(--slate);
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
body.skin-nuvem-suave .action-block-button {
  display: block; padding: 9px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer;
}
body.skin-nuvem-suave .action-block-button:hover { background: var(--surface-2); }

/* ---------- Cabeçalho "controls" (título + contagem + ação primária, tudo
   numa linha só, igual ao protótipo — usado nas telas que preferem esse
   padrão ao .content-header genérico) ---------- */
body.skin-nuvem-suave .controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
body.skin-nuvem-suave .view-title { font-size: 16px; font-weight: 700; margin: 0; }
body.skin-nuvem-suave .view-title-count { font-size: 12px; color: var(--slate-soft); font-weight: 600; }
body.skin-nuvem-suave .top-spacer { flex: 1; }

/* Barra de filtros em pílulas (mesmo idioma visual do .head-search do
   protótipo), usada nas telas de listagem que têm busca/filtro real.
   A altura é definida SÓ na linha (.filter-row); cada filho não declara
   a própria altura — em vez disso "align-items: stretch" (padrão do
   flexbox) obriga todos a ocuparem exatamente a altura da linha. Tentar
   dar height:32px em cada elemento individualmente (pílula, select nativo,
   botão) não funcionou: cada tipo de elemento calcula sua altura
   "preferida" de um jeito diferente e ligeiramente incompatível entre
   navegadores, e ficavam desalinhados mesmo com o mesmo height declarado. */
body.skin-nuvem-suave .filter-bar { padding: 12px 14px; margin-bottom: 16px; }
body.skin-nuvem-suave .filter-row {
  display: flex; align-items: stretch; height: 34px; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
}
/* .filter-field é um <label> — o reset genérico mais abaixo neste arquivo
   (`label:not(.label-search-bar):not(.side-menu-item){display:block}`,
   especificidade 0,3,2) tem MAIS especificidade que um `.filter-field`
   isolado (0,2,1) e vencia o display:flex daqui. Ficava mascarado enquanto
   o campo era largo o bastante pra ícone+input caberem numa linha mesmo em
   block/inline; encolher o campo (ver tela financeiro/clinicas) expôs o
   bug: o input, sem flex de verdade, mantinha sua largura intrínseca
   (~20ch) e "quebrava linha" por baixo do ícone, vazando texto pra fora
   da pílula. Encadear com os ancestrais reais (.filter-bar .filter-row)
   sobe a especificidade pra 0,4,1 e garante a vitória. Mesmo padrão do
   fix do multiselect logo abaixo neste arquivo. */
body.skin-nuvem-suave .filter-bar .filter-row .filter-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border-radius: 99px;
  height: 100%; padding: 0 14px; color: var(--slate-soft);
  flex: 1 1 90px; min-width: 90px; margin: 0; box-sizing: border-box;
}
/* Caixa fixa e centralizada por flex pro ícone, pra não depender do
   line-height interno da fonte do Font Awesome (a fonte tem métricas
   verticais bem maiores que o font-size nominal, o que empurrava o
   placeholder do input pra baixo dentro da pílula). */
body.skin-nuvem-suave .filter-field i {
  font-size: 12px; line-height: 1; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
}
/* !important necessário: o reset genérico de input[type=text] (mais
   abaixo neste arquivo) tem a MESMA especificidade e vence por ordem no
   arquivo, aplicando fundo/borda/radius próprios por cima do input que
   devia ficar transparente dentro da pílula — criava um efeito de "duas
   bordas" (o input branco com radius menor flutuando dentro da pílula
   cinza-azulada, que aparecia como uma sombra curva vazando na lateral).
   :not([type=checkbox]):not([type=radio]) é necessário: sem essa exclusão,
   um <input type="checkbox"> dentro de .filter-field (ex.: "Ocultar
   clínicas de teste" em clinica/filtros.blade.php) também herdava
   flex:1 1 auto!important + width:auto!important + height:100%, esticando
   a caixa do checkbox pra ~126x34px em vez do quadradinho nativo. */
body.skin-nuvem-suave .filter-field input:not([type="checkbox"]):not([type="radio"]) {
  border: none !important; background: transparent !important; outline: none;
  border-radius: 0 !important; box-shadow: none !important;
  color: var(--ink); font-size: 13px; flex: 1 1 auto !important; width: auto !important; min-width: 0;
  font-family: inherit; padding: 0 !important; height: 100%; line-height: 34px !important;
}
/* <select> nativo não respeita flex-basis pra encolher — sem width
   explícito, o navegador usa o tamanho "preferido" dele, que pode ficar
   bem maior que o conteúdo e tomar quase toda a linha, espremendo os
   outros campos a ponto de sumir o texto (só o ícone sobrava visível).
   -webkit-appearance:none + seta desenhada por CSS tira o select do
   controle do tema nativo do SO, que senão ignora boa parte do que a
   gente tenta controlar por CSS (padding, altura). box-sizing:border-box
   + height:100% (herdado do stretch da linha) definem a altura de verdade. */
body.skin-nuvem-suave .filter-select {
  border: none !important; border-radius: 99px; margin: 0 !important;
  background: var(--surface-2); color: var(--slate);
  height: 100% !important; padding: 0 26px 0 14px !important; font-size: 12.5px; white-space: nowrap;
  flex: 0 0 116px; width: 116px; max-width: 116px; box-sizing: border-box !important;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362717f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
}
/* Variante mais larga pra rótulos que não cabem nos 116px padrão (ex.:
   "Primeiro atendimento"/"Nova consulta" em atendimento/index.blade.php
   e busca.blade.php) - sem isso o texto simplesmente corta no meio,
   sem reticencias, porque <select> nao suporta text-overflow:ellipsis
   de forma confiavel entre navegadores. */
body.skin-nuvem-suave .filter-select.filter-select-wide {
  flex: 0 0 190px; width: 190px; max-width: 190px;
}
/* Precisa de !important: o botão genérico (button[type=submit]:not(...)x3)
   tem mais especificidade que .filter-row button (3 :not() + 1 atributo
   somam mais "classes" do que minhas 2 classes aqui), então o padding
   dele (10px 18px) vencia e deixava o botão mais alto que os campos. */
body.skin-nuvem-suave .filter-row button {
  height: 100% !important; padding: 0 16px !important; margin: 0 !important;
  flex: 0 0 auto; white-space: nowrap; box-sizing: border-box !important;
}
/* Mobile: em vez de espremer tudo numa linha só com scroll horizontal,
   cada controle empilha em sua própria linha, ocupando a largura toda. */
@media (max-width: 640px) {
  body.skin-nuvem-suave .filter-row {
    flex-wrap: wrap; align-items: stretch; height: auto; overflow-x: visible;
  }
  body.skin-nuvem-suave .filter-field {
    flex: 1 1 100%; width: 100%; height: 38px;
  }
  body.skin-nuvem-suave .filter-field input { line-height: 38px !important; }
  body.skin-nuvem-suave .filter-select {
    flex: 1 1 100% !important; width: 100% !important; max-width: none !important;
    height: 38px !important;
  }
  body.skin-nuvem-suave .filter-row button {
    flex: 1 1 100% !important; width: 100% !important; height: 38px !important;
    justify-content: center;
  }
}

/* ---------- Cabeçalho de cada página (dentro do conteúdo, não muda por página) ---------- */
body.skin-nuvem-suave .content-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: none; margin: 0; padding: 0 0 4px;
  flex-wrap: wrap;
}
body.skin-nuvem-suave .entry-title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
body.skin-nuvem-suave .entry-content { margin-top: 4px; width: 100%; position: static; }

/* ---------- Cartões e primitivos de conteúdo ---------- */
body.skin-nuvem-suave .inner-content { margin-top: 14px; }

/* .card fica SEM overflow:hidden de propósito: um menu suspenso (.actions-
   menu) dentro de uma tabela dentro de um .card precisa poder ultrapassar
   os limites do card pra aparecer inteiro — overflow:hidden aqui cortava
   ele. Quem corta os próprios cantos quadrados pra não furar o radius do
   card é a <table> (ver ".card table" mais abaixo), não o card. */
body.skin-nuvem-suave .card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  border: none;
}
body.skin-nuvem-suave .callout {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  border: none;
  overflow: hidden;
}
body.skin-nuvem-suave .callout,
body.skin-nuvem-suave .card-pad {
  padding: 18px 20px;
}
/* Mensagens flash (partials/inc_message) — wrapper Foundation .cell.large-4
   só existe para dar largura ao alerta fora de um grid-x real, então
   reescrevemos só quando envolve um alerta/sucesso, sem mexer em .cell
   de verdade (usado em vários grids do sistema). */
body.skin-nuvem-suave .cell.large-4:has(> .alert.callout),
body.skin-nuvem-suave .cell.large-4:has(> .success.callout) {
  width: 100%; margin: 0 0 18px;
}
body.skin-nuvem-suave .alert.callout,
body.skin-nuvem-suave .success.callout {
  position: relative; padding-right: 34px; box-shadow: none;
}
body.skin-nuvem-suave .alert.callout { background: var(--danger-wash); color: var(--danger); border-left: 3px solid var(--danger); }
body.skin-nuvem-suave .success.callout { background: var(--success-wash); color: var(--success); border-left: 3px solid var(--success); }
body.skin-nuvem-suave .alert.callout h5,
body.skin-nuvem-suave .success.callout h5 { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
body.skin-nuvem-suave .alert.callout p,
body.skin-nuvem-suave .success.callout p { margin: 0; font-size: 12.5px; }
body.skin-nuvem-suave .alert.callout .close-button,
body.skin-nuvem-suave .success.callout .close-button {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 16px; line-height: 1; color: inherit; opacity: .6; cursor: pointer;
}

body.skin-nuvem-suave table {
  width: 100%;
  font-size: 13px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  border-collapse: separate;
  border-spacing: 0;
}
/* Tabela dentro de .card (padrão do protótipo): a sombra/borda já vêm do
   card, a tabela por dentro fica "crua" pra não dobrar o visual. */
/* Nada de overflow:hidden aqui (nem no .card, ver acima): o .actions-menu
   suspenso fica dentro de um <td>, então qualquer overflow:hidden entre
   ele e a janela o corta. Em vez de cortar a tabela inteira, arredondamos
   só as 4 células de canto diretamente — mesmo efeito visual, sem cortar
   nada que precise ultrapassar os limites da tabela. */
body.skin-nuvem-suave .card table {
  border-radius: 0; overflow: visible;
  box-shadow: none; background: transparent; border-collapse: collapse;
}
body.skin-nuvem-suave .card table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-sm); }
body.skin-nuvem-suave .card table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-sm); }
body.skin-nuvem-suave .card table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-sm); }
body.skin-nuvem-suave .card table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-sm); }
body.skin-nuvem-suave td.nome { font-weight: 600; }
body.skin-nuvem-suave td.nome a { color: var(--ink); text-decoration: none; }
body.skin-nuvem-suave td.nome a:hover { color: var(--blue-deep); text-decoration: underline; }

/* Mobile: em vez de rolagem horizontal (que exigiria overflow:auto no
   container e voltaria a cortar o .actions-menu suspenso, ver acima),
   cada linha vira um cartão empilhado — usa os atributos data-label que
   já existiam no markup (herdados do padrão responsivo antigo, nunca
   tinham CSS correspondente na skin nova). */
@media (max-width: 640px) {
  body.skin-nuvem-suave .card table thead { display: none; }
  body.skin-nuvem-suave .card table,
  body.skin-nuvem-suave .card table tbody,
  body.skin-nuvem-suave .card table tr,
  body.skin-nuvem-suave .card table td {
    display: block; width: 100%;
  }
  body.skin-nuvem-suave .card table tr {
    padding: 12px 20px; border-bottom: 1px solid var(--line);
  }
  body.skin-nuvem-suave .card table tbody tr:last-child { border-bottom: none; }
  body.skin-nuvem-suave .card table td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 4px 0; border: none;
  }
  body.skin-nuvem-suave .card table td[data-label]:before {
    content: attr(data-label);
    font-size: 10px; font-weight: 700; color: var(--slate-soft);
    text-transform: uppercase; letter-spacing: .04em; flex: none;
  }
  body.skin-nuvem-suave .card table td:not([data-label]) {
    justify-content: flex-end; padding-top: 8px;
  }
}
body.skin-nuvem-suave .num-cell { font-variant-numeric: tabular-nums; color: var(--slate); }
body.skin-nuvem-suave thead th {
  background: var(--surface-2);
  color: var(--slate-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  padding: 13px 20px;
  border: none;
}
body.skin-nuvem-suave tbody td {
  padding: 13px 20px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--line);
}
body.skin-nuvem-suave tbody tr:last-child td { border-bottom: none; }
body.skin-nuvem-suave tbody tr:hover { background: var(--surface-2); }

/* Botões (genéricos, "Adicionar" no topo da página, CTA em cards) */
body.skin-nuvem-suave .button,
body.skin-nuvem-suave .action-nav-button,
body.skin-nuvem-suave button[type="submit"]:not(.mobile-menu-btn):not(.icon-btn):not(.user-profile-button) {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 99px;
  border: none;
  padding: 10px 18px;
  font-size: 13px; font-weight: 600;
  background: var(--surface-2); color: var(--ink);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}
body.skin-nuvem-suave .button:hover,
body.skin-nuvem-suave .action-nav-button:hover { filter: brightness(.97); }
body.skin-nuvem-suave .button.cta,
body.skin-nuvem-suave .action-nav-button,
body.skin-nuvem-suave button[type="submit"]:not(.mobile-menu-btn):not(.icon-btn):not(.user-profile-button):not(.small) {
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(247,146,28,.7);
}
body.skin-nuvem-suave .button.secondary {
  background: var(--surface-2); color: var(--slate); box-shadow: none;
}
body.skin-nuvem-suave .button.small { padding: 7px 14px; font-size: 12.5px; }
body.skin-nuvem-suave .action-nav { margin-bottom: 14px; }

/* Rótulos/pills de status */
body.skin-nuvem-suave .label {
  border-radius: 99px;
  font-weight: 700;
  font-size: 11px;
}

/* Barra de busca/filtros (form.search-bar) */
body.skin-nuvem-suave .search-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 16px;
}
body.skin-nuvem-suave .label-search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border-radius: 99px;
  padding: 8px 14px;
  color: var(--slate-soft);
  margin: 0;
}
/* Mesmo motivo do .filter-field input logo abaixo neste arquivo: precisa
   de !important pra vencer o reset genérico de input[type=text]/select
   que tem a mesma especificidade e vem depois no arquivo. */
body.skin-nuvem-suave .label-search-bar input,
body.skin-nuvem-suave .label-search-bar select {
  border: none !important; background: transparent !important; outline: none;
  border-radius: 0 !important; box-shadow: none !important;
  color: var(--ink); font-size: 13px; padding: 0 !important; margin: 0;
}
/* Sobrescreve o <style> legado embutido em layouts/app.blade.php
   (.search-bar.search-bar-filtros / seus selects), que teria
   especificidade maior que as regras genéricas acima e deixava os
   selects de Retorno/Cortesia com layout quebrado dentro desta skin. */
body.skin-nuvem-suave .search-bar.search-bar-filtros {
  max-width: none; flex: 1 1 auto; flex-wrap: wrap; align-items: center;
}
body.skin-nuvem-suave .search-bar.search-bar-filtros .label-search-bar {
  flex: 1 1 220px; min-width: 200px; margin-right: 0;
}
body.skin-nuvem-suave .search-bar.search-bar-filtros select {
  flex: 0 0 auto; width: auto; min-width: 0; margin-right: 0;
  border: 1px solid var(--blue-wash); border-radius: 99px;
  background: var(--blue-wash); color: var(--blue-deep); font-weight: 600;
  padding: 8px 16px; font-size: 12.5px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e79bc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
  padding-right: 30px;
}

/* Formulários (fora da barra de busca) */
body.skin-nuvem-suave label:not(.label-search-bar):not(.side-menu-item) {
  display: block; margin-bottom: 14px; font-size: 13px; color: var(--ink);
}
body.skin-nuvem-suave label > span:first-child {
  display: block; font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 5px;
}
/* app.min.css (Foundation) define input/select/textarea globais com
   height:2.5rem + line-height:2.5rem fixos, white-space:nowrap e
   transition própria — como eu só sobrescrevia padding/font-size/radius,
   essa altura/line-height "de baixo" ficava brigando com meu padding e
   desalinhava o texto verticalmente em quase todo campo do sistema.
   Redeclarando tudo explicitamente aqui pra não depender do que sobra. */
body.skin-nuvem-suave input[type="text"],
body.skin-nuvem-suave input[type="email"],
body.skin-nuvem-suave input[type="password"],
body.skin-nuvem-suave input[type="number"],
body.skin-nuvem-suave input[type="date"],
body.skin-nuvem-suave input[type="tel"],
body.skin-nuvem-suave input[type="search"],
body.skin-nuvem-suave textarea,
body.skin-nuvem-suave select {
  width: 100%;
  height: auto; line-height: 1.4; white-space: normal;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
/* O widget jquery.multiselect.js (multiselect.css) troca o <select> por um
   <button> próprio — a regra "select" acima não alcança ele, então herda a
   altura/padding do tema Foundation original (50px) em vez do padrão daqui
   (38px), ficando mais alto que os outros campos do formulário ao lado. */
body.skin-nuvem-suave .ms-options-wrap.ms-has-selections > button,
body.skin-nuvem-suave .ms-options-wrap > button {
  height: auto;
  line-height: 1.4;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
/* multiselect.css desenha a seta como um triângulo cheio azul do Foundation
   antigo (:after com border-top-color) — troca pro chevron fino que os
   <select> nativos já mostram sozinhos (aparência do próprio navegador,
   sem CSS nenhum daqui), pra ficar visualmente igual. */
body.skin-nuvem-suave .ms-options-wrap.ms-has-selections > button:after,
body.skin-nuvem-suave .ms-options-wrap > button:after {
  content: "";
  width: 5px;
  height: 5px;
  border: 0;
  border-right: 1.5px solid var(--slate);
  border-bottom: 1.5px solid var(--slate);
  transform: rotate(45deg);
  margin-top: -4px;
  right: 1rem;
}
/* select2 (campo "Clínica/Médico" com busca, usuario/cadastro.blade.php) —
   mesma situação do multiselect: herda altura 50px e seta triângulo azul
   cheio do tema antigo (select2.css). Ajusta altura/borda/cor pro padrão
   daqui e troca a seta pelo mesmo chevron fino usado no multiselect. */
body.skin-nuvem-suave .select2-container .select2-selection--single {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2362717f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-size: 10px 6px;
}
body.skin-nuvem-suave .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  color: var(--ink);
  font-size: 13px;
  padding-left: 12px;
  padding-right: 30px;
}
body.skin-nuvem-suave .select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--slate-soft);
}
body.skin-nuvem-suave .select2-dropdown {
  border-color: var(--line);
  border-radius: var(--radius-sm);
}
body.skin-nuvem-suave .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
body.skin-nuvem-suave .select2-results__option--highlighted[aria-selected] {
  background-color: var(--blue) !important;
}
body.skin-nuvem-suave input:focus,
body.skin-nuvem-suave select:focus,
body.skin-nuvem-suave textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash);
}
body.skin-nuvem-suave .ms-options-wrap.ms-has-selections > button:focus,
body.skin-nuvem-suave .ms-options-wrap > button:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash);
}
body.skin-nuvem-suave textarea { height: auto; }
/* app.min.css também dá cor/transição padrão pra QUALQUER <a>, mesmo sem
   classe — como isso ainda serve de "parece um link" pras ~90 telas que
   não reconstruí ainda, mantenho um azul (o da própria marca, não mais o
   do Foundation) em vez de tirar a cor por completo. Onde já tenho regra
   própria (.panel-link, sidebar etc.) ela continua vencendo por ter mais
   classes na especificidade. */
body.skin-nuvem-suave a { color: var(--blue-deep); transition: none; }
/* O Abide (Foundation, ainda usado via data-abide nos formulários) só
   adiciona a classe "is-visible" no .form-error do campo que falhou na
   validação — por padrão fica escondido. Eu tinha deixado display:block
   fixo, então toda crítica aparecia sempre, em todo campo. */
body.skin-nuvem-suave .form-error { color: var(--danger); font-size: 11.5px; margin-top: 4px; display: none; }
body.skin-nuvem-suave .form-error.is-visible { display: block; }

/* Menu de ações por linha (tabelas) */
body.skin-nuvem-suave .actions-controls { position: relative; }
body.skin-nuvem-suave .actions-button {
  width: 30px; height: 30px; border-radius: 99px; border: none;
  background: var(--surface-2); color: var(--slate); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .actions-button:hover { background: var(--blue-wash); color: var(--blue-deep); }
body.skin-nuvem-suave .actions-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow);
  min-width: 190px; padding: 6px;
}
/* show-table-actions.js alterna a classe "show-content" no PAI do botão
   (.actions-controls), não ".open"/".is-open" — conferido no JS real. */
body.skin-nuvem-suave .actions-controls.show-content .actions-menu { display: block; }
body.skin-nuvem-suave .actions-menu a {
  display: block; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--ink); text-decoration: none;
}
body.skin-nuvem-suave .actions-menu a:hover { background: var(--surface-2); }

/* Paginação */
body.skin-nuvem-suave .pagination-nav { margin: 18px 0 0; justify-content: center; }
body.skin-nuvem-suave .pagination {
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}
body.skin-nuvem-suave .pagination li { list-style: none; }
body.skin-nuvem-suave .pagination a,
body.skin-nuvem-suave .pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 8px; font-size: 12.5px; color: var(--slate); text-decoration: none;
}
body.skin-nuvem-suave .pagination a:hover { background: var(--surface-2); }
body.skin-nuvem-suave .pagination .current span,
body.skin-nuvem-suave .pagination li.current span {
  background: var(--blue); color: #fff; font-weight: 700;
}

/* ---------- Tela de Atendimentos (semana em bolhas + cards) ---------- */
body.skin-nuvem-suave .action-nav {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: 100%; padding: 0; min-height: 0; justify-content: flex-start;
}
body.skin-nuvem-suave .action-button {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 99px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  background: linear-gradient(120deg, var(--orange, #f7921c) 0%, #d97c0d 100%);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(247,146,28,.6);
  margin-left: auto;
}
/* .month-nav propositalmente SEM cartão/sombra própria — igual ao
   protótipo, onde os botões redondos ficam soltos no fundo da página. */
body.skin-nuvem-suave .month-nav {
  display: flex; align-items: center; gap: 8px;
  background: none; border-radius: 0; box-shadow: none; padding: 0;
}
body.skin-nuvem-suave .month-title {
  font-size: 13px; font-weight: 700; text-transform: capitalize; color: var(--ink);
  min-width: 104px; text-align: center;
}
body.skin-nuvem-suave .month-prev,
body.skin-nuvem-suave .month-next {
  width: 32px; height: 32px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--slate); display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
body.skin-nuvem-suave .month-prev:hover,
body.skin-nuvem-suave .month-next:hover { background: var(--surface-2); color: var(--ink); }

/* Reseta .week-nav{height:100px;background:#fff;box-shadow...} do
   app.min.css — aqui é só um invólucro flex sem cartão próprio; quem tem
   cartão é cada .week-day individualmente. */
body.skin-nuvem-suave .week-nav {
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
  width: 100%; height: auto; background: none; box-shadow: none; border-radius: 0;
}
body.skin-nuvem-suave .week-prev,
body.skin-nuvem-suave .week-next {
  flex: none; width: 32px; height: 32px; border-radius: 99px;
  background: var(--surface); box-shadow: var(--shadow); color: var(--slate);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
body.skin-nuvem-suave .week-day-list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; flex: 1; }
/* .week-day-list .week-day{display:flex;width:calc(100%/7)} do app.min.css
   (Foundation antigo) some das especificidades por não colidir com estas
   propriedades — por isso redeclaramos display/width/color aqui de forma
   explícita, senão o card vira "achatado" e o texto herda cores erradas
   (#e6e6e6/#000 do CSS antigo) em vez do visual em cartão do protótipo. */
body.skin-nuvem-suave .week-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: auto; flex: none;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  text-align: center; padding: 10px 4px;
  border: 2px solid transparent;
}
body.skin-nuvem-suave .week-day-name {
  display: block; width: 100%; font-size: 10px; font-weight: 700; color: var(--slate-soft) !important;
  text-transform: uppercase; letter-spacing: .06em; margin: 0;
}
body.skin-nuvem-suave .week-day-date {
  display: block; width: 100%; font-size: 18px; font-weight: 800; margin-top: 2px;
  color: var(--ink) !important; font-variant-numeric: tabular-nums;
}
body.skin-nuvem-suave .week-day-bar {
  display: block; width: 100%; height: 4px; border-radius: 99px; background: var(--surface-2);
  margin: 7px 0 0; overflow: hidden;
}
body.skin-nuvem-suave .week-day-bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
body.skin-nuvem-suave .week-day.is-today {
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
}
body.skin-nuvem-suave .week-day.is-today .week-day-name { color: rgba(255,255,255,.85) !important; }
body.skin-nuvem-suave .week-day.is-today .week-day-date { color: #fff !important; }
body.skin-nuvem-suave .week-day.is-today .week-day-bar { background: rgba(255,255,255,.25); }
body.skin-nuvem-suave .week-day.is-today .week-day-bar i { background: #fff; }

/* Agenda em duas colunas: lista de atendimentos + painel lateral (resumo do
   dia, pré-consultas pendentes, amanhã — trazido da opção B para a E). */
body.skin-nuvem-suave .atend-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; width: 100%; }
body.skin-nuvem-suave .apt-col { min-width: 0; width: 100%; }
body.skin-nuvem-suave .calendar-content { width: 100%; }
body.skin-nuvem-suave .side-panel { display: flex; flex-direction: column; gap: 14px; }
body.skin-nuvem-suave .card-pad h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
body.skin-nuvem-suave .stat-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 13px; color: var(--slate);
}
body.skin-nuvem-suave .stat-line b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
body.skin-nuvem-suave .stat-line + .stat-line { border-top: 1px dashed var(--line); }
body.skin-nuvem-suave .stat-row { display: flex; gap: 4px; }
body.skin-nuvem-suave .stat-row .stat-line {
  flex: 1; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; padding: 0 10px; border-top: none;
}
body.skin-nuvem-suave .stat-row .stat-line:first-child { padding-left: 0; }
body.skin-nuvem-suave .stat-row .stat-line + .stat-line { border-top: none; border-left: 1px dashed var(--line); }
body.skin-nuvem-suave .stat-row .stat-line span { font-size: 11px; line-height: 1.2; }
body.skin-nuvem-suave .stat-row .stat-line b { font-size: 18px; }
body.skin-nuvem-suave .mini-list { display: flex; flex-direction: column; gap: 8px; }
body.skin-nuvem-suave .mini-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
body.skin-nuvem-suave .mini-item .mini-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--orange); flex: none; }
body.skin-nuvem-suave .mini-item span { flex: 1; min-width: 0; font-weight: 500; }
body.skin-nuvem-suave .mini-item small { color: var(--slate-soft); font-variant-numeric: tabular-nums; }
body.skin-nuvem-suave .panel-link { display: inline-block; margin-top: 10px; color: var(--blue); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }
body.skin-nuvem-suave .panel-link:hover { text-decoration: underline; }
body.skin-nuvem-suave .panel-empty { font-size: 12.5px; color: var(--slate-soft); margin: 0; }
@media (max-width: 1060px) {
  body.skin-nuvem-suave .atend-grid { grid-template-columns: 1fr; }
}

/* ---------- Agenda do Gerenciador (tela exclusiva do perfil Gerenciador) ----------
   Mesmo vocabulário visual da agenda normal, mas sem coluna lateral: resumo do
   dia e pré-consultas pendentes viram uma faixa de 2 cards, e o bloco "Amanhã"
   vira um radar cross-clínica (chips com rolagem horizontal + busca), pra
   escalar com o Gerenciador administrando dezenas de clínicas. */
body.skin-nuvem-suave .stat-strip { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }

body.skin-nuvem-suave .combo-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
body.skin-nuvem-suave .combo-wrap { display: flex; flex-direction: column; gap: 6px; width: 320px; }
body.skin-nuvem-suave .combo-label { font-size: 11px; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; }
body.skin-nuvem-suave .combo-hint { font-size: 12px; color: var(--slate); padding-bottom: 11px; }

body.skin-nuvem-suave .radar-panel { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 16px 18px; }
body.skin-nuvem-suave .radar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
body.skin-nuvem-suave .radar-header h3 { font-size: 13px; font-weight: 700; margin: 0 0 3px; }
body.skin-nuvem-suave .radar-sub { font-size: 11.5px; color: var(--slate-soft); }
body.skin-nuvem-suave .radar-search {
  display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 99px;
  padding: 8px 14px; flex: 0 0 240px; color: var(--slate-soft);
}
body.skin-nuvem-suave .radar-search i { font-size: 12px; }
body.skin-nuvem-suave .radar-search input { border: none; background: transparent; outline: none; font-size: 12.5px; font-family: inherit; color: var(--ink); width: 100%; }
body.skin-nuvem-suave .radar-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
body.skin-nuvem-suave .radar-chip {
  flex: 0 0 190px; text-align: left; text-decoration: none; cursor: pointer;
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; font-family: inherit;
}
body.skin-nuvem-suave .radar-chip:hover { background: var(--blue-wash); }
body.skin-nuvem-suave .radar-chip.is-active { background: var(--blue-wash); box-shadow: inset 0 0 0 2px var(--blue); }
body.skin-nuvem-suave .radar-chip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.skin-nuvem-suave .radar-chip-name { font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.skin-nuvem-suave .radar-chip-count {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--blue);
  color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .radar-chip-medicos { font-size: 11px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.skin-nuvem-suave .radar-empty { flex: none; padding: 14px; font-size: 12.5px; color: var(--slate-soft); }

@media (max-width: 980px) {
  body.skin-nuvem-suave .stat-strip { grid-template-columns: 1fr; }
  body.skin-nuvem-suave .radar-header { flex-direction: column; }
  body.skin-nuvem-suave .radar-search { flex-basis: auto; width: 100%; }
  body.skin-nuvem-suave .combo-wrap { width: 100%; }
}

/* Avatar com iniciais do paciente na linha do atendimento */
body.skin-nuvem-suave .appointment-info-avatar {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Linha de atendimento própria (sem grid-x/cell do Foundation antigo —
   fugia do controle da skin e deixava o card mais estreito que a coluna
   disponível, truncando o nome do paciente). */
body.skin-nuvem-suave .appointment-row {
  display: flex; align-items: stretch; gap: 12px; width: 100%;
  margin-bottom: 12px; margin-left: 0; margin-right: 0;
}
body.skin-nuvem-suave .appointment-date-col { flex: none; width: 76px; }
body.skin-nuvem-suave .appointment-info-col { flex: 1; min-width: 0; }
body.skin-nuvem-suave .appointment-date {
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  text-align: center; padding: 12px 4px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .appointment-date.is-today { background: var(--blue-wash); }
body.skin-nuvem-suave .appointment-day-name {
  display: block; font-size: 10px; font-weight: 700; color: var(--slate-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
body.skin-nuvem-suave .appointment-day-number { display: block; font-size: 20px; font-weight: 800; color: var(--ink); }
body.skin-nuvem-suave .appointment-info { display: flex; flex-direction: column; gap: 8px; height: 100%; }
body.skin-nuvem-suave .appointment-info-item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 8px;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 13px 18px;
  border-left: 4px solid var(--blue);
}
body.skin-nuvem-suave .appointment-info-item.aguardando { border-left-color: var(--orange); }
body.skin-nuvem-suave .appointment-info-item.cancelado { border-left-color: var(--danger); }
body.skin-nuvem-suave .appointment-info-hour {
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none;
  width: auto; min-width: 44px; max-width: none; text-align: center;
}
/* flex-basis + min-width garantem que o nome NUNCA encolha a ponto de
   sumir quando há vários selos (Aguardando + Retorno + Cortesia) — se não
   couber tudo numa linha só, quem quebra pra linha de baixo são os selos
   (.appointment-info-tags), não o nome do paciente. */
body.skin-nuvem-suave .appointment-info-name-block {
  display: flex; flex-direction: column;
  flex: 1 1 180px; min-width: 180px; max-width: none; width: auto;
}
/* app.min.css (Foundation antigo) define .appointment-info-patient{max-width:
   21%} e .appointment-info-last-date{max-width:36%} — resquício de um layout
   de linha única antigo. Sem essa redeclaração aqui, o nome do paciente
   ficava truncado bem antes de faltar espaço de verdade (só aparecia em
   dias com atendimento porque só aí essas classes chegam a renderizar). */
body.skin-nuvem-suave .appointment-info-patient {
  font-size: 13.5px; font-weight: 600; min-width: 0; max-width: none; width: auto;
}
body.skin-nuvem-suave .appointment-info-patient a {
  color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
body.skin-nuvem-suave .appointment-info-last-date {
  font-size: 11.5px; color: var(--slate); min-width: 0; max-width: none; width: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.skin-nuvem-suave .appointment-info-tags {
  display: flex; align-items: center; gap: 6px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end;
}
body.skin-nuvem-suave .appointment-info-status {
  font-size: 10.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px;
  background: var(--surface-2); color: var(--slate); white-space: nowrap;
}
body.skin-nuvem-suave .appointment-info-status.confirmado { background: var(--success-wash); color: var(--success); }
body.skin-nuvem-suave .appointment-info-status.aguardando { background: var(--orange-wash); color: var(--orange-deep); }
body.skin-nuvem-suave .appointment-info-status.cancelado { background: var(--danger-wash); color: var(--danger); }
body.skin-nuvem-suave .appointment-info-status.retorno,
body.skin-nuvem-suave .appointment-info-status.cortesia,
body.skin-nuvem-suave .appointment-info-status.primeiro,
body.skin-nuvem-suave .appointment-info-status.nova { background: var(--blue-wash); color: var(--blue-deep); }
body.skin-nuvem-suave .appointment-info-item .actions-controls { margin-left: auto; width: auto; flex: none; }

/* ---------- Navegação "abas" (content-nav) e menu lateral do prontuário ---------- */
/* Substitui a barra de abas do sistema antigo — usada em quase toda tela de
   cadastro/edição/detalhe (genero, medico, paciente, neurologia, financeiro...). */
body.skin-nuvem-suave .content-nav-wrapper {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 6px;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 8px 10px; margin-bottom: 16px;
}
body.skin-nuvem-suave .content-nav-wrapper .spacer { flex: 1 1 auto; }
body.skin-nuvem-suave .go-back-button {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--slate);
  text-decoration: none; padding: 8px 12px; border-radius: 99px;
}
body.skin-nuvem-suave .go-back-button:hover { background: var(--surface-2); }
body.skin-nuvem-suave .toggle-menu-button {
  display: none; align-items: center; gap: 6px;
  border: none; background: var(--surface-2); color: var(--slate);
  font-size: 12.5px; font-weight: 600; border-radius: 99px; padding: 8px 12px; cursor: pointer;
}
body.skin-nuvem-suave .content-nav { display: flex; flex-wrap: wrap; gap: 4px; }
body.skin-nuvem-suave .content-nav a {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--slate);
  text-decoration: none; padding: 8px 14px; border-radius: 99px;
}
body.skin-nuvem-suave .content-nav a:hover { background: var(--surface-2); }
body.skin-nuvem-suave .content-nav a.is-active {
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
}
/* Menu vertical (prontuário do paciente: Evolução / Exames / Parecer / Anexos...) */
body.skin-nuvem-suave .menu-lateral {
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
body.skin-nuvem-suave .menu-lateral li { list-style: none; }
body.skin-nuvem-suave .menu-lateral a {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--slate);
  text-decoration: none; padding: 10px 12px; border-radius: 9px;
}
body.skin-nuvem-suave .menu-lateral a:hover { background: var(--surface-2); }
body.skin-nuvem-suave .menu-lateral a.is-active {
  background: var(--blue-wash); color: var(--blue-deep);
}

/* ---------- Formulários de cadastro/edição (grid, fieldset, ações) ---------- */
/* Só reestiliza a moldura visual — a mecânica de largura das colunas
   (.large-N) continua vindo do grid Foundation já carregado (app.min.css),
   não duplicamos isso aqui. */
body.skin-nuvem-suave fieldset {
  border: none; margin: 0 0 18px; padding: 0;
}
body.skin-nuvem-suave legend {
  font-size: 13px; font-weight: 700; color: var(--blue-deep); padding: 0 0 10px;
}
body.skin-nuvem-suave .entry-content h2.title {
  font-size: 16px; font-weight: 700; margin: 0 0 16px;
}
body.skin-nuvem-suave .entry-content h3.title {
  font-size: 13.5px; font-weight: 700; color: var(--slate); margin: 24px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
body.skin-nuvem-suave textarea { min-height: 90px; resize: vertical; }

/* Grid de 12 colunas própria da skin — substitui .grid-x/.cell.large-N do
   Foundation (que trazia margens negativas e mecânica de flex-basis fora
   do nosso controle, causando os vazamentos de largura já corrigidos em
   outras telas). Uso: <div class="form-grid"><div class="form-col-6">...
   O número é o span de 1 a 12, igual ao "large-N" antigo, pra facilitar
   a conversão de telas que ainda usam o grid antigo. */
body.skin-nuvem-suave .form-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; width: 100%;
}
body.skin-nuvem-suave .form-col-1 { grid-column: span 1; }
body.skin-nuvem-suave .form-col-2 { grid-column: span 2; }
body.skin-nuvem-suave .form-col-3 { grid-column: span 3; }
body.skin-nuvem-suave .form-col-4 { grid-column: span 4; }
body.skin-nuvem-suave .form-col-5 { grid-column: span 5; }
body.skin-nuvem-suave .form-col-6 { grid-column: span 6; }
body.skin-nuvem-suave .form-col-7 { grid-column: span 7; }
body.skin-nuvem-suave .form-col-8 { grid-column: span 8; }
body.skin-nuvem-suave .form-col-9 { grid-column: span 9; }
body.skin-nuvem-suave .form-col-10 { grid-column: span 10; }
body.skin-nuvem-suave .form-col-11 { grid-column: span 11; }
body.skin-nuvem-suave .form-col-12 { grid-column: span 12; }
@media (max-width: 640px) {
  body.skin-nuvem-suave .form-grid > [class*="form-col-"] { grid-column: span 12; }
}
/* Botão de ação ao lado de um select/input dentro de .form-grid (ex.: "Associar
   às marcadas" ao lado do <select> de plano). O botão fica dentro do mesmo
   tipo de <label><span>&nbsp;</span><button>...</button></label> que o campo
   ao lado usa (span+control), pra começar exatamente na mesma altura Y que o
   select — não dá pra confiar só em bater a altura do botão com a do select
   por cálculo (bordas/paddings nativos do <select> variam por navegador). */
body.skin-nuvem-suave .form-grid .button.small {
  height: 38.2px; box-sizing: border-box;
}

body.skin-nuvem-suave label { position: relative; }
body.skin-nuvem-suave .form-icon {
  position: absolute; right: 12px; top: 32px; color: var(--slate-soft); font-size: 13px; pointer-events: none;
}
body.skin-nuvem-suave .group-inline-block { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 8px; }
body.skin-nuvem-suave .group-inline-item { display: flex; align-items: center; gap: 7px; }
/* Tamanho fixo no checkbox + line-height igual no texto do label: navegador
   nativo não garante que caixa e texto tenham a mesma altura "aparente"
   mesmo estando os dois centralizados pelo flex — isso deixava o texto
   visualmente desalinhado em relação à caixinha. */
body.skin-nuvem-suave .group-inline-item input[type="checkbox"],
body.skin-nuvem-suave .group-inline-item input[type="radio"] {
  width: 15px; height: 15px; margin: 0; flex: none;
}
/* .group-inline-item label precisa vencer o reset genérico mais abaixo
   neste arquivo (`label:not(.label-search-bar):not(.side-menu-item)`,
   especificidade 0,3,2, que dá margin-bottom:14px em todo <label>). Um
   `.group-inline-item label` isolado (0,1,1) perdia essa briga e o
   margin-bottom:14px vazava — a label ficava com margin-box bem mais alta
   que a do input ao lado, então align-items:center centralizava os dois
   margin-boxes (não os conteúdos), deixando o input visivelmente mais
   baixo que o texto do label. Encadear com o ancestral real
   (.group-inline-block) sobe pra 0,4,2 e garante a vitória — mesmo padrão
   do fix de .filter-field logo acima neste arquivo. */
body.skin-nuvem-suave .group-inline-block .group-inline-item.group-inline-item label {
  margin: 0; font-size: 12.5px; line-height: 15px;
}

/* Rodapé de ações do formulário (Salvar / Cancelar + data de atualização) */
body.skin-nuvem-suave .form-nav {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--line);
}
body.skin-nuvem-suave .form-nav-text { font-size: 12px; color: var(--slate-soft); }
button.form-nav-text.js-close-modal, a.form-nav-text {
  background: none; border: none; cursor: pointer; text-decoration: none;
}
body.skin-nuvem-suave .form-nav-text.js-close-modal:hover { color: var(--slate); }

/* Modificadores de cor de botão usados nas telas de cadastro/modal */
body.skin-nuvem-suave .button.button-green {
  background: linear-gradient(120deg, var(--success) 0%, #1a8557 100%); color: #fff; box-shadow: 0 8px 18px -8px rgba(33,160,109,.55);
}
body.skin-nuvem-suave .button.button-close,
body.skin-nuvem-suave .button.button-cancel {
  background: var(--surface-2); color: var(--slate); box-shadow: none;
}
body.skin-nuvem-suave .button.button-hollow {
  background: transparent; color: var(--blue-deep); box-shadow: none; border: 1px solid var(--line);
}

/* Lista de histórico (evolução do prontuário) */
body.skin-nuvem-suave .historico-evolucao { margin-top: 24px; }
body.skin-nuvem-suave .historico-evolucao-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.skin-nuvem-suave .historico-evolucao-item {
  list-style: none; background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px;
}
body.skin-nuvem-suave .historico-evolucao-date {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--blue-deep); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
body.skin-nuvem-suave .historico-evolucao-text { font-size: 13px; color: var(--ink); }

/* Utilitário "visível só pra leitor de tela" (Foundation) — usado pelo
   <input type="file" class="show-for-sr"> real por trás do botão
   "anexar" custom (também aparece em paciente/anexo.blade.php e
   psiquiatria/cadastro.blade.php). Sem isso o input nativo do navegador
   ("Escolher arquivo / Nenhum arquivo escolhido") fica visível e
   duplicado ao lado do botão estilizado. Só existia em app.min.css. */
.show-for-sr, .show-on-focus {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Upload de arquivo */
body.skin-nuvem-suave .file-upload-block { margin-top: 6px; }
body.skin-nuvem-suave .file-upload-label {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: 10px 14px;
}
body.skin-nuvem-suave .file-upload-button {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff;
  font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 99px;
}
body.skin-nuvem-suave .file-upload-text { font-size: 12.5px; color: var(--slate); }

/* Acordeão (exames anexados da pré-consulta) — JS continua vindo do
   Foundation Accordion embutido no app.min.js, aqui só a casca visual. */
body.skin-nuvem-suave .accordion { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.skin-nuvem-suave .accordion-item { list-style: none; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
body.skin-nuvem-suave .accordion-title {
  display: flex; align-items: center; gap: 8px; padding: 12px 34px 12px 14px; position: relative;
  font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
}
body.skin-nuvem-suave .accordion-title:hover { background: var(--surface); }
body.skin-nuvem-suave .accordion-title::before { content: none; }
body.skin-nuvem-suave .accordion-title::after {
  content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 700; color: var(--blue); line-height: 1;
}
body.skin-nuvem-suave .accordion-item.is-active > .accordion-title::after { content: "\2212"; }
body.skin-nuvem-suave .accordion-content { padding: 4px 14px 14px; font-size: 13px; display: none; }
body.skin-nuvem-suave .accordion-item.is-active .accordion-content { display: block; }
body.skin-nuvem-suave .accordion-content table { margin-top: 8px; }

/* Variante do acordeão pra seções de formulário (ex.: Admissão): cada item
   tem o visual de .card (fundo branco, sombra), não a casca "achatada" do
   acordeão de exames — por isso as regras aqui pisam nas de cima via
   especificidade (3 classes), sem tocar no acordeão de exames. */
body.skin-nuvem-suave .accordion-form-cards { gap: 12px; }
body.skin-nuvem-suave .accordion-form-cards .accordion-item {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
body.skin-nuvem-suave .accordion-form-cards .accordion-title {
  padding: 16px 42px 16px 20px;
  font-size: 14px;
  font-weight: 700;
  flex-wrap: wrap;
}
body.skin-nuvem-suave .accordion-form-cards .accordion-title::after {
  right: 20px;
  font-size: 19px;
}
body.skin-nuvem-suave .accordion-form-cards .accordion-title-preview {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.skin-nuvem-suave .accordion-form-cards .accordion-item.is-active .accordion-title-preview { display: none; }
body.skin-nuvem-suave .accordion-form-cards .accordion-content { padding: 4px 20px 20px; font-size: inherit; }

body.skin-nuvem-suave .obs { margin-bottom: 12px; }
body.skin-nuvem-suave .exame-group { margin-bottom: 14px; }
body.skin-nuvem-suave .exame-group-title { font-size: 12.5px; font-weight: 700; color: var(--blue-deep); margin: 0 0 8px; }
body.skin-nuvem-suave .exame-subgroup-list { display: flex; flex-direction: column; gap: 8px; }
body.skin-nuvem-suave .exame-subgroup { display: flex; align-items: center; gap: 12px; }
body.skin-nuvem-suave .exame-subgroup .subgroup-col:first-child { flex: 0 0 220px; font-size: 12.5px; }
body.skin-nuvem-suave .exame-subgroup .subgroup-col:last-child { flex: 1 1 auto; }

/* ---------- Modal (novo atendimento, admissão, vincular exames) ---------- */
body.skin-nuvem-suave .modal-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(34,48,62,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 5vh 16px;
  transition: opacity .2s ease;
}
body.skin-nuvem-suave .modal-overlay.show-modal {
  opacity: 1; visibility: visible; pointer-events: all;
}
body.skin-nuvem-suave .modal-center {
  width: 100%; max-width: 640px; position: static; transform: none; opacity: 1;
}
body.skin-nuvem-suave #novo-atendimento .modal-center {
  max-width: 780px;
}
body.skin-nuvem-suave #visualizar-exame-resultado .modal-center { max-width: 900px; }
body.skin-nuvem-suave #visualizar-exame-resultado .modal-content {
  padding: 0; max-height: 82vh; overflow: hidden;
}
body.skin-nuvem-suave #modal-pre-consulta-original .modal-center { max-width: 960px; }
body.skin-nuvem-suave #modal-pre-consulta-original .modal-content {
  padding: 0; max-height: 82vh; overflow: hidden;
}
.iframe-visualizar-exame { width: 100%; height: 82vh; border: none; display: block; }
body.skin-nuvem-suave .modal-item {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
body.skin-nuvem-suave .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
body.skin-nuvem-suave .modal-title { font-size: 15px; font-weight: 700; margin: 0; }
body.skin-nuvem-suave .modal-button-close {
  border: none; background: var(--surface-2); color: var(--slate); width: 30px; height: 30px;
  border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .modal-content { padding: 20px 22px; max-height: 65vh; overflow-y: auto; }
body.skin-nuvem-suave .modal-content .border {
  border: none; background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 14px;
}
body.skin-nuvem-suave .modal-content .border:last-child { margin-bottom: 0; }
body.skin-nuvem-suave .modal-footer { padding: 16px 22px; border-top: 1px solid var(--line); }
body.skin-nuvem-suave .modal-footer .form-nav { border-top: none; padding-top: 0; margin-top: 0; }

/* ---------- Callouts e labels de status (fora das mensagens flash) ---------- */
body.skin-nuvem-suave .callout.warning {
  background: var(--orange-wash); color: var(--orange-deep); box-shadow: none;
}
body.skin-nuvem-suave .callout.success {
  background: var(--success-wash); color: var(--success); box-shadow: none;
}
body.skin-nuvem-suave .label.success { background: var(--success-wash); color: var(--success); }
body.skin-nuvem-suave .label.warning { background: var(--orange-wash); color: var(--orange-deep); }
body.skin-nuvem-suave .label.secondary { background: var(--surface-2); color: var(--slate); }

/* ---------- Telas públicas/standalone fora da moldura (site/cadastro, pré-consulta) ---------- */
body.skin-nuvem-suave .main-container.main-content,
body.skin-nuvem-suave main.main-container { background: transparent; }
body.skin-nuvem-suave .main-content { padding: 24px; max-width: 1100px; margin: 0 auto; }
body.skin-nuvem-suave .main-login {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 20px;
}
body.skin-nuvem-suave .login-content {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 32px;
}
body.skin-nuvem-suave .login-image { display: none; }
body.skin-nuvem-suave .login-logo { text-align: center; margin-bottom: 6px; }
body.skin-nuvem-suave .login-logo img { max-width: 190px; width: 100%; height: auto; }
body.skin-nuvem-suave .login-message { text-align: center; color: var(--slate); font-size: 13px; margin: 6px 0 22px; }
body.skin-nuvem-suave .login-message p { margin: 0; }

/* ---------- Login ---------- */
body.skin-nuvem-suave .login-nuvem {
  min-height: 100vh; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 32px 20px;
  background: radial-gradient(1100px 520px at 50% -10%, var(--blue-wash), var(--paper) 60%);
}
body.skin-nuvem-suave .login-nuvem-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 40px 32px 32px;
}
body.skin-nuvem-suave .login-nuvem-logo { text-align: center; margin-bottom: 6px; }
body.skin-nuvem-suave .login-nuvem-logo img { max-width: 190px; width: 100%; height: auto; }
body.skin-nuvem-suave .login-nuvem-sub {
  text-align: center; color: var(--slate); font-size: 13px; margin: 6px 0 28px;
}
body.skin-nuvem-suave .login-nuvem-form label {
  display: block; margin-bottom: 18px;
}
body.skin-nuvem-suave .login-nuvem-form .invalid-feedback {
  color: var(--danger); font-size: 11.5px; display: block; margin: -12px 0 14px;
}
body.skin-nuvem-suave .login-nuvem-submit {
  width: 100%; justify-content: center; margin-top: 4px; padding: 13px; font-size: 14px;
}
body.skin-nuvem-suave .login-nuvem-copy {
  color: var(--slate-soft); font-size: 11.5px; text-align: center;
}

/* ---------- Atendimentos (preview) — HTML/CSS portado direto do
   protótipo aprovado, com classes 100% próprias (nenhuma reaproveitada
   do sistema antigo), pra nunca colidir com o Foundation antigo
   (app.min.css). Ver atendimento/index_preview.blade.php e
   AtendimentoController@indexPreview — temporário, some quando a
   migração terminar e a rota real passar a usar essa tela. */
body.skin-nuvem-suave .month-pick { display: flex; align-items: center; gap: 8px; }
body.skin-nuvem-suave .month-pick b {
  font-size: 13px; font-weight: 700; color: var(--ink);
  min-width: 104px; text-align: center;
}
body.skin-nuvem-suave .round-btn {
  width: 32px; height: 32px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); color: var(--slate); cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
body.skin-nuvem-suave .round-btn:hover { background: var(--surface-2); color: var(--ink); }

body.skin-nuvem-suave .week-strip { display: flex; align-items: center; gap: 10px; }
body.skin-nuvem-suave .week-side-btn {
  flex: none; width: 32px; height: 32px; border-radius: 99px;
  background: var(--surface); box-shadow: var(--shadow); color: var(--slate);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
body.skin-nuvem-suave .week-side-btn:hover { color: var(--blue-deep); }
body.skin-nuvem-suave .week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; flex: 1; }
body.skin-nuvem-suave .week-bubble {
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  text-align: center; padding: 10px 4px; border: 2px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .week-bubble .wname {
  display: block; width: 100%; font-size: 10px; font-weight: 700; color: var(--slate-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
body.skin-nuvem-suave .week-bubble .wdate {
  display: block; width: 100%; font-size: 18px; font-weight: 800; margin-top: 2px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
body.skin-nuvem-suave .week-bubble .wbar {
  display: block; width: 100%; height: 4px; border-radius: 99px; background: var(--surface-2);
  margin: 7px 0 0; overflow: hidden;
}
body.skin-nuvem-suave .week-bubble .wbar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
body.skin-nuvem-suave .week-bubble.is-today { background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%); }
body.skin-nuvem-suave .week-bubble.is-today .wname { color: rgba(255,255,255,.85); }
body.skin-nuvem-suave .week-bubble.is-today .wdate { color: #fff; }
body.skin-nuvem-suave .week-bubble.is-today .wbar { background: rgba(255,255,255,.25); }
body.skin-nuvem-suave .week-bubble.is-today .wbar i { background: #fff; }

body.skin-nuvem-suave .apt-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.skin-nuvem-suave .apt-daygroup { display: flex; align-items: stretch; gap: 12px; width: 100%; }
body.skin-nuvem-suave .apt-daybadge {
  flex: none; width: 76px;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12px 4px;
}
body.skin-nuvem-suave .apt-daybadge.is-today { background: var(--blue-wash); }
body.skin-nuvem-suave .apt-daybadge-name {
  display: block; font-size: 10px; font-weight: 700; color: var(--slate-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
body.skin-nuvem-suave .apt-daybadge-num { display: block; font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 2px; }
body.skin-nuvem-suave .apt-daygroup-items { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

body.skin-nuvem-suave .apt-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 8px;
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 13px 18px; cursor: default;
  border-left: 4px solid var(--blue);
}
body.skin-nuvem-suave .apt-card.aguardando { border-left-color: var(--orange); }
body.skin-nuvem-suave .apt-card.cancelado { border-left-color: var(--danger); }
body.skin-nuvem-suave .apt-hora {
  flex: none; text-align: center; min-width: 52px;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
body.skin-nuvem-suave .apt-hora small {
  display: block; font-size: 10px; font-weight: 600; color: var(--slate-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
body.skin-nuvem-suave .apt-avatar {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .apt-info {
  display: flex; flex-direction: column; flex: 1 1 180px; min-width: 180px;
}
body.skin-nuvem-suave .apt-info a {
  color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
body.skin-nuvem-suave .apt-info small {
  color: var(--slate); font-size: 11.5px;
}
body.skin-nuvem-suave .apt-medico {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px;
  border-radius: 99px; background: var(--surface-2); flex: 0 1 auto; min-width: 0; max-width: 180px;
}
body.skin-nuvem-suave .apt-medico .med-avatar {
  width: 18px; height: 18px; border-radius: 99px; background: var(--slate-soft); color: #fff;
  font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none;
}
body.skin-nuvem-suave .apt-medico span:last-child {
  font-size: 11px; font-weight: 600; color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
body.skin-nuvem-suave .apt-clinica {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: 99px; background: var(--surface-2); flex: none;
  font-size: 11px; font-weight: 600; color: var(--slate-soft); white-space: nowrap;
}
body.skin-nuvem-suave .apt-clinica i { font-size: 10px; }
body.skin-nuvem-suave .apt-tags { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
body.skin-nuvem-suave .pill { font-size: 10.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
body.skin-nuvem-suave .pill.confirmado { background: var(--success-wash); color: var(--success); }
body.skin-nuvem-suave .pill.aguardando { background: var(--orange-wash); color: var(--orange-deep); }
body.skin-nuvem-suave .pill.cancelado { background: var(--danger-wash); color: var(--danger); }
body.skin-nuvem-suave .pill.retorno,
body.skin-nuvem-suave .pill.cortesia,
body.skin-nuvem-suave .pill.primeiro,
body.skin-nuvem-suave .pill.nova { background: var(--blue-wash); color: var(--blue-deep); }
body.skin-nuvem-suave .pill.convenio { background: var(--surface-2); color: var(--slate); }
body.skin-nuvem-suave .pill.pre-consulta { background: var(--success-wash); color: var(--success); text-decoration: none; }
/* Pílula ao lado do nome (apt-nome-linha), não mais dentro de apt-tags —
   precisa vencer "body.skin-nuvem-suave .apt-info a" (display:block, pra
   truncar o nome com ellipsis), que também bate em qualquer <a> dentro de
   .apt-info, incluindo esta. */
body.skin-nuvem-suave .apt-nome-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
body.skin-nuvem-suave .apt-nome-linha a:not(.pill) { flex: 1 1 auto; min-width: 0; }
body.skin-nuvem-suave .apt-nome-linha a.pill.pre-consulta {
  width: 18px; height: 18px; padding: 0; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
body.skin-nuvem-suave .pill-letter {
  width: 20px; height: 20px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: default;
}
body.skin-nuvem-suave .pill-full { display: none; }
body.skin-nuvem-suave .apt-more {
  width: 32px; height: 32px; border-radius: 99px; border: none; flex: none;
  background: var(--surface-2); color: var(--slate); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body.skin-nuvem-suave .apt-more:hover { background: var(--blue-wash); color: var(--blue-deep); }
body.skin-nuvem-suave .apt-card .actions-controls { margin-left: auto; flex: none; width: auto; }
body.skin-nuvem-suave .apt-empty {
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 24px; text-align: center; color: var(--slate-soft); font-size: 13px;
}

@media (max-width: 900px) {
  body.skin-nuvem-suave .week-row { grid-template-columns: repeat(4, 1fr); }
  body.skin-nuvem-suave .apt-daygroup { flex-direction: column; }
  body.skin-nuvem-suave .apt-daybadge { flex-direction: row; width: auto; padding: 8px 12px; gap: 8px; }
  body.skin-nuvem-suave .pill-letter { display: none; }
  body.skin-nuvem-suave .pill-full { display: inline-block; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  body.skin-nuvem-suave .frame { padding-top: 64px; }
  body.skin-nuvem-suave .side-card {
    position: fixed; top: 0; left: 0; z-index: 60;
    height: 100%; max-height: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    transform: translateX(-110%);
    transition: transform .25s ease;
  }
  body.skin-nuvem-suave.mobile-menu-open .side-card { transform: translateX(0); }
  body.skin-nuvem-suave.mobile-menu-open .mobile-menu-backdrop { display: block; }
  body.skin-nuvem-suave .mobile-menu-btn { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  body.skin-nuvem-suave .side-card { transition: none; }
}

/* Tabela de evolução de exames (paciente/exame-resultado.blade.php) — grid
   pivotado (parâmetro x data), com potencialmente muitas colunas de data
   por linha. Precisa rolar na horizontal em vez de empilhar como as
   tabelas padrão da skin (ver comentário acima de ".card table" sobre por
   que o padrão geral usa empilhamento em vez de scroll). */
.tabela-evolucao-wrap { overflow-x: auto; }
body.skin-nuvem-suave .tabela-evolucao-exame th,
body.skin-nuvem-suave .tabela-evolucao-exame td { white-space: nowrap; }
body.skin-nuvem-suave .tabela-evolucao-exame .exame-comparativo-nota { white-space: normal; }
/* Células de texto truncado (laudo de imagem, impressão diagnóstica,
   evolução por IA) — ao contrário dos valores curtos de laboratório, esse
   texto precisa quebrar linha em vez de forçar a tabela a ficar enorme. */
body.skin-nuvem-suave .tabela-evolucao-exame .celula-texto-truncado {
  white-space: normal; max-width: 260px; font-size: 12.5px;
}
body.skin-nuvem-suave .celula-texto-truncado a { color: var(--blue-deep); text-decoration: none; }
body.skin-nuvem-suave .celula-texto-truncado a:hover { text-decoration: underline; }
.texto-completo-conteudo { white-space: pre-wrap; font-size: 13px; margin: 0; }
/* Espaço entre um grupo de exame e o próximo — .card-pad h3 zera o
   margin-top por padrão, então cada título de grupo ficava colado na
   tabela anterior. */
body.skin-nuvem-suave .historico-evolucao-exames > h3.title { margin-top: 28px; }
/* Mesmo problema do bloco acima: .card-pad h3 zera o margin-top, então o
   título "Histórico de ..." ficava colado no botão Enviar/Salvar do
   formulário logo acima (paciente/pareceres, receituario, atestado, etc). */
body.skin-nuvem-suave .historico-infusao > h3.title { margin-top: 28px; }
/* Vários grupos/tabelas empilhados nesta página — o menu suspenso
   (.actions-menu) do cabeçalho da última coluna da última tabela abre pra
   baixo (top: calc(100% + 6px)) e fica sem espaço de sobra quando a página
   termina bem ali. Só nesta página (não em .historico-evolucao genérico,
   reaproveitado por várias outras telas). */
body.skin-nuvem-suave .historico-evolucao-exames { padding-bottom: 200px; }
/* Mesmo problema, mesma causa, no Histórico de pareceres: o menu suspenso
   da última linha da tabela fica sem espaço de sobra pra abrir quando a
   página termina bem ali. Classe própria (não .historico-infusao genérico,
   reaproveitado por receituário/atestado/exame/etc) pra não empurrar essas
   outras telas pra baixo à toa. */
body.skin-nuvem-suave .historico-pareceres { padding-bottom: 200px; }
@media (max-width: 640px) {
  body.skin-nuvem-suave .card table.tabela-evolucao-exame,
  body.skin-nuvem-suave .card table.tabela-evolucao-exame thead,
  body.skin-nuvem-suave .card table.tabela-evolucao-exame tbody,
  body.skin-nuvem-suave .card table.tabela-evolucao-exame tr,
  body.skin-nuvem-suave .card table.tabela-evolucao-exame th,
  body.skin-nuvem-suave .card table.tabela-evolucao-exame td {
    display: revert;
  }
  body.skin-nuvem-suave .card table.tabela-evolucao-exame tr { padding: 0; border-bottom: none; }
  body.skin-nuvem-suave .card table.tabela-evolucao-exame td {
    padding: 8px 10px; border: none; border-bottom: 1px solid var(--line);
  }
}
/* Data + menu de ações (...) lado a lado no cabeçalho de coluna da tabela
   de evolução — por padrão .actions-controls só é position:relative (pro
   .actions-menu suspenso se ancorar), sem layout próprio. */
body.skin-nuvem-suave .actions-controls-inline {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
}
.exame-fora-referencia { color: var(--danger); font-weight: 600; }
.exame-comparativo-nota {
  display: block; font-size: 11px; font-style: italic; font-weight: 400;
  color: var(--slate-soft); margin-top: 2px; max-width: 220px;
}