/* ═══════════════════════════════════════════════════════
   FORM — componente reutilizable en /crear, /login, etc.
   ═══════════════════════════════════════════════════════ */

/* ─── Field wrapper ──────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-5);
}

.label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--sp-2);
}

.label--optional::after {
  content: ' (opcional)';
  font-weight: 400;
  color: var(--gray-400);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-top: var(--sp-1);
  line-height: 1.5;
}

.field__error {
  font-size: var(--text-xs);
  color: #dc2626;
  margin-top: var(--sp-1);
  display: none;
}

.field.has-error .field__error { display: block; }
.field.has-error .field__hint  { display: none; }

/* ─── Input base ─────────────────────────────────────── */
.input {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-base);
  color: var(--gray-800);
  background: #fff;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--r-lg);
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.input::placeholder { color: var(--gray-400); }

.input:focus {
  outline: none;
  border-color: var(--co);
  box-shadow: 0 0 0 3px var(--col);
}

.field.has-error .input {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px #fee2e2;
}

.textarea {
  resize: vertical;
  min-height: 110px;
}

/* ─── Input group (prefijo S/) ───────────────────────── */
.input-group {
  display: flex;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.input-group:focus-within {
  border-color: var(--co);
  box-shadow: 0 0 0 3px var(--col);
}

.field.has-error .input-group {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px #fee2e2;
}

.input-group__prefix {
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-50);
  color: var(--gray-500);
  font-weight: 700;
  font-size: var(--text-base);
  border-right: 1.5px solid var(--gray-200);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.input-group .input {
  border: none;
  border-radius: 0;
  box-shadow: none !important;
}

/* ─── Radio option ───────────────────────────────────── */
.radio-group { display: flex; flex-direction: column; gap: var(--sp-3); }

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.radio-option:hover { border-color: var(--com); background: var(--col); }

.radio-option.selected { border-color: var(--co); background: var(--col); }

.radio-option input[type="radio"] { display: none; }

.radio-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.radio-option.selected .radio-mark { border-color: var(--co); background: var(--co); }

.radio-mark__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.radio-option.selected .radio-mark__dot { opacity: 1; }

.radio-option__title { font-weight: 600; color: var(--gray-900); margin-bottom: 2px; font-size: var(--text-sm); }
.radio-option__desc  { font-size: var(--text-xs); color: var(--gray-500); line-height: 1.5; }

/* ─── Image tabs ─────────────────────────────────────── */
.img-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--gray-200);
  margin-bottom: var(--sp-4);
  gap: var(--sp-1);
}

.img-tab {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.img-tab.active { color: var(--co); border-bottom-color: var(--co); }
.img-tab-panel  { display: none; }
.img-tab-panel.active { display: block; }

/* ─── Dropzone ───────────────────────────────────────── */
.dropzone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
  position: relative;
  overflow: hidden;
}

.dropzone:hover, .dropzone.drag-over {
  border-color: var(--co);
  background: var(--col);
}

.dropzone__icon { font-size: 32px; margin-bottom: var(--sp-2); }

.dropzone__text { font-size: var(--text-sm); color: var(--gray-500); }
.dropzone__text strong { color: var(--co); }

.dropzone__preview {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: none;
}

.dropzone__preview.visible { display: block; }

/* ─── Checkbox ───────────────────────────────────────── */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--gray-600);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--co);
  cursor: pointer;
}

.checkbox-label a { color: var(--co); }
.checkbox-label a:hover { text-decoration: underline; }