/* Zera Hub — o que é só do hub e vale em toda página: cores de produto, o logo inline e o ladrilho de
   produto (docs/DESIGN.md do hub §2 e §4). Cor de produto só no ladrilho, no ícone do produto e na marca.
   Carregar depois de base.css e componentes.css. */

:root {
  --crm: #14b8a6;           /* ZeraCRM */
  --crm-txt: #0f766e;       /* teal como texto sobre claro (5,4:1) */
  --crm-suave: rgba(20, 184, 166, 0.14);
  --p-zerasync: var(--wa);  /* o verde do "SYNC" */
  --p-zeracrm: var(--crm);
  --p-api: var(--zera);     /* API do WhatsApp: azul-aço (nunca o logo do WhatsApp) */
  --p-core: var(--ia);      /* serviços da família Core */
  --corte-ladrilho: 12px;   /* 3 de avanço por 5 de descida: 12 x 20 */
}
html[data-theme="dark"] {
  --crm: #2dd4bf;
  --crm-txt: #2dd4bf;
  --crm-suave: rgba(45, 212, 191, 0.16);
}

/* ------------------------------------------------------------ logo do produto (components/logo.js) */
.logo-produto { display: inline-flex; align-items: center; height: var(--logo-alt, 28px); color: var(--txt); flex: none; }
.logo-produto svg { height: 100%; width: auto; display: block; overflow: visible; }
.logo-produto .rotulo { fill: var(--zera); }
.logo-produto.zeracrm .rotulo { fill: var(--crm); }
.logo-produto.claro { color: #fff; }
.logo-produto.claro .rotulo { fill: #8fb0cf; }

/* ------------------------------------------------------------ ladrilho de produto (components/ladrilho.js)
   Três camadas: .ladrilho (sombra e filtro de cor, sem recorte) > .ladrilho-borda (recorte com o corte Zera,
   pintado na cor da borda) > .ladrilho-in (o cartão, 1 px para dentro, com o mesmo corte). Assim a borda
   acompanha a diagonal do corte e a sombra não é cortada junto. */
.ladrilho {
  --prod: var(--zera); --prod-forte: color-mix(in srgb, var(--prod) 72%, #0b141a);
  position: relative; min-width: 0; display: flex;
  filter: drop-shadow(0 1px 1.5px rgba(22, 32, 43, 0.07)) drop-shadow(0 4px 12px rgba(22, 32, 43, 0.06));
  transition: filter var(--t-estado), transform var(--t-estado), opacity var(--t-estado);
}
html[data-theme="dark"] .ladrilho { filter: none; }
.ladrilho-borda {
  flex: 1; min-width: 0; padding: 1px; border-radius: var(--raio-c); background: var(--linha);
  clip-path: polygon(0 0, calc(100% - var(--corte-ladrilho)) 0, 100% calc(var(--corte-ladrilho) * 5 / 3), 100% 100%, 0 100%);
  transition: background var(--t-estado);
}
.ladrilho-in {
  height: 100%; border-radius: calc(var(--raio-c) - 1px); background: var(--sup); display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 16px; position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--corte-ladrilho) + 0.44px) 0, 100% calc(var(--corte-ladrilho) * 5 / 3 - 0.72px), 100% 100%, 0 100%);
}
.ladrilho.clicavel:hover .ladrilho-borda, .ladrilho:focus-within .ladrilho-borda { background: color-mix(in srgb, var(--prod) 45%, var(--linha)); }

.ladrilho-topo { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.ladrilho-ic {
  width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; position: relative;
  background: linear-gradient(140deg, color-mix(in srgb, var(--prod) 88%, #fff) 0%, var(--prod) 45%, var(--prod-forte) 100%);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 15px, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ladrilho-ic .ic { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
.ladrilho-ic .tranca { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--zera-noite); color: #fff; box-shadow: 0 0 0 2px var(--sup); }
.ladrilho-nomes { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 2px; flex: 1; }
.ladrilho-nome { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; color: var(--txt); }
.ladrilho-desc { color: var(--txt-2); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(13.5px * 1.45 * 2); }
.ladrilho-plano { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--txt-3); font-weight: 550; min-width: 0; }
.ladrilho-plano .ic { color: var(--txt-3); }
.ladrilho-adicionais { display: flex; flex-wrap: wrap; gap: 6px; }
.ladrilho-adicionais .chip { height: 26px; gap: 6px; }
.ladrilho-adicionais a.chip { text-decoration: none; color: var(--zera-txt); border-style: dashed; }
.ladrilho-adicionais a.chip:hover { background: var(--zera-suave); }
.ladrilho-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.ladrilho-acoes .btn { text-decoration: none; }
.ladrilho-acoes .aviso-acesso { font-size: 12.5px; color: var(--txt-3); display: inline-flex; align-items: center; gap: 6px; }

/* preparando: a barra fina na base, com o passo escrito */
.ladrilho-progresso { display: flex; flex-direction: column; gap: 7px; }
.ladrilho-progresso .passo { font-size: 12.5px; color: var(--txt-2); display: flex; align-items: center; gap: 6px; }
.ladrilho-progresso .trilho-p { height: 6px; border-radius: 3px; background: var(--afundado); overflow: hidden; }
.ladrilho-progresso .trilho-p i { display: block; height: 100%; width: var(--p, 10%); border-radius: 3px; background: var(--prod);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3.6px) 100%, 0 100%); transition: width 600ms cubic-bezier(.16, 1, .3, 1); }
.ladrilho-progresso.andando .trilho-p i { background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 220% 100%; animation: ladrilho-corre 1.6s linear infinite; }
@keyframes ladrilho-corre { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* faixa na base: aguardando pagamento, atrasado, suspenso, erro (ícone + texto, nunca só cor) */
.ladrilho-faixa { margin: 0 -18px -16px; padding: 10px 18px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ladrilho-faixa.alerta { background: var(--alerta-bg); color: var(--alerta-forte); }
.ladrilho-faixa.erro { background: var(--erro-bg); color: var(--erro-forte); }
.ladrilho-faixa.info { background: var(--zera-suave); color: var(--zera-txt); }
html[data-theme="dark"] .ladrilho-faixa.alerta { color: #f3c27a; }
html[data-theme="dark"] .ladrilho-faixa.erro { color: #f3a6a5; }

/* não contratado, suspenso, em breve: o ladrilho inteiro cinza; no hover ou foco ganha 35% da cor e sobe */
.ladrilho.cinza { filter: grayscale(1) drop-shadow(0 1px 1.5px rgba(22, 32, 43, 0.05)); opacity: 0.78; }
html[data-theme="dark"] .ladrilho.cinza { filter: grayscale(1); }
.ladrilho.cinza .ladrilho-ic { background: var(--afundado); color: var(--txt-3); box-shadow: inset 0 0 0 1px var(--linha); }
.ladrilho.cinza:hover, .ladrilho.cinza:focus-within { filter: grayscale(0.65) drop-shadow(0 6px 16px rgba(22, 32, 43, 0.1)); opacity: 1; transform: translateY(-2px); }
.ladrilho.cinza:hover .ladrilho-ic, .ladrilho.cinza:focus-within .ladrilho-ic {
  background: linear-gradient(140deg, color-mix(in srgb, var(--prod) 88%, #fff) 0%, var(--prod) 45%, var(--prod-forte) 100%); color: #fff; box-shadow: none;
}
.ladrilho.em-breve:hover, .ladrilho.em-breve:focus-within { transform: none; }
/* suspenso: o conteúdo em cinza com o cadeado; a faixa vermelha e o Regularizar continuam com cor */
.ladrilho.suspenso .ladrilho-ic { filter: grayscale(1); opacity: 0.7; }
.ladrilho.suspenso .ladrilho-nome, .ladrilho.suspenso .ladrilho-desc, .ladrilho.suspenso .ladrilho-plano { filter: grayscale(1); opacity: 0.72; }
/* contratado mas parado (aguardando pagamento, sem acesso): colorido apagado */
.ladrilho.apagado .ladrilho-ic { opacity: 0.55; }
.ladrilho.apagado .ladrilho-nome, .ladrilho.apagado .ladrilho-desc { opacity: 0.8; }

/* compacto: os serviços da família Core embaixo do Início */
.ladrilho.compacto .ladrilho-in { padding: 14px 14px 12px; gap: 10px; }
.ladrilho.compacto .ladrilho-ic { width: 40px; height: 40px; border-radius: 11px; clip-path: polygon(0 0, calc(100% - 7.2px) 0, 100% 12px, 100% 100%, 0 100%); }
.ladrilho.compacto .ladrilho-nome { font-size: 15px; }
.ladrilho.compacto .ladrilho-desc { font-size: 12.5px; min-height: calc(12.5px * 1.45 * 2); }
.ladrilho.compacto .ladrilho-faixa { margin: 0 -14px -12px; padding: 8px 14px; }

@media (prefers-reduced-motion: reduce) {
  .ladrilho, .ladrilho-borda, .ladrilho-progresso .trilho-p i { transition: none; }
  .ladrilho-progresso.andando .trilho-p i { animation: none; }
  .ladrilho.cinza:hover, .ladrilho.cinza:focus-within { transform: none; }
}