/* =====================================================================================
   Regência · sistema de design
   Fonte única de cor, tipo, raio, sombra e espaço de todas as telas.

   Como usar numa página:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
     <link rel="stylesheet" href="/regencia.css">
   e o <style> da página vem DEPOIS, só com o que é específico da tela.

   Paleta: nasce do logo (café #4B2E1F, terracota #A9652E / #D08A4E, creme #F0E7D6,
   quase-preto #121212). Neutros quentes, um acento (terracota), a marca (café) nos botões
   principais, e cores semânticas separadas do acento.

   Tema: segue o sistema (prefers-color-scheme). `:root[data-theme="light"|"dark"]` força.

   Tokens legados (--bg, --card, --ink, --accent...) continuam existindo porque as telas
   foram escritas com eles; aqui eles apontam para os tokens da Regência.
   ===================================================================================== */

:root {
  color-scheme: light;

  /* ---------- Marca ---------- */
  --r-cafe: #4B2E1F;
  --r-terracota: #A9652E;
  --r-terracota-claro: #D08A4E;
  --r-creme: #F0E7D6;
  --r-carvao: #121212;

  /* ---------- Superfícies e texto (claro) ---------- */
  --r-canvas: #F7F3EC;        /* fundo da aplicação */
  --r-surface: #FFFFFF;       /* cartões, colunas, barra */
  --r-surface-2: #F2ECE3;     /* hover, campo, área rebaixada */
  --r-surface-3: #E9E1D5;     /* pressionado, trilho */
  --r-line: #E6DDD0;
  --r-line-strong: #D2C5B3;
  --r-ink: #1E1814;
  --r-ink-2: #564A41;
  --r-ink-3: #74675C;         /* texto de apoio: AA sobre canvas e surface */
  --r-ink-inverse: #FBF7F0;

  /* ---------- Ação ---------- */
  --r-primary: #4B2E1F;       /* botão principal: café */
  --r-primary-hover: #3A2317;
  --r-on-primary: #FBF6EE;
  --r-accent: #A9652E;        /* acento: terracota (indicador ativo, foco, destaque) */
  --r-accent-strong: #8A4E20; /* acento como texto/link sobre claro */
  --r-accent-soft: #F5E8DA;   /* fundo de item ativo */
  --r-accent-soft-2: #EEDAC4;
  --r-focus: rgba(169, 101, 46, .45);

  /* ---------- Semânticas ---------- */
  --r-success: #2B7A4B;  --r-success-soft: #E2F0E6;
  --r-warning: #946000;  --r-warning-soft: #FAEFD7;
  --r-danger:  #B3261E;  --r-danger-soft:  #FBE8E5;
  --r-info:    #2E6490;  --r-info-soft:    #E3EDF6;
  --r-record:  #C8372D;  /* ponto de gravação */

  /* ---------- Tipografia ---------- */
  --r-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-text-2xs: 11px;
  --r-text-xs: 12px;
  --r-text-sm: 13px;
  --r-text-md: 14px;          /* corpo */
  --r-text-lg: 16px;
  --r-text-xl: 19px;
  --r-text-2xl: 24px;
  --r-text-3xl: 32px;
  --r-text-4xl: 44px;
  --r-leading: 1.5;
  --r-tracking-tight: -0.015em;
  --r-tracking-caps: 0.06em;

  /* ---------- Forma ---------- */
  --r-radius-xs: 4px;
  --r-radius-sm: 6px;
  --r-radius: 8px;
  --r-radius-md: 10px;
  --r-radius-lg: 14px;
  --r-radius-xl: 20px;
  --r-radius-pill: 999px;

  /* ---------- Sombra (quente, curta) ---------- */
  --r-shadow-xs: 0 1px 2px rgba(45, 28, 18, .06);
  --r-shadow-sm: 0 1px 2px rgba(45, 28, 18, .06), 0 2px 6px rgba(45, 28, 18, .05);
  --r-shadow-md: 0 2px 4px rgba(45, 28, 18, .05), 0 8px 24px rgba(45, 28, 18, .08);
  --r-shadow-lg: 0 4px 10px rgba(45, 28, 18, .06), 0 20px 48px rgba(45, 28, 18, .14);

  /* ---------- Espaço (base 4) ---------- */
  --r-space-1: 4px;  --r-space-2: 8px;  --r-space-3: 12px; --r-space-4: 16px;
  --r-space-5: 20px; --r-space-6: 24px; --r-space-8: 32px; --r-space-10: 40px; --r-space-12: 48px;

  --r-ease: cubic-bezier(.2, .7, .2, 1);
  --r-dur: .16s;
  --r-sidebar-w: 248px;
}

/* ---------- Tema escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --r-canvas: #121110;
    --r-surface: #1B1917;
    --r-surface-2: #24211E;
    --r-surface-3: #2E2A26;
    --r-line: #332E2A;
    --r-line-strong: #48413A;
    --r-ink: #F0E7D6;
    --r-ink-2: #CDBFAC;
    --r-ink-3: #A09281;
    --r-ink-inverse: #1B1917;
    --r-primary: #D08A4E;
    --r-primary-hover: #DC9C63;
    --r-on-primary: #1C120B;
    --r-accent: #D08A4E;
    --r-accent-strong: #E3A878;
    --r-accent-soft: #2E2119;
    --r-accent-soft-2: #3B2A1E;
    --r-focus: rgba(208, 138, 78, .55);
    --r-success: #63C08C;  --r-success-soft: #172A1F;
    --r-warning: #E3B052;  --r-warning-soft: #2F2615;
    --r-danger:  #F27C70;  --r-danger-soft:  #351B18;
    --r-info:    #82B6DC;  --r-info-soft:    #172532;
    --r-record:  #F0675B;
    --r-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --r-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
    --r-shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .4);
    --r-shadow-lg: 0 4px 12px rgba(0, 0, 0, .4), 0 24px 56px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --r-canvas: #121110;
  --r-surface: #1B1917;
  --r-surface-2: #24211E;
  --r-surface-3: #2E2A26;
  --r-line: #332E2A;
  --r-line-strong: #48413A;
  --r-ink: #F0E7D6;
  --r-ink-2: #CDBFAC;
  --r-ink-3: #A09281;
  --r-ink-inverse: #1B1917;
  --r-primary: #D08A4E;
  --r-primary-hover: #DC9C63;
  --r-on-primary: #1C120B;
  --r-accent: #D08A4E;
  --r-accent-strong: #E3A878;
  --r-accent-soft: #2E2119;
  --r-accent-soft-2: #3B2A1E;
  --r-focus: rgba(208, 138, 78, .55);
  --r-success: #63C08C;  --r-success-soft: #172A1F;
  --r-warning: #E3B052;  --r-warning-soft: #2F2615;
  --r-danger:  #F27C70;  --r-danger-soft:  #351B18;
  --r-info:    #82B6DC;  --r-info-soft:    #172532;
  --r-record:  #F0675B;
  --r-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --r-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
  --r-shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .4);
  --r-shadow-lg: 0 4px 12px rgba(0, 0, 0, .4), 0 24px 56px rgba(0, 0, 0, .55);
}

/* ---------- Tokens legados → Regência (as telas antigas leem estes nomes) ---------- */
:root {
  --bg: var(--r-canvas);
  --card: var(--r-surface);
  --paper: var(--r-surface);
  --ink: var(--r-ink);
  --ink-soft: var(--r-ink-2);
  --muted: var(--r-ink-3);
  --line: var(--r-line);
  --border: var(--r-line);
  --accent: var(--r-primary);
  --accent-deep: var(--r-accent-strong);
  --accent-bg: var(--r-accent-soft);
  --accent-ink: var(--r-on-primary);
  --good: var(--r-success);
  --good-bg: var(--r-success-soft);
  --ok: var(--r-success);
  --bad: var(--r-danger);
  --bad-bg: var(--r-danger-soft);
  --warn: var(--r-warning);
  --warn-bg: var(--r-warning-soft);
  --shadow: var(--r-shadow-sm);
  --mono: var(--r-font-mono);
  /* nomes antigos da marca anterior: apontam para o acento, para nada ficar dourado */
  --jarvis-gold: var(--r-accent);
  --jarvis-gold-bright: var(--r-accent-strong);
  --jarvis-glow: var(--r-focus);
}

/* =====================================================================================
   Base
   ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--r-canvas);
  color: var(--r-ink);
  font-family: var(--r-font);
  font-size: var(--r-text-md);
  line-height: var(--r-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { letter-spacing: var(--r-tracking-tight); }
::selection { background: var(--r-accent-soft-2); color: var(--r-ink); }
:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
code, kbd, samp, pre { font-family: var(--r-font-mono); }
.r-mono, .r-num { font-family: var(--r-font-mono); font-variant-numeric: tabular-nums; }

/* barra de rolagem discreta */
* { scrollbar-color: var(--r-line-strong) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--r-line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Logo que troca com o tema: duas <img>, uma aparece por vez. */
.r-logo { display: inline-flex; align-items: center; line-height: 0; }
.r-logo img { display: block; height: 100%; width: auto; }
.r-logo .r-logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .r-logo .r-logo-claro { display: none; }
  :root:not([data-theme="light"]) .r-logo .r-logo-escuro { display: block; }
}
:root[data-theme="dark"] .r-logo .r-logo-claro { display: none; }
:root[data-theme="dark"] .r-logo .r-logo-escuro { display: block; }

/* =====================================================================================
   Componentes
   ===================================================================================== */

/* ---------- Cabeçalho de tela ---------- */
.r-header {
  display: flex; align-items: center; gap: var(--r-space-3); flex-wrap: wrap;
  padding: var(--r-space-5) var(--r-space-6); border-bottom: 1px solid var(--r-line);
  background: var(--r-surface);
}
.r-header h1, .r-title { margin: 0; font-size: var(--r-text-xl); font-weight: 700; letter-spacing: var(--r-tracking-tight); }
.r-eyebrow {
  font-size: var(--r-text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--r-tracking-caps); color: var(--r-ink-3);
}
.r-subtitle { margin: 2px 0 0; font-size: var(--r-text-sm); color: var(--r-ink-3); }

/* ---------- Botões ---------- */
.r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: var(--r-radius);
  font: 600 var(--r-text-sm)/1 var(--r-font); letter-spacing: .005em;
  border: 1px solid var(--r-line-strong); background: var(--r-surface); color: var(--r-ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease), color var(--r-dur) var(--r-ease), box-shadow var(--r-dur) var(--r-ease);
}
.r-btn:hover { background: var(--r-surface-2); }
.r-btn:disabled, .r-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.r-btn svg { width: 16px; height: 16px; flex: none; }
.r-btn-primary { background: var(--r-primary); border-color: var(--r-primary); color: var(--r-on-primary); box-shadow: var(--r-shadow-xs); }
.r-btn-primary:hover { background: var(--r-primary-hover); border-color: var(--r-primary-hover); }
.r-btn-accent { background: var(--r-accent); border-color: var(--r-accent); color: #fff; }
.r-btn-ghost { background: transparent; border-color: transparent; color: var(--r-ink-2); }
.r-btn-ghost:hover { background: var(--r-surface-2); color: var(--r-ink); }
.r-btn-danger { background: var(--r-surface); border-color: var(--r-line-strong); color: var(--r-danger); }
.r-btn-danger:hover { background: var(--r-danger-soft); border-color: var(--r-danger); }
.r-btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--r-text-xs); border-radius: var(--r-radius-sm); }
.r-btn-lg { min-height: 44px; padding: 0 20px; font-size: var(--r-text-md); border-radius: var(--r-radius-md); }
.r-btn-block { width: 100%; }
.r-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--r-radius); border: 1px solid transparent; background: transparent;
  color: var(--r-ink-3); cursor: pointer;
}
.r-icon-btn:hover { background: var(--r-surface-2); color: var(--r-ink); }
.r-link { color: var(--r-accent-strong); font-weight: 600; text-decoration: none; }
.r-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Campos ---------- */
.r-label { display: block; font-size: var(--r-text-xs); font-weight: 600; color: var(--r-ink-2); margin: 0 0 6px; }
.r-input, .r-select, .r-textarea {
  width: 100%; min-height: 40px; padding: 9px 12px; border-radius: var(--r-radius);
  border: 1px solid var(--r-line-strong); background: var(--r-surface); color: var(--r-ink);
  font: 400 var(--r-text-md)/1.4 var(--r-font);
  transition: border-color var(--r-dur) var(--r-ease), box-shadow var(--r-dur) var(--r-ease);
}
.r-textarea { min-height: 96px; resize: vertical; }
.r-input::placeholder, .r-textarea::placeholder { color: var(--r-ink-3); }
.r-input:hover, .r-select:hover, .r-textarea:hover { border-color: var(--r-ink-3); }
.r-input:focus, .r-select:focus, .r-textarea:focus { outline: none; border-color: var(--r-accent); box-shadow: 0 0 0 3px var(--r-focus); }
.r-select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374675C' stroke-width='2.2' 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 12px center;
}
.r-help { font-size: var(--r-text-xs); color: var(--r-ink-3); margin-top: 6px; }

/* ---------- Cartões ---------- */
.r-card {
  background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-radius-lg);
  padding: var(--r-space-5); box-shadow: var(--r-shadow-xs);
}
.r-card-hover { transition: border-color var(--r-dur) var(--r-ease), box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease); }
.r-card-hover:hover { border-color: var(--r-line-strong); box-shadow: var(--r-shadow-md); transform: translateY(-1px); }

/* ---------- Abas ---------- */
.r-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--r-line); }
.r-tab {
  position: relative; padding: 10px 12px; border: 0; background: transparent; cursor: pointer;
  font: 600 var(--r-text-sm)/1 var(--r-font); color: var(--r-ink-3);
}
.r-tab:hover { color: var(--r-ink); }
.r-tab[aria-selected="true"], .r-tab.active { color: var(--r-ink); }
.r-tab[aria-selected="true"]::after, .r-tab.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--r-accent); border-radius: 2px;
}
/* segmentado (abas em cápsula) */
.r-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--r-surface-2); border-radius: var(--r-radius); }
.r-segmented > * {
  border: 0; background: transparent; padding: 6px 10px; border-radius: var(--r-radius-sm);
  font: 600 var(--r-text-xs)/1 var(--r-font); color: var(--r-ink-3); cursor: pointer;
}
.r-segmented > .on, .r-segmented > [aria-pressed="true"] { background: var(--r-surface); color: var(--r-ink); box-shadow: var(--r-shadow-xs); }

/* ---------- Pílulas e etiquetas ---------- */
.r-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: var(--r-radius-pill); border: 1px solid var(--r-line); background: var(--r-surface);
  font: 600 var(--r-text-xs)/1 var(--r-font); color: var(--r-ink-2); white-space: nowrap;
}
.r-pill.on, .r-pill[aria-pressed="true"] { background: var(--r-accent-soft); border-color: var(--r-accent); color: var(--r-accent-strong); }
.r-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-radius-pill);
  font: 600 var(--r-text-2xs)/1.5 var(--r-font); letter-spacing: .02em;
  background: var(--r-surface-2); color: var(--r-ink-2);
}
.r-tag-accent { background: var(--r-accent-soft); color: var(--r-accent-strong); }
.r-tag-success { background: var(--r-success-soft); color: var(--r-success); }
.r-tag-warning { background: var(--r-warning-soft); color: var(--r-warning); }
.r-tag-danger { background: var(--r-danger-soft); color: var(--r-danger); }
.r-tag-info { background: var(--r-info-soft); color: var(--r-info); }

/* ---------- Tabelas ---------- */
.r-table { width: 100%; border-collapse: collapse; font-size: var(--r-text-sm); }
.r-table th {
  text-align: left; font-size: var(--r-text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--r-tracking-caps); color: var(--r-ink-3); padding: 10px 12px;
  border-bottom: 1px solid var(--r-line); background: var(--r-surface);
}
.r-table td { padding: 11px 12px; border-bottom: 1px solid var(--r-line); vertical-align: middle; }
.r-table tbody tr:hover td { background: var(--r-surface-2); }
.r-table .r-num, .r-table td.num { font-family: var(--r-font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Estado vazio ---------- */
.r-empty { text-align: center; padding: var(--r-space-12) var(--r-space-6); color: var(--r-ink-3); }
.r-empty-icon {
  width: 48px; height: 48px; margin: 0 auto var(--r-space-4); border-radius: var(--r-radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--r-surface-2); color: var(--r-accent);
}
.r-empty-icon svg { width: 22px; height: 22px; }
.r-empty h3 { margin: 0 0 4px; font-size: var(--r-text-lg); color: var(--r-ink); }
.r-empty p { margin: 0 auto; max-width: 36ch; font-size: var(--r-text-sm); line-height: 1.55; }

/* ---------- Toast ---------- */
.r-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: var(--r-radius-md);
  background: var(--r-ink); color: var(--r-ink-inverse); box-shadow: var(--r-shadow-lg);
  font: 500 var(--r-text-sm)/1.4 var(--r-font);
}
.r-toast-success { border-left: 3px solid var(--r-success); }
.r-toast-danger { border-left: 3px solid var(--r-danger); }

/* ---------- Aviso em linha ---------- */
.r-alert { padding: 11px 14px; border-radius: var(--r-radius-md); font-size: var(--r-text-sm); line-height: 1.45; border: 1px solid transparent; }
.r-alert-danger { background: var(--r-danger-soft); color: var(--r-danger); }
.r-alert-success { background: var(--r-success-soft); color: var(--r-success); }
.r-alert-warning { background: var(--r-warning-soft); color: var(--r-warning); }
.r-alert-info { background: var(--r-info-soft); color: var(--r-info); }

/* ---------- Marca da página (monograma animado, substitui o antigo "orb") ----------
   Usado nos lugares que antes tinham `.jarvis-orb`: um selo quadrado arredondado em café com
   o "ia." da marca. Em `.active` (gravando/processando), uma barra de progresso respira embaixo. */
.jarvis-orb {
  position: relative; width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: var(--r-cafe) url("/marca/regencia-icone.svg") center / cover no-repeat;
  box-shadow: var(--r-shadow-xs);
}
.jarvis-orb > .ring-outer, .jarvis-orb > .ring-inner, .jarvis-orb > .core { display: none !important; }
.jarvis-orb.active::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -8px; height: 3px; border-radius: 3px;
  background: var(--r-accent); animation: r-respira 1.1s ease-in-out infinite;
}
@keyframes r-respira { 0%, 100% { opacity: .35; transform: scaleX(.55); } 50% { opacity: 1; transform: scaleX(1); } }

/* ---------- Faixa "Visualizando como" (modo ver como) ---------- */
.r-impersonate-bar { background: var(--r-accent) !important; color: #fff !important; }

/* ---------- Identidade de quem está logado (slot #authUserSlot das telas) ---------- */
.r-user-name { font-size: var(--r-text-sm); font-weight: 600; color: var(--r-ink); margin-right: 2px; }
.r-user-link {
  font: 500 var(--r-text-sm)/1 var(--r-font); color: var(--r-ink-3); text-decoration: none;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.r-user-link:hover { color: var(--r-accent-strong); }

/* ---------- Selo do app no cabeçalho das telas internas ---------- */
.r-app-mark {
  width: 32px; height: 32px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--r-accent-soft); color: var(--r-accent-strong);
}
.r-app-mark svg { width: 17px; height: 17px; }
.r-crumb-sep { color: var(--r-ink-3); font-weight: 400; margin: 0 2px; }
.r-crumb-sub { color: var(--r-ink-3); font-weight: 500; }

/* Cabeçalho das telas internas no celular: quebra em duas linhas em vez de estourar a largura. */
@media (max-width: 640px) {
  header .header-row { flex-wrap: wrap; row-gap: 10px; }
  header .header-row > :last-child { flex-wrap: wrap; }
  header .r-user-name { display: none; }
}