/* ============================================================
 * Innovación Digital — components.css
 *
 * ESTRATEGIA DE CLASES:
 *   · Componentes Bootstrap nativos (.card, .badge, .form-control,
 *     .form-select, .form-label) → override directo con tokens
 *     --fxa-*. El HTML no necesita clases extra.
 *   · Componentes propios sin equivalente Bootstrap → prefijo fxa-
 *     (.fxa-btn-primary, .fxa-btn-ghost, .fxa-badge-lime, .fxa-badge-cat,
 *     .fxa-contact-card).
 *
 * ORDEN DE CARGA:
 *   1. bootstrap.css  2. root.css  3. base.css  4. layout.css
 *   5. components.css (este archivo)  6. customs.css
 * ============================================================ */


/* ============================================================
 * SECCIÓN 1 — OVERRIDES BOOTSTRAP
 * Restyling de componentes nativos con tokens --fxa-*
 * ============================================================ */


/* ----------------------------------------------------------
 * Card
 * ---------------------------------------------------------- */
.card {
  background-color: var(--fxa-card-bg);
  border: var(--fxa-border-width) solid var(--fxa-card-border);
  border-radius: var(--fxa-card-border-radius);
  box-shadow: var(--fxa-card-shadow);
  color: var(--fxa-body-color);
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--fxa-transition-base),
    transform    var(--fxa-transition-base),
    box-shadow   var(--fxa-transition-base);
}

/* Línea de acento superior al hacer hover */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--fxa-card-accent-color),
    transparent);
  opacity: 0;
  transition: opacity var(--fxa-transition-base);
}

.card:hover {
  border-color: var(--fxa-card-hover-border);
  transform: translateY(var(--fxa-card-hover-lift));
  box-shadow: var(--fxa-card-hover-shadow);
}

.card:hover::before { opacity: 1; }

.card-body {
  padding: var(--fxa-card-padding);
}

.card-footer {
  background: transparent;
  border-top: var(--fxa-border-width) solid var(--fxa-border-color);
  padding: 0.9rem var(--fxa-card-padding);
}

.card-title {
  color: var(--fxa-heading-color);
  font-weight: var(--fxa-font-weight-bold);
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}

.card-text {
  color: var(--fxa-muted-color);
  font-size: var(--fxa-font-size-sm);
  line-height: 1.65;
}

/* Modificador: sin efecto hover — para contact card y similares */
.card.card-static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--fxa-border-color);
}
.card.card-static::before { display: none; }


/* ----------------------------------------------------------
 * Formularios — override dark
 * ---------------------------------------------------------- */
.form-label {
  font-size: var(--fxa-label-font-size);
  font-weight: var(--fxa-label-font-weight);
  letter-spacing: var(--fxa-label-letter-spacing);
  text-transform: uppercase;
  color: var(--fxa-label-color);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  background-color: var(--fxa-input-bg);
  border-color: var(--fxa-input-border);
  border-radius: var(--fxa-input-border-radius);
  color: var(--fxa-input-color);
  font-family: var(--fxa-font-family);
  font-size: var(--fxa-input-font-size);
  padding: var(--fxa-input-padding);
  transition:
    border-color var(--fxa-transition-fast),
    box-shadow   var(--fxa-transition-fast);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--fxa-input-focus-bg);
  border-color: var(--fxa-input-focus-border);
  box-shadow: var(--fxa-input-focus-shadow);
  color: var(--fxa-input-color);
  outline: none;
}

.form-control::placeholder {
  color: var(--fxa-input-placeholder);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--fxa-input-disabled-bg);
  opacity: 1;
}

.form-select:disabled {
  background-color: var(--fxa-input-disabled-bg);
  opacity: 1;
}

.form-select option {
  background: var(--fxa-input-bg);
  color: var(--fxa-input-color);
}

textarea.form-control { resize: vertical; }


/* ----------------------------------------------------------
 * Badge nativo de Bootstrap
 * ---------------------------------------------------------- */
.badge {
  font-size: var(--fxa-badge-font-size);
  font-weight: var(--fxa-badge-font-weight);
  padding: var(--fxa-badge-padding);
  border-radius: var(--fxa-badge-border-radius);
}


/* ============================================================
 * SECCIÓN 2 — COMPONENTES PROPIOS (prefijo fxa-)
 * Sin equivalente directo en Bootstrap
 * ============================================================ */


/* ----------------------------------------------------------
 * fxa-btn-primary — CTA principal (acento sólido)
 * ---------------------------------------------------------- */
.fxa-btn-primary {
  background: var(--fxa-btn-primary-bg);
  color: var(--fxa-btn-primary-color);
  border: none;
  font-weight: var(--fxa-btn-font-weight);
  font-size: var(--fxa-btn-font-size);
  padding: var(--fxa-btn-padding-y) var(--fxa-btn-padding-x);
  border-radius: var(--fxa-btn-border-radius);
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition:
    background   var(--fxa-transition-base),
    transform    var(--fxa-transition-fast),
    box-shadow   var(--fxa-transition-base);
}

.fxa-btn-primary:hover,
.fxa-btn-primary:focus {
  background: var(--fxa-btn-primary-hover-bg);
  color: var(--fxa-btn-primary-color);
  transform: translateY(-2px);
  box-shadow: var(--fxa-btn-primary-shadow);
}


/* ----------------------------------------------------------
 * fxa-btn-ghost — outline / fantasma
 * ---------------------------------------------------------- */
.fxa-btn-ghost {
  background: transparent;
  color: var(--fxa-btn-ghost-color);
  border: var(--fxa-border-width) solid var(--fxa-btn-ghost-border);
  font-weight: var(--fxa-font-weight-semibold);
  font-size: var(--fxa-btn-font-size);
  padding: var(--fxa-btn-padding-y) var(--fxa-btn-padding-x);
  border-radius: var(--fxa-btn-border-radius);
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition:
    border-color var(--fxa-transition-fast),
    color        var(--fxa-transition-fast),
    background   var(--fxa-transition-fast);
}

.fxa-btn-ghost:hover,
.fxa-btn-ghost:focus {
  border-color: var(--fxa-btn-ghost-hover-border);
  color: var(--fxa-btn-ghost-hover-color);
  background: var(--fxa-btn-ghost-hover-bg);
}


/* ----------------------------------------------------------
 * fxa-badge-lime — pill de tecnología (monospace, acento)
 * ---------------------------------------------------------- */
.fxa-badge-lime {
  font-family: var(--fxa-badge-font-family);
  font-size: var(--fxa-badge-font-size);
  font-weight: var(--fxa-badge-font-weight);
  letter-spacing: var(--fxa-badge-letter-spacing);
  color: var(--fxa-badge-lime-color);
  background: var(--fxa-badge-lime-bg);
  border: var(--fxa-border-width) solid var(--fxa-badge-lime-border);
  padding: var(--fxa-badge-padding);
  border-radius: var(--fxa-badge-border-radius);
  display: inline-block;
}


/* ----------------------------------------------------------
 * fxa-badge-cat — badge de categoría (sólido)
 * ---------------------------------------------------------- */
.fxa-badge-cat {
  font-size: var(--fxa-badge-font-size);
  font-weight: var(--fxa-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fxa-badge-cat-color);
  background: var(--fxa-badge-cat-bg);
  padding: var(--fxa-badge-padding);
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
}


/* ----------------------------------------------------------
 * fxa-contact-card — contenedor del formulario de contacto
 * No es un .card Bootstrap porque no tiene efecto hover.
 * ---------------------------------------------------------- */
.fxa-contact-card {
  background: var(--fxa-card-bg);
  border: var(--fxa-border-width) solid var(--fxa-card-border);
  border-radius: var(--fxa-card-border-radius);
  padding: 2.5rem;
}

@media (max-width: 575px) {
  .fxa-contact-card { padding: 1.75rem 1.25rem; }
}