/* ==========================================================================
   Avla Hub — componentes. Cores, fontes, espaçamentos e formas vêm SÓ dos tokens do
   sistema de design (estilos/_tokens.scss, servido em /marca/avla.css e linkado antes
   deste arquivo). Nenhum valor de marca é definido aqui (sistema-diseno.md §8).
   ========================================================================== */

/* Aliases dos nomes antigos, ainda usados em atributos style= dos templates.
   Todos apontam para tokens — não são cores/fontes novas. */
:root{
  --avla-blue-dark:var(--brand-strong); --off-white:var(--border); --white:var(--surface);
  --ink:var(--text); --gray:var(--text-muted);
  --serif:var(--font-display); --sans:var(--font-body); --mono:var(--font-caption);
  --font-label:var(--font-caption);
}

*{box-sizing:border-box;}
input,button,select,textarea{font:inherit;}   /* nada de fonte padrão do navegador */
body{font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--text); margin:0; background:var(--bg);}
a{color:var(--brand);}
a:hover{color:var(--brand-strong);}
b,strong{font-weight:var(--fw-bold);}
h1,h2,h3{font-family:var(--font-display); font-weight:var(--fw-regular); line-height:var(--lh-tight); margin:0;}
code{font-family:var(--font-caption); font-size:var(--fs-aux); background:var(--surface-2);
  padding:0 var(--space-4); border-radius:var(--radius-control);}
:focus-visible{outline:var(--focus-width) solid var(--brand); outline-offset:2px;}

/* ------------------------------------------------------------------ cabeçalho */
.topo{background:var(--brand); color:var(--on-brand); padding:var(--space-12) var(--space-24);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-16);}
.topo .marca{display:flex; align-items:center; gap:var(--space-12);}
.topo .marca .logo{height:28px; width:auto; display:block;}   /* ≈79px de largura (> mínimo 75) */
.topo .selo{font-family:var(--font-caption); font-size:var(--fs-aux); line-height:var(--lh-tight);
  padding-left:var(--space-12); border-left:var(--border-width) solid rgba(255,255,255,.35);}
.topo .selo b{display:block; font-weight:var(--fw-medium);}
.topo .app-nome{font-family:var(--font-caption); font-size:var(--fs-label);}
.topo nav{display:flex; align-items:center; gap:var(--space-16);
  font-family:var(--font-caption); font-size:var(--fs-label);}
.topo nav a{color:var(--on-brand); text-decoration:none;}
.topo nav a:hover{text-decoration:underline; color:var(--on-brand);}
.topo nav a:focus-visible{outline-color:var(--on-brand);}
.topo .quem{font-family:var(--font-body); font-size:var(--fs-aux); opacity:.85;}

/* ------------------------------------------------------------------ layout */
.wrap{max-width:var(--layout-max); margin:0 auto; padding:var(--space-32) var(--space-24) var(--space-48);}
h1.title{font-size:var(--fs-screen-title); color:var(--text); margin-bottom:var(--space-4);}
h2{font-size:var(--fs-section-title);}
.sub{color:var(--text-muted-page); margin:0 0 var(--space-24);}
.mut{color:var(--text-muted); font-size:var(--fs-aux);}

/* ------------------------------------------------------------------ lançador */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-16);}
.card{display:flex; flex-direction:column; background:var(--surface); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-card); padding:var(--space-24); text-decoration:none; color:var(--text);
  transition:border-color .12s;}
.card:hover{border-color:var(--brand); color:var(--text);}
.card .ic{font-size:var(--space-32); line-height:1;}
.card h3{font-size:var(--fs-section-title); margin:var(--space-12) 0 var(--space-4);}
.card p{font-size:var(--fs-label); color:var(--text-muted); margin:0; flex:1;}
.card .abrir{margin-top:var(--space-16); font-family:var(--font-caption); font-weight:var(--fw-medium);
  font-size:var(--fs-label); color:var(--brand);}
.vazio{background:var(--surface); border:var(--border-width) dashed var(--border-strong);
  border-radius:var(--radius-card); padding:var(--space-48); text-align:center; color:var(--text-muted);}

/* ------------------------------------------------------------------ acesso (login)
   Tela de acesso do manual: página em Avla Blue, wordmark branco, cartão como diálogo
   (única sombra permitida). */
body.pagina-auth{background:var(--auth-bg); min-height:100vh;}
body.pagina-auth .topo{display:none;}
.auth-marca{display:flex; justify-content:center; padding:var(--space-48) 0 var(--space-24);}
.auth-marca img{height:48px; width:auto;}
.login-card{max-width:var(--layout-auth); margin:0 auto; background:var(--surface);
  border-radius:var(--radius-dialog); padding:var(--space-32); box-shadow:var(--shadow-dialog);}
.login-card h1{font-size:var(--fs-screen-title); margin:0 0 var(--space-4);}
.login-card .sub{margin-bottom:var(--space-24); color:var(--text-muted);}
.login-card label{display:block; margin:var(--space-12) 0 var(--space-4);}
.login-card .btn{width:100%; margin-top:var(--space-24);}
.login-card .ajuda{margin:var(--space-16) 0 0; text-align:center;}
.lang{text-align:right; font-family:var(--font-caption); font-size:var(--fs-aux);}
.lang a{color:var(--text-muted); text-decoration:none; padding:0 var(--space-4);}
.lang a[aria-current]{color:var(--brand); font-weight:var(--fw-medium);}

/* ------------------------------------------------------------------ controles */
label{font-family:var(--font-caption); font-weight:var(--fw-medium); font-size:var(--fs-label);
  color:var(--text);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-8);
  min-height:var(--size-control); border:var(--border-width) solid transparent;
  border-radius:var(--radius-control); padding:0 var(--space-16);
  font-family:var(--font-caption); font-size:var(--fs-label); font-weight:var(--fw-medium);
  cursor:pointer; text-decoration:none;
  /* padrão = botão secundário; o primário (um por tela, §7) sobrescreve abaixo */
  background:var(--surface); color:var(--text); border-color:var(--border-strong);}
.btn:hover{background:var(--surface-2); color:var(--text);}
.btn-primaria{background:var(--brand); color:var(--on-brand); border-color:var(--brand);}
.btn-primaria:hover{background:var(--brand-strong); border-color:var(--brand-strong); color:var(--on-brand);}
input[type=email],input[type=text],input[type=password],input[type=url],input[type=number],input[type=date],textarea,select{
  width:100%; min-height:var(--size-control); padding:0 var(--space-12);
  border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-control);
  font-family:var(--font-body); font-size:var(--fs-body); color:var(--text); background:var(--surface);}
textarea{padding:var(--space-8) var(--space-12);}
input[type=date]{width:auto;}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:var(--focus-width) solid var(--brand);
  outline-offset:0; border-color:var(--brand);}
input[type=checkbox]{accent-color:var(--brand);}

/* ------------------------------------------------------------------ admin / tabelas */
.card-secao{background:var(--surface); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-card); padding:var(--space-24); margin:var(--space-16) 0;}
.card-secao h2{font-size:var(--fs-subtitle); font-family:var(--font-caption); font-weight:var(--fw-medium);}
table{width:100%; border-collapse:collapse; font-size:var(--fs-body);}
th,td{text-align:left; padding:var(--space-8) var(--space-12); border-bottom:var(--border-width) solid var(--border);
  vertical-align:middle;}
th{font-family:var(--font-caption); font-weight:var(--fw-medium); font-size:var(--fs-label); color:var(--text-muted);}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums;}
.chip{display:inline-block; font-family:var(--font-caption); font-size:var(--fs-aux);
  padding:0 var(--space-8); border-radius:var(--radius-control); vertical-align:middle;}
.chip.on{background:var(--success-bg); color:var(--success-ink);}
.chip.off{background:var(--surface-2); color:var(--text-muted); border:var(--border-width) solid var(--border);}
.chip.adm{background:var(--brand-soft); color:var(--brand);}
label.cbx{display:inline-flex; align-items:center; gap:var(--space-4); font-family:var(--font-body);
  font-weight:var(--fw-regular); font-size:var(--fs-label); margin-right:var(--space-12);}
.grupo-lin{display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4);}
.grupo-lin .cbx-dono{margin-right:0; color:var(--brand);}
.acoes{display:flex; gap:var(--space-8); flex-wrap:wrap; margin-top:var(--space-12);}
.grid-form{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-12);}

/* ------------------------------------------------------------------ mensagens
   A cor nunca é o único portador: toda mensagem tem texto (sistema-diseno.md §7). */
.msg{border-radius:var(--radius-control); padding:var(--space-12) var(--space-16); margin:var(--space-12) 0;
  font-size:var(--fs-body); border-left:4px solid;}
.msg-erro{background:var(--danger-bg); border-left-color:var(--danger); color:var(--text);}
.msg-ok{background:var(--success-bg); border-left-color:var(--success); color:var(--success-ink);}

/* separador (legado da tela de login com Google) */
.sep{display:flex; align-items:center; gap:var(--space-8); color:var(--text-muted); font-size:var(--fs-aux);
  margin:var(--space-16) 0;}
.sep:before,.sep:after{content:""; flex:1; height:var(--border-width); background:var(--border);}

/* sub-seção dentro de uma lista (apps/grupos): fundo da página em vez de cor própria */
.card-secao.sub-secao{background:var(--surface-2); margin:var(--space-12) 0;}
.card-secao.estreito{max-width:var(--layout-auth); margin:var(--space-48) auto;}
.sub.destaque{color:var(--brand);}
.card-secao > .mut:first-of-type{margin-top:var(--space-4);}