/*
 * AccessLav · identidade visual compartilhada
 * Azul (da logo) + cromo + detalhes pretos. Usado por: home, painel (CRUD),
 * terminal de vendas, Access Points, painel do cliente. E-mail replica os mesmos valores inline.
 *
 * Servido em /brand/ nos dois domínios (pasta única: /var/www/html/brand, com symlink em CRUD/ e TERMINAL/).
 * Mobile-first: alvos de toque >= 44px, sem rolagem horizontal, respeita área segura (notch).
 */

:root{
  /* azul da logo */
  --al-blue-300:#7cc4ff;
  --al-blue-400:#38a8f8;
  --al-blue-500:#1170e0;
  --al-blue-600:#0c5fd2;
  --al-blue-700:#0a49a6;
  --al-blue-800:#082f73;
  --al-blue-900:#061f5c;
  --al-cyan:#38bdf8;
  /* pretos/grafite (detalhes) */
  --al-black:#070b14;
  --al-ink:#0f1626;
  --al-ink-2:#172033;
  /* cromo */
  --al-chrome-100:#ffffff;
  --al-chrome-200:#eef2f7;
  --al-chrome-300:#dde4ee;
  --al-chrome-400:#b9c4d3;
  --al-chrome-500:#8d99aa;
  --al-chrome:linear-gradient(180deg,#ffffff 0%,#e3e9f1 48%,#b4c0cf 100%);
  --al-chrome-edge:linear-gradient(135deg,#ffffff,#9eacbf 45%,#eef2f7 70%,#8795a8);
  /* superfícies */
  --al-bg:#f4f7fb;
  --al-surface:#ffffff;
  --al-line:#e2e8f1;
  --al-text:#0f1626;
  --al-muted:#5b6679;
  /* estados */
  --al-good:#0a8a63;
  --al-warn:#a36a00;
  --al-bad:#c2334f;
  /* forma */
  --al-radius-sm:10px;
  --al-radius:16px;
  --al-radius-lg:24px;
  --al-shadow:0 1px 2px rgba(7,11,20,.05),0 8px 24px rgba(7,11,20,.06);
  --al-shadow-lg:0 24px 60px rgba(8,47,115,.22);
  --al-tap:44px;
  --al-font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --al-font-display:"Sora","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --al-safe-top:env(safe-area-inset-top,0px);
  --al-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------- Marca (logo + nome) ---------- */
.al-lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;line-height:1}
.al-lockup img,.al-lockup svg{width:36px;height:36px;flex:0 0 36px;display:block;border-radius:10px}
.al-wordmark{font-family:var(--al-font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em}
.al-wordmark b{font-weight:700;color:var(--al-blue-500)}
.al-lockup--light .al-wordmark{color:#fff}
.al-lockup--light .al-wordmark b{color:var(--al-blue-300)}
.al-lockup--lg img{width:52px;height:52px;flex-basis:52px;border-radius:14px}
.al-lockup--lg .al-wordmark{font-size:1.7rem}

/* texto cromado (títulos de destaque sobre fundo escuro) */
.al-chrome-text{background:var(--al-chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Botões ---------- */
.al-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--al-tap);padding:0 20px;border:1px solid transparent;border-radius:12px;font:700 .95rem/1 var(--al-font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.al-btn:active{transform:translateY(1px)}
.al-btn--primary{color:#fff;background:linear-gradient(180deg,#2a86f0,#0c5fd2);box-shadow:0 6px 18px rgba(12,95,210,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.al-btn--primary:hover{background:linear-gradient(180deg,#3592f6,#0f68e0)}
.al-btn--dark{color:#fff;background:linear-gradient(180deg,#1b2740,#070b14);box-shadow:0 6px 18px rgba(7,11,20,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.al-btn--chrome{color:var(--al-ink);background:var(--al-chrome);border-color:#c9d3e0;box-shadow:0 2px 8px rgba(7,11,20,.18),inset 0 1px 0 #fff}
.al-btn--ghost{color:inherit;background:transparent;border-color:currentColor;border-color:color-mix(in srgb,currentColor 35%,transparent)}
.al-btn--ghost:hover{background:rgba(127,150,190,.12)}
.al-btn--lg{min-height:52px;padding:0 26px;font-size:1.02rem;border-radius:14px}
.al-btn--block{width:100%}

/* ---------- Seletor de abas (pílula grafite sobre trilho branco, o mesmo do painel) ---------- */
.al-tabs{display:flex;gap:4px;padding:5px;background:#fff;border:1px solid var(--al-line);border-radius:16px;box-shadow:0 1px 2px rgba(7,11,20,.04);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.al-tabs::-webkit-scrollbar{display:none}
.al-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:var(--al-tap);padding:0 16px;border:0;border-radius:12px;background:transparent;color:#475569;font:700 .88rem/1 var(--al-font);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.al-tab:hover{background:#eef2f8;color:var(--al-ink)}
.al-tab.is-active,.al-tab[aria-selected="true"]{color:#fff;background:linear-gradient(180deg,#1b2740,#0a1020);box-shadow:0 4px 12px rgba(7,11,20,.28),inset 0 -2px 0 var(--al-blue-500)}

/* ---------- Rodapé institucional ---------- */
.al-footer{padding:22px 16px calc(22px + var(--al-safe-bottom));text-align:center;color:var(--al-muted);font:500 .78rem/1.6 var(--al-font)}
.al-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.al-footer .al-footer-brand{display:inline-flex;align-items:center;gap:8px;color:var(--al-ink);font-weight:700}
.al-footer .al-footer-brand img{width:20px;height:20px;border-radius:6px}
.al-footer--dark{color:#8fa0bd}
.al-footer--dark .al-footer-brand{color:#fff}

/* ---------- Utilidades de responsividade ---------- */
.al-no-hscroll{max-width:100%;overflow-x:clip}
.al-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.al-btn,.al-tab{transition:none}}

/* rodapé: marca em linha própria, centralizada */
.al-footer .al-footer-brand{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:4px}
/* 2026-11-04: "feito com AccessLav" discreto (marca própria em todos os planos) */
.al-footer .al-footer-feito{font-weight:500;font-size:.74rem;color:var(--al-muted);text-decoration:none;opacity:.85;gap:6px}
.al-footer .al-footer-feito img{width:16px;height:16px;border-radius:4px}