/* ===================================
   FORMULARIOS — COMPONENTE GLOBAL
   =================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-block-end: var(--spacing-lg);
  inline-size: 100%;
}

/* Label */

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-300);
  letter-spacing: var(--letter-spacing-tight);
}

/* Inputs base */

.input {
  inline-size: 100%;
  padding: var(--spacing-sm) var(--spacing-md);

  background-color: var(--color-gray-900-alpha-60);
  color: var(--color-white);
  border: 1px solid var(--color-gray-700);
  border-radius: var(--radius-md);

  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);

  transition:
    border-color var(--duration-normal) var(--easing-out),
    background-color var(--duration-normal) var(--easing-out),
    box-shadow var(--duration-normal) var(--easing-out);
}

/* Hover */
.input:hover {
  border-color: var(--color-gray-600);
}

/* Focus */
.input:focus {
  outline: none;
  border-color: var(--color-blue-400);
  box-shadow: 0 0 0 3px var(--color-blue-500-alpha-20);
}

/* Placeholder */
.input::placeholder {
  color: var(--color-gray-600);
}

/* Disabled */
.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ===================================
   TAMAÑOS
   =================================== */

.input-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.input-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
}


/* ===================================
   TEXTAREA
   =================================== */

.textarea {
  min-block-size: 6rem;
  resize: vertical;
}


/* ===================================
   SELECT
   =================================== */

.select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23B0B0B0" height="16" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M5.516 7.548L10 12.032l4.484-4.484L16 8.063l-6 6-6-6z"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 1rem;

  padding-inline-end: 2.5rem;
}


/* ===================================
   INPUT CON ICONO
   =================================== */

.input-wrapper {
  position: relative;
  inline-size: 100%;
}

.input-icon {
  position: absolute;
  inset-inline-start: var(--spacing-md);
  inset-block-start: 50%;
  transform: translateY(-50%);

  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);

  pointer-events: none;
  opacity: 0.7;
}

.input-with-icon {
  padding-inline-start: calc(var(--spacing-lg) + var(--icon-size-md));
}


/* ===================================
   ESTADOS — Validación
   =================================== */

.input-error {
  border-color: var(--color-rose-400);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-rose-400) 20%, transparent);
}

.input-success {
  border-color: var(--color-lime-400);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-lime-400) 20%, transparent);
}

.form-error-message {
  font-size: var(--font-size-sm);
  color: var(--color-rose-400);
}

.form-success-message {
  font-size: var(--font-size-sm);
  color: var(--color-lime-400);
}