/* ============================================================
 * tribunal-faltas.css — Sección Tribunal de Faltas
 * Complementa ayuda.css con el bloque de flujo bipartito y servicios.
 * © 2026 AS Sistemas · Alberto Salafia · Todos los derechos reservados
 *
 * Reglas (skills design-taste-frontend + emil-design-eng):
 * - Paleta v1.0 + acento burdeos para Tribunal (coherente con tag fichas)
 * - Easing custom · :active scale · prefers-reduced-motion
 * - Solo transform/opacity
 * ============================================================ */

/* ── Lista "qué podés hacer acá" ─────────────────────────── */

.tf-servicios {
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
@media (min-width: 600px) {
  .tf-servicios { grid-template-columns: 1fr 1fr; }
}

.tf-servicios li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.tf-servicios li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-color: #9F1239;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.tf-servicios li strong { color: var(--c-ink); font-weight: 700; }

/* ── Flujo bipartito (pagás / retirás) ───────────────────── */

.tf-flujo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  align-items: stretch;
  margin-bottom: var(--s-4);
}
@media (min-width: 640px) {
  .tf-flujo {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
}

.tf-flujo__paso {
  padding: var(--s-5);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.tf-flujo__paso--pago { border-left: 4px solid #16A34A; }
.tf-flujo__paso--retiro { border-left: 4px solid #9F1239; }

.tf-flujo__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-bottom: var(--s-2);
}
.tf-flujo__paso--pago .tf-flujo__icono { background: #DCFCE7; color: #166534; }
.tf-flujo__paso--retiro .tf-flujo__icono { background: #FEE2E2; color: #9F1239; }
.tf-flujo__icono svg { width: 18px; height: 18px; }

.tf-flujo__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: 4px;
}
.tf-flujo__valor {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.tf-flujo__valor small {
  display: block;
  margin-top: 2px;
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-ink-soft);
}

.tf-flujo__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-muted);
  font-size: 1.6rem;
  font-weight: 700;
}
@media (max-width: 639px) {
  .tf-flujo__sep { transform: rotate(90deg); padding: var(--s-1) 0; }
}

.tf-flujo__nota {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  text-align: center;
  margin: 0;
}
.tf-flujo__nota strong { color: var(--c-ink); }

/* ── CTA principal Tribunal (burdeos) ────────────────────── */

.tf-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: #9F1239;
  color: #fff;
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  text-decoration: none;
  border-radius: var(--r-md);
  border: 0;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tf-cta:hover { background: #881337; color: #fff; }
.tf-cta:active { transform: scale(0.97); }
.tf-cta svg { width: 20px; height: 20px; }

.tf-cta-helper {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tf-cta { transition: none; }
  .tf-cta:active { transform: none; }
}