/**
 * Formularios globales — estilo Algolia Docs (https://www.algolia.com/doc)
 * Cargar DESPUÉS de Tailwind CDN para anular reset de inputs.
 */
:root {
  --form-border: #e2e8f0;
  --form-border-hover: #cbd5e1;
  --form-bg: #ffffff;
  --form-bg-muted: #f8fafc;
  --form-text: #334155;
  --form-label: #334155;
  --form-placeholder: #94a3b8;
  --form-focus: #6b0030;
  --form-focus-ring: rgba(107, 0, 48, 0.14);
  --form-radius: 0.5rem;
  --form-pad-y: 0.5625rem;
  --form-pad-x: 0.75rem;
  --form-min-h: 2.5rem;
  --form-font: 0.875rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Campos de texto, select y textarea */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
select,
textarea,
.form-control,
.form-select,
.admin-fix-input,
.xico-input {
  display: block;
  width: 100%;
  min-height: var(--form-min-h);
  padding: var(--form-pad-y) var(--form-pad-x);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background-color: var(--form-bg);
  color: var(--form-text);
  font: inherit;
  font-size: var(--form-font);
  line-height: 1.45;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

textarea,
textarea.form-control {
  min-height: 7rem;
  resize: vertical;
}

select,
.form-select,
select.form-control {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled):not([readonly]) {
  border-color: var(--form-border-hover);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.admin-fix-input:focus,
.xico-input:focus {
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px var(--form-focus-ring);
}

input[readonly],
textarea[readonly],
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled {
  background-color: var(--form-bg-muted);
  color: #64748b;
  cursor: not-allowed;
  opacity: 1;
}

/* Labels — estilo documentación */
label,
.form-label,
.adm-field label,
.vsc-field label {
  display: block;
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--form-label);
  line-height: 1.35;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"],
.form-check-input {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--form-border);
  border-radius: 0.25rem;
  background: #fff;
  accent-color: var(--form-focus);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

input[type="radio"],
.form-check-input[type="radio"] {
  border-radius: 50%;
}

/* Grupo con icono (registro) */
.input-icon-group { position: relative; }
.input-icon-group .input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: #64748b;
  opacity: 0.9;
  pointer-events: none;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-icon-group input,
.input-icon-group select {
  padding-left: 2.5rem;
}

/* Toggle password dentro de input-icon-group */
.input-icon-group .toggle-password {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem;
  min-height: 0;
  width: auto;
}
.input-icon-group input[type="password"] {
  padding-right: 2.5rem;
}

/* Validación */
input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.field-help,
.form-text {
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 0.375rem;
  line-height: 1.4;
}

/* Tablas admin — inputs compactos en filtros */
.adm-table input:not([type="checkbox"]):not([type="radio"]),
.table-shell input:not([type="checkbox"]):not([type="radio"]),
.adm-field input:not([type="checkbox"]):not([type="radio"]),
.adm-field select,
.adm-field textarea {
  min-height: var(--form-min-h);
}

@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea,
  .form-control {
    font-size: 1rem; /* evita zoom en iOS */
  }
}