/* ============================================================================
 * app.css — LAYOUT da ferramenta (login, casca/sidebar, listas, modal, formulários).
 * Consome os TOKENS de design.css; NUNCA redefine token/cor/espaço (§5).
 * design.css cuida da IDENTIDADE (cores, tipografia, componentes); aqui é só o
 * arranjo espacial de cada tela. Sem `style=""` inline (CSP sem 'unsafe-inline').
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fam-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-texto);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: 600; }
a { color: inherit; }

/* ---------- Login / troca de senha ---------- */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--esp-4); }
.login-card {
  width: 100%; max-width: 380px;
  background: var(--c-bg-elev); border: 1px solid var(--c-borda);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-lg);
  padding: var(--esp-8);
}
.login-marca { display: flex; align-items: center; justify-content: center; gap: var(--esp-2); color: var(--c-acento); margin-bottom: var(--esp-3); }
.login-marca .sidebar__nome { color: var(--c-texto); font-size: var(--fs-lg); font-weight: 600; }
.login-titulo { font-size: var(--fs-xl); text-align: center; }
.login-sub { color: var(--c-texto-2); font-size: var(--fs-sm); text-align: center; margin: var(--esp-1) 0 var(--esp-6); }
.login-erro { color: var(--c-erro); font-size: var(--fs-sm); min-height: 1.2em; margin-bottom: var(--esp-2); text-align: center; }
.login-rodape { margin-top: var(--esp-5); text-align: center; }

/* ---------- Casca do app ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--esp-1);
  padding: var(--esp-4);
  background: var(--c-bg-elev); border-right: 1px solid var(--c-borda);
}
.sidebar__marca { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2); color: var(--c-acento); }
.sidebar__nome { color: var(--c-texto); font-weight: 600; font-size: var(--fs-md); }
.sidebar__versao { margin-left: auto; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--esp-3); }
.menu__grupo { padding: var(--esp-3) var(--esp-3) var(--esp-1); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-texto-3); }
.menu__grupo:first-child { padding-top: 0; }
.menu__item {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-md);
  color: var(--c-texto-2); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.menu__item:hover { background: var(--c-bg-hover); color: var(--c-texto); }
.menu__item[aria-current="page"] { background: var(--c-acento-bg); color: var(--c-acento-ativo); }
.sidebar__rodape { margin-top: auto; display: flex; flex-direction: column; gap: var(--esp-1); border-top: 1px solid var(--c-borda); padding-top: var(--esp-3); }
.sidebar__usuario { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-2); color: var(--c-texto-2); font-size: var(--fs-sm); }
.sidebar__usuario-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__rodape .btn { justify-content: flex-start; }

.conteudo { padding: var(--esp-8); overflow: auto; }

/* ---------- Página de lista (módulos) ---------- */
.pagina__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); margin-bottom: var(--esp-6); flex-wrap: wrap; }
.pagina__titulo { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }
.pagina__sub { color: var(--c-texto-2); font-size: var(--fs-sm); margin-top: var(--esp-1); }
.pagina__acoes { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }

.barra-busca { position: relative; display: inline-flex; align-items: center; }
.barra-busca .icone { position: absolute; left: var(--esp-3); color: var(--c-texto-3); pointer-events: none; }
.barra-busca .input { padding-left: var(--esp-8); width: 260px; max-width: 60vw; }
.filtro-inativos { white-space: nowrap; }
.pagina__acoes .select { width: auto; min-width: 150px; }

.tabela-box { border: 1px solid var(--c-borda); border-radius: var(--raio-lg); overflow-x: auto; }
.linha-acoes { display: flex; gap: var(--esp-1); justify-content: flex-end; }
.col-acoes { width: 1%; white-space: nowrap; }
.cel-badges { display: inline-flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }

.carregando, .estado-vazio { padding: var(--esp-12) var(--esp-6); text-align: center; color: var(--c-texto-3); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--esp-4); background: rgba(0, 0, 0, 0.45); }
.modal {
  width: 100%; max-width: 480px; max-height: 90dvh;
  display: flex; flex-direction: column;
  background: var(--c-bg-elev); border: 1px solid var(--c-borda);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-lg);
}
.modal__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--c-borda); }
.modal__titulo { font-size: var(--fs-lg); }
.modal__corpo { padding: var(--esp-5); overflow: auto; }
.modal__texto { color: var(--c-texto-2); }
.modal__rodape { display: flex; justify-content: flex-end; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-top: 1px solid var(--c-borda); }
.modal--largo { max-width: 620px; }

/* ---------- Formulários (dentro de modal) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-1) var(--esp-4); }
.form-grid .campo { margin-bottom: var(--esp-3); }
.campo--full { grid-column: 1 / -1; }
/* Recorrência (Tarefas v4): seletor de dias da semana */
.dias-semana { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ---------- Editor de permissões ---------- */
.perm-grupo { margin-top: var(--esp-3); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-texto-3); }
.perm-grupo:first-child { margin-top: 0; }
.perm-lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.perm-item { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3); border: 1px solid var(--c-borda); border-radius: var(--raio-md); cursor: pointer; }
.perm-item:hover { background: var(--c-bg-hover); }
.perm-item__txt { display: flex; flex-direction: column; gap: 2px; }
.perm-item__nome { font-weight: 500; font-size: var(--fs-sm); }
.perm-item__desc { color: var(--c-texto-2); font-size: var(--fs-sm); }

/* ---------- Estadia: detalhe + linha do tempo ---------- */
.estadia-info { display: grid; grid-template-columns: max-content 1fr; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-5); }
.estadia-info dt { color: var(--c-texto-2); font-size: var(--fs-sm); }
.estadia-info dd { margin: 0; font-size: var(--fs-sm); }
.estadia-secao { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-texto-3); font-weight: 600; margin: var(--esp-5) 0 var(--esp-3); }

.timeline { display: flex; flex-direction: column; gap: var(--esp-4); }
.evento { display: flex; gap: var(--esp-3); }
.evento__icone { flex-shrink: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--raio-full); background: var(--c-bg-muted); color: var(--c-texto-2); }
.evento__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evento__desc { font-size: var(--fs-sm); }
.evento__meta { font-size: var(--fs-xs); color: var(--c-texto-3); }

.nota-form { display: flex; gap: var(--esp-2); align-items: flex-end; margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--c-borda); }
.nota-form .campo { flex: 1; margin-bottom: 0; }

/* ---------- Fichas (v6): preenchimento, leitura, construtor e cartões ---------- */
.ficha-multipla { display: flex; flex-direction: column; gap: var(--esp-2); }
.ficha-leitura { display: flex; flex-direction: column; gap: var(--esp-2); }
.ficha-linha { display: flex; justify-content: space-between; gap: var(--esp-4); font-size: var(--fs-sm); }
.ficha-rot { color: var(--c-texto-2); }
.ficha-val { font-weight: 500; text-align: right; }

.campo-builder { display: flex; flex-direction: column; gap: var(--esp-2); margin: var(--esp-2) 0 var(--esp-3); }
.campo-item { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--c-borda); border-radius: var(--raio-md); }
.campo-item__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.campo-item__rot { font-weight: 500; font-size: var(--fs-sm); }
.campo-item__meta { font-size: var(--fs-xs); color: var(--c-texto-3); }
.campo-item__acoes { display: flex; gap: var(--esp-1); }
.campo-vazio { color: var(--c-texto-3); font-size: var(--fs-sm); padding: var(--esp-2) 0; }

.fichas-lista { display: flex; flex-direction: column; gap: var(--esp-3); }
.ficha-card { border: 1px solid var(--c-borda); border-radius: var(--raio-md); padding: var(--esp-3); }
.ficha-card__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.ficha-card__nome { font-weight: 600; font-size: var(--fs-sm); }
.ficha-card__meta { font-size: var(--fs-xs); color: var(--c-texto-3); }

/* ---------- Responsivo (a frente principal é desktop; não quebrar em telas menores) ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--c-borda); }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
  .sidebar__rodape { margin-top: 0; margin-left: auto; flex-direction: row; border-top: none; padding-top: 0; }
  .conteudo { padding: var(--esp-5); }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Relatórios (v8) — layout do módulo, consome tokens ---------- */
.rel-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: flex-end; margin-bottom: var(--esp-5); }
.rel-filtros .campo { margin-bottom: 0; min-width: 12rem; }
.rel-busca { flex: 1 1 20rem; }
.rel-corpo { margin-top: var(--esp-2); }
.rel-num { text-align: right; font-variant-numeric: tabular-nums; }
.rel-alerta { color: var(--c-erro); font-weight: 600; }
.rel-alerta-linha { background: var(--c-erro-bg); }
.rel-nota { color: var(--c-texto-2); font-size: var(--fs-sm); margin-top: var(--esp-2); }
.rel-inativo td { color: var(--c-texto-3); }
.rel-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--c-acento); font: inherit; font-weight: 500; text-align: left;
}
.rel-link:hover { text-decoration: underline; }
.tabela tr.rel-clic { cursor: pointer; }
.tabela tr.rel-clic:hover { background: var(--c-bg-hover); }
.rel-detalhe { margin-top: var(--esp-6); }
.rel-prontuario { margin-top: var(--esp-5); }
.rel-estadias { display: flex; flex-direction: column; gap: var(--esp-3); }
.rel-estadia {
  padding: var(--esp-3) var(--esp-4); background: var(--c-bg-elev);
  border: 1px solid var(--c-borda); border-radius: var(--raio-lg); cursor: pointer;
}
.rel-estadia.rel-clic:hover { background: var(--c-bg-hover); border-color: var(--c-borda-forte); }
.rel-estadia__topo { display: flex; align-items: center; gap: var(--esp-3); }
.rel-estadia__quando { color: var(--c-texto-2); font-size: var(--fs-sm); }
.rel-estadia__motivo { margin-top: var(--esp-2); color: var(--c-texto); }