/* ══════════════════════════════════════════════════════════════
   COMPONENTES — botones, fichas, cifras, formularios, estados
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────  BOTONES  ─────────────────────────
   §06 contrast table: «Negro sobre ámbar · Botones, avisos y
   señalización · Óptimo». That pairing is the primary button.
   «Blanco sobre ámbar — Prohibido: ilegible» — never produced. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 14px var(--s3);
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn .icon { width: 16px; height: 16px; }
.btn--sm { padding: 10px var(--s2); font-size: var(--t-mono-sm); }

/* Negro sobre ámbar */
.btn--ambar { background: var(--ambar); color: var(--negro); border-color: var(--ambar); }
.btn--ambar:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }

/* Negro sobre blanco */
.btn--linea { border-color: var(--ink); color: var(--ink); }
.btn--linea:hover { background: var(--ink); color: var(--ground); }

/* Todo contexto sobre Negro Obra: banda, portada, pie y menú. */
.band--negro .btn--linea,
.portada .btn--linea,
.footer .btn--linea,
.menu .btn--linea { border-color: var(--neg-ink); color: var(--neg-ink); }

.band--negro .btn--linea:hover,
.portada .btn--linea:hover,
.footer .btn--linea:hover,
.menu .btn--linea:hover { background: var(--neg-ink); color: var(--negro); }

.band--negro .btn--ambar:hover,
.portada .btn--ambar:hover,
.footer .btn--ambar:hover,
.menu .btn--ambar:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

/* Text link. Ámbar is restricted on light grounds (§06), so the link
   is Negro with an ámbar barra, not ámbar text. */
.enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
  box-shadow: inset 0 -2px 0 var(--ambar);
  transition: box-shadow var(--dur) var(--ease);
}
.enlace:hover { box-shadow: inset 0 -22px 0 -18px var(--ambar), inset 0 -2px 0 var(--ambar); }
.enlace .icon { width: 14px; height: 14px; }
.band--negro .enlace,
.portada .enlace,
.footer .enlace { color: var(--neg-ink); }

/* ────────────────────────  FICHA DE SERVICIO  ───────────────── */

.svc {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-ficha);
  background: var(--ground);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.svc:hover { border-color: var(--ink); background: var(--ground-alt); }
.svc__icon { color: var(--ambar); }
.svc__title { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase;
              line-height: var(--lh-display); color: var(--ink); }
.svc__desc { font-size: var(--t-menor); color: var(--ink-2); flex: 1; }
.svc__sub {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  font-family: var(--mono); font-size: var(--t-mono-sm);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.svc__sub span::after { content: ' ·'; color: var(--ambar); } /* separador: forma gráfica */
.svc__sub span:last-child::after { content: ''; }

/* ────────────────────────  CIFRAS DESTACADAS  ────────────────
   §07 allows Anton for «cifras destacadas». */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5); }
.cifra__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: var(--lh-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cifra__l {
  display: block;
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}
/* §06: ámbar sobre negro — adecuado */
.band--negro .cifra__n,
.portada .cifra__n { color: var(--ambar); }
.band--negro .cifra__l,
.portada .cifra__l { color: var(--neg-ink-2); }

/* ──────────────────  COMPROMISOS (§03) ─────────────────────── */

.compromisos { display: grid; gap: 0; }
.compromiso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}
.compromiso:last-child { border-bottom: 1px solid var(--line); }
.compromiso .num { padding-top: 4px; }
.compromiso h3 { margin-bottom: var(--s1); }
.band--negro .compromiso { border-color: var(--neg-line); }

/* ────────────────────────  PROCESO  ────────────────────────── */

.fase {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3) var(--s5);
  padding-block: var(--s5);
  border-top: 1px solid var(--line);
}
.fase__n { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.75rem);
           line-height: var(--lh-display); color: var(--ink); }
.band--negro .fase__n { color: var(--ambar); }
.fase__t { font-family: var(--display); font-size: var(--t-h2); text-transform: uppercase;
           line-height: var(--lh-display); color: var(--ink); margin-bottom: var(--s2); }
.band--negro .fase { border-color: var(--neg-line); }
.band--negro .fase__t { color: var(--neg-ink); }

/* ────────────────────────  LISTA DE ALCANCE  ───────────────── */

.alcance { list-style: none; display: grid; gap: var(--s2); }
.alcance li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: start;
  font-size: var(--t-menor);
  color: var(--ink-2);
}
.alcance .icon { color: var(--ambar); width: 18px; height: 18px; margin-top: 3px; }
.band--negro .alcance li,
.portada .alcance li { color: var(--neg-ink-2); }

/* ────────────────────────  ESTADOS (§06)  ────────────────────
   Verde y rojo únicamente aquí. */

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 4px var(--s1);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid;
}
.estado__punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado--si { color: var(--verde); border-color: var(--verde); }
.estado--no { color: var(--rojo);  border-color: var(--rojo); }

/* ────────────────────────  FORMULARIO  ─────────────────────── */

.campo { display: grid; gap: 6px; }
.campo + .campo { margin-top: var(--s3); }
.campo label {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.campo .req { color: var(--ink); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 13px var(--s2);
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-menor);
  transition: border-color var(--dur) var(--ease);
}
.campo textarea { min-height: 132px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-2); opacity: .7; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ink-2); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ambar);
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s2) center;
  padding-right: var(--s5);
}

.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.campo-fila .campo + .campo { margin-top: 0; }

.campo .err { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: .06em;
              color: var(--rojo); min-height: 1.1em; }
.campo.is-invalid input, .campo.is-invalid select, .campo.is-invalid textarea { border-color: var(--rojo); }

.form-nota { margin-top: var(--s3); font-size: var(--t-mono); color: var(--ink-2); }

.form-estado {
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--verde);
  border-left: var(--barra) solid var(--verde);
  border-radius: var(--r-sm);
  font-size: var(--t-menor);
  color: var(--ink);
}
.form-estado[hidden] { display: none; }

/* ────────────────────────  CINTA DE CIERRE  ─────────────────── */

.cierre { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }

/* ────────────────────────  IMAGEN REFERENCIAL  ───────────────
   §09: «Toda visualización o render debe identificarse con la
   etiqueta IMAGEN REFERENCIAL.» */
.referencial {
  position: absolute;
  left: var(--s2); bottom: var(--s2);
  padding: 4px var(--s1);
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .campo-fila { grid-template-columns: 1fr; }
  .campo-fila .campo + .campo { margin-top: var(--s3); }
  .fase { grid-template-columns: 1fr; gap: var(--s2); }
}