/* ==========================================================================
   Prime Services — CSS da pagina (tokens + componentes .tlx-*)
   Carregado APENAS no template page_prime_services.php (enqueue condicional).
   Sem resets globais e sem @import de fontes: o tema ja cuida de ambos.
   ========================================================================== */

/* ==========================================================================
   Teletex — Design tokens (cores, tipografia, espaçamento, raios, fontes)
   Fonte da verdade: site teletex.com.br. Use variáveis — nunca hex literal.
   ========================================================================== */


:root {
  /* ---- Marca / ação ---- */
  --color-brand-blue: #0000D0;

  /* ---- Azuis (oficiais) ---- */
  --color-blue-royal: #0000FF;
  --color-blue-navy: #0A3C8C;
  --color-blue-medium: #1464BE;
  --color-blue-cyan: #3CD2F0;
  --gradient-midnight: linear-gradient(135deg, #020381 0%, #2874FC 100%);

  /* ---- Azuis extras do site ---- */
  --color-blue-hover: #6D6DFF;

  /* ---- Paleta complementar (peças gráficas — NUNCA no logo) ---- */
  --color-accent-amber: #FAAF28;
  --color-accent-red: #FA461E;
  --color-accent-green: #3CB5A1;
  --color-accent-magenta: #EC008C;

  /* ---- Neutros: pretos ---- */
  --color-black: #000000;
  --color-preto1: #070707;
  --color-preto2: #222222;
  --color-neutral-700: #242424;

  /* ---- Neutros: cinzas de texto ---- */
  --color-muted: #606060;
  --color-gray-80: #575756;
  --color-gray-60: #878787;
  --color-gray-40: #B2B2B2;
  --color-gray-20: #DADADA;

  /* ---- Neutros: claros ---- */
  --color-branco1: #EFEFEF;
  --color-white: #FFFFFF;

  /* ---- Aliases semânticos ---- */
  --color-text: var(--color-black);
  --color-text-muted: var(--color-muted);
  --color-text-inverse: var(--color-branco1);
  --color-link: var(--color-brand-blue);
  --color-surface: var(--color-white);
  --color-surface-subtle: var(--color-branco1);
  --color-surface-dark: var(--color-preto2);
  --color-surface-darkest: var(--color-preto1);
  --color-border: var(--color-gray-20);
  --color-border-active: var(--color-brand-blue);
  --color-border-on-dark: rgba(255, 255, 255, 0.5);

  /* ---- Tipografia ---- */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "TLTX", "JetBrains Mono", monospace;

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-caption: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 55px;
  --font-size-6xl: 64px;

  --line-height-tight: 1.1;
  --line-height-normal: 1.5;

  /* ---- Espaçamento (base 4px) ---- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-15: 60px;
  --space-23: 91px;
  --space-28: 112px;
  --space-30: 120px;

  /* ---- Raios ---- */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-2xl: 30px;
  --radius-pill: 100px;
  --radius-full: 50%;
}

/* ---- Botão: usa o NATIVO do tema (.btn-hover-arrow > .botao > p + .quadrado.quadrado-two,
   com arrows.png). Regras vivem no style.css de produção — nada a definir aqui. ---- */

/* ---- Divisória vertical entre "O serviço inclui" e "O que muda" (igual ao PRIMEDEPLOY) ---- */
.tlx-svc-cols > div + div { border-left: 1px solid var(--color-border); padding-left: 24px; }

/* ---- Cards do SUSTENTAR: faixa (header) e corpo com altura padronizada por linha (subgrid) ---- */
.tlx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 24px; margin-top: 44px; }
.tlx-cards > .tlx-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; }

/* ---- Colapsa "O serviço inclui / O que muda" no mobile: primeiro em cima, o outro embaixo ---- */
@media (max-width: 768px) {
  .tlx-svc-cols { grid-template-columns: 1fr !important; }
  .tlx-svc-cols > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: 20px; margin-top: 20px; }
}

/* ---- PRIMEDEPLOY: card de serviço único em destaque (identidade + 2 listas) ---- */
.tlx-deploy {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  margin-top: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.tlx-deploy__col { padding: clamp(28px, 3vw, 40px); border-left: 1px solid var(--color-border); }
@media (max-width: 900px) {
  .tlx-deploy { grid-template-columns: 1fr; }
  .tlx-deploy__col { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ---- Tabelas: remove a linha dupla entre a última linha e a moldura ---- */
.tlx-tbl tbody tr:last-child td { border-bottom: 0 !important; }

/* ---- Fluxo de atendimento: serpentina no mobile (USUÁRIO → SERVICE DESK / ↓ / OUTSOURCING ← NOC) ---- */
@media (max-width: 768px) {
  .tlx-fluxo {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "u   a1  sd"
      ".   .   a2"
      "out a3  noc";
  }
  .tlx-fluxo > div {
    min-width: 0 !important; padding: 14px 10px !important; font-size: 13px !important;
    align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  }
  .tlx-fluxo__u   { grid-area: u; }
  .tlx-fluxo__sd  { grid-area: sd; }
  .tlx-fluxo__noc { grid-area: noc; }
  .tlx-fluxo__out { grid-area: out; }
  .tlx-fluxo__a1  { grid-area: a1; }
  .tlx-fluxo__a2  { grid-area: a2; transform: rotate(90deg); justify-self: center; }
  .tlx-fluxo__a3  { grid-area: a3; transform: rotate(180deg); }
}

/* ---- Tabelas responsivas: no mobile cada linha vira um card separado (nada é cortado) ---- */
@media (max-width: 768px) {
  .tlx-tbl-wrap { border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  .tlx-tbl { min-width: 0 !important; width: 100%; border-collapse: separate !important; }
  .tlx-tbl thead { display: none; }
  .tlx-tbl tbody { display: block; }
  .tlx-tbl tbody tr {
    display: block; padding: 16px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    margin-bottom: 12px;
  }
  .tlx-tbl tbody tr:last-child { margin-bottom: 0; }
  .tlx-tbl tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 5px 0 !important; border: 0 !important; white-space: normal !important; text-align: right;
  }
  .tlx-tbl tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    color: var(--color-gray-80); text-align: left;
  }
  .tlx-tbl tbody td:first-child { display: block; text-align: left; padding: 0 0 10px !important; font-size: 15px !important; }
  .tlx-tbl tbody td:first-child::before { content: none; }
  /* variante para a tabela escura do SOC */
  .tlx-tbl--dark tbody tr { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
  .tlx-tbl--dark tbody td::before { color: var(--color-gray-40); }
}