/* ═══════════════════════════════════════════
   COMPONENTS — Botones, chips, badges, cards, formulario
   TFAR Web · tfarafaela.ar
═══════════════════════════════════════════ */

/* ── BOTONES ── */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .9rem 2rem; transition: all .22s; cursor: none;
  border: none; outline: none;
}
.btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.btn-oro {
  background: var(--oro); color: var(--azul); border: 1.5px solid var(--oro);
}
.btn-oro:hover { background: var(--oro-armas-d); border-color: var(--oro-armas-d); color: #fff; transform: translateY(-2px); }

.btn-azul {
  background: var(--azul); color: #fff; border: 1.5px solid var(--azul);
}
.btn-azul:hover { background: var(--azul-m); border-color: var(--azul-m); transform: translateY(-2px); }

.btn-ghost {
  background: transparent; color: var(--azul); border: 1.5px solid var(--azul);
}
.btn-ghost:hover { background: var(--azul); color: #fff; transform: translateY(-2px); }

.btn-ghost-oro {
  background: transparent; color: var(--oro-armas-d); border: 1.5px solid var(--oro);
}
.btn-ghost-oro:hover { background: var(--oro); color: var(--azul); transform: translateY(-2px); }

/* ── CHIPS (disciplinas) ── */
.chip {
  font-family: var(--ff); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .9rem; border-radius: 1px;
}

/* ── BADGES de tipo (torneos) ── */
.td {
  font-family: var(--ff); font-size: .58rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 1px; display: inline-block; text-align: center;
}
.td-a { background: rgba(200,168,75,.12); color: var(--oro-armas-d); border: 1px solid rgba(200,168,75,.3); }
.td-q { background: rgba(232,196,106,.15); color: var(--oro-arq-d); border: 1px solid rgba(232,196,106,.4); }
.td-b { background: rgba(26,46,74,.07); color: var(--azul); border: 1px solid rgba(26,46,74,.15); }

/* ── BADGES del hero ── */
.hb {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem;
  font-family: var(--ff); font-size: .6rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.hb-a { background: rgba(200,168,75,.1); border-left: 2px solid var(--oro-armas); color: rgba(255,255,255,.75); }
.hb-q { background: rgba(232,196,106,.1); border-left: 2px solid var(--oro-arq); color: rgba(255,255,255,.75); }
.hb-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ── CARD pasos (sumate) ── */
.paso {
  display: grid; grid-template-columns: 2.8rem 1fr; gap: 1.2rem; align-items: start;
  padding: 1.4rem 1.5rem; background: var(--bg-0);
  border-left: 2.5px solid var(--bg-2);
  transition: background .25s, border-color .25s; cursor: none;
}
.paso:hover { background: rgba(200,168,75,.07); border-color: var(--oro); }
.pn { font-family: var(--ff); font-size: 2rem; font-weight: 900; color: rgba(200,168,75,.2); line-height: 1; }
.paso:hover .pn { color: var(--oro); }
.pt2 { font-family: var(--ff); font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--azul); margin-bottom: .3rem; }
.pd { font-size: .8rem; color: var(--txt-2); line-height: 1.55; }

/* ── CARD torneos (.tr) ── */
.tr {
  display: grid; grid-template-columns: 78px 3fr 1.5fr 1.1fr 100px;
  align-items: center; gap: 1rem;
  padding: 1.35rem 1.8rem; background: var(--bg-1);
  border-left: 3px solid transparent;
  transition: background .22s, border-color .22s; cursor: none;
}
.tr:hover { background: var(--bg-2); border-color: var(--oro); }
.tr.pasado { opacity: .45; }
.tr.prox   { border-color: var(--oro-armas); background: rgba(200,168,75,.08); }
.tr.prox-q { border-color: var(--oro-arq); background: rgba(232,196,106,.1); }
.tr.hdr {
  background: var(--azul); border-left-color: var(--azul);
  padding: .75rem 1.8rem; cursor: default;
}
.tr.hdr:hover { background: var(--azul); }
.tr.hdr span { font-family: var(--ff); font-size: .58rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.4); }

.tf       { font-family: var(--ff); font-size: .78rem; font-weight: 800; color: var(--oro-armas-d); line-height: 1.2; }
.tf .mes  { display: block; font-size: .6rem; font-weight: 600; color: var(--txt-3); letter-spacing: .1em; text-transform: uppercase; }
.tn       { font-family: var(--ff); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--azul); line-height: 1.2; }
.tn .sub  { display: block; font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--txt-2); margin-top: 1px; }
.tl2      { font-size: .82rem; color: var(--txt-2); }
.te       { font-family: var(--ff); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: right; }
.te-p { color: var(--oro-armas-d); }
.te-c { color: #3D7A44; }
.te-x { color: var(--txt-3); }
.te-h { color: var(--bg-3); }

/* ── FORMULARIO ── */
.fg { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.fg label {
  font-family: var(--ff); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3);
}
.fg input, .fg select, .fg textarea {
  background: var(--bg-0); border: 1.5px solid var(--bg-2); color: var(--txt);
  font-family: var(--ffb); font-size: .95rem; padding: .85rem 1rem;
  outline: none; transition: border-color .2s, background .2s;
  resize: vertical; -webkit-appearance: none; cursor: none;
}
.fg select option { background: var(--bg-0); }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--oro); background: rgba(200,168,75,.04);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--txt-3); }

.bform {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; background: var(--azul); color: #fff; border: none;
  font-family: var(--ff); font-size: .75rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 1.1rem 2rem; cursor: none;
  transition: background .22s, transform .2s; margin-top: .5rem;
}
.bform:hover { background: var(--azul-m); transform: translateY(-2px); }
.bform svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.bform:disabled { opacity: .6; transform: none; }

.fnota { margin-top: 1rem; font-size: .82rem; color: var(--txt-3); line-height: 1.6; }