/* =============================================================================
 * 21-reskin-app.css  —  CAMADA DE RESKIN (última folha; vence a cascata)
 * -----------------------------------------------------------------------------
 * Ponto de entrada do novo design (Claude Design). Carregada por ÚLTIMO no
 * index.html, escopada por #view-NAME. Para reskin PESADO:
 *   1) Ajuste os TOKENS abaixo (paleta/tipografia/espaço/raio/sombra) com os
 *      valores do design — mudam o visual globalmente.
 *   2) Cole o CSS do design de cada página no bloco #view-* correspondente,
 *      usando os tokens e o kit .rk-* quando possível.
 *   3) Telas JS-inline (Master, Regulação, Portal, Driver, TV) têm style= no JS:
 *      o CSS externo NÃO vence sozinho — nessas, reescreva a função de render
 *      (ver docs/RESKIN-CONTRATO.md) trocando o inline por classes .rk-* / tokens.
 *   NUNCA renomeie os ids/classes-contrato do RESKIN-CONTRATO.md.
 * ========================================================================== */

/* ---- DESIGN TOKENS (trocar pelos valores do design) ---------------------- */
:root {
  /* Marca */
  --rk-brand:        #394820;
  --rk-brand-2:      #4d5e2f;
  --rk-brand-soft:   #e9eee2;
  --rk-brand-ink:    #ffffff;
  /* Superfícies e texto */
  --rk-bg:           #f9faf8;
  --rk-surface:      #ffffff;
  --rk-surface-2:    #f1f3ef;
  --rk-line:         #e1e4dc;
  --rk-ink:          #23271e;
  --rk-ink-2:        #43473c;
  --rk-muted:        #6b6f64;
  /* Semânticos */
  --rk-ok:           #1f8a5b;
  --rk-warn:         #b45309;
  --rk-danger:       #b91c1c;
  --rk-info:         #2f5fb0;
  /* Tipografia */
  --rk-font:         'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rk-fs-xs: 11px; --rk-fs-sm: 13px; --rk-fs-md: 15px; --rk-fs-lg: 18px; --rk-fs-xl: 23px; --rk-fs-2xl: 32px;
  --rk-fw-normal: 400; --rk-fw-med: 500; --rk-fw-semi: 600; --rk-fw-bold: 700; --rk-fw-black: 800;
  /* Espaçamento / raio / sombra / movimento */
  --rk-sp-1: 4px; --rk-sp-2: 8px; --rk-sp-3: 12px; --rk-sp-4: 16px; --rk-sp-5: 24px; --rk-sp-6: 32px;
  --rk-radius: 14px; --rk-radius-sm: 8px; --rk-radius-pill: 999px;
  --rk-shadow: 0 1px 2px rgba(35,39,30,.06), 0 6px 20px rgba(35,39,30,.05);
  --rk-shadow-lg: 0 10px 34px rgba(35,39,30,.14);
  --rk-ease: .16s cubic-bezier(.4,0,.2,1);
}

/* ---- KIT DE COMPONENTES BASE (.rk-*) ------------------------------------- */
/* Inertes até o markup do reskin usá-los. Mapeie o design para estas classes. */
.rk-card    { background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-radius); box-shadow:var(--rk-shadow); padding:var(--rk-sp-5); }
.rk-btn     { font:var(--rk-fw-semi) var(--rk-fs-sm)/1 var(--rk-font); padding:10px 16px; border-radius:var(--rk-radius-sm); border:1px solid var(--rk-line); background:var(--rk-surface); color:var(--rk-ink); cursor:pointer; transition:transform var(--rk-ease),background var(--rk-ease); }
.rk-btn:hover        { transform:translateY(-1px); }
.rk-btn-primary      { background:linear-gradient(135deg,var(--rk-brand),var(--rk-brand-2)); color:var(--rk-brand-ink); border-color:transparent; }
.rk-btn-ghost        { background:transparent; }
.rk-input   { font:var(--rk-fs-sm)/1.4 var(--rk-font); padding:10px 12px; border:1px solid var(--rk-line); border-radius:var(--rk-radius-sm); background:var(--rk-surface); color:var(--rk-ink); width:100%; }
.rk-input:focus      { outline:2px solid var(--rk-brand); outline-offset:0; border-color:var(--rk-brand); }
.rk-badge   { display:inline-block; font:var(--rk-fw-semi) var(--rk-fs-xs)/1.5 var(--rk-font); padding:2px 9px; border-radius:var(--rk-radius-pill); background:var(--rk-surface-2); color:var(--rk-ink-2); }
.rk-badge-ok     { background:#e7f4ee; color:var(--rk-ok); }
.rk-badge-warn   { background:#fbf0e2; color:var(--rk-warn); }
.rk-badge-danger { background:#fbe9e9; color:var(--rk-danger); }
.rk-table   { width:100%; border-collapse:collapse; font:var(--rk-fs-sm)/1.5 var(--rk-font); }
.rk-table th{ text-align:left; padding:8px 12px; background:var(--rk-surface-2); color:var(--rk-ink-2); font:var(--rk-fw-semi) var(--rk-fs-xs)/1 var(--rk-font); text-transform:uppercase; letter-spacing:.03em; }
.rk-table td{ padding:8px 12px; border-bottom:1px solid var(--rk-line); }
.rk-modal   { background:var(--rk-surface); border-radius:var(--rk-radius); box-shadow:var(--rk-shadow-lg); }

/* ---- BLOCOS POR PÁGINA (colar o CSS do design aqui) ---------------------- */
/* Regra: escopar por id de view; para telas JS-inline, editar a render (contrato). */
#view-master     { /* Painel Master — render JS inline (master/02.js,04.js): reescrever render p/ usar .rk-*/tokens */ }
#view-regulacao  { /* Regulação/Kanban — render JS inline (reg/11-design.js,12-kanban-design.js): fonte-da-verdade */ }
#view-ubs-intranet { /* Casco de unidade — preservar contrato de teleporte (RESKIN-CONTRATO.md) */ }
#view-portal     { /* Painel do Paciente — override css/portal-reskin.css + editar bolhas inline no portal-reskin.js */ }
#view-driver     { /* Motorista — driver.js gera markup/estilo inline: reescrever a render */ }
#view-tv         { /* TV — tv.js/tv.html: display, cuidar de contraste/tamanho p/ Smart TV */ }