/* css/components.css — botones, cards, forms, chips, divisor diagonal. */

/* === Botones === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  border: 1px solid transparent;
  transition:
    transform var(--transition-base),
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--brand-magenta);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(233, 30, 99, 0.32);
}
.btn-primary:hover {
  background: #c81857;
  box-shadow: 0 10px 24px rgba(233, 30, 99, 0.42);
}

.btn-secondary {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--fg-primary);
}
.btn-secondary:hover {
  background: var(--fg-primary);
  color: #FFFFFF;
}

.btn-secondary-light {
  background: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.btn-secondary-light:hover {
  background: #FFFFFF;
  color: var(--fg-primary);
}

.btn-white {
  background: #FFFFFF;
  color: var(--brand-magenta);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.btn-white:hover {
  background: var(--bg-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.btn-large {
  padding: 18px 34px;
  font-size: 17px;
}

.btn-small {
  padding: 10px 18px;
  font-size: 13px;
}

/* Variantes por modelo (para fichas / CTAs específicos) */
.btn-model-a3 { background: var(--model-a3); color: var(--model-a3-fg); }
.btn-model-a5 { background: var(--model-a5); color: var(--model-a5-fg); }
.btn-model-a6 { background: var(--model-a6); color: var(--model-a6-fg); }
.btn-model-a8 { background: var(--model-a8); color: var(--model-a8-fg); }

/* === Cards === */

.card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-model {
  --card-color: var(--brand-magenta);
  background: var(--card-color);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 380px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-model:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 56px color-mix(in srgb, var(--card-color) 35%, transparent);
}
.card-model.is-yellow { color: var(--fg-primary); }

.card-model-a3 { --card-color: var(--model-a3); }
.card-model-a5 { --card-color: var(--model-a5); }
.card-model-a6 { --card-color: var(--model-a6); }
.card-model-a8 { --card-color: var(--model-a8); }

/* === Forms (esqueleto base, formulario completo en sesión futura) === */

.label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--fg-primary);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--bg-primary);
  color: var(--fg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--brand-magenta);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.18);
}

.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-magenta);
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: var(--space-1);
}

/* === Chips === */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-soft);
  color: var(--fg-primary);
  border: 1px solid var(--border-subtle);
}

.chip-magenta { background: var(--brand-magenta); color: #FFFFFF; border-color: transparent; }
.chip-orange  { background: var(--brand-orange);  color: #FFFFFF; border-color: transparent; }
.chip-yellow  { background: var(--brand-yellow);  color: var(--fg-primary); border-color: transparent; }
.chip-cyan    { background: var(--brand-cyan);    color: #FFFFFF; border-color: transparent; }

/* === Diagonal divider entre secciones === */

.diagonal-divider {
  position: relative;
  height: 80px;
  background: inherit;
  clip-path: polygon(0 0, 100% 60%, 100% 100%, 0 100%);
}

.diagonal-divider-inverted {
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}