/* Procedo — ERP boundary (our-process)
   O card da direita e desenhado so com divs: dois paineis num grid de duas colunas
   com gap de 62px, e dentro desse gap ficam a linha tracejada da fronteira e as duas
   setas que a cruzam em sentidos opostos, pulsando em contrafase.
   As setas tem 58px, entao o gap nao encolhe abaixo de ~56px sem encolher tambem as
   setas — por isso o breakpoint de 991px baixa os dois juntos.
   Aqui fica so a geometria e as cores que o tema nao tem como utility; tipografia,
   espacamento e as cores que existem (bg-blue-40, text-base-color, text-medium-gray)
   vem das utilities no markup de _partials/our-process/erp-boundary.php.
   A paleta e a mesma do atom-cycle.css, para os dois diagramas da pagina lerem como
   um so desenho. */

.erp-boundary {
  --erp-record-bg: #f4f6fa;        /* superficie do painel ERP */
  --erp-record-swatch: #c9d9ee;    /* swatch neutro do ERP */
  --erp-record-divider: #e4e9f1;
  --erp-work-bg: #eef3fb;          /* superficie do painel Procedo */
  --erp-work-border: #cfdcf0;
  --erp-work-divider: #d7e2f2;
  --erp-divider: #eef1f6;          /* filetes do card (header e rodape) */
  --erp-line: #9fb2cd;             /* fronteira tracejada */
  --erp-arrow-out: #1a56bb;        /* ERP -> Procedo */
  --erp-arrow-back: #8ba7ce;       /* Procedo -> ERP */
  --erp-arrow-size: 58px;
}

/* a borda vem daqui, e nao das utilities .border / .border-color-*, que sao !important */
.erp-card {
  border: 1px solid var(--border-gray);
}

.erp-card-head {
  border-bottom: 1px solid var(--erp-divider);
}

.erp-card-foot {
  border-top: 1px solid var(--erp-divider);
  max-width: 56ch;
}

.erp-chip {
  padding: 4px 8px;
  border: 1px solid var(--erp-work-border);
  background: var(--erp-work-bg);
}

/* CSS Grid e nao .row: o gap aqui e estrutural (e o corredor da fronteira) e este
   build do Crafto so tem .gap-2 */
.erp-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 62px;
}

.erp-panel {
  padding: 18px 16px 16px;
  background: var(--erp-record-bg);
  border: 1px solid var(--border-gray);
}

.erp-panel--work {
  background: var(--erp-work-bg);
  border-color: var(--erp-work-border);
}

.erp-panel-divider {
  border-top: 1px solid var(--erp-record-divider);
}

.erp-panel--work .erp-panel-divider {
  border-top-color: var(--erp-work-divider);
}

.erp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 0;
}

.erp-list li {
  gap: 10px;
}

.erp-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--erp-record-swatch);
}

/* a fronteira ultrapassa os paineis em 6px em cima e embaixo, de proposito */
.erp-line {
  position: absolute;
  left: 50%;
  top: -6px;
  bottom: -6px;
  width: 0;
  border-left: 1px dashed var(--erp-line);
}

/* haste + ponta: a ponta e um quadrado de 7px com duas bordas, girado 45deg, mesma
   tecnica do .atom-chevron */
.erp-arrow {
  position: absolute;
  left: 50%;
  width: var(--erp-arrow-size);
  margin-left: calc(var(--erp-arrow-size) / -2);
  height: 9px;
}

.erp-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  height: 1px;
}

.erp-arrow::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
}

.erp-arrow--out {
  top: 34%;
  animation: erpPulseA 3.6s ease-in-out infinite;
}

.erp-arrow--out::before {
  background: var(--erp-arrow-out);
}

.erp-arrow--out::after {
  right: 0;
  border-top: 1px solid var(--erp-arrow-out);
  border-right: 1px solid var(--erp-arrow-out);
}

.erp-arrow--back {
  top: 62%;
  animation: erpPulseB 3.6s ease-in-out infinite;
}

.erp-arrow--back::before {
  background: var(--erp-arrow-back);
}

.erp-arrow--back::after {
  left: 0;
  border-bottom: 1px solid var(--erp-arrow-back);
  border-left: 1px solid var(--erp-arrow-back);
}

/* as duas setas acendem alternadamente: nunca as duas no mesmo instante, senao a
   troca entre os sistemas parece simultanea */
@keyframes erpPulseA {
  0%, 42% { opacity: 1; }
  58%, 100% { opacity: .16; }
}

@keyframes erpPulseB {
  0%, 42% { opacity: .16; }
  58%, 100% { opacity: 1; }
}

/* abaixo de ~1000px os rotulos dos paineis quebram em duas ou tres linhas: fecha o
   corredor e encolhe as setas junto */
@media (max-width: 991px) {
  .erp-boundary {
    --erp-arrow-size: 44px;
  }

  .erp-grid {
    gap: 48px;
  }
}

/* em coluna unica nao existe fronteira vertical: linha e setas saem */
@media (max-width: 575px) {
  .erp-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .erp-line,
  .erp-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .erp-arrow {
    animation: none;
    opacity: 1;
  }
}